@extends('layouts.app', ['activePage' => 'registro_patron', 'menuParent' => 'catalogos', 'titlePage' => __('Nomina - Registro Patronal')])
@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">Registro Patronal</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-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de factura: <span class="text-red-500">*</span></label>
                                <select id="tipoFacturaFilter" 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>-Todas-</option>
                                    <option value="I">Ingreso</option>
                                    <option value="E">Egreso</option>
                                    <option value="P">Pago</option>
                                </select>
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Estatus: <span class="text-red-500">*</span></label>
                                <select id="estatusFilter" 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>-Todas-</option>
                                    <option>Pendiente</option>
                                    <option value="2">Pagada</option>
                                    <option value="3">Cancelada</option>
                                    <option value="4">Con Póliza</option>
                                    <option value="5">Sin Póliza</option>
                                </select>
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Mes: <span class="text-red-500">*</span></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="" disabled selected>-Seleccione-</option>
                                    <option>Enero</option>
                                    <option value="2">Febrero</option>
                                    <option value="3">Marzo</option>
                                    <option value="4">Abril</option>
                                    <option value="5">Mayo</option>
                                    <option value="6">Junio</option>
                                    <option value="7">Julio</option>
                                    <option value="8">Agosto</option>
                                    <option value="9">Septiembre</option>
                                    <option value="10">Octubre</option>
                                    <option value="11">Noviembre</option>
                                    <option value="12">Diciembre</option>
                                </select>
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Año: <span class="text-red-500">*</span></label>
                                <select id="anioFilter" 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="" disabled selected>-Seleccione-</option>
                                    @for($i = date( 'Y'); $i >= 2020; $i--)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>-->
                        <div class="grid grid-cols-12 gap-4 mb-4">
                            <!--<div class="col-span-6 flex justify-start">
                                <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="generarPagoFactura()">
                                    <i class="material-icons align-middle text-sm">payments</i> Generar depósito
                                </button>
                            </div>-->
                            <div class="col-span-12 flex justify-end text-right">
                                <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()">
                                     Nuevo
                                </button>
                            </div>

                        </div>

                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200" id="list-ventas">
                                <thead class="bg-gray-50 px-6 py-3  text-[10px] font-semibold text-left font-medium text-gray-500 uppercase tracking-wider">
                                    <tr>
                                        <th width="10%"></th>
                                        <th class="px-2 py-2" width="10%">Registro</th>
                                        <th class="px-2 py-2" >Empresa</th>
                                        <th class="px-2 py-2">RFC</th>
                                        <th class="px-2 py-2" >Representante</th>
                                        <th class="px-2 py-2">Estado</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </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>

