@extends('layouts.menu')

@section('title', 'verEmpleados')

@section('contenido')

    <div class="card bg-light shadow-none p-3 mb-5 bg-light rounded">
        <div class="card-header card-header-pr77 mb-3">
            <div class="row justify-content-between">
                <div class="col-8">
                    <div class="row justify-content-between">
                        <div class="col-6">
                            <h2><b>Empleados</b></h2>
                        </div>
                        <div class="col-6" style=" display: flex; justify-content: center; align-items: center; ">

                        </div>
                    </div>
                </div>
            <!--<div class="col-2" style="display: flex; justify-content: end;">
                    <a href="{{route('AgregaPersona')}}" class="btn btn-primary">
                        <i class="fa-solid fa-user-plus me-1"></i>
                        Agregar
                    </a>
                </div>-->
            </div>

        </div>

        <div class="card-body">
            {{-- Filtros --}}
            <div class="row">
                <div class="col-sm-6 col-md-4 col-lg-2 my-2" style=" display: flex;  justify-content: end; ">
                </div>
                <h3 class="fs-title-secondary"><i class="fas fa-filter"></i> Filtros:
                </h3>
                <hr class="separator">
                <div class="col-sm-4 col-md-3 col-lg-1 my-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            Servicios
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark" style="max-height: 300px; overflow: auto;">
                            @foreach ($servicios as $servicio)
                                <li class="mx-2">
                                    <div class="d-flex align-items-center dropdown-item">
                                        <input class="filtros mr-2" type="checkbox" name="servicios"
                                               id="servicio_{{str_replace(' ', '_', $servicio->servicio)}}"
                                               onChange="filtrar_tabla()" value="{{$servicio->servicio}}">
                                        <label class="form-check-label fontS12"
                                               for="servicio_{{str_replace(' ', '_', $servicio->servicio)}}"> {{$servicio->servicio}} </label>
                                    </div>
                                </li>
                            @endforeach

                        </ul>
                    </div>
                </div>

                <div class="col-sm-4 col-md-3 col-lg-1 my-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            Puertas
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark" style="max-height: 300px; overflow: auto;">
                            @foreach ($puertas as $puerta)
                                <li class="mx-2">
                                    <div class="d-flex align-items-center dropdown-item">
                                        <input class="filtros mr-2" type="checkbox"
                                               id="puerta_{{str_replace(' ', '_', $puerta)}}" name="puertas"
                                               onChange="filtrar_tabla()" value="{{$puerta}}">
                                        <label class="form-check-label fontS12"
                                               for="puerta_{{str_replace(' ', '_', $puerta)}}"> {{$puerta}} </label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

            </div>
            <br>
            {{-- Tabla de Asistencia --}}
            <div class="table-responsive mt-2">
                <table data-order='[[ 0, "desc" ]]' id="tabla_asistencia" class="table compact">
                    <thead class="table-dark">
                    <tr>
                        <th width="20px">ID</th>
                        <th>Servicio</th>
                        <th>Puerta</th>
                        <th>Elemento</th>
                        <th>Telefono</th>
                        <th>Puesto</th>
                        <th>Fecha Ingreso</th>
                        <th>Sueldo Quincenal</th>
                        <th>Bono</th>
                        <th>CURP</th>
                        <th>RFC</th>
                        <th>NSS</th>
                        <th>Contacto de emergencia</th>
                        <th>IMSS</th>
                        <th>Banco</th>
                        <th>No. Tarjeta</th>
                        {{-- <th width="200px">{{$now}}</th> --}}
                        <th width="250px">
                            Opciones
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($empleados as $key => $empleado)
                        <tr class="{{($empleado->documentos == 15) ? 'table-success' : ($empleado->documentos == 0) ? 'table-danger' : 'table-warning'}}">
                            <td>{{$empleado->id}}</td>
                            <td>{{$empleado->servicio}}</td>
                            <td>{{$empleado->puerta}}</td>
                            <td>{{$empleado->nombre}} {{$empleado->apellido_paterno}} {{$empleado->apellido_materno}}</td>
                            <td>{{$empleado->telefono}} </td>
                            <td>{{$empleado->puesto}} </td>
                            <td>{{$empleado->fecha_ingreso}} </td>
                            <td>$ {{number_format($empleado->sueldo_quincenal, 2, '.', ','); }} </td>
                            <td>$ {{number_format($empleado->bono, 2, '.', ','); }} </td>
                            <td>{{$empleado->CURP}} </td>
                            <td>{{$empleado->RFC}} </td>
                            <td>{{$empleado->NSS}} </td>
                            <td>{{$empleado->telefono_emergencia}} </td>
                            <td>{{$empleado->IMSS}} </td>
                            <td>{{$empleado->banco}} </td>
                            <td>{{$empleado->no_tarjeta}} </td>
                            <td align="center" id="contenedorAsistencia_{{$empleado->id}}">
                                <button type="button" class="btn btn-sm btn-primary" onclick="Edita('{{$key}}')">
                                    Editar
                                </button>
                                <button type="button" class="btn btn-primary btn-sm"
                                        onclick="documentos({{$empleado->id}})">Documentos
                                </button>
                                <a href="{{route('credencial.empleado',base64_encode($empleado->id))}}" target="_blank"
                                   class="btn btn-primary"><i class="fa-solid fa-id-card-clip"></i></a>
                                <a href="{{route('credencial.empleado_reverso')}}" target="_blank"
                                   class="btn btn-primary"><i class="fa-solid fa-credit-card"></i></a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade " id="editarEmpleado" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content bg-light">
                <div class="modal-header card-header-pr77 pb-2 pt-4">
                    <h4 class="modal-title" id="exampleModalLabel" style="font-weight: 700;"><i
                                class="fa-solid fa-user-pen"></i> Editor de empleado</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form enctype="multipart/form-data" action="{{route('personas.editaPersona')}}" method="post">
                    @csrf
                    <div class="modal-body">
                        <input hidden id="idEmpleado" name="idEmpleado"/>


                        {{-- Formulario de persona --}}
                        <div class="row">
                            <div class="col-4 mb-1">
                                <label for="nombre" class="form-label">Nombre</label>
                                <input type="text" class="form-control" id="nombre" name="nombre">
                            </div>
                            <div class="col-4 mb-1">
                                <label for="apellido_paterno" class="form-label">Apellido Paterno</label>
                                <input type="text" class="form-control" id="apellido_paterno" name="apellido_paterno">
                            </div>
                            <div class="col-4 mb-1">
                                <label for="apellido_materno" class="form-label">Apellido Materno</label>
                                <input type="text" class="form-control" id="apellido_materno" name="apellido_materno">
                            </div>
                            <div class="col-4 mb-1">
                                <label for="genero" class="form-label">Genero</label>
                                <!--<input type="text" class="form-control" id="genero" name="genero">-->
                                <select name="genero" id="genero" class="form-control">
                                    <option value="H">Hombre</option>
                                    <option value="M">Mujer</option>
                                </select>
                            </div>
                            <div class="col-4 mb-0">
                                <label for="fecha_nacimiento" class="form-label">Fecha Nacimiento *</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-solid fa-calendar-days"></i></span>
                                    <!--<input type="text" class="form-control" id="fecha_nacimiento"
                                           name="fecha_nacimiento" onclick="fechaPicker('fecha_nacimiento')">-->
                                    <input type="date" class="form-control" id="fecha_nacimiento"
                                           name="fecha_nacimiento">
                                </div>
                            </div>
                            <div class="col-4 mb-0">
                                <label for="fecha_nacimiento" class="form-label">Lugar Nacimiento *</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-solid fa-house-chimney-user"></i></span>
                                    <input type="text" class="form-control" id="lugar_nacimiento"
                                           name="lugar_nacimiento">
                                </div>
                            </div>
                            <div class="col-4 mb-0">
                                <label for="fecha_nacimiento" class="form-label">Estado Civil *</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-solid fa-house-chimney-user"></i></span>
                                    <select name="estado_civil" id="estado_civil" class="form-control">
                                        <option value="" selected disabled="">Seleccione una opcion</option>
                                        <option value="Soltero">Soltero</option>
                                        <option value="Casado">Casado</option>
                                        <option value="Divorciado">Divorciado</option>
                                        <option value="Viudo">Viudo</option>
                                        <option value="Concubinato">Concubinato</option>
                                        <option value="Separación en proceso judicial">Separación en proceso judicial
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-4 mb-0">
                                <label for="fecha_nacimiento" class="form-label">Escolaridad *</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-solid fa-house-chimney-user"></i></span>
                                    <select name="escolaridad" id="escolaridad" class="form-control">
                                        <option value="" selected disabled="">Seleccione una opcion</option>
                                        <option value="Primaria">Primaria</option>
                                        <option value="Secundaria">Secundaria</option>
                                        <option value="Bachillerato">Bachillerato</option>
                                        <option value="Universidad">Universidad</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-4 mb-0">
                                <label for="email" class="form-label">E-mail *</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-solid fa-envelope"></i></span>
                                    <input type="text" class="form-control" id="email"
                                           name="email">
                                </div>
                            </div>
                            <div class="col-4  mb-1">
                                <label for="puesto" class="form-label">Puesto</label>

                                <div class="input-group mb-1">
                                    <span class="input-group-text"><i class="fa-solid fa-id-card-clip"></i></span>
                                    <select class="form-select" id="puesto" name="puesto">
                                        @foreach($puestos as $puesto)
                                            <option value="{{$puesto->puesto}}">{{$puesto->puesto}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-4 mb-1">
                                <label for="turno" class="form-label">Turno</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-solid fa-calendar-days"></i></span>
                                    <select class="form-select" id="turno" name="turno">
                                        <option selected disabled>Selecciona un turno...</option>
                                        @foreach($turnos as $turno)
                                            <option value="{{$turno->turno}}">{{$turno->turno}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-4 mb-1">
                                <label for="horario" class="form-label">Horario</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-regular fa-clock"></i></span>
                                    <select class="form-select" id="horario" name="horario">
                                        <option selected disabled>Selecciona un horario...</option>
                                        @foreach($horarios as $horario)
                                            <option value="{{$horario->horario}}">{{$horario->horario}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-4 mb-1">
                                <label for="fecha_ingreso" class="form-label">Fecha Ingreso</label>
                                <input type="text" id="fecha_ingreso" name="fecha_ingreso" class="form-control"
                                       onclick="fecha_contrasena('fecha_ingreso')">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 mb-3">
                                <label for="servicio" class="form-label">Servicio</label>
                                <select class="form-select" onchange="buscaPuerta()" id="servicio" name="servicio">
                                    <option selected disabled>Selecciona un servicio...</option>
                                    @foreach ($servicios as $key => $servicio)
                                        <option value="{{$servicio->id}}">{{$servicio->servicio}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6 mb-3" id="ContenedorPuerta" style="display:none;">
                                <label for="puerta" class="form-label">Puerta</label>
                                <select class="form-select" id="puerta" name="puerta">
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="row justify-content-center">
                            <div class="btn-group">
                                <a class="btn btn-secondary me-1" data-bs-toggle="collapse" href="#datos_personales"
                                   role="button" aria-expanded="false" aria-controls="datos_personales"
                                   onclick="$('#Salarios').collapse('hide');">
                                    Datos Personales <i class="fa-solid fa-caret-down"></i>
                                </a>
                                <a class="btn btn-secondary me-1" data-bs-toggle="collapse" href="#documentos"
                                   role="button"
                                   aria-expanded="false" aria-controls="documentos"
                                   onclick="$('#documentos').collapse('hide');">
                                    Documentos
                                    <i class="fa-solid fa-caret-down"></i>
                                </a>

                                <a class="btn btn-secondary me-1" data-bs-toggle="collapse" href="#Salarios"
                                   role="button"
                                   aria-expanded="false" aria-controls="Salarios"
                                   onclick="$('#datos_personales').collapse('hide');">
                                    Salarios
                                    <i class="fa-solid fa-caret-down"></i>
                                </a>
                            </div>
                        </div>

                        <div class="collapse" id="datos_personales">
                            <hr>


                            <div class="row">
                                <div class="col-md-4 mb-0">
                                    <label for="calle" class="form-label">Calle</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="calle" name="calle">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-0">
                                    <label for="numero_exterior" class="form-label">Numero Exterior</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="numero_exterior"
                                               name="numero_exterior">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-0">
                                    <label for="numero_interior" class="form-label">Numero Interior</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="numero_interior"
                                               name="numero_interior">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-0">
                                    <label for="colonia" class="form-label">Colonia</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="colonia" name="colonia">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-0">
                                    <label for="localidad" class="form-label">Localidad</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="localidad" name="localidad">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-0">
                                    <label for="municipio" class="form-label">Municipio</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="municipio" name="municipio">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-0">
                                    <label for="codigo_postal" class="form-label">Codigo Postal</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="codigo_postal" name="codigo_postal">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-1">
                                    <label for="telefono" class="form-label">Telefono</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text"><i class="fa-solid fa-phone"></i></span>
                                        <input type="tel" class="form-control" id="telefono" name="telefono"
                                               pattern="^[0-9]+([.][0-9]+)?$" onkeypress="return SoloNumeros(event);">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-1">
                                    <label for="telefono_emergencia" class="form-label">Telefono de emergencia</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text"><i class="fa-solid fa-phone-volume"></i></span>
                                        <input type="tel" class="form-control" id="telefono_emergencia"
                                               name="telefono_emergencia" pattern="^[0-9]+([.][0-9]+)?$"
                                               onkeypress="return SoloNumeros(event);">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-1">
                                    <label for="CURP" class="form-label">CURP</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="CURP" name="CURP">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-1">
                                    <label for="RFC" class="form-label">RFC</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text "><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="RFC" name="RFC">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-1">
                                    <label for="NSS" class="form-label">Numero de Seguro Social</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="NSS" name="NSS">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-1">
                                    <label for="banco" class="form-label">Banco</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text"><i
                                                    class="fa-solid fa-building-columns"></i></span>
                                        <select name="banco" id="banco" class="form-control">
                                            <option value="">Seleccione un banco</option>
                                            @foreach($bancos as $banco)
                                                <option value="{{$banco->banco}}">{{$banco->banco}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4 mb-1">
                                    <label for="beneficiario" class="form-label">Beneficiario</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text"><i
                                                    class="fa-solid fa-building-columns"></i></span>
                                        <input type="text" class="form-control" id="beneficiario" name="beneficiario">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-1">
                                    <label for="rfc_beneficiario" class="form-label">RFC Beneficiario</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text"><i
                                                    class="fa-solid fa-building-columns"></i></span>
                                        <input type="text" class="form-control" id="rfc_beneficiario"
                                               name="rfc_beneficiario">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 mb-0">
                                    <label for="estado" class="form-label">Estado</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-address-book"></i></span>
                                        <input type="text" class="form-control" id="estado" name="estado">
                                    </div>
                                </div>
                                <div class="col-md-3 mb-1" id="parentesco_beneficiario_input">
                                    <label for="parentesco" class="form-label">Parentesco</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i
                                                    class="fa-solid fa-building-columns"></i></span>
                                        <select name="parentesco" id="parentesco" class="form-control">
                                            <option value="" selected disabled="">Seleccione una opcion</option>
                                            <option value="Padre">Padre</option>
                                            <option value="Madre">Madre</option>
                                            <option value="Esposo/a">Esposo/a</option>
                                            <option value="Hijo/a">Hijo/a</option>
                                            <option value="Hermano/a">Hermano/a</option>
                                            <option value="Primo/a">Primo/a</option>
                                            <option value="Tio/a">Tio/a</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-1">
                                    <label for="no_tarjeta" class="form-label">No. de Tarjeta</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text"><i class="fa-regular fa-credit-card"></i></span>
                                        <input type="text" class="form-control" id="no_tarjeta" name="no_tarjeta">
                                    </div>
                                </div>
                                <div class="col-md-3 mb-0">
                                    <label for="clave_interbancaria" class="form-label">Clabe Interbancaria</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-regular fa-credit-card"></i></span>
                                        <input type="text" class="form-control" id="clave_interbancaria"
                                               name="clave_interbancaria">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4 mb-0">
                                    <label for="cuip">CUIP</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="span_cuip"><i
                                                    class="fa-solid fa-address-card"></i></span>
                                        <input type="text" class="form-control" name="cuip" id="cuip"
                                               placeholder="CUIP">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="collapse" id="Salarios">
                            <hr>

                            <div class="row">
                                <div class="col-md-4 mb-0">
                                    <label for="sueldo_quincenal" class="form-label">Sueldo Quincenal</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i class="fa-solid fa-dollar-sign"></i></span>
                                        <input type="text" class="form-control" id="sueldo_quincenal"
                                               name="sueldo_quincenal" pattern="^[0-9]+([.][0-9]+)?$"
                                               onkeypress="return SoloNumeros(event);" autocomplete="off"
                                               onkeyup="ValidarInput(this),consultarSueldo(this)">
                                    </div>
                                </div>
                                <div class="col-md-4 mb-0">
                                    <label for="bono" class="form-label">Bono</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"><i
                                                    class="fa-solid fa-hand-holding-dollar"></i></span>
                                        <input type="text" class="form-control" id="bono" name="bono"
                                               pattern="^[0-9]+([.][0-9]+)?$" onkeypress="return SoloNumeros(event);"
                                               autocomplete="off">
                                    </div>
                                </div>
                                <input type="hidden" name="salario_base_compuesto" id="salario_base_compuesto">
                                <div class="col-md-4 mb-0">
                                    <label class="form-label">S.D IMSS</label>
                                    <div class="input-group mb-3">
                                    <span class="input-group-text"><i
                                                class="fa-solid fa-hand-holding-dollar"></i></span>
                                        <input type="text" class="form-control" id="salario_diario_imss"
                                               name="salario_diario_imss"
                                               pattern="^[0-9]+([.][0-9]+)?$" onkeypress="return SoloNumeros(event);"
                                               autocomplete="off" onkeyup="ValidarInput(this)">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-0">
                                    <label class="form-label">S.D Capacitacion</label>
                                    <div class="input-group mb-3">
                                    <span class="input-group-text"><i
                                                class="fa-solid fa-hand-holding-dollar"></i></span>
                                        <input type="text" class="form-control" id="salario_diario_capacitacion"
                                               name="salario_diario_capacitacion"
                                               pattern="^[0-9]+([.][0-9]+)?$" onkeypress="return SoloNumeros(event);"
                                               autocomplete="off" onkeyup="ValidarInput(this)">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-12 mb-0">
                                    <label class="form-label">S.D Capacitacion Mensual</label>
                                    <div class="input-group mb-3">
                                    <span class="input-group-text"><i
                                                class="fa-solid fa-hand-holding-dollar"></i></span>
                                        <input type="text" class="form-control" id="salario_diario_capacitacion_mensual"
                                               name="salario_diario_capacitacion_mensual"
                                               pattern="^[0-9]+([.][0-9]+)?$" onkeypress="return SoloNumeros(event);"
                                               autocomplete="off" onkeyup="ValidarInput(this)">
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-4 mb-0">
                                    <label for="tiene_IMSS" class="form-label">IMSS</label>
                                    <div class="input-group mb-3">

                                        Tiene IMSS:
                                        <div class="form-check checkbox-pr77 ml-2">
                                            <input class="form-check-input" type="checkbox" value="SI" id="tiene_IMSS"
                                                   name="tiene_IMSS">
                                            <label class="form-check-label" for="tiene_IMSS"></label>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="collapse" id="documentos">
                            <hr>
                            <div class="row" id="contenedor_imagenes">

                            </div>
                        </div>

                        {{-- Fin editar persona --}}


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary btn-lg" onclick="$('#Loader').fadeIn();">
                            <i class="fa-solid fa-floppy-disk"></i>
                            Guardar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Documentos-->
    <div class="modal fade " id="modal_documentos" tabindex="-1" aria-labelledby="modal_documentos_label"
         aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content bg-light">
                <div class="modal-header card-header-pr77 pb-2 pt-4">
                    <h4 class="modal-title" id="modal_documentos_label" style="font-weight: 700;"><i
                                class="fa-solid fa-user-pen"></i> Documentos</h4>
                    <button type="button" class="btn btn-primary btn-sm" onclick="cerrarVisorPDF()"><i
                                class="fa-solid fa-x"></i></button>
                </div>
                <div class="modal-body">
                    <div class="bd-example" id="documentos_show"></div>
                    <div class="center_view_pdf">
                        <button type="button" class="btn btn-primary btn-sm" onclick="verPDF()"><i
                                    class="fa-solid fa-eye"></i></button>
                    </div>
                    <hr>
                    <div id="my_pdf_viewer">
                        <div id="canvas_container">
                            <canvas id="pdf_renderer"></canvas>
                        </div>
                        <div id="navigation_controls">
                            <div class="input-group mb-3">
                                <span class="input-group-text">
                                <button id="go_previous" class="btn btn-primary btn-sm"><i
                                            class="fa-solid fa-arrow-left"></i></button>
                                </span>
                                <input id="current_page" value="1" type="number" class="form-control text-center"/>
                                <span class="input-group-text">
                                <button id="go_next" class="btn btn-primary btn-sm"><i
                                            class="fa-solid fa-arrow-right"></i></button>
                                </span>
                            </div>
                        </div>
                        <div id="zoom_controls" class="center_zoom_controls">
                            <button id="zoom_in" class="btn btn-primary btn-sm me-1"><i class="fa-solid fa-plus"></i>
                            </button>
                            <button id="zoom_out" class="btn btn-primary btn-sm"><i class="fa-solid fa-minus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@stop
<style>
    #canvas_container {
        width: 100%;
        height: 450px;
        overflow: auto;
    }

    #canvas_container {
        background: #333;
        text-align: center;
        border: solid 3px;
    }

    .center_zoom_controls {
        display: flex;
        justify-content: center;
    }

    .center_view_pdf {
        display: flex;
        justify-content: center;
    }
</style>
@section('scripts')
    <script>
        const token = document.head.querySelector('meta[name="csrf-token"]')
        let arrayEmpleados = @json($empleados);
        let arrayDocumentos = @json($documentos);
        $(document).ready(function () {

            Tabla = CrearTabla('tabla_asistencia');


        });
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }


        function documentos(id) {
            $("#modal_documentos").modal('show');
            $('#documentos_show').html("")
            obtenerDocumentos(id)
        }

        /*function verDocumento(documento) {
            console.log(documento)
            var doc = documento
            pdfjsLib.getDocument(doc).then((pdf) => {

                myState.pdf = pdf;
            });
        }*/

        function verPDF() {
            if (myState.pdf != null) {
                document.getElementById('current_page').value = 1
                var desiredPage =
                    document.getElementById('current_page')
                        .valueAsNumber;

                if (desiredPage >= 1
                    && desiredPage <= myState.pdf
                        ._pdfInfo.numPages) {
                    myState.currentPage = desiredPage;
                    document.getElementById("current_page")
                        .value = desiredPage;
                    render();
                }
            } else {
                message(true, 'warning', 1500, 'Haga click sobre un boton primero')
            }

        }

        function cerrarVisorPDF() {
            $("#modal_documentos").modal('hide');
            myState = {
                pdf: null,
                currentPage: 1,
                zoom: 1
            }
            var canvas = document.getElementById("pdf_renderer");
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);

        }

        document.getElementById('go_previous')
            .addEventListener('click', (e) => {
                if (myState.pdf == null
                    || myState.currentPage == 1) return;
                myState.currentPage -= 1;
                document.getElementById("current_page")
                    .value = myState.currentPage;
                render();
            });
        document.getElementById('go_next')
            .addEventListener('click', (e) => {
                if (myState.pdf == null
                    || myState.currentPage > myState.pdf
                        ._pdfInfo.numPages)
                    return;

                myState.currentPage += 1;
                document.getElementById("current_page")
                    .value = myState.currentPage;
                render();
            });
        document.getElementById('current_page')
            .addEventListener('keypress', (e) => {
                if (myState.pdf == null) return;

                // Get key code
                var code = (e.keyCode ? e.keyCode : e.which);

                // If key code matches that of the Enter key
                if (code == 13) {
                    var desiredPage =
                        document.getElementById('current_page')
                            .valueAsNumber;

                    if (desiredPage >= 1
                        && desiredPage <= myState.pdf
                            ._pdfInfo.numPages) {
                        myState.currentPage = desiredPage;
                        document.getElementById("current_page")
                            .value = desiredPage;
                        render();
                    }
                }
            });
        document.getElementById('zoom_in')
            .addEventListener('click', (e) => {
                if (myState.pdf == null) return;
                myState.zoom += 0.5;
                render();
            });
        document.getElementById('zoom_out')
            .addEventListener('click', (e) => {
                if (myState.pdf == null) return;
                myState.zoom -= 0.5;
                render();
            });

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');
                var viewport = page.getViewport(myState.zoom);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        function obtenerDocumentos(id) {
            fetch(`/numeroDocumentosCuenta/${id}`, {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "get",
                credentials: "same-origin",
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error);
                })
                .then(function (response) {
                    console.log(response)

                    for (let i = 0; i <= response.documentos.length - 1; i++) {
                        let button = document.createElement("button");
                        button.className = 'btn btn-primary btn-sm me-1'
                        button.innerText = response.documentos[i].label
                        button.addEventListener("click", function () {
                            var doc = 'storage/' + response.documentos[i].documento
                            pdfjsLib.getDocument(doc).then((pdf) => {
                                myState.pdf = pdf;
                            });
                        });
                        //div.innerHTML = `<button type="button" class="" onclick="">${response.documentos[i].label}</button>`
                        document.getElementById('documentos_show').appendChild(button)
                        //verDocumento('storage/' + response.documentos[i].documento)
                    }

                })
        }

        function Edita(id) {
            console.log(arrayEmpleados[id]);
            $('#contenedor_imagenes').html("")
            $("#idEmpleado").val(`${arrayEmpleados[id].id}`);

            $("#nombre").val(`${arrayEmpleados[id].nombre}`);
            $("#apellido_paterno").val(`${arrayEmpleados[id].apellido_paterno}`);
            $("#apellido_materno").val(`${arrayEmpleados[id].apellido_materno}`);
            $("#fecha_nacimiento").val(`${arrayEmpleados[id].fecha_nacimiento}`);
            $("#lugar_nacimiento").val(`${arrayEmpleados[id].lugar_nacimiento}`);
            $("#email").val(`${arrayEmpleados[id].correo}`);
            $("#puesto").val(`${arrayEmpleados[id].puesto}`);
            $('#puesto').trigger('change');
            $("#turno").val(`${arrayEmpleados[id].turno}`);
            $('#turno').trigger('change');
            $("#horario").val(`${arrayEmpleados[id].horario}`);
            $('#horario').trigger('change');
            $("#genero").val(`${arrayEmpleados[id].genero}`);
            $('#genero').trigger('change');
            $("#escolaridad").val(`${(arrayEmpleados[id].escolaridad == null) ? '' : arrayEmpleados[id].escolaridad}`);
            $('#escolaridad').trigger('change');
            $("#estado_civil").val(`${(arrayEmpleados[id].estado_civil == null) ? '' : arrayEmpleados[id].estado_civil}`);
            $('#estado_civil').trigger('change');
            $("#parentesco").val(`${(arrayEmpleados[id].parentesco == null) ? '' : arrayEmpleados[id].parentesco}`);
            $('#parentesco').trigger('change');
            $("#calle").val(`${(arrayEmpleados[id].calle == null) ? "" : arrayEmpleados[id].calle}`);
            $("#numero_exterior").val(`${(arrayEmpleados[id].numero_exterior == null) ? "" : arrayEmpleados[id].numero_exterior}`);
            $("#numero_interior").val(`${(arrayEmpleados[id].numero_interior == null) ? "" : arrayEmpleados[id].numero_interior}`);
            $("#colonia").val(`${(arrayEmpleados[id].colonia == null) ? "" : arrayEmpleados[id].colonia}`);
            $("#localidad").val(`${(arrayEmpleados[id].localidad == null) ? "" : arrayEmpleados[id].localidad}`);
            $("#municipio").val(`${(arrayEmpleados[id].municipio == null) ? "" : arrayEmpleados[id].municipio}`);
            $("#estado").val(`${(arrayEmpleados[id].estado == null) ? "" : arrayEmpleados[id].estado}`);
            $("#codigo_postal").val(`${(arrayEmpleados[id].codigo_postal == null) ? "" : arrayEmpleados[id].codigo_postal}`);
            $("#telefono").val(`${arrayEmpleados[id].telefono}`);
            $("#telefono_emergencia").val(`${arrayEmpleados[id].telefono_emergencia}`);
            $("#cuip").val(`${arrayEmpleados[id].CUIP}`);
            $("#CURP").val(`${arrayEmpleados[id].CURP}`);
            $("#RFC").val(`${arrayEmpleados[id].RFC}`);
            $("#NSS").val(`${arrayEmpleados[id].NSS}`);
            $("#banco").val(`${arrayEmpleados[id].banco}`);
            $("#beneficiario").val(`${arrayEmpleados[id].beneficiario}`);
            $("#rfc_beneficiario").val(`${arrayEmpleados[id].rfc_beneficiario}`);
            $("#no_tarjeta").val(`${arrayEmpleados[id].no_tarjeta}`);
            $("#clave_interbancaria").val(`${arrayEmpleados[id].clave_interbancaria}`);
            $("#sueldo_quincenal").val(`${arrayEmpleados[id].sueldo_quincenal}`);
            $("#bono").val(`${arrayEmpleados[id].bono}`);
            $("#salario_diario_capacitacion").val(`${arrayEmpleados[id].salario_diario_capacitacion}`);
            $("#salario_diario_capacitacion_mensual").val(`${arrayEmpleados[id].salario_diario_capacitacion_mensual}`);
            $("#salario_diario_imss").val(`${arrayEmpleados[id].salario_diario_imss}`);
            $("#fecha_ingreso").val(`${arrayEmpleados[id].fecha_ingreso}`);
            //$("#sueldo_IMSS").val(`${arrayEmpleados[id].sueldo_IMSS}`);

            if (arrayEmpleados[id].IMSS == "SI") {
                $("#tiene_IMSS").prop("checked", true);
            } else {
                $("#tiene_IMSS").prop("checked", false);
            }
            generarInputsFile(arrayEmpleados[id].id)
            $("#editarEmpleado").modal('toggle');
        }

        function generarInputsFile(id) {
            fetch(`/numeroDocumentos/${id}`, {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "get",
                credentials: "same-origin",
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error);
                })
                .then(function (response) {
                    console.log(response)
                    console.log(arrayDocumentos)
                    if (response.documentos.length >= 1) {
                        for (let i = 0; i <= response.documentos.length - 1; i++) {
                            let div = document.createElement("div");
                            div.className = "col-md-6 mb-2"
                            div.innerHTML = `<label>${response.documentos[i].label}</label>
                                        <input type="file" id="${response.documentos[i].nombre_documento}"
                                               name="${response.documentos[i].nombre_documento}" class="form-control" accept=".png,.jpg,.jpeg,.pdf">`
                            document.getElementById('contenedor_imagenes').appendChild(div)
                        }
                    } else {
                        for (let i = 0; i <= arrayDocumentos.length - 1; i++) {
                            let div_else = document.createElement("div");
                            div_else.className = "col-md-6 mb-2"
                            div_else.innerHTML = `<label>${arrayDocumentos[i].label}</label>
                                    <input type="file" id="${arrayDocumentos[i].nombre_documento}"
                                           name="${arrayDocumentos[i].nombre_documento}" class="form-control" accept=".png,.jpg,.jpeg,.pdf">`
                            document.getElementById('contenedor_imagenes').appendChild(div_else)
                        }
                    }
                })
        }

        function filtrar_tabla() {
            var table = $('#tabla_asistencia').dataTable();
            var servicios = $('input:checkbox[name="servicios"]:checked').map(function () {
                return this.value;
            }).get().join('|');
            //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
            //console.log("----------estados------------");
            //console.log(estados);
            table.fnFilter(servicios, 1, true, false, false, false);
            var puertas = $('input:checkbox[name="puertas"]:checked').map(function () {
                return this.value;
            }).get().join('|');
            //console.log("----------conceptos------------");
            //console.log(conceptos);
            table.fnFilter(puertas, 2, true, false, false, false);

        }

        function buscaPuerta() {
            fetch("/buscaPuerta", {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": token.content,
                },
                method: "post",
                credentials: "same-origin",
                body: JSON.stringify({
                    idServicio: $("#servicio").val()
                })
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error)
                })
                .then(function (response) {

                    console.log("--------Respuesta----------")
                    console.log(response);
                    Puerta = response;
                    $("#ContenedorPuerta").show();
                    $("#puerta").html(`<option value="" selected disabled>Selecciona una puerta</option>`);
                    response.forEach((item, i) => {
                        console.log(item);
                        $("#puerta").append(`<option value="${item.id}">${item.puerta}</option>`);
                    });

                }).finally(function () {
            });
        }

        function consultarSueldo(sueldo) {
            let banco = document.getElementById('banco').value
            if (banco != "") {

                if (sueldo.value >= 2000) {
                    fetch(`/buscarSalario/${banco}/${sueldo.value}`, {
                        headers: {
                            "X-CSRF-Token": token.content,
                        },
                        method: "get",
                        credentials: "same-origin",
                    }).then(res => res.json())
                        .catch(function (error) {
                            console.error('Error:', error)
                        })
                        .then(function (response) {
                            console.log(response)
                            if (response.informacion != null) {
                                document.getElementById('salario_diario_imss').value = response.informacion[0].salario_diario
                                document.getElementById('salario_base_compuesto').value = response.informacion[0].salario_base_compuesto
                                document.getElementById('salario_diario_capacitacion').value = response.informacion[0].salario_diario_cap
                                document.getElementById('salario_diario_capacitacion_mensual').value = response.informacion[0].salario_diario_cap_mensual
                            }
                        })
                }
            } else {
                document.getElementById('sueldo_quincenal').value = ""
                message(true, 'info', 1500, "Seleccione un banco para poder ingresar el sueldo")
            }
        }
    </script>
@stop