@extends('layouts.app')

@section('styles')
<style>
    .header, .footer {
            text-align: center;
            margin-bottom: 20px;
        }
        .sat-logo {
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-weight: bold;
            font-size: 24px;
        }
        .section-title {
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 10px;
        }
   
        .firma {
            margin-top: 30px;
            text-align: center;
        }
        .firma-line {
            border-top: 1px solid #000;
            width: 300px;
            margin: 10px auto;
        }

    /* Estilos para el modal */
    .modal_islr {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      justify-content: center;
      align-items: flex-start; /* Alinea el contenido al inicio para que el header sea visible */
      overflow-y: auto; /* Permite scroll en el fondo si el modal es muy largo */
      scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
      -ms-overflow-style: none; /* Oculta la barra de desplazamiento en IE/Edge */
    }

    .modal_islr::-webkit-scrollbar {
      display: none; /* Oculta la barra de desplazamiento en Chrome, Safari y otros navegadores WebKit */
    }

    .modal_content_islr {
      background-color: white;
      width: 1800px;
      max-width: 90%;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      margin: 20px 0; /* Margen vertical para evitar que el modal toque los bordes */
      min-height: calc(100vh - 40px); /* Asegura que el modal ocupe al menos la altura de la ventana */
    }

    .modal_header_islr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid #e5e5e5;
      position: sticky; /* Hace que el header sea pegajoso */
      top: 0; /* Fija el header en la parte superior del modal */
      background-color: white; /* Evita que el contenido se vea a través del header */
      z-index: 1001; /* Asegura que el header esté por encima del contenido */
    }

    .modal_header_islr h2 {
      margin: 0;
      font-size: 1.5em;
      color: #333;
    }

    .modal_header_islr .close_btn_islr {
      background: none;
      border: none;
      font-size: 1.5em;
      cursor: pointer;
      color: #333;
    }

    .modal_header_islr .close_btn_islr:hover {
      color: #ff0000;
    }

    .modal_body_islr {
      padding: 20px;
      flex-grow: 1;
    }

    .modal_footer_islr {
      display: flex;
      justify-content: space-between;
      padding: 15px 20px;
      border-top: 1px solid #e5e5e5;
      position: sticky; /* Hace que el footer sea pegajoso */
      bottom: 0; /* Fija el footer en la parte inferior del modal */
      background-color: white; /* Evita que el contenido se vea a través del footer */
      z-index: 1001; /* Asegura que el footer esté por encima del contenido */
    }


</style>
@endsection

@section('content')
<!-- Modal Formulario -->
<div class="modal fade" id="modal-form" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Generar retención</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>

