@extends('layouts.app')

@section('content')
  
    <input type="hidden" id="editFlag" value="{{ $editFlag }}">
    <input type="hidden" id="queueFlag" value="{{ Gate::check('is_super_admin') ? 'false' : 'true' }}">

    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="{{ url('/home') }}">Home</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Perfil de Acesso</span>
                    </li>
                </ul>
            </div>
          <h1 class="page-title nova-faixa"> Perfil de Acesso
            <div class="pull-right">
                <i class="nova-faixa-icon icon-notebook" style="padding-right:20px; "></i>
            </div>
        </h1>
        <h4>
            <small class="pull-right">
                <span class="ajuda" data-toggle="confirmation" data-popout="true" data-trigger="hover" data-placement="left" data-original-title="" title="" id="ajuda">
                    Ajuda <i class="fa fa-question-circle" aria-hidden="true"></i>
                </span>
            </small>
        </h4>
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet light bordered" style="height: 580px">                                 
                        
                        <!-- BLOCO DE PESQUISA -->
                        <div class="portlet" style="margin-bottom: 0;">
                            <div class="portlet-body form">
                                <!-- FORMULARIO DE PESQUISA -->
                                    <!-- SUBSTITUIR OS COMPOS PELO DA CLASSE   -->
                                <form class="horizontal-form" method="post" id="formPesquisa" onKeyPress="return submitenter(this,event)">
                                    {{ csrf_field() }}  
                                    <div class="" style="padding-bottom: 0;">
                                        <div class="row">
                                            <div class="col-md-12">
                                                @can('config-perfilacesso-cadastrar')
                                                <a data-toggle="modal" data-toggle="modal" data-target="#modalStoreRole" id="cadastrar">
                                                    <button type="button" class="btn blue">
                                                        <i class="fa fa-save"></i> Cadastrar
                                                    </button>
                                                </a>
                                                @endcan
                                            </div>
                                        </div>
                                        <div class="form-body row">
                                            <div class="col-md-11 nopadding" style="padding-bottom: 0px;">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"><i class="fa fa-search"></i> Pesquisa - Perfil de Acesso</label>
                                                        <input type="text" class="form-control" name="nome" placeholder="Ex: Nome do Perfil">
                                                    </div>
                                                </div>  
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label class="control-label" style="width: 100%; height: 15px;"></label>
                                                        <button type="button" class="btn blue" id="pesquisar">
                                                            <i class="fa fa-search"></i> Pesquisar
                                                        </button>
                                                    </div>
                                                </div>   
                                            </div>
                                        </div>
                                    </div>
                                </form>


                            </div>
                            <div class="col-md-12" style="padding-left: 0px;">
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="glyphicon glyphicon-list-alt"></i>Perfil</div>
                            

                        </div>
                       <style type="text/css">
                           .centralizar{
                            text-align: center;
                           }
                       </style>
                        <!-- inicio tabela-->
                        
                            <div class="portlet-body">
                            <table class="table table-striped table-bordered table-hover table-checkable order-column" id="sample_1">
                                <thead>
                                    <tr>
                                        <th>
                                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" />
                                                <span></span>
                                            </label>
                                        </th>
                                        <th>Perfil</th>
                                        <th>Permissões</th>
                                        <th>Usuários</th>
                                        <th>Configurações</th>
                                        <th>Atendimento</th>
                                        <th>Filas</th>
                                        <th>Dashboard</th>
                                        <th>Relatórios</th>
                                        <th>Ações</th>
                                   </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                        </div> <!-- End Pesquisa -->
                            
                        <!-- Tabela com a pesquisa -->

                        
                        
                    
                    </div>
                    <!-- END EXAMPLE TABLE PORTLET-->
                </div>
            </div>
        </div>
        <!-- END CONTENT BODY -->
    </div>
    <!-- END CONTENT -->

<div class="modal fade" id="ModalVisualizar" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" style="font-weight: 600 !important">Visualizar Perfil de Acesso</h4>
            </div>
            <div class="modal-body">               
                <form action="" class="horizontal-form" method="post" id="formVisualizar">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Tipo de Perfil de Acesso: </label>
                                <span class="nome"></span>
                            </div>
                            <div class="form-group">
                                <label class="control-label">Permissão:</label>
                                <div class="form-group permissao">
                                    
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                    </div>
                </form>    
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>

@can('config-perfilacesso-cadastrar')
<div class="modal fade" id="modalStoreRole" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" style="font-weight: 600 !important">Cadastrar Perfil de Acesso</h4>
            </div>
            <div class="modal-body">
               
                <form action="" class="horizontal-form" method="post" id="formCadastro">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Tipo de Perfil de Acesso: </label>
                                <span class="required"> * </span>
                                <input type="text" class="form-control" name="name">
                            </div>
                            <div class="form-group">
                                <label class="control-label">Permissões:</label>
                                <span class="required"> * </span>

                                @foreach( $permissions as $group => $category )                               
                                    <h5 style="color: #426a9e; font-weight: bolder;" class="control-label">{{$group}}</h5>
                                    @foreach($category as $key => $listPermissions )
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label class="control-label" style="padding-left: 15px;text-transform: lowercase!important;">{{$key}}</label>
                                            </div>
                                        </div>
                                        <div class="row">        
                                        @foreach( $listPermissions as $p )
                                            <div class="col-md-3">
                                                <aside style="padding-left: 15px; display: inline-flex; align-items: center; gap: 0.5rem;">
                                                    <label style="text-transform: lowercase!important;">
                                                        <input type="checkbox" name="permissions[]" value="{{$p->id}}">
                                                        <span>{{$p->description}}</span>
                                                    </label>
                                                </aside>
                                            </div>
                                        @endforeach
                                        </div>
                                    </div>                                        
                                    @endforeach            
                                @endforeach
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                        <button type="button" class="btn blue" id="storeRole">
                            <i class="fa fa-check"></i> Salvar
                        </button>
                    </div>
                </form>    
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>
@endcan

