
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comprobante de Retención</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f9f9f9;
        }

        .container {
            width: 1200px;
            height: 800px;
            margin: auto;
            padding: 20px;
            background-color: white;
            border: 2px solid #ccc;
            border-radius: 8px;
            position: relative;
        }

        .logo {
    position: absolute;
    top: 40px;
    right: 20px;
    height: 80px;
    width: auto;
}

.logo1 {
    position: absolute;
    top: 20px;
    left: 120px;
    height: 110px;
    width: 130px;
}

        .column, .row {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
            font-size: 16px;
            font-weight: bold;
            margin: 0;
        }

        .containerOP {
            width: 1160px;
            height: 130px;
            background-color: white;
            border: 2px solid #ccc;
            border-radius: 8px;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0;
            margin-top: 20px;
            position: absolute;
            top: 650px;
            left: 35px;
        }

        .containerOP1 {
            width: 160px;
            height: 120px;
            background-color: white;
            border: 2px solid #ccc;
            border-radius: 8px;
            display: grid;
            gap: 0;
            margin-top: 20px;
            position: absolute;
            top: 500px;
            left: 1035px;
        }

        .text-modifiable {
            position: absolute;
            font-weight: bold;
            font-size: 14px;
        }

        /* Estilos del popup */
        #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none; /* Oculto por defecto */
    z-index: 999; /* Asegúrate de que esté por encima de otros elementos */
}

/* Estilo del popup */
#popup {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
    width: 1000px; /* Ancho fijo */
    max-width: 400%; /* Ancho máximo para pantallas pequeñas */
    z-index: 1000; /* Asegúrate de que esté por encima del overlay */
}

/* Estilo para los encabezados del popup */
#popup h2 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
    text-align: center;
}

/* Estilo para los campos del formulario */
#popup input,
#popup select {
    width: calc(100% - 20px); /* Ocupa el ancho total menos el padding */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

/* Estilo para el botón de cerrar */
.close-button {
    background-color: #ff4d4d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

/* Estilo para el botón de generar */
.generate-button {
    background-color: #ff9800;
    color: white;
font-weight: bold;
    border: none;
            transition: background-color 0.3s, transform 0.2s;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    display: block; /* Centrar el botón */
    width: 100%; /* Ancho total */
    margin-top: 20px;
}

.generate-button:hover,
.close-button:hover {
    background-color: #fb8c00; /* Color de fondo al pasar el ratón */
    transform: scale(1.05); /* Aumenta un poco el tamaño */
}

/* Estilo de los contenedores */
.popup-field {
    display: flex;
    flex-direction: column;
}

/* Estilo para el div de mensaje */
.message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}

        /* Reemplazables con posicionamiento absoluto */
        .slot1, .slot2, .slot3, .slot4, .slot5, .slot6, .slot7 {
            position: absolute;
            font-weight: bold;
        }

        .slot1 {
            top: 630px;
            left: 50px;
            font-size: 16px;
        }

        .slot2 {
            top: 630px;
            left: 500px;
            font-size: 18px;
        }

        .slot3 {
            top: 260px;
            left: 299px;
            font-size: 18px;
        }

        .slot4 {
            top: 260px;
            left: 523px;
            font-size: 18px;
        }

        .slot5 {
            top: 260px;
            left: 723px;
            font-size: 18px;
        }

        .slot6 {
            top: 358px;
            left: 695px;
            font-size: 18px;
        }

        .slot7 {
            top: 358px;
            left: 808px;
            font-size: 18px;
        }

.button-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.popup-button {
    flex: 1;
    margin: 0 10px;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.generate-button {
    background-color: #4CAF50;
    color: white;
}

.generate-button:hover {
    background-color: #45a049;
}

.load-button {
    background-color: #008CBA;
    color: white;
}

.load-button:hover {
    background-color: #007B9E;
}

.close-button {
    background-color: #f44336;
    color: white;
}

.close-button:hover {
    background-color: #d32f2f;
}

.popup-button:active {
    transform: scale(0.95);
}

.popup-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}
    </style>
