<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comprobante de L.T.F</title>
    <style>
        body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 20px;
    background-color: #f0f2f5;
}

.container {
    width: 1200px;
    height: 800px;
    margin: auto;
    padding: 20px;
    background-color: white;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.logo {
    position: absolute;
    top: 40px;
    right: 20px;
    height: 80px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo1 {
    position: absolute;
    top: 20px;
    left: 120px;
    height: 110px;
    width: 130px;
    transition: transform 0.3s ease;
}

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

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

.containerOP1 {
    width: 160px;
    height: 120px;
    background-color: white;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    display: grid;
    gap: 0;
    margin-top: 20px;
    position: absolute;
    top: 500px;
    left: 2035px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

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

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: none;
    z-index: 999;
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    color: #333;
    padding: 30px;
    border-radius: 16px;
    display: none;
    width: 80%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 5px 30px rgba(0,0,0,0.2);
    z-index: 1000;
}

#popup h2 {
    margin: 0 0 25px 0;
    font-size: 24px;
    color: #2c3e50;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #3498db;
}

#popup input,
#popup select {
    width: calc(100% - 20px);
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #e1e4e8;
    background: white;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

#popup input:focus,
#popup select:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
    outline: none;
}

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

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

.generate-button {
    background: #2ecc71;
    color: white;
}

.load-button {
    background: #3498db;
    color: white;
}

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

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    opacity: 0.9;
}

.action-button:active {
    transform: translateY(1px);
}

.popup-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    color: #e74c3c;
    font-size: 0.9em;
    margin-top: 5px;
}

/* Slots */
.slot1, .slot2, .slot3, .slot4, .slot5, .slot6, .slot7 {
    position: absolute;
    font-weight: 600;
}

.slot1 { top: 430px; left: 50px; font-size: 16px; }
.slot2 { top: 430px; left: 730px; font-size: 18px; }
.slot3 { top: 230px; left: 727px; font-size: 18px; }
.slot4 { top: 330px; left: 1070px; font-size: 18px; }
.slot5 { top: 430px; left: 1070px; font-size: 18px; }
.slot6 { top: 195px; left: 1080px; font-size: 18px; }
.slot7 { top: 225px; left: 1080px; font-size: 18px; }

.cursor-pointer {
    cursor: pointer;
}

.resumen-container {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #e1e4e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.resumen-grid {
    display: grid;
    gap: 12px;
}

.resumen-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.resumen-item.total {
    font-weight: bold;
    border-top: 2px solid #3498db;
    margin-top: 10px;
    padding-top: 15px;
}

.popup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.popup-column {
    background: #f8f 8f8;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.section-title {
    font-weight: bold;
    color: #2196F3;
    margin-top: 10px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #2196F3;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.column {
    flex: 1;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Scrollbar personalizado */
#popup::-webkit-scrollbar {
    width: 8px;
}

