@extends('layouts.app', ['activePage' => 'calendario_pagos', 'menuParent' => 'catalogos', 'titlePage' => __('Nomina - Calendario Pagos')])
@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">Calendario Pagos</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="px-4 ">
                        <div class="border-b border-gray-200">
                            <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                                <a href="#link1" class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm active" data-toggle="tab" role="tablist">
                                    Nuevo
                                </a>
                                <a href="#link2" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" data-toggle="tab" role="tablist">
                                    Asignar Periodo de Pago
                                </a>
                              	<a href="#link3" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" data-toggle="tab" role="tablist">
                                    Asignar Valores para cálculos de Nómina
                                </a>
                            </nav>
                        </div>
                        <div class="tab-content tab-space mt-6">
                            <div class="tab-pane active" id="link1">
                            	<div class="row">
                            		<div class="col-12">
                            			<p>Establece el nombre con el que identificarás tus calendarios de pago y sus características. Modifícalos o elimínalos desde el listado de calendarios establecidos. </p>
                            		</div>
                            	</div>
                                <div class="row col-12">
                                    <div class="col-md-6">
                                    <form id="formProducto" enctype="multipart/form-data">
                                    	<input type="hidden" id="id">
                                        <div class="bg-white shadow rounded-lg p-4">
                                            <label class="block text-lg font-medium text-gray-700 mb-1">
                                                Nuevo
                                            </label>
                                            <div class="flex flex-col">
         										<div class="row">
													<div class="col-12">
														<div class="grid grid-cols-12 gap-4 ">
									                        <div class="col-span-12">
									                            <label class="block text-sm font-medium text-gray-700 mb-1">Nombre de la Nómina: <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>
													</div>
         										</div>
         										<div class="row">
													<div class="col-12">
														<div class="grid grid-cols-12 gap-4 ">
									                        <div class="col-span-6">
									                            <label class="block text-sm font-medium text-gray-700 mb-1">Frecuencia de Pago: <span class="text-red-500">*</span></label>
									                            <select id="id_frecuencia" name="id_frecuencia" 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" onchange="duracionCambio();">
									                                @foreach ($data['frecuencias'] as $r)
									                                  <option value="{{ $r->id }}" dias="{{ $r->dias }}">{{ $r->nombre }}</option>
									                                @endforeach
									                            </select>
									                        </div>
									                       	<div class="col-span-6">
									                            <label class="block text-sm font-medium text-gray-700 mb-1">Año: <span class="text-red-500">*</span></label>
									                            <select id="anio" name="anio" 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">
									                                  @for ($year = 2019; $year <= 2030; $year++)
																	     <option value="{{ $year }}">{{ $year }}</option>
																	  @endfor
									                            </select>
									                        </div>
									                    </div>
													</div>
         										</div>
         										<div class="row">
													<div class="col-12">
														<div class="grid grid-cols-12 gap-4 ">
									                        <div class="col-span-6">
									                            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de Inicio del Calendario de Nómina: <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_inicio" name="fecha_inicio">
									                        </div>
									                       	<div class="col-span-6">
									                            <label class="block text-sm font-medium text-gray-700 mb-1">Duración días por periodo: <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="duracion" name="duracion" readonly>
									                        </div>
									                    </div>
													</div>
         										</div>
                                                <div class="flex justify-end">
                                                   
                                                    <button type="submit" class="font-medium bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md transition-colors duration-200">Guardar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    </div>
                                    <div class="row date-table-container layout-top-spacing col-md-6">
                                        <div class="table-responsive">
                                            <table class="min-w-full divide-y divide-gray-200" id="tableCalendario">
                                                <thead class="bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    <tr>
                                                    	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Frecuencia de Pago</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Días</th>
                                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Año</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane " id="link2">
                                <div class="w-full space-y-2">
                                	<div class="row">
                                		<div class="col-12">
                                			<p>Establece el registro patronal, la nómina a calcular y la frecuencia de pago que donde se encuentran los trabajadores asignados a un calendario de pago determinado. </p>
                                		</div>
                                	</div>
                                	<div class="row">
                                		<div class="col-12">
							                <div class="grid grid-cols-12 gap-4 ">
						                        <div class="col-span-6">
						                            <label class="block text-sm font-medium text-gray-700 mb-1">Registro Patronal: <span class="text-red-500">*</span></label>
						                            <select id="registro_patronal" name="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 class="col-span-3">
						                            <label class="block text-sm font-medium text-gray-700 mb-1">Nombre de la Nómina : <span class="text-red-500">*</span></label>
						                            <select id="calendario" name="calendario" 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" onchange="setFrecuencia();">
						                            	<option value="0">-Selecciona-</option>
						                                @foreach ($data['calendarios'] as $r)
									                        <option value="{{ $r->id }}" idfrecuencia="{{ $r->id_frecuencia }}">{{ $r->nombre }}</option>
									                    @endforeach
						                            </select>
						                        </div>
						                        <div class="col-span-3">
							                            <label class="block text-sm font-medium text-gray-700 mb-1">Frecuencia de Pago: <span class="text-red-500">*</span></label>
									                            <select id="frecuencia_pago" name="frecuencia_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" onchange="duracionCambio();">
									                                @foreach ($data['frecuencias'] as $r)
									                                  <option value="{{ $r->id }}" dias="{{ $r->dias }}">{{ $r->nombre }}</option>
									                                @endforeach
									                            </select>
						                        </div>
						                    </div>
                                		</div>
                                	</div>
                                </div>
                            </div>
                            <div class="tab-pane " id="link3">
                                <div class="w-full space-y-2">
                                	<div class="row">
                                		<div class="col-12">
                                			<p>Selecciona a los trabajadores de tus Registros Patronales para asignarlos a la Nómina de tu conveniencia.</p>
                                		</div>
                                	</div>
                                	<div class="row">
                                		<div class="col-12">
							                <div class="grid grid-cols-12 gap-4 ">
						                        <div class="col-span-6">
						                            <label class="block text-sm font-medium text-gray-700 mb-1">Registro Patronal: <span class="text-red-500">*</span></label>
						  							<select id="registro_patronal" name="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">
						                                <option value="0">-Selecciona-</option>
						                                @foreach ($data['registros_patronales'] as $r)
						                                  <option value="{{ $r->id }}">{{ $r->registro_patronal }} ({{ $r->rfc }})</option>
						                                @endforeach
						                            </select>
						                        </div>
						                        <div class="col-span-3">
						                            <label class="block text-sm font-medium text-gray-700 mb-1">Nombre de la Nómina : <span class="text-red-500">*</span></label>
						                            <select id="regimenfiscal" name="id_regimen" 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">Frecuencia de Pago: <span class="text-red-500">*</span></label>
						                            <select id="regimenfiscal" name="id_regimen" 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>
                                		</div>
                                	</div>
                                	<div class="row">
                                		<div class="col-12">
                                			<p>Selecciona el tipo de impuesto e indica los días que se van a reportar al IMSS así como para el cálculo de tu nómina, de los trabajadores asignados a un calendario de pago establecido.</p>
                                		</div>
                                	</div>
                                	<div class="row">
                                		<div class="col-12">
							                <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 impuesto: <span class="text-red-500">*</span></label>
						                            <select id="regimenfiscal" name="id_regimen" 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-4">
						                            <label class="block text-sm font-medium text-gray-700 mb-1">¿Cuántos días reportas para el Cálculo de Nómina?  <span class="text-red-500">*</span></label>
						                            <select id="regimenfiscal" name="id_regimen" 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>                                			
                                		</div>
                                	</div>
                                </div>
                            </div>      
                        </div>
                    </div>
                </div>
            </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;
    }

    .estatus-row {
        margin-right: 6px;
        width: 120%;
        max-width: 100px;
        display: inline-block;
    }
