@extends('layouts.app', ['activePage' => 'colaboradores', 'menuParent' => 'consultas', 'titlePage' => __('Nomina - Colaboradores')])
@section('content')
@include('includes.tailwind')


<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Colaboradores</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-4">
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Registro Patronal:</label>
                                <select id="registroPatronalFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500  listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                    <option value="" disabled selected>-Todos-</option>
                                    @foreach ($data['registros_patronales'] as $r)
                                        <option value="{{ $r->id }}">{{ $r->registro_patronal }} ({{ $r->rfc }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Estatus:</label>
                                <select id="mesFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                    <option value="0" selected>-Todos-</option>
                                    <option value="1">Vigentes</option>
                                    <option value="2">No Vigentes</option>

                                </select>
                            </div>
                            <div class="col-span-4  mt-4">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 transition-colors duration-200" onclick="getPagos()">
                                    <i class="material-icons align-middle text-sm">search</i> Buscar
                                </button>
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 transition-colors duration-200" onclick="nuevoColaborador()">
                                    <i class="material-icons align-middle text-sm">person_add</i> Nuevo
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-4 div-scroll" id="lista_colaboradores">
         
           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalNuevo">
    <form id="formProducto" enctype="multipart/form-data">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h5 class="modal-title text-lg font-semibold text-gray-900" id="title-modal-generar-pago">Nuevo</h5>
                <button type="button" class="close text-gray-400 hover:text-gray-500" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="id">
                <div class="bg-gray-50 border-b border-gray-200 p-2 mb-2">
                    <div class="grid grid-cols-12 gap-4">
                        <div class="col-span-4">
                            <input type="file" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="imagen" name="imagen" accept="image/*">
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4">
                        <div class="col-span-4" align="center">
                            <div class="card" style="width: 20rem;">
                              <img class="card-img-top" src="#" rel="nofollow" alt="Card image cap" id="previewImagen">
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4">
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Clave: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="clave" name="clave">
                        </div>
                        <div class="col-span-10">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Registro Patronal: <span class="text-red-500">*</span></label>
                             <select id="id_registro_patronal" name="id_registro_patronal" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            @foreach ($data['registros_patronales'] as $r)
                                <option value="{{ $r->id }}">{{ $r->registro_patronal }} ({{ $r->rfc }})</option>
                            @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Número de Seguridad Social: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="nss" name="nss">
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Apellido Paterno: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="apellido_paterno" name="apellido_paterno">
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Apellido Materno: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="apellido_materno" name="apellido_materno">
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                        <div class="col-span-8">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nombres: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="nombre" name="nombre">
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Correo: </label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="correo" name="correo">
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de Nacimiento: <span class="text-red-500">*</span></label>
                            <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="fecha_nacimiento" name="fecha_nacimiento">
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Lugar de Nacimiento:</label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="lugar_nacimiento" name="lugar_nacimiento">
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Estado: <span class="text-red-500">*</span></label>
                            <select id="id_estado" name="id_estado" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            @foreach ($data['estados'] as $r)
                                <option value="{{ $r->idestado }}">{{ $r->estado }}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Código Postal: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="codigo_postal" name="codigo_postal">
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Sexo: <span class="text-red-500">*</span></label>
                            <select id="id_estado" name="id_estado" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="H">Hombre</option>
                                <option value="M">Mujer</option>
                            </select>
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">CURP: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="curp" name="curp">
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">RFC: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="rfc" name="rfc">
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Departamento: <span class="text-red-500">*</span></label>
                            <select id="id_departamento" name="id_departamento" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            @foreach ($data['departamentos'] as $r)
                                <option value="{{ $r->id }}">{{ $r->clave }} : {{ $r->departamento }}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Puesto: <span class="text-red-500">*</span></label>
                            <select id="id_puesto" name="id_puesto" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            @foreach ($data['puestos'] as $r)
                                <option value="{{ $r->id }}">{{ $r->clave }} : {{ $r->puesto }}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Ocupación: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="ocupacion" name="ocupacion">
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                         <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Telefono: </label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="celular" name="celular">
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Vacaciones Pendientes: </label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="vacaciones_pendientes" name="vacaciones_pendientes">
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de Ingreso: <span class="text-red-500">*</span></label>
                            <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="fecha_ingreso" name="fecha_ingreso">
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Último Día Pagado: <span class="text-red-500">*</span></label>
                            <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="ultimo_dia_pago" name="ultimo_dia_pago">
                        </div>
                        <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha Alta/Reingreso IMSS: <span class="text-red-500">*</span></label>
                            <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="fecha_alta_imss" name="fecha_alta_imss">
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Periodo de Pago: <span class="text-red-500">*</span></label>
                            <select id="id_periodo_pago" name="id_periodo_pago" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            @foreach ($data['calendarios'] as $r)
                                <option value="{{ $r->id }}">{{ $r->nombre }}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">¿Cuántos días reportas para el Cálculo de Nómina? </label>
                            <select id="diasreportado" name="diasreportado" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="1">30 dias al Mes</option>
                                <option value="2">Dias naturales del mes</option>
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Trabajador IMSS: <span class="text-red-500">*</span></label>
                            <select id="tipo_trabajador_imss" name="tipo_trabajador_imss" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            @foreach ($data['tipo_traba_imss'] as $r)
                                <option value="{{ $r->id }}">{{ $r->tipo }}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de prestaciones: <span class="text-red-500">*</span></label>
                            <select id="id_prestaciones" name="id_prestaciones" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            <option value="1">De Ley</option>
                            <option value="2">Personalizadas</option>
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4">
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Aplicar Ajuste Anual: <span class="text-red-500">*</span></label>
                            <select id="aplica_ajuste_anual" name="aplica_ajuste_anual" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="1">Si</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Jornada/Sem. Red </label>
                            <select id="id_jornada" name="id_jornada" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                 @foreach ($data['jornada'] as $r)
                                <option value="{{ $r->id }}">{{ $r->clave }} : {{ $r->jornada }}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Trabajador Pensionado: </label>
                            <select id="pensionado" name="pensionado" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="0">No</option>
                                <option value="1">Si</option>
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">U.M.F: </label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="umf" name="umf">
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4">
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de salario: </label>
                            <select id="id_tipo_salario" name="id_tipo_salario" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="0">0 : Fijo</option>
                                <option value="1">1 : Variable</option>
                                <option value="2">2 : Mixto</option>
                            </select>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Salario Diario: <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="salario_diario" name="salario_diario">
            
                        </div>
                        <div class="col-span-1">
                            <br>
                            <button type="button" class="px-3 py-1 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-[#0A415F] hover:bg-[#083549] text-white transition-colors duration-200" onclick="calcularSDI(event)">
                                   kdkdkdkd
                            </button>

                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Salario Diario Integrado (SDI) <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="salario_diario_integrado" name="salario_diario_integrado">
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Impuesto: </label>
                            <select id="id_tipo_impuesto" name="id_tipo_impuesto" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            @foreach ($data['tipo_impuestos'] as $r)
                                <option value="{{ $r->id }}">{{ $r->clave }} : {{ $r->tipo }}</option>
                            @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                        <!--<div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Forma de Pago: </label>
                            <select id="id_forma_pago" name="id_forma_pago" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            <option value="0">-Selecciona-</option>
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Proveedor de Tarjeta De Despensa:</label>
                            <select id="id_provedor_despensa" name="id_provedor_despensa" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="0">-Sin Proveedor-</option>
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Otra tarjeta de servicios : </label>
                            <select id="id_tarjeta_servicio" name="id_tarjeta_servicio" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="0">-Sin Proveedor-</option>
                            </select>
                        </div>-->
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Cuenta Contable </label>
                            <select id="id_cuentacontable" name="id_cuentacontable" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            <option value="0">-Selecciona-</option>
                            @foreach ($data['cuentas_contable'] as $r)
                                <option value="{{ $r->id }}">{{ $r->numero_cuenta }} - {{ $r->cuenta }}</option>
                            @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-12 gap-4 ">
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Jornada: </label>
                            <select id="id_tipo_jornada" name="id_tipo_jornada" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                            <option value="0">-Selecciona-</option>
                            @foreach ($data['tipo_jornadas'] as $r)
                                <option value="{{ $r->id }}">{{ $r->jornada }}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Régimen de Contratación:</label>
                            <select id="id_regimen_contratacion" name="id_regimen_contratacion" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="0">-Selecciona-</option>
                            @foreach ($data['tipo_jornadas'] as $r)
                                <option value="{{ $r->id }}">{{ $r->jornada }}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de contrato : </label>
                            <select id="id_tipo_contrato" name="id_tipo_contrato" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="0">-Selecciona-</option>
                                      @foreach ($data['tipo_jornadas'] as $r)
                                <option value="{{ $r->id }}">{{ $r->tipo_contrato }}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Sindicalizado: </label>
                            <select id="sindicalizado" name="sindicalizado" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                <option value="0">No</option>
                                <option value="1">Si</option>
                            </select>
                        </div>
                    </div>
                </div>                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="submit" class="btn btn-primary" id="btnGuardar">Guardar</button>
            </div>
        </div>
    </div>
    </form>
</div>


<div class="modal fade" id="modalAgregaMovimientos">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Agrega Movimientos</h4>
            </div>
            <div class="modal-body">
                <div class="grid grid-cols-10 gap-4 mb-4">
                    <div class="col-span-12">
                        <h4>Selecciona el tipo de movimiento que deseas agregar al trabajador</h4>
                    </div>
                </div>
  <div class="grid grid-cols-10 gap-4 mb-4">
                            <div class="col-span-2">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-8 py-8 text-sm rounded-md mr-2 transition-colors duration-200" onclick="generarPagoFactura()">
                                    <i class="material-icons align-middle text-sm">assignment_add</i> Incidencias
                                </button>
                            </div>
                            <div class="col-span-2">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-8 py-8 text-sm rounded-md mr-2 transition-colors duration-200" onclick="getVentas()">
                                    <i class="material-icons align-middle text-sm">health_and_safety</i> Incapaci
                                </button>
                            </div>
                            <div class="col-span-2">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-8 py-8 text-sm rounded-md mr-2 transition-colors duration-200" onclick="getVentas()">
                                    <i class="material-icons align-middle text-sm">add_card</i> Crédito Infonavit
                                </button>
                            </div>
                            <div class="col-span-2">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-8 py-8 text-sm rounded-md mr-2 transition-colors duration-200" onclick="getVentas()">
                                    <i class="material-icons align-middle text-sm">attach_money</i> Cambio Salario
                                </button>
                            </div>
                            <div class="col-span-2">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-8 py-8 text-sm rounded-md mr-2 transition-colors duration-200" onclick="getVentas()">
                                    <i class="material-icons align-center text-sm">account_circle_off</i> Baja
                                </button>
                            </div>
                        </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }


    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 10px;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        font-size: 10px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        font-size: 10px !important;
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td {
        font-size: 11px !important;
    }

    table.dataTable tbody td {
        font-size: 11px !important;
    }


    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .dataTables_wrapper .dataTables_filter input {
        padding: 0.25rem 0.5rem !important;
        border-radius: 0.375rem !important;
        border: 1px solid #e2e8f0 !important;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: #0A415F !important;
        box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
    }

    .table-scroll {
        max-height:650px;
        overflow-y: auto;
    }

    .estatus-row span {
        margin-right: 6px;
        width: 22px;
        height: 22px;
        display: inline-block;
    }
    .img-fija {
        width: 100%;         /* o un ancho fijo como 300px */
        height: 200px;       /* altura fija */
        object-fit: cover;   /* para recortar y mantener proporción sin deformar */
    }
    .div-scroll {
        max-height: 550px;
        overflow-y: auto;
    }
</style>
@endsection

@push('js')
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        // Obtener mes y año actual
        var fecha = new Date();
        var mesActual = fecha.getMonth() + 1; // getMonth() devuelve 0-11
        var anioActual = fecha.getFullYear();

        // Establecer valores en los selectores
        $('#mesFilter').val(mesActual).trigger('change');
        $('#anioFilter').val(anioActual).trigger('change');

        loadCards();
        // Llamar a la función getPagos
        //getPagos();
    });

    $('#imagen').on('change', function () {
        const input = this;
        const file = input.files[0];

        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                $('#previewImagen')
                    .attr('src', e.target.result)
                    .show();
            };
            reader.readAsDataURL(file);
        } else {
            $('#previewImagen')
                .attr('src', '#')
                .hide();
        }
    });
     $('#formProducto').on('submit', function (e) {
            e.preventDefault();

            const form = this;
            const formData = new FormData(form);

urlAction = ($('#id').val() == '') ? '{{ url('nomina/administracion/guardar_colaborador') }}' : '{{ url("nomina/administracion/update_colaborador") }}'
            $('#loadingLoad').modal('show')
            $.ajax({
                url: urlAction,
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function (response) {
                     
                    // Limpiar formulario
                    form.reset();
                    $('#previewImagen').hide();
                    $('#errores').html('');

                    // Cerrar modal
                   
                    setTimeout(function () {
                      $('#loadingLoad').modal('hide')
                      $('#modalNuevoRegistro').modal('hide')
                    }, 200);

                    
                    // Mostrar éxito
                     Swal.fire({
                            icon: 'success',
                            title: 'Exito!',
                            html: 'Guardado Correctamente',
                        });

                    
                    //Recarga el grid
                    loadGrid();
                },
                error: function (xhr) {
                   $('#loadingLoad').modal('hide')
                    if (xhr.status === 422) {
                        let errores = xhr.responseJSON.errors;
                        let mensaje = '';
                        $.each(errores, function (key, value) {
                            mensaje += '<div>' + value[0] + '</div>';
                        });

                        // Mostrar errores con SweetAlert2
                        Swal.fire({
                            icon: 'error',
                            title: 'Errores de validación',
                            html: mensaje,
                        });

                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Ocurrió un error al guardar el producto.'
                        });
                    }
                }
            });
      });



    function loadCards(){
        $.ajax({
            url: '{{ url('nomina/administracion/get_colaboradores') }}',
            type: 'POST',
            dataType: 'json',
            data: {param1: 'value1'},
        })
        .done(function(resp) {
            console.log("success");
            var urlStorage = '{{ asset('storage').'/' }}'
            var urlPublic = '{{ asset('public').'/../imagenes/sin_imagen.webp' }}'
            $.each(resp.data, function(index, val) {

                const imgPath = urlStorage + val.imagen;
                if(val.imagen==null){
                    imagenHtml = "<img src='"+urlPublic+"' alt='Sin imagen' class='card-img-top img-fija'>";
                }else{
                    imagenHtml = "<img src='" + imgPath + "' alt='Imagen del colaborador' class='card-img-top img-fija'>";
                }
                let html  = "<div class='col-span-12'>";
                html += "<div class='border rounded-md p-4 shadow-md bg-white max-w-10md mx-auto'>";
                html += "<div class='flex flex-wrap items-start gap-12'>";
                html += "<div class='w-24 h-24 bg-pink-200 rounded-md overflow-hidden flex items-center justify-center'>";
                html += "<div class='card' style='width: 20rem;'>"
                html +=imagenHtml;
                html += "</div>";
                html += "</div>";
                html += "<div class='flex-1 text-sm space-y-1'>";
                html += "<p><span class='font-semibold text-gray-700'>NSS:</span> <span class='text-blue-600'>"+val.nss+"</span></p>";
                html += "<p><strong class='text-gray-800'>"+val.apellido_paterno+" "+val.apellido_materno+" "+val.nombre+"</strong></p>";
                html += "<p><span class='font-semibold'>Registro Patronal:</span>"+val.registro_patronal.registro_patronal+"</p>";
                if(val.id_prestaciones==0){
                    pres = 'De Ley'
                }else{
                    pres = 'Personalizadas'
                }
                html += "<p><span class='font-semibold'>Tipo de Prestaciones:</span> "+pres+"</p>";
                html += "<p><span class='font-semibold'>Fecha de Ingreso:</span> "+formatearFecha(val.fecha_ingreso)+"</p>";
                html += "<p><span class='font-semibold'>Salario Diario Actual:</span> "+numberFormat(val.salario_diario)+"</p>";
                html += "<p><span class='font-semibold'>Salario Diario Integrado:</span> "+numberFormat(val.salario_diario)+"</p>";
                html += "<p><span class='font-semibold'>Último Día Pagado:</span> "+formatearFecha(val.ultimo_dia_pago)+"</p>";
                html += "<p><span class='font-semibold'>Departamento:</span> "+val.departamento.departamento+"</p>";
                html += "<p><span class='font-semibold'>Nómina Asignada:</span> "+val.calendario.nombre+"</p>";
                html += "</div>";
                html += "<div class='flex flex-col gap-2 items-center text-center'>";
                html += "<button class='border rounded px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200'><i class='material-icons align-middle text-md'>edit</i></button>";
                html += "<button class='border rounded px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200'><i class='material-icons align-middle text-md'>print</i></button>";
                html += "<button class='border rounded px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200' onclick='agregaMovimiento();'><i class='material-icons align-middle text-md'>post_add</i></button>";
                html += "</div>";
                html += "</div>";
                html += "<div class='mt-4 text-right'>";
                html += "<button class='text-teal-700 font-bold hover:underline'>";
                html += "<i class='material-icons align-middle text-md'>visibility</i> <span class='text-sm font-normal'>Ver Movimientos</span>";
                html += "</button>";
                html += "</div>";
                html += "</div>";
                html += "</div>";
                $('#lista_colaboradores').append(html)
            });
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }
    function getPagos() {
        if (!$('#mesFilter').val() || !$('#anioFilter').val()) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'Debe seleccionar mes y año para continuar',
                confirmButtonColor: '#0A415F'
            });
            return false;
        }

        $('#list-depositos').dataTable().fnDestroy();

        var table = $('#list-depositos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            dom: 'Bfrtip',
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('depositos.get-depositos')}}",
                type: "POST",
                data: {
                    mes: $('#mesFilter').val(),
                    anio: $('#anioFilter').val(),
                    formaPago: $('#formaPagoFilter').val(),
                },
            },
            createdRow: function(row, data, rowIndex) {
                $.each($('td', row), function(colIndex) {
                    $(this).attr('title', 'Ver detalles del abono');
                });
            },
            footerCallback: function(row, data, start, end, display) {
                var api = this.api();
                // Remove the formatting to get integer data for summation
                var intVal = function(i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                        i : 0;
                };

                var array = [4, 5, 6, 7, 8];
                array.forEach(element => {

                    // Total over all pages
                    total = api
                        .column(element)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Total over this page
                    pageTotal = api
                        .column(element, {
                            page: 'current'
                        })
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column(element).footer()).html(
                        '<span class="font-weight-bold">' + formatter.format(parseFloat(total)) + '<span>'
                    );
                });
            },
            columns: [{
                    data: "id",
                    visible: false,
                    orderable: false,
                    searchable: false
                },
                {
                    data: "acciones",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "estatus",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "fecha",
                },
                {
                    data: "subtotal",
                },
                {
                    data: "iva",
                },
                {
                    data: "iva_ret",
                },
                {
                    data: "isr",
                },
                {
                    data: "monto",
                },
                {
                    data: "forma_pago",
                },
                {
                    data: "moneda",
                },
                {
                    data: "tipo_cambio",
                },
            ],
            buttons: [{
                    extend: 'excel',
                    text: 'Exportar a Excel',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    },
                },
                {
                    extend: 'pdf',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    text: 'Exportar a PDF',
                    title: 'Listado de pagos',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    },
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 8;
                        doc.styles.tableHeader.fontSize = 8;
                    }
                }
            ],
            order: [
                [7, "desc"]
            ],
        });

        table.on('click', 'tr', function(e) {
            var target = $(e.target);
            var cell = table.cell(target);

            if (!cell || !cell.index()) {
                return;
            }

            var columnIndex = cell.index().column;
            var columnTitle = table.column(columnIndex).header().textContent.trim();

            if (columnTitle === 'Acciones' || columnTitle === 'Estatus') {
                return;
            }

            var row = table.row(this).data();
            if (!row) {
                return;
            }

            $('.checkPro').map(function() {
                if ($(this).val() == row.id) {
                    $(this).prop('checked', true);
                }
            });

            window.open("{{ route('pagos.detalles-pago', ['id' => ':id']) }}".replace(':id', row.id), '_blank');
        });
    }
    function nuevoColaborador(){
        $('#modalNuevo').modal('show')
    }
    function formatearFecha(fechaIso) {
      const fecha = new Date(fechaIso);
      const dia = String(fecha.getDate()).padStart(2, '0');
      const mes = String(fecha.getMonth() + 1).padStart(2, '0'); // Los meses van de 0 a 11
      const anio = fecha.getFullYear();
      return `${dia}/${mes}/${anio}`;
    }
    function numberFormat(num){
        return new Intl.NumberFormat('en-US', {
                            style: 'currency',
                            currency: 'USD'
                        }).format(num)
    }
    function verificarImagen(url, callback) {
        const img = new Image();
        img.onload = function() {
            callback(true);  // existe
        };
        img.onerror = function() {
            callback(false); // no existe
        };
        img.src = url;
    }
    function agregaMovimiento(){
        $('#modalAgregaMovimientos').modal('show')
    }
    function calcularSDI(event){
         event.preventDefault(); 
        var fecha_ingreso = $('#fecha_ingreso').val()
        var prestaciones = $('#id_prestaciones').val()
        var salario = $('#salario_diario').val()
        $.ajax({
            url: '{{ url('nomina/administracion/get_factor') }}',
            type: 'POST',
            dataType: 'json',
            data: {fecha_ingreso: fecha_ingreso,
                    prestaciones: prestaciones,
                    salario: salario,
                    },
        })
        .done(function(resp) {
            console.log("success");
            $('#salario_diario_integrado').val(resp.salario_diario)
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }
</script>

@endpush