@extends('layouts.app', ['activePage' => 'registro_patron', 'menuParent' => 'catalogos', 'titlePage' => __('Nomina - Conceptos Fijos')])
@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">Conceptos Fijos</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">
                                    Conceptos Fijos por Empresa
                                </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">
                                    Conceptos Fijos por Trabajador
                                </a>
                              
                            </nav>
                        </div>
                        <div class="tab-content tab-space mt-6">
                            <div class="tab-pane active" id="link1">
                                <div class="w-full space-y-2">
                                    <!-- Premio de Puntualidad -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion1" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion1C" />
                                        <label for="acordion1" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Premio de Puntualidad</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion1C">
                                        Contenido del Premio de Puntualidad.
                                      </div>
                                    </div>

                                    <!-- Premio de Asistencias -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion2" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion2C" />
                                        <label for="acordion2" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Premio de Asistencias</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion2C">
                                        Contenido del Premio de Asistencias.
                                      </div>
                                    </div>

                                    <!-- Despensa -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion3" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion3C" />
                                        <label for="acordion3" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Despensa</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion3C">
                                        Contenido de la Despensa.
                                      </div>
                                    </div>

                                    <!-- Despensa Tarjeta Electrónica -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion4" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion4C" />
                                        <label for="acordion4" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Despensa Tarjeta Electrónica</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion4C">
                                        Contenido de la Despensa Tarjeta Electrónica.
                                      </div>
                                    </div>

                                    <!-- Fondo de Ahorro -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion5" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion5C" />
                                        <label for="acordion5" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Fondo de Ahorro</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion5C">
                                        Contenido del Fondo de Ahorro.
                                      </div>
                                    </div>

                                </div>
                            </div>  
                            <div class="tab-pane " id="link2">
                                <div class="w-full space-y-2">
                                    <!-- Pensión Alimenticia Neta -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion6" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion6C" />
                                        <label for="acordion6" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Pensión Alimenticia Neta</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion6C">
                                        <!-- Tipo -->
                                        <div class="flex items-center space-x-3">
                                          <label class="text-gray-700">Tipo</label>
                                          <div class="flex items-center space-x-2">
                                            <input type="checkbox" id="porcentaje" name="tipo" class="text-blue-600 focus:ring-blue-500" checked />
                                            <label for="porcentaje" class="text-teal-700 font-medium cursor-pointer">% Porcentaje</label>
                                          </div>
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Cantidad/Porcentaje: <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="dias_vacaciones" name="dias_vacaciones">
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                           <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 font-medium transition-colors duration-200" onclick="nuevoRegistro()">
                                              Seleccionar Trabajadores
                                            </button>
                                        </div>  
                                      </div>
                                    </div>

                                    <!-- Pensión Alimenticia Bruta -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion7" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion7C" />
                                        <label for="acordion7" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Pensión Alimenticia Bruta</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion7C">
                                        <!-- Tipo -->
                                        <div class="flex items-center space-x-3">
                                          <label class="text-gray-700">Tipo</label>
                                          <div class="flex items-center space-x-2">
                                            <input type="checkbox" id="porcentaje" name="tipo" class="text-blue-600 focus:ring-blue-500" checked />
                                            <label for="porcentaje" class="text-teal-700 font-medium cursor-pointer">% Porcentaje</label>
                                          </div>
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Cantidad/Porcentaje: <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="dias_vacaciones" name="dias_vacaciones">
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                           <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 font-medium transition-colors duration-200" onclick="nuevoRegistro()">
                                              Seleccionar Trabajadores
                                            </button>
                                        </div>  
                                      </div>
                                    </div>

                                    <!-- Pensión Alimenticia Monetaria -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion8" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion8C" />
                                        <label for="acordion8" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Pensión Alimenticia Monetaria</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion8C">
                                        <!-- Tipo -->
                                        <div class="flex items-center space-x-3">
                                          <label class="text-gray-700">Tipo</label>
                                          <div class="flex items-center space-x-2">
                                            <input type="checkbox" id="porcentaje" name="tipo" class="text-blue-600 focus:ring-blue-500" checked />
                                            <label for="porcentaje" class="text-teal-700 font-medium cursor-pointer">$ Monetario</label>
                                          </div>
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Cantidad/Porcentaje: <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="dias_vacaciones" name="dias_vacaciones">
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                           <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 font-medium transition-colors duration-200" onclick="nuevoRegistro()">
                                              Seleccionar Trabajadores
                                            </button>
                                        </div>  
                                      </div>
                                    </div>

                                    <!-- Bono -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion9" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion9C" />
                                        <label for="acordion9" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Bono</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion9C">
                                        <!-- Tipo -->
                                        <div class="flex items-center space-x-3">
                                          <label class="text-gray-700">Tipo</label>
                                          <div class="flex items-center space-x-2">
                                            <input type="checkbox" id="porcentaje" name="tipo" class="text-blue-600 focus:ring-blue-500" checked />
                                            <label for="porcentaje" class="text-teal-700 font-medium cursor-pointer">% Porcentaje</label>
                                          </div>
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Cantidad/Porcentaje: <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="dias_vacaciones" name="dias_vacaciones">
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                           <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 font-medium transition-colors duration-200" onclick="nuevoRegistro()">
                                              Seleccionar Trabajadores
                                            </button>
                                        </div>  
                                      </div>
                                    </div>

                                    <!-- Caja de ahorro -->
                                    <div class="border rounded-md w-full mb-2">
                                      <div class="flex items-center bg-gray-100 w-full px-4 py-3">
                                        <input type="checkbox" id="acordion10" class="mr-2 accent-blue-600 peer acordiones" idcontent="acordion10C" />
                                        <label for="acordion10" class="w-full flex justify-between items-center cursor-pointer">
                                          <span class="font-medium text-gray-800">Caja de ahorro</span>
                                          <svg class="w-4 h-4 transform transition-transform duration-200 peer-checked:rotate-90 text-gray-600" fill="none"
                                            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                          </svg>
                                        </label>
                                      </div>
                                      <div class="px-4 py-3 bg-white text-gray-700 hidden peer-checked:block border-t w-full" id="acordion10C">
                                        <!-- Tipo -->
                                        <div class="flex items-center space-x-3">
                                          <label class="text-gray-700">Tipo</label>
                                          <div class="flex items-center space-x-2">
                                            <input type="checkbox" id="porcentaje" name="tipo" class="text-blue-600 focus:ring-blue-500" checked />
                                            <label for="porcentaje" class="text-teal-700 font-medium cursor-pointer">% Porcentaje</label>
                                          </div>
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Cantidad/Porcentaje: <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="dias_vacaciones" name="dias_vacaciones">
                                        </div>
                                        <div class="flex items-center space-x-3 grid grid-cols-5">
                                           <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 font-medium transition-colors duration-200" onclick="nuevoRegistro()">
                                              Seleccionar Trabajadores
                                            </button>
                                        </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();



    });

  $('.acordiones').on('change', function () {
      if ($(this).is(':checked')) {
        $('#'+$(this).attr('idcontent')).slideDown();
      } else {
        $('#'+$(this).attr('idcontent')).slideUp();
      }
    });
</script>

@endpush