@extends('layouts.default')
@section('content')

<!-- Modal Buscar Usuario -->
<div class="modal fade" id="modalEmpleadosUsuarios" tabindex="-1" role="dialog" aria-labelledby="modalEmpleadosUsuariosLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalEmpleadosUsuariosLabel" style="font-size:1.2em">Usuarios y/o Empleados</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-4">
                    <div class="form-group">
                        <span class="x-label">Nombre:</span>
                        <input type="text" class="x-form-control" id="searchName" autocomplete="off" />
                    </div>
                </div>
                <div class="row">
                    <div class="table-responsive" style="height:400px;overflow:auto">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Usuario</th>
                                    <th>Nombre</th>
                                    <th>Zona</th>
                                    <th>Puesto</th>
                                </tr>
                            </thead>
                            <tbody id="bodyUsuarios"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="modalEmpleadosUsuariosClose" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Folios Masivos -->
<div class="modal fade" id="modalFoliosMasivos" tabindex="-1" role="dialog" aria-labelledby="modalEmpleadosUsuariosLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalEmpleadosUsuariosLabel" style="font-size:1.2em">Folios Masivos</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-2">
                        <div class="form-group">
                            <span class="x-label">Sigla Sucursal:</span>
                            <input type="text" class="x-form-control text-uppercase" id="sigleSucursal" readonly autocomplete="off" />
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="form-group">
                            <span class="x-label">Sigla Nombre:</span>
                            <input type="text" class="x-form-control text-uppercase" id="siglaNombre" onchange="modalFoliosMasivos()" autocomplete="off" />
                        </div>
                    </div>
                    <div class="col-2">
                        <button type="button" id="buttonCrear" class="btn btn-success btn-icon-text" onclick="crearFoliosMasivos()" style="margin:9px;">
                        Crear
                        </button>  
                    </div>
                </div>
                <div class="row">
                    <div class="col-4">
                        <br>
                        <div class="row">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title mb-3" style="font-size:1.2em; font-weight:bold;">Sigla Operacion</h6>
                                    <ul class="list-group" id="listaSiglasOperacion">
                                        
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <br>
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title mb-3" style="font-size:1.2em; font-weight:bold;">Folios</h6>
                                <ul class="list-group" id="listaFolios">

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="modalEmpleadosUsuariosClose" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between" style="font-size:1.2em; font-weight:bold; flex-direction: row"> 
                <div class="p-1">
                    <i class="icon-edit"></i> <span>Permisos y Acessos al Sistema</span>
                </div>
            </div>
            <div class="card-body" style="padding:10px">
                <div class="row">
                    <div class="col-md-12">                 
                        <div class="row">
                            <div class="col-md-6">     
                                <span class="x-label">Usuario o Nombre del Empleado:*</span>
                                <div class="input-group">
                                    <input type="text" class="form-control x-form-control-sm" id="idUsuario" style="display:none"/>
                                    <input type="text" class="form-control x-form-control-sm" style="padding:5px !important" id="nameUsername" placeholder="" readonly autocomplete="off" />
                                    <div class="input-group-append">
                                        <button class="btn btn-sm btn-secondary" type="button" onclick="abreModalUsername()">
                                            <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                        </button>
                                    </div>
                                </div>   
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="modulos-tab" data-bs-toggle="tab" data-bs-target="#modulos" type="button" role="tab" aria-controls="modulos" aria-selected="false">
                            Modulos
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pestanias-tab" data-bs-toggle="tab" data-bs-target="#pestanias" type="button" role="tab" aria-controls="pestanias" aria-selected="false">
                            Pestañas
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="almacenes-tab" data-bs-toggle="tab" data-bs-target="#almacenes" type="button" role="tab" aria-controls="almacenes" aria-selected="false">
                            Almacenes
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="almacenesdestino-tab" data-bs-toggle="tab" data-bs-target="#almacenesdestino" type="button" role="tab" aria-controls="almacenesdestino" aria-selected="false">
                            Almacenes Destino
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="foliosusuario-tab" data-bs-toggle="tab" data-bs-target="#foliosusuario" type="button" role="tab" aria-controls="foliosusuario" aria-selected="false">
                            Folios
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="otrospermisos-tab" data-bs-toggle="tab" data-bs-target="#otrospermisos" type="button" role="tab" aria-controls="otrospermisos" aria-selected="false">
                            Permisos
                        </button>
                    </li>
                </ul>
                <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA MODULOS///////////////////////////////////////////////////////////////////////////////-->
                <div class="tab-content" id="myTabContent" style="padding:1em; border: #DDD 1px solid !important">
                    <div class="tab-pane fade show active" id="modulos" role="tabpanel" aria-labelledby="modulos-tab">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body" style="padding:10px">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <div class="form-group" id="divEmpresa" style="display:none;">
                                                            Selecciona una empresa:*<br/>
                                                            <select class="x-form-control" id="empresausuario">

                                                            </select> 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="row justify-content-end">
                                                    <div class="col-4">  
                                                        <button type="button" id="buttonLimpiar" class="btn btn-secondary btn-icon-text" onclick="limpiarInputs()" style="margin:9px; display:none;">
                                                        Limpiar                                                                          
                                                        </button>  
                                                    </div>
                                                    <div class="col-4">
                                                        <button type="button" id="buttonActualizar" class="btn btn-success btn-icon-text" onclick="guardarPermisos()" style="margin:9px; display:none;">
                                                        Actualizar                                                                          
                                                        </button>  
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row"> 
                                            <div class="table-responsive pt-3">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th rowspan="2"> Módulo </th>
                                                            <th rowspan="2"> Submodulo </th>
                                                            <th rowspan="2">
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="acceso" onClick="checkAllP('acceso')">
                                                                    <label class="custom-control-label" for="checkChecked">Acceso</label>
                                                                </div>
                                                            </th>
                                                            <th colspan="8" style="text-align:center"> Permisos </th>
                                                        </tr>
                                                        <tr>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="ver" onClick="checkAllP('ver')">
                                                                    <label class="custom-control-label" for="checkChecked">Ver</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="aprobar" onClick="checkAllP('aprobar')">
                                                                    <label class="custom-control-label" for="checkChecked">Aprobar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="autorizar" onClick="checkAllP('autorizar')">
                                                                    <label class="custom-control-label" for="checkChecked">Autorizar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="crear" onClick="checkAllP('crear')">
                                                                    <label class="custom-control-label" for="checkChecked">Guardar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="rechazar" onClick="checkAllP('rechazar')">
                                                                    <label class="custom-control-label" for="checkChecked">Rechazar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="actualizar" onClick="checkAllP('actualizar')">
                                                                    <label class="custom-control-label" for="checkChecked">Actualizar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="borrar" onClick="checkAllP('borrar')">
                                                                    <label class="custom-control-label" for="checkChecked">Borrar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="imprimir" onClick="checkAllP('imprimir')">
                                                                    <label class="custom-control-label" for="checkChecked">Imprimir</label>
                                                                </div>
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="tbody">
                                                    </tbody>
                                                </table>							
                                            </div>		
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA PESTAÑAS///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="pestanias" role="tabpanel" aria-labelledby="pestanias-tab">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body" style="padding:10px">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <!-- <div class="form-group" id="divEmpresa" style="display:none;">
                                                            Selecciona una empresa:*<br/>
                                                            <select class="x-form-control" id="empresausuario">

                                                            </select> 
                                                        </div> -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="row justify-content-end">
                                                    <div class="col-4">  
                                                        <button type="button" id="buttonLimpiarPestanias" class="btn btn-secondary btn-icon-text" onclick="limpiarInputs()" style="margin:9px; display:none;">
                                                        Limpiar                                                                          
                                                        </button>  
                                                    </div>
                                                    <div class="col-4">
                                                        <button type="button" id="buttonActualizarPestanias" class="btn btn-success btn-icon-text" onclick="guardarAccesosPestanias()" style="margin:9px; display:none;">
                                                        Actualizar                                                                          
                                                        </button>  
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row"> 
                                            <div class="table-responsive pt-3">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th rowspan="2"> Submodulo </th>
                                                            <th rowspan="2"> Pestañas </th>
                                                            <th rowspan="2">
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="acceso2" onClick="checkAllP('acceso2')">
                                                                    <label class="custom-control-label" for="checkChecked">Acceso</label>
                                                                </div>
                                                            </th>
                                                            <th colspan="8" style="text-align:center"> Permisos </th>
                                                        </tr>
                                                        <tr>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="ver2" onClick="checkAllP('ver2')">
                                                                    <label class="custom-control-label" for="checkChecked">Ver</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="aprobar2" onClick="checkAllP('aprobar2')">
                                                                    <label class="custom-control-label" for="checkChecked">Aprobar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="autorizar2" onClick="checkAllP('autorizar2')">
                                                                    <label class="custom-control-label" for="checkChecked">Autorizar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="crear2" onClick="checkAllP('crear2')">
                                                                    <label class="custom-control-label" for="checkChecked">Guardar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="rechazar2" onClick="checkAllP('rechazar2')">
                                                                    <label class="custom-control-label" for="checkChecked">Rechazar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="actualizar2" onClick="checkAllP('actualizar2')">
                                                                    <label class="custom-control-label" for="checkChecked">Actualizar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="borrar2" onClick="checkAllP('borrar2')">
                                                                    <label class="custom-control-label" for="checkChecked">Borrar</label>
                                                                </div>
                                                            </th>
                                                            <th>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input" id="imprimir2" onClick="checkAllP('imprimir2')">
                                                                    <label class="custom-control-label" for="checkChecked">Imprimir</label>
                                                                </div>
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="tbodyPestanias">
                                                    </tbody>
                                                </table>							
                                            </div>		
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA almacenes///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="almacenes" role="tabpanel" aria-labelledby="almacenes-tab">
                        <div class="row">
                            <div class="col-6">
                                <br>
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title mb-3">Tus almacenes</h6>
                                        <ul class="list-group" id="listTusAlmacenes">
                                            
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <br>
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title mb-3">Todos los almacenes</h6>
                                        <ul class="list-group" id="listAllAlmacenes">
        
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA almacenes///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="almacenesdestino" role="tabpanel" aria-labelledby="almacenesdestino-tab">
                        <div class="row">
                            <div class="col-6">
                                <br>
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title mb-3">Tus almacenes de destino</h6>
                                        <ul class="list-group" id="listTusAlmacenesdestino">
                                            
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <br>
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title mb-3">Todos los almacenes</h6>
                                        <ul class="list-group" id="listAllAlmacenesdestino">
        
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA FOLIOS///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="foliosusuario" role="tabpanel" aria-labelledby="foliosusuario-tab">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    Almacen:*<br/>
                                    <div id="divalmacen">
                                        <select class="x-form-control">

                                        </select>
                                    </div>   
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    Operaciones:*<br/>
                                    <div id="divoperacion">
                                        <select class="x-form-control" id="operacionesfolios">

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    Turno:*<br/>
                                    <div id="divturno">
                                        <select class="x-form-control" id="turnofolios">

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    Serie:*<br/>
                                    <input type="text" class="x-form-control text-uppercase" id="seriefolio" placeholder="Escribe una serie para el usuario" autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    Folio:*<br/>
                                    <input type="number" class="x-form-control" id="numfolio" autocomplete="off" />
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button type="button" id="buttonanadir" class="btn btn-success btn-icon-text" onclick="anadirUsuarioTurno()" style="margin:9px; display:none;">
                                Añadir                                                                          
                                </button>  
                                <button type="button" id="buttonactualizar" class="btn btn-success btn-icon-text" onclick="actualizarUsuarioTurno()" style="margin:9px; display:none;">
                                Actualizar                                                                          
                                </button>
                                <button type="button" id="buttonMasivo" class="btn btn-warning btn-icon-text" onclick="modalFoliosMasivos()" data-bs-toggle="modal" data-bs-target="#modalFoliosMasivos" style="margin:9px; display:none;">
                                Masivo
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="row" style="height:520px; overflow:auto">
                                <table class="table table-striped mx-2">
                                    <thead>
                                        <tr>
                                            <th>Operación</th>
                                            <th>Almacén</th>
                                            <th>Turno</th>
                                            <th>Serie</th>
                                            <th>Folio</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableFolios">
                                        
                                    </tbody>
                                </table>
                            </div> 
                        </div>
                    </div>  
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA PERMISOS///////////////////////////////////////////////////////////////////////////////-->              
                    <div class="tab-pane fade" id="otrospermisos" role="tabpanel" aria-labelledby="otrospermisos-tab">
                        <div class="row justify-content-end">
                            <div class="col-2">  
                                <button type="button" id="buttonLimpiarPermisos" class="btn btn-secondary btn-icon-text" onclick="limpiarCheckBoxsPermisos()" style="margin:9px; display:none;">
                                Limpiar                                                                          
                                </button>  
                            </div>
                            <div class="col-2">
                                <button type="button" id="buttonActualizarPermisos" class="btn btn-success btn-icon-text" onclick="guardarCheckBoxsPermisos()" style="margin:9px; display:none;">
                                Actualizar                                                                          
                                </button>  
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <br>
                                <div class="row">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title mb-3" style="font-size:1.2em; font-weight:bold;">Tipos de Ventas</h6>
                                            <ul class="list-group" id="listAllTiposVentas">
                                                
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title mb-3" style="font-size:1.2em; font-weight:bold;">Formas de Pago</h6>
                                            <ul class="list-group" id="listAllFormasPago">
                                                
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title mb-3" style="font-size:1.2em; font-weight:bold;">Documentos para Subir</h6>
                                            <ul class="list-group" id="listAllDocumentosSubir">
                                                
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <br>
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title mb-3" style="font-size:1.2em; font-weight:bold;">Tipos de Documentos (Reimpresion)</h6>
                                        <ul class="list-group" id="listAllTiposDocumentos">
        
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <br>
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title mb-3" style="font-size:1.2em; font-weight:bold;">Reportes</h6>
                                        <ul class="list-group" id="listAllReportes">
        
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA FIN///////////////////////////////////////////////////////////////////////////////-->
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.nav-link.active{
    background: #90caf9 !important
}
#bordesTable{
    border: 1px solid #000000;
    text-align: center;
}
</style>

@stop
@section('jspage')
    <script src="jsprod/permisos.js"></script>
@stop