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

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

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

    <!-- =======================
    Main Content START -->
    <section>
        <div class="container position-relative" data-sticky-container>
            <div class="row g-4">
                <!-- Left Content START -->
                <div class="col-xl-9">
                    <div class="vstack gap-4">

                        <!-- Title START -->
                        <div class="d-flex align-items-center">
                            <!-- Icon -->
                            <h1 class="display-4 mb-0"><i class="fa-solid fa-plane rtl-flip"></i></h1>

                            <!-- Title and content START -->
                            <div class="ms-3">
                                <!-- Title -->
                                <ul class="list-inline mb-2">
                                    <li class="list-inline-item me-2">
                                        <h3 class="mb-0">Zumpango (NLU)</h3>
                                    </li>
                                    <li class="list-inline-item me-2">
                                        <h3 class="mb-0"><i class="bi bi-arrow-right"></i></h3>
                                    </li>
                                    <li class="list-inline-item me-0">
                                        <h3 class="mb-0">Nueva York (JFK)</h3>
                                    </li>
                                </ul>

                                <!-- List -->
                                <ul class="nav nav-divider h6 fw-normal text-body mb-0">
                                    <li class="nav-item">25 de Enero</li>
                                    <li class="nav-item">1 Parada</li>
                                    <li class="nav-item">05h 25m</li>
                                </ul>
                            </div>
                            <!-- Title and content END -->
                        </div>
                        <!-- Title END -->

                        <!-- Ticket START -->
                        <div class="card border">
                            <!-- Card header -->
                            <div class="card-header d-flex justify-content-between pb-0">
                                <h6 class="fw-normal mb-0"><span class="text-body">Tipo de Viaje:</span> Económico</h6>
                                <a href="#" class="btn btn-link text-decoration-underline p-0 mb-0"
                                   data-bs-toggle="modal" data-bs-target="#baggageFare">
                                    <i class="bi bi-eye-fill me-1"></i>Reglas de Equipaje y Tarifas
                                </a>
                            </div>

                            <!-- Card body START -->
                            <div class="card-body p-4">
                                <!-- Ticket item START -->
                                <div class="row g-4">
                                    <!-- Air line name -->
                                    <div class="col-md-3">
                                        <!-- Image -->
                                        <img src="assets/images/branding/logo-black.svg" class="w-25 mb-3" alt="">
                                        <!-- Title -->
                                        <h6 class="fw-normal mb-0">Mexicana</h6>
                                        <h6 class="fw-normal mb-0">PA - 5620</h6>
                                    </div>

                                    <!-- Airport detail -->
                                    <div class="col-sm-4 col-md-3">
                                        <!-- Title -->
                                        <h4>NLU</h4>
                                        <h6>14:50</h6>
                                        <!-- Address -->
                                        <p class="mb-2">Domingo, 29 Enero 2025</p>
                                        <p class="mb-2">Aeropuerto Internacional Félipe Ángeles</p>
                                        <p class="mb-0">Terminal 1, Puerta 105</p>
                                    </div>

                                    <!-- Time -->
                                    <div class="col-sm-4 col-md-3 text-center my-sm-auto">
                                        <!-- Time -->
                                        <h5>9hr 50min</h5>

                                        <div class="position-relative my-4">
                                            <!-- Line -->
                                            <hr class="bg-primary opacity-5 position-relative">
                                            <!-- Icon -->
                                            <div class="icon-md bg-primary text-white rounded-circle position-absolute top-50 start-50 translate-middle">
                                                <i class="fa-solid fa-fw fa-plane rtl-flip"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Airport detail -->
                                    <div class="col-sm-4 col-md-3">
                                        <!-- Title -->
                                        <h4>JFK</h4>
                                        <h6>11:50</h6>
                                        <!-- Address -->
                                        <p class="mb-2">Domingo, 29 Enero 2025</p>
                                        <p class="mb-2">Queens Nueva York, EU</p>
                                        <p class="mb-0">Terminal 2, Puerta Llegadas</p>
                                    </div>
                                </div>
                                <!-- Ticket item END -->

                                <!-- Divider -->
                                <div class="bg-light rounded-2 text-center text-danger p-2 my-4">
                                    Cambio de avión: 1h 15m Escala en Los Ángeles
                                </div>

                                <!-- Ticket item START -->
                                <div class="row g-4">
                                    <!-- Air line name -->
                                    <div class="col-md-3">
                                        <!-- Image -->
                                        <img src="assets/images/branding/logo-black.svg" class="w-25 mb-3" alt="">
                                        <!-- Title -->
                                        <h6 class="fw-normal mb-0">Mexicana</h6>
                                        <h6 class="fw-normal mb-0"> PA-645</h6>
                                    </div>

                                    <!-- Airport detail -->
                                    <div class="col-sm-4 col-md-3">
                                        <!-- Title -->
                                        <h4>JFK</h4>
                                        <h6>2:50</h6>
                                        <!-- Address -->
                                        <p class="mb-2">Domingo, 30 Enero 2025</p>
                                        <p class="mb-2">Queens Nueva York, EU</p>
                                        <p class="mb-0">Terminal 2, Puerta 3</p>
                                    </div>

                                    <!-- Time -->
                                    <div class="col-sm-4 col-md-3 text-center my-sm-auto">
                                        <!-- Time -->
                                        <h5>5hr 50min</h5>

                                        <div class="position-relative my-4">
                                            <!-- Line -->
                                            <hr class="bg-primary opacity-5 position-relative">
                                            <!-- Icon -->
                                            <div class="icon-md bg-primary text-white rounded-circle position-absolute top-50 start-50 translate-middle">
                                                <i class="fa-solid fa-fw fa-plane rtl-flip"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Airport detail -->
                                    <div class="col-sm-4 col-md-3">
                                        <!-- Title -->
                                        <h4>NLU</h4>
                                        <h6>7:35</h6>
                                        <!-- Address -->
                                        <p class="mb-2">Sun, 30 Jan 2023</p>
                                        <p class="mb-2">Aeropuerto Internacional Félipe Ángeles</p>
                                        <p class="mb-0">Terminal 1, Puerta Llegadas</p>
                                    </div>
                                </div>
                                <!-- Ticket item END -->
                            </div>
                            <!-- Card body END -->
                        </div>
                        <!-- Ticket END -->

                        <!-- Information START -->
                        <div class="card border">
                            <!-- Card header -->
                            <div class="card-header border-bottom px-4">
                                <h3 class="card-title mb-0">Información Importante</h3>
                            </div>
                            <!-- Card body -->
                            <div class="card-body py-4">
                                <!-- List -->
                                <h5 class="mb-3"><i class="bi bi-arrow-right rtl-flip me-2"></i>Pasajeros que viajan a
                                    Estados Unidos, tengan en cuenta</h5>
                                <ul>
                                    <li class="mb-2">¿Quién puede viajar? <strong>Todos los viajeros que hayan
                                            completado su vacunación pueden ingresar al país. Todas las vacunas
                                            aprobadas por la OMS, incluidas Covishield y Covaxin, son aceptadas por los
                                            EE. UU.</strong></li>
                                    <li class="mb-2">Restricciones de destino : <strong>Los viajeros no vacunados
                                            procedentes de la India no pueden entrar. Los viajeros que transiten por la
                                            UE o el Reino Unido no pueden entrar en EE. UU.</strong></li>
                                </ul>
                            </div>
                        </div>
                        <!-- Information END -->

                        <!-- Booking form START -->
                        <form class="card border">
                            <!-- Card header -->
                            <div class="card-header border-bottom px-4">
                                <h3 class="card-title mb-0">Datos del viajero</h3>
                            </div>

                            <!-- Card body START -->
                            <div class="card-body py-4">
                                <!-- Badge with content -->
                                <div class="bg-danger bg-opacity-10 rounded-2 p-3 mb-3">
                                    <p class="h6 fw-light small mb-0"><span class="badge bg-danger me-2">Nuevo</span>Asegúrate
                                        de ingresar el nombre que figura en tu pasaporte</p>
                                </div>

                                <!-- Button -->
                                <div class="text-end mb-3">
                                    <a href="#!" class="btn btn-primary-soft mb-0">Agregar nuevo adulto</a>
                                </div>

                                <!-- Accordion START -->
                                <div class="accordion accordion-icon accordion-bg-light" id="accordionExample2">
                                    <!-- Item -->
                                    <div class="accordion-item mb-3">
                                        <h6 class="accordion-header font-base" id="heading-1">
                                            <button class="accordion-button fw-bold rounded collapsed" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#collapse-1"
                                                    aria-expanded="true" aria-controls="collapse-1">
                                                Adulto 1
                                            </button>
                                        </h6>
                                        <!-- Accordion Body START -->
                                        <div id="collapse-1" class="accordion-collapse collapse show"
                                             aria-labelledby="heading-1" data-bs-parent="#accordionExample2">
                                            <div class="accordion-body mt-3">

                                                <!-- Form START -->
                                                <div class="row g-4">
                                                    <!-- Select item -->
                                                    <div class="col-md-3">
                                                        <label class="form-label">Titulo</label>
                                                        <select class="form-select js-choice">
                                                            <option>Sr</option>
                                                            <option>Sra</option>
                                                            <option>Srita</option>
                                                        </select>
                                                    </div>

                                                    <!-- Input item -->
                                                    <div class="col-md-9">
                                                        <label class="form-label">Nombre Completo</label>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control"
                                                                   placeholder="Nombre">
                                                            <input type="text" class="form-control"
                                                                   placeholder="Apellido">
                                                        </div>
                                                    </div>

                                                    <!-- Select group -->
                                                    <div class="col-md-6">
                                                        <label class="form-label">Fecha de Nacimiento</label>
                                                        <div class="row g-0">
                                                            <div class="col-4">
                                                                <div class="choice-radius-end">
                                                                    <select class="form-select js-choice z-index-9 rounded-start">
                                                                        <option value="">Día</option>
                                                                        <option>1</option>
                                                                        <option>2</option>
                                                                        <option>3</option>
                                                                        <option>4</option>
                                                                        <option>5</option>
                                                                        <option>6</option>
                                                                        <option>7</option>
                                                                        <option>8</option>
                                                                        <option>9</option>
                                                                        <option>10</option>
                                                                        <option>11</option>
                                                                        <option>12</option>
                                                                        <option>13</option>
                                                                        <option>14</option>
                                                                        <option>15</option>
                                                                        <option>16</option>
                                                                        <option>17</option>
                                                                        <option>18</option>
                                                                        <option>19</option>
                                                                        <option>20</option>
                                                                        <option>21</option>
                                                                        <option>22</option>
                                                                        <option>23</option>
                                                                        <option>24</option>
                                                                        <option>25</option>
                                                                        <option>26</option>
                                                                        <option>27</option>
                                                                        <option>28</option>
                                                                        <option>29</option>
                                                                        <option>30</option>
                                                                        <option>31</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-4">
                                                                <div class="choice-radius-0">
                                                                    <select class="form-select choice-radius-0 js-choice z-index-9 border-0 bg-light">
                                                                        <option value="">Mes</option>
                                                                        <option>Enero</option>
                                                                        <option>Febrero</option>
                                                                        <option>Marzo</option>
                                                                        <option>Abril</option>
                                                                        <option>Mayo</option>
                                                                        <option>Junio</option>
                                                                        <option>Julio</option>
                                                                        <option>Agosto</option>
                                                                        <option>Septiembre</option>
                                                                        <option>Octubre</option>
                                                                        <option>Noviembre</option>
                                                                        <option>Diciembre</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-4">
                                                                <div class="choice-radius-start">
                                                                    <select class="form-select js-choice z-index-9 border-0 bg-light">
                                                                        <option value="">Año</option>
                                                                        <option>1990</option>
                                                                        <option>1991</option>
                                                                        <option>1992</option>
                                                                        <option>1993</option>
                                                                        <option>1994</option>
                                                                        <option>1995</option>
                                                                        <option>1996</option>
                                                                        <option>1997</option>
                                                                        <option>1998</option>
                                                                        <option>1999</option>
                                                                        <option>2000</option>
                                                                        <option>2001</option>
                                                                        <option>2002</option>
                                                                        <option>2003</option>
                                                                        <option>2004</option>
                                                                        <option>2005</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Select item -->
                                                    <div class="col-md-6">
                                                        <label class="form-label">Nacionalidad</label>
                                                        <select class="form-select js-choice">
                                                            <option value="">Selecciona 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>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>

                                                    <!-- Input item -->
                                                    <div class="col-md-6">
                                                        <label class="form-label">Número de Pasaporte</label>
                                                        <input type="text" class="form-control"
                                                               placeholder="Enter passport number">
                                                    </div>

                                                    <!-- Select item -->
                                                    <div class="col-md-6">
                                                        <label class="form-label">País emisor del pasaporte</label>
                                                        <select class="form-select js-choice">
                                                            <option value="">Selecciona País</option>
                                                            <option>Afganistán</option>
                                                            <option>Albania</option>
                                                            <option>Alemania</option>
                                                            <option>Andorra</option>
                                                            <option>Angola</option>
                                                            <option>Antigua y Barbuda</option>
                                                            <option>Arabia Saudita</option>
                                                            <option>Argelia</option>
                                                            <option>Argentina</option>
                                                            <option>Armenia</option>
                                                            <option>Australia</option>
                                                            <option>Austria</option>
                                                            <option>Azerbaiyán</option>
                                                            <option>Bahamas</option>
                                                            <option>Bahréin</option>
                                                            <option>Bangladés</option>
                                                            <option>Barbados</option>
                                                            <option>Bélgica</option>
                                                            <option>Belice</option>
                                                            <option>Benín</option>
                                                            <option>Bielorrusia</option>
                                                            <option>Birmania</option>
                                                            <option>Bolivia</option>
                                                            <option>Bosnia y Herzegovina</option>
                                                            <option>Botsuana</option>
                                                            <option>Brasil</option>
                                                            <option>Brunéi</option>
                                                            <option>Bulgaria</option>
                                                            <option>Burkina Faso</option>
                                                            <option>Burundi</option>
                                                            <option>Bután</option>
                                                            <option>Cabo Verde</option>
                                                            <option>Camboya</option>
                                                            <option>Camerún</option>
                                                            <option>Canadá</option>
                                                            <option>Chad</option>
                                                            <option>Chile</option>
                                                            <option>China</option>
                                                            <option>Chipre</option>
                                                            <option>Colombia</option>
                                                            <option>Comoras</option>
                                                            <option>Corea del Norte</option>
                                                            <option>Corea del Sur</option>
                                                            <option>Costa de Marfil</option>
                                                            <option>Costa Rica</option>
                                                            <option>Croacia</option>
                                                            <option>Cuba</option>
                                                            <option>Dinamarca</option>
                                                            <option>Dominica</option>
                                                            <option>Ecuador</option>
                                                            <option>Egipto</option>
                                                            <option>El Salvador</option>
                                                            <option>Emiratos Árabes Unidos</option>
                                                            <option>Eritrea</option>
                                                            <option>Eslovaquia</option>
                                                            <option>Eslovenia</option>
                                                            <option>España</option>
                                                            <option>Estados Unidos</option>
                                                            <option>Estonia</option>
                                                            <option>Etiopía</option>
                                                            <option>Filipinas</option>
                                                            <option>Finlandia</option>
                                                            <option>Fiyi</option>
                                                            <option>Francia</option>
                                                            <option>Gabón</option>
                                                            <option>Gambia</option>
                                                            <option>Georgia</option>
                                                            <option>Ghana</option>
                                                            <option>Granada</option>
                                                            <option>Grecia</option>
                                                            <option>Guatemala</option>
                                                            <option>Guinea</option>
                                                            <option>Guinea-Bisáu</option>
                                                            <option>Guinea Ecuatorial</option>
                                                            <option>Guyana</option>
                                                            <option>Haití</option>
                                                            <option>Honduras</option>
                                                            <option>Hungría</option>
                                                            <option>India</option>
                                                            <option>Indonesia</option>
                                                            <option>Irak</option>
                                                            <option>Irán</option>
                                                            <option>Irlanda</option>
                                                            <option>Islandia</option>
                                                            <option>Islas Marshall</option>
                                                            <option>Islas Salomón</option>
                                                            <option>Israel</option>
                                                            <option>Italia</option>
                                                            <option>Jamaica</option>
                                                            <option>Japón</option>
                                                            <option>Jordania</option>
                                                            <option>Kazajistán</option>
                                                            <option>Kenia</option>
                                                            <option>Kirguistán</option>
                                                            <option>Kiribati</option>
                                                            <option>Kosovo</option>
                                                            <option>Kuwait</option>
                                                            <option>Laos</option>
                                                            <option>Lesoto</option>
                                                            <option>Letonia</option>
                                                            <option>Líbano</option>
                                                            <option>Liberia</option>
                                                            <option>Libia</option>
                                                            <option>Liechtenstein</option>
                                                            <option>Lituania</option>
                                                            <option>Luxemburgo</option>
                                                            <option>Macedonia del Norte</option>
                                                            <option>Madagascar</option>
                                                            <option>Malasia</option>
                                                            <option>Malaui</option>
                                                            <option>Maldivas</option>
                                                            <option>Malí</option>
                                                            <option>Malta</option>
                                                            <option>Marruecos</option>
                                                            <option>Mauricio</option>
                                                            <option>Mauritania</option>
                                                            <option>México</option>
                                                            <option>Micronesia</option>
                                                            <option>Moldavia</option>
                                                            <option>Mónaco</option>
                                                            <option>Mongolia</option>
                                                            <option>Montenegro</option>
                                                            <option>Mozambique</option>
                                                            <option>Namibia</option>
                                                            <option>Nauru</option>
                                                            <option>Nepal</option>
                                                            <option>Nicaragua</option>
                                                            <option>Níger</option>
                                                            <option>Nigeria</option>
                                                            <option>Noruega</option>
                                                            <option>Nueva Zelanda</option>
                                                            <option>Omán</option>
                                                            <option>Países Bajos</option>
                                                            <option>Pakistán</option>
                                                            <option>Palaos</option>
                                                            <option>Panamá</option>
                                                            <option>Papúa Nueva Guinea</option>
                                                            <option>Paraguay</option>
                                                            <option>Perú</option>
                                                            <option>Polonia</option>
                                                            <option>Portugal</option>
                                                            <option>Reino Unido</option>
                                                            <option>República Centroafricana</option>
                                                            <option>República Checa</option>
                                                            <option>República Democrática del Congo</option>
                                                            <option>República Dominicana</option>
                                                            <option>República del Congo</option>
                                                            <option>Ruanda</option>
                                                            <option>Rumania</option>
                                                            <option>Rusia</option>
                                                            <option>Samoa</option>
                                                            <option>San Cristóbal y Nieves</option>
                                                            <option>San Marino</option>
                                                            <option>San Vicente y las Granadinas</option>
                                                            <option>Santa Lucía</option>
                                                            <option>Santo Tomé y Príncipe</option>
                                                            <option>Senegal</option>
                                                            <option>Serbia</option>
                                                            <option>Seychelles</option>
                                                            <option>Sierra Leona</option>
                                                            <option>Singapur</option>
                                                            <option>Siria</option>
                                                            <option>Somalia</option>
                                                            <option>Sri Lanka</option>
                                                            <option>Sudáfrica</option>
                                                            <option>Sudán</option>
                                                            <option>Sudán del Sur</option>
                                                            <option>Suecia</option>
                                                            <option>Suiza</option>
                                                            <option>Surinam</option>
                                                            <option>Tailandia</option>
                                                            <option>Tanzania</option>
                                                            <option>Tayikistán</option>
                                                            <option>Timor Oriental</option>
                                                            <option>Togo</option>
                                                            <option>Tonga</option>
                                                            <option>Trinidad y Tobago</option>
                                                            <option>Túnez</option>
                                                            <option>Turkmenistán</option>
                                                            <option>Turquía</option>
                                                            <option>Tuvalu</option>
                                                            <option>Ucrania</option>
                                                            <option>Uganda</option>
                                                            <option>Uruguay</option>
                                                            <option>Uzbekistán</option>
                                                            <option>Vanuatu</option>
                                                            <option>Vaticano</option>
                                                            <option>Venezuela</option>
                                                            <option>Vietnam</option>
                                                            <option>Yemen</option>
                                                            <option>Yibuti</option>
                                                            <option>Zambia</option>
                                                            <option>Zimbabue</option>
                                                        </select>
                                                    </div>

                                                    <!-- Select group -->
                                                    <div class="col-md-6">
                                                        <label class="form-label">Caducidad del Pasaporte</label>
                                                        <input type="text" class="form-control flatpickr"
                                                               placeholder="Selecciona la fecha del pasaporte"
                                                               data-date-format="d M y">
                                                    </div>
                                                </div>
                                                <!-- Form END -->

                                            </div>
                                        </div>
                                        <!-- Accordion Body END -->
                                    </div>

                                    <!-- Item -->
                                    <div class="accordion-item">
                                        <h6 class="accordion-header font-base" id="heading-2">
                                            <button class="accordion-button rounded fw-bold collapsed pe-5"
                                                    type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2"
                                                    aria-expanded="false" aria-controls="collapse-2">
                                                Adulto 2
                                            </button>
                                        </h6>
                                        <!-- Body -->
                                        <div id="collapse-2" class="accordion-collapse collapse"
                                             aria-labelledby="heading-2" data-bs-parent="#accordionExample2">
                                            <div class="accordion-body mt-3">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Accordion END -->

                                <!-- Number and email START -->
                                <!-- Title -->
                                <h5 class="mt-4">Los detalles de la reserva se enviarán a</h5>
                                <div class="row g-3 g-md-4">
                                    <!-- Input item -->
                                    <div class="col-md-6">
                                        <label class="form-label">Número de Teléfono</label>
                                        <input type="text" class="form-control"
                                               placeholder="Introduce tu número de teléfono">
                                    </div>

                                    <!-- Input item -->
                                    <div class="col-md-6">
                                        <label class="form-label">Correo Electrónico</label>
                                        <input type="email" class="form-control" placeholder="Introduce tu correo">
                                    </div>
                                </div>
                                <!-- Number and email START -->

                                <!-- Button -->
                                <div class="d-grid mt-4">
                                    <a href="flight-booking.html" class="btn btn-primary mb-0">Proceder al pago</a>
                                </div>
                            </div>
                            <!-- Card body END -->
                        </form>
                        <!-- Booking form END -->
                    </div>
                </div>
                <!-- Left Content END -->

                <!-- Right content START -->
                <aside class="col-xl-3">
                    <div data-sticky data-margin-top="80" data-sticky-for="1199">
                        <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 href="#" tabindex="0" data-bs-toggle="popover"
                                                   data-bs-trigger="focus" data-bs-placement="bottom"
                                                   data-bs-content="Se requiere prueba de COVID-19. Los viajeros vacunados pueden visitar">
													<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-6 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 -->

                            <!-- Coupon START -->
                            <div class="col-md-6 col-xl-12">
                                <div class="card card-body bg-light">
                                    <div class="cardt-title">
                                        <h5>Cupón de descuento</h5>
                                    </div>
                                    <!-- Input group -->
                                    <div class="input-group mt-2">
                                        <input class="form-control form-control" placeholder="Código">
                                        <button type="button" class="btn btn-primary">Aplicar</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Coupon END -->

                            <!-- Cancel policy START -->
                            <div class="col-md-6 col-xl-12">
                                <div class="card card-body border p-4">
                                    <div class="cardt-title mb-3">
                                        <h5 class="mb-0">Cargos por cancelación y cambio de fecha</h5>
                                    </div>

                                    <h6 class="text-danger">No Reembolsable</h6>
                                    <p class="mb-2">
                                        La penalización por cancelación de esta reserva dependerá de la proximidad a la
                                        fecha de salida en la que canceles tu boleto. Consulta las reglas de tarifas
                                        para obtener más información
                                    </p>
                                    <div><a href="#" class="btn btn-link p-0 mb-0 text-decoration-underline"
                                            data-bs-toggle="modal" data-bs-target="#cancellation">
                                            <i class="bi bi-eye-fill"></i> Ver Detalles
                                        </a></div>
                                </div>
                            </div>
                            <!-- Cancel policy END -->
                        </div>
                    </div>
                </aside>
                <!-- Right content END -->

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

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

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

