<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.65"> <!-- Ajusta la escala al 65% -->
    <title>Factura Modificada</title>
    <style>
body {
    background-color: #f0f4f8;
    font-family: 'Roboto', sans-serif;
    color: #333;
    margin: 0;
    padding: 20px;
    text-align: center;
}

.container {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    max-width: 1000px;
    margin: 20px auto;
}

h1 {
    color: #00796b;
    margin-bottom: 20px;
}

/* Inputs y Selects */
input, select {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
    margin: 5px;
    padding: 10px;
}

input:focus, select:focus {
    border-color: #00796b;
}

/* Filas y Columnas */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    background-color: #e9ecef;
    padding: 10px;
    border-radius: 5px;
}

.header-group {
    display: flex;
    align-items: center;
}

.styled-input {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 5px;
    font-size: 14px;
}

.info-tag {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    margin-left: 10px;
}

.btn-icon {
    width: 30px;
    height: 30px;
    font-size: 18px;
    padding: 0;
    margin-left: 10px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.header input, .header span {
    margin-right: 10px;
}

.input-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.table-header, .product-row {
    display: grid;
    grid-template-columns: 60px minmax(300px, 4fr) 100px 100px 100px 30px 30px;
    gap: 5px;
    align-items: center;
}

.table-header {
    padding-right: 70px;
}

.table-header span {
    text-align: center;
}

.table-container {
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
}

.product-row {
    padding: 5px 0;
}

.product-row input, .product-row label, .product-row button {
    padding: 5px;
}

.input-cantidad {
    width: 60px;
}

.input-descripcion {
    width: 100%;
    min-width: 300px;
    text-align: left;
}

.input-precio-unitario, .input-precio-total, .input-total-con-descuento {
    width: 100px;
}

/* Botones */
.btn-eliminar, .btn-agregar, .btn-popup, .btn-ajuste {
    border: none;
    color: white;
    cursor: pointer;
    font-size: 20px ;
    height: 40px;
    width: 40px;
}

.header-buttons {
    display: flex;
    align-items: center;
}

.btn-eliminar {
    background-color: #ff5252;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    height: 30px;
    width: 30px;
}

.btn-agregar { background-color: #4caf50; }

.btn-popup, .btn-ajuste { background-color: #ff9800; margin-left: 10px; }

.btn-eliminar:hover { background-color: #ff1744; }

.btn-agregar:hover { background-color: #388e3c; }

.btn-popup:hover, .btn-ajuste:hover { background-color: #fb8c00; }

/* Popup */
#popup {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    height: 100%;
    justify-content: center;
    align-items: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.popup-content {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 30px;
    width: 90%;
    max-width: 500px;
    position: relative;
}

.popup-content h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.popup-content label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-weight: bold;
}

.popup-content input[type="date"],
.popup-content input[type="text"],
.popup-content input[type="number"],
.popup-content select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.popup-content button {
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    padding: 12px 20px;
    width: 100%;
    transition: background-color 0.3s;
}

.popup-content button:hover {
    background-color: #007bff;
}

#proveedorManualContainer {
    margin-top: 15px;
}

/* Estilo para el botón de cerrar el popup */
.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s;
}

.close-popup:hover {
    color: #555;
}

/* Resumen */
.summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    background-color: #e9ecef;
    border-radius: 5px;
    font-size: 14px;
}

.summary div {
    display: flex;
    justify-content: space-between;
}

.summary-item span:first-child {
    font-weight: bold;
}

.summary-item.total {
    background-color: #007bff;
    color: white;
}

/* Exento */
.exento-label {
    align-items: center;
    display: flex;
    justify-content: center;
}

.exento-label input {
    margin-right: 5px;
}

#idFacturaPopup {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.5);

    justify-content: center;

    align-items: center;

    z-index: 1000;

}


#idFacturaPopup .popup-content {

    background-color: white;

    padding: 20px;

    border-radius: 5px;

    width: 300px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}


#idFacturaPopup h2 {

    margin-top: 0;

    color: #333;

}


#idFacturaPopup input {

    width: 100%;

    padding: 8px;

    margin: 10px 0;

    border: 1px solid #ddd;

    border-radius: 4px;

}


#idFacturaPopup button {

    padding: 8px 15px;

    margin: 5px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-weight: bold;

}


#idFacturaPopup button.save {

    background-color: #4CAF50;

    color: white;

}


#idFacturaPopup button.cancel {

    background-color: #f44336;

    color: white;

}


#idFacturaPopup button.clipboard {

    background-color: #2196F3;

    color: white;

}
    </style>

</head>

<body>

    <div class="container" id="draggableContainer">

<div class="header">
    <input type="date" id="fecha">
    <span id="proveedorText">Proveedor</span>
    <span id="retencionText">Ret: --%</span>
    <span id="nroOperacionText">OP: --</span>
    <button class="btn-icon" onclick="agregarFila()">+</button>
    <button class="btn-icon" onclick="ajustarPrecios()">!</button>
    <button class="btn-icon" onclick="mostrarPopup()">⚙</button>
    <button class="btn-icon" onclick="window.print()">🖨️</button>
<button class="btn-icon" onclick="mostrarPopupArchivos()">📂</button>
<div id="popupArchivos" style="display: none;">
    <div class="popup-content">
        <h2>Gestionar Factura (Archivo)</h2>
        <button onclick="cargarFactura()">Cargar desde Archivo</button>
        <button onclick="guardarFactura()">Guardar en Archivo</button>
        <button onclick="cerrarPopupArchivos()">Cerrar</button>
    </div>
