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

<!-- Modal Clasificaciones -->
<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-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-4">     
                                <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="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>
                </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 justify-content-end">
                                            <div class="col-md-2">  
                                                <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-md-2">
                                                <button type="button" id="buttonActualizar" class="btn btn-success btn-icon-text" onclick="guardarPermisos()" style="margin:9px; display:none;">
                                                Actualizar                                                                          
                                                </button>  
                                            </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="5" 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="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="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 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>
                            </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 almacenes///////////////////////////////////////////////////////////////////////////////-->              
                </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