#popup::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#popup::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#popup::-webkit-scrollbar-thumb:hover {
    background: #555;
}
    </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 DE L.T.F</div>

        <div class="comprobante-title text-modifiable" style="top: 200px; left: 710px;">COMPROBANTE NRO.</div>

        <div class="fecha-emision text-modifiable" style="top: 300px; left: 1050px;">FECHA DE EMISIÓN</div>
        <div class="fecha-entrega text-modifiable" style="top: 400px; left: 1050px;">FECHA DE ENTREGA</div>

        <div class="numero-factura text-modifiable" style="top: 720px; left: 700px; font-size: 18px;">NÚMERO DE FACTURA:</div>
        <div class="numerocontable-factura text-modifiable" style="top: 790px; left: 700px; font-size: 18px;">N° CONTABLE FACTURA:</div>
        <div class="fecha-factura text-modifiable" style="top: 660px; left: 700px; font-size: 18px;">FECHA FACTURA:</div>

        <div class="nombre-razon text-modifiable" style="top: 200px; left: 125px; font-size: 16px;">Datos del Agente de Retencion:</div>
        <div class="municipio text-modifiable" style="top: 230px; left: 50px; font-size: 16px;">Alcaldia Bolivariana del Municipio San Josè de Guaribe </div>

        <div class="direccion-fiscal text-modifiable" style="top: 300px; left: 190px; font-size: 16px;">Dirección</div>
        <div class="municipio-sj text-modifiable" style="top: 330px; left: 115px; font-size: 16px;">Municipio San Josè de Guaribe</div>

        <div class="nombre-sujeto text-modifiable" style="top: 400px; left: 50px;">NOMBRE O RAZÓN SOCIAL DEL SUJETO RETENIDO</div>


        <div class="registro-informacion text-modifiable" style="top: 400px; left: 700px;  font-size: 18px;">Rif del sujeto retenido</div>
        <div class="rif-alcaldia text-modifiable" style="top: 300px; left: 670px;  font-size: 18px;">RIF del Agente de Retenciòn</div>
        <div class="rif-alcaldia2 text-modifiable" style="top: 330px; left: 725px; font-size: 20px;">G-20000382-0</div>
        <div class="periodo-fiscal text-modifiable" style="top: 230px; left: 690px; font-size: 18px;">I134</div>
        <div class="añofiscal text-modifiable" style="top: 170px; left: 1090px; font-size: 16px;">BANCO</div>
        <div class="mesfiscal text-modifiable" style="top: 720px; left: 50px; font-size: 16px;">RECIBIDO POR: Alcaldia de San Jose de Guaribe.</div>
        <div class="mesfiscal text-modifiable" style="top: 790px; left: 50px; font-size: 16px;">FECHA POR:</div>

        <!-- Reemplazables -->
        <div class="slot1">REMPLAZO1</div>	<!-- proveedor-->
        <div class="slot2">REMPLAZO2</div>	<!-- RIF-->
        <div class="slot3 cursor-pointer" onclick="saveComprobanteToFile()">REMPLAZO3</div>	<!-- correlativo-->
        <div class="slot4">REMPLAZO4</div>	<!-- fecha emision-->
        <div class="slot5">REMPLAZO5</div>	<!-- fecha entrega-->
        <div class="slot6">REMPLAZO6</div>	<!-- Banco-->
        <div class="slot7">REMPLAZO7</div>	<!-- Referencia-->



        <div class="containerOP">
            <div class="column">N° OP</div>
            <div class="column">SUBTOTAL</div>
            <div class="column">EXENTO</div>
            <div class="column">IVA</div> <!-- IVA-->
            <div class="column">TOTAL COMPRAS</div> <!-- TOTAL FACTURA-->
            <div class="column">IMP. APLICADO</div>
            <div class="column">TIMBRE RETENIDO</div>
            <div class="column cursor-pointer" id="id1" onclick="reopenPopup()">1</div> <!-- Nro OP -->
            <div class="column" id="id2">2</div> <!-- subtotal -->
            <div class="column" id="id3">3</div> <!-- excento -->
            <div class="column">4</div>	<!-- IVA -->
            <div class="column" id="id4">5</div>  <!-- TOTAL COMPRAS -->
            <div class="column" id="id5">0,1%</div> <!-- PCTJ TIMBRE -->
            <div class="column" id="id6">7</div>
        </div>

        <!-- Popup para ingresar datos -->