</head>
<body>

    <div class="container">
        <img src="images/logo.png" alt="Logo Derecha" class="logo">
    <img src="images/logo1.jpg" alt="Logo Izquierda" class="logo1">
        <div class="TITULO text-modifiable" style="top: 60px; left: 500px;">COMPROBANTE DE RETENCION</div>
        <div class="REPUBLICA text-modifiable" style="top: 140px; left: 50px;">REPUBLICA BOLIVARIANA DE VENEZUELA</div>
        <div class="ALCALDIA text-modifiable" style="top: 160px; left: 70px;">ALCALDIA DE SAN JOSE DE GUARIBE</div>
        <div class="ESTADO text-modifiable" style="top: 180px; left: 130px;">ESTADO GUARICO</div>
        <div class="comprobante-title text-modifiable" style="top: 230px; left: 300px;">COMPROBANTE NRO.</div>
        <div class="fecha-emision text-modifiable" style="top: 230px; left: 500px;">FECHA DE EMISIÓN</div>
        <div class="fecha-entrega text-modifiable" style="top: 230px; left: 700px;">FECHA DE ENTREGA</div>
        <div class="numero-factura text-modifiable" style="top: 230px; left: 900px;">NÚMERO DE FACTURA:</div>
        <div class="numerocontable-factura text-modifiable" style="top: 330px; left: 900px;">N° CONTABLE FACTURA:</div>
        <div class="fecha-factura text-modifiable" style="top: 430px; left: 900px;">FECHA FACTURA:</div>
        <div class="nombre-razon text-modifiable" style="top: 330px; left: 50px;">NOMBRE O RAZON SOCIAL</div>
        <div class="nombre-sujeto text-modifiable" style="top: 600px; left: 50px;">NOMBRE O RAZÓN SOCIAL DEL SUJETO RETENIDO</div>
        <div class="municipio text-modifiable" style="top: 360px; left: 50px;">ALCALDÍA DEL MUNICIPIO</div>
        <div class="municipio-sj text-modifiable" style="top: 390px; left: 50px;">SAN JOSÉ DE GUARIBE</div>
        <div class="localidad text-modifiable" style="top: 520px; left: 50px;">SAN JOSÉ DE GUARIBE - ESTADO GUARICO</div>
        <div class="direccion-fiscal text-modifiable" style="top: 460px; left: 50px;">DIRECCIÓN FISCAL DEL AGENTE DE RETENCIÓN</div>
        <div class="calle text-modifiable" style="top: 490px; left: 50px;">CALLE 1, LOCAL S/N, SECTOR INAVI</div>
        <div class="registro-informacion text-modifiable" style="top: 600px; left: 500px;">REGISTRO DE INFORMACION FISCAL DEL SUJETO RETENIDO</div>
        <div class="rif-alcaldia text-modifiable" style="top: 330px; left: 280px;">REGISTRO DE INF FISCAL DEL AGTE DE RET</div>
        <div class="rif-alcaldia2 text-modifiable" style="top: 360px; left: 375px; font-size: 20px;">G-20000382-0</div>
        <div class="periodo-fiscal text-modifiable" style="top: 330px; left: 690px;">PERIODO FISCAL</div>
        <div class="añofiscal text-modifiable" style="top: 360px; left: 650px; font-size: 16px;">AÑO:</div>
        <div class="mesfiscal text-modifiable" style="top: 360px; left: 765px; font-size: 16px;">MES:</div>

        <!-- Reemplazables -->
        <div class="slot1">REMPLAZO1</div>
        <div class="slot2">REMPLAZO2</div>
        <div class="slot3 cursor-pointer" onclick="saveComprobanteToFile()">REMPLAZO3</div>
        <div class="slot4">REMPLAZO4</div>
        <div class="slot5">REMPLAZO5</div>
        <div class="slot6">REMPLAZO6</div>
        <div class="slot7">REMPLAZO7</div>

        <!-- Tabla -->
        <div class="containerOP1">
            <div class="row">TOTAL A PAGAR</div>
            <div class="row" id="id7">7</div>
            <div class="row" id="id8">8</div>
            <div class="row" id="id9">9</div>
        </div>

        <div class="containerOP">
            <div class="column">N° OP</div>
            <div class="column">SUBTOTAL</div>
            <div class="column">EXENTO</div>
            <div class="column">ALI</div>
            <div class="column">IVA</div>
            <div class="column">TOTAL COMPRAS</div>
            <div class="column">IVA RETENIDO</div>
            <div class="column cursor-pointer" id="id1" onclick="reopenPopup()">1</div> <!-- Cambiado para poder acceder y modificar -->
            <div class="column" id="id2">2</div> <!-- subtotal -->
            <div class="column" id="id3">3</div> <!-- excento -->
            <div class="column">16%</div>
            <div class="column" id="id4">4</div> <!-- IVA -->
            <div class="column" id="id5">5</div> <!-- TOTAL COMPRAS -->
            <div class="column" id="id6">6</div> <!-- IVA RETENIDO -->
        </div>

        <!-- Popup para ingresar datos -->
        <div id="overlay"></div>
