{% extends 'base.html' %}

{% block titulo %}
Administrar solicitudes
{% endblock titulo %}

{% block body %}    

    <div class="row align-items-center m-0">
        <p class="col h2 mx-3 mt-4">Solicitudes {{ ciclo }}</p>
              
    </div>

    <div style="border-radius: 15px;" class="m-3 py-3 border border-2 borde-pagina-principal  horizontal-scroll">    
        <div class="row mx-0">
            <div class="col-3 ps-0">
                <p class="h4 mx-3">Solicitudes</p>           
            </div>            
            <div class="col mt-1 mb-4 mx-3">
                <form role="search" method="GET"> 
                    <div class="row align-items-center">
                             
                        <div class="col-auto text-end ">                
                            <button class="btn btn-outline-secondary dropdown-toggle filtro-dropdown p-1" type="button" id="dropdownMenuButton"  aria-haspopup="true" aria-expanded="false">
                                Filtros
                                <i class="fa fa-filter align-self-bottom" aria-hidden="true"></i>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <!-- Contenido del dropdown -->
                                <div class="px-3 py-2">
                                    <div class="mb-2 bold-legends">
                                        {{ filtroSolForm.as_div }}
                                        {{ filtroModForm.as_div }}
                                    </div>  
                                    <div class="d-flex justify-content-end">
                                        <button type="submit" class="btn btn-secondary p-0 px-2 mt-1">Aplicar</button>
                                    </div>                                                                  
                                </div>
                            </div>                
                        </div>
                        <div class="col-auto p-0">
                            <i class="fa fa-info-circle font-md" aria-hidden="true" data-bs-original-title="<b>Puede buscar cambiando las palabras o contenido y en los atributos que necesite</b><br><br><b>juan zacatecas</b><br>Busca elementos que contengan 'juan' y 'zacatecas'<br><br><b>nombre:juan</b><br>Busca elementos cuyo atributo nombre contenga 'juan'<br><br><b>~juan ~maria</b><br>Busca elementos que contengan o 'juan' o 'maria'<br><br><b>juan -zacatecas</b><br>Busca elementos que contengan 'juan' y no contengan 'zacatecas'" data-bs-html="true" ></i>
                        </div>
                        <div class="col">
                            <div class="d-flex">    
                                <input
                                id='barra-Busqueda'
                                class="form-control me-2"
                                type="search"
                                placeholder="Buscar por Nombre, Curp, Correo, Datos, etc."
                                name="search"
                                aria-label="Search"
                                value="{{ request.GET.search }}"
                                >
                                <button class="btn btn-outline-success" type="submit">Buscar</button>
                            </div>  
                        </div>                
                    
                    </div>
                </form>
            </div> 
        </div>
        <div class="text-end mx-3">
            <button class="btn btn-aceptado font-md" type="submit" value="aceptar" onclick="enviarFormulario('seleccionadosForm', this)">Aceptar seleccionados</button>
            <button class="btn btn-cancelar font-md" type="submit" value="rechazar"onclick="enviarFormulario('seleccionadosForm', this)">Rechazar seleccionados</button>            
        </div>
        <form id="seleccionadosForm" role="search" method="POST"> 
            {% csrf_token %}  
            <input type="hidden" id=id-input-boton-presionado name="boton-presionado" value="">
            <table class="table custom-table-simple">            
                <thead>
                    <tr>                    
                        <th class="borde-pagina-gris text-center" style="width: 7rem; border-bottom: 2px solid;"> Folio</th>  
                        <th class="borde-pagina-gris" style="border-bottom: 2px solid;"> Nombre</th>
                        <th class="borde-pagina-gris text-center" style="width: 5rem; border-bottom: 2px solid;"> CURP</th>                                        
                        <th class="borde-pagina-gris text-center" style="width: 3rem; border-bottom: 2px solid;"> Puntaje</th>
                        <th class="borde-pagina-gris text-center" style="width: 10rem; border-bottom: 2px solid;"> Modalidad</th>  
                        <th class="borde-pagina-gris text-center" style="width: 5rem; border-bottom: 2px solid;"> Tipo</th>  
                        <th class="borde-pagina-gris text-center" style="width: 8rem; border-bottom: 2px solid;"> Estado</th>  
                        <th class="borde-pagina-gris text-end px-0" style="white-space: nowrap; width: 1rem; border-bottom: 2px solid;">
                            <label class="font-normal" for="id-select-todo-check" data-bs-original-title="Selecciona todos los elementos que coincidan con los filtros y búsqueda">
                                Selec. todo
                            </label>
                        </th>
                        <th class="borde-pagina-gris text-start " data-bs-original-title="Selecciona todos los elementos que coincidan con los filtros y búsqueda" style="width: 2rem; border-bottom: 2px solid;">                             
                            <input class="checkbox-principal form-check-input me-3" type="checkbox" id="id-select-todo-check" name="select-todo-check" value="todo">                        
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for solicitud in page_soli %}                
                    <tr class="{{ solicitud.estado }}">                    
                        {% with solicitud.solicitante as solicitante %}
                        <td class="text-center">{{ solicitante.folio }}</td>                                   
                        <td class="text-start">{{ solicitante.nombre }} {{ solicitante.ap_paterno }} {{ solicitante.ap_materno }}</td>                    
                        <td class="text-center">{{ solicitante.curp }}</td>                     
                        <td class="text-center">{{ solicitud.puntaje }}</td>
                        <td class="text-center font-xs ">{{ solicitud.modalidad.nombre }}</td>       
                        <td class="text-center">{{ solicitud.tipo }}</td> 
                        <td class="text-center font-xs">{{ solicitud.get_estado_display }}</td>                     
                        <td style="text-align: right;">
                            <div class="d-flex align-items-center justify-content-center">                                
                                <button class="btn btn-outline-secondary dropdown-toggle me-0 p-1" type="button" id="dropdownMenuButton{{solicitante.id}}"  data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                                
                                    <i class="fa fa-user-circle align-self-center font-lg" data-bs-original-title="Opciones" aria-hidden="true"></i>
                                </button>                            
                                <ul class="px-1 py-1 dropdown-menu dropdown-menu-end">
                                    <li>
                                        <a href="{% url 'usuarios:AEditarUsuario' solicitante.id %}" class="m-0 me-2 align-items-center dropdown-item">
                                            <i class="fa fa-user-circle align-self-center font-lg" aria-hidden="true"></i>
                                            <span class="align-self-center">Información del usuario</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="m-0 me-2 align-items-center dropdown-item" >
                                            <i class="fa fa-list-alt align-self-centerfont-lg" style="width: 16px;" aria-hidden="true"></i> 
                                            <span class="align-self-center">Detalles de la Solicitud</span>
                                        </a>  
                                    </li>                                      
                                    <li>
                                        <a href="{% url 'solicitudes:AHistorial' solicitante.id %}" class="m-0 me-2 align-items-center dropdown-item" >
                                            <i class="fa fa-clock-o align-self-center font-lg" aria-hidden="true"></i> 
                                            <span class="align-self-center">Historial de solicitudes</span>
                                        </a>  
                                    </li>
                                    <li>
                                        <a href="#" class="m-0 me-2 align-items-center dropdown-item" >
                                            <i class="fa fa-file-archive-o align-self-center font-lg" aria-hidden="true"></i> 
                                            <span class="align-self-center">Descargar docs solicitud</span>
                                        </a>  
                                    </li>                                                                                              
                                </ul>                                                                                                            
                                
                            </div>
                        </td>  
                        <td class="text-start">
                            {% if not solicitud.estado == 'docRevicion' %}
                            {% if not solicitud.estado == 'docError' %}
                            <input class="checkbox-principal form-check-input" type="checkbox" id="id-select-soli-check-{{solicitud.id}}" name="select-soli-check" value="{{ solicitud.id }}">
                            {% endif %}
                            {% endif %}
                        </td>
                        {% endwith %}             
                    </tr>                    
                    {% endfor %}
                </tbody>
            </table>
        </form>
        <div class="row pagination mx-3 font-semi-bold font-md ">
            <span class="col step-links">           
                <span class="row current font-xs ms-1 pt-1">         
                {{ page_soli.start_index }} a {{ page_soli.end_index }} de {{ page_soli.paginator.count }} resultados.              
                </span>
            </span>
            <div class="col d-flex justify-content-end">
                <span class="step-links">                                
                    <span class="current font-xs me-1">                                        
                        Página {{ page_soli.number }} / {{ page_soli.paginator.num_pages }}.                    
                    </span>                
                    {% if page_soli.has_previous %}                    
                        <a href="{{ request.path }}?{{ url_base_page }}&page=1" class="fa fa-angle-double-left" aria-hidden="true"></a>
                        <a href="{{ request.path }}?{{ url_base_page }}&page={{ page_soli.previous_page_number }}" class="fa fa-angle-left" aria-hidden="true"> </a>                    
                    {% endif %}
                    {% if page_soli.has_next %}
                        <a href="{{ request.path }}?{{ url_base_page }}&page={{ page_soli.next_page_number }}" class="fa fa-angle-right" aria-hidden="true"> </a>
                        <a href="{{ request.path }}?{{ url_base_page }}&page={{ page_soli.paginator.num_pages }}" class="fa fa-angle-double-right" aria-hidden="true"> </a>
                    {% endif %}                
                </span>
            </div>
        </div>        
    </div>
    <script>
        function enviarFormulario(formularioId, boton) { 
            // Obtener el formulario y el valor del botón
            const formulario = $('#' + formularioId);
            const valorBoton = boton.value;
            const textoBoton = $(boton).text();

            // Establecer el valor del campo oculto
            formulario.find('#id-input-boton-presionado').val(valorBoton);

            // Enviar el formulario                   
            confrimSubmit(formulario, `¿${textoBoton}?`)            
        }

        $(document).ready(function() { 
            $('button.dropdown-toggle.filtro-dropdown').on('click', function (event) {                
                $(this).parent().find('.dropdown-menu').toggleClass('show');
            });
            $('body').on('click', function (e) {                
                if (!$('button.dropdown-toggle.filtro-dropdown').is(e.target) 
                    && $('button.dropdown-toggle.filtro-dropdown').has(e.target).length === 0 
                    && $('.show').has(e.target).length === 0
                ) {
                    $('button.dropdown-toggle.filtro-dropdown').parent().find('.dropdown-menu').removeClass('show');
                } else {                    
                }
            });

            // Cuando cambia el estado del checkbox con id 'id-select-todo-check'
            $('#id-select-todo-check').change(function () {
                // Obtenemos el estado actual del checkbox
                const isChecked = $(this).prop('checked');
                // Asignamos el mismo estado a todos los checkboxes con name 'select-soli-check'
                $('input[name="select-soli-check"]').prop('checked', isChecked);
            });

            //Cuando algun select-soli-check se desactiva tambien se desactiva el select-todo-check
            $('input[name="select-soli-check"]').change(function () {
                // Verificamos si algún checkbox con name 'select-soli-check' está seleccionado
                const anyChecked = $(this).prop('checked');
                console.log(anyChecked)
                // Si no hay ningún checkbox seleccionado, desactivamos el checkbox con id 'id-select-todo-check'
                if (!anyChecked){
                    $('#id-select-todo-check').prop('checked', anyChecked);
                }                
            });
        });       
    </script>
{% endblock body %}