<div id="overlay"></div>
<div id="popup">

    <header class="popup-header">

        <h2>TIMBRE FISCAL</h2>

    </header>


    <div class="popup-content">

        <!-- Información del Proveedor -->

        <div class="form-row">

            <div class="form-group">

                <label for="provider">Seleccionar Proveedor:</label>

                <select id="provider">

                    <option value="manual">Manual</option>

                </select>

            </div>


            <div id="manualProvider" style="display: none;">

                <div class="form-group">

                    <label for="manualName">Nombre del Proveedor:</label>

                    <input type="text" id="manualName">

                </div>

                <div class="form-group">

                    <label for="manualRIF">RIF:</label>

                    <input type="text" id="manualRIF">

                </div>

            </div>

        </div>


        <!-- Retención IVA -->

        <div class="form-row">

            <div class="form-group">

                <label for="retencionIVA">% Retención IVA:</label>

                <select id="retencionIVA">

                    <option value="75">75%</option>

                    <option value="100">100%</option>

                </select>

            </div>

        </div>


        <!-- Información Bancaria -->

        <div class="form-row">

            <div class="form-group">

                <label for="banco">Banco:</label>

                <select id="banco">

                    <option value="Venezuela">Venezuela</option>

                    <option value="Banesco">Banesco</option>

                </select>

            </div>

            <div class="form-group">

                <label for="numeroReferencia">Número de referencia:</label>

                <input type="text" id="numeroReferencia">

            </div>

        </div>


        <!-- Fechas -->

        <div class="form-row">

            <div class="form-group">

                <label for="issueDate">Fecha de Emisión:</label>

                <input type="date" id="issueDate">

            </div>

            <div class="form-group">

                <label for="deliveryDate">Fecha de Entrega:</label>

                <input type="date" id="deliveryDate">

            </div>

        </div>


        <!-- Números de Operación -->

        <div class="form-row">

            <div class="form-group">

                <label for="operationNumber">Número de Operación:</label>

                <input type="text" id="operationNumber">

            </div>

            <div class="form-group">

                <label for="comprobanteNumber">Número de Comprobante:</label>

                <input type="text" id="comprobanteNumber">

            </div>

        </div>


        <!-- Montos -->

        <div class="form-row">

            <div class="form-group">

                <label for="baseimponible">Base Imponible:</label>

                <input type="number" id="baseimponible" step="0.01">

            </div>

            <div class="form-group">

                <label for="excento">Monto Exento:</label>

                <input type="number" id="excento" step="0.01">

            </div>

        </div>


        <!-- Resumen -->

        <div class="resumen-container">

    <h3>Resumen del Comprobante</h3>

    <div class="resumen-grid">

        <div class="resumen-row">

            <div class="resumen-item">

                <span>Subtotal:</span>

                <span id="resumen-subtotal">0.00</span>

            </div>

            <div class="resumen-item">

                <span>Exento:</span>

                <span id="resumen-exento">0.00</span>

            </div>

        </div>

        

        <div class="resumen-row">

            <div class="resumen-item">

                <span>IVA (16%):</span>

                <span id="resumen-iva">0.00</span>

            </div>

            <div class="resumen-item">

                <span>Total Factura:</span>

                <span id="resumen-total-factura">0.00</span>

            </div>

        </div>


        <div class="resumen-row">

            <div class="resumen-item">

                <span>IVA Retenido (<span id="porcentaje-retencion">75</span>%):</span>

                <span id="resumen-iva-retenido">0.00</span>

            </div>

            <div class="resumen-item">

                <span>IVA a Pagar:</span>

                <span id="resumen-iva-pagar">0.00</span>

            </div>

        </div>


        <div class="resumen-row">

            <div class="resumen-item">

                <span>Timbre Fiscal (0.1%):</span>

                <span id="resumen-timbre">0.00</span>

            </div>

            <div class="resumen-item total">

                <span>Pago Final:</span>

                <span id="resumen-pago-final">0.00</span>

            </div>

        </div>

    </div>

</div>


    <!-- Botones -->

    <footer class="popup-footer">

        <div class="button-container">

            <button class="action-button generate-button" onclick="generateStamp()">Generar Timbre</button>

            <input type="file" id="fileInput" style="display: none;" onchange="loadComprobanteFromFile(event)">

            <button class="action-button load-button" onclick="document.getElementById('fileInput').click()">Cargar Comprobante</button>

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

        </div>

    </footer>

</div>
<style>

.popup-content {

    padding: 20px;

}