<div id="popup">
    <h2>Generar Comprobante</h2>
    
    <!-- Campos del formulario -->
    <div class="popup-field">
        <label for="provider">Proveedor:</label>


<select id="provider">
    <option value="manual">Manual</option>
</select>

        <div id="manualProvider" style="display: none;">
            <label for="manualName">Nombre del Proveedor:</label>
            <input type="text" id="manualName">
            <label for="manualRIF">RIF del Proveedor:</label>
            <input type="text" id="manualRIF">
        </div>
    </div>
    
    <div class="popup-field">
        <label for="issueDate">Fecha de Emisión:</label>
        <input type="date" id="issueDate">
    </div>
    
    <div class="popup-field">
        <label for="deliveryDate">Fecha de Entrega:</label>
        <input type="date" id="deliveryDate">
    </div>
    
    <div>
        <label for="comprobanteNumber">Número de Comprobante:</label>
<input type="number" id="comprobanteNumber" name="comprobanteNumber" placeholder="Ingrese número" />

    </div>
    
    <div class="popup-field">
        <label for="operationNumber">Número de Operación:</label>
        <input type="text" id="operationNumber">
    </div>
    
    <div class="popup-field">
        <label for="baseimponible">Base Imponible:</label>
        <input type="number" id="baseimponible" step="0.01" oninput="updateRetentionValues()">
    </div>
    
    <div class="popup-field">
        <label for="excento">Exento:</label>
        <input type="number" id="excento" step="0.01" oninput="updateRetentionValues()">
    </div>
    
    <div class="popup-field">
        <label for="retentionPercentage">Porcentaje de Retención:</label>
        <select id="retentionPercentage" onchange="updateRetentionValues()">
            <option value="75">75%</option>
            <option value="100">100%</option>
        </select>
    </div>
    
<!-- Sección para mostrar valores calculados -->
<div id="retentionValues" style="margin-top: 20px;">
    <h3>Valores de Retención</h3>
    <p>IVA Calculado: <span id="calculatedIVA">0.00</span></p>
    <p>Total Factura: <span id="totalFactura">0.00</span></p>
    <p>IVA Retenido: <span id="retainedIVA">0.00</span></p>
    <p>Timbre Fiscal: <span id="timbreFiscal">0.00</span></p>
    <p>Total a pagar: <span id="totalPagar">0.00</span></p>
    
    <!-- Nueva línea para mostrar el porcentaje de retención del proveedor seleccionado -->
    <p>Porcentaje de Retención del Proveedor: <span id="retencionProveedorPorcentaje">0%</span></p>
</div>

    
<div class="button-container">

    <button class="popup-button generate-button" onclick="generate()">Generar Comprobante</button>

    <button class="popup-button load-button" onclick="loadComprobanteFromJson()">Cargar Comprobante</button>

    <button class="popup-button close-button" onclick="window.location.href='index.html'">Volver al Inicio</button>

</div>


    </div>

<script src="db/proveedores.js"></script>



    <script>


function guardarComprobanteOnline(comprobante) {
  const webAppUrl = "https://script.google.com/macros/s/AKfycbzuoi6FdNqO6wTotgd3LSb4lxYxNsRJS_1Q2aJlCvx0JMvH0G4_heXSx_V1srWYWC7V/exec"; 
  
  fetch(webAppUrl, {
    method: 'POST',
    mode: 'no-cors', 
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(comprobante)
  })
  .then(response => {
    console.log('Comprobante guardado online');
    console.log('Respuesta:', response);
  })
  .catch(error => {
    console.error('Error guardando comprobante', error);
  });
}

