@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;
        }
        .table-bordered th, .table-bordered td {
            border: 1px solid #000 !important;
            padding: 5px;
        }
        .firma {
            margin-top: 30px;
            text-align: center;
        }
        .firma-line {
            border-top: 1px solid #000;
            width: 300px;
            margin: 10px auto;
        }

            /* Estilos para el modal */
    .modal_timbre {
      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_timbre::-webkit-scrollbar {
      display: none; /* Oculta la barra de desplazamiento en Chrome, Safari y otros navegadores WebKit */
    }

    .modal_content_timbre {
      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_timbre {
      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_timbre h2 {
      margin: 0;
      font-size: 1.5em;
      color: #333;
    }

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

    .modal_header_timbre .close_btn_timbre:hover {
      color: #ff0000;
    }

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

    .modal_footer_timbre {
      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')

<div id="myModal" class="modal_timbre">
    <div class="modal_content_timbre">
      <div class="modal_header_timbre">
        <h2 id="title_timbre">Título del Modal</h2>
        <button class="close_btn_timbre" onclick="closeModal()">×</button>
      </div>
      <div class="modal_body_timbre">
          <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>
                                  </div>
                                  <div class="mb-3 col-md-4">
                                      <label for="direccion_fiscal" class="form-label"><b>Dirección Fiscal</b></label>
                                      <input type="text" class="form-control" id="direccion_fiscal" name="direccion_fiscal">
                                  </div>
                              </div>
                              <hr>
                                <div class="section-title font-weight-bold">B. DATOS DE RETENCIÓN</div>
                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="fecha_emision" class="form-label"><b>Fecha de Emisión *</b></label>
                                            <input type="date" class="form-control" id="fecha_emision" name="fecha_emision" value="{{ date('Y-m-d')}}" required>
                                        </div>
                                        <div class="mb-3 col-md-4"> 
                                            <div class="form-group">
                                                <label for="numero_orden_pago" class="form-label"><b>Orden de Pago N° *</b></label>
                                                <select class="form-control form-control-lg select2bs4" id="numero_orden_pago" name="numero_orden_pago">
                                                    <option value="">-- Seleccione una Orden --</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="periodo_fiscal" class="form-label"><b>Periodo Fiscal *</b></label>
                                            <input type="text" class="form-control text-center" id="periodo_fiscal" name="periodo_fiscal">
                                        </div>
                                        <div class="mb-3 col-md-12">
                                            <label for="numero_orden_pago" class="form-label"><b>Concepto</b></label>
                                            <textarea class="form-control" name="" id="" cols="40"></textarea>
                                        </div>
                                    </div>
                              <hr>
                              <div class="section-title font-weight-bold">C. DATOS DE FACTURA</div>
                                  <div class="table-responsive">
                                      <table class="table table-borderless table-sm table-data3" id="table-timbre">
                                          <thead>
                                              <tr class="text-center">
                                                  <th>Factura N°</th>
                                                  <th>Fecha Factura</th>
                                                  <th>Monto Facturado</th>
                                                  <th>Base Imponible</th>
                                                  <th>Monto del Impuesto</th>
                                              </tr>
                                          </thead>
                                          <tbody id="tabla_timbre">
                                          
                                          </tbody>
                                          <tfoot id="tfoot_timbre">
  
                                          </tfoot>
                                      </table>
                                  </div>
                          </form>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="modal_footer_timbre">
        <button class="btn btn-secondary close_btn_timbre" onclick="closeModal()">Cerrar</button>
        <button class="btn btn-primary" id="btn-submit">Generar Retención</button>
      </div>
    </div>
</div>
<!-- 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">
            <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 CONTRIBUYENTE</div>
                <div class="mb-3">
                    <label for="rif" class="form-label">R.I.F *</label>
                    <input type="text" class="form-control" id="rif" name="rif" required>
                </div>
                <div class="mb-3">
                    <label for="razon_social" class="form-label">Nombre o Razón Social *</label>
                    <input type="text" class="form-control" id="razon_social" name="razon_social" required>
                </div>
                <div class="mb-3">
                    <label for="domicilio_fiscal" class="form-label">Domicilio Fiscal</label>
                    <input type="text" class="form-control" id="domicilio_fiscal" name="domicilio_fiscal">
                </div>
                <div class="mb-3">
                    <label for="teléfono_fijo" class="form-label">Teléfono fijo</label>
                    <input type="text" class="form-control" id="teléfono_fijo" name="teléfono_fijo">
                </div>
                {{-- <div class="mb-3">
                    <label for="articulo_50" class="form-label">Artículo 50 Ley de Créditos y Pagos sobre el Impuesto Promedio Mensual</label>
                    <input type="text" class="form-control" id="articulo_50" name="articulo_50" required>
                </div> --}}
                <hr>
                <!-- Sección: Orden de Facturación -->
                <div class="section-title font-weight-bold">DATOS DE LA RETENCIÓN</div>
                <div class="mb-3">
                    <label for="numero_retencion" class="form-label">Retención N° *</label>
                    <input type="text" class="form-control" id="numero_retencion" name="numero_retencion" required>
                </div>
                <div class="mb-3">
                    <label for="numero_factura" class="form-label">Factura N° *</label>
                    <input type="text" class="form-control" id="numero_factura" name="numero_factura" required>
                </div>
                <div class="mb-3">
                    <label for="numero_orden_servicio" class="form-label">Orden de Servicio N° *</label>
                    <input type="text" class="form-control" id="numero_orden_servicio" name="numero_orden_servicio" required>
                </div>
                <div class="mb-3">
                    <label for="fecha_servicio" class="form-label">Fecha *</label>
                    <input type="date" class="form-control" id="fecha_servicio" name="fecha_servicio" required value="{{ date('Y-m-d') }}">
                </div>
                
                <hr>
                <!-- Sección: Datos de la Liquidación -->
                <div class="section-title font-weight-bold">B. DATOS DE LA LIQUIDACIÓN DE ISLR</div>
                <!-- ISR -->
                {{-- <h5>ISR</h5> --}}
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="isr_base" class="form-label">Base *</label>
                        <input type="number" step="0.01" class="form-control" id="isr_base" name="isr_base" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="isr_tasa" class="form-label">Tasa (%) *</label>
                        <input type="number" step="0.01" class="form-control" id="isr_tasa" name="isr_tasa" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="isr_importe" class="form-label">Importe *</label>
                        <input type="number" step="0.01" class="form-control" id="isr_importe" name="isr_importe" readonly>
                    </div>
                </div>
                <!-- IVA -->
                {{-- <h5>IVA</h5>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="iva_base" class="form-label">Base</label>
                        <input type="number" step="0.01" class="form-control" id="iva_base" name="iva_base" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="iva_tasa" class="form-label">Tasa (%)</label>
                        <input type="number" step="0.01" class="form-control" id="iva_tasa" name="iva_tasa" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="iva_importe" class="form-label">Importe</label>
                        <input type="number" step="0.01" class="form-control" id="iva_importe" name="iva_importe" readonly>
                    </div>
                </div> --}}
                {{-- <div class="mb-3">
                    <label for="total_importe" class="form-label">Total Importe</label>
                    <input type="number" step="0.01" class="form-control" id="total_importe" name="total_importe" readonly>
                </div> --}}

                

                <!-- Observaciones -->
                <div class="section-title font-weight-bold">OBSERVACIONES</div>
                <div class="mb-3">
                    <label for="observaciones" class="form-label">Añade una observación</label>
                    <textarea class="form-control" id="observaciones" name="observaciones" rows="3"></textarea>
                </div>

                <!-- Botón de Envío -->
                <div class="text-center">
                    <button type="submit" class="btn btn-primary">Generar Reporte</button>
                </div>
            </form>
        </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 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="nuevo_timbre">
            <i class="fas fa-plus"></i> 
            Registrar retención
        </button>
        <hr>
        <!-- DATA TABLE-->
        <div class="table-responsive m-b-40 m-t-40">
            <table class="table table-borderless table-data3" id="table-retenciones">
                <thead>
                    <tr class="text-center">
                        <th>RIF</th>
                        <th>Retención N° </th>
                        <th>Factura N°</th>
                        <th>Orden Servicio N°</th>
                        <th>Fecha Servicio</th>
                        <th>Base ISR</th>
                        <th>Tasa ISR (%)</th>
                        <th>Importe ISR</th>
                        <th>Observaciones</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                   
                </tbody>
            </table>
        </div>
        <!-- END DATA TABLE                  -->
    </div>
</div>
@endsection

@section('scripts')
<script>
    var id_proveedor = 0,
        id = 0;
    $('.responsive-table').hide();
    $('#alert').hide();
    $('#preloader').show();

    //Initialize Select2 Elements
    $('.select2bs4').select2();

    function closeModal() {
      document.getElementById('myModal').style.display = 'none';
    }

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

    //Abrir modal de nuevo timbre
    $(document).on('click', '#nuevo_timbre', function(e) {
        periodofiscal()
        document.getElementById('myModal').style.display = 'flex';
        $("#title_timbre").text("Nueva Retención de Timbre Fiscal");
        /*$('#form-edit').trigger('reset');
        $('#form-edit').attr('id', 'form-add');*/

    });
    // Consutar el periodo fiscal actual para la retencion
    function periodofiscal() {
        fetch('/api/periodos/vigente')
        .then(response => response.json())
        .then(data => {
           var periodo_fiscal = moment(data.anio_fin).format('YYYYMM');

            $("#periodo_fiscal").val(periodo_fiscal);
           
        })
    }

//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) // CAMBIAR RUTA PARA QUE TRAIGA LAS ORDENES DE SERVICIO
    .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);*/
           
            data.ordenes_servicio.forEach(orden => { // ESTO CAMBIA CUNADO SE TENGA LA RUTA CORRECTA
                //console.log(orden);
                selectOrdenPago.append(
                `<option value="${orden.NUM_OP}">${orden.NUM_OP}</option>` // ESTO CAMBIA CUNADO SE TENGA LA RUTA CORRECTA
                );
            });
        }
        /*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 PARA LLENAR EL SELECTE DE NUMERO DE FACURAS
$(document).on('change', '#numero_orden_pago', function() {
    let orden = $(this).val();

    console.log(orden);
    
    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);
        /*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>
                `;

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

});


    //index();

    function index(){
        $('#table-retenciones').DataTable().destroy();
        $('#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
            "ajax": {
                "url": "/api/retenciones-timbre",  // Ruta de la API en Laravel
                "type": "GET",
                "dataSrc": function(json) {
                    // Oculta el preloader y muestra la tabla cuando los datos estén listos
                    $('#preloader').hide();
                    $('.responsive-table').fadeIn();
                    return json; // Retorna los datos en formato adecuado para DataTables
                }
            },
            "columns": [
                { "data": "rif", "className": "text-center" },
                { "data": "numero_retencion", "className": "text-center" },
                { "data": "numero_factura", "className": "text-center" },
                { "data": "numero_orden_servicio", "className": "text-center" },
                {
                    "data": "fecha_servicio",
                    "render": function(data, type, row) {
                        if (type === 'display' || type === 'filter') {
                            const date = new Date(data);
                            const formattedDate = ('0' + date.getDate()).slice(-2) + '-' +
                                                  ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
                                                  date.getFullYear();
                            return formattedDate;
                        }
                        return data;
                    },
                    "className": "text-center"
                },
                { "data": "isr_base", "className": "text-center" },
                { "data": "isr_tasa", "className": "text-center" },
                { "data": "isr_importe", "className": "text-center" },
                { "data": "observaciones", "className": "text-center" },
                { "data": null, "orderable": false, "searchable": false, "className": "text-right" } // Columna para los botones
            ],
            "columnDefs": [
                {
                    "targets": -1, // Última columna
                    "render": function(data, type, row) {
                        return `
                            <button class="btn btn-dark btn-sm ver" data-id="${row.id}">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-dark btn-sm editar" data-id="${row.id}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-danger btn-sm eliminar" data-id="${row.id}">
                                <i class="fas fa-trash"></i>
                            </button>
                        `;
                    }
                }
            ],
            "order": [[0, "desc"]], // Ordena por ID de manera descendente
        });
    }

    $(document).on('submit', '#form-add', function(e) {
        e.preventDefault();
        console.log("Hola)")
        let form = new FormData(this);
        fetch('/api/retenciones-timbre', {
            method: 'POST',
            body: form
        })
        .then(response => response.json())
        .then(data => {
            $('#modal-form').modal('hide');
            $('#form-add').trigger('reset');
            $('#alert-content').text(data.message);
            $('#alert').fadeIn();
            index();
        })
        .catch(error => console.error(error));
    });
/*
    $(document).on('change', '#rif', function() {
        let rif = $(this).val();
        fetch('/api/proveedores/by-rif/' + rif)
        .then(response => response.json())
        .then(data => {
            id_proveedor = data.CEDULA;
            $('#modal-form').modal('show');
            $('#razon_social').val(data.NOMBRE);
        })
        .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