<!doctype html>
<?php
    include('menus.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>We Are Always Ready to Help You. Book An Appointment</h2>
                            <img src="img/section-img.png" alt="#">
                            <p>Lorem ipsum dolor sit amet consectetur adipiscing elit praesent aliquet. pretiumts</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-12">
                        <form class="form" action="#">
                            <div class="row">
                                <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">Tipo Documento</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected ">Tipo Documento</li>
                                                <li data-value="2" class="option">Registro civil de nacimiento</li>
                                                <li data-value="3" class="option">tarjeta de identidad</li>
                                                <li data-value="4" class="option">cédula de ciudadanía</li>
                                                <li data-value="5" class="option">tarjeta de extranjería</li>
                                                <li data-value="6" class="option">cédula de extranjería</li>
                                                <li data-value="7" class="option">NIT</li>
                                                <li data-value="8" class="option">pasaporte</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="documento" type="number" placeholder="Número de documento">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="nombre" type="text" placeholder="Nombres">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="apellido" type="text" placeholder="Apellidos">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input type="text" placeholder="Fecha de Nacimiento" id="datepicker">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="correo" type="email" placeholder="Correo">
                                    </div>
                                </div>
                                <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">Género</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected ">Masculino</li>
                                                <li data-value="2" class="option">Femenino</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="celular" type="text" placeholder="Celular">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="departamento" type="text" placeholder="Departamento">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="ciudad" type="text" placeholder="Ciudad">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="direccion" type="text" placeholder="Dirección">
                                    </div>
                                </div>
                                <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">Tipo de Usuario</span>
                                            <ul class="list" id="tipoUsuario">
                                                <li data-value="1" class="option selected" onclick="cambiarTipoUsuario(1)">Paciente</li>
                                                <li data-value="2" class="option" onclick="cambiarTipoUsuario(2)">Donante de medicamentos</li>
                                                <li data-value="3" class="option" onclick="cambiarTipoUsuario(3)">Especialista</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="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-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input name="direccion" type="password" placeholder="Confirma tu contraseña">
                                    </div>
                                </div>
                                <!-- Campos adicionales que se habilitarán según la selección -->
                                <div class="col-lg-6 col-md-6 col-12">
                                        <div class="form-group" >
                                            <input name="eps" type="text" placeholder="EPS" class="input-info">
                                        </div>
                                    </div>  
                                    <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">Grupo Sanguineo</span>
                                                <ul class="list">
                                                    <li data-value="1" class="option selected ">A+</li>
                                                    <li data-value="2" class="option">A-</li>
                                                    <li data-value="3" class="option">B+</li>
                                                    <li data-value="4" class="option">B-</li>
                                                    <li data-value="5" class="option">AB+</li>
                                                    <li data-value="6" class="option">AB-</li>
                                                    <li data-value="7" class="option">O+</li>
                                                    <li data-value="8" class="option">O-</li>
                                                </ul>
                                            </div>
                                        </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 cambiarTipoUsuario(valor) {
            // Ocultar todos los campos primero
            document.getElementById("infoPaciente").style.display = 'none';
            document.getElementById("infoDonante").style.display = 'none';
            document.getElementById("infoEspecialista").style.display = 'none';

            // Mostrar el campo correspondiente al valor seleccionado
            if (valor === 1) {
                document.getElementById("infoPaciente").style.display = 'block';
            } else if (valor === 2) {
                document.getElementById("infoDonante").style.display = 'block';
            } else if (valor === 3) {
                document.getElementById("infoEspecialista").style.display = 'block';
            }
        }
    </script>
    </body>
</html>