{% extends 'menu/menu.html' %}
{% load static %}

{% block title %}Resumen del Día de Pedidos{% endblock %}

{% block body %}
<div class="container">
    <h2 class="text-center">Reporte de Ventas Pedidos <i class="fas fa-chart-bar"></i></h2>
    <!-- Tiene un bug si antes de pulsarlo se navega hacia atrás -->
    <button id="btnRegresar" class="btn btn-danger d-none">Regresar</button>

    <!-- Filtros: Rangos de Fechas y Estados -->
    <div class="row my-4 align-items-end">
        <div class="col-md-12">
            <h4>Filtros Aplicados</h4>
            <div id="filtrosAplicados" class="alert alert-info">
                Ningún filtro aplicado.
            </div>
        </div>




        <div class="col-md-2">
            <label for="rangoFechas">Rango de Fechas:</label>
            <select id="rangoFechas" class="form-select">
                <option value="">Seleccione...</option>
                <option value="mes-actual">Este Mes</option>
                <option value="mes_anterior">Mes Anterior</option>
                <option value="hoy">Hoy</option>
                <option value="7dias">Hace 7 días</option>
                <option value="anio-actual">Este Año</option>
                <option value="semestre_anterior">6 meses atrás</option>
                <option value="anio_anterior">Año Anterior</option>
            </select>
        </div>
        <div class="col-md-3">
            <label for="fechaInicio">Fecha Inicio:</label>
            <input type="date" id="fechaInicio" name="fechaInicio" class="form-control">
        </div>
        <div class="col-md-3">
            <label for="fechaFin">Fecha Fin:</label>
            <input type="date" id="fechaFin" name="fechaFin" class="form-control">
        </div>
        <div class="col-md-2">
            <label for="estadoPedido">Estado del Pedido:</label>
            <select id="estadoPedido" name="estadoPedido" class="form-select">
                <option value="todos">Todos</option>
                <option value="1">Creado</option>
                <option value="2">Enviado</option>
                <option value="3">Rechazado</option>
                <option value="4">Aprobado</option>
                <option value="5">Preparando</option>
                <option value="6">Listo</option>
                <option value="7">Entregado</option>
            </select>
        </div>
        <div class="col-md-1 text-end">
            <button id="borrarFiltros" class="btn btn-danger w-100">Borrar</button>
        </div>
        <div class="col-md-1 text-end">
            <button id="filtrarBtn" class="btn btn-primary w-100">Filtrar</button>
        </div>


    </div>

    <hr>

    <div class="row mb-5">
        <div class="col-12">
            <!-- Reporte de Ventas utilizando Grafana -->
            <div>
                <!-- <div class="iframe-container"> -->
                <iframe id="iframe-grafana" frameborder="0" class="w-100" style="height: 500px; border: none;"></iframe>
                <!-- </div> -->
            </div>
        </div>
    </div>



    <style>
        .iframe-container {
            /* Esta propiedad permite que el contenedor del <iframe> sea redimensionable tanto en ancho como en altura. */
            resize: both;
            /* Asegura que si el contenido dentro del contenedor excede el tamaño del iframe, se agreguen barras de desplazamiento. */
            overflow: auto;
            /* ancho inicial */
            /* width: 600px; */
            /* altura inicial */
            /* height: 400px; */
            /* borde opcional para visualización */
            border: 2px solid #ccc;
        }

        iframe {
            /* Hace que el iframe ocupe todo el espacio disponible dentro de su contenedor redimensionable. */
            width: 100%;
            height: 100%;
        }
    </style>
</div>

<script>
    const actualLength = history.length;
</script>