<div class="modal fade" id="modalNuevoRegistro">
    <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" name="id_registro" id="id_registro">
                <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-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Registro Patronal: <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="registro_patronal" name="registro_patronal">
                        </div>
                        <div class="col-span-6">
                            <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-10">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Razón 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="razon_social" name="razon_social">
                        </div>
                    </div>
                    <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">Régimen Fiscal: <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>
                                @foreach ($data['regimen'] as $r)
                                  <option value="{{ $r->id }}">{{ $r->descripcion }} ({{ $r->c_regimenfiscal }})</option>
                                @endforeach
                            </select>
                        </div>
                         <div class="col-span-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Actividad Económica: <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="actividad_economica" name="actividad_economica">
                        </div>
                    </div>
                </div>
                <h3 class="text-lg leading-6 font-medium text-gray-900">Información IMSS:</h3>
                <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-8">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Calle/Manzana: <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="calle_ims" name="calle_ims">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Número Exterior : <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="no_exterior" name="no_exterior">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Número Interior: </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="no_interior" name="no_interior">
                        </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">Colonia: <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="colonia" name="colonia">
                        </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 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" onchange="getMunicipios();">
                            @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">Municipio: <span class="text-red-500">*</span></label>
                            <select id="id_municipio" name="id_municipio" 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['municipios'] as $r)
                                  <option value="{{ $r->idmunicipio }}">{{ $r->municipio }}</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">Teléfono: <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="telefono" name="telefono">
                        </div>
                    </div>
                </div>
                <h3 class="text-lg leading-6 font-medium text-gray-900">Datos del Registro Patronal:</h3>
                <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">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Área Geográfica a partir del 01 de Enero de 2019: <span class="text-red-500">*</span></label>
                            <select id="area_geografica" name="area_geografica" 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">Salarios Minimos Generales</option>
                            <option value="2">Frontera Norte</option>
                            </select>
                        </div>
                         <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Delegación IMSS: <span class="text-red-500">*</span></label>
                            <select id="delegacion_ims" name="delegacion_ims" 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="getSubdelegacion();">
                            <option value="0">-Selecciona-</option>
                            @foreach ($data['delegaciones_imss'] as $r)
                                <option value="{{ $r->id }}">{{ $r->nombre }}</option>
                            @endforeach
                            </select>
                        </div>
                         <div class="col-span-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Subdelegación IMSS: <span class="text-red-500">*</span></label>
                           
                            <select id="subdelegacion_ims" name="subdelegacion_ims" 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>
                <h3 class="text-lg leading-6 font-medium text-gray-900">Prima de Riesgos de Trabajo:</h3>
                <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-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Año: <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="anio_prima" name="anio_prima">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Mes: <span class="text-red-500">*</span></label>
                            <select id="mes_prima" name="mes_prima" 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"></option><option value="2"></option><option value="3"></option><option value="4"></option><option value="5"></option><option value="6"></option><option value="7"></option><option value="8"></option><option value="9"></option><option value="10"></option><option value="11"></option><option value="12"></option> 
                            </select>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">%Prima RT: <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="porcentaje_prima" name="porcentaje_prima">
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Clase de Riesgos de Trabajo: <span class="text-red-500">*</span></label>
                            <select id="clase_riesgo" name="clase_riesgo" 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['clase_riesgo'] as $r)
                              <option value="{{ $r->id }}">Clase  {{ $r->clase }} : {{ $r->nivel }}</option>
                            @endforeach
                            </select>
                        </div> 
                         <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Acred. STPS: <span class="text-red-500">*</span></label>
                            <select id="acreditacion_stps" name="acreditacion_stps" 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-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fracción de RT: <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="frac_rt" name="frac_rt">
                        </div>
                    </div>
                </div>
                <h3 class="text-lg leading-6 font-medium text-gray-900">Información Legal:</h3>
                <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-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nombre del Patrón o Representante Legal: <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_repre_legal" name="nombre_repre_legal">
                        </div>
                        <div class="col-span-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Puesto del Representante: <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="puesto_repre_legal" name="puesto_repre_legal">
                        </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>




@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');

        loadGrid();

    });


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

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

