<!-- Llamamos el sidebar principal y el menu nav -->
<?php include('../elementos/sidebar.php'); ?>

<!-- Contenido propio de la pagina -->
<span id="module_active" dt="ventas"></span>

<!-- Vetana Modal Registro-->
<div class="modal fade" id="modal-default">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Registrar ventas</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="">
                    <div class="formulario">
                        <form id="formRegistroVenta">
                            <div class="form-row">

                                <div class="form-group col-md-6">
                                    <label for="cliente">Cliente</label>
                                    <input class="form-control" id="cliente" list="clienteDtList" placeholder="Ingrese el apartamento" autocomplete="off">
                                    <datalist id="clienteDtList">
                                    </datalist>
                                </div>


                                <div class="form-group col-md-6">
                                    <label id="labelValorT" for="valorCompra" class="form-label">Valor total</label>
                                    <input autocomplete="off" oninput="this.value = AddFormatMoneda(this.value)" type="text" class="form-control" name="valorCompra" id="valorCompra" disabled value="0">
                                </div>
                            </div>
                            <hr>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="producto">Producto</label>
                                    <select class="form-control" name="producto" id="producto" disabled>
                                        <option value="">Seleccione un producto</option>
                                        <option disabled selected>Hamburguesa Especial</option>
                                        <option>Hamburguesa Sencilla</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="valorUnidad" class="form-label">ValorUnd</label>
                                    <input type="text" value="$ 15.000" class="form-control" name="valorUnidad" id="valorUnidad" disabled>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="cantidadProducto" class="form-label">Cantidad</label>
                                    <input placeholder="Ingrese la cantidad" autocomplete="off" type="text" class="form-control" name="cantidadProducto" id="cantidadProducto">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="fecha_hora" class="form-label">Fecha</label>
                                    <input readonly type="date" class="form-control" name="fecha_hora" id="fecha_hora">
                                </div>
                            </div>
                        </form>
                        <br>

                    </div>


                </div>

                <style>
                    .formulario,
                    .carrito {

                        margin-left: 0;
                    }


                    .contenedor {
                        gap: 5px;
                        display: grid;
                        grid-template-columns: 1fr 1fr;

                    }

                    .formulario {
                        padding: 8px;
                        border: 1px solid #e9ecef;
                        border-radius: 5px;
                    }

                    .content-2 {
                        gap: 12px;
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                    }

                    .carrito {
                        overflow-x: hidden;
                        width: auto;
                        padding: 4px;
                        border: 1px solid #e9ecef;
                        border-radius: 5px;

                    }

                    .botones {
                        display: flex;
                        gap: 20px;
                    }

                    @media screen and (max-width: 991px) {
                        .contenedor {
                            overflow-x: hidden;
                            display: flex;
                            flex-direction: column;
                            /* Cambia la dirección del contenedor a columna en dispositivos pequeños */
                        }

                    }
                </style>





            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button name="" id="finalizarCompra" class="btn btn-primary" type="button">Finalizar compra</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->

    <section class="content-header">
        <div class="container-fluid">

            <div class="card">
                <div class="card-header">
                    <!-- <a class="btn btn-primary">Registrar Ventas</a> -->
                    <button type="button" class="btn btn-default">
                        Estadisticas
                    </button>

                    <spam id="title_fecha"> </spam>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-tool" id='btn-fecha-change'>
                                <i class="fas fa-calendar-week"></i>
                            </button>

                        </div>

                    </div>

                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div class="row">

                        <!-- TOTAL PRESTAMOS  -->

                        <div class="col-12 col-sm-4 col-md-3" style="cursor:pointer" id="tabla_hoy_venta_metodos" data-target="#modalDetalle" data-toggle="modal">
                            <div class="info-box">
                                <span class="info-box-icon bg-info elevation-1"><i class="fas fa-piggy-bank"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">Ventas Hoy</span>
                                    <span id="box_valor_total" class="info-box-number">
                                        <span class="badge" style="font-size: 14px;width:85px">
                                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        </span>
                                    </span>
                                </div>
                            </div>

                        </div>

                        <!-- MAYOR DEUDOR -->
                        <div class="col-12 col-sm-4 col-md-3" style="cursor:pointer" id="tabla_sem_venta_metodos" data-target="#modalDetalle" data-toggle="modal">
                            <div class="info-box mb-3">
                                <span class="info-box-icon bg-danger elevation-3"><i class="fas fa-calendar-week"></i></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">Ventas Semana</span>
                                    <span id="value_ventas_semana" class="info-box-number">
                                        <span class="badge" style="font-size: 14px;width:85px">
                                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- TOTAL DEUDAS -->
                        <div class="col-12 col-sm-4 col-md-3" id="resta_stock">
                            <div class="info-box mb-3">
                                <span class="info-box-icon bg-success elevation-1"><i class="fas fa-solid fa-box"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">Stock</span>
                                    <span id="value_stock" class="info-box-number">
                                        <span class="badge" style="font-size: 14px;width:85px">
                                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- MAYOR PRESTADOR -->
                        <div class="col-12 col-sm-4 col-md-3">
                            <div class="info-box mb-3">
                                <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-solid fa-dollar-sign"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">Ganancias</span>
                                    <span id="value_ganancias" class="info-box-number">
                                        <span class="badge" style="font-size: 14px;width:85px">
                                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- /.card-body -->
            </div>

            <!-- 4 CARDS STATS -->


    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">

                    <div class="card">
                        <div class="card-header">
                            <!-- <a class="btn btn-primary">Registrar Ventas</a> -->
                            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default">
                                Registrar Ventas
                            </button>

                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="table" class="table table-bordered table-striped">
                                <thead>

                                </thead>
                                <tbody>
                                </tbody>

                                <tfoot>
                                </tfoot>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>

                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>