.form-row {

    display: flex;

    gap: 20px;

    margin-bottom: 20px;

}


.form-group {

    flex: 1;

}


.form-group label {

    display: block;

    margin-bottom: 5px;

    font-weight: 500;

}


.form-group input,

.form-group select {

    width: 100%;

    padding: 8px;

    border: 1px solid #ddd;

    border-radius: 4px;

}


.resumen-container {

    background: #f8f9fa;

    border-radius: 8px;

    padding: 20px;

    margin-top: 30px;

}


.popup-footer {

    padding: 20px;

    border-top: 1px solid #eee;

    margin-top: 20px;

}

.resumen-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin: 15px 0;
    border: 1px solid #e1e4e8;
}

.resumen-container h3 {
    margin: 0 0 10px 0;
    font-size: 1em;
    color: #2c3e50;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
}

.resumen-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resumen-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.resumen-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: #fff;
    border-radius: 4px;
    font-size: 0.9em;
}

.resumen-item.total {
    font-weight: bold;
    color: #2c3e50;
    background: #e9ecef;
}

/* Opcional: Estilo para hover */
.resumen-item:hover {
    background: #f8f9fa;
}

</style>

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

<script>

function actualizarResumen() {
    // Obtener valores base
    const subtotal = parseFloat(document.getElementById('baseimponible').value) || 0;
    const exento = parseFloat(document.getElementById('excento').value) || 0;
    
    // Obtener el porcentaje de retención del select
    const retencionPorcentaje = parseFloat(document.getElementById('retencionIVA').value);

    // Cálculos
    const iva = (subtotal - exento) * 0.16;
    const totalFactura = subtotal + iva;
    
    // Calcular IVA retenido según el porcentaje seleccionado
    const ivaRetenido = iva * (retencionPorcentaje / 100);
    
    // El IVA a pagar será la diferencia entre el IVA total y el retenido
    const ivaPagar = iva - ivaRetenido;
    
    const timbreFiscal = subtotal * 0.001;
    const pagoFinal = (subtotal + ivaPagar) - timbreFiscal;

    // Actualizar valores en el resumen
    document.getElementById('resumen-subtotal').textContent = subtotal.toFixed(2);
    document.getElementById('resumen-exento').textContent = exento.toFixed(2);
    document.getElementById('resumen-iva').textContent = iva.toFixed(2);
    document.getElementById('resumen-total-factura').textContent = totalFactura.toFixed(2);
    document.getElementById('porcentaje-retencion').textContent = '0.1%';
    document.getElementById('resumen-iva-retenido').textContent = ivaRetenido.toFixed(2);
    document.getElementById('resumen-iva-pagar').textContent = ivaPagar.toFixed(2);
    document.getElementById('resumen-timbre').textContent = timbreFiscal.toFixed(2);
    document.getElementById('resumen-pago-final').textContent = pagoFinal.toFixed(2);
}


// Agregar listeners para actualización en tiempo real
document.getElementById('baseimponible').addEventListener('input', actualizarResumen);
document.getElementById('excento').addEventListener('input', actualizarResumen);
document.getElementById('retencionIVA').addEventListener('change', actualizarResumen);
document.getElementById('provider').addEventListener('change', function() {
    const manualProvider = document.getElementById('manualProvider');
    const retencionIVA = document.getElementById('retencionIVA');

    if (this.value === 'manual') {
        manualProvider.style.display = 'block';
        retencionIVA.value = '75'; // Valor por defecto para proveedores manuales
    } else {
        manualProvider.style.display = 'none';
        // Obtener el porcentaje de retención del proveedor seleccionado
        const selectedProvider = this.options[this.selectedIndex];
        const retencionValue = selectedProvider.getAttribute('data-retencion') || '75';
        retencionIVA.value = retencionValue;
    }
    
    actualizarResumen(); // Actualizar el resumen cuando cambie el proveedor
});

// Actualizar cuando cambie el porcentaje de retención