function saveComprobanteToFile() {
    const comprobante = {
        proveedor: document.querySelector('.slot1').textContent,
        rif: document.querySelector('.slot2').textContent,
        comprobanteNum: document.querySelector('.slot3').textContent,
        fechaEmision: document.querySelector('.slot4').textContent,
        fechaEntrega: document.querySelector('.slot5').textContent,
        operationNumber: document.getElementById('id1').textContent,
        baseImponible: document.getElementById('id2').textContent,
        excento: document.getElementById('id3').textContent,
        // Añadir estos campos explícitamente
		numeroComprobante: String(document.getElementById('comprobanteNumber').value), // Convertir a string
        numeroOperacion: document.getElementById('operationNumber').value
    };
	


    const proveedor = comprobante.proveedor.replace(/[^a-zA-Z0-9]/g, '_');
    const numeroOrden = `OP${comprobante.operationNumber}`;
    const numeroComprobante = `Com${comprobante.comprobanteNum.slice(-8).replace(/^0+/, '')}`;
    const fileName = `${proveedor}_${numeroOrden}_${numeroComprobante}.json`;

    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(comprobante));
    const downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href", dataStr);
    downloadAnchorNode.setAttribute("download", fileName);
    document.body.appendChild(downloadAnchorNode);
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
	    // Guardar online
    guardarComprobanteOnline(comprobante);
}

function reopenPopup() {
    const operationNumber = document.getElementById('id1').textContent;
    const baseImponible = document.getElementById('id2').textContent;
    const excento = document.getElementById('id3').textContent;
    const proveedor = document.querySelector('.slot1').textContent;
    const rif = document.querySelector('.slot2').textContent;
    const comprobanteNum = document.querySelector('.slot3').textContent.slice(-8);
    const fechaEmision = document.querySelector('.slot4').textContent;
    const fechaEntrega = document.querySelector('.slot5').textContent;

    document.getElementById('operationNumber').value = operationNumber;
    document.getElementById('baseimponible').value = baseImponible;
    document.getElementById('excento').value = excento;
    document.getElementById('provider').value = proveedor;
    document.getElementById('comprobanteNumber').value = comprobanteNum;
    document.getElementById('issueDate').value = fechaEmision;
    document.getElementById('deliveryDate').value = fechaEntrega;

    if (document.getElementById('provider').value === "") {
        document.getElementById('provider').value = "manual";
        document.getElementById('manualName').value = proveedor;
        document.getElementById('manualRIF').value = rif;
        document.getElementById('manualProvider').style.display = 'block';
    }

    openPopup();
}

