<?php
session_start(); // Iniciar sesión al principio

// 1. Verificación de sesión y obtención del rol
if (!isset($_SESSION['Inicio']) || $_SESSION['Inicio'] !== "Ok" || !isset($_SESSION['Rol'])) {
    // Si no hay sesión válida o no hay rol, redirigir al login
    // Asegúrate de que login.php esté en el directorio padre
    header("Location: ../login.php?m=5"); // m=5 para "acceso no autorizado"
    exit;
}

// 2. Determinar la URL del menú basada en el rol
$urlMenuCorrespondiente = "";
switch ($_SESSION['Rol']) {
    case "Administrativo":
        $urlMenuCorrespondiente = "../MenuAdministrativo.php";
        break;
    case "Titular":
        $urlMenuCorrespondiente = "../MenuTitular.php";
        break;
    case "Pasante":
        $urlMenuCorrespondiente = "../MenuPasante.php";
        break;
    default:
        // Si el rol no es reconocido, redirigir al login 
        header("Location: ../login.php?m=6"); // m=6 para "rol desconocido o sesión inválida"
        exit;
}

// Obtener datos del paciente de la URL
$clave_paciente = isset($_GET['clave_paciente']) ? htmlspecialchars($_GET['clave_paciente']) : '';
$codigo_paciente = isset($_GET['codigo_paciente']) ? htmlspecialchars($_GET['codigo_paciente']) : '';
$nombre_paciente = isset($_GET['nombre_paciente']) ? htmlspecialchars($_GET['nombre_paciente']) : '';
$apellido_paterno_paciente = isset($_GET['apellido_paterno_paciente']) ? htmlspecialchars($_GET['apellido_paterno_paciente']) : '';
$apellido_materno_paciente = isset($_GET['apellido_materno_paciente']) ? htmlspecialchars($_GET['apellido_materno_paciente']) : '';
$fecha_nacimiento_paciente = isset($_GET['fecha_nacimiento_paciente']) ? htmlspecialchars($_GET['fecha_nacimiento_paciente']) : '';
$sexoPaciente = isset($_GET['sexo_paciente']) ? htmlspecialchars($_GET['sexo_paciente']) : '';
$semanasgesta = isset($_GET['semanas_gestacion']) ? htmlspecialchars($_GET['semanas_gestacion']) : '';

?>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Montserrat:wght@700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="./img/UNAM amarillo.png"> 

    <link rel="stylesheet" type="text/css" href="../Css/EstilosUpdateWi.css">
    <title>Sondeo Articulatorio - Ingreso de Datos</title>
     <style>
        .is-invalid { border-color: red !important; }