<script>
    async function authenticateGrafana(grafanaUrl) {
        const token = "glsa_LenB45pv7WRLjNNrdjxiG6xFEdAcrs0H_1141dae4";

        try {
            const response = await fetch(grafanaUrl, {
                // headers: { "Authorization": `Bearer ${token}` },
                headers: {
                    'Authorization': `Bearer ${token}`,  // Autenticación con token
                    'Content-Type': 'application/json'
                },
                // credentials: "include"

            });

            if (response.ok) {
                return Promise.resolve("Autenticación exitosa");
            } else {
                return Promise.reject("Error autenticando en Grafana");
            }
        } catch (error) {
            return Promise.reject(`Error de conexión: ${error.message}`);
        }
    }

    async function autenticarGrafana() {
        // ESTO DE ABAJO NO FUNCIONARÁ, saltara error CORS en la consola
        // el grafana server no permite CORS ni es "allowable", se debe usar servidor proxy como nginx ( pura shit)
        await authenticateGrafana(url)
            .then(message => {
                console.log(message);  // "Autenticación exitosa"
            })
            .catch(error => {
                console.error(error);  // "Error autenticando en Grafana" o "Error de conexión: ..."
            });
    }


    async function load_grafana(id_negocio, fecha_inicio, fecha_fin, pedido_estado) {
        let IFRAME = document.getElementById('iframe-grafana');

        // Convertir fechas de "DD-MM-YYYY" a timestamp en milisegundos
        function convertirFecha(fecha) {
            // console.log(fecha);
            let partes = fecha.split('-'); // Separar en día, mes, año
            // console.log(partes);
            let fechaObjeto = new Date(partes[0], partes[1] - 1, partes[2]); // Año, Mes (0-indexado), Día
            return fechaObjeto.getTime(); // Obtener timestamp en milisegundos
        }

        let fecha_inicio_tmp = convertirFecha(fecha_inicio);
        let fecha_fin_tmp = convertirFecha(fecha_fin);

        // console.log(fecha_inicio_tmp);
        // console.log(fecha_fin_tmp);

        let url = `https://nexushn.com:3000/d-solo/beboh8xk71ptsb/reporte-pedidos?orgId=1&from=${fecha_inicio_tmp}&to=${fecha_fin_tmp}&timezone=browser&var-fecha_inicio=${fecha_inicio}&var-fecha_fin=${fecha_fin}&var-pedidos_estado=${pedido_estado}&var-query0=&var-id_negocio=${id_negocio}&panelId=1&__feature.dashboardSceneSolo`;
        // let url = `http://localhost:3000/d-solo/beboh8xk71ptsb/reporte-pedidos?orgId=1&from=${fecha_inicio_tmp}&to=${fecha_fin_tmp}&timezone=browser&var-fecha_inicio=${fecha_inicio}&var-fecha_fin=${fecha_fin}&var-pedidos_estado=${pedido_estado}&var-query0=&var-id_negocio=${id_negocio}&panelId=1&__feature.dashboardSceneSolo`;


        //await autenticarGrafana();

        IFRAME.src = url;

        mostrarFiltrosAplicados(fecha_inicio, fecha_fin, pedido_estado);
    }

    function filtrar() {
        function hacer() {
            let id_negocio = '{{user_id}}';
            // let id_negocio = '16';
            let fecha_inicio = document.getElementById('fechaInicio').value;
            let fecha_fin = document.getElementById('fechaFin').value;
            let pedido_estado = document.getElementById('estadoPedido').value || 'todos';

            // Si no se han seleccionado fechas, poner valores por defecto
            if (!fecha_inicio || !fecha_fin) {
                setDefaultDates();
                hacer();
            }

            load_grafana(id_negocio, fecha_inicio, fecha_fin, pedido_estado);
        }

        hacer();
    }

    function initializeFiltros() {
        setDefaultDates();
        setDefaultEstado();
    }

    function setDefaultDates() {
        document.getElementById('rangoFechas').value = "mes-actual";

        // es la logica del select  rangoFechas
        let today = new Date();
        let firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        let lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);

        document.getElementById('fechaInicio').value = firstDay.toISOString().split('T')[0];
        document.getElementById('fechaFin').value = lastDay.toISOString().split('T')[0];
    }

    function setDefaultEstado() {
        document.getElementById('estadoPedido').value = 'todos';
    }

    function mostrarFiltrosAplicados(fecha_inicio, fecha_fin, pedido_estado) {
        let select = document.getElementById('estadoPedido');
        let option = Array.from(select.options).find(option => option.value === pedido_estado);
        let pedido_estado_texto = option ? option.text : "";  // Si la opción existe, obtiene el texto

        // let filtroTexto = `Rango de fechas: ${fecha_inicio} a ${fecha_fin} Estado del pedido: ${pedido_estado_texto}`;
        // Rango de fechas: <span class="badge bg-primary">${fecha_inicio} a ${fecha_fin}</span>    
        let filtroTexto = `<div style="display: flex; justify-content: space-between; align-items: center;">
            <span>
                Rango de fechas: <span class="fw-bold">${fecha_inicio} a ${fecha_fin}</span>    
            </span>
            <span style="margin-left: auto;">Estado del pedido: <span class="fw-bold">${pedido_estado_texto}</span></span>
        </div>
        `;
        document.getElementById('filtrosAplicados').innerHTML = filtroTexto;
    }

    initializeFiltros();
    filtrar();