function loadComprobanteFromJson() {
    console.log("Iniciando carga de comprobante desde JSON");
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'application/json';
    input.onchange = function() {
        const file = input.files[0];
        const reader = new FileReader();
        reader.onload = function(event) {
            try {
                const comprobante = JSON.parse(event.target.result);
                console.log("Datos cargados:", comprobante);

                // Cargar datos en el formulario
                document.getElementById('operationNumber').value = comprobante.operationNumber || '';
                document.getElementById('baseimponible').value = comprobante.baseImponible || '';
                document.getElementById('excento').value = comprobante.excento || '';
                
                const providerSelect = document.getElementById('provider');
                providerSelect.value = comprobante.proveedor || 'manual';
                
                if (providerSelect.value === 'manual') {
                    document.getElementById('manualProvider').style.display = 'block';
                    document.getElementById('manualName').value = comprobante.proveedor || '';
                    document.getElementById('manualRIF').value = comprobante.rif || '';
                } else {
                    document.getElementById('manualProvider').style.display = 'none';
                }

                document.getElementById('comprobanteNumber').value = comprobante.comprobanteNum ? comprobante.comprobanteNum.slice(-8) : '';
                document.getElementById('issueDate').value = comprobante.fechaEmision || '';
                document.getElementById('deliveryDate').value = comprobante.fechaEntrega || '';

                // Actualizar valores de retención
                const retentionPercentage = providerSelect.selectedOptions[0].getAttribute('data-retention') || '75';
                document.getElementById('retentionPercentage').value = retentionPercentage;
                document.getElementById('retencionProveedorPorcentaje').innerText = retentionPercentage + '%';

                // Actualizar cálculos
                updateRetentionValues();

                // Actualizar valores en el comprobante
                document.querySelector('.slot1').textContent = comprobante.proveedor || 'REMPLAZO1';
                document.querySelector('.slot2').textContent = comprobante.rif || 'REMPLAZO2';
                document.querySelector('.slot3').textContent = comprobante.comprobanteNum || 'REMPLAZO3';
                document.querySelector('.slot4').textContent = comprobante.fechaEmision || 'REMPLAZO4';
                document.querySelector('.slot5').textContent = comprobante.fechaEntrega || 'REMPLAZO5';
                document.querySelector('.slot6').textContent = comprobante.ano || 'REMPLAZO6';
                document.querySelector('.slot7').textContent = comprobante.mes || 'REMPLAZO7';

                document.getElementById('id1').textContent = comprobante.operationNumber || '1';
                document.getElementById('id2').textContent = comprobante.baseImponible || '2';
                document.getElementById('id3').textContent = comprobante.excento || '3';
                document.getElementById('id4').textContent = comprobante.iva || '4';
                document.getElementById('id5').textContent = comprobante.totalCompras || '5';
                document.getElementById('id6').textContent = comprobante.ivaRetenido || '6';
                document.getElementById('id7').textContent = comprobante.subtotal || '7';
                document.getElementById('id8').textContent = comprobante.ivaPorcentaje25 || '8';
                document.getElementById('id9').textContent = comprobante.totalAPagar || '9';

                console.log("Datos cargados exitosamente");
                openPopup();
            } catch (error) {
                console.error("Error al cargar el archivo JSON:", error);
                alert("Error al cargar el archivo. Por favor, asegúrese de que es un JSON válido.");
            }
        };
        reader.readAsText(file);
    };
    input.click();
}

                // Abre el popup al cargar la página
                window.onload = function() {
    setTimeout(function() {
        cargarDatosDesdeSessionStorage();
        console.log("Valor de prueba:", localStorage.getItem('test'));
        openPopup();
    }, 100);
};

