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

<body style="
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    margin: 0;
    padding: 30px 0;
    overflow-y: auto;
">

    <div class="container form-container" style="
        max-width: 800px;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: translateY(30px);
        margin: 0 auto;
    ">
        
        <!-- Título de Factura alineado a la izquierda -->
        <h2 class="titulo-Factura" style="text-align: left; margin-bottom: 20px; animation: fadeInTitle 0.7s ease;">
            Factura Electrónica - SRI Ecuador
        </h2>

        <form>
            <div class="row">
                <div class="col-md-4 form-field" style="animation-delay: 0.1s;">
                    <div class="form-group">
                        <label for="dni">RUC (Identificación comprador)</label>
                        <input 
                            type="text" 
                            class="form-control focus-animate" 
                            placeholder="RUC"
                            id="dni"
                            pattern="\d{13}"
                            required
                            title="El RUC debe tener 13 dígitos numéricos"
                            maxlength="13"
                        >
                    </div>
                </div>
                <div class="col-md-4 form-field" style="animation-delay: 0.2s;">
                    <div class="form-group">
                        <label for="nombre">Razón Social / Nombre comprador</label>
                        <input type="text" class="form-control focus-animate" placeholder="Razón social o nombres" id="nombre">
                    </div>
                </div>
                <div class="col-md-4 form-field" style="animation-delay: 0.3s;">
                    <div class="form-group">
                        <label for="direccion">Dirección (Establecimiento / Matriz comprador)</label>
                        <input type="text" class="form-control focus-animate" placeholder="Dirección" id="direccion">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 form-field" style="animation-delay: 0.4s;">
                    <div class="form-group">
                        <label for="celular">Teléfono / Celular comprador</label>
                        <input type="text" class="form-control focus-animate" placeholder="Teléfono o celular" id="celular">
                    </div>
                </div>

                <div class="col-md-4 form-field" style="animation-delay: 0.4s;">
                    <div class="form-group">
                        <label for="correo">Correo electrónico comprador</label>
                        <input type="email" class="form-control focus-animate" placeholder="Correo electrónico" id="correo">
                    </div>
                </div>

                <div class="col-md-4 form-field" style="animation-delay: 0.5s;">
                    <div class="form-group">
                        <label for="codserv">Código servicio/producto</label>
                        <input type="text" class="form-control focus-animate" placeholder="Código servicio/producto" id="codserv">
                    </div>
                </div>

                <div class="col-md-4 form-field" style="animation-delay: 0.6s;">
                    <div class="form-group">
                        <label for="descripcion">Descripción</label>
                        <input type="text" class="form-control focus-animate" placeholder="Descripción servicio/producto" id="descripcion">
                    </div>
                </div>
            </div>

            <div class="row">
                <!--<div class="col-md-4 form-field" style="animation-delay: 0.7s;">
                    <div class="form-group">
                        <label for="fecha_entrega">Fecha de emisión</label>
                        <input type="date" class="form-control focus-animate" id="fecha_entrega">
                    </div>
                </div>
                <div class="col-md-4 form-field" style="animation-delay: 0.8s;">
                    <div class="form-group">
                        <label for="hora_entrega">Hora de emisión</label>
                        <input type="time" class="form-control focus-animate" id="hora_entrega">
                    </div>
                </div>-->
                <div class="col-md-4 form-field" style="animation-delay: 0.9s;">
                    <div class="form-group">
                    <label for="forpago">Forma de pago</label>
                    <select class="form-control focus-animate" id="forpago" name="forpago">
                        <option value="">-- Seleccione forma de pago --</option>
                        <option value="01">01 - Sin utilización del sistema financiero</option>
                        <option value="15">15 - Compensación de deudas</option>
                        <option value="16">16 - Tarjeta de débito</option>
                        <option value="17">17 - Dinero electrónico</option>
                        <option value="18">18 - Tarjeta prepago</option>
                        <option value="19">19 - Tarjeta de crédito</option>
                        <option value="20">20 - Otros con utilización del sistema financiero</option>
                        <option value="21">21 - Endoso de títulos</option>
                    </select>
                    </div>
                    </div>
                <div class="col-md-4 form-field" style="animation-delay: 0.9s;">
                    <div class="form-group">
                        <label for="importe_total">Importe total (con IVA)</label>
                        <input type="text" class="form-control focus-animate" placeholder="Total a pagar" id="importe_total" onKeyUp="Suma21()" value="0">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 form-field" style="animation-delay: 1s;">
                    <div class="form-group">
                        <label for="igv">IVA 15%</label>
                        <input type="text" class="form-control focus-animate" placeholder="IVA" id="igv">
                    </div>
                </div>
                <div class="col-md-4 form-field" style="animation-delay: 1.1s;">
                    <div class="form-group">
                        <label for="sub_total">Subtotal (sin IVA)</label>
                        <input type="text" class="form-control focus-animate" placeholder="Subtotal" id="sub_total">
                    </div>
                </div>
                <div class="col-md-4 form-field" style="animation-delay: 1.2s;">
                    <div class="form-group">
                        <!--<label for="acuenta">A cuenta</label>-->
                        <input type="hidden" class="form-control focus-animate" placeholder="Abono / anticipo" id="acuenta" value="0">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 form-field" style="animation-delay: 1.3s;">
                    <div class="form-group">
                       <!-- <label for="debe">Saldo pendiente</label>-->
                        <input type="hidden" class="form-control focus-animate" placeholder="Saldo" id="debe" value="0">
                    </div>
                </div>
                <div class="col-md-8 text-center d-flex align-items-center justify-content-center form-field" style="animation-delay: 1.4s;">
                    <button type="submit" class="btn btn-info btn-lg btn-block pulse-button" id="boton1">
                        Registrar Venta
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- CSS para animaciones -->
    <style>
        .form-container {
            animation: fadeInUp 0.7s ease forwards;
        }
        .form-field {
            opacity: 0;
            animation: fadeInField 0.5s ease forwards;
        }
        @keyframes fadeInTitle {
            from { opacity: 0; transform: translateY(-20px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInField {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .focus-animate {
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .focus-animate:focus {
            transform: scale(1.2);
            box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
            z-index: 1;
        }

        /* BOTÓN BIEN VISIBLE */
        .pulse-button{
            background:#198754;
            color:#fff !important;
            border:none;
            border-radius:30px;
            padding:14px 40px;
            font-size:1.1rem;
            font-weight:600;
            width:100%;
            margin-top:20px;
            position: relative;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .pulse-button:hover {
            transform: scale(1.03);
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.25);
        }
        .pulse-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            transition: opacity 0.5s, transform 0.5s;
        }
        .pulse-button:hover::before {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
    </style>

    <!-- JavaScript para activar las animaciones al cargar la página -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const formContainer = document.querySelector('.form-container');
            formContainer.style.opacity = '1';
            formContainer.style.transform = 'translateY(0)';
        });
    </script>
</body>

<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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 () {
        $('#boton1').click(function (event) {

            var formData = {
                dni: $("#dni").val(), // RUC Ecuador
                nombre: $("#nombre").val(),
                direccion: $("#direccion").val(),
                celular: $("#celular").val(),
                correo: $("#correo").val(),
                codserv: $("#codserv").val(),
                descripcion: $("#descripcion").val(),
                //fecha_entrega: $("#fecha_entrega").val(), // fecha emisión
                //hora_entrega: $("#hora_entrega").val(),   // hora emisión
                forpago: $("#forpago").val(),
                importe_total: $("#importe_total").val(),
                igv: $("#igv").val(),        // IVA 15%
                sub_total: $("#sub_total").val(), // base imponible
                acuenta: $("#acuenta").val(),
                debe: $("#debe").val(),
            };

            $.ajax({
                type: "POST",
                url: "registrabase/registro_ventafact.php",
                data: formData,
                success: function(data){
                /*
                    $("#dni").val("");
                    $("#nombre").val("");
                    $("#direccion").val("");
                    $("#celular").val("");
                    $("#correo").val("");
                    $("#codserv").val("");
                    $("#descripcion").val("");
                    $("#fecha_entrega").val("");
                    $("#hora_entrega").val("");
                    $("#forpago").val("");
                    $("#importe_total").val("");
                    $("#igv").val("");
                    $("#sub_total").val("");
                    $("#acuenta").val("");
                    $("#debe").val("");
                    */
                    alert("REGISTRO EXITOSO");
                   window.open("registrabase/documento_legal/pdffactura.php");

                    
                    var xmlhttp=new XMLHttpRequest();
                    xmlhttp.onreadystatechange=function() {  }
                    xmlhttp.open("GET","registrabase/comprobante/generadorxmlfactura/generar_factura_ecuador.php",true);
                    xmlhttp.send();
                    
                }
            }).done(function (data) {
                console.log(data);
            });
            event.preventDefault();
        });
    });
</script>

<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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 () {
    $('#dni').blur(function (event) {

        var contar = document.getElementById("dni").value.length;
        if(contar != 13){
            alert("EL RUC ECUATORIANO DEBE TENER 13 CARACTERES NUMÉRICOS");
        }

        var formData = {
            dni: $("#dni").val(), // se envía el RUC al backend
        };

        var request;
        $.ajax({
            type: "POST",
            url: "tipearuc.php",
            data: formData,
            dataType: "json",
            encode: true,
            success: function(data){
                request = data;
                var obj = JSON.parse(request);
                $("#nombre").val(obj.nombre);
                $("#direccion").val(obj.direccion+" "+obj.distrito+" "+obj.provincia+" "+obj.departamento);
            }
        }).done(function (data) {
            console.log(data);
        });
        event.preventDefault();
    });
  });

  */
</script>

<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<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 () {
        $('#codserv').blur(function (event) {
            var formData = {
                codserv: $("#codserv").val(),
            };

            var request;
            $.ajax({
                type: "POST",
                url: "registrabase/codigoproserv.php",
                data: formData,
                dataType: "json",
                encode: true,
                success: function(data){
                    obj = data;
                    // código de servicio o producto
                    var junt1 = document.getElementById("descripcion").value;
                    $("#descripcion").val(obj.bienes1 + ", " + junt1);

                    var junt2 = parseFloat(document.getElementById("importe_total").value);
                    var suma0 = parseFloat(obj.bienes2);
                    var suma1 = suma0 + junt2;

                    // Calcula IVA 15% (Ecuador)
                    $("#importe_total").val(suma1);
                    var ele5 = parseFloat(document.getElementById("importe_total").value); // total con IVA
                    var ele6 = ele5 / 1.15;              // base imponible sin IVA
                    var ele6xxx = ele6.toFixed(2);
                    var ele7 = parseFloat(document.getElementById("sub_total").value = ele6xxx); // subtotal
                    var ele8 = ele5 - ele7;              // IVA 15%
                    var ele8xxx = ele8.toFixed(2);
                    parseFloat(document.getElementById("igv").value = ele8xxx); // campo IVA

                    $("#codserv").val("");
                }
            }).done(function (data) {
                console.log(data);
            });
            event.preventDefault();
        });
    });

    */
</script>

