{% extends 'base.html' %}
{% load static %}


{% block head %}
<link href="{% static 'css/report/report.css' %}" rel="stylesheet">
<link href="{% static 'css/spinkit.css' %}" rel="stylesheet">
<link href="{% static 'css/report/flex.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/report/filterbox.css' %}">
<link href="{% static 'css/report/container.css' %}" rel="stylesheet">
<link href="{% static 'css/columns.css' %}" rel="stylesheet">

<link href="{% static 'css/report/dropdown.css' %}" rel="stylesheet">


{% endblock head %}


{% block content %}

<div class="mainContent" style="flex-direction: column;">
    <div>
        <img src="{% static 'img/reporte-on.png' %}" alt="Medición" class="iconContent">
        <p class="title"> Reporte de Experimentos </p>
    </div>

    <div class="content maxvw">

        <!-- icono -->


        <!-- Título -->


        <form id="generar-reporte" class="boxes flexparent" method="POST" action="{% url 'report' %}">
            {% csrf_token %}



            <div class="box parametros flexparentrow">


                <h2 class="titleConfig"> Ingrese parametros </h2>
                <hr>


                <div class="bigrow flexparentrow child">
                    <div class="col child">

                        <div class="row flexparentrow child">

                            <div class="oneInput  child">
                                <label for="treporte" class="labelForm child"> Tipo de reporte <img class="info-par"
                                        id="partreporte" src="{% static 'img/info.png' %}"></img> </label>
                                <input type="text" id="treporte" class="inputForm child" name="treporte"
                                    value="Reporte estandar" required>
                            </div>

                            <div class="oneInput  child">
                                <label for="nombreResponsable" class="labelForm child"> Responsable <img
                                        class="info-par" id="parrespon" src="{% static 'img/info.png' %}"></img>
                                </label>
                                <input type="text" id="responsable" class="inputForm child" name="responsable" size="35"
                                    value="David Carrasco" required>
                            </div>

                        </div>

                        <div class="row flexparentrow child">
                            <div class="oneInput  child">
                                <label for="ubicacion" class="labelForm child"> Ubicación </label>
                                <input type="text" id="ubicacion" class="inputForm child" name="ubicacion"
                                    value="Laboratorio Hibring" required>
                            </div>

                            <div class="oneInput  child">
                                <label for="fecha" class="labelForm child"> Fecha </label>
                                <input type="datetime-local" id="fecha" class="inputForm child" name="fecha"
                                    value="2023-03-08T00:00" required>
                            </div>

                        </div>

                        <div class="row  child">
                            <div class="oneInput  child">
                                <label for="muestra" class="labelForm child"> Tipo de muestra <img class="info-par"
                                        id="parmuestra" src="{% static 'img/info.png' %}"></img> </label>
                                <input type="text" id="muestra" class="inputForm child" name="muestra" size="20"
                                    value="Andacollo" required>
                            </div>

                            <div class="oneInput  child">
                                <label for="dispositivo" class="labelForm child"> Dispositivo </label>
                                <input type="text" id="dispositivo" class="inputForm child" name="dispositivo" size="10"
                                    value="IT-003" required>
                            </div>
                        </div>

                    </div>

                    <div class="col csecond  child">

                        <div class="oneInput  child">
                            <label for="numeroReporte" class="labelForm child"> Reporte número <img class="info-par"
                                    id="parnumero" src="{% static 'img/info.png' %}"></img> </label>
                            <input type="number" id="numeroReporte" class="inputForm child" name="numeroReporte"
                                value="00001" required>
                        </div>

                        <div class="oneInput coment  child">
                            <label for="comentarios" class="labelForm child"> Comentarios <img class="info-par"
                                    id="parcomentario" src="{% static 'img/info.png' %}"></img> </label>
                            <textarea name="comentarios" id="comentarios" cols="30" rows="5"
                                class="comments child"></textarea>
                        </div>
                    </div>
                </div>

            </div>


            <div class="bigrow">

                <div style="width: 1200px;" class="container filtro" id="formularioFiltros">
                    

                    <div class="accordion filterbox">
                        <div class="accordion-item">
                            <div class="accordion-header">
                                <h2 class="titleConfig" style="color: white;">Filtros</h2>
                                <span class="titleConfig arrow" style="color: white;">▼</span>
                            </div>
                            <div class="accordion-content custom-container">
                                <form id="filterForm" method="POST" action="/report/">
                                    {% csrf_token %}
                                    <div class="filterRow custom-row">
                                        <div class="filterColumn custom-col custom-col custom-col-sm-12 custom-col-md-12 custom-col-lg-6">
                                            <div class="filterdate">
                                                <div class="filterdate-element" style="padding-right: 5px ;">
                                                    <p class="titledate">Fecha Inicial</p>
                                                    <input type="date" name="initialdate" class="initialdate" placeholder="Fecha Inicial">
                                                </div>
                                                <div class="filterdate-element">
                                                    <p class="titledate">Fecha Final</p>
                                                    <input type="date" name="finaldate" class="finaldate" placeholder="Fecha Final">
                                                </div>
                                            </div>
                                            <div class="filterdays">
                                                <p class="titledate">Días</p>
                                                <div class="days">
                                                    <label class="buttonday_label">
                                                        <input type="checkbox" name="days" value="1" class="buttonday"> Lun
                                                    </label>
                                                    <label class="buttonday_label">
                                                        <input type="checkbox" name="days" value="2" class="buttonday"> Mar
                                                    </label>
                                                    <label class="buttonday_label">
                                                        <input type="checkbox" name="days" value="3" class="buttonday"> Mié
                                                    </label>
                                                    <label class="buttonday_label">
                                                        <input type="checkbox" name="days" value="4" class="buttonday"> Jue
                                                    </label>
                                                    <label class="buttonday_label">
                                                        <input type="checkbox" name="days" value="5" class="buttonday"> Vie
                                                    </label>
                                                    <label class="buttonday_label">
                                                        <input type="checkbox" name="days" value="6" class="buttonday"> Sáb
                                                    </label>
                                                    <label class="buttonday_label">
                                                        <input type="checkbox" name="days" value="7" class="buttonday"> Dom
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="filterColumn custom-col custom-col-sm-12 custom-col-md-12 custom-col-lg-6">
                                            <div class="filterDFD custom-container">
                                                <div class="custom-row" style="padding-left: 25px;">
                                                    <div class="elemento elementomaterial custom-col custom-col-lg-4 custom-col-md-12 custom-col-sm-12">
                                                        <p class="titledate">Material</p>
                                                        <div class="atributo">
                                                            <select name="material" class="material">
                                                                <option value="">Seleccione...</option>
                                                                {% for material in materiales %}
                                                                <option value="{{material}}">{{material}}</option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <br>
                                                    <div class="elemento elementofloculante custom-col custom-col-lg-4 custom-col-md-12 custom-col-sm-12">
                                                        <p class="titledate">Floculante</p>
                                                        <div class="atributo">
                                                            <select name="floculante" class="floculante">
                                                                <option value="">Seleccione...</option>
                                                                {% for floculante in floculantes %}
                                                                <option value="{{floculante}}">{{floculante}}</option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <br>
                                                    <div class="elemento elementodiagnostico custom-col custom-col-lg-4 custom-col-md-12 custom-col-sm-12">
                                                        <p class="titledate">Diagnostico</p>
                                                        <div class="atributo">
                                                            <select name="diagnosis" class="diagnosis">
                                                                <option value="">Seleccione...</option>
                                                                <option value="1">Bueno</option>
                                                                <option value="2">Malo</option>
                                                                <option value="3">etc</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <br>
                                                    

                                                    <!--
                                                    <div class="filterDFD-element">
                                                        <p class="titledate">Material</p>
                                                        <select name="material" class="dropdowndfd material custom-select">
                                                            <option value="">Seleccione...</option>
                                                            {% for material in materiales %}
                                                            <option value="{{material}}">{{material}}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    

                                                    <div class="filterDFD-element">
                                                        <p class="titledate">Floculante</p>
                                                        <select name="floculante" class="dropdowndfd floculante">
                                                            <option value="">Seleccione...</option>
                                                            {% for floculante in floculantes %}
                                                            <option value="{{floculante}}">{{floculante}}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>

                                                    

                                                    <div class="filterDFD-element">
                                                        <p class="titledate">Diagnostico</p>
                                                        <select name="diagnosis" class="dropdowndfd diagnosis">
                                                            <option value="">Select Diagnosis</option>
                                                            
                                                        </select>
                                                    </div>
                                                    -->
                                                </div>
                                            </div>
                                            
                                            <div class="boxresponsable">
                                                <div id="operatordiv_drop" class="operators">
                                                    <p class="titledate">Seleccionar responsable(s)</p>
                                                    <div style="display: flex;" class="operators_title" id="dropdownToggle">
                                                        <p class="titledate">RESPONSABLES(S)</p>
                                                        <img class="topmenos" src="{% static 'img/historic/dropdown_arrow.svg' %}">
                                                    </div>
                                                    <div class="operator" id="operatordiv">
                                                        {% for operador in operadores %}
                                                        <label class="buttonoperator_label">
                                                            <input type="checkbox" name="operator" value="{{ operador }}" class="buttonoperator"> {{ operador }}
                                                        </label>
                                                        {% endfor %}
                                                    </div>
                                                </div>

                                                <!-- Contenedor para mostrar operadores seleccionados -->
                                                <div id="selected_operators" class="selected-operators"></div>

                                            </div>
                                        </div>
                                        
                                        
                                    </div>
                                    <div class="filterRow b">
                                        <div class="filterbutton custom-col custom-col-sm-12 custom-col-md-12 custom-col-lg-12">
                                            <button type="submit" id="filterbutton">filtrar</button>
                                        </div>
                                    </div>

                                </form>

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

                

                <div class="box tabla">

                    {% for page in pages %}
                    <table class="historyTable {{page.state}}" id="{{page.n_page}}">

                        <thead>
                            <tr>
                                <th class="select" scope="col"></th>
                                <th class="experiment" scope="col" title="Información adicional sobre la columna 1">
                                    Experimento <div id="popupDate" class="popupDate">
                                        <div class="popup-content">
                                            <p>Formato = dd/mm/aaaa</p>
                                            <span class="popup-close">x</span>
                                        </div>
                                    </div>
                                </th>
                                <th class="date" scope="col">Fecha<img class="info-link" id="idate"
                                        src="{% static 'img/info.png' %}"></img></th>
                                <th class="time" scope="col">Hora<img class="info-time" id="itime"
                                        src="{% static 'img/info.png' %}"></img></th>
                            </tr>
                        </thead>
                        {% for row in page.rows %}
                        <tbody>
                            <td class="select" data-label="select"><input type="checkbox" name="select{{row.id}}"
                                    value="{{row.id}}"></td>
                            <td class="experiment" data-label="experiment">{{row.experimento}}</td>
                            <td class="date" data-label="date">{{row.fecha}}</td>
                            <td class="time" data-label="time">{{row.hora}}</td>

                        </tbody>
                        {% endfor %}

                    </table>
                    {% endfor %}

                    <div class="pagination" onload="pagina(1)">

                        <li class="page-item disabled" id="anterior">
                            <a class="page-link" onclick="anterior()">Anterior</a>
                        </li>
                        {% for number in pagination %}
                        <li class="page-item {% if number == 1 %}active{% endif %}" id="pagina{{number}}">
                            <a class="page-link" onclick="pagina('{{number}}')">{{number}}</a>
                        </li>
                        {% endfor %}

                        <li class="page-item" id="siguiente">
                            <a class="page-link" onclick="siguiente()">Siguiente</a>
                        </li>

                    </div>



                </div>

        </form>
        
        <div class="secondbox">

            <!-- AA
            
            <form id="filterForm" method="POST" action="/report/">
                {% csrf_token %}
                <div class="filterbox">Filtros...</div>
                <div class="filterbox-content">
                    <p class="titledate">Fecha Inicial</p>
                    <input type="date" name="initialdate" class="initialdate" placeholder="Fecha Inicial">
                    <p class="titledate">Fecha Final</p>
                    <input type="date" name="finaldate" class="finaldate" placeholder="Fecha Final">
                    <p class="titledate">Días</p>
                    <div class="days">
                        <label class="buttonday_label">
                            <input type="checkbox" name="days" value="1" class="buttonday"> Lun
                        </label>
                        <label class="buttonday_label">
                            <input type="checkbox" name="days" value="2" class="buttonday"> Mar
                        </label>
                        <label class="buttonday_label">
                            <input type="checkbox" name="days" value="3" class="buttonday"> Mié
                        </label>
                        <label class="buttonday_label">
                            <input type="checkbox" name="days" value="4" class="buttonday"> Jue
                        </label>
                        <label class="buttonday_label">
                            <input type="checkbox" name="days" value="5" class="buttonday"> Vie
                        </label>
                        <label class="buttonday_label">
                            <input type="checkbox" name="days" value="6" class="buttonday"> Sáb
                        </label>
                        <label class="buttonday_label">
                            <input type="checkbox" name="days" value="7" class="buttonday"> Dom
                        </label>
                    </div>
                    <p class="titledate">Material</p>
                    <select name="material" class="dropdowndfd material">
                        <option value="">Seleccione...</option>
                        {% for material in materiales %}
                        <option value="{{material}}">{{material}}</option>
                        {% endfor %}
                    </select>
                    <p class="titledate">Floculante</p>
                    <select name="floculante" class="dropdowndfd floculante">
                        <option value="">Seleccione...</option>
                        {% for floculante in floculantes %}
                        <option value="{{floculante}}">{{floculante}}</option>
                        {% endfor %}
                    </select>
                    <p class="titledate">Diagnostico</p>
                    <select name="diagnosis" class="dropdowndfd diagnosis">
                        <option value="">Select Diagnosis</option>
                        
                    </select>
                    <div id="operatordiv_drop" class="operators">
                        <div style="display: block;" class="operators_title">
                            <p class="titledate">Responsable(s)</p>
                            <img class="topmenos" src="{% static 'img/historic/dropdown_arrow.svg' %}">
                        </div>
                        <div class="operator" id="operatordiv">
                            {% for operador in operadores %}
                            <label class="buttonoperator_label">
                                <input type="checkbox" name="operator" value="{{ operador }}" class="buttonoperator"> {{ operador }}
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <button type="submit" class="filterbutton">filtrar</button>
                </div>
            </form>
            -->



            <div class="box envemail">

                <h2 class="titleConfig titlereporte"> Reporte </h2>
                <hr>

                <label for="geninforme" class="textg">
                    Una vez ingresados los parámetros y seleccionado los experimentos presiona el botón para generar el
                    reporte, el cual se descargará automáticamente.
                </label>
                <button class="buttonDesign sendP" type="submit" name="generarInforme" value="true"
                    style="margin-bottom: 30px;">Ver reporte
                </button>
                
                <!--
                <button class="buttonDesign sendP" type="submit" name="generarInforme2" value="true"
                    style="margin-bottom: 30px;">Ver reporte 2
                </button>
                -->
                
                <label for="enviarcorreo" class="textg"> Ingresa el correo electrónico en el que quieras que sea enviado
                    el reporte:
                </label>

                <form id="enviar-form" method="post" action="{% url 'report:enviar_pdf' %}">
                    {% csrf_token %}
                    <div class="oneInput correoe">
                        <input type="text" id="correoe" class="inputForm inputcorreo" name="to_email"
                            value="correo@gmail.com" required>
                    </div>
                    <button class="buttonDesign semail" type="submit">Enviar reporte</button>
                </form>


            </div>
        </div>



    </div>