<!-- Modal Reporte -->
<div class="modal fade" id="modal-report" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width: 1000px !important; margin-left: -100px !important">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Retención N°: <span id="retencion-numero-title"></span></h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="container border p-0" style="border-color: #000 !important" id="printable-section">
                <!-- Encabezado -->
                <div class="header p-2">
                    <div class="container-fluid d-flex justify-content-between">
                        <img src="{{ asset('images/icon.png') }}" alt="" width="170" height="10">
                        <img src="{{ asset('images/satet.png') }}" alt="" width="170" height="10">
                    </div>
                    <h5>
                        PLANILLA PARA EL PROVEEDOR
                        <br>
                        SEGÚN LEY DE TIMBRES FISCALES E IMPUESTOS SOBRE 
                        <br>
                        INSTRUMENTOS CREDITICIOS Y MEDIOS DE PAGOS DEL
                        <br>
                        ESTADO TRUJILLO
                        <br>
                        ARTÍCULO 50
                    </h5>
                </div>
                
                <div class="container-fluid d-flex justify-content-end">
                    <table class="table-bordered text-right">
                        <tbody>
                            <tr>
                                <td>RETENCIÓN N°:</td>
                                <td style="text-align: right"><span id="retencion-numero"></span></td>
                            </tr>
                            <tr>
                                <td>FACTURA N°:</td>
                                <td style="text-align: right"><span id="factura-numero"></span></td>
                            </tr>
                            <tr>
                                <td>ORDEN DE SERVICIO N°:</td>
                                <td style="text-align: right"><span id="orden-servicio-numero"></span></td>
                            </tr>
                            <tr>
                                <td>FECHA:</td>
                                <td style="text-align: right"><span id="fecha-servicio"></span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Sección A: Datos del Contribuyente -->
                <table class="table table-bordered mt-2">
                    <tbody>
                        <tr>
                            <th colspan="3" class="text-center ">
                                A. DATOS DEL CONTRIBUYENTE
                            </th>
                        </tr>
                        <tr>
                            <td>NOMBRE O RAZÓN SOCIAL:
                                <br>
                                <span id="nombre-proveedor"></span>
                            </td>
                            <td>N° R.I.F:
                                <br>
                                <span id="rif-proveedor"></span>
                            </td>
                            <td>TELÉFONO FIJO:</td>
                        </tr>
                        <tr>
                            <td colspan="3">DOMICILIO FISCAL:</td>
                        </tr>
                        <tr>
                            <th colspan="3" class="text-center ">
                                B. DATOS DE LA LIQUIDACIÓN
                            </th>
                        </tr>
                        <tr>
                            <td colspan="2">
                                BASE IMPONIBLE:
                            </td>
                            <td class="text-right" style="text-align: right">
                                <span id="isr-base"></span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align: right">
                                ALICUOTA IMPOSITIVA(TARIFA)(1*1000):
                            </td>
                            <td class="text-right" style="text-align: right">
                                <span id="isr-tasa"></span> %
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                TOTAL CONTRIBUCIÓN A PAGAR:
                            </td>
                            <td class="text-right" style="text-align: right">
                                <span id="isr-importe"></span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                OBSERVACION(ES):
                                <span id="retencion-observaciones"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        
               
                <!-- Sección de Firmas -->
                <div class="container-fluid d-flex justify-content-between p-5 mt-3">
                    <div class="firma">
                        <p>FIRMA DEL CONTRIBUYENTE O REPRESENTANTE LEGAL</p>
                        <div class="firma-line"></div>
                    </div>
                    <div class="firma">
                        <p>FIRMA Y SELLO HUMEDO DE LA INSTITUCIÓN</p>
                        <div class="firma-line"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" onclick="printSection()">Imprimir retención</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>