function cargarDatosDesdeSessionStorage() {
  console.log("Contenido de sessionStorage:", JSON.stringify(sessionStorage));

  const baseYa = sessionStorage.getItem('baseya');
  const baseNu = sessionStorage.getItem('basenu');
  const proveedorYa = sessionStorage.getItem('proveedorya');
  const proveedorNu = sessionStorage.getItem('proveedornu');
  const excentoNu = sessionStorage.getItem('excentonu');
  const fecha1Ya = sessionStorage.getItem('fecha1ya');
  const fecha2Ya = sessionStorage.getItem('fecha2ya');
  const opYa = sessionStorage.getItem('opya');
  const comprobanteYa = sessionStorage.getItem('comprobanteya');
  const bancoyA = sessionStorage.getItem('bancoya');
  const referenciaya = sessionStorage.getItem('referenciaya');
  const fecha1Nu = sessionStorage.getItem('fecha1nu');
  const fecha2Nu = sessionStorage.getItem('fecha2nu');
  const opNu = sessionStorage.getItem('opnu');
  const comprobantenu = sessionStorage.getItem('comprobantenu');
  const bancono = sessionStorage.getItem('banconu');
  const referencianu = sessionStorage.getItem('referencianu');

  console.log("baseya:", baseYa);
  console.log("basenu:", baseNu);
  console.log("proveedorya:", proveedorYa);
  console.log("proveedornu:", proveedorNu);
  console.log("excentonu:", excentoNu);
  console.log("fecha1ya:", fecha1Ya);
  console.log("fecha2ya:", fecha2Ya);
  console.log("opya:", opYa);
  console.log("comprobanteya:", comprobanteYa);
  console.log("bancoya:", bancoyA);
  console.log("referenciaya:", referenciaya);
  console.log("fecha1nu:", fecha1Nu);
  console.log("fecha2nu:", fecha2Nu);
  console.log("opnu:", opNu);
  console.log("comprobantenu:", comprobantenu);
  console.log("banconu:", bancono);
  console.log("referencianu:", referencianu);

  const baseImponible = baseYa || baseNu;
  const proveedor = proveedorYa || proveedorNu;
  const excento = excentoNu;
  const fecha1 = fecha1Ya || fecha1Nu;
  const fecha2 = fecha2Ya || fecha2Nu;
  const op = opYa || opNu;
  const comprobante = comprobanteYa || comprobantenu;
  const banco = bancoyA || bancono;
  const referencia = referenciaya || referencianu;

  if (baseImponible) {
    document.getElementById('baseimponible').value = baseImponible;
    console.log(`Base imponible cargada: ${baseImponible}`);
  }

  if (proveedor) {
    document.getElementById('provider').value = proveedor;
    console.log(`Proveedor cargado: ${proveedor}`);
    // Disparar el evento change en el selector de proveedor
    document.getElementById('provider').dispatchEvent(new Event('change'));
  }

  if (excento) {
    document.getElementById('excento').value = excento;
    console.log(`Excento cargado: ${excento}`);
    // Disparar el evento input para actualizar los cálculos
    const excentoInput = document.getElementById('excento');
    excentoInput.dispatchEvent(new Event(' input'));
  }

  if (fecha1) {
    document.getElementById('issueDate').value = fecha1;
    console.log(`Fecha de emisión cargada: ${fecha1}`);
  }

  if (fecha2) {
    document.getElementById('deliveryDate').value = fecha2;
    console.log(`Fecha de entrega cargada: ${fecha2}`);
  }

  if (op) {
    document.getElementById('operationNumber').value = op;
    console.log(`Número de operación cargado: ${op}`);
  }

  if (comprobante) {
    document.getElementById('comprobanteNumber').value = comprobante;
    console.log(`Número de comprobante cargado: ${comprobante}`);
  }

  if (banco) {
    // No hay un campo específico para el banco en el formulario actual
    console.log(`Banco cargado: ${banco}`);
  }

  if (referencia) {
    // No hay un campo específico para la referencia en el formulario actual
    console.log(`Referencia cargada: ${referencia}`);
  }

  // Disparar el evento input para actualizar los cálculos
  const baseimponibleInput = document.getElementById('baseimponible');
  baseimponibleInput.dispatchEvent(new Event('input'));

  console.log("Finalizada la carga de datos desde sessionStorage");

  // Eliminar datos de la memoria después de 5 segundos
  setTimeout(function() {
    sessionStorage.removeItem('generadoya');
    sessionStorage.removeItem('generadonu');
    sessionStorage.removeItem('proveedorya');
    sessionStorage.removeItem('proveedornu');
    sessionStorage.removeItem('baseya');
    sessionStorage.removeItem('basenu');
    sessionStorage.removeItem('excentonu');
    sessionStorage.removeItem('fecha1nu');
    sessionStorage.removeItem('fecha2nu');
    sessionStorage.removeItem('opnu');
    sessionStorage.removeItem('comprobantenu');
    sessionStorage.removeItem('banconu');
    sessionStorage.removeItem('referencianu');
    sessionStorage.removeItem('fecha1ya');
    sessionStorage.removeItem('fecha2ya');
    sessionStorage.removeItem('opya');
    sessionStorage.removeItem('comprobanteya');
    sessionStorage.removeItem('bancoya');
    sessionStorage.removeItem('referenciaya');
    console.log("Datos eliminados de la memoria");
  }, 5000); // 5 segundos
}
        document.getElementById('provider').addEventListener('change', function() {
            const manualProvider = document.getElementById('manualProvider');
            manualProvider.style.display = this.value === 'manual' ? 'block' : 'none';
            if (this.value !== 'manual') {
                document.getElementById('manualName').value = '';
                document.getElementById('manualRIF').value = '';
            }

             // Nueva funcionalidad: Actualizar el porcentaje de retención del proveedor seleccionado
    let selectedProvider = this.selectedOptions[0];
    let retentionPercentage = selectedProvider.getAttribute('data-retention') || '0';
    document.getElementById('retencionProveedorPorcentaje').innerText = retentionPercentage + '%';
    
    // También actualizamos el porcentaje en el select de retención si es necesario
    document.getElementById('retentionPercentage').value = retentionPercentage;
        });
    
        function openPopup() {
            document.getElementById('overlay').style.display = 'block';
            document.getElementById('popup').style.display = 'block';
        }
    
        function closePopup() {
            document.getElementById('overlay').style.display = 'none';
            document.getElementById('popup').style.display = 'none';
        }
    
        function calcularIVA(baseimponible, excento) {
            return (baseimponible - excento) * 0.16;
        }
    
        function calcularTotalCompras(subtotal, iva) {
            return subtotal + iva;
        }
    
        function calcularTotalAPagar() {
            const subtotal = parseFloat(document.getElementById('id7').innerText) || 0; // Subtotal
            const iva = parseFloat(document.getElementById('id8').innerText) || 0; // IVA
            const totalAPagar = subtotal + iva; // Total a pagar
            document.getElementById('id9').innerText = totalAPagar.toFixed(2); // Mostrar con 2 decimales
        }
    
    function updateRetentionValues() {
        const baseimponible = parseFloat(document.getElementById('baseimponible').value) || 0;
        const excento = parseFloat(document.getElementById('excento').value) || 0;
    
        // Calcular el IVA
        const iva = calcularIVA(baseimponible, excento);
        document.getElementById('calculatedIVA').textContent = iva.toFixed(2); // Mostrar con 2 decimales
    
        // Calcular el IVA retenido
        const retentionPercentage = parseInt(document.getElementById('retentionPercentage').value, 10);
        const ivaRetenido = iva * (retentionPercentage / 100);
        document.getElementById('retainedIVA').textContent = ivaRetenido.toFixed(2); // Mostrar con 2 decimales
    
        // Calcular el total de la factura (base imponible + IVA)
        const totalFactura = baseimponible + iva;
        document.getElementById('totalFactura').textContent = totalFactura.toFixed(2); // Mostrar con 2 decimales
    
        // Calcular el timbre fiscal (0.1% del base imponible)
        const timbreFiscal = baseimponible * 0.001;
        document.getElementById('timbreFiscal').textContent = timbreFiscal.toFixed(2); // Mostrar con 2 decimales
    
        // Calcular el total a pagar (base imponible + IVA - Timbre Fiscal + IVA a pagar)
        const totalPagar = baseimponible + iva - timbreFiscal - ivaRetenido;
        document.getElementById('totalPagar').textContent = totalPagar.toFixed(2); // Mostrar con 2 decimales
    }
    
    // Función auxiliar para calcular el IVA (16%)
    function calcularIVA(baseimponible, excento) {
        return (baseimponible - excento) * 0.16;
    }
    