</div>

    <button class="btn-icon" onclick="mostrarPopupSheety()">📄</button> <div id="popupSheety" style="display: none;"> 
        <div class="popup-content">
            <h2>Gestionar Factura (Sheety)</h2>
            <button onclick="guardarFacturaSheety()">Guardar en Sheety</button> 
            <button onclick="buscarFacturaSheety()">Cargar desde Sheety</button>
	    <button onclick="cerrarPopupSheety()">Cerrar</button>
        </div>
    </div>
</div>



    <div class="table-header">

        <span>Cant</span>

        <span>Desc</span>

        <span>    P.U.</span>

        <span>Total</span>

        <span>C/Desc</span>

        

    </div>
        <div id="productContainer">
            <div class="product-row">
                <input type="number" class="input-cantidad" placeholder="0" min="0" oninput="calcularTotal(this)"> <!-- Campo de cantidad -->
                <input type="text" class="input-descripcion" placeholder="Descripción del producto"> <!-- Campo de descripción -->
<input type="number" class="input-precio-unitario" placeholder="0.00" step="0.01" oninput="calcularTotal(this)" onwheel="ajustarPrecioUnitario(event, this)">

<input type="number" class="input-precio-total" placeholder="0.00" step="0.01" readonly>
                <input type="number" class="input-total-con-descuento" placeholder="0.00" step="0.01" readonly> <!-- Total con descuento -->
                <label>
                    <input type="checkbox" class="input-exento" onchange="actualizarResumenGeneral()"> E <!-- Checkbox de exención -->
                </label>
                <button class="btn-eliminar" onclick="eliminarFila(this)">X</button> <!-- Botón para eliminar fila -->
            </div>
        </div>

        <!-- Resumen de la factura -->




<!-- Nueva fila de resúmenes -->

    <div class="summary">

        <div class="summary-item"><span>Subtotal:</span> <span id="subtotalGeneral">0.00</span></div>

        <div class="summary-item"><span>Exento:</span> <span id="exentoGeneral">0.00</span></div>

        <div class="summary-item"><span>IVA:</span> <span id="ivaGeneral">0.00</span></div>

        <div class="summary-item"><span>Total:</span> <span id="totalGeneral">0.00</span></div>

        <div class="summary-item"><span>IVA a Pagar:</span> <span id="ivaAPagar">0.00</span></div>

        <div class="summary-item"><span>Pago sin Timbre:</span> <span id="pagoSinTimbre">0.00</span></div>

        <div class="summary-item"><span>Timbre Fiscal:</span> <span id="timbreFiscal">0.00</span></div>

        <div class="summary-item total"><span>Total a Pagar:</span> <span id="totalAPagar">0.00</span></div>

    </div>
    </div>

    <!-- Modal para seleccionar proveedor -->
    <div id="popup">
        <div class="popup-content">
            <h2>Seleccionar Proveedor</h2> <!-- Título modal -->
            <label for="popupFecha">Fecha:</label>
            <input type="date" id="popupFecha"> <!-- Campo de fecha en modal -->
            <label for="popupProveedor">Seleccionar Proveedor:</label>
<select id="popupProveedor" onchange="toggleProveedorManual(); actualizarRetencion()">
    <option value="">--Seleccione un Proveedor--</option>
    <option value="manual">Ingresar Manualmente</option>
</select>

        <!-- Añade el contenedor del proveedor manual aquí -->

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

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

            <input type="text" id="proveedorManual" placeholder="Ingrese el nombre del proveedor">

        </div>

       


        <label for="popupRetencion">Porcentaje de Retención:</label>

        <select id="popupRetencion">

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

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

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

        </select>

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

        <input type="text" id="popupNroOperacion" placeholder="Ingrese el NRO de OP">

        <label for="popupMontoDeseado">Monto Total Deseado:</label>

        <input type="number" id="popupMontoDeseado" step="0.01" min="0">

        <button onclick="seleccionarProveedor()">Seleccionar</button>

    </div>

</div>

<div id="idFacturaPopup">

    <div class="popup-content">

        <h2>Guardar Factura en Sheety</h2>

        <label for="idFactura">ID de la factura:</label>

        <input type="text" id="idFactura" required>

        <button class="save" onclick="confirmarGuardarFactura()">Guardar</button>

        <button class="clipboard" onclick="copiarAlPortapapeles()">Copiar al Portapapeles</button>

        <button class="cancel" onclick="cerrarPopupId()">Cancelar</button>

    </div>
</div>

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

    <script>
        // Dominio permitido
        const dominioPermitido = 'https://retencionesguaribe.github.io/Factura1';

        // Verificar si la página se está ejecutando en el dominio permitido
        if (window.location.href.startsWith(dominioPermitido)) {
            // Si está en el dominio permitido, cargar el script factura.js
            const script = document.createElement('script');
            script.src = 'factura.js';
            document.body.appendChild(script);
        } else {
            // Si no está en el dominio permitido, redirigir o mostrar un mensaje
            console.warn('El script factura.js no se cargará porque el dominio no está permitido.');
            window.location.href = 'https://google.com'; // Redirigir a Google o cualquier otra página
        }
    </script>
</body>
</html>