<!-- Cancellation modal START -->
<div class="modal fade" id="cancellation" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Title -->
            <div class="modal-header">
                <h5 class="modal-title" id="cancellationlabel">Cargos por Cancelación y Cambio de Fecha</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Body -->
            <div class="modal-body p-3">

                <ul class="nav nav-pills nav-justified nav-responsive bg-primary bg-opacity-10 rounded p-2 mb-3"
                    id="tour-pills-tab" role="tablist">
                    <!-- Tab item -->
                    <li class="nav-item" role="presentation">
                        <button class="nav-link rounded-start active mb-0" id="tour-pills-tab-1" data-bs-toggle="pill"
                                data-bs-target="#tour-pills-tab1" type="button" role="tab"
                                aria-controls="tour-pills-tab1" aria-selected="true">Cargo de Cancelación
                        </button>
                    </li>
                    <!-- Tab item -->
                    <li class="nav-item" role="presentation">
                        <button class="nav-link rounded-end mb-0" id="tour-pills-tab-2" data-bs-toggle="pill"
                                data-bs-target="#tour-pills-tab2" type="button" role="tab"
                                aria-controls="tour-pills-tab2" aria-selected="false">Cargo de Cambio de Fecha
                        </button>
                    </li>
                </ul>

                <!-- Tab content START -->
                <div class="tab-content mb-0" id="tour-pills-tabContent">

                    <!-- Content item START -->
                    <div class="tab-pane fade show active" id="tour-pills-tab1" role="tabpanel"
                         aria-labelledby="tour-pills-tab-1">

                        <div class="card border">
                            <!-- Card header -->
                            <div class="card-header border-bottom">
                                <!-- Title -->
                                <h5 class="card-title mb-0">
                                    <img src="assets/images/branding/logo-black.svg" class="h-50px" alt="">
                                    NLU - JFK
                                </h5>
                            </div>

                            <!-- Card body -->
                            <div class="card-body">
                                <!-- Table START -->
                                <div class="table-responsive-lg">
                                    <table class="table table-bordered rounded caption-bottom overflow-hidden mb-0">
                                        <!-- Caption -->
                                        <caption class="pb-0">*Desde la fecha de salida</caption>
                                        <!-- Table head -->
                                        <thead class="table-dark border-light">
                                        <tr>
                                            <th scope="col">Periodo de tiempo</th>
                                            <th scope="col">Detalles</th>
                                        </tr>
                                        </thead>
                                        <!-- Table body -->
                                        <tbody class="border-top-0">
                                        <tr>
                                            <td>0 horas a 24 horas</td>
                                            <td>No Reembolsable</td>
                                        </tr>
                                        <tr>
                                            <td>24 horas a 365 días</td>
                                            <td>$16,325 + $250</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- Table END -->
                            </div>
                        </div>
                    </div>
                    <!-- Content item END -->

                    <!-- Content item START -->
                    <div class="tab-pane fade" id="tour-pills-tab2" role="tabpanel" aria-labelledby="tour-pills-tab-2">
                        <div class="card border">
                            <!-- Card header -->
                            <div class="card-header border-bottom">
                                <!-- Title -->
                                <h5 class="card-title mb-0">
                                    <img src="assets/images/branding/logo-black.svg" class="h-50px" alt="">
                                    JFK - NLU
                                </h5>
                            </div>

                            <!-- Card body -->
                            <div class="card-body">
                                <!-- Table START -->
                                <div class="table-responsive-lg">
                                    <table class="table table-bordered rounded caption-bottom overflow-hidden mb-0">
                                        <!-- Caption -->
                                        <caption class="pb-0">Desde la Fecha de Salida</caption>
                                        <!-- Table head -->
                                        <thead class="table-dark border-light">
                                        <tr>
                                            <th scope="col">Periodo de Tiempo</th>
                                            <th scope="col">Detalles</th>
                                        </tr>
                                        </thead>
                                        <!-- Table body -->
                                        <tbody class="border-top-0">
                                        <tr>
                                            <td>0 horas a 24 horas</td>
                                            <td>No Reembolsable</td>
                                        </tr>
                                        <tr>
                                            <td>24 horas a 365 días</td>
                                            <td>Detalles</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- Table END -->
                            </div>
                        </div>
                    </div>
                    <!-- Content item END -->

                </div>
                <!-- Tab content END -->
            </div>
        </div>
    </div>