</div>



{% endblock content %}

{% block js %}
<script src="{% static 'js/report/moreInformation.js' %}"></script>
<script src="{% static 'js/report/pagination.js' %}"></script>
<!-- <script src="{% static 'js/report/spinner.js' %}"></script> -->
<script src="{% static 'js/report/filterbox.js' %}"></script>
<script>
    //codigo que previene que la pagina se quede cargando para siempre
    $contenedores = document.getElementsByClassName("historyTable");
    updatePagination(1, $contenedores.length);
    // Verificar si la URL de redirección está presente en el contexto
    var redirectUrl = "{{ redirect }}";
    if (redirectUrl !== 'None') {
        // Crear un elemento de enlace oculto
        var link = document.createElement("a");
        link.href = redirectUrl;

        // Establecer el nombre de archivo y descargar automáticamente
        link.download = "informe.pdf";
        link.click();
    }
</script>

<script>
    //Codigo del acordeon
    document.addEventListener("DOMContentLoaded", function () {
            const accordionItems = document.querySelectorAll(".accordion-item");

            accordionItems.forEach(item => {
                const header = item.querySelector(".accordion-header");

                header.addEventListener("click", function () {
                    const isActive = item.classList.contains("active");

                    accordionItems.forEach(otherItem => otherItem.classList.remove("active"));

                    if (!isActive) {
                        item.classList.add("active");
                    }
                });
            });
        });
