<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<meta charset="ISO-8859-1">
<c:choose>
    <c:when test="${modo=='buscar'}">
        <c:set var="titulo" value="BUSCAR DIRECTORES"/>
    </c:when>
    <c:when test="${modo=='actualizar'}">
        <c:set var="titulo" value="ACTUALIZAR DIRECTORES"/>
    </c:when>
    <c:when test="${modo=='borrar'}">
        <c:set var="titulo" value="BORRAR DIRECTORES"/>
    </c:when>
    <c:when test="${modo=='normal'}">
        <c:set var="titulo" value="LISTAR DIRECTORES"/>
    </c:when>
    <c:otherwise>
        <c:set var="titulo" value="LISTAR DIRECTORES"/>
    </c:otherwise>
</c:choose>

<title>${titulo}</title>     

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/styles/styles.css">

</head>
<body>

<%@ include file="/WEB-INF/view/menu.jsp" %>

<div id="contenido">
    <!-- Mensajes flash -->
    
    <c:if test="${not empty mensaje}">
        <div class="alert alert-success">${mensaje}</div>
    </c:if>
    
    <c:if test="${not empty error}">
        <div class="alert alert-danger">${error}</div>
    </c:if>
    
    <c:url var="linkBuscar" value="/Estudiante/buscar">
        <c:param name="modo" value="buscar"/>
    </c:url>
    
    <c:if test="${modo=='buscar'}">
        <div>
            <form:form action="${linkBuscar}" method="get" modelAttribute="estudianteBusqueda">
                <input type="hidden" name="modo" value="buscar"/>
                
                <label for="radio">Término:</label>
                <div class="radio-group">
                    <div class="radio-option">
                        <form:radiobutton path="tipoBusqueda" value="nombre" id="nombreRadio" checked="true" onclick="toggleAgeRange(false)"/>
                        <span class="custom-radio"></span>
                        <label for="nombreRadio">Nombre</label>
                    </div>
                    
                    
                    <div class="radio-option">
                        <form:radiobutton path="tipoBusqueda" value="edad" id="edadRadio" onclick="toggleAgeRange(true)"/>
                        <span class="custom-radio"></span>
                        <label for="edadRadio">Edad</label>
                    </div>
                </div>
                
                <label for="valor" id="valorLabel">Nombre a buscar:</label>
                <form:input path="valor" id="valor"/>
                
                
                
                <div class="age-range-container" id="ageRangeContainer">
				    <div class="range-slider">
				        <label for="minAge">Rango de edad (4-99 años):</label>
				        
				        <!-- Slider para edad mínima -->
				        <form:input type="range" path="edadMinima" id="minAge" min="4" max="99" 
				                   cssClass="form-control" oninput="updateMinValue(this.value)"
				                   value="${estudianteBusqueda.edadMinima != null ? estudianteBusqueda.edadMinima : 18}"/>
				        
				        <!-- Slider para edad máxima -->
				        <form:input type="range" path="edadMaxima" id="maxAge" min="4" max="99" 
				                   cssClass="form-control" oninput="updateMaxValue(this.value)"
				                   value="${estudianteBusqueda.edadMaxima != null ? estudianteBusqueda.edadMaxima : 65}"/>
				        
				        <div class="range-values">
				            <span>Mínima: <span id="minValue">${estudianteBusqueda.edadMinima != null ? estudianteBusqueda.edadMinima : 18}</span></span>
				            <span>Máxima: <span id="maxValue">${estudianteBusqueda.edadMaxima != null ? estudianteBusqueda.edadMaxima : 65}</span></span>
				        </div>
				    </div>
				</div>
                
                <button type="submit">Buscar</button>
            </form:form>
        </div>
    </c:if>
    
    <div class="clientes-container">
        <div class="cliente-header">
            <span>ID</span>
            <span>Nombre</span>
            <span>Edad</span>
        </div>
        
        <c:forEach var="estudianteVar" items="${listaEstudiantes}">
            <c:url var="linkActualizar" value="/Estudiante/actualizar">
                <c:param name="id" value="${estudianteVar.id}"/>
                <c:param name="modo" value="actualizar"/>
            </c:url>
            
            <c:url var="linkBorrar" value="/Estudiante/borrar">
                <c:param name="id" value="${estudianteVar.id}"/>
            </c:url>
            
            <div class="cliente-row">
                <c:choose>
                    <c:when test="${modo=='normal'}">
                        <span>${estudianteVar.id}</span>
                        <span>${estudianteVar.nombre}</span>
                        <span>${estudianteVar.edad}</span>
                    </c:when>
                    
                    <c:when test="${modo=='actualizar'}">
                        <a href="${linkActualizar}">
                            <span>${estudianteVar.id}</span>
                            <span>${estudianteVar.nombre}</span>
                            <span>${estudianteVar.edad}</span>
                        </a>
                    </c:when>
                    
                    <c:when test="${modo=='borrar'}">
                        <a href="#" onclick="event.preventDefault(); confirmarBorrado('${linkBorrar}', '${fn:escapeXml(estudianteVar.nombre)}')">
                            <span>${estudianteVar.id}</span>
                            <span>${estudianteVar.nombre}</span>
                            <span>${estudianteVar.edad}</span>
                        </a>
                    </c:when>
                    
                    <c:otherwise>
                        <span>${estudianteVar.id}</span>
                        <span>${estudianteVar.nombre}</span>
                        <span>${estudianteVar.edad}</span>
                    </c:otherwise>
                </c:choose>
            </div>
        </c:forEach>
    </div>