</div>
<!-- Cancellation modal END -->

<!-- Baggage and fare START -->
<div class="modal fade" id="baggageFare" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Title -->
            <div class="modal-header">
                <h5 class="modal-title" id="baggageFarelabel">Reglas de equipaje y tarifas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Body -->
            <div class="modal-body p-3">
                <!-- Card START -->
                <div class="card border">
                    <!-- Card header -->
                    <div class="card-header border-bottom">
                        <!-- Title -->
                        <h5 class="card-title mb-0">
                            <img src="assets/images/branding/logo-black.svg" class="img-fluid" width="40" alt="">
                            NLU - JFK
                        </h5>
                    </div>

                    <!-- Card body -->
                    <div class="card-body">
                        <!-- Table START -->
                        <div class="table-responsive-lg">
                            <table class="table table-bordered rounded caption-bottom overflow-hidden mb-0">
                                <!-- Table head -->
                                <thead class="table-dark border-light">
                                <tr>
                                    <th scope="col">Tipo de Equipaje</th>
                                    <th scope="col">Documentado</th>
                                    <th scope="col">Cabina</th>
                                </tr>
                                </thead>
                                <!-- Table body -->
                                <tbody class="border-top-0">
                                <tr>
                                    <td>Adulto</td>
                                    <td>2 PC</td>
                                    <td>7 Kg</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- Table END -->
                    </div>

                    <!-- Card footer -->
                    <div class="card-footer d-flex justify-content-between align-items-center pt-0 px-sm-4">
                        <span>*1PC = 23KG</span>
                        <a href="#" class="btn btn-sm btn-primary-soft mb-0">Añadir Equipaje</a>
                    </div>
                </div>
                <!-- Card END -->

                <!-- Content START -->
                <div class="mt-4 px-2">
                    <span class="badge bg-light text-success mb-2"><i
                                class="bi bi-star-fill me-2"></i>Truco de viaje</span>
                    <h5 class="mb-2">Este itinerario incluye un autotraslado</h5>
                    <p class="mb-0">Tenga en cuenta que es responsabilidad exclusiva del pasajero garantizar su
                        elegibilidad para ingresar a los países de destino o de tránsito (según corresponda). No
                        aceptamos ninguna responsabilidad a este respecto. Consulte las reglas de viaje de todos los
                        sitios web regulatorios antes de reservar y comenzar.</p>
                </div>
                <!-- Content END -->
            </div>
        </div>
    </div>
</div>
<!-- Baggage and fare 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/sticky-js/sticky.min.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>