@can('config-perfilacesso-editar')
<div class="modal fade modalEditPermissions" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" style="font-weight: 600 !important">Editar Perfil de <span>Configurações</span></h4>
            </div>
            <div class="modal-body">
                <form action="" class="horizontal-form" method="post" id="formEditar">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Nome regra:</label>
                                <span class="required"> * </span>
                                <input type="text" class="form-control" name="roleName">
                            </div>
                            <div class="form-group">
                                <label class="control-label">Permissão:</label>
                                <span class="required"> * </span>
                            </div>
                        </div>
                    </div>
                    <div class="row permissionsRoleGroup">
                            {{-- <div class="col-md-12">
                                <label class="control-label" style="padding-left: 15px;">CLIENTE</label>
                            </div>
                            <div class="col-md-3">
                                <span style="padding-left: 15px;">
                                <label style="text-transform: lowercase;">
                                <input type="checkbox" name="rolePermissions[]" style="text-transform: lowercase;" value="2">
                                VISUALIZAR CLIENTE</label>
                                </span>
                            </div>
                            <div class="col-md-3">
                                <span style="padding-left: 15px;">
                                <label style="text-transform: lowercase;">
                                <input type="checkbox" name="rolePermissions[]" style="text-transform: lowercase;" value="3">
                                CADASTRAR CLIENTE</label>
                                </span>
                            </div>
                            <div class="col-md-3">
                                <span style="padding-left: 15px;">
                                <label style="text-transform: lowercase;">
                                <input type="checkbox" name="rolePermissions[]" style="text-transform: lowercase;" value="4">
                                EDITAR CLIENTE</label>
                                </span>
                            </div>
                            <div class="col-md-3">
                                <span style="padding-left: 15px;">
                                <label style="text-transform: lowercase;">
                                <input type="checkbox" name="rolePermissions[]" style="text-transform: lowercase;" value="5">
                                EXCLUIR CLIENTE</label>
                                </span>
                            </div>
                            <div class="col-md-3">
                                <span style="padding-left: 15px;">
                                <label style="text-transform: lowercase;">
                                <input type="checkbox" name="rolePermissions[]" style="text-transform: lowercase;" value="6">
                                EXPORTAR CLIENTE</label>
                                </span>
                            </div>
                            <div class="col-md-3">
                                <span style="padding-left: 15px;">
                                <label style="text-transform: lowercase;">
                                <input type="checkbox" name="rolePermissions[]" style="text-transform: lowercase;" value="7">
                                SERVIDOR CLIENTE</label>
                                </span>
                            </div> --}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                        <button type="button" class="btn blue" id="editRole">
                            <i class="fa fa-check"></i> Salvar
                        </button>
                    </div>
                </form>    
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>

<div class="modal fade modalEditRolesQueues" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" style="font-weight: 600 !important">Filas vinculadas</h4>
            </div>
            <div class="modal-body text-center">
                <form action="" class="horizontal-form" method="post" id="formEditar">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <h4 class="control-label">FILAS</h4>
                        </div>
                        <div class="col-md-12">
                            <select class="form-control" id='filas_atendimento'  name="pesquisa_filas[]" multiple="multiple"></select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                        <button type="button" class="btn blue" id="editRolesQueuesStore">
                            <i class="fa fa-check"></i> Salvar
                        </button>
                    </div>
                </form>    
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>
@endcan
           
@can('config-perfilacesso-excluir')
<div class="modal fade" id="modalDeleteRole" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <button type="button" class="close" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="mensagem" style="font-weight: 600 !important"></h4>
            </div>
            <meta name="csrf-token" content="{{ csrf_token() }}">

            <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Não</button>
                    <button type="button" class="btn blue" id="deleteRole">
                        <i class="fa fa-check"></i> Sim</button>
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>
@endcan
@endsection

@push('scripts')
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="{{ asset('global/scripts/datatable.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/jquery-repeater/jquery.repeater.1.2.1.min.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ asset('pages/scripts/acesso/table-datatables-managed.js') }}" type="text/javascript"></script>
<link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css"/>
<script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/acesso/form-repeater.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/acesso/bootstrap-confirmation-index.js') }}" type="text/javascript"></script>
<style type="text/css">
    .multiselect-container>li
    {
        padding-left: 16px;
    }
    .multiselect-all, .multiselect-group b
    {
        color: #426a9e!important;
    }
    .multiselect-all, .multiselect-group
    {
        padding-left: 0!important;
    }
    .select-option
    {
        padding-left: 16px!important;
    }
</style>
<!-- END PAGE LEVEL SCRIPTS -->
@endpush