@extends('layouts.app', ['activePage' => 'registro_patron', 'menuParent' => 'catalogos', 'titlePage' => __('Nomina - Departamentos')])
@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">Departamentos</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-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%">Clave</th>
                                        <th class="px-2 py-2" >Departamento</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <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">
        <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" 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">
                            <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>
                    <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">Departamento: <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="departamento" name="departamento">
                        </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').val() == '') ? '{{ url('nomina/configuracion/guardar_depa') }}' : '{{ url("nomina/configuracion/update_depa") }}'
            $('#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')
        $('#departamento').val('')
        $('#clave').val('')
        $('#id').val('')
        $('#modalNuevoRegistro').modal('show')
    }

    
  


    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_depas') }}",
                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: "clave",
                },
                {
                    data: "departamento",
                },
            ],

            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");
            $('#clave').val(resp.data.clave)
            $('#departamento').val(resp.data.departamento)
            $('#id').val(resp.data.id)
    
            $('#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