urlAction = ($('#id_registro').val() == '') ? '{{ url('nomina/configuracion/guardar') }}' : '{{ url("nomina/configuracion/update") }}'
            $('#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 nuevoRegistro(){
        $('#title-modal-generar-pago').html('Nuevo')
        $('#id_registro').val('')
        $('#modalNuevoRegistro').modal('show')
    }
  
    function getMunicipios(idmuni=0){
      var estado  = $('#id_estado').val()
      $.ajax({
        url: '{{ url('catalogo/get_muicipios') }}',
        type: 'POST',
        dataType: 'json',
        data: {estado: estado},
      })
      .done(function(resp) {
        console.log("success");
          html = '';
          $('#id_municipio').html('')
          if(resp.estatus > 0){
              $.each(resp.municipios, function(index, val) {
                html += '<option value="'+val.idmunicipio+'">'+val.municipio+'</option>'
              });
              $('#id_municipio').html(html)
                if(idmuni!=0){
                  $('#id_municipio').val(idmuni)
                }
          }
          $('#id_municipio').selectpicker("refresh")


      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
      
    }
    
    function getSubdelegacion(idmuni=0){
              var delegacion  = $('#delegacion_ims').val()
      $.ajax({
        url: '{{ url('nomina/catalogo/get_subdelgeacion') }}',
        type: 'POST',
        dataType: 'json',
        data: {delegacion: delegacion},
      })
      .done(function(resp) {
        console.log("success");
          html = '';
          $('#subdelegacion_ims').html('')
          if(resp.estatus > 0){
              $.each(resp.subdelegaciones, function(index, val) {
                html += '<option value="'+val.id+'">'+val.nombre+'</option>'
              });
              $('#subdelegacion_ims').html(html)
                if(idmuni!=0){
                  $('#subdelegacion_ims').val(idmuni)
                }
          }
          $('#subdelegacion_ims').selectpicker("refresh")


      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
    }
    var id_factura = '';

    function loadGrid() {


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

        var table = $('#list-ventas').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            dom: 'Bfrtip',
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{ url('nomina/configuracion/get_registros') }}",
                type: "POST",
                data: {
                    tipo_factura: '',
                }
            },
            columns: [
                {
                    data: "id",render: function ( data, type, row ) {
                      if(row.estatus=='0'){
                        return '<div class="text-center"></div>'
                      }else{
                        return '<div class="text-center"><button class="btn btn-sm p-0 btn-link text-primary font-20" onclick="editar('+row.id+')"><i class="material-icons">edit</i></button><button class="btn btn-sm p-0 btn-link text-danger font-20" onclick="cancelar('+row.id+')"><i class="material-icons">close</i></button></div>'
                      }
                    }
                },
                {
                    data: "registro_patronal",
                },
                {
                    data: "razon_social",
                },
                {
                    data: "rfc",
                },
                {
                    data: "nombre_repre_legal",
                },

                {
                    data: "estado.estado",
                },

            ],

            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)' // Excluye la primera columna
                    }
                },
                {
                    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 ventas',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    },
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 8;
                        doc.styles.tableHeader.fontSize = 8;
                    }
                }
            ],
            order: [
                [2, "asc"]
            ],
        });


    }
    function editar(id){
        $.ajax({
            url: '{{ url('nomina/configuracion/get_registro') }}',
            type: 'POST',
            dataType: 'json',
            data: {id: id},
        })
        .done(function(resp) {
            console.log("success");
            $('#registro_patronal').val(resp.data.registro_patronal)
            $('#rfc').val(resp.data.rfc)
            $('#razon_social').val(resp.data.razon_social)
            $('#actividad_economica').val(resp.data.actividad_economica)
            $('#regimenfiscal').val(resp.data.id_regimen_fiscal)
            $('#calle_ims').val(resp.data.calle_ims)
            $('#no_exterior').val(resp.data.no_exterior)
            $('#no_interior').val(resp.data.no_interior)
            $('#colonia').val(resp.data.colonia)
            $('#id_estado').val(resp.data.id_estado)
            $('#id_municipio').val(resp.data.id_municipio)
            $('#telefono').val(resp.data.telefono)
            $('#area_geografica').val(resp.data.area_geografica)
            $('#delegacion_ims').val(resp.data.delegacion_ims)
            getSubdelegacion(resp.data.subdelegacion_ims)
            $('#anio_prima').val(resp.data.anio_prima)
            $('#mes_prima').val(resp.data.mes_prima)
            $('#porcentaje_prima').val(resp.data.porcentaje_prima)
            $('#clase_riesgo').val(resp.data.clase_riesgo)
            $('#acreditacion_stps').val(resp.data.acreditacion_stps)
            $('#frac_rt').val(resp.data.frac_rt)
            $('#nombre_repre_legal').val(resp.data.nombre_repre_legal)
            $('#puesto_repre_legal').val(resp.data.puesto_repre_legal)
            $('#id_registro').val(resp.data.id)
            
            $('#subdelegacion_ims').val(resp.data.subdelegacion_ims)
            $('.select2').selectpicker("refresh")
            $('#modalNuevoRegistro').modal('show')
            $('#title-modal-generar-pago').html('Editar')
            
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }
    function cancelar(id){
        Swal.fire({
          title: "Deseas cancelar el registro patronal?",
          //text: "Una vez eliminado no lo podras recuperar",
          icon: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "Si"
        }).then((result) => {
          if (result.value) {

            $.ajax({
              url: '{{ url('delete') }}',
              type: 'POST',
              dataType: 'json',
              data: {id: id},
            })
            .done(function(resp) {
              console.log("success");
                Swal.fire({
                  title: "Eliminado!",
                  text: resp.message,
                  icon: "success"
                });
                loadGrid();
            })
            .fail(function() {
              console.log("error");
            })
            .always(function() {
              console.log("complete");
            });
            
          }
        });
    }
</script>

@endpush