</script>

<script>
    document.getElementById('filtrarBtn').addEventListener('click', function () {
        filtrar();
    });

    document.getElementById("rangoFechas").addEventListener("change", function () {
        let fechaInicio = document.getElementById("fechaInicio");
        let fechaFin = document.getElementById("fechaFin");
        let hoy = new Date();
        let inicio, fin;

        switch (this.value) {
            case "mes-actual":
                inicio = new Date(hoy.getFullYear(), hoy.getMonth(), 1);
                fin = new Date(hoy.getFullYear(), hoy.getMonth() + 1, 0);
                break;
            case "anio-actual":
                inicio = new Date(hoy.getFullYear(), 0, 1);
                fin = new Date(hoy.getFullYear(), 11, 31);
                break;
            case "hoy":
                inicio = fin = hoy;
                break;
            case "7dias":
                inicio = new Date(hoy);
                inicio.setDate(hoy.getDate() - 7);
                fin = hoy;
                break;
            case "mes_anterior":
                inicio = new Date(hoy.getFullYear(), hoy.getMonth() - 1, 1);
                fin = new Date(hoy.getFullYear(), hoy.getMonth(), 0);
                break;
            case "semestre_anterior":
                inicio = new Date(hoy.getFullYear(), hoy.getMonth() - 6, 1);
                fin = new Date(hoy.getFullYear(), hoy.getMonth(), 0);
                break;
            case "anio_anterior":
                inicio = new Date(hoy.getFullYear() - 1, 0, 1);
                fin = new Date(hoy.getFullYear() - 1, 11, 31);
                break;
            default:
                inicio = fin = null;
        }

        fechaInicio.value = inicio ? inicio.toISOString().split('T')[0] : "";
        fechaFin.value = fin ? fin.toISOString().split('T')[0] : "";
    });

    document.getElementById("borrarFiltros").addEventListener("click", function () {
        initializeFiltros()
    });

    // Es necesario esta logica porque abrir un iframe en cada filtro realizado agrega un item al historial de la pagina
    // y es necesario volverla en un solo click ignorando los item del historial de los iframe abiertos
    document.getElementById("btnRegresar").addEventListener("click", function () {
        // alert(actualLength);
        // alert(history.length);
        for (let i = 0; i < history.length - actualLength; i++) {
            history.back();
        }
        history.back();
    });

</script>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
    document.getElementById("filtrarBtn").addEventListener("click", function () {
        let iframe = document.querySelector("iframe");
        html2canvas(iframe.contentWindow.document.body).then(canvas => {
            let img = document.createElement("img");
            img.src = canvas.toDataURL("image/png");
            document.body.appendChild(img); // Agregar imagen capturada a la página
        });
    });

</script> -->
{% endblock %}