<div id="myModal" class="modal_islr">
  <div class="modal_content_islr">
    <div class="modal_header_islr">
      <h2 id="title_islr">Título del Modal</h2>
      <button class="close_btn_islr" onclick="closeModal()">×</button>
    </div>
    <div class="modal_body_islr">
        <div class="row">

            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form id="form-add">
                            <div class="alert alert-info">
                                <p><i class="fas fa-info-circle"></i> Los campos con <span class="text-dark">*</span> son obligatorios</p>
                            </div>
                           <!-- Sección: Datos del Contribuyente -->
                            <div class="section-title font-weight-bold">A. DATOS DEL SUJETO DE RETENCIÓN</div>
                            <div class="row">
                                <div class="mb-3 col-md-4">
                                    <label for="rif" class="form-label"><b>R.I.F *</b></label>
                                    <input type="text" class="form-control" id="rif" name="rif" required>
                                </div>
                                <div class="mb-3 col-md-4">
                                    <label for="razon_social" class="form-label"><b>Nombre o Razón Social *</b></label>
                                    <input type="text" class="form-control" id="razon_social" name="razon_social" required disabled>
                                </div>
                                <div class="mb-3 col-md-4">
                                    <label for="direccion_fiscal" class="form-label"><b>Dirección Fiscal del Sujeto de Retención</b></label>
                                    <input type="text" class="form-control" id="direccion_fiscal" name="direccion_fiscal" disabled>
                                </div>
                            </div>
                            <!-- Sección: Orden de Facturación -->
                            <div class="section-title font-weight-bold">B. DATOS DE LA RETENCIÓN</div>
                            <div class="row">
                                <div class="mb-3 col-md-4">
                                    <label for="tipo_perceptor" class="form-label"><b>Tipo de Perceptor *</b></label>
                                    <select class="form-control" name="tipo_perceptor" id="tipo_perceptor" disabled>
                                        <option value="">-- Seleccione un tipo --</option>
                                        <option value="1">Natural - No Residente</option>
                                        <option value="2">Natural - Residente</option>
                                        <option value="3">Juridica - No Domiciliada</option>
                                        <option value="4">Jurdica - Domiciliada</option>
                                    </select>
                                </div>
                                <div class="mb-3 col-md-4">
                                    <label for="concep_pago" class="form-label"><b>Concepto de Pago *</b></label>
                                    <select class="form-control" name="concep_pago" id="concep_pago" required disabled>
                                        <option value="">-- Seleccione un concepto --</option>
                                    </select>
                                </div>   
                                <div class="mb-3 col-md-4">
                                    <label for="numero_orden_pago" class="form-label"><b>Orden de Pago N° *</b></label>
                                    <select class="form-control select2bs4" name="numero_orden_pago" id="numero_orden_pago" required disabled>
                                        <option value="">-- Seleccione una Orden --</option>
                                    </select>
                                </div>
                            </div>
                            <hr>
                            <div class="section-title font-weight-bold">C. DATOS DE ISLR</div>
                                <div class="table-responsive">
                                    <table class="table table-borderless table-data3" id="table-islr">
                                        <thead>
                                            <tr class="text-center">
                                                <th>Factura N°</th>
                                                <th>Control N°</th>
                                                <th>Fecha Factura</th>
                                                <th>Monto Facturado</th>
                                                <th>Base Imponible</th>
                                                <th>Retención (%)</th>
                                                <th>Sustraendo</th>
                                                <th>Monto Retenido </th>
                                            </tr>
                                        </thead>
                                        <tbody id="tabla_islr">
                                        
                                        </tbody>
                                        <tfoot id="tfoot_islr">

                                        </tfoot>
                                    </table>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal_footer_islr">
      <button class="btn btn-secondary close_btn_islr" onclick="closeModal()">Cerrar</button>
      <button class="btn btn-primary" id="btn-submit">Generar Retención</button>
    </div>
  </div>
</div>

<div class="row">
    <div class="col-md-12">
        <!-- ALERT-->
        <div class="alert au-alert-success alert-dismissible fade show au-alert au-alert--70per m-b-40" role="alert" id="alert">
            <i class="zmdi zmdi-check-circle"></i>
            <span class="content" id="alert-content">You successfully read this important alert message.</span>
            <button class="close" type="button" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">
                    <i class="zmdi zmdi-close-circle"></i>
                </span>
            </button>
        </div>
        <!-- END ALERT-->
        <hr>
        <button class="btn btn-dark btn-lg" id="nueva_islr">
            <i class="fas fa-plus"></i> 
            Registrar retención ISLR
        </button>
        <hr>
        <!-- DATA TABLE-->
    
            <table class="table table-borderless table-data3" id="table-retenciones">
                <thead>
                    <tr class="text-center">
                        <th>Fecha Emisión</th>
                        <th>R.I.F</th>
                        <th>Nombre / Razón Social</th>
                        <th>Tipo Perceptor</th>
                        <th>Concepto Aplicado</th>
                        <th>Orden de Pago</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                
                </tbody>
            </table>
        
        <!-- END DATA TABLE-->

    </div>
</div>


@endsection