.auto-filled { background-color: #e9ecef; cursor: not-allowed; }

/* --- AÑADE ESTAS CLASES --- */
.header-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #f0f0f0; }
.main-tittle { margin: 0; padding: 0; border: none; }
.btn-salir { white-space: nowrap; padding: 8px 20px; flex-shrink: 0; font-size: 0.9rem; }
.hidden { display: none; }
.age-fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: flex-end; /* Añadido para alinear mejor */ }.edad-activa { background-color: #e0e8f0; border-color: #0056b3; box-shadow: 0 0 5px rgba(0, 86, 179, 0.3); }
.instruccion-evaluacion { font-size: 0.9em; color: #555; background-color: #f8f9fa; padding: 10px; border-left: 4px solid #007bff; margin-top: 0; margin-bottom: 15px; border-radius: 0 4px 4px 0; }
.instruccion-evaluacion strong { color: #0056b3; }

    </style>
</head>
<body>
    <div class="container">
        <!-- 3. Usar la URL dinámica para el botón Salir -->
        <div class="header-section"> <!-- Contenedor nuevo -->
        <h1 class="main-tittle"> Sondeo </h1>
        <a href="CSondeo.php" class="btn-salir">Volver a la lista</a> 
        </div>

        <!-- El action apunta a ISondeo.php, que procesará el formulario -->
        <form method="GET" action="ISondeo.php" id="myForm">
           <div class="form-section">
    <h2 class="section-tittle">Datos Personales del Paciente</h2>
    <div class="input-grid">
        <!-- Campos ocultos para los cálculos -->
        <input type="hidden" name="clave_paciente" value="<?php echo $clave_paciente; ?>">
        <input type="hidden" id="semanas_gestacion_hidden" value="<?php echo $semanasgesta; ?>">

        <div class="input-box"><label>Código</label><input type="text" value="<?php echo $codigo_paciente; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>Nombre</label><input type="text" value="<?php echo $nombre_paciente; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>A. Paterno</label><input type="text" value="<?php echo $apellido_paterno_paciente; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>A. Materno</label><input type="text" value="<?php echo $apellido_materno_paciente; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>F. Nacimiento</label><input type="date" id="fecha_nacimiento_paciente" value="<?php echo $fecha_nacimiento_paciente; ?>" readonly class="auto-filled"></div>
        <div class="input-box"><label>Semanas Gestación</label><input type="text" value="<?php echo $semanasgesta; ?>" readonly class="auto-filled"></div>
    </div>

    <h2 class="section-tittle" style="margin-top: 20px;">Datos de Evaluación</h2>
    <p class="instruccion-evaluacion">
        <strong>Instrucción:</strong> Elige la fecha de evaluación para calcular las edades y activar el formulario.
    </p>
    <div class="age-fields-grid">
        <div class="input-box">
            <label for="fecha_evaluacion">Fecha de Evaluación</label>
            <input type="date" id="fecha_evaluacion" name="fecha_evaluacion" required class="input-field">
        </div>
        <div class="input-box">
            <label>Edad Cronológica</label>
            <input type="text" placeholder="Seleccione fechas" id="edad" name="edad" readonly class="input-field auto-filled" required>
        </div>
        <div class="input-box">
            <label>Edad Corregida</label>
            <input type="text" placeholder="Cálculo automático" id="edad_corregida" name="edad_corregida" readonly class="input-field auto-filled">
        </div>
        <div class="input-box">
            <label>Condición</label>
            <input type="text" id="condicion_paciente" value="" readonly class="input-field auto-filled">
        </div>
        <div class="input-box">
            <label>Rango de Edad</label>
            <input type="text" id="rango_edad" name="rango_edad" readonly class="input-field auto-filled">
        </div>
    </div>
</div>

            <div class="form-section">
                <h2 class="section-tittle">Resultados Sondeo</h2>

                <div class="highlight-section">
    <div class="input-grid">
        <div class="input-box">
            <label for="sond_art_punt_brutosa">Puntuación bruta</label>
            <input type="text" class="input-field" autocomplete="off" placeholder="Puntaje" maxlength="4" id="sond_art_punt_brutosa" name="sond_art_punt_brutosa" required>
        </div>
    </div>
</div>

<!-- SECCIÓN 1: Fonemas con Retraso -->
<div class="highlight-section">
    <div class="input-box-fullwidth">
        <label for="sond_articul_fonem_con_retras" class="sub-section-tittle">Fonemas con Retraso</label>
        <input type="text" class="input-field" autocomplete="off" placeholder="Click en fonemas o NA" id="sond_articul_fonem_con_retras" name="sond_articul_fonem_con_retras" required>
    </div>
    <div class="fonema-buttons-container">
        <button type="button" class="btn-clear-fonemas" onclick="limpiarInput('sond_articul_fonem_con_retras')">Limpiar</button>
        <div class="fonema-category-buttons"><h4>Vocales</h4>
            <div class="fonema-button" onclick="agregarFonema('/a/', 'sond_articul_fonem_con_retras')">/a/</div>
            <div class="fonema-button" onclick="agregarFonema('/e/', 'sond_articul_fonem_con_retras')">/e/</div>
            <div class="fonema-button" onclick="agregarFonema('/i/', 'sond_articul_fonem_con_retras')">/i/</div>
            <div class="fonema-button" onclick="agregarFonema('/o/', 'sond_articul_fonem_con_retras')">/o/</div>
            <div class="fonema-button" onclick="agregarFonema('/u/', 'sond_articul_fonem_con_retras')">/u/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Oclusivas</h4>
            <div class="fonema-button" onclick="agregarFonema('/p/', 'sond_articul_fonem_con_retras')">/p/</div>
            <div class="fonema-button" onclick="agregarFonema('/b/', 'sond_articul_fonem_con_retras')">/b/</div>
            <div class="fonema-button" onclick="agregarFonema('/t/', 'sond_articul_fonem_con_retras')">/t/</div>
            <div class="fonema-button" onclick="agregarFonema('/d/', 'sond_articul_fonem_con_retras')">/d/</div>
            <div class="fonema-button" onclick="agregarFonema('/k/', 'sond_articul_fonem_con_retras')">/k/</div>
            <div class="fonema-button" onclick="agregarFonema('/g/', 'sond_articul_fonem_con_retras')">/g/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Fricativas</h4>
            <div class="fonema-button" onclick="agregarFonema('/f/', 'sond_articul_fonem_con_retras')">/f/</div>
            <div class="fonema-button" onclick="agregarFonema('/s/', 'sond_articul_fonem_con_retras')">/s/</div>
            <div class="fonema-button" onclick="agregarFonema('/ʝ/', 'sond_articul_fonem_con_retras')">/ʝ/</div>
            <div class="fonema-button" onclick="agregarFonema('/x/', 'sond_articul_fonem_con_retras')">/x/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Nasales</h4>
            <div class="fonema-button" onclick="agregarFonema('/m/', 'sond_articul_fonem_con_retras')">/m/</div>
            <div class="fonema-button" onclick="agregarFonema('/n/', 'sond_articul_fonem_con_retras')">/n/</div>
            <div class="fonema-button" onclick="agregarFonema('/ɲ/', 'sond_articul_fonem_con_retras')">/ɲ/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Líquidas</h4>
            <div class="fonema-button" onclick="agregarFonema('/l/', 'sond_articul_fonem_con_retras')">/l/</div>
            <div class="fonema-button" onclick="agregarFonema('/ɾ/', 'sond_articul_fonem_con_retras')">/ɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/rr/', 'sond_articul_fonem_con_retras')">/rr/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Africadas</h4>
            <div class="fonema-button" onclick="agregarFonema('/tʃ/', 'sond_articul_fonem_con_retras')">/tʃ/</div>
        </div>
    </div>
</div>

<!-- SECCIÓN 2: Subgrupos Consonánticos -->
<div class="highlight-section">
    <div class="input-box-fullwidth">
        <label for="subgrupos_consonanticos" class="sub-section-tittle">Subgrupos Consonánticos</label>
        <input type="text" class="input-field" autocomplete="off" placeholder="Click en grupos o NA" id="subgrupos_consonanticos" name="subgrupos_consonanticos" required>
    </div>
    <div class="fonema-buttons-container">
        <button type="button" class="btn-clear-fonemas" onclick="limpiarInput('subgrupos_consonanticos')">Limpiar</button>
        <div class="fonema-category-buttons"><h4>Grupos /l/</h4>
            <div class="fonema-button" onclick="agregarFonema('/pl/', 'subgrupos_consonanticos')">/pl/</div>
            <div class="fonema-button" onclick="agregarFonema('/bl/', 'subgrupos_consonanticos')">/bl/</div>
            <div class="fonema-button" onclick="agregarFonema('/fl/', 'subgrupos_consonanticos')">/fl/</div>
            <div class="fonema-button" onclick="agregarFonema('/kl/', 'subgrupos_consonanticos')">/kl/</div>
            <div class="fonema-button" onclick="agregarFonema('/gl/', 'subgrupos_consonanticos')">/gl/</div>
        </div>
        <div class="fonema-category-buttons"><h4>Grupos /ɾ/</h4>
            <div class="fonema-button" onclick="agregarFonema('/pɾ/', 'subgrupos_consonanticos')">/pɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/bɾ/', 'subgrupos_consonanticos')">/bɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/fɾ/', 'subgrupos_consonanticos')">/fɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/tɾ/', 'subgrupos_consonanticos')">/tɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/dɾ/', 'subgrupos_consonanticos')">/dɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/kɾ/', 'subgrupos_consonanticos')">/kɾ/</div>
            <div class="fonema-button" onclick="agregarFonema('/gɾ/', 'subgrupos_consonanticos')">/gɾ/</div>
        </div>
    </div>
</div>

<!-- SECCIÓN 3: Diptongos -->
<div class="highlight-section">
    <div class="input-box-fullwidth">
        <label for="subgrupo_diptongos" class="sub-section-tittle">Diptongos</label>
        <input type="text" class="input-field" autocomplete="off" placeholder="Click en diptongos o NA" id="subgrupo_diptongos" name="subgrupo_diptongos" required>
    </div>
    <div class="fonema-buttons-container">
        <button type="button" class="btn-clear-fonemas" onclick="limpiarInput('subgrupo_diptongos')">Limpiar</button>
        <div class="fonema-category-buttons"><h4>Crecientes</h4>
            <div class="fonema-button" onclick="agregarFonema('ua', 'subgrupo_diptongos')">ua</div>
            <div class="fonema-button" onclick="agregarFonema('ue', 'subgrupo_diptongos')">ue</div>
            <div class="fonema-button" onclick="agregarFonema('ie', 'subgrupo_diptongos')">ie</div>
        </div>
        <div class="fonema-category-buttons"><h4>Decrecientes</h4>
            <div class="fonema-button" onclick="agregarFonema('au', 'subgrupo_diptongos')">au</div>
            <div class="fonema-button" onclick="agregarFonema('ei', 'subgrupo_diptongos')">ei</div>
        </div>
    </div>
</div>

<div class="highlight-section">
    <div class="input-box input-box-fullwidth">
        <label for="sond_articu_interpr">Interpretación / Observaciones</label>
        <textarea class="input-field" id="sond_articu_interpr" name="sond_articu_interpr" rows="5" placeholder="Añade aquí las observaciones o la interpretación de la prueba..." required></textarea>
    </div>
</div>
            </div>
            <!-- El input hidden clave_paciente ya está arriba, así que no es necesario aquí de nuevo -->
            <input type="submit" onClick="verificarForm(event);" class="btn-submit" value="Registrar" id="registrar">
        </form>

        <!-- Ajusta la ruta a jQuery si es necesario -->
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="../Jquery/jquery-3.6.0.min.js"></script>


       <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="../Jquery/jquery-3.6.0.min.js"></script>

<script>
    // =====================================================
    // --- FUNCIÓN DE VALIDACIÓN MEJORADA (LA QUE NECESITAS) ---
    // =====================================================
    function setupFieldValidation(selector, regex, maxValue) {
        document.querySelectorAll(selector).forEach(input => {
            input.setAttribute('data-prev-value', input.value);

            // Valida caracteres mientras se escribe
            input.addEventListener('input', e => {
                if (e.target.readOnly) return;
                let valor = e.target.value;
                if (!regex.test(valor)) {
                    e.target.value = e.target.getAttribute('data-prev-value') || '';
                }
                e.target.setAttribute('data-prev-value', e.target.value);
            });

            // Valida el valor máximo al salir del campo
            input.addEventListener('blur', e => {
                const valor = e.target.value;
                if (valor === '' || valor.toUpperCase() === 'NA') return;
                const numValue = parseInt(valor, 10);
                if (!isNaN(numValue) && numValue > maxValue) {
                    const labelText = e.target.labels[0]?.textContent || 'este campo';
                    Swal.fire({
                        icon: 'error',
                        title: 'Valor fuera de rango',
                        text: `El puntaje para "${labelText}" no puede ser mayor a ${maxValue}. Por favor, ingrese un valor válido.`
                    }).then(() => {
                        e.target.value = '';
                        e.target.focus();
                    });
                }
            });
        });
    }

    // =====================================================
    // --- LÓGICA DE CÁLCULO DE EDAD (EXISTENTE) ---
    // =====================================================
    function calculatePreciseAge(startDate, endDate) {
        if (!(startDate instanceof Date) || !(endDate instanceof Date) || isNaN(startDate) || isNaN(endDate)) {
            return { years: 0, months: 0, days: 0, totalMonths: 0 };
        }
        let years = endDate.getFullYear() - startDate.getFullYear();
        let months = endDate.getMonth() - startDate.getMonth();
        let days = endDate.getDate() - startDate.getDate();
        if (days < 0) {
            months--;
            days += new Date(endDate.getFullYear(), endDate.getMonth(), 0).getDate();
        }
        if (months < 0) {
            years--;
            months += 12;
        }
        const totalMonths = (years * 12) + months;
        return { years, months, days, totalMonths };
    }

    function setPatientCondition() {
        const gestWeeksElem = document.getElementById('semanas_gestacion_hidden');
        const conditionElem = document.getElementById('condicion_paciente');
        if (!gestWeeksElem || !conditionElem) return;
        const gestWeeks = parseInt(gestWeeksElem.value, 10);
        if (gestWeeks > 0 && gestWeeks < 37) {
            conditionElem.value = "Prematuro";
        } else if (gestWeeks >= 37) {
            conditionElem.value = "Nacido a término";
        } else {
            conditionElem.value = "No especificado";
        }
    }
    
    function calculateAllAgesAndUpdate_Sondeo() {
        const birthDateElem = document.getElementById('fecha_nacimiento_paciente');
        const evalDateElem = document.getElementById('fecha_evaluacion');
        const gestWeeksElem = document.getElementById('semanas_gestacion_hidden');
        const cronoAgeElem = document.getElementById('edad');
        const correctedAgeElem = document.getElementById('edad_corregida');
        const rangoEdadElem = document.getElementById('rango_edad');
        const formFields = document.querySelectorAll('.form-section:not(:first-child) input, .form-section:not(:first-child) textarea, .form-section:not(:first-child) button');

        cronoAgeElem.value = '';
        correctedAgeElem.value = '';
        rangoEdadElem.value = '';
        cronoAgeElem.classList.remove('edad-activa');
        correctedAgeElem.classList.remove('edad-activa');
        formFields.forEach(field => field.disabled = true);

        if (!birthDateElem.value || !evalDateElem.value) return;
        
        const startDate = new Date(birthDateElem.value);
        const endDate = new Date(evalDateElem.value);
        if (startDate > endDate) {
            Swal.fire({ icon: 'error', title: 'Error en las fechas', text: 'La fecha de nacimiento no puede ser posterior a la de evaluación.' });
            return;
        }

        formFields.forEach(field => field.disabled = false);

        const cronoAge = calculatePreciseAge(startDate, endDate);
        cronoAgeElem.value = `${cronoAge.years}A ${cronoAge.months}M ${cronoAge.days}D`;

        const gestWeeks = parseInt(gestWeeksElem.value, 10);
        const esPrematuro = gestWeeks > 0 && gestWeeks < 37;
        const esMenorDe3Anos = cronoAge.totalMonths < 36;
        
        let edadAUsar = cronoAge;
        let edadActivaElem = cronoAgeElem;

        if (esPrematuro && esMenorDe3Anos) {
            const daysToCorrect = (40 - gestWeeks) * 7;
            let correctedEndDate = new Date(endDate);
            correctedEndDate.setDate(correctedEndDate.getDate() - daysToCorrect);
            if (correctedEndDate >= startDate) {
                const correctedAge = calculatePreciseAge(startDate, correctedEndDate);
                correctedAgeElem.value = `${correctedAge.years}A ${correctedAge.months}M ${correctedAge.days}D`;
                edadAUsar = correctedAge;
                edadActivaElem = correctedAgeElem;
            } else {
                correctedAgeElem.value = 'No aplicable (< 0)';
                edadAUsar.totalMonths = -1;
            }
        } else {
            correctedAgeElem.value = 'No Aplica';
        }
        
        cronoAgeElem.classList.remove('edad-activa');
        edadActivaElem.classList.add('edad-activa');

        const edadEnMeses = edadAUsar.totalMonths;
        if (edadEnMeses >= 30 && edadEnMeses <= 35) {
            rangoEdadElem.value = `${edadAUsar.years}:${edadAUsar.months}`;
            rangoEdadElem.style.borderColor = 'green';
        } else {
            rangoEdadElem.value = "No Aplica"; 
            rangoEdadElem.style.borderColor = 'orange';
            Swal.fire({
                icon: 'warning',
                title: 'Edad Fuera de Rango',
                text: `La edad a usar (${edadEnMeses} meses) está fuera del rango esperado (30-35 meses). El valor se guardará como "No Aplica".`
            });
        }
    }

    // =====================================================
    // --- LÓGICA DE FONEMAS (EXISTENTE) ---
    // =====================================================
    function agregarFonema(fonema, inputId) {
    const inputField = document.getElementById(inputId);
    let currentValue = inputField.value.trim();
    
    if (currentValue.toUpperCase() === 'NA') {
        currentValue = '';
    }
    
    const fonemas = currentValue === '' ? [] : currentValue.split(/, /);
    
    if (!fonemas.includes(fonema)) {
        inputField.value = currentValue === '' ? fonema : currentValue + ', ' + fonema;
    }
}

function limpiarInput(inputId) {
    document.getElementById(inputId).value = '';
}

    // =====================================================
    // --- INICIALIZACIÓN Y EVENTOS ---
    // =====================================================
    document.addEventListener('DOMContentLoaded', function() {
        
        // Aplicamos la validación al campo de puntuación bruta con un máximo de 18
        const numericRegex = /^(|NA|\d*)$/;
        setupFieldValidation('#sond_art_punt_brutosa', numericRegex, 18);

        // códgio de inicialización de edad y condición del paciente
        setPatientCondition();

        document.querySelectorAll('.form-section:not(:first-child) input, .form-section:not(:first-child) textarea, .form-section:not(:first-child) button')
            .forEach(field => field.disabled = true);
        
        document.getElementById('fecha_evaluacion').addEventListener('change', calculateAllAgesAndUpdate_Sondeo);

        const myForm = document.getElementById('myForm');
        myForm.addEventListener('submit', function(event) {
            event.preventDefault(); 
            const requiredFields = myForm.querySelectorAll('[required]:not([disabled])');
            let allValid = true;
            let firstInvalidField = null;
            requiredFields.forEach(field => {
                field.classList.remove('campo-error');
                if (!field.value.trim()) {
                    allValid = false;
                    field.classList.add('campo-error');
                    if (!firstInvalidField) firstInvalidField = field;
                }
            });
            if (!allValid) {
                Swal.fire({
                    icon: 'error',
                    title: 'Campos incompletos',
                    text: 'Por favor, complete todos los campos requeridos.'
                }).then(() => { if (firstInvalidField) firstInvalidField.focus(); });
            } else {
                myForm.submit();
            }
        });
        
        myForm.querySelectorAll('[required]').forEach(input => {
            input.addEventListener('input', () => {
                if (input.value.trim() !== "") input.classList.remove('campo-error');
            });
        });
    });
</script>

<style>
    /* Estilo para resaltar campos con error */
    .campo-error {
        border-color: red !important;
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important;
    }
</style>
    </div>
</body>
</html>