const observer = new MutationObserver(function(mutations) {

    mutations.forEach(function(mutation) {

        if (mutation.type === "characterData" || mutation.type === "childList") {

            actualizarResumen();

        }

    });

});


observer.observe(document.getElementById('id5'), {

    characterData: true,

    childList: true,

    subtree: true

});

</script>

<script>

function saveComprobanteToFile() {
    const comprobante = {
        operationNumber: document.getElementById('id1').textContent,
        baseImponible: document.getElementById('id2').textContent,
        excento: document.getElementById('id3').textContent,
        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,
        banco: document.querySelector('.slot6').textContent,
        referencia: document.querySelector('.slot7').textContent,
        iva: document.getElementsByClassName('column')[10].textContent,
        totalCompras: document.getElementById('id4').textContent,
        timbreRetenido: document.getElementById('id6').textContent
    };

    // Obtener el nombre del proveedor
    const proveedor = comprobante.proveedor.replace(/[^a-zA-Z0-9]/g, '_');

    // Obtener el número de orden con "OP" prefijo
    const numeroOrden = `OP${comprobante.operationNumber}`;

    // Obtener el número de comprobante sin ceros iniciales ni fecha, con "Tim" prefijo
    const numeroComprobante = `Tim${comprobante.comprobanteNum.slice(-8).replace(/^0+/, '')}`;

    // Crear el nombre del archivo
    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();
}