<!-- Modal -->
<div class="modal fade" id="modalDetalle" tabindex="-1" role="dialog" aria-labelledby="modalDetalleLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalDetalleLabel">Detalle de la venta</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="bodyDetalleVenta">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>

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



<!-- funciones -->
<script>
    // Funcion para agregar formato  $ 100.000,12
    function AddFormatMoneda(numero) {
        numero = numero.toString()

        if (numero.includes('-')) {
            n = '-'
        } else {
            n = ''
        }

        try {

            numero = numero.replace(/[^0-9]/g, '')
            decim = numero.split('.')[1] ? `,${numero.split('.')[1]}` : ''
            numero = numero.split('.')[0]
            rs = '$ ' + numero.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
        } catch (error) {
            rs = numero
        }
        return `${n}${rs}${decim}`;
    }

    // Funcion para remover formato a $ 100.000,12
    function RemoveFormatMoneda(numero) {

        if (numero == '' || numero == 0) {
            return 0
        }

        if (numero.includes('-')) {
            neg = -1
        } else {
            neg = 1
        }

        if (numero.includes('$ ')) {
            decim = numero.split(',')[1] ? `.${numero.split(',')[1]}` : ''
            numero = numero.split(',')[0]
            n = parseFloat(`${numero.replace(/[^0-9]/g, '')}${decim}`);

        } else {
            n = numero
        }

        if (!isNaN(n * neg)) {
            n = n * neg
        }

        return n
    }

    function fechaActual(opcional = '') {
        if (opcional == '') {
            var fechaActual_ = new Date();

        } else {
            var fechaActual_ = new Date(opcional);
            fechaActual_.setDate(fechaActual_.getDate() + 1)
        }

        mesesL = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
        mesesS = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];

        monthIndex = fechaActual_.getMonth();

        year = fechaActual_.getFullYear();
        day = fechaActual_.getDate();

        if (day < 10) {
            day_next = '0' + (day + 1)
            day_txt = '0' + day;
        } else {
            day_txt = day.toString()
            day_next = (day + 1).toString()
        }


        if ((monthIndex + 1) < 10) {
            m_n = '0' + (monthIndex + 1)

        } else {
            m_n = monthIndex + 1
        }



        return arr = {
            dia_semana: fechaActual_.getDay(),
            dia_num: day,
            dia_txt: day_txt,
            dia_next: day_next,
            mes_num: m_n,
            mes_txt: mesesL[monthIndex],
            mes_short: mesesS[monthIndex],
            año: year,
            object: fechaActual_
        }
    }
</script>