</div>

<script>
function confirmarBorrado(url, nombre) {
    Swal.fire({
        title: '¿Confirmar borrado?',
        html: 'Está a punto de borrar al estudiante:<br><b>' + nombre + '</b>',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, borrar',
        cancelButtonText: 'Cancelar',
        allowOutsideClick: false,
        focusCancel: true
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = url;
        }
    });
    return false;
}

function toggleAgeRange(show) {
    const container = document.getElementById('ageRangeContainer');
    const valorInput = document.getElementById('valor');
    
    
    if (show) {
        container.style.display = 'block';
        valorInput.style.display = 'none';
        valorInput.disabled = true;
        
    } else {
        container.style.display = 'none';
        valorInput.style.display = 'block';
        valorInput.disabled = false;
        
    }
}

function updateMinValue(value) {
    const minAgeInput = document.getElementById('minAge');
    const maxAgeInput = document.getElementById('maxAge');
    const minValueDisplay = document.getElementById('minValue');
    const maxValueDisplay = document.getElementById('maxValue');
    const hiddenMinAge = document.getElementById('edadMinima');
    const hiddenMaxAge = document.getElementById('edadMaxima');
    
    // Convertir a número
    const minValue = parseInt(value);
    const maxValue = parseInt(maxAgeInput.value);
    
    // Validar valor mínimo
    if (minValue < 4) {
        minAgeInput.value = 4;
        minValueDisplay.textContent = 4;
        hiddenMinAge.value = 4;
        return;
    }
    
    // Validar que no sea mayor que el máximo
    if (minValue > maxValue) {
        minAgeInput.value = maxValue;
        minValueDisplay.textContent = maxValue;
        hiddenMinAge.value = maxValue;
        return;
    }
    
    // Actualizar valores si todo está correcto
    minValueDisplay.textContent = value;
    hiddenMinAge.value = value;
}

function updateMaxValue(value) {
    const minAgeInput = document.getElementById('minAge');
    const maxAgeInput = document.getElementById('maxAge');
    const minValueDisplay = document.getElementById('minValue');
    const maxValueDisplay = document.getElementById('maxValue');
    const hiddenMinAge = document.getElementById('edadMinima');
    const hiddenMaxAge = document.getElementById('edadMaxima');
    
    // Convertir a número
    const minValue = parseInt(minAgeInput.value);
    const maxValue = parseInt(value);
    
    // Validar valor máximo
    if (maxValue > 99) {
        maxAgeInput.value = 99;
        maxValueDisplay.textContent = 99;
        hiddenMaxAge.value = 99;
        return;
    }
    
    // Validar que no sea menor que el mínimo
    if (maxValue < minValue) {
        maxAgeInput.value = minValue;
        maxValueDisplay.textContent = minValue;
        hiddenMaxAge.value = minValue;
        return;
    }
    
    // Actualizar valores si todo está correcto
    maxValueDisplay.textContent = value;
    hiddenMaxAge.value = value;
}

//Inicializar los valores al cargar la página
document.addEventListener('DOMContentLoaded', function() {
    // Ocultar los sliders inicialmente (porque "Nombre" está seleccionado)
    toggleAgeRange(false);
    
    // Establecer valores iniciales de los sliders
    const minAge = document.getElementById('minAge');
    const maxAge = document.getElementById('maxAge');
    const minValue = document.getElementById('minValue');
    const maxValue = document.getElementById('maxValue');
    
    // Solo establecer si no tienen valor
    if (!minAge.value) minAge.value = 18;
    if (!maxAge.value) maxAge.value = 65;
    if (!minValue.textContent) minValue.textContent = 18;
    if (!maxValue.textContent) maxValue.textContent = 65;
});
</script>

</body>
</html>