<!doctype html>
<?php
    include('menus.php');
    require('conexion.php');
    // Si el parámetro 'mensaje' existe en la URL, mostrar el alert en JavaScript
    if (isset($_GET['mensaje'])) {
        $mensaje = htmlspecialchars($_GET['mensaje']);
        echo "<script>alert('$mensaje');</script>";
    }
?>

<html class="no-js" lang="zxx">
    <?php
        head_1();
    ?>
    <body>
        <?php
            header_1();
        ?>
        <!-- Start Appointment -->
        <section class="appointment">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-title">
                            <h2>Iniciar Sesión</h2>
                            <img src="img/section-img.png" alt="#">
                        </div>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-lg-6 col-md-12 col-12">

                        <form class="form" action="ingresar_usuario.php" method="POST" onsubmit="return validarSeleccion()">
                            <div class="row" style="background-color: #7c2b83; border-radius: 10px;">
                                
                                <div class="col-lg-6 col-md-6 col-12">
                                    <br>
                                    <div class="form-group">
                                        <input name="usuario" id="usuario" type="number" min="1" placeholder="Número de documento" required>
                                    </div>
                                </div>
                                <!-- Campos de Contraseña -->
                                <div class="col-lg-6 col-md-6 col-12">
                                    <br>
                                    <div class="form-group">
                                        <input name="contraseña" id="contraseña" type="password" placeholder="Escribe tu contraseña" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="La contraseña debe contener al menos 8 caracteres, incluyendo un número, una mayúscula y una minúscula." maxlength="20" minlength="8" required>
                                    </div>
                                </div>
                                
                                <div class="col-12 text-center">
                                    <div
                                        class="g-recaptcha d-inline-block"
                                        data-sitekey="6Leu9xUrAAAAANJ34STwboSozizECAVOeN98EXza">
                                    </div>
                                    <br><br>
                                </div>
                                <br><br>
                            </div>
                            <br>
                            <center>
                                <div class="col-lg-5 col-md-4 col-12">
                                    <br>
                                    <div class="form-group">
                                        <div class="button">
                                            <button type="submit" class="btn">Ingresar</button>
                                        </div>
                                    </div>
                                </div>
                            </center>
                        </form>
                    </div>
                    <div class="col-lg-6 col-md-12 ">
                        <div class="appointment-image">
                            <img src="img/contact-img.png" alt="#">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Appointment -->
        <?php
            footer_1();
        ?>

        <script>
            


            function cargarCiudades() {
                var departamento = document.getElementById('selectDepartamento').dataset.value;
                var listaCiudades = document.getElementById('listaCiudades');
                var ciudadesPorDepartamento = {
                    'Amazonas': ['Leticia', 'Puerto Nariño'],
                    'Antioquia': ['Medellín', 'Envigado', 'Bello', 'Rionegro', 'Sabaneta'],
                    'Arauca': ['Arauca', 'Arauquita', 'Saravena'],
                    'Atlántico': ['Barranquilla', 'Soledad', 'Galapa', 'Puerto Colombia'],
                    'Bolívar': ['Cartagena', 'Magangué', 'Turbaco', 'Arjona'],
                    'Boyacá': ['Tunja', 'Duitama', 'Sogamoso'],
                    'Caldas': ['Manizales', 'La Dorada', 'Riosucio'],
                    'Caquetá': ['Florencia', 'Morelia', 'Belén de los Andaquíes'],
                    'Casanare': ['Yopal', 'Aguazul', 'Tauramena'],
                    'Cauca': ['Popayán', 'Santander de Quilichao', 'Silvia'],
                    'Cesar': ['Valledupar', 'Aguachica', 'Bosconia'],
                    'Chocó': ['Quibdó', 'Istmina', 'Condoto'],
                    'Córdoba': ['Montería', 'Cereté', 'Sahagún'],
                    'Cundinamarca': ['Bogotá', 'Soacha', 'Facatativá', 'Zipaquirá'],
                    'Guainía': ['Inírida'],
                    'Guaviare': ['San José del Guaviare'],
                    'Huila': ['Neiva', 'Pitalito', 'Garzón'],
                    'La Guajira': ['Riohacha', 'Maicao', 'Albania'],
                    'Magdalena': ['Santa Marta', 'Ciénaga', 'Aracataca'],
                    'Meta': ['Villavicencio', 'Acacías', 'Granada'],
                    'Nariño': ['Pasto', 'Ipiales', 'Tumaco'],
                    'Norte de Santander': ['Cúcuta', 'Ocaña', 'Pamplona'],
                    'Putumayo': ['Mocoa', 'Puerto Asís', 'Sibundoy'],
                    'Quindío': ['Armenia', 'Montenegro', 'Quimbaya'],
                    'Risaralda': ['Pereira', 'Dosquebradas', 'Santa Rosa de Cabal'],
                    'San Andrés y Providencia': ['San Andrés'],
                    'Santander': ['Bucaramanga', 'Floridablanca', 'Girón'],
                    'Sucre': ['Sincelejo', 'Corozal', 'San Marcos'],
                    'Tolima': ['Ibagué', 'Espinal', 'Honda'],
                    'Valle del Cauca': ['Cali', 'Palmira', 'Buga'],
                    'Vaupés': ['Mitú'],
                    'Vichada': ['Puerto Carreño', 'La Primavera']
                };

                // Limpiar la lista actual de ciudades
                listaCiudades.innerHTML = '<li data-value="" class="option">Seleccione una Ciudad</li>';

                // Si hay un departamento seleccionado y tiene ciudades asociadas
                if (departamento && ciudadesPorDepartamento[departamento]) {
                    ciudadesPorDepartamento[departamento].forEach(function(ciudad) {
                        var li = document.createElement('li');
                        li.dataset.value = ciudad;
                        li.className = 'option';
                        li.innerText = ciudad;
                        li.onclick = function() {
                            selectCiudad(ciudad);
                        };
                        listaCiudades.appendChild(li);
                    });
                }
            }

           

            function validarSeleccion() {
                var tipoDocumento = document.getElementById('tipo_documento').value;
                var documento = document.getElementById('documento').value;
                var nombres = document.getElementById('nombres').value;
                var apellidos = document.getElementById('apellidos').value;
                var fecha_nacimiento = document.getElementById('fecha_nacimiento').value;
                var correo = document.getElementById('correo').value;
                var genero = document.getElementById('generoValue').value;
                var celular = document.getElementById('celular').value;
                var departamento = document.getElementById('selectDepartamento').dataset.value;
                var ciudad = document.getElementById('selectCiudad').dataset.value;
                var direccion = document.getElementById('direccion').value;
                var tipoUsuario = document.getElementById('tipoUsuario').textContent;
                var contraseña = document.getElementById('contraseña').value;
                var contraseña1 = document.getElementById('contraseña1').value;
                var eps = document.getElementById('eps').value;
                var grupo_sanguineo = document.getElementById('grupo_sanguineo').value;
                var diagnostico = document.getElementById('diagnostico').value;              
                var tratamiento = document.getElementById('tratamiento1').value;
                //console.log('tratamiento:', tratamiento);
                var especialidad = document.getElementById('especialidad').value;
                var experiencia = document.getElementById('experiencia').value;

                if (!tipoDocumento) {
                    alert('Por favor, seleccione un tipo de documento.');
                    return false; // No enviar el formulario
                }
                if (!documento) {
                    alert('Por favor, digite el número de documento.');
                    return false; // No enviar el formulario
                }
                if (!nombres) {
                    alert('Por favor, digite los nombres.');
                    return false; // No enviar el formulario
                }
                if (!apellidos) {
                    alert('Por favor, digite los apellidos.');
                    return false; // No enviar el formulario
                }
                if (!fecha_nacimiento) {
                    alert('Por favor, digite la fecha de nacimiento.');
                    return false; // No enviar el formulario
                }
                if (!correo) {
                    alert('Por favor, digite el correo.');
                    return false; // No enviar el formulario
                }
                if (!genero) {
                    alert('Por favor, seleccione un género.');
                    return false; // No enviar el formulario si genero está vacío
                }
                if (!celular) {
                    alert('Por favor, digite el celular.');
                    return false; // No enviar el formulario
                }
                if (!departamento) {
                    alert('Por favor, seleccione un departamento.');
                    return false;
                }
                if(!ciudad){
                    alert('Por favor, selecciones una ciudad.');
                    return false;
                }
                if (!direccion) {
                    alert('Por favor, digite la direccion.');
                    return false; // No enviar el formulario
                }
                if(!tipoUsuario){
                    alert('Por favor, seleccione un tipo de usuario.');
                    return false;
                }
                if (!contraseña) {
                    alert('Por favor, digite la contraseña.');
                    return false; // No enviar el formulario
                }
                if (!contraseña1) {
                    alert('Por favor, digite la confirmación de la contraseña.');
                    return false; // No enviar el formulario
                }
                if (!validarFormulario()) {
                    return false; // No enviar el formulario si la validación de la contraseña falla
                }
                // Validaciones específicas según el tipo de usuario
                if (tipoUsuario === 'Paciente') { // Paciente
                    if (!eps) {
                        alert('Por favor, seleccione una EPS.');
                        return false;
                    }
                    if (!grupo_sanguineo) {
                        alert('Por favor, seleccione un grupo sanguíneo.');
                        return false;
                    }
                    if (!diagnostico) {
                        alert('Por favor, seleccione un diagnóstico.');
                        return false;
                    }
                    if (!tratamiento) {
                        alert('Por favor, digite su tratamiento actual.');
                        return false;
                    }
                } else if (tipoUsuario === 'Especialista') { // Especialista
                    if (!especialidad) {
                        alert('Por favor, seleccione la especialidad.');
                        return false;
                    }
                    if (!experiencia) {
                        alert('Por favor, seleccione la experiencia.');
                        return false;
                    }
                }

                encriptarContraseña();

                return true;// Permitir el envío del formulario
            }


            function selectTipoDocumento(value, text) {
                document.getElementById('tipo_documento').value = text;
                var displaySpan = document.getElementById('tipo_documento');
                displaySpan.textContent = text; // Actualiza el texto mostrado al usuario
            }
            function selectGenero(value, text) {
                document.getElementById('generoValue').value = text;
                var displaySpan = document.getElementById('genero');
                displaySpan.textContent = text; // Actualiza el texto mostrado al usuario
            }
            function selectDepartamento(value, text) {
                document.getElementById('departamentoValue').value = text;
                var selectDepartamento = document.getElementById('selectDepartamento');
                selectDepartamento.querySelector('.current').innerText = text;
                selectDepartamento.dataset.value = value;
                cargarCiudades();
                //document.getElementById('departamentoValue').value = text;
            }
             function selectCiudad(value) {
                document.getElementById('ciudadValue').value = value;
                var selectCiudad = document.getElementById('selectCiudad');
                selectCiudad.querySelector('.current').innerText = value;
                selectCiudad.dataset.value = value;
            }

            function selectGenero(value, text) {
                document.getElementById('generoValue').value = text;
                var displaySpan = document.getElementById('genero');
                displaySpan.textContent = text; // Actualiza el texto mostrado al usuario
            }

            function cambiarTipoUsuario(value, text) {
                document.getElementById('tipoUsuario').value = text;
                var displaySpan = document.getElementById('tipoUsuario');
                displaySpan.textContent = text; // Actualiza el texto mostrado al usuario
            }
            function selectEPS(value, text) {
                document.getElementById('eps').value = text;
                var displaySpan = document.getElementById('eps');
                displaySpan.textContent = text; // Actualiza el texto mostrado al usuario
            }
             function grupo_sanguineo(value, text) {
                document.getElementById('grupo_sanguineo').value = text;
                var displaySpan = document.getElementById('grupo_sanguineo');
                displaySpan.textContent = text; // Actualiza el texto mostrado al usuario
            }
            function selectDiagnostico(value, text) {
                document.getElementById('diagnostico').value = text;
                var displaySpan = document.getElementById('diagnostico');
                displaySpan.textContent = text; // Actualiza el texto mostrado al usuario
            }
            function selectEspecialidad(value, text) {
                document.getElementById('especialidad').value = text;
                var displaySpan = document.getElementById('especialidad');
                displaySpan.textContent = text; // Actualiza el texto mostrado al usuario
            }
            function selectExperiencia(value, text) {
                document.getElementById('experiencia').value = text;
                var displaySpan = document.getElementById('experiencia');
                displaySpan.textContent = text; // Actualiza el texto mostrado al usuario
            }
            document.addEventListener('DOMContentLoaded', function() {

                // Función para manejar los cambios en el tipo de usuario
                function cambiarTipoUsuario(value, text) {
                    


                    var inputEPS = document.getElementById('inputEPS');
                    var grupoSanguineo = document.getElementById('grupoSanguineo');
                    var diagnostico = document.getElementById('Diagnostico');
                    var tratamiento = document.getElementById('tratamiento');
                    var especialidad = document.getElementById('Especialidad');
                    var experiencia = document.getElementById('Experiencia');


                    // Ocultar ambos campos por defecto
                    inputEPS.style.display = 'none';
                    grupoSanguineo.style.display = 'none';
                    diagnostico.style.display = 'none';
                    tratamiento.style.display = 'none';
                    especialidad.style.display = 'none';
                    experiencia.style.display = 'none';

                    // Si el valor es '1', que corresponde a "Paciente"
                    if (value === '1') {
                        inputEPS.style.display = 'block';  // Mostrar el campo EPS
                        grupoSanguineo.style.display = 'block';  // Mostrar la lista de grupo sanguíneo
                        diagnostico.style.display = 'block';
                        tratamiento.style.display = 'block';
                    } else if (value === '2') {// Si el valor es '2', que corresponde a "Especialista"
                        especialidad.style.display = 'block';
                        experiencia.style.display = 'block';
                    }
                } 

                // Añadir manejadores de evento a cada opción de tipo de usuario
                var options = document.querySelectorAll('#tipoUsuario .option');
                options.forEach(function(option) {
                    option.addEventListener('click', function() {
                        cambiarTipoUsuario(this.getAttribute('data-value'));
                    });
                });
                // Manejar placeholder del campo de fecha
                var dateInput = document.getElementById('fecha_nacimiento');
                if (!dateInput.value) {
                    dateInput.classList.add('hidden-placeholder');
                }
                dateInput.addEventListener('input', function() {
                    if (this.value) {
                        this.classList.remove('hidden-placeholder');
                    } else {
                        this.classList.add('hidden-placeholder');
                    }
                });



            });
            function validarFormulario() {
                var contraseña = document.getElementById('contraseña').value;
                var contraseña1 = document.getElementById('contraseña1').value;

                if (contraseña !== contraseña1) {
                    alert('Las contraseñas no coinciden.');
                    return false;
                }

                // Encriptar la contraseña antes de enviar el formulario
                //var contraseñaEncriptada = btoa(contraseña); // Ejemplo básico de encriptación. Usar un método más seguro en producción.
                //document.getElementById('contraseña').value = contraseñaEncriptada;
                //document.getElementById('contraseña1').value = contraseñaEncriptada;

                return true;
            }
            function encriptarContraseña() {
                var contraseña = document.getElementById('contraseña').value;
                

                

                // Encriptar la contraseña antes de enviar el formulario
                var contraseñaEncriptada = btoa(contraseña); // Ejemplo básico de encriptación. Usar un método más seguro en producción.
                document.getElementById('contraseña').value = contraseñaEncriptada;
                return true;
            }

            $(document).ready(function() {
                $('select').niceSelect();
            });
        </script>  
    </body>
</html>