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

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



<!-- Vetana Modal Registro-->
<div class="modal fade" id="modal_registro" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Registrar surtido</h3>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div id="modal_body" class="modal-body">

            </div>

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



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

        <div class="content-wrapper">

            <!-- Content Header (Page header) -->
            <section class="content-header">
                <div class="container-fluid">

                    <!-- GRAFICA HIST_CREDIT TOP 5 -->
                    <div class="row">

                        <!-- TABLA DEUDAS -->
                        <!-- <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">

                                    <h5 class="card-title">Tabla De Prestamos / <a href="#" data-toggle="modal" data-target="#modal_registro" id="boton_modal_registro">Registrar</a> </h5>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>

                                </div>



                                <div class="card-body">

                                    <table id="table_lista_prestamos" class="table table-bordered table-striped">
                                        <thead>
                                        </thead>
                                        <tbody id="">
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                        </tfoot>
                                    </table>
                                </div>

                            </div>
                        </div> -->

                        <!-- GRAFICA HISTORIAL CREDITICIO -->
                        <!-- <div class="col-md-6">
                            <div class="card collapsed-card">
                                <div class="card-header">
                                    <h5 class="card-title">Historial Crediticio </h5>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-plus"></i>
                                        </button>

                                    </div>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <p class="text-center">
                                                <strong>Fecha: </strong>
                                            </p>

                                            <div class="chart">
                                                <canvas id="grafica_historial_c" height="180" style="height: 180px;"></canvas>
                                            </div>

                                        </div>
                                        <div class="col-md-4">

                                            <div id="progres_historial_cred">


                                            </div>

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


                            </div>
                        </div> -->



                    </div>

                    <!-- TABLA MOVIMIENTOS -->
                    <div class="row">
                        <div class="col-12">

                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Tabla De Surtido / <a href="#" data-toggle="modal" data-target="#modal_registro" id="boton_modal_registro">Registrar</a> </h5>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>

                                </div>

                                <!--CONTENIDO TABLA -->
                                <div class="card-body">
                                    <table id="tabla_surtidos" class="table table-bordered table-striped">
                                        <thead>
                                        </thead>
                                        <tbody id="">
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                            <tr class="anim">
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                                <td class="td-3"><span></span></td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                        </tfoot>
                                    </table>
                                </div>

                            </div>

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

                </div>

            </section>


        </div>
    </div>

</section>

<!-- // Funciones propias de la paginaa -->
<script>

</script>

<!-- SCRIPT TRAER DATOS Y TABLA-->
<script>
    // Llama la funcion preparando los datos
    ObtenerDatos('surtido', '../../controllers/functions/datos.php').then((respuesta) => {

        data_array = respuesta

        data_array.data = data_array.data.map(e => {
            return {
                id: e.id,
                valor: e.valor,
                hamburguesas: e.hamburguesas,
                indice: Math.round((e.valor / e.hamburguesas) * 1) / 1,
                fecha: e.fecha
            }

        })

        // ----------------------- USAMOS LAS CAJAS STATS -----------------
        // LoadStats()
        //

        // ----------------------- CREAMOS LA TABLA -----------------
        columnDef = [{
                targets: '_all', // Aplica a todas las columnas
                className: 'text-center align-middle'
            },

            {
                "targets": 1, //VALOR
                "render": function(data, type, row, meta) {
                    color = data <= 0 ? 'danger' : 'success'
                    return `<span style="font-size: 14px" class="badge badge-${color}">${(AddFormatMoneda(data))}</span>`

                }
            },
            {
                "targets": 3, //INDICE
                "render": function(data, type, row, meta) {
                    color = data <= 0 ? 'danger' : 'success'
                    return `<span style="font-size: 14px" class="badge badge-${color}">${(AddFormatMoneda(data))}</span>`

                }
            },
            {
                "targets": 4, //INDICE
                "render": function(data, type, row, meta) {
                   
                   return `<div style="justify-content: center;display: flex;"><input style="width:65%" type="week" class="form-control" value="${getISOWeek(data.split('/')[0])}" ></div>`

                }
            },
        ]

        // Crea la tabla con los valores de la funcion
        CrearDataTable('tabla_surtidos', data_array, columnDef)
        setTimeout(() => {
            $('#tabla_surtidos').DataTable().order([
                [3, 'desc'],
                [0, 'desc']
            ]).draw()
        }, 100);
        //

    });

    // Evento crear formulario
    document.getElementById('boton_modal_registro').addEventListener('click', () => {

        campos = {
            valor: {
                type: 'input',
            },
            fecha: {
                type: 'date',
                default: true

            },
            hamburguesas: {
                type: 'input',
            },


        }

        FormRegistro('modal_body', campos, 'classFormul')

        setTimeout(() => {

            //INPUT VALOR
            const inputElement = document.getElementById('valor');
            inputElement.value = '$ 0'
            inputElement.addEventListener('keyup', () => {

                inputElement.value = AddFormatMoneda(Math.abs(RemoveFormatMoneda(inputElement.value)))
            });


        }, 100);

    })

    // Evento click de registro
    document.getElementById('registrar').addEventListener('click', () => {
        // Valida los datos correctos
        if (validarForm('form_modal_body', 'classFormul')) {

            //Llama funcion reg
            obj = {}
            formData = new FormData(document.querySelector(`#form_modal_body`))
            for (const [key, value] of formData.entries()) {

                obj[key] = (RemoveFormatMoneda(value));
            }

            if (data_array.data.filter(e => e.fecha == fechaASemana(obj['fecha'])).length > 0) {
                Swal.fire({
                    title: "Error de registro",
                    text: `La fecha ya fue registrada`,
                    icon: "error"
                });

                document.getElementById('fecha').classList.remove('is-valid')
                document.getElementById('fecha').classList.add('is-invalid')

            } else {

                obj['fecha'] = fechaASemana(obj['fecha'])
                nuevoReg = obj

                // Crear un nuevo FormData
                newformData = new FormData();
                // Iterar sobre las claves del objeto y agregarlas al FormData
                for (var clave in obj) {
                    if (obj.hasOwnProperty(clave)) {
                        newformData.append(clave, obj[clave]);
                    }
                }


                Registrar('surtido', newformData, '../../controllers/functions/registrar.php').then((respuesta) => {
                    reg_push = {}
                    reg_push.id = respuesta.ultimo
                    reg_push = {
                        ...reg_push,
                        ...nuevoReg
                    }

                    data_array.data.push(reg_push)

                    // LoadStats()
                    CrearDataTable('tabla_surtidos', data_array, columnDef)
                    setTimeout(() => {
                        $('#tabla_surtidos').DataTable().order([
                            [3, 'desc'],
                            [0, 'desc']
                        ]).draw()
                    }, 100);

                })
            }



        }
    })
</script>