





<body style="background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;">

    <div class="container form-container" style="max-width: 800px; background-color: rgba(255, 255, 255, 0.95); padding: 30px; border-radius: 15px; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); animation: fadeInUp 0.7s ease forwards;">
        
        <h2 class="titulo-factura" style="text-align: left; margin-bottom: 20px;">Factura</h2>

        <form>
            <div class="row">
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="dni">RUC</label>
                        <input type="text" class="form-control focus-animate" placeholder="Ingrese su RUC" id="dni" pattern=".{11,}" required title="11 caracteres fijos" maxlength="11">
                    </div>
                </div>
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="nombre">Nombre</label>
                        <input type="text" class="form-control focus-animate" placeholder="Razón Social" id="nombre">
                    </div>
                </div>
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="direccion">Dirección Legal</label>
                        <input type="text" class="form-control focus-animate" placeholder="Dirección Legal" id="direccion">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="celular">Celular</label>
                        <input type="text" class="form-control focus-animate" placeholder="Celular" id="celular">
                    </div>
                </div>
                <div class="col-md-4 form-field">
                    <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">
                    <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">
                    <div class="form-group">
                        <label for="fecha_entrega">Fecha Entrega</label>
                        <input type="date" class="form-control focus-animate" id="fecha_entrega">
                    </div>
                </div>
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="hora_entrega">Hora Entrega</label>
                        <input type="time" class="form-control focus-animate" id="hora_entrega">
                    </div>
                </div>
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="importe_total">Importe Total</label>
                        <input type="text" class="form-control focus-animate" placeholder="Precio" id="importe_total" onKeyUp="Suma21()" value="0">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="igv">IGV</label>
                        <input type="text" class="form-control focus-animate" placeholder="Precio" id="igv">
                    </div>
                </div>
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="sub_total">Sub Total</label>
                        <input type="text" class="form-control focus-animate" placeholder="Precio" id="sub_total">
                    </div>
                </div>
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="acuenta">Acuenta</label>
                        <input type="text" class="form-control focus-animate" placeholder="Acuenta" id="acuenta">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 form-field">
                    <div class="form-group">
                        <label for="debe">Debe</label>
                        <input type="text" class="form-control focus-animate" placeholder="Debe" id="debe">
                    </div>
                </div>
                <div class="col-md-8 text-center d-flex align-items-center justify-content-center form-field">
                    <button type="submit" class="btn btn-info btn-lg btn-block pulse-button" id="boton1">Registra Venta</button>
                </div>
            </div>
        </form>
    </div>



    <style>
        /* Animación de desvanecimiento y subida para el formulario */
        .form-container {
            animation: fadeInUp 0.7s ease forwards;
        }

        /* Estilo llamativo y profesional para los labels */
        label {
            font-family: 'Helvetica Neue', sans-serif;
            font-weight: bold;
            color: #2C3E50;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

        /* Placeholder estilizado */
        .form-control::placeholder {
            color: #999;
            font-style: italic;
            font-weight: 300;
            opacity: 0.7;
        }

        /* Estilo para el título */
        .titulo-factura {
            font-family: 'Georgia', serif;
            font-size: 28px;
            color: #3498DB;
            letter-spacing: 1.2px;
            font-weight: bold;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
        }

        /* Animación de los campos en cascada */
        .form-field {
            opacity: 0;
            animation: fadeInField 0.5s ease forwards;
        }

        /* Efecto de foco en los campos */
        .focus-animate {
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .focus-animate:focus {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(41, 128, 185, 0.5);
            border-color: #3498DB;
            z-index: 1; /* Trae el campo al frente */
        }

        /* Estilo llamativo para el botón */
        .pulse-button {
            font-size: 18px;
            font-weight: bold;
            padding: 15px;
            border-radius: 8px;
            background-color: #3498DB;
            color: white;
            box-shadow: 0px 6px 20px rgba(41, 128, 185, 0.4);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .pulse-button:hover {
            transform: scale(1.05);
            box-shadow: 0px 10px 30px rgba(41, 128, 185, 0.6);
        }

        /* Animaciones */
        @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); }
        }
    </style>

    <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(),
        nombre: $("#nombre").val(),
        direccion: $("#direccion").val(),
        celular: $("#celular").val(),
        codserv: $("#codserv").val(),
        descripcion: $("#descripcion").val(),
        fecha_entrega: $("#fecha_entrega").val(),
        hora_entrega: $("#hora_entrega").val(),
        importe_total: $("#importe_total").val(),
        igv: $("#igv").val(),
        sub_total: $("#sub_total").val(),
        acuenta: $("#acuenta").val(),
        debe: $("#debe").val(),

     
    };

    var request;

    $.ajax({
      type: "POST",
      //url: "culpa2.php",
      url: "registrabase/registro_ventafact.php",
      data: formData,
      //dataType: "json",
      //encode: true,
      success: function(data){
               // obj = data;

           $("#dni").val("");
           $("#nombre").val("");
           $("#direccion").val("");
           $("#celular").val("");
           $("#codserv").val("");
           $("#descripcion").val("");
           $("#fecha_entrega").val("");
           $("#hora_entrega").val("");
           $("#importe_total").val("");
           $("#igv").val("");
           $("#sub_total").val("");
           $("#acuenta").val("");
           $("#debe").val("");

           
           alert("REGISTRO EXITOSO");
           
    window.open("registrabase/documento_legal/pdfcortefactura.php");


    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {  }
    xmlhttp.open("GET","registrabase/comprobante/factura.php",true);
    xmlhttp.send();
        
      // alert(data);
      }

    }).done(function (data) {
     console.log(data);
    });
    event.preventDefault();



   // var  elem = document.getElementById("dni").value;

    //alert(elem);

  });
});


 
   
</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!=11){ alert("TIENE QUE TENER ONCE CARACTERES FIJOS");}

  var formData = {
      dni: $("#dni").val(),

  };

  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;
                //codigo 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 el IGV
                $("#importe_total").val(suma1);
                var  ele5 =parseFloat(document.getElementById("importe_total").value);//importe total
                var ele6=ele5/1.18;
                var ele6xxx=ele6.toFixed(2);
                var  ele7 =parseFloat(document.getElementById("sub_total").value=ele6xxx); //subtotal
                var ele8=ele5-ele7;
                var ele8xxx=ele8.toFixed(2);
                parseFloat(document.getElementById("igv").value=ele8xxx); ///igv

                $("#codserv").val("");
                
               
      }

    }).done(function (data) {
     console.log(data);
    });
    event.preventDefault();
  });
});
   
   
</script>