<?php include_once "encabezado1.php"; ?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nota de Credito 📄</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* Estilos generales */
        body {
            font-family: 'Montserrat', sans-serif;
            background: url('desk.jpg') no-repeat center center fixed;
            background-size: cover;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #333;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.9); /* Blanco semitransparente */
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 30px;
            max-width: 900px;
            animation: fadeIn 1s ease-in-out;
        }

        h2 {
            font-size: 2.5em;
            color: #2c3e50;
            font-weight: 600;
            text-align: center;
            margin-bottom: 20px;
            animation: slideIn 1s ease-out;
        }

        /* Estilos para los campos de entrada */
        .form-control {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            color: #333;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .form-control:focus {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            border-color: #3498db;
        }

        /* Botón de acción */
        #boton1 {
            display: block;
            width: 100%;
            padding: 12px;
            font-size: 1.2em;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(135deg, #6dd5ed, #2193b0);
            border: none;
            border-radius: 8px;
            margin-top: 20px;
            transition: background 0.3s ease, transform 0.3s ease;
        }

        #boton1:hover {
            background: linear-gradient(135deg, #34c6eb, #6dd5ed);
            transform: translateY(-3px);
        }

        /* Animaciones */
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>

    <style>
        .campo-vacio {
            background-color: yellow; /* Cambia el fondo a amarillo */
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>📄 Nota de Credito</h2>
        <div class="row">
            <!-- Primera fila -->
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="id100" name="id100" placeholder="ID 🔍" data-verificar>
            </div>
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="fechaemi" name="fechaemi" placeholder="Fecha Emision 🧾" readonly="readonly">
            </div>
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="tipo" name="tipo" placeholder="Tipo Comprobante 🧾" readonly="readonly">
            </div>
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="serie" name="serie" placeholder="Serie #️⃣" readonly="readonly">
            </div>
            <!-- Segunda fila -->
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="corre" name="corre" placeholder="Correlativo 🔢" readonly="readonly">
            </div>
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="id101" name="id101" placeholder="DNI 🆔" readonly="readonly">
            </div>
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="id102" name="id102" placeholder="Nombre 👤" readonly="readonly">
            </div>
            <!-- Tercera fila -->
            <div class="col-md-6 mb-3">
                <input type="text" class="form-control" id="id103" name="id103" placeholder="Dirección 📍" readonly="readonly">
            </div>
            <div class="col-md-6 mb-3">
                <input type="text" class="form-control" id="id104" name="id104" placeholder="Descripción 📝" readonly="readonly">
            </div>
            <!-- Cuarta fila -->
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="id105" name="id105" placeholder="Importe Total 💲" readonly="readonly">
            </div>
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="id106" name="id106" placeholder="IGV % 🏷" readonly="readonly">
            </div>
            <div class="col-md-4 mb-3">
                <input type="text" class="form-control" id="id107" name="id107" placeholder="Sub Total 💵" readonly="readonly">
            </div>
            <!-- Quinta fila -->
            <div class="col-md-6 mb-3">
                <input type="text" class="form-control" id="id108" name="id108" placeholder="Crédito 🏦" onkeyup="Suma21()" data-verificar>
            </div>
            <div class="col-md-6 mb-3">
                <input type="text" class="form-control" id="id109" name="id109" placeholder="Motivo 🖋" data-verificar>
            </div>
        </div>

        <button id="boton1" onclick="verificarInput()">Emitir Nota de Crédito 📤</button>
    </div>


    <script>
        function verificarInput() {
            var inputs = document.querySelectorAll("[data-verificar]"); // Selecciona todos los campos con el atributo data-verificar
            var camposCompletos = true;

            inputs.forEach(function(input) {
                if (input.value.trim() === "") { // Verifica si el campo está vacío
                    input.classList.add("campo-vacio"); // Aplica la clase si el campo está vacío
                    camposCompletos = false; // Marca que falta completar un campo
                } else {
                    input.classList.remove("campo-vacio"); // Remueve la clase si el campo tiene contenido
                }
            });

            if (!camposCompletos) {
                alert("Por favor, completa todos los campos antes de continuar.");
                return false; // Evita la ejecución de la acción
            }
            return true;
        }
    </script>

    <!-- Scripts de jQuery y Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#id100').blur(function (event) {
                var formData = {
                    fechaemi: $("#fechaemi").val(),
                    tipo: $("#tipo").val(),
                    serie: $("#serie").val(),
                    corre: $("#corre").val(),
                    id100: $("#id100").val(),
                    id101: $("#id101").val(),
                    id102: $("#id102").val(),
                    id103: $("#id103").val(),
                    id104: $("#id104").val(),
                    id105: $("#id105").val(),
                    id106: $("#id106").val(),
                    id107: $("#id107").val(),
                };

                $.ajax({
                    type: "POST",
                    url: "registrabase/nota_dato.php",
                    data: formData,
                    dataType: "json",
                    encode: true,
                    success: function(data) {
                        $("#id101").val(data.cel);
                        $("#id102").val(data.cel2);
                        $("#id103").val(data.cel3);
                        $("#id104").val(data.cel4);
                        $("#id105").val(data.cel5);
                        $("#id106").val(data.cel6);
                        $("#id107").val(data.cel7);
                        $("#fechaemi").val(data.cel0);
                        $("#tipo").val(data.cel8);
                        $("#serie").val(data.cel9);
                        $("#corre").val(data.cel10);
                    }
                });
                event.preventDefault();
            });

            $('#boton1').click(function (event) {
                var motivo = $("#id108").val().length;
                var motivo2 = $("#id109").val().length;

                if (motivo !== 0 && motivo2 !== 0) {
                    var formData = {
                        fechaemi: $("#fechaemi").val(),
                        tipo: $("#tipo").val(),
                        serie: $("#serie").val(),
                        corre: $("#corre").val(),
                        id101: $("#id101").val(),
                        id102: $("#id102").val(),
                        id103: $("#id103").val(),
                        id104: $("#id104").val(),
                        id105: $("#id105").val(),
                        id106: $("#id106").val(),
                        id107: $("#id107").val(),
                        id108: $("#id108").val(),
                        id109: $("#id109").val(),
                    };

                    $.ajax({
                        type: "POST",
                        url: "registrabase/nota_dato2.php",
                        data: formData,
                        success: function(data) {
                            alert("¡Registro exitoso!");
                            var xmlhttp = new XMLHttpRequest();
                            xmlhttp.open("GET", "registrabase/comprobante/generadorxmlfactura/generar_notadecredito_ecuador.php", true);
                            xmlhttp.send();
                        }
                    });
                } else {
                    alert("Por favor, ingresa el motivo o crédito.");
                }
                event.preventDefault();
            });
        });

        function Suma21() {
            var ele1 = parseFloat(document.getElementById("id105").value);
            var ele2 = parseFloat(document.getElementById("id108").value);
            var ele4 = ele1 - ele2;
            document.getElementById("id105").value = ele4.toFixed(2);
            var ele6 = ele4 / 1.15;
            document.getElementById("id107").value = ele6.toFixed(2);
            document.getElementById("id106").value = (ele4 - ele6).toFixed(2);
        }
    </script>
</body>
</html>