<!doctype html>
<?php
    include('menus.php');
    require('conexion.php');
?>

<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>Únete a Nosotros</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="insertar_usuario.php" method="POST" onsubmit="return validarSeleccion()">
                            <div class="row">
                                <input type="hidden" id="tipo_documento" name="tipo_documento" value="">
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current" id="tipo_documento">Tipo Documento</span>
                                            <ul class="list">
                                                <li data-value="1" class="option" onclick="selectTipoDocumento(1, 'Registro Civil de Nacimiento')">Registro Civil de Nacimiento</li>
                                                <li data-value="2" class="option" onclick="selectTipoDocumento(2, 'Tarjeta de Identidad')">Tarjeta de Identidad</li>
                                                <li data-value="3" class="option" onclick="selectTipoDocumento(3, 'Cédula de Ciudadanía')">Cédula de Ciudadanía</li>
                                                <li data-value="4" class="option" onclick="selectTipoDocumento(4, 'Tarjeta de Extranjería')">Tarjeta de Extranjería</li>
                                                <li data-value="5" class="option" onclick="selectTipoDocumento(5, 'Cédula de Extranjería')">Cédula de Extranjería</li>
                                                <li data-value="6" class="option" onclick="selectTipoDocumento(6, 'NIT')">NIT</li>
                                                <li data-value="7" class="option" onclick="selectTipoDocumento(7, 'Pasaporte')">Pasaporte</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="documento" id="documento" type="number" min="1" placeholder="Número de documento">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="nombres" id="nombres" type="text" placeholder="Nombres">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="apellidos" id="apellidos" type="text" placeholder="Apellidos">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group placeholder-container">
                                        <input name="fecha_nacimiento" type="date" id="fecha_nacimiento">
                                        <span class="placeholder-label">Fecha de Nacimiento</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="correo" id="correo" type="email" placeholder="Correo">

                                    </div>
                                </div>
                                <input type="hidden" id="generoValue" name="genero" value="">
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current" id="genero">Género</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected" onclick="selectGenero(1, 'Masculino')">Masculino</li>
                                                <li data-value="2" class="option" onclick="selectGenero(2, 'Femenino')">Femenino</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="celular" id="celular" type="number" placeholder="Celular" maxlength="10" min="3000000000" max="3299999999">
                                    </div>
                                </div>
                                <input type="hidden" id="departamentoValue" name="departamento" value="">
                                <div class="col-lg-6 col-md-6 col-12">
                                <div class="form-group">
                                    <div class="nice-select form-control wide" id="selectDepartamento" tabindex="0">
                                        <span class="current" id="departamento">Departamento</span>
                                        
                                        <ul class="list">
                                            <li data-value="" class="option" onclick="selectDepartamento('', 'Seleccione un Departamento')">Seleccione un Departamento</li>
                                            <li data-value="Amazonas" class="option" onclick="selectDepartamento('Amazonas', 'Amazonas')">Amazonas</li>
                                            <li data-value="Antioquia" class="option" onclick="selectDepartamento('Antioquia', 'Antioquia')">Antioquia</li>
                                            <li data-value="Arauca" class="option" onclick="selectDepartamento('Arauca', 'Arauca')">Arauca</li>
                                            <li data-value="Atlántico" class="option" onclick="selectDepartamento('Atlántico', 'Atlántico')">Atlántico</li>
                                            <li data-value="Bolívar" class="option" onclick="selectDepartamento('Bolívar', 'Bolívar')">Bolívar</li>
                                            <li data-value="Boyacá" class="option" onclick="selectDepartamento('Boyacá', 'Boyacá')">Boyacá</li>
                                            <li data-value="Caldas" class="option" onclick="selectDepartamento('Caldas', 'Caldas')">Caldas</li>
                                            <li data-value="Caquetá" class="option" onclick="selectDepartamento('Caquetá', 'Caquetá')">Caquetá</li>
                                            <li data-value="Casanare" class="option" onclick="selectDepartamento('Casanare', 'Casanare')">Casanare</li>
                                            <li data-value="Cauca" class="option" onclick="selectDepartamento('Cauca', 'Cauca')">Cauca</li>
                                            <li data-value="Cesar" class="option" onclick="selectDepartamento('Cesar', 'Cesar')">Cesar</li>
                                            <li data-value="Chocó" class="option" onclick="selectDepartamento('Chocó', 'Chocó')">Chocó</li>
                                            <li data-value="Córdoba" class="option" onclick="selectDepartamento('Córdoba', 'Córdoba')">Córdoba</li>
                                            <li data-value="Cundinamarca" class="option" onclick="selectDepartamento('Cundinamarca', 'Cundinamarca')">Cundinamarca</li>
                                            <li data-value="Guainía" class="option" onclick="selectDepartamento('Guainía', 'Guainía')">Guainía</li>
                                            <li data-value="Guaviare" class="option" onclick="selectDepartamento('Guaviare', 'Guaviare')">Guaviare</li>
                                            <li data-value="Huila" class="option" onclick="selectDepartamento('Huila', 'Huila')">Huila</li>
                                            <li data-value="La Guajira" class="option" onclick="selectDepartamento('La Guajira', 'La Guajira')">La Guajira</li>
                                            <li data-value="Magdalena" class="option" onclick="selectDepartamento('Magdalena', 'Magdalena')">Magdalena</li>
                                            <li data-value="Meta" class="option" onclick="selectDepartamento('Meta', 'Meta')">Meta</li>
                                            <li data-value="Nariño" class="option" onclick="selectDepartamento('Nariño', 'Nariño')">Nariño</li>
                                            <li data-value="Norte de Santander" class="option" onclick="selectDepartamento('Norte de Santander', 'Norte de Santander')">Norte de Santander</li>
                                            <li data-value="Putumayo" class="option" onclick="selectDepartamento('Putumayo', 'Putumayo')">Putumayo</li>
                                            <li data-value="Quindío" class="option" onclick="selectDepartamento('Quindío', 'Quindío')">Quindío</li>
                                            <li data-value="Risaralda" class="option" onclick="selectDepartamento('Risaralda', 'Risaralda')">Risaralda</li>
                                            <li data-value="San Andrés y Providencia" class="option" onclick="selectDepartamento('San Andrés y Providencia', 'San Andrés y Providencia')">San Andrés y Providencia</li>
                                            <li data-value="Santander" class="option" onclick="selectDepartamento('Santander', 'Santander')">Santander</li>
                                            <li data-value="Sucre" class="option" onclick="selectDepartamento('Sucre', 'Sucre')">Sucre</li>
                                            <li data-value="Tolima" class="option" onclick="selectDepartamento('Tolima', 'Tolima')">Tolima</li>
                                            <li data-value="Valle del Cauca" class="option" onclick="selectDepartamento('Valle del Cauca', 'Valle del Cauca')">Valle del Cauca</li>
                                            <li data-value="Vaupés" class="option" onclick="selectDepartamento('Vaupés', 'Vaupés')">Vaupés</li>
                                            <li data-value="Vichada" class="option" onclick="selectDepartamento('Vichada', 'Vichada')">Vichada</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="ciudadValue" name="ciudad" value="">
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="form-group">
                                    
                                    <div class="nice-select form-control wide" id="selectCiudad" tabindex="0">
                                        <span class="current" id="ciudad">Ciudad</span>
                                        <ul class="list" id="listaCiudades">
                                            <li data-value="" class="option">Seleccione una Ciudad</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>


                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="direccion" id="direccion" type="text" placeholder="Dirección">
                                    </div>
                                </div>

                                <input type="hidden" id="tipoUsuario" name="tipoUsuario" value="">
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current" id="tipoUsuario1">Tipo de Usuario</span>
                                            <ul class="list" id="tipoUsuario">
                                                <li data-value="1" class="option selected" onclick="cambiarTipoUsuario(1, 'Paciente')">Paciente</li>
                                                <li data-value="2" class="option" onclick="cambiarTipoUsuario(2, 'Especialista')">Especialista</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- Campos de Contraseña -->
                                <div class="col-lg-6 col-md-6 col-12">
                                    <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">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="contraseña1" id="contraseña1" type="password" placeholder="Confirma 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">
                                    </div>
                                </div>
                                <!-- Campos adicionales que se habilitarán según la selección de paciente-->
                                <input type="hidden" id="eps" name="eps" value="">
                                <div class="col-lg-6 col-md-6 col-12"> 
                                    <div class="form-group" id="inputEPS" style="display: none;">
                                        <h6>Datos del Paciente</h6>
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current">EPS</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected" onclick="selectEPS(1, 'Salud Total EPS')">Salud Total EPS</li>
                                                <li data-value="2" class="option" onclick="selectEPS(2, 'Compensar EPS')">Compensar EPS</li>
                                                <li data-value="3" class="option" onclick="selectEPS(3, 'Sanitas EPS')">Sanitas EPS</li>
                                                <li data-value="4" class="option" onclick="selectEPS(4, 'Coomeva EPS')">Coomeva EPS</li>
                                                <li data-value="5" class="option" onclick="selectEPS(5, 'Famisanar EPS')">Famisanar EPS</li>
                                                <li data-value="6" class="option" onclick="selectEPS(6, 'SURA EPS')">SURA EPS</li>
                                                <li data-value="7" class="option" onclick="selectEPS(7, 'Nueva EPS')">Nueva EPS</li>
                                                <li data-value="8" class="option" onclick="selectEPS(8, 'Aliansalud EPS')">Aliansalud EPS</li>
                                                <li data-value="9" class="option" onclick="selectEPS(9, 'SaludVida EPS')">SaludVida EPS</li>
                                                <li data-value="10" class="option" onclick="selectEPS(10, 'Medimás EPS')">Medimás EPS</li>
                                                <li data-value="11" class="option" onclick="selectEPS(11, 'Capital Salud EPS-S')">Capital Salud EPS-S</li>
                                                <li data-value="12" class="option" onclick="selectEPS(12, 'Convida EPS')">Convida EPS</li>
                                                <li data-value="13" class="option" onclick="selectEPS(13, 'Savia Salud EPS-S')">Savia Salud EPS-S</li>
                                                <li data-value="14" class="option" onclick="selectEPS(14, 'Asmet Salud EPS-S')">Asmet Salud EPS-S</li>
                                                <li data-value="15" class="option" onclick="selectEPS(15, 'Comfachocó EPS-S')">Comfachocó EPS-S</li>
                                                <li data-value="16" class="option" onclick="selectEPS(16, 'Cafam EPS-S')">Cafam EPS-S</li>
                                                <li data-value="17" class="option" onclick="selectEPS(17, 'Comparta EPS-S')">Comparta EPS-S</li>
                                                <li data-value="18" class="option" onclick="selectEPS(18, 'Coosalud EPS-S')">Coosalud EPS-S</li>
                                                <li data-value="19" class="option" onclick="selectEPS(19, 'Mutual Ser EPS-S')">Mutual Ser EPS-S</li>
                                                <li data-value="20" class="option" onclick="selectEPS(20, 'Anas Wayuu EPSI')">Anas Wayuu EPSI</li>
                                                <li data-value="21" class="option" onclick="selectEPS(21, 'Mallamas EPSI')">Mallamas EPSI</li>
                                                <li data-value="22" class="option" onclick="selectEPS(22, 'Pijaos Salud EPSI')">Pijaos Salud EPSI</li>
                                                <li data-value="23" class="option" onclick="selectEPS(23, 'Manexka EPSI')">Manexka EPSI</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" id="grupo_sanguineo" name="grupo_sanguineo" value="">
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group" id="grupoSanguineo" style="display: none;">
                                        <h6>‎ </h6>
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current">Grupo Sanguineo</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected" onclick="grupo_sanguineo(1, 'A+')">A+</li>
                                                <li data-value="2" class="option" onclick="grupo_sanguineo(2, 'A-')">A-</li>
                                                <li data-value="3" class="option" onclick="grupo_sanguineo(3, 'B+')">B+</li>
                                                <li data-value="4" class="option" onclick="grupo_sanguineo(4, 'B-')">B-</li>
                                                <li data-value="5" class="option" onclick="grupo_sanguineo(5, 'AB+')">AB+</li>
                                                <li data-value="6" class="option" onclick="grupo_sanguineo(6, 'AB-')">AB-</li>
                                                <li data-value="7" class="option" onclick="grupo_sanguineo(7, 'O+')">O+</li>
                                                <li data-value="8" class="option" onclick="grupo_sanguineo(8, 'O-')">O-</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div> 
                                <input type="hidden" id="diagnostico" name="diagnostico" value="">
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group" id="Diagnostico" style="display: none;">
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current">Diagnóstico</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected " onclick="selectDiagnostico(1, 'Lupus Eritematoso Sistémico')">Lupus Eritematoso Sistémico</li>
                                                <li data-value="2" class="option" onclick="selectDiagnostico(2, 'Lupus Eritematoso Cutáneo')">Lupus Eritematoso Cutáneo</li>
                                                <li data-value="3" class="option" onclick="selectDiagnostico(3, 'Lupus Inducido por Medicamentos')">Lupus Inducido por Medicamentos</li>
                                                <li data-value="4" class="option" onclick="selectDiagnostico(4, 'Lupus Neonatal')">Lupus Neonatal</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div> 
                                <div class="col-lg-12 col-md-12 col-12">
                                    <div class="form-group" id="tratamiento" style="display: none;">
                                        <textarea name="tratamiento" id="tratamiento1" placeholder="Tratamiento Actual"></textarea>
                                    </div>
                                </div>   
                                <!-- Campos adicionales que se habilitarán según la selección de especiaslista -->
                                <input type="hidden" id="especialidad" name="especialidad" value="">
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group" id="Especialidad" style="display: none;">
                                         <h6>Datos del Especialista</h6>
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current">Especialidad</span>
                                            <ul class="list">
                                                <li data-value="1" class="option" onclick="selectEspecialidad(1, 'Alergología/Inmunología')">Alergología/Inmunología</li>
                                                <li data-value="2" class="option" onclick="selectEspecialidad(2, 'Anestesiología')">Anestesiología</li>
                                                <li data-value="3" class="option" onclick="selectEspecialidad(3, 'Cardiología')">Cardiología</li>
                                                <li data-value="4" class="option" onclick="selectEspecialidad(4, 'Cirugía General')">Cirugía General</li>
                                                <li data-value="5" class="option" onclick="selectEspecialidad(5, 'Cirugía Plástica')">Cirugía Plástica</li>
                                                <li data-value="6" class="option" onclick="selectEspecialidad(6, 'Dermatología')">Dermatología</li>
                                                <li data-value="7" class="option" onclick="selectEspecialidad(7, 'Endocrinología')">Endocrinología</li>
                                                <li data-value="8" class="option" onclick="selectEspecialidad(8, 'Gastroenterología')">Gastroenterología</li>
                                                <li data-value="9" class="option" onclick="selectEspecialidad(9, 'Geriatría')">Geriatría</li>
                                                <li data-value="10" class="option" onclick="selectEspecialidad(10, 'Ginecología y Obstetricia')">Ginecología y Obstetricia</li>
                                                <li data-value="11" class="option" onclick="selectEspecialidad(11, 'Hematología')">Hematología</li>
                                                <li data-value="12" class="option" onclick="selectEspecialidad(12, 'Infectología')">Infectología</li>
                                                <li data-value="13" class="option" onclick="selectEspecialidad(13, 'Medicina de Emergencia')">Medicina de Emergencia</li>
                                                <li data-value="14" class="option" onclick="selectEspecialidad(14, 'Medicina Familiar y Comunitaria')">Medicina Familiar y Comunitaria</li>
                                                <li data-value="15" class="option" onclick="selectEspecialidad(15, 'Medicina Interna')">Medicina Interna</li>
                                                <li data-value="16" class="option" onclick="selectEspecialidad(16, 'Nefrología')">Nefrología</li>
                                                <li data-value="17" class="option" onclick="selectEspecialidad(17, 'Neumología')">Neumología</li>
                                                <li data-value="18" class="option" onclick="selectEspecialidad(18, 'Neurocirugía')">Neurocirugía</li>
                                                <li data-value="19" class="option" onclick="selectEspecialidad(19, 'Neurología')">Neurología</li>
                                                <li data-value="20" class="option" onclick="selectEspecialidad(20, 'Oftalmología')">Oftalmología</li>
                                                <li data-value="21" class="option" onclick="selectEspecialidad(21, 'Oncología')">Oncología</li>
                                                <li data-value="22" class="option" onclick="selectEspecialidad(22, 'Ortopedia')">Ortopedia</li>
                                                <li data-value="23" class="option" onclick="selectEspecialidad(23, 'Otorrinolaringología')">Otorrinolaringología</li>
                                                <li data-value="24" class="option" onclick="selectEspecialidad(24, 'Pediatría')">Pediatría</li>
                                                <li data-value="25" class="option" onclick="selectEspecialidad(25, 'Psiquiatría')">Psiquiatría</li>
                                                <li data-value="26" class="option selected" onclick="selectEspecialidad(26, 'Reumatología')">Reumatología</li>
                                                <li data-value="27" class="option" onclick="selectEspecialidad(27, 'Urología')">Urología</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div> 
                                <input type="hidden" id="experiencia" name="experiencia" value=""> 
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group" id="Experiencia" style="display: none;">
                                         <h6>‎ </h6>
                                         <h6>‎ </h6>
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current">Experiancia</span>
                                            <ul class="list">
                                                <li data-value="1" class="option" onclick="selectExperiencia(1, '0-5 años')">0-5 años</li>
                                                <li data-value="2" class="option" onclick="selectExperiencia(2, '6-10 años')">6-10 años</li>
                                                <li data-value="3" class="option" onclick="selectExperiencia(3, '11-15 años')">11-15 años</li>
                                                <li data-value="4" class="option" onclick="selectExperiencia(4, 'Más de 15 años')">Más de 15 años</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>    
                            </div>
                            <div class="row">
                                <div class="col-lg-5 col-md-4 col-12">
                                    <div class="form-group">
                                        <div class="button">
                                            <button type="submit" class="btn">Registrar </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-7 col-md-8 col-12">
                                    <p>( We will be confirm by an Text Message )</p>
                                </div>
                            </div>
                        </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>