<!-- Page specific script -->
<script>
    data_array = []

    function loader(action) {
        if (action == 'show') {
            document.querySelector('.loader').classList.remove('hide')
        } else if (action == 'hide') {
            document.querySelector('.loader').classList.add('hide')
        }

    }

    function cargarStats(f) {

        document.getElementById('title_fecha').innerHTML = (`${f.año}-${f.mes_num}-${f.dia_txt}`)
        // Box1
        arrayFil = data_array[0].filter(e => e['fecha Entrega'] == `${f.año}-${f.mes_num}-${f.dia_txt}`)
        if (arrayFil.length != 0) {
            cantV = arrayFil.reduce((a, b) => a + parseInt(b.cantidad), 0)
            boxVentas = document.getElementById('box_valor_total')
            boxVentas.innerHTML = `${AddFormatMoneda(arrayFil.reduce((a,b)=>a+b['valor T'],0))} / ${cantV}`
        } else {
            document.getElementById('box_valor_total').innerHTML = '$ 0 / 0'
        }
        //

        // Box2
        fechaAc = f.object
        fechaAc_ = `${fechaAc.getFullYear()}-${DosDigitos(fechaAc.getMonth()+1)}-${DosDigitos(fechaAc.getDate())}`
        fech = fechaASemana(fechaAc_).split('/')

        arrayFilDes = datosVenta.filter(e => e['fecha Entrega'] <= fech[1] && e['fecha Entrega'] >= fech[0])

        if (arrayFilDes.length != 0) {
            arrayFilDes
            cantVS = arrayFilDes.reduce((a, b) => a + parseInt(b.cantidad), 0)
            boxVentasSem = document.getElementById('value_ventas_semana')
            boxVentasSem.innerHTML = `${AddFormatMoneda(arrayFilDes.reduce((a,b)=>a+b['valor T'],0))} / ${cantVS}`

        } else {
            document.getElementById('value_ventas_semana').innerHTML = '$ 0 / 0'
        }

        //

        // Box3 y box4
        ObtenerDatos('surtido', '../../controllers/functions/datos.php').then((respuesta) => {
            arr = respuesta.filter(e => e.fecha == fechaASemana(fechaAc_))

            exi = respuesta.map(e => parseInt(e.hamburguesas)).reduce((acc, ind) => acc + ind, 0)
            hVend = data_array[0].map(e => parseInt(e.cantidad)).reduce((acc, n) => acc + n, 0)

            console.log(respuesta)
            if (arr.length != 0) {
                gns = (RemoveFormatMoneda(document.getElementById('value_ventas_semana').innerHTML.split(' /')[0]) - arr[0].valor)
                document.getElementById('value_ganancias').innerHTML = `<span style="font-size: 14px;width:75px" class="badge badge-${gns > 0 ? 'success' : 'danger'}">${AddFormatMoneda(gns)}</span>`
            } else {
                document.getElementById('value_ganancias').innerHTML = 'Sin <a href="../surtido/lista.php" class="" data-module="surtido">Surtir</a>'

            }

            try {
                document.getElementById('value_stock').innerHTML = `${exi - hVend} / ${AddFormatMoneda((exi - hVend) * 15000)}` 
            } catch (error) {
                document.getElementById('value_stock').innerHTML = 0

            }

        })

        //


    }

    function selectFechaStats() {

        Swal.fire({
            title: 'Elije la fecha a filtrar',
            html: '<div style="display:grid;place-items:center"><input type="date" style="width:55%" class="form-control" id="dateSelc"><div/>',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Continuar',
            preConfirm: () => {
                const dateSelc = document.getElementById('dateSelc').value;
                if (!dateSelc) {
                    Swal.showValidationMessage('Debe seleccionar una opción');
                } else {
                    return {
                        dateSelc: dateSelc
                    };
                }
            }
        }).then(async (result) => {
            if (result.isConfirmed) {

                fechaSele = document.getElementById('dateSelc').value;

                selTemIn = fechaActual(fechaSele)
                document.getElementById('title_fecha').innerHTML = (`${selTemIn.año}-${selTemIn.mes_num}-${selTemIn.dia_txt}`)

                cargarStats(selTemIn)

            } else if (result.dismiss === Swal.DismissReason.cancel) {
                Swal.fire('Acción cancelada', '', 'error');
            }
        });
    }

    document.getElementById('btn-fecha-change').addEventListener('click', selectFechaStats)

    // Funcion para traer los datos de la BD
    async function ObtenerDatos(BD, url = '../../controllers/ventas/datos.php') {
        // Muestra la animación de carga antes de enviar la solicitud

        // Se envian los datos en .json ----------
        const datosRg = new FormData();
        datosRg.append("BD", BD);


        var peticion = await fetch(
            url, {
                method: "POST",
                body: datosRg,
            }
        );

        var respuesta = await peticion.json();

        return respuesta['data']
    }

    // Funcion para crear la tabla
    function CrearDataTable(idTabla, arrayObjetos) {

        if (arrayObjetos.length != 0) {
            return new Promise((resolve) => {
                $(function() {
                    const columnas = [];

                    Object.keys(arrayObjetos[0]).forEach(e => {
                        columnas.push({
                            "data": e,
                            "title": e.toUpperCase().replace(/_/g, ' ')
                        });
                    });

                    // Supongamos que el ID de tu tabla es 'table'
                    const tabla = $(`#${idTabla}`).DataTable({
                        "destroy": true,
                        "paging": true,
                        "lengthMenu": false,
                        "lengthChange": false,
                        "info": false,
                        "order": [
                            [6, 'desc']
                        ],
                        "searching": true,
                        "ordering": true,
                        "autoWidth": false,
                        "responsive": true,
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json"
                        },
                        "columns": columnas,
                        "data": arrayObjetos,
                        "columnDefs": [{
                                targets: '_all', // Aplica a todas las columnas
                                className: 'text-center' // Clase CSS que aplica text-align: center
                            },
                            {
                                "targets": 0,
                                "render": function(data, type, row, meta) {
                                    tx = isNaN(Math.ceil(parseInt(data.slice(-2)) / 8)) ? '' : ' - T' + Math.ceil(parseInt(data.slice(-2)) / 8)
                                    return `${data} ${tx}`;
                                }
                            },

                            {
                                "targets": 2,
                                "render": function(data, type, row, meta) {
                                    return AddFormatMoneda(data);
                                }
                            },
                            {
                                "targets": 6,
                                "render": function(data, type, row, meta) {
                                    return `<spam class="id_row" id="${data}" >${data}</spam>`;
                                }
                            },
                            {
                                "targets": 3,
                                "render": function(data, type, row, meta) {
                                    if (data == 'Entregado') {
                                        return `<spam style="font-size:15px;cursor:pointer" class="badge badge-success" >${(data)}</spam>`;
                                    } else if (data == "Pendiente") {
                                        return `<spam style="font-size:15px;cursor:pointer" class="estado badge badge-warning" >${(data)}</spam>`;
                                    } else {
                                        return data
                                    }


                                }
                            },
                            {
                                "targets": 4,
                                "render": function(data, type, row, meta) {
                                    if (data == 'Transferencia') {
                                        return `<spam style="font-size:15px;cursor:pointer;color:white;background-color:#da0081" class="pago badge" >${(data)}</spam>`;
                                    } else if (data == "Efectivo") {
                                        return `<spam style="font-size:15px;cursor:pointer" class="pago badge badge-success" >${(data)}</spam>`;
                                    } else if (data == "Pendiente") {
                                        return `<spam style="font-size:15px;cursor:pointer" class="pago badge badge-warning" >${(data)}</spam>`;
                                    } else {
                                        return data
                                    }

                                }
                            }

                        ]
                    });
                    resolve(tabla);
                });
            });
        } else {
            document.getElementById(idTabla).parentNode.innerHTML = 'No se han registrado ventas aun'

        }

    }

    // Llama la funcion preparando los datos
    ObtenerDatos('ventas', '../../controllers/ventas/datos.php').then((respuesta) => {

        datos = []
        datosVenta = respuesta[0]
        datosDetalles = respuesta[1]

        data_array = respuesta

        respuesta[0] = respuesta[0].map(e => ({
            ...e,
            detalleVenta: e.idVenta
        }));

        arrayOrdenado = []

        respuesta[0].forEach(resp => {
            ordenDeseado = ["cliente", "cantidad", "valor T", "estado", "pago", "fecha Entrega", "idVenta"];
            objetoReordenado = {};
            ordenDeseado.forEach(propiedad => {
                objetoReordenado[propiedad] = resp[propiedad];
            });

            arrayOrdenado.push(objetoReordenado)
        });



        CrearDataTable('table', arrayOrdenado)

        cargarStats(fechaActual())
        document.getElementById('clienteDtList').innerHTML = data_array[0].map(e => `<option value="${(e.cliente)}"></option> `).reduce((a, b) => a + b, '')

    });

    var tablaCarrito
    $(function() {
        tablaCarrito = $('#tabla_carrito').DataTable({
            "paging": false,
            "searching": false,
            "ordering": true,
            "responsive": true,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json"
            }
        });
    });

    // setTimeout(() => {
    //     document.querySelector('.dataTables_info').style.display = 'none'
    // }, 1000);

    document.getElementById('table').addEventListener('click', (e) => {

        if (e.target.matches('.botonDetalle')) {

            document.getElementById('bodyDetalleVenta').innerHTML = ''

            Idv_ = e.target.id.split('_')[1]
            detalleVentaCarousle = datosVenta.filter(e => e.idVenta == Idv_)[0].detalleVenta

            table = document.createElement('table')
            table.classList.add('table')
            table.innerHTML =
                `
            <thead class="">
                <tr>
                    <th  class="text-center" scope="col">Producto</th>
                    <th  class="text-center" scope="col">Cantidad</th>

                </tr>
            </thead>
            <tbody id="id_tb_bd_dt">

            </tbody>
            `

            document.getElementById('bodyDetalleVenta').appendChild(table)

            detalleVentaCarousle.forEach((element, index) => {
                tr = ''
                tr = document.createElement('tr')

                tr.innerHTML = `
                    <th  class="text-center" scope="row">${element.producto}</th>
                    <td class="text-center" >${element.cantidad}</td>
                `
                document.getElementById('id_tb_bd_dt').appendChild(tr)
            });


        }
    })