</script>

<script>
    //Codigo del evento seleccion operadores
    document.addEventListener("DOMContentLoaded", function () {
    const dropdown = document.querySelector("#operatordiv");
    const selectedDiv = document.querySelector("#selected_operators");
    const dropdownToggle = document.querySelector("#dropdownToggle");
    const dropdownArrow = document.querySelector(".topmenos");

    // Función para cerrar el dropdown
    function hideDropdown() {
        dropdown.classList.remove("open");
        dropdownArrow.style.transform = "rotate(0deg)"; // Restaurar la flecha
    }

    // Función para abrir el dropdown
    function showDropdown() {
        dropdown.classList.add("open");
        dropdownArrow.style.transform = "rotate(90deg)"; // Rotar la flecha
    }

    // Evento para cambiar la visibilidad del dropdown cuando se hace clic en "Responsable(s)"
    dropdownToggle.addEventListener("click", function (event) {
        event.stopPropagation();
        dropdown.classList.toggle("open");
        dropdownArrow.style.transform = dropdown.classList.contains("open") ? "rotate(90deg)" : "rotate(0deg)";
    });

    // Evento para cerrar el dropdown cuando se hace clic fuera de él
    document.addEventListener("click", function (event) {
        const targetElement = event.target;
        if (!dropdown.contains(targetElement) && targetElement !== dropdownToggle) {
            hideDropdown();
        }
    });

    dropdown.addEventListener("change", function (event) {
        const selectedOperator = event.target;
        const operatorName = selectedOperator.value;

        if (selectedOperator.checked) {
            // Mover el operador seleccionado al div de seleccionados
            const selectedOperatorElement = document.createElement("div");
            selectedOperatorElement.textContent = operatorName;
            selectedOperatorElement.classList.add("selected-operator");
            selectedDiv.appendChild(selectedOperatorElement);

            // Eliminar el operador de la lista desplegable
            selectedOperator.parentElement.remove();
        }
    });

    selectedDiv.addEventListener("click", function (event) {
        if (event.target.classList.contains("selected-operator")) {
            const operatorName = event.target.textContent;

            // Mover el operador nuevamente a la lista desplegable
            const operatorLabel = document.createElement("label");
            operatorLabel.classList.add("buttonoperator_label");
            operatorLabel.innerHTML = `
                <input type="checkbox" name="operator" value="${operatorName}" class="buttonoperator">
                ${operatorName}
            `;
            dropdown.appendChild(operatorLabel);

            // Eliminar el operador del div de seleccionados
            event.target.remove();
        }
    });
});


