<?php
session_start();

if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
    header('Location: index.php');
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mexicana de Aviación</title>

    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="arpan.com.mx">
    <meta name="description" content="">

    <!-- Dark mode -->
    <script src="assets/js/darkmode.js"></script>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="assets/images/favicon/favicon-96x96.png" sizes="96x96"/>
    <link rel="icon" type="image/svg+xml" href="assets/images/favicon/favicon.svg"/>
    <link rel="shortcut icon" href="assets/images/favicon/favicon.ico"/>
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png"/>
    <meta name="apple-mobile-web-app-title" content="Mexicana"/>
    <link rel="manifest" href="assets/images/favicon/site.webmanifest"/>

    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap">

    <!-- Plugins CSS -->
    <link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

    <!-- Theme CSS -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

</head>

<body class="dashboard">

<!-- Header START -->
<?php
include 'components/header.php';
?>
<!-- Header END -->

<!-- **************** MAIN CONTENT START **************** -->
<main>

    <!-- =======================
    Content START -->
    <section class="pt-3">
        <div class="container">
            <div class="row">

                <!-- Sidebar START -->
                <?php
                include 'components/sidebar.php';
                ?>
                <!-- Sidebar END -->

                <!-- Main content START -->
                <div class="col-lg-8 col-xl-9">

                    <!-- Offcanvas menu button -->
                    <div class="d-grid mb-0 d-lg-none w-100">
                        <button class="btn btn-primary mb-4" type="button" data-bs-toggle="offcanvas"
                                data-bs-target="#offcanvasSidebar" aria-controls="offcanvasSidebar">
                            <i class="fas fa-sliders-h"></i> Menu
                        </button>
                    </div>

                    <div class="vstack gap-4">
                        <!-- Verified message -->
                        <div class="bg-light rounded p-3">
                            <!-- Progress bar -->
                            <div class="overflow-hidden">
                                <h6>Completa tu Perfil</h6>
                                <div class="progress progress-sm bg-success bg-opacity-10">
                                    <div class="progress-bar bg-success aos" role="progressbar" data-aos="slide-right"
                                         data-aos-delay="200" data-aos-duration="1000" data-aos-easing="ease-in-out"
                                         style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                                        <span class="progress-percent-simple h6 fw-light ms-auto">85%</span>
                                    </div>
                                </div>
                                <p class="mb-0">¡Aprovecha al máximo su reserva añadiendo los detalles restantes!</p>
                            </div>
                            <!-- Content -->
                            <div class="bg-body rounded p-3 mt-3">
                                <ul class="list-inline hstack flex-wrap gap-2 justify-content-between mb-0">
                                    <li class="list-inline-item h6 fw-normal mb-0"><a href="#"><i
                                                    class="bi bi-check-circle-fill text-success me-2"></i>Correo
                                            Verificado</a>
                                    </li>
                                    <li class="list-inline-item h6 fw-normal mb-0"><a href="#"><i
                                                    class="bi bi-check-circle-fill text-success me-2"></i>Teléfono
                                            Verificado</a></li>
                                    <li class="list-inline-item h6 fw-normal mb-0"><a href="#" class="text-primary"><i
                                                    class="bi bi-plus-circle-fill me-2"></i>Completa Información Básica</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- Personal info START -->
                        <div class="card border">
                            <!-- Card header -->
                            <div class="card-header border-bottom">
                                <h4 class="card-header-title">Información Personal</h4>
                            </div>

                            <!-- Card body START -->
                            <div class="card-body">
                                <!-- Form START -->
                                <form class="row g-3">
                                    <!-- Profile photo -->
                                    <div class="col-12">
                                        <label class="form-label">Actualiza tu foto de perfil <span
                                                    class="text-danger">*</span></label>
                                        <div class="d-flex align-items-center">
                                            <label class="position-relative me-4" for="uploadfile-1"
                                                   title="Replace this pic">
                                                <!-- Avatar place holder -->
                                                <span class="avatar avatar-xl">
												<img id="uploadfile-1-preview"
                                                     class="avatar-img rounded-circle border border-white border-3 shadow"
                                                     src="assets/images/avatar/avatar-default-icon.png" alt="">
											</span>
                                            </label>
                                            <!-- Upload button -->
                                            <label class="btn btn-sm btn-primary-soft mb-0"
                                                   for="uploadfile-1">Cambiar</label>
                                            <input id="uploadfile-1" class="form-control d-none" type="file">
                                        </div>
                                    </div>

                                    <!-- Name -->
                                    <div class="col-md-6">
                                        <label class="form-label">Nombre Completo<span
                                                    class="text-danger">*</span></label>
                                        <input type="text" class="form-control" value="Abraham Ayala Padilla"
                                               placeholder="Enter your full name">
                                    </div>

                                    <!-- Email -->
                                    <div class="col-md-6">
                                        <label class="form-label">Correo Electrónico<span
                                                    class="text-danger">*</span></label>
                                        <input type="email" class="form-control" value="direccion@arpan.com.mx"
                                               placeholder="Enter your email id">
                                    </div>

                                    <!-- Mobile -->
                                    <div class="col-md-6">
                                        <label class="form-label">Teléfono<span
                                                    class="text-danger">*</span></label>
                                        <input type="text" class="form-control" value="+52 443 448 0228"
                                               placeholder="Enter your mobile number">
                                    </div>

                                    <!-- Nationality -->
                                    <div class="col-md-6">
                                        <label class="form-label">Nacionalidad <span
                                                    class="text-danger">*</span></label>
                                        <select class="form-select js-choice">
                                            <option value="">Selecciona tu nacionalidad</option>
                                            <option>Alemán</option>
                                            <option>Argentino</option>
                                            <option>Boliviano</option>
                                            <option>Brasileño</option>
                                            <option>Canadiense</option>
                                            <option>Chileno</option>
                                            <option>Colombiano</option>
                                            <option>Costarricense</option>
                                            <option>Cubano</option>
                                            <option>Dominicano</option>
                                            <option>Escocés</option>
                                            <option>Español</option>
                                            <option>Estadounidense</option>
                                            <option>Francés</option>
                                            <option>Guatemalteco</option>
                                            <option>Hondureño</option>
                                            <option>Inglés</option>
                                            <option>Irlandés</option>
                                            <option>Italiano</option>
                                            <option selected>Mexicano</option>
                                            <option>Nicaragüense</option>
                                            <option>Panameño</option>
                                            <option>Paraguayo</option>
                                            <option>Peruano</option>
                                            <option>Portugués</option>
                                            <option>Puertorriqueño</option>
                                            <option>Salvadoreño</option>
                                            <option>Uruguayo</option>
                                            <option>Venezolano</option>
                                        </select>
                                    </div>

                                    <!-- Date of birth -->
                                    <div class="col-md-6">
                                        <label class="form-label">Fecha de Nacimiento<span
                                                    class="text-danger">*</span></label>
                                        <input type="text" class="form-control flatpickr" value="29 Sept 1998"
                                               placeholder="Enter date of birth" data-date-format="d M Y">
                                    </div>

                                    <!-- Gender -->
                                    <div class="col-md-6">
                                        <label class="form-label">Selecciona tu Genero<span
                                                    class="text-danger">*</span></label>
                                        <div class="d-flex gap-4">
                                            <div class="form-check radio-bg-light">
                                                <input class="form-check-input" type="radio" name="flexRadioDefault"
                                                       id="flexRadioDefault1" checked="">
                                                <label class="form-check-label" for="flexRadioDefault1">
                                                    Masculino
                                                </label>
                                            </div>
                                            <div class="form-check radio-bg-light">
                                                <input class="form-check-input" type="radio" name="flexRadioDefault"
                                                       id="flexRadioDefault2">
                                                <label class="form-check-label" for="flexRadioDefault2">
                                                    Femenino
                                                </label>
                                            </div>
                                            <div class="form-check radio-bg-light">
                                                <input class="form-check-input" type="radio" name="flexRadioDefault"
                                                       id="flexRadioDefault3">
                                                <label class="form-check-label" for="flexRadioDefault3">
                                                    Otro
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Address -->
                                    <div class="col-12">
                                        <label class="form-label">Dirección</label>
                                        <textarea class="form-control" rows="3" spellcheck="false">Morelia Michoacán</textarea>
                                    </div>

                                    <!-- Button -->
                                    <div class="col-12 text-end">
                                        <a href="#" class="btn btn-primary mb-0">Guardar Cambios</a>
                                    </div>
                                </form>
                                <!-- Form END -->
                            </div>
                            <!-- Card body END -->
                        </div>
                        <!-- Personal info END -->

                        <!-- Update email START -->
                        <div class="card border">
                            <!-- Card header -->
                            <div class="card-header border-bottom">
                                <h4 class="card-header-title">Actualizar Correo</h4>
                                <p class="mb-0">Tu correo actual es <span
                                            class="text-primary">direccion@arpan.com.mx</span>
                                </p>
                            </div>

                            <!-- Card body START -->
                            <div class="card-body">
                                <form>
                                    <!-- Email -->
                                    <label class="form-label">Introduce tu Correo Electrónico<span
                                                class="text-danger">*</span></label>
                                    <input type="email" class="form-control" placeholder="Escribe aquí">

                                    <div class="text-end mt-3">
                                        <a href="#" class="btn btn-primary mb-0">Guardar Correo</a>
                                    </div>
                                </form>
                            </div>
                            <!-- Card body END -->
                        </div>
                        <!-- Update email END -->

                        <!-- Update Password START -->
                        <div class="card border">
                            <!-- Card header -->
                            <div class="card-header border-bottom">
                                <h4 class="card-header-title">Actualizar Contraseña</h4>
                                <p class="mb-0">Tu correo actual es <span
                                            class="text-primary">direccion@arpan.com.mx</span>
                                </p>
                            </div>

                            <!-- Card body START -->
                            <form class="card-body">
                                <!-- Current password -->
                                <div class="mb-3">
                                    <label class="form-label">Contraseña Actual</label>
                                    <input class="form-control" type="password" placeholder="Introduce tu contraseña">
                                </div>
                                <!-- New password -->
                                <div class="mb-3">
                                    <label class="form-label">Nueva Contraseña</label>
                                    <div class="input-group">
                                        <input class="form-control fakepassword"
                                               placeholder="Introduce una nueva contraseña"
                                               type="password" id="psw-input">
                                        <span class="input-group-text p-0 bg-transparent">
										<i class="fakepasswordicon fas fa-eye-slash cursor-pointer p-2"></i>
									</span>
                                    </div>
                                </div>
                                <!-- Confirm -->
                                <div class="mb-3">
                                    <label class="form-label">Confirma tu contraseña</label>
                                    <input class="form-control" type="password"
                                           placeholder="Confirma la nueva contraseña">
                                </div>

                                <div class="text-end">
                                    <a href="#" class="btn btn-primary mb-0">Guardar nueva contarseña</a>
                                </div>
                            </form>
                            <!-- Card body END -->
                        </div>
                        <!-- Update Password END -->
                    </div>
                </div>
                <!-- Main content END -->

            </div>
        </div>
    </section>
    <!-- =======================
    Content END -->

</main>
<!-- **************** MAIN CONTENT END **************** -->

<!-- =======================
Footer START -->
<?php
include 'components/footer.php';
?>
<!-- =======================
Footer END -->

<!-- Back to top -->
<div class="back-top"></div>

<!-- Bootstrap JS -->
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<!-- Vendors -->
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
<script src="assets/vendor/choices/js/choices.min.js"></script>

<!-- ThemeFunctions -->
<script src="assets/js/functions.js"></script>

</body>
</html>