<?php include "views/templates/header.php"; ?>





<style>
    .producto-list-item {
        background-color: #f0f0f0;
        padding: 10px;
        margin: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
        color: black;
        /* Texto en blanco */
    }

    body {
        background: linear-gradient(45deg, #3498db, #e74c3c);
        color: black;
        transition: background 0.5s;
        /* Agrega una animación de cambio de fondo */
    }

    /* Estiliza el formulario de venta */
    #frmVenta {
        background: rgba(255, 255, 255, 0.2);
        /* Fondo semi-transparente */
        padding: 15px;
        border-radius: 10px;
        transition: background 0.5s;
        /* Agrega una animación de cambio de fondo */
        color: black;
    }

    /* Estilo degradado para el encabezado "Venta Rapida" */
    .card-header {
        background: linear-gradient(45deg, #27ae60, #3498db);
    }

    /* Estilo del botón "COBRAR" */
    .btn-success {
        background: linear-gradient(45deg, #2ecc71, #e74c3c);
        color: #fff;
        border: none;
        transition: background 0.3s;
        /* Agrega una animación de cambio de color de fondo */
    }

    .btn-success:hover {
        background: linear-gradient(45deg, #2ecc71, #f39c12);
    }

    /* Estilo del botón "Buscar" */
    .card-header input[type="text"] {
        background: rgba(255, 255, 255, 0.5);
        /* Fondo semi-transparente para el campo de búsqueda */
    }

    /* Estilo de la tabla de detalles de venta */
    #miTabla {
        background: rgba(255, 255, 255, 0.8);
        /* Fondo semi-transparente para la tabla */
    }

    /* Estilo de los títulos de las tarjetas */
    .card h1,
    .card h4 {
        font-weight: bold;
    }

    /* Aplica sombra a las tarjetas */
    .card {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    }

    /* Aplicar estilo al texto dentro de la lista desplegable */
    select {
        color: black;
        /* Cambia el color del texto a negro */
    }

    /* Agrega estilos a la tabla */
    table {
        border-collapse: collapse;
        width: 100%;
    }

    table,
    th,
    td {
        border: 1px solid black;
    }

    th,
    td {
        padding: 8px;
        text-align: left;
    }

    /* Estilo para la tarjeta contenedora */
    .card {
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        margin: 10px 0;
    }

    


    
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-9">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h4 class="d-flex justify-content-between align-items-center">
                        NUEVA VENTA
                        <button onclick="Frmnotificacion()" class="btn d-none" id="notificacionContainer">
                            <h1 class="m-0">
                                <i class="fa-solid fa-bell fa-shake" style="color: #b30000;"></i>
                                <span id="notificacion"></span>
                            </h1>
                        </button>
                    </h4>
                </div>
                <div class="card-body">
                    <form id="frmVenta">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="codigo"><i class="fa-solid fa-barcode" style="color: #0056eb;"></i> CODIGO O PRODUCTO</label>
                                    <input type="hidden" id="id" name="id">
                                    <input id="codigo" class="form-control" type="text" name="codigo" placeholder="CODIGO DE BARRAS" onkeyup="buscarCodigoVenta(event)">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="nombre"><i class="fa-solid fa-pen-to-square" style="color: #005eff;"></i> DESCRIPCION</label>
                                    <input id="nombre" class="form-control" type="text" name="nombre" placeholder="DESCRIPCION" disabled>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="cantidad"><i class="fa-solid fa-layer-group" style="color: #005eff;"></i> CANTIDAD</label>
                                    <input id="cantidad" class="form-control" type="number" name="cantidad" placeholder="0" onkeyup="calcularPrecioVenta(event)" disabled>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="precio">PRECIO</label>
                                    <input id="precio" class="form-control" type="text" name="precio" placeholder="S/ 00.00" disabled>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="sub_total">SUBTOTAL</label>
                                    <input id="sub_total" class="form-control" type="text" name="sub_total" placeholder="S/ 00.00" disabled>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="table-responsive">
                <table id="miTabla" class="table table-striped table-bordered table-primary">
                    <thead class="thead-dark">
                        <tr>
                            <th>ID</th>
                            <th>DESCRIPCION</th>
                            <th>CANTIDAD</th>
                            <th>MEDIDA</th>
                            <th>APLICAR</th>
                            <th>DESCUENTO</th>
                            <th>PRECIO</th>
                            <th>SUBTOTAL</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="tblDetalleVenta">
                        <!-- Contenido de la tabla -->
                    </tbody>
                </table>
          
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="cliente">TIPO DE PAGO</label>
                        <br>
                        <select id="cliente" class="form-control" name="cliente" style="width: 250px" onchange="mostrarOcultarCampos()">
                            <?= implode('', array_map(function ($row) {
                                return "<option value=\"{$row['id']}\">{$row['nombre']}</option>";
                            }, $data)) ?>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="documentos">DOCUMENTO</label>
                        <br>
                        <select class="form-control" id="documentos" name="documentos" required style="width: 250px">
                        </select>
                        <div id="boleta" style="display: none;">
                            <div class="form-group">
                                <label for="boletaElectronica">DNI</label>
                                <input class="form-control" type="text" id="boletaElectronica" name="boletaElectronica" placeholder="Ingrese número de DNI" style="width: 250px" onkeyup="clienteDni(event)">
                                <br>
                                <button class="btn btn-success" id="nuevoDNI" name="nuevoDNI" onclick="FrmDni()">nuevo</button>
                            </div>
                        </div>
                        <div id="factura" style="display: none;">
                            <div class="form-group">
                                <label for="FacturaElectronica">RUC</label>
                                <input class="form-control" type="text" id="FacturaElectronica" name="FacturaElectronica" placeholder="Ingrese su Ruc" style="width: 250px" onkeyup="BUSCARclienteFact(event)">
                                <br>
                                <button class="btn btn-primary" id="nuevoclientesF" name="nuevoclientesF" onclick="frmlmodalCF()">nuevo</button>
                            </div>
                        </div>
                        <p id="resultadoSunat" style="width: 250px"></p>
                        <p id="resultadoReniec" style="width: 250px"></p>
                        <br>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="total">TOTAL </label>
                        <input id="total" class="form-control" type="text" name="total" placeholder="TOTAL S/ 00.00" disabled>
                        <br>
                        <input id="monto" class="form-control" type="text" name="monto" placeholder="monto S/ 00.00">
                        <label id="vueltoLabel" for="vuelto">Vuelto S/</label>
                        <input id="vuelto" class="form-control" type="text" name="vuelto" placeholder="vuelto S/ 00.00" disabled>
                        <div class="col-md-12"></div>
                        <button class="btn btn-success mt-2" type="button" style="width: 100%;" onclick="procesar(0)">COBRAR <i class="fa-solid fa-money-bill-wave fa-beat-fade" style="color: #2ccc00;"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h1>Venta Rapida</h1>
                    <h4>Buscar</h4>
                    <input type="text" id="buscarproducc" placeholder="buscar producto">
                </div>
                <div class="card-body" id="basededart" style="max-height: 600px; overflow-y: auto;">
                    <!-- Contenido de venta rápida -->
                </div>
            </div>
        </div>
    </div>
</div>



  <!--  modal para registrar cliento con Dni      -->
  <div id="clienteDni" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white" id="clentesBoletasss">NUEVO CLIENTE</h5>
                        <button class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" id="FrmClentDni">
                            <div id="clientesBoleta">
                                <div class="card">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="clienteF">DNI</label>
                                                <input type="text" name="BoletaDni" id="BoletaDni" class="form-control" onkeydown="if (event.keyCode === 13) DniSunat()">

                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="razonF">Nombres Apellidos</label>
                                                <input type="text" name="BolotNombre" id="BolotNombre" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="Direccion">Direccion</label>
                                                <input type="text" name="dirrecionBoleta" id="dirrecionBoleta" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="telefono">Telefono</label>
                                                <input type="text" id="boletaTelefono" name="boletaTelefono" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <br>
                        <br>
                        <button class="btn btn-primary" id="registrarBoleta" onclick="RegistrarBoleta()">ACEPTAR</button>
                        <button class="btn btn-danger" data-dismiss="modal">Cancelar</button>

                    </div>
                </div>
            </div>
        </div>
        <!--  modal para registrar cliento con Dni      -->



        <!--  modal para registrar nuevo cliente       -->
        <!--  modal para registrar nuevo cliente       -->
        <!--  modal para registrar nuevo cliente       -->
        <div id="nuevosclientesF" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white" id="clientesF">NUEVO CLIENTE</h5>
                        <button class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" id="frmCleientesF">
                            <div id="datosDelClienteF">
                                <div class="card">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="clienteF">Ruc</label>
                                                <input type="text" name="RucCliFa" id="RucCliFa" class="form-control" onkeydown="if (event.keyCode === 13) RucSunat()">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="razonF">Razon Social</label>
                                                <input type="text" name="RazonCliFa" id="RazonCliFa" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="Direccion">Direccion</label>
                                                <input type="text" name="direccionCliFa" id="direccionCliFa" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="Direccion">Telefono</label>
                                                <input type="text" id="telefonoCliFa" name="telefonoCliFa" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <br>
                        <br>
                        <button class="btn btn-primary" id="RegisClieFA" onclick="registrarEmpreFA()">ACEPTAR</button>
                        <button class="btn btn-danger" data-dismiss="modal">Cancelar</button>

                    </div>
                </div>
            </div>
        </div>


        <!--  modal para registrar nuevo cliente       -->
        <!--  modal mostrar datos del vendedor    -->



        <div id="respuestaDelVendedor" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white" id="clienteVendedor">Pedido por Cobrar</h5>
                        <button class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" id="frmVendedor">


                            <div class="container mt-5">


                                <div class="card">


                                    <div class="card-body" id="totalLista">
                                        <!--  mostrar datos   -->

                                    </div>
                                </div>


                            </div>


                            <br>
                            <br>
                            <button class="btn btn-danger" data-dismiss="modal">CERRAR</button>

                    </div>
                </div>
            </div>
        </div>




        <!--  Detalle de la ventas   -->
        <div id="Detalles_del_cendedor" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white" id="detallesDeVentas">Pedido por Cobrar</h5>
                        <button class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" id="frmDetallesVendedor">


                            <div class="container mt-5">


                                <div class="card" id="VendedoCliente">


                                    <div class="card-body" id="DetallesVendedores">
                                        <!--  mostrar datos   -->

                                    </div>
                                </div>


                            </div>









                            <br>
                            <br>
                            <button class="btn btn-success" id="CONFIRMARdETALLES" onclick="RegresarModal(event)">REGRESAR</button>
                            <button class="btn btn-danger" data-dismiss="modal">CERRAR</button>

                    </div>
                </div>
            </div>
        </div>


        <!--  Dretalles de la venta  -->








<script>
    const totalInput = document.getElementById("total");
    const montoInput = document.getElementById("monto");
    const vueltoInput = document.getElementById("vuelto");

    function calcularVuelto() {
        const monto = parseFloat(montoInput.value.replace("S/ ", ""));
        const total = parseFloat(totalInput.value.replace("S/ ", ""));

        const vuelto = monto - total;
        vueltoInput.value = `S/ ${vuelto.toFixed(2)}`;
    }

    montoInput.addEventListener("input", function() {
        calcularVuelto();
    });

    totalInput.addEventListener("input", function() {
        calcularVuelto();
    });

    montoInput.addEventListener("keydown", function(event) {
        if (event.key === "Enter") {
            event.preventDefault();
            procesar(0);
        }
    });



    document.getElementById("documentos").addEventListener("change", function() {
        var boletaInput = document.getElementById("boleta");
        var facturaInput = document.getElementById("factura");
        var resultadoSunat = document.getElementById("resultadoSunat");
        var resultadoReniec = document.getElementById("resultadoReniec");

        // Reinicia o limpia los datos en resultadoSunat y resultadoReniec
        resultadoSunat.innerHTML = '';
        resultadoReniec.innerHTML = '';

        if (this.value === "2") {
            boletaInput.style.display = "block";
            facturaInput.style.display = "none";
            resultadoSunat.style.display = "none";
            resultadoReniec.style.display = "block";
        } else if (this.value === "3") {
            boletaInput.style.display = "none";
            facturaInput.style.display = "block";
            resultadoSunat.style.display = "block";
            resultadoReniec.style.display = "none";
        } else {
            boletaInput.style.display = "none";
            facturaInput.style.display = "none";
            resultadoSunat.style.display = "none";
            resultadoReniec.style.display = "none";
        }
    });
</script>

<?php include "views/templates/footer.php"; ?>