@section('scripts')
<script>
var id_proveedor = 0,
    id = 0,
    islr_renglones = [],
    islr_data = {};
    $('.select2bs4').select2();
    function closeModal() {
      document.getElementById('myModal').style.display = 'none';
    }

    function performAction() {
      // Aquí puedes agregar la lógica para el botón de acción
      alert('¡Acción realizada!');
    }

    // Cerrar el modal si se hace clic fuera del contenido
    window.onclick = function(event) {
      const modal = document.getElementById('myModal');
      if (event.target === modal) {
        closeModal();
      }
    };


    
    $('.responsive-table').hide();
    $('#alert').hide();
    $('#preloader').show();

    index();

    function index(){
        fetch('/api/retenciones-islr')
        .then(response => response.json())
        .then(data => {
            let template = '',
                perceptor = '#concep_pago';
            data.forEach(retencion => {
                switch (retencion.tipo_perceptor) {
                    case 2:
                        perceptor = "Natural - Residente";
                        break;
                    case 3:
                        perceptor = "Juridica - No Domiciliada";
                        break;
                    case 4:
                        perceptor = "Juridica - Domiciliada";
                        break;

                    default:
                        perceptor = "Natural - No Residente";
                        break; // Optional break for the default case
                }
                template += `
                <tr class="tr-shadow">
                    <td class="text-center">${moment(retencion.created_at).format('DD-MM-YYYY HH:mm:ss')}</td>
                    <td class="text-center">${retencion.proveedore.rif}</td>
                    <td class="text-center">${retencion.proveedore.empresa}</td>
                    <td class="text-center">${perceptor}</td>
                    <td class="text-center">${retencion.concepto.concepto_pago}</td>
                    <td class="text-center">${retencion.ordenes_pago.numero_orden}</td>
                    <td class="text-center">
                        <div class="table-data-feature">
                            <a href="/reports/islr/${retencion.id}" class="btn btn-dark" data-toggle="tooltip" data-placement="top" title="Imprimir reporte">
                                <i class="fas fa-print"></i>
                            </a>
                            <button class="btn btn-dark edit mx-2" data-toggle="tooltip" data-placement="top" title="Editar">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-danger delete" data-toggle="tooltip" data-placement="top" title="Editar">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                `
            })
            $('#table-retenciones').DataTable().destroy();
            $('#table-retenciones tbody').html(template);
            $('#table-retenciones').DataTable({
                responsive: true,
                language: {
                    url: '{{asset("json/es-ES.json")}}',
                },
                "processing": true,  // Activa el mensaje interno de carga de DataTables
                "serverSide": false,  // Desactiva el modo servidor porque solo obtendremos datos sin paginación del lado del servidor
            });
        })
    }

    //Abrir modal de nueva ISLR
    $(document).on('click', '#nueva_islr', function(e) {
        document.getElementById('myModal').style.display = 'flex';
        $("#title_islr").text("Nueva Retención de ISLR");
        $('#form-edit').trigger('reset');
        $('#form-edit').attr('id', 'form-add');

    });


//FUNCION PARA TRAER LOS DATOS DEL PROVEEDOR POR RIF
    $(document).on('change', '#rif', function() {
        let rif = $(this).val();
        let selectOrdenPago = $('#numero_orden_pago'); // Asegúrate de que este sea el ID de tu <select>
        selectOrdenPago.empty().append('<option value="">-- Seleccione una Orden --</option>');
        // Limpiar el select antes de llenarlo
        fetch('/api/solici/' + rif)
        .then(response => response.json())
        .then(data => {
            //console.log(data.ordenes_pago.NUMOP);
            console.log(data);
            
            
            if (data.status === 'ok') {
                //islr_data.proveedor_id = data.proveedor.id;
                $('#tipo_perceptor').attr("disabled", false);
                //$('#razon_social').val(data.proveedor.empresa);
                /*$('#telefono_fijo').val(data.proveedor.TELEFONO);*/
                

                data.ordenes_servicio.forEach(orden => {
                    //console.log(orden);
                    selectOrdenPago.append(
                        `<option value="${orden.NUM_OP}">${orden.NUM_OP}</option>`
                    );
                });
            }
            /*Cuando el RIF venga lleno debo desbloquear el select de tipo perceptor y solo llenar el select de orden de pago*/


            
        })
        .catch(error => console.error(error));
    });

//FUNCION QUE LLENA EL SELCTE DE TIPO DE PERCEPTOR
    $(document).on('change', '#tipo_perceptor', function() {
        let perceptor = $(this).val();
        let selectConcepto = $('#concep_pago'); // Asegúrate de que este sea el ID de tu <select>
        
        // Limpiar el select antes de llenarlo
        selectConcepto.empty().append('<option value="">-- Seleccione un concepto --</option>');


        islr_data.tipo_perceptor = perceptor;

        fetch('/api/perceptor/' + perceptor)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Error en la solicitud: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log(data);
                if (data.status === true) {
                    $('#concep_pago').attr("disabled", false);
                    // Almacenar los datos de los perceptores
                    perceptoresData = data.data
                    // Iterar sobre los perceptores y sus conceptos
                    data.data.forEach(perceptor => {
                        console.log("AQUI: ",perceptor.sustraendo);
                            selectConcepto.append(
                                `<option value="${perceptor.concepto.id}" data-sustraendo="${perceptor.sustraendo}">${perceptor.concepto.concepto_pago}</option>`
                            );
                    });
                }

            })
            .catch(error => {
                console.error('Error al obtener los conceptos:', error);
            });
    });

