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

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

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

    <!-- =======================
Main Content START -->
    <section class="pt-4 pt-lg-5">
        <div class="container">

            <div class="row g-4 g-xl-5">
                <!-- Left Content START -->
                <div class="col-xl-8">
                    <div class="card bg-transparent p-0">
                        <!-- Card header START -->
                        <div class="card-header bg-transparent p-0">
                            <h1 class="card-title fs-2 mb-0">Ingresa los datos de tu tarjeta</h1>
                        </div>
                        <!-- Card header END -->

                        <!-- Card body START -->
                        <div class="card-body p-0 mt-3">
                            <!-- Alert box -->
                            <div class="alert alert-success" role="alert">
                                Hey! Estás ahorrando<strong class="mx-1">$2,560</strong>usando un código de descuento
                            </div>

                            <form class="bg-light rounded-3 p-4">
                                <!-- Card options -->
                                <div class="d-sm-flex justify-content-sm-between align-items-center mb-3">
                                    <h6 class="mb-2 mb-sm-0">Aceptamos:</h6>
                                    <ul class="list-inline mb-0">
                                        <li class="list-inline-item"><a href="#"><img
                                                        src="assets/images/element/visa.svg" class="h-30px" alt=""></a>
                                        </li>
                                        <li class="list-inline-item"><a href="#"><img
                                                        src="assets/images/element/mastercard.svg" class="h-30px"
                                                        alt=""></a></li>
                                        <li class="list-inline-item"><a href="#"><img
                                                        src="assets/images/element/expresscard.svg" class="h-30px"
                                                        alt=""></a></li>
                                    </ul>
                                </div>

                                <!-- Form START -->
                                <div class="row g-3">
                                    <!-- Card number -->
                                    <div class="col-12">
                                        <label class="form-label"><span class="h6 fw-normal">Número de Tarjeta *</span></label>
                                        <div class="position-relative">
                                            <input type="text" class="form-control" maxlength="14"
                                                   placeholder="XXXX XXXX XXXX XXXX">
                                            <img src="assets/images/element/visa.svg"
                                                 class="w-30px position-absolute top-50 end-0 translate-middle-y me-2 d-none d-sm-block"
                                                 alt="">
                                        </div>
                                    </div>
                                    <!-- Expiration Date -->
                                    <div class="col-md-6">
                                        <label class="form-label"><span
                                                    class="h6 fw-normal">Fecha de Expiración *</span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" maxlength="2" placeholder="Mes">
                                            <input type="text" class="form-control" maxlength="4" placeholder="Año">
                                        </div>
                                    </div>
                                    <!--Cvv code  -->
                                    <div class="col-md-6">
                                        <label class="form-label"><span class="h6 fw-normal">CVV / CVC *</span></label>
                                        <input type="text" class="form-control" maxlength="3" placeholder="XXX">
                                    </div>
                                    <!-- Card name -->
                                    <div class="col-12">
                                        <label class="form-label"><span
                                                    class="h6 fw-normal">Nombre en la Tarjeta *</span></label>
                                        <input type="text" class="form-control" aria-label="name of card holder"
                                               placeholder="Introduce el nombre como está en tu tarjeta">
                                    </div>

                                    <!-- Buttons -->
                                    <div class="col-12">
                                        <a href="booking-confirm" class="btn btn-primary w-100 mb-0">Pagar ahora</a>
                                    </div>
                                </div>
                                <!-- Form END -->
                            </form>
                        </div>
                        <!-- Card body END -->
                    </div>
                </div>
                <!-- Left Content END -->

                <!-- Right content START -->
                <aside class="col-xl-4">
                    <div class="row g-4">
                        <!-- Fare summary START -->
                        <div class="col-md-6 col-xl-12">
                            <div class="card bg-light rounded-2">
                                <!-- card header -->
                                <div class="card-header border-bottom bg-light">
                                    <h5 class="card-title mb-0">Resumen de Tarifa</h5>
                                </div>

                                <!-- Card body -->
                                <div class="card-body">
                                    <ul class="list-group list-group-borderless">
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
										<span class="h6 fw-normal mb-0">Tarifa Base
											<a tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus"
                                               data-bs-placement="bottom"
                                               data-bs-content="COVID-19 test required Vaccinated travelers can visit">
												<i class="bi bi-info-circle"></i>
											</a>
										</span>
                                            <span class="fs-5">$38,660</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span class="h6 fw-normal mb-0">Descuento</span>
                                            <span class="fs-5 text-success">+$2,560</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span class="h6 fw-normal mb-0">Otros Servicios</span>
                                            <span class="fs-5">$20</span>
                                        </li>
                                    </ul>
                                </div>

                                <!-- Card footer -->
                                <div class="card-footer border-top bg-light">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="h5 fw-normal mb-0">Total</span>
                                        <span class="h5 fw-normal mb-0">$36,500</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Fare summary END -->

                        <!-- Booking START -->
                        <div class="col-md-6 col-xl-12">
                            <div class="card border">
                                <!-- Card header -->
                                <div class="card-header border-bottom">
                                    <h5 class="mb-0 cardt-title">Tu Reserva</h5>
                                </div>

                                <!-- Card body -->
                                <div class="card-body">
                                    <!-- Flight detail -->
                                    <small><i class="bi bi-ticket me-2"></i>Boleto de Vuelo</small>
                                    <div class="d-flex mt-2">
                                        <img src="assets/images/branding/logo-black.svg" class="w-40px me-2" alt="">
                                        <h6 class="fw-normal mb-0">Zumpango <i class="bi bi-arrow-right"></i> Nueva York
                                        </h6>
                                    </div>
                                    <ul class="nav nav-divider small text-body mt-1 mb-0">
                                        <li class="nav-item">25 Ene</li>
                                        <li class="nav-item">1 Parada</li>
                                        <li class="nav-item">05h 25m</li>
                                    </ul>

                                    <hr> <!-- Divider -->

                                    <!-- Traveler detail -->
                                    <small><i class="bi bi-person me-1"></i>Detalles de Pasajero</small>
                                    <h6 class="mb-0 fw-normal mt-2">Abraham Ayala Padilla</h6>
                                    <ul class="nav nav-divider small text-body mt-1 mb-0">
                                        <li class="nav-item">Adulto</li>
                                        <li class="nav-item">Masculino</li>
                                        <li class="nav-item">29-Sept-1998</li>
                                    </ul>
                                </div>

                                <!-- Card footer -->
                                <div class="card-footer border-top text-center p-3">
                                    <a href="#" class="btn btn-link mb-0 p-0">Revisar Reservación</a>
                                </div>
                            </div>
                        </div>
                        <!-- Booking END -->
                    </div>
                </aside>
                <!-- Right content END -->
            </div>
        </div>
    </section>
    <!-- =======================
    Main 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>