function generate() {
    const providerSelect = document.getElementById('provider');
    const isManual = providerSelect.value === 'manual';

    // Obtener el nombre del proveedor (manual o seleccionado)
    const provider = isManual 
        ? document.getElementById('manualName').value 
        : providerSelect.options[providerSelect.selectedIndex].text;

    // Obtener el RIF (manual o seleccionado)
    const rif = isManual 
        ? document.getElementById('manualRIF').value 
        : providerSelect.options[providerSelect.selectedIndex].getAttribute('data-rif');  

const issueDate = document.getElementById('issueDate').value;

    const deliveryDate = document.getElementById('deliveryDate').value;

    const comprobanteNumber = document.getElementById('comprobanteNumber').value;

    const operationNumber = document.getElementById('operationNumber').value;

    const baseimponible = parseFloat(document.getElementById('baseimponible').value) || 0; 

    const excento = parseFloat(document.getElementById('excento').value) || 0;

    // Generar el slot3 con el formato aaaammxxxxxxxx
    const year = new Date(issueDate).getFullYear();
    const month = ('0' + (new Date(issueDate).getMonth() + 1)).slice(-2); 
    const formattedComprobanteNumber = comprobanteNumber.padStart(8, '0'); 
    const formattedSlot3 = `${year}${month}${formattedComprobanteNumber}`;

    // Reemplazar los textos en el comprobante
    document.querySelector('.slot1').textContent = provider || 'REMPLAZO1';
    document.querySelector('.slot2').textContent = rif || 'REMPLAZO2';
    document.querySelector('.slot3').textContent = formattedSlot3 || 'REMPLAZO3';
    document.querySelector('.slot4').textContent = issueDate || 'REMPLAZO4';
    document.querySelector('.slot5').textContent = deliveryDate || 'REMPLAZO5';
    document.querySelector('.slot6').textContent = year || 'REMPLAZO6';
    document.querySelector('.slot7').textContent = month || 'REMPLAZO7';

    // Reemplazar el N° OP, subtotal y exento
    document.getElementById('id1').textContent = operationNumber || '1';
    document.getElementById('id2').textContent = baseimponible.toFixed(2) || '2';
    document.getElementById('id3').textContent = excento.toFixed(2) || '3';

    // Calcular el IVA basado en el subtotal y exento ingresado
    const iva = (baseimponible - excento) * 0.16;
    document.getElementById('id4').textContent = iva.toFixed(2);

    // Calcular el IVA retenido basado en el porcentaje seleccionado
    const retentionPercentage = parseInt(document.getElementById('retentionPercentage').value, 10);
    const ivaRetenido = iva * (retentionPercentage / 100);
    document.getElementById('id6').textContent = ivaRetenido.toFixed(2);

    // Calcular el total de compras
    const totalCompras = calcularTotalCompras(baseimponible, iva);
    document.getElementById('id5').textContent = totalCompras.toFixed(2);

    // Mostrar el subtotal en el div id7
    document.getElementById('id7').textContent = baseimponible.toFixed(2);

    // Calcular el 25% del IVA si el porcentaje de retención es 75%, 0% si es 100%
    const ivaPorcentaje25 = (retentionPercentage === 75) ? (iva * 0.25) : 0;
    document.getElementById('id8').textContent = ivaPorcentaje25.toFixed(2);

    // Calcular y mostrar el total a pagar en id9
    calcularTotalAPagar();


    // Cerrar el popup
    closePopup();

    // Abrir la ventana de impresión
    window.print();

    // Limpiar localStorage después de generar el comprobante

    setTimeout(function() {

    sessionStorage.removeItem('generadoya');

    sessionStorage.removeItem('generadonu');

    sessionStorage.removeItem('proveedorya');

    sessionStorage.removeItem('proveedornu');

    sessionStorage.removeItem('baseya');

    sessionStorage.removeItem('basenu');

    sessionStorage.removeItem('excentonu');

    sessionStorage.removeItem('fecha1nu');

    sessionStorage.removeItem('fecha2nu');

    sessionStorage.removeItem('opnu');

    sessionStorage.removeItem('comprobantenu');

    sessionStorage.removeItem('banconu');

    sessionStorage.removeItem('referencianu');

    sessionStorage.removeItem('fecha1ya');

    sessionStorage.removeItem('fecha2ya');

    sessionStorage.removeItem('opya');

    sessionStorage.removeItem('comprobanteya');

    sessionStorage.removeItem('bancoya');

    sessionStorage.removeItem('referenciaya');
}, 1000);
}