// FUNCION QUE LLENA EL SELECTE DE CONCEPTO DE PAGO

let tarifaPorcentaje,
    sustraendo;
$(document).on('change', '#concep_pago', function() {
    let conceptoId = $(this).val();

    if (!conceptoId) {
        console.log('No se seleccionó un concepto');
        return;
    }

    // Buscar el perceptor correspondiente al concepto seleccionado
    const perceptor = perceptoresData.find(p => p.concepto && p.concepto.id == conceptoId);

    if (perceptor) {
        let tarifa;
        let sustra;

        if (perceptor.tarifa_porcentaje === 'N/A' || !perceptor.tarifa_porcentaje) {
            tarifa = 0;
        } else {
            tarifa = parseFloat(perceptor.tarifa_porcentaje.replace(',', '.'));
        }

        if (perceptor.sustraendo === 'N/A' || !perceptor.sustraendo) {
            sustra = 0;
        } else {
            sustra = parseFloat(perceptor.sustraendo.replace(',', '.'));
        }

        // Mostrar los valores (puedes ajustar esto según tus necesidades)
        //console.log(`Tarifa Porcentaje: ${tarifa}`);
        //console.log(`Sustraendo: ${sustra}`);
        $('#numero_orden_pago').attr("disabled", false);
        tarifaPorcentaje = tarifa;
        sustraendo = sustra;
        
        islr_data.concepto_id = conceptoId;
        // Ejemplo: Actualizar elementos en el DOM con los valores
        //$('#tarifa_porcentaje').val(tarifaPorcentaje);
        //$('#sustraendo').val(sustraendo);
        
       /* let base_imponible = $('#base_imponible').val();
        let monto_retencion = (base_imponible * tarifaPorcentaje / 100) - sustraendo;
        $('#monto_retencion').val(monto_retencion);*/
        

    } else {
        console.error('No se encontró un perceptor para el concepto seleccionado');
       // $('#monto_retencion').text('No disponible');
        //$('#sustraendo').text('No disponible');
    }
});


