<?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">

    <!-- 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 g-2 g-lg-4">

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

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

                    <!-- 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="card border bg-transparent">
                        <!-- Card header -->
                        <div class="card-header bg-transparent border-bottom">
                            <h4 class="card-header-title">Mis Reservas</h4>
                        </div>

                        <!-- Card body START -->
                        <div class="card-body p-0">

                            <!-- Tabs -->
                            <ul class="nav nav-tabs nav-bottom-line nav-responsive nav-justified">
                                <li class="nav-item">
                                    <a class="nav-link mb-0 active" data-bs-toggle="tab" href="#tab-1"><i
                                                class="bi bi-briefcase-fill fa-fw me-1"></i>Reservas Próximas</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link mb-0" data-bs-toggle="tab" href="#tab-2"><i
                                                class="bi bi-x-octagon fa-fw me-1"></i>Reservas Canceladas</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link mb-0" data-bs-toggle="tab" href="#tab-3"><i
                                                class="bi bi-patch-check fa-fw me-1"></i>Reservas Completadas</a>
                                </li>
                            </ul>

                            <!-- Tabs content START -->
                            <div class="tab-content p-2 p-sm-4" id="nav-tabContent">

                                <!-- Tab content item START -->
                                <div class="tab-pane fade show active" id="tab-1">
                                    <!-- Card item START -->
                                    <div class="card border mb-4">
                                        <!-- Card header -->
                                        <div class="card-header border-bottom d-md-flex justify-content-md-between align-items-center">
                                            <!-- Icon and Title -->
                                            <div class="d-flex align-items-center">
                                                <div class="icon-lg bg-light rounded-circle flex-shrink-0"><i
                                                            class="fa-solid fa-plane"></i></div>
                                                <!-- Title -->
                                                <div class="ms-2">
                                                    <h6 class="card-title mb-0">Zumpango a Tulum</h6>
                                                    <ul class="nav nav-divider small">
                                                        <li class="nav-item">ID de Reservación: CGDSUAHA12548</li>
                                                        <li class="nav-item">Primera Clase</li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <!-- Button -->
                                            <div class="mt-2 mt-md-0">
                                                <a href="#" class="btn btn-primary-soft mb-0">Ver Reservación</a>
                                            </div>
                                        </div>

                                        <!-- Card body -->
                                        <div class="card-body">
                                            <div class="row g-3">
                                                <div class="col-sm-6 col-md-4">
                                                    <span>Hora de Salida</span>
                                                    <h6 class="mb-0">Martes 05 Ago 12:00AM</h6>
                                                </div>

                                                <div class="col-sm-6 col-md-4">
                                                    <span>Hora de llegada</span>
                                                    <h6 class="mb-0">Martes 06 Ago 2:00AM</h6>
                                                </div>

                                                <div class="col-md-4">
                                                    <span>Reservador por</span>
                                                    <h6 class="mb-0">Abraham Ayala Padilla</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Card item END -->

                                    <!-- Card item START -->
                                    <div class="card border mb-4">
                                        <!-- Card header -->
                                        <div class="card-header border-bottom d-md-flex justify-content-md-between align-items-center">
                                            <!-- Icon and Title -->
                                            <div class="d-flex align-items-center">
                                                <div class="icon-lg bg-light rounded-circle flex-shrink-0"><i
                                                            class="fa-solid fa-plane"></i></div>
                                                <!-- Title -->
                                                <div class="ms-2">
                                                    <h6 class="card-title mb-0">Zumpango a Tulum</h6>
                                                    <ul class="nav nav-divider small">
                                                        <li class="nav-item">ID de Reservación: CGDSUAHA12548</li>
                                                        <li class="nav-item">Primera Clase</li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <!-- Button -->
                                            <div class="mt-2 mt-md-0">
                                                <a href="#" class="btn btn-primary-soft mb-0">Ver Reservación</a>
                                            </div>
                                        </div>

                                        <!-- Card body -->
                                        <div class="card-body">
                                            <div class="row g-3">
                                                <div class="col-sm-6 col-md-4">
                                                    <span>Hora de Salida</span>
                                                    <h6 class="mb-0">Martes 05 Ago 12:00AM</h6>
                                                </div>

                                                <div class="col-sm-6 col-md-4">
                                                    <span>Hora de llegada</span>
                                                    <h6 class="mb-0">Martes 06 Ago 2:00AM</h6>
                                                </div>

                                                <div class="col-md-4">
                                                    <span>Reservador por</span>
                                                    <h6 class="mb-0">Abraham Ayala Padilla</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Card item END -->
                                </div>
                                <!-- Tabs content item END -->

                                <!-- Tab content item START -->
                                <div class="tab-pane fade" id="tab-2">
                                    <!-- Card item START -->
                                    <div class="card border">
                                        <!-- Card header -->
                                        <div class="card-header border-bottom d-md-flex justify-content-md-between align-items-center">
                                            <!-- Icon and Title -->
                                            <div class="d-flex align-items-center">
                                                <div class="icon-lg bg-light rounded-circle flex-shrink-0"><i
                                                            class="fa-solid fa-hotel"></i></div>
                                                <!-- Title -->
                                                <div class="ms-2">
                                                    <h6 class="card-title mb-0">Chetumal a Uruapan</h6>
                                                    <ul class="nav nav-divider small">
                                                        <li class="nav-item">ID de Reserva: CGDSUAHA12548</li>
                                                        <li class="nav-item">Económico</li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <!-- Button -->
                                            <div class="mt-2 mt-md-0">
                                                <a href="#" class="btn btn-primary-soft mb-0">Ver Reservación</a>
                                                <p class="text-danger text-md-end mb-0 fw-bold">Reservación Cancelada</p>
                                            </div>
                                        </div>

                                        <!-- Card body -->
                                        <div class="card-body">
                                            <div class="row g-3">
                                                <div class="col-sm-6 col-md-4">
                                                    <span>Hora de Salida</span>
                                                    <h6 class="mb-0">Martes 10 Ago 11:00AM</h6>
                                                </div>

                                                <div class="col-sm-6 col-md-4">
                                                    <span>Hora de Llegada</span>
                                                    <h6 class="mb-0">Martes 12 Ago 13:00PM</h6>
                                                </div>

                                                <div class="col-md-4">
                                                    <span>Reservado por</span>
                                                    <h6 class="mb-0">Abraham Ayala Padilla</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Card item END -->
                                </div>
                                <!-- Tabs content item END -->

                                <!-- Tab content item START -->
                                <div class="tab-pane fade" id="tab-3">
                                    <div class="bg-mode shadow p-4 rounded overflow-hidden">
                                        <div class="row g-4 align-items-center">
                                            <!-- Content -->
                                            <div class="col-md-9">
                                                <h6>Parece que aun no se ejecuta una reserva</h6>
                                                <h4 class="mb-2">Cuando tu viaje finalice, se mostrará aquí.</h4>
                                            </div>
                                            <!-- Image -->
                                            <div class="col-md-3 text-end">
                                                <img src="assets/images/element/17.svg" class="mb-n5" alt="">
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <!-- Tabs content item END -->
                            </div>

                        </div>
                        <!-- Card body 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>

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

</body>
</html>