</script>

<script>
            setSelectHover();

function setSelectHover(selector = "select") {
    let selects = document.querySelectorAll(selector);
    selects.forEach((select) => {
        let selectWrap = select.parentNode.closest(".select-wrap");
        // wrap select element if not previously wrapped
        if (!selectWrap) {
            selectWrap = document.createElement("div");
            selectWrap.classList.add("select-wrap");
            select.parentNode.insertBefore(selectWrap, select);
            selectWrap.appendChild(select);
        }
        // set expanded height according to options
        let size = select.querySelectorAll("option").length;

        // adjust height on resize
        const getSelectHeight = () => {
            selectWrap.style.height = "auto";
            let selectHeight = select.getBoundingClientRect();
            selectWrap.style.height = selectHeight.height + "px";
        };
        getSelectHeight(select);
        window.addEventListener("resize", (e) => {
            getSelectHeight(select);
        });

        /**
         * focus and click events will coincide
         * adding a delay via setTimeout() enables the handling of
         * clicks events after the select is focused
         */
        let hasFocus = false;
        select.addEventListener("focus", (e) => {
            select.setAttribute("size", size);
            setTimeout(() => {
                hasFocus = true;
            }, 150);
        });

        // close select if already expanded via focus event
        select.addEventListener("click", (e) => {
            if (hasFocus) {
                select.blur();
                hasFocus = false;
            }
        });

        // close select if selection was set via keyboard controls
        select.addEventListener("keydown", (e) => {
            if (e.key === "Enter") {
                select.removeAttribute("size");
                select.blur();
            }
        });

        // collapse select
        select.addEventListener("blur", (e) => {
            select.removeAttribute("size");
            hasFocus = false;
        });
    });
}
</script>


<script src="{% static 'js/report/send_email.js'%}"></script>
{% endblock js %}