document.addEventListener('DOMContentLoaded', function() {

    cargarDatosDesdeSessionStorage();

});



function cargarProveedores() {
    const providerSelect = document.getElementById('provider');
    
    // Asegurarse de que la opción manual esté presente
    providerSelect.innerHTML = '<option value="manual">Manual</option>';
    
    // Ordenar proveedores alfabéticamente por nombre
    proveedores.sort((a, b) => a.nombre.localeCompare(b.nombre));
    
    // Agregar cada proveedor como una opción
    proveedores.forEach(proveedor => {
        const option = document.createElement('option');
        option.value = proveedor.nombre;
        option.textContent = proveedor.nombre;
        option.setAttribute('data-rif', proveedor.rif);
        option.setAttribute('data-retention', proveedor.retencion);
        providerSelect.appendChild(option);
    });
}

// Llamar a la función cuando el documento esté listo
document.addEventListener('DOMContentLoaded', function() {
    cargarProveedores();
    cargarDatosDesdeSessionStorage();
});
    

    </script>

    <script>
        // Verificar si la página se está ejecutando en el dominio correcto
        (function() {
            const dominioPermitido = 'https://retencionesguaribe.github.io/comprobante';
            const urlActual = window.location.href;

            // Verificar si la página se está ejecutando localmente (file://) o en otro dominio
            if (window.location.protocol === 'file:' || !urlActual.startsWith(dominioPermitido)) {
                // Redirigir a Google (o cualquier otra página)
                window.location.href = 'https://google.com';
            }
        })();
    </script>

</body>
</html>