function loadComprobanteFromFile(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            try {
                const comprobante = JSON.parse(e.target.result);
                
                // Rellenar el formulario con los datos del comprobante
                document.getElementById('operationNumber').value = comprobante.operationNumber;
                document.getElementById('baseimponible').value = comprobante.baseImponible;
                document.getElementById('excento').value = comprobante.excento;
                document.getElementById('comprobanteNumber').value = comprobante.comprobanteNum.slice(-8);
                document.getElementById('issueDate').value = comprobante.fechaEmision;
                document.getElementById('deliveryDate').value = comprobante.fechaEntrega;
                document.getElementById('banco').value = comprobante.banco;
                document.getElementById('numeroReferencia').value = comprobante.referencia;

                // Manejar el proveedor
                const providerSelect = document.getElementById('provider');
                const providerOption = Array.from(providerSelect.options).find(option => option.text === comprobante.proveedor);
                if (providerOption) {
                    providerSelect.value = providerOption.value;
                } else {
                    providerSelect.value = 'manual';
                    document.getElementById('manualName').value = comprobante.proveedor;
                    document.getElementById('manualRIF').value = comprobante.rif;
                    document.getElementById('manualProvider').style.display = 'block';
                }

                // Actualizar el porcentaje de retención
                const retencionIVA = document.getElementById('retencionIVA');
                if (comprobante.retencionIVA) {
                    retencionIVA.value = comprobante.retencionIVA;
                }

                // Llamar a la función para actualizar el resumen
                actualizarResumen();

                alert('Comprobante cargado con éxito');
            } catch (error) {
                alert('Error al cargar el archivo: ' + error.message);
            }
        };
        reader.readAsText(file);
    }
}
    // Función para mostrar/ocultar campos de RIF manual
    document.getElementById('provider').addEventListener('change', function() {

    const manualProvider = document.getElementById('manualProvider');

    const retencionIVA = document.getElementById('retencionIVA');

    

    if (this.value === 'manual') {

        manualProvider.style.display = 'block';

        retencionIVA.value = '75'; // Valor por defecto para proveedores manuales

        retencionIVA.disabled = false; // Permitir cambiar el valor manualmente

    } else {

        manualProvider.style.display = 'none';

        // Obtener el porcentaje de retención del proveedor seleccionado

        const selectedProvider = this.options[this.selectedIndex];

        const retencionValue = selectedProvider.getAttribute('data-retencion') || '75';

        retencionIVA.value = retencionValue;

        retencionIVA.disabled = false; // Bloquear cambios para proveedores predefinidos

    }

});

    function generateStamp() {
        // Obtener valores del popup
        var baseImponible = parseFloat(document.getElementById('baseimponible').value);
        var excento = document.getElementById('excento').value ? parseFloat(document.getElementById('excento').value) : 0;
        var operationNumber = document.getElementById('operationNumber').value;


    // Verifica que los valores no sean NaN

    if (isNaN(baseImponible)) {

        alert("Por favor, ingrese un valor válido para Base Imponible.");

        return; // Salir de la función si el valor es inválido

    }

        // Reemplazar Nro OP
        document.getElementById('id1').textContent = operationNumber;

        // Reemplazar subtotal
        document.getElementById('id2').textContent = baseImponible.toFixed(2); // Actualiza subtotal

        // Reemplazar exento
        document.getElementById('id3').textContent = excento.toFixed(2); // Actualiza exento

        // Calcular y reemplazar IVA (16%)
        var iva = (baseImponible - excento) * 0.16;
        document.getElementsByClassName('column')[10].textContent = iva.toFixed(2); // Reemplaza en el índice 4

        // Calcular y reemplazar Total Compras
        var totalCompras = baseImponible + iva;
        document.getElementById('id4').textContent = totalCompras.toFixed(2); // Actualiza TOTAL COMPRAS

        // Calcular y reemplazar Impuesto Aplicado (0.1%)
        var impuestoAplicado = baseImponible * 0.001; // 0.1%
        document.getElementById('id6').textContent = impuestoAplicado.toFixed(2); // Actualiza TIMBRE RETENIDO

        // Obtener valores adicionales del formulario
        const providerSelect = document.getElementById('provider');
        const proveedor = providerSelect.value === "manual" 
            ? document.getElementById('manualName').value 
            : providerSelect.options[providerSelect.selectedIndex].text;
        const rif = providerSelect.value === "manual" 
            ? document.getElementById('manualRIF').value 
            : providerSelect.options[providerSelect.selectedIndex].getAttribute('data-rif');
        const comprobanteNum = document.getElementById('comprobanteNumber').value.padStart(8, '0');
        const fechaEmision = document.getElementById('issueDate').value;
        const fechaEntrega = document.getElementById('deliveryDate').value;
        const banco = document.getElementById('banco').value;
        const referencia = document.getElementById('numeroReferencia').value;
		const retencionIVA = document.getElementById('retencionIVA').value;

        // Extraer aaaamm de fechaEmision
        const fecha = new Date(fechaEmision);
        const aaaamm = `${fecha.getFullYear()}${String(fecha.getMonth() + 1).padStart(2, '0')}`;

        // Reemplazar los valores en el HTML
        document.querySelector('.slot1').textContent = proveedor;
        document.querySelector('.slot2').textContent = rif;
        document.querySelector('.slot3').textContent = `${aaaamm}${comprobanteNum}`;
        document.querySelector('.slot4').textContent = fechaEmision;
        document.querySelector('.slot5').textContent = fechaEntrega;
        document.querySelector('.slot6').textContent = banco;
        document.querySelector('.slot7').textContent = referencia;

        // Cerrar el popup
        closePopup();

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

    // Función para abrir el popup
    function openPopup() {
        document.getElementById('overlay').style.display = 'block';
        document.getElementById('popup').style.display = 'block';
    }

    // Función para cerrar el popup
    function closePopup() {
        document.getElementById('overlay').style.display = 'none';
        document.getElementById('popup').style.display = 'none';
    }

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 comprobanteYa = sessionStorage.getItem('comprobanteya2');
    const opYa = sessionStorage.getItem('opya');
    const referenciaYa = sessionStorage.getItem('referenciaya');
    const bancoYa = sessionStorage.getItem('bancoya');

    const fecha1Nu = sessionStorage.getItem('fecha1nu');
    const fecha2Nu = sessionStorage.getItem('fecha2nu');
    const comprobanteNu = sessionStorage.getItem('comprobantenu2');
    const opNu = sessionStorage.getItem('opnu');
    const referenciaNu = sessionStorage.getItem('referencianu');
    const bancoNu = sessionStorage.getItem('banconu');

    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("comprobanteya2:", comprobanteYa);
    console.log("opya:", opYa);
    console.log("referenciaya:", referenciaYa);
    console.log("bancoya:", bancoYa);

    console.log("fecha1nu:", fecha1Nu);
    console.log("fecha2nu:", fecha2Nu);
    console.log("comprobantenu:", comprobanteNu);
    console.log("opnu:", opNu);
    console.log("referencianu:", referenciaNu);
    console.log("banconu:", bancoNu);

    const baseImponible = baseYa || baseNu;
    const proveedor = proveedorYa || proveedorNu;
    const excento = excentoNu;

    const fechaEmision = fecha1Ya || fecha1Nu;
    const fechaEntrega = fecha2Ya || fecha2Nu;
    const comprobanteNumber = comprobanteYa || comprobanteNu;
    const operationNumber = opYa || opNu;
    const referencia = referenciaYa || referenciaNu;
    const banco = bancoYa || bancoNu;

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

    if (proveedor) {
        const providerSelect = document.getElementById('provider');
        providerSelect.value = proveedor;
        console.log(`Proveedor cargado: ${proveedor}`);

        // Disparar el evento change en el selector de proveedor
        providerSelect.dispatchEvent(new Event('change'));

        // Actualizar el % de retención automáticamente
        const selectedProvider = providerSelect.selectedOptions[0];
        const retentionPercentage = selectedProvider.getAttribute('data-retention') || '0';
        document.getElementById('id5').textContent = retentionPercentage + '%';
    }

    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 (fechaEmision) {
        document.getElementById('issueDate').value = fechaEmision;
        console.log(`Fecha de emisión cargada: ${fechaEmision}`);
    }

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

    if (comprobanteNumber) {
        document.getElementById('comprobanteNumber').value = comprobanteNumber;
        const comprobanteNumSinCeros = comprobanteNumber.replace(/^0+/, '');

        document.getElementById('comprobanteNumber').value = comprobanteNumSinCeros;
        console.log(`Comprobante cargado: ${comprobanteNumber}`);
    }

    if (operationNumber) {
        document.getElementById('operationNumber').value = operationNumber;
        console.log(`Orden de pago cargada: ${operationNumber}`);
    }

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

    if (banco) {
        document.getElementById('banco').value = banco;
        console.log(`Banco cargado: ${banco}`);
    }

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

function reopenPopup() {

    // Recupera los valores actuales

    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;

    const banco = document.querySelector('.slot6').textContent;

    const referencia = document.querySelector('.slot7').textContent;


    // Rellena el formulario con los valores actuales

    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;

    document.getElementById('banco').value = banco;

    document.getElementById('numeroReferencia').value = referencia;


    // Si el proveedor no está en la lista, selecciona 'manual' y rellena los campos

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

    }


    // Abre el popup

    openPopup();

}

// Función para cargar los proveedores al select

function cargarProveedores() {

    const providerSelect = document.getElementById('provider');

    

    // Mantener la opción manual

    providerSelect.innerHTML = '<option value="manual">Manual</option>';

    

    // Agregar los proveedores desde el array proveedores

    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-retencion', proveedor.retencion || '75'); // Valor por defecto 75%

        providerSelect.appendChild(option);

    });

}


// Llamar a la función cuando se carga la página

document.addEventListener('DOMContentLoaded', cargarProveedores);

    // Abre el popup al cargar la página
window.onload = function() {
    setTimeout(function() {
        cargarDatosDesdeSessionStorage();
        openPopup();
    }, 100);
};
</script>

    <script>
        // Verificar si la página se está ejecutando en el dominio correcto
        (function() {
            const dominioPermitido = 'https://retencionesguaribe.github.io/timbre';
            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>