</style>






@endsection

@push('js')
<script>
      // Función para manejar los tabs
    function initTabs() {
        // Usar jQuery para evitar conflictos con Bootstrap Material Design
        $('[data-toggle="tab"]').off('click').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            var $this = $(this);
            var targetId = $this.attr('href').substring(1);

            // Remover clases activas de todos los tabs
            $('[data-toggle="tab"]').removeClass('border-blue-500 text-blue-600').addClass('border-transparent text-gray-500');

            // Agregar clases activas al tab clickeado
            $this.removeClass('border-transparent text-gray-500').addClass('border-blue-500 text-blue-600');

            // Ocultar todos los paneles
            $('.tab-pane').removeClass('active').hide();

            // Mostrar el panel correspondiente
            $('#' + targetId).addClass('active').show();

            // Ejecutar función específica del tab si existe
            var onclick = $this.attr('onclick');
            if (onclick) {
                // Remover el onclick del atributo para evitar ejecución doble
                $this.removeAttr('onclick');
                // Ejecutar la función
                setTimeout(function() {
                    eval(onclick);
                }, 100);
            }
        });

        // Mostrar el primer tab por defecto
        $('[data-toggle="tab"]').first().click();
    }
    $(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();
         // Inicializar tabs
        initTabs();
        loadCalendario();


    });

    function duracionCambio(){
    	var dias = $('#id_frecuencia option:selected').attr('dias')
    	$('#duracion').val(dias)
    }

         $('#formProducto').on('submit', function (e) {
            e.preventDefault();

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

urlAction = ($('#id').val() == '') ? '{{ url('nomina/configuracion/guardar_calendario') }}' : '{{ url("nomina/configuracion/update_calendario") }}'
            $('#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
                    loadCalendario();
                },
                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.'
                        });
                    }
                }
            });
      });

  $('.acordiones').on('change', function () {
      if ($(this).is(':checked')) {
        $('#'+$(this).attr('idcontent')).slideDown();
      } else {
        $('#'+$(this).attr('idcontent')).slideUp();
      }
    });
     function loadCalendario() {
        //$('#').DataTable();
        $('#tableCalendario').dataTable().fnDestroy();
        $('#tableCalendario').DataTable({
            "scrollX": true,
            ajax: {
                url: "{{ url('nomina/configuracion/get_calendarios') }}",
                type: "POST",
            },
            columns: [{
                    data: "id",render: function(data, type, row){
                    	return '<i class="material-icons text-gray-500" style="cursor:pointer;" title="Editar calendario" onclick="editarCalendario('+row.id+')">edit</i>'
                    }
                },
                {
                    data: "nombre"
                },
                {
                    data: "frecuencia.nombre"
                },
                {
                    data: "duracion"
                },
                {
                    data: "anio"
                },

            ],
            order: [
                [1, "asc"]
            ],
        });
    }
    function editarCalendario(id){
    	$.ajax({
    		url: '{{ url('nomina/configuracion/get_calendario') }}',
    		type: 'post',
    		dataType: 'json',
    		data: {id: id},
    	})
    	.done(function(resp) {
    		console.log("success");
    		$('#id').val(resp.data.id)
    		$('#nombre').val(resp.data.nombre)
    		$('#id_frecuencia').val(resp.data.id_frecuencia)
    		$('#anio').val(resp.data.anio)
    	
    		var fecha = resp.data.fecha_inicio.split('T')
    		$('#fecha_inicio').val(fecha[0])
    		$('#duracion').val(resp.data.duracion)

    	})
    	.fail(function() {
    		console.log("error");
    	})
    	.always(function() {
    		console.log("complete");
    	});
    	
    }
    function limpiar(){
    	$('#id').val('')
    	$('#nombre').val('')
    	$('#id_frecuencia').val(1)
    	$('#anio').val('')
    	$('#fecha_inicio').val('')
    	$('#duracion').val('')
    }
    function setFrecuencia(){
    	var cale = $('#calendario option:selected').attr('idfrecuencia')
    	$('#frecuencia_pago').val(cale)
    }
</script>

@endpush