// FUNCION PARA LLENAR EL SELECTE DE NUMERO DE FACURAS
    $(document).on('change', '#numero_orden_pago', function() {
        let orden = $(this).val();
        let monto_retencion;
        let template;
        let template2;
        let totalF = 0,
            totalI = 0,
            porcentaje = 0,
            totalSu = 0,
            totalR = 0;

        
        fetch('/api/criva/orden/' + orden)
        .then(response => response.json())
        .then(data => {
            //console.log(data.facturas);
            /*Cuando esta data venga llena debo desbloquear el select de facturas*/
            console.log('porcentaje: ',tarifaPorcentaje ," Sustraendo: ", sustraendo);
            islr_renglones = [];
            data.facturas.forEach(factura => {
                    //console.table(factura);
                    monto_retencion = parseFloat(((factura.base_imponible * tarifaPorcentaje / 100) - sustraendo).toFixed(2));
                    totalF += factura.monto_facturado;
                    totalI += factura.base_imponible;
                    porcentaje = tarifaPorcentaje;
                    totalSu += sustraendo;
                    totalR += monto_retencion;
                    console.log(totalF);

                    template += `
                            <tr>
                                <td class="text-center">${factura.numero_factura}</td>
                                <td class="text-center">${factura.numero_control}</td>
                                <td class="text-center">${moment(factura.fecha_factura).format('DD-MM-YYYY')}</td>
                                <td class="text-center">${factura.monto_facturado}</td>
                                <td class="text-center">${factura.base_imponible}</td>
                                <td class="text-center">${tarifaPorcentaje}</td>
                                <td class="text-center">${sustraendo}</td>
                                <td class="text-center">${monto_retencion}</td>
                            </tr>
                    `;

                   /* selectFactura.append(
                        `<option 
                            value="${factura.NRO_FACT}" 
                            data-control="${factura.NRO_CONTRO}" 
                            data-fecha="${factura.FECHA_FACT}" 
                            data-monto="${factura.MONTO_FACTURADO}" 
                            data-imponible="${factura.BASE_IMPON}"
                            data-porcentaje="${tarifaPorcentaje}"
                            data-sustraendo="${sustraendo}"
                            data-m_retenido="${monto_retencion}"> ${factura.NRO_FACT}</option>`
                    );*/

                    islr_renglones.push({
                        'factura_id': factura.id,
                        'tarifa_porcentaje': tarifaPorcentaje,
                        'sustraendo': sustraendo,
                        'monto_retencion': monto_retencion
                    });
            });
                islr_data.orden_pago_id = data.facturas[0].orden_pago_id;
                template2 =`
                        <tr class="table-active text-dark">
                            <th colspan="3" class="text-right">Totales</th>
                            <td class="text-right"><strong>${totalF.toFixed(2)}<strong></td>
                            <td class="text-right"><strong>${totalI.toFixed(2)}<strong></td>
                            <td class="text-center"><strong>${porcentaje} %<strong></td>
                            <td class="text-right"><strong>${totalSu.toFixed(2)}<strong></td>
                            <td class="text-right"><strong>${totalR.toFixed(2)}<strong></td>
                        </tr>
                            `;
            $('#tabla_islr').html(template);
            $('#tfoot_islr').html(template2);
            
        })
        .catch(error => console.error(error));

    });


    $(document).on('click', '#btn-submit', function(e) {
        e.preventDefault();
        let form = new FormData();
            form.append('islr', JSON.stringify(islr_data));
            form.append('renglones', JSON.stringify(islr_renglones));

        fetch('/api/retenciones-islr', {
            method: 'POST',
            body: form
        })
        .then(response => response.json())
        .then(data => { 
            $('#modal-form').modal('hide');
            $('#form-edit').trigger('reset');
            $('#form-edit').attr('id', 'form-add');
            $('#alert-content').text(data.message);
            $('#alert').fadeIn();
            index();
        })
        // .catch(error => console.error(error));
    });


/*
    $(document).on('change', '#numero_orden_servicio', function() {
        let rif = $(this).val();
        fetch('/api/ordenes-servicios/' + rif)
        .then(response => response.json())
        .then(data => {
            let base = 0;
            data.base.forEach(e => {
                base += e;                
            });
            $('#isr_base').val(base).trigger('change');
        })
        .catch(error => console.error(error));
    });

    $(document).on('click', '.ver', function() {
        id = $(this).data('id');
        fetch('/api/retenciones-timbre/' + id)
        .then(response => response.json())
        .then(data => {
            $('#nombre-proveedor').text(data.proveedor.NOMBRE);
            $('#rif-proveedor').text(data.proveedor.CEDULA);

            $('#retencion-numero-title').text(data.retencion.numero_retencion);
            $('#retencion-numero').text(data.retencion.numero_retencion);
            $('#factura-numero').text(data.retencion.numero_factura);
            $('#orden-servicio-numero').text(data.retencion.numero_orden_servicio);

            $('#isr-base').text(new Intl.NumberFormat('es-VE', { style: 'currency', currency: 'VES' }).format(data.retencion.isr_base));
            $('#isr-tasa').text(data.retencion.isr_tasa);
            $('#isr-importe').text(new Intl.NumberFormat('es-VE', { style: 'currency', currency: 'VES' }).format(data.retencion.isr_importe));
            $('#retencion-observaciones').text(data.retencion.observaciones);


            let fecha = new Date(data.retencion.fecha_servicio);
            $('#fecha-servicio').text(`${fecha.getDate() < 10 ? '0' + fecha.getDate() : fecha.getDate()}-${(fecha.getMonth() + 1) < 10 ? '0' + (fecha.getMonth() + 1) : (fecha.getMonth() + 1)}-${fecha.getFullYear()}`);

            


            $('#modal-report').modal('show');
        })
        .catch(error => console.error(error));
    });

    $(document).on('click', '.editar', function() {
        id = $(this).data('id');
        fetch('/api/retenciones-timbre/' + id)
        .then(response => response.json())
        .then(data => {
            $('#rif').val(data.proveedor.CEDULA);
            $('#razon_social').val(data.proveedor.NOMBRE);

            $('#numero_retencion').val(data.retencion.numero_retencion);
            $('#numero_factura').val(data.retencion.numero_factura);
            $('#numero_orden_servicio').val(data.retencion.numero_orden_servicio);

            $('#isr_base').val(data.retencion.isr_base);
            $('#isr_tasa').val(data.retencion.isr_tasa);
            $('#isr_importe').val(data.retencion.isr_importe);
            $('#observaciones').val(data.retencion.observaciones);


            let fecha = new Date(data.retencion.fecha_servicio);
            $('#fecha-servicio').val(`${fecha.getFullYear()}-${(fecha.getMonth() + 1).toString().padStart(2, '0')}-${fecha.getDate().toString().padStart(2, '0')}`);

            

            $('#form-add').attr('id', 'form-edit');
            $('#modal-form').modal('show');
        })
        .catch(error => console.error(error));
    });

    $(document).on('submit', '#form-edit', function(e) {
        e.preventDefault();
        let form = new FormData(this);
            form.append('_method', 'PUT');
        fetch('/api/retenciones-timbre/'+id, {
            method: 'POST',
            body: form
        })
        .then(response => response.json())
        .then(data => {
            $('#modal-form').modal('hide');
            $('#form-edit').trigger('reset');
            $('#form-edit').attr('id', 'form-add');
            $('#alert-content').text(data.message);
            $('#alert').fadeIn();
            index();
        })
        .catch(error => console.error(error));
    });


    $(document).on('click', '.eliminar', function() {
        let id = $(this).data('id');
        if(confirm('Estas seguro de eliminar el proveedor?')) {
            fetch('/api/retenciones-timbre/' + id, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                $('#alert-content').html(data.message);
                $('#alert').fadeIn();
                index();
            })
            .catch(error => console.error(error));
        }
    });

    $(document).on('change', '#isr_base', function() {
        let base = $(this).val();
        let isr = base * $('#isr_tasa').val();
        $('#isr_importe').val(isr);
    });

    $(document).on('keyup', '#isr_tasa', function() {
        let tasa = $(this).val();
        let base = $('#isr_base').val() * tasa;
        $('#isr_importe').val(base);
    });

        function printSection() {
            // Obtener el contenido de la sección a imprimir
            const printableSection = document.getElementById('printable-section').outerHTML;

            // Crear una nueva ventana para la impresión
            const printWindow = window.open('', '_blank', 'width=800,height=600');
            printWindow.document.write('<html>' +
                                        '<head>' +
                                        '<title>Imprimir Planilla</title>' +
                                        '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">' +
                                        '<style>' +
                                        'body { font-family: Arial, sans-serif; margin: 20px; }' +
                                        '.header { text-align: center; margin-bottom: 20px;}' +
                                        '.firma { text-align: center; font-size: 10px !important;}' +
                                        '.firma-line { border-top: 1px solid #000; width: 300px; margin: 10px auto; }' +
                                        '.table-bordered th, .table-bordered td { border: 1px solid #000 !important; padding: 5px; font-size: 10px !important;}' +
                                        'img { max-width: 80%; height: auto; }' +
                                        '.container { width: 100%; max-width: 100%; } h5{font-size: 10px !important;} span{width: 100%; text-align: right; font-size: 10px !important;}' +
                                        '</style>' +
                                        '</head>' +
                                        '<body>' +
                                        printableSection +
                                        '<script>' +
                                        'window.onload = function() {' +
                                        'window.print();' +
                                        'window.onafterprint = function() {' +
                                        'window.close();' +
                                        '};' +
                                        '};' +
                                        '<\/script>' + 
                                        '</body>' +
                                        '</html>');
            printWindow.document.close();
        }
*/        
</script>
@endsection