</script>


<script>
    botonR = document.getElementById('botonR')
    botonB = document.getElementById('botonB')
    contador = 0
    ventaC = []

    try {
        document.getElementById('fecha_hora').value = `${fechaActual().año}-${fechaActual().mes_num}-${fechaActual().dia_txt}`
    } catch (error) {}


    //Actualiza el total de cada producto
    actualizarTotal = () => {
        valor = 0
        if (document.getElementById('producto').value == 'Hamburguesa Especial') {
            valor = (15000)
        } else if (document.getElementById('producto').value == 'Hamburguesa Sencilla') {
            valor = 12000
        }

        document.getElementById('valorUnidad').value = AddFormatMoneda(valor)
        document.getElementById('valorCompra').value = AddFormatMoneda(valor * document.getElementById('cantidadProducto').value)
    }

    // Agrega la cantidad segun el producto
    document.getElementById('producto').addEventListener('change', () => {
        actualizarTotal()
    })

    // Agrega la cantidad segun el producto
    document.getElementById('cantidadProducto').addEventListener('keyup', () => {
        actualizarTotal()
    })

    const Registrar_ = async () => {

        datosRg = JSON.stringify({
            estado: "Pendiente",
            pago: 'Pendiente',
            cantidad: document.getElementById('cantidadProducto').value,
            fechaVenta: document.getElementById('fecha_hora').value,
            valorT: RemoveFormatMoneda(document.getElementById('valorCompra').value),
            cliente: document.getElementById('cliente').value,
        });

        loader('show')

        const registrarClientes = await fetch("../../controllers/ventas/registrar.php", {
            method: 'POST',
            body: datosRg,
            headers: {
                'Content-Type': 'application/json'
            }
        });

        // Verifica si la solicitud fue exitosa
        if (!registrarClientes.ok) {
            throw new Error('Error en la solicitud');
        }
        // Espera la respuesta del servidor en formato JSON
        const resultado = await registrarClientes.json();

        if (resultado.success = true) {
            loader('hide')
            Swal.fire({
                title: 'Registro Completo',
                text: 'Su registro ha sido exitoso',
                icon: 'success',
                timer: 2000, // Temporizador en milisegundos
                showConfirmButton: false
            }).then(() => {
                location.reload();
            });
        } else {
            loader('hide')
            Swal.fire({
                title: 'Registro Fallido',
                text: 'Por favor intente nuevamente',
                icon: 'success',
                timer: 3000, // Temporizador en milisegundos
                showConfirmButton: false
            }).then(() => {
                location.reload();
            });
        }
    };

    registrar = document.getElementById('finalizarCompra')

    registrar.addEventListener('click', () => {
        cliente = document.getElementById('cliente').value
        cantidad = document.getElementById('cantidadProducto').value

        if (cliente == '' || cantidad == '') {
            Swal.fire({
                icon: 'error',
                title: 'Error en el registro',
                text: 'Por favor ingrese todos los datos',
            });
        } else {
            Registrar_()
        }
    })

    // EVENTO CAMBIAR ESTADO DE PAGO Y ENTREGA
    document.getElementById('table').addEventListener('click', async (e) => {

        if (e.target.innerHTML == "Pendiente" && e.target.matches(".estado")) {

            Swal.fire({
                title: '¿El producto ya ha sido entregado?',
                text: 'Esta seguro de continuar',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Si, entregado',
                cancelButtonText: 'Cancelar'
            }).then(async (result) => {
                if (result.isConfirmed) {
                    idEs = e.target.closest('tr').querySelector('.id_row').innerHTML

                    // Envía los datos en formato JSON a través de una solicitud fetch
                    const cambiarEstado = await fetch('../../controllers/ventas/cambiarEstado.php', {
                        method: 'POST',
                        body: JSON.stringify({
                            ed: idEs
                        }),
                        headers: {
                            'Content-Type': 'application/json'
                        },


                    });

                    const resultado = await cambiarEstado.json();

                    if (resultado.success) {
                        if (resultado.success) {
                            Swal.fire({
                                title: 'Estado cambiado con exito',
                                icon: 'success',
                                timer: 1000, // Temporizador en milisegundos
                                showConfirmButton: false // No mostrar el botón de confirmación
                            }).then(() => {
                                location.reload();
                            });
                        }
                    }

                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    // Aquí colocas el código que se ejecutará si el usuario presiona "Cancelar"
                    Swal.fire('Acción cancelada', '', 'error');
                }
            });



        }

        if (e.target.innerHTML == "Pendiente" && e.target.matches(".pago")) {

            Swal.fire({
                title: '¿El producto ya ha sido pagado?',
                html: `<div style="display:grid;place-items:center">
                            <select id="paymentStatus" style="width:55%" class="form-control" >
                                <option value="">Seleccione un metodo</option>
                                <option>Transferencia</option>
                                <option>Efectivo</option>
                            </select>
                        <div/>`,

                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Continuar',
                cancelButtonText: 'Cancelar',
                preConfirm: () => {
                    const paymentStatus = document.getElementById('paymentStatus').value;
                    if (!paymentStatus) {
                        Swal.showValidationMessage('Debe seleccionar una opción');
                    } else {
                        return {
                            paymentStatus: paymentStatus
                        };
                    }
                }
            }).then(async (result) => {
                if (result.isConfirmed) {

                    metodoPag = document.getElementById('paymentStatus').value;


                    idEs = e.target.closest('tr').querySelector('.id_row').innerHTML

                    // Envía los datos en formato JSON a través de una solicitud fetch
                    const cambiarPago = await fetch('../../controllers/ventas/cambiarEstadoP.php', {
                        method: 'POST',
                        body: JSON.stringify({
                            ed: idEs,
                            metodo: metodoPag,
                        }),
                        headers: {
                            'Content-Type': 'application/json'
                        },


                    });

                    const resultado = await cambiarPago.json();

                    if (resultado.success) {
                        Swal.fire({
                            title: 'Estado cambiado con exito',
                            icon: 'success',
                            timer: 1000, // Temporizador en milisegundos
                            showConfirmButton: false // No mostrar el botón de confirmación
                        }).then(() => {
                            location.reload();
                        });

                    }


                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    // Aquí colocas el código que se ejecutará si el usuario presiona "Cancelar"
                    Swal.fire('Acción cancelada', '', 'error');
                }
            });



        }

    })

    // TABLA METODO PAGOS
    document.getElementById('tabla_hoy_venta_metodos').addEventListener('click', () => {
        document.getElementById('bodyDetalleVenta').innerHTML = ''
        table = document.createElement('table')

        table.classList.add('table')
        table.innerHTML =
            `
            <thead class="">
                <tr>
                    <th  class="text-center" scope="col">Metodo</th>
                    <th  class="text-center" scope="col">Valor</th>

                </tr>
            </thead>
            <tbody id="id_tb_bd_dt">

            </tbody>
            `

        document.getElementById('bodyDetalleVenta').appendChild(table)

        f = fechaActual(document.getElementById('title_fecha').innerHTML)

        arrayFil = data_array[0].filter(e => e['fecha Entrega'] == `${f.año}-${f.mes_num}-${f.dia_txt}`)

        trTxt = `
                <tr>
                    <td  class="text-center" scope="row"><spam style="font-size:15px;cursor:pointer;color:white;background-color:#da0081" class="pago badge" >Transferencia</spam></td>
                    <td class="text-center" >${AddFormatMoneda(arrayFil.filter(f=>f.pago == 'Transferencia').reduce((a,b)=>a+b['valor T'],0))}</td>
                </tr>
                <tr>
                    <td  class="text-center" scope="row"><spam style="font-size:15px;cursor:pointer" class="estado badge badge-success">Efectivo</spam></td>
                    <td class="text-center" >${AddFormatMoneda(arrayFil.filter(f=>f.pago == 'Efectivo').reduce((a,b)=>a+b['valor T'],0))}</td>
                </tr>
                <tr>
                    <td  class="text-center" scope="row"><spam style="font-size:15px;cursor:pointer" class="estado badge badge-warning">Pendiente</spam></td>
                    <td class="text-center" >${AddFormatMoneda(arrayFil.filter(f=>f.pago == 'Pendiente').reduce((a,b)=>a+b['valor T'],0))}</td>
                </tr>
                <tr>
                    <th  class="text-center" scope="row"><spam style="font-size:15px;cursor:pointer" class="estado badge badge-primary">TOTAL</spam></th>
                    <th class="text-center" >${AddFormatMoneda(arrayFil.reduce((a,b)=>a+b['valor T'],0))}</th>
                </tr>
                `
        document.getElementById('id_tb_bd_dt').innerHTML = trTxt





    })

    // TABLA METODO PAGOS
    document.getElementById('tabla_sem_venta_metodos').addEventListener('click', () => {
        document.getElementById('bodyDetalleVenta').innerHTML = ''
        table = document.createElement('table')

        table.classList.add('table')
        table.innerHTML =
            `
            <thead class="">
                <tr>
                    <th  class="text-center" scope="col">Metodo</th>
                    <th  class="text-center" scope="col">Valor</th>

                </tr>
            </thead>
            <tbody id="id_tb_bd_dt">

            </tbody>
            `

        document.getElementById('bodyDetalleVenta').appendChild(table)

        fechaAc = fechaActual(title_fecha.innerHTML).object

        fechaAc_ = `${fechaAc.getFullYear()}-${DosDigitos(fechaAc.getMonth()+1)}-${DosDigitos(fechaAc.getDate())}`
        fech = fechaASemana(fechaAc_).split('/')

        arrayFilDes = datosVenta.filter(e => e['fecha Entrega'] <= fech[1] && e['fecha Entrega'] >= fech[0])



        trTxt = `
                <tr>
                <td  class="text-center" scope="row"><spam style="font-size:15px;cursor:pointer;color:white;background-color:#da0081" class="pago badge" >Transferencia</spam></td>
                    <td class="text-center" >${AddFormatMoneda(arrayFilDes.filter(f=>f.pago == 'Transferencia').reduce((a,b)=>a+b['valor T'],0))}</td>
                </tr>
                <tr>
                <td  class="text-center" scope="row"><spam style="font-size:15px;cursor:pointer" class="estado badge badge-success">Efectivo</spam></td>
                    <td class="text-center" >${AddFormatMoneda(arrayFilDes.filter(f=>f.pago == 'Efectivo').reduce((a,b)=>a+b['valor T'],0))}</td>
                </tr>
                <tr>
                <td  class="text-center" scope="row"><spam style="font-size:15px;cursor:pointer" class="estado badge badge-warning">Pendiente</spam></td>
                    <td class="text-center" >${AddFormatMoneda(arrayFilDes.filter(f=>f.pago == 'Pendiente').reduce((a,b)=>a+b['valor T'],0))}</td>
                </tr>
                <tr>
                <th  class="text-center" scope="row"><spam style="font-size:15px;cursor:pointer" class="estado badge badge-primary">TOTAL</spam></th>
                    <th class="text-center" >${AddFormatMoneda(arrayFilDes.reduce((a,b)=>a+b['valor T'],0))}</th>
                </tr>
                `
        document.getElementById('id_tb_bd_dt').innerHTML = trTxt





    })

    // RESTA STOCK PROPIO
    document.getElementById('resta_stock').addEventListener('click', () => {
        document.getElementById('bodyDetalleVenta').innerHTML = ''
        table = document.createElement('table')
    })


    document.getElementById('labelValorT').addEventListener('dblclick', function() {
        document.getElementById('valorCompra').disabled = false
    });
</script>