
<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Premium Bootstrap 5 Landing Page Template" name="description" />
    <meta content="bootstrap 5, premium, marketing, multipurpose" name="keywords" />
    <meta content="Coderthemes" name="author" />
    <!-- Site Title -->
    <title>Housing</title>
    <!-- Material Icon -->
    <link crossorigin="anonymous"
        href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.3.67/css/materialdesignicons.min.css"
        integrity="sha512-nRzny9w0V2Y1/APe+iEhKAwGAc+K8QYCw4vJek3zXhdn92HtKt226zHs9id8eUq+uYJKaH2gPyuLcaG/dE5c7A=="
        referrerpolicy="no-referrer" rel="stylesheet" />
    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&amp;family=Tajawal:wght@200;300;400;500;700;800;900&amp;display=swap"
        rel="stylesheet" />
    <link href="https://arabyai-webpages.s3.me-south-1.amazonaws.com/template_website/testing_template/css/bootstrap.min.css"
        rel="stylesheet" />
    <link class="style" href="css/style.css" rel="stylesheet" />
    <style>
        button {
            font-family: "Poppins";
        }

        .contact_details {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
        }

        @media (min-width: 768px) {
            .contact_details {
                flex-direction: row;
            }
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #00c0d9;
            color: #423f32;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .button i {
            margin-right: 10px;
        }

        .hidden {
            display: none;
        }

    </style>

</head>

<body data-bs-offset="60" data-bs-spy="scroll" data-bs-target=".navbar">
    <nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky-dark" id="navbar-sticky">
        <div class="container">
            <a class="logo text-uppercase" href="/"
                style="display: flex; justify-content: center; gap: 10px; align-items: center">
                <img alt=""
                    src="https://www.una.edu/brand/images/logo/round/UNA-roundLionPurpleW.png.pagespeed.ce.sooHu-qo8w.png"
                    width="50px" />
            </a>
            <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"
                class="navbar-toggler" data-bs-target="#navbarCollapse" data-bs-toggle="collapse" type="button">
                <i class="mdi mdi-menu"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ms-auto navbar-center" id="mySidenav">
                    <li class="nav-item">
                        <a class="nav-link" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="tp">Transportation</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="hous">Housing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://github.com/aalluhaybi1/Sturdy-Train-Team7">Repo</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <h3 style="font-family: Verdana, sans-serif;">This page provides various transportation options including Uber,
            car rental services, and a shuttle service. You can also find contact information at the bottom of the
            page.</h3>
    </div>

    <div class="container my-5">
        <h4>Transportation Options</h4>
        <div class="alert alert-warning" role="alert">
            <strong>Note:</strong> Since the university is located far from the airport, Uber may not be the most convenient option. Renting a car or using the UNA Shuttle service is recommended.
        </div>
        <div class="button-container">
            <style>
                .logo {
                    width: 200px; /* Adjust the width as needed */
                    height: 75px; /* Maintain aspect ratio */
                }
            </style>
            <a href="https://www.uber.com/?campaign_id=427272530&kw=uber&kwid=kwd-77928319634428%3Aloc-113104&uclick_id=c3828b4d-ccdd-4317-999a-2407ba313cd4&utm_campaign=CM2198659-search-bing-brand_1_-99_US-National_o-d_web_acq_cpc_en_Generic_Phrase_uber_kwd-77928319634428%3Aloc-113104__1211662316540068_e_c&utm_source=bing" target="_blank">
                <img src="https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/40/5b/33/405b33f9-03cb-f3bb-4ff4-fd38aa118a47/AppIcon-0-1x_U007emarketing-0-7-0-sRGB-85-220.png/1200x630wa.png" alt="Uber" class="logo">
            </a>
        </div>

        <div class="uber-info hidden">
            <p>Discover the convenience of Uber for your transportation needs. Enjoy reliable rides in minutes with the tap of a button. Get to your destination safely and comfortably, whether it's exploring the city or commuting to work.</p>
            <p>For more information and to book your ride, visit Uber's official website.</p>
        </div>
    
        <div class="button-container">
            <button class="btn btn-primary" onclick="showCarRentalOptions()">Rent Car</button>
            <style>
                .logo {
                    width: 150px; /* Adjust the width as needed */
                    height: 60px; /* Maintain aspect ratio */
                }
            </style>
            <div id="carRentalOptions" class="button-options hidden">
                <a href="https://www.budget.com/en/home" target="_blank">
                    <img src="https://iaidea.com/wp-content/uploads/2014/09/budget-rent-a-car-portada.png" alt="Budget" class="logo">
                </a><br><br>
                <a href="https://www.hertz.com/rentacar/reservation/" target="_blank">
                    <img src="https://assets.simon.com/tenantlogos/28859.png" alt="Hertz" class="logo">
                </a>
            </div>
        </div>
    
        <div class="button-container">
            <button class="btn btn-primary" onclick="toggleShuttleInfo()">
                <i class="fas fa-shuttle-van"></i> UNA Shuttle
            </button>
            <div class="shuttle-info hidden">
                <p><strong>Recommended Option:</strong> UNA provides free airport transportation service from the Huntsville International Airport (HSV) ONLY and only on specific dates prior to each semester/term. To sign up for this service, send the details of your flight (in English) to <a href="mailto:oiaservices@una.edu">oiaservices@una.edu</a>. You will be driven to Florence, Alabama, and brought to a local hotel. You are responsible to pay for one to three nights in the hotel before you can move into the university residences or apartments.</p>
            </div>
        </div>
    </div>

    <div class="form-container" style="margin-top: 20px; max-width: 500px; margin-left: auto; margin-right: auto;">
        <h3 style="text-align: center;">Flight Information</h3>
        <!-- HTML form -->
        <form method="POST" action="/addName" style="margin-top: 20px;">
            <!-- Add CSRF Token -->
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            
            <div style="margin-bottom: 15px;">
                <label for="name" style="display: block; font-weight: bold;">Name:</label>
                <input type="text" id="name" name="name" style="width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
            </div>
            <div style="margin-bottom: 15px;">
                <label for="flightNumber" style="display: block; font-weight: bold;">Flight Number:</label>
                <input type="text" id="flightNumber" name="flightNumber" style="width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
            </div>
            <div style="margin-bottom: 15px;">
                <label for="arrivalDate" style="display: block; font-weight: bold;">Arrival Date:</label>
                <input type="date" id="arrivalDate" name="arrivalDate" style="width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
            </div>
            <div style="margin-bottom: 15px;">
                <label for="email" style="display: block; font-weight: bold;">Email:</label>
                <input type="email" id="email" name="email" style="width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
            </div>
            <div style="margin-bottom: 15px;">
                <label for="mobileNumber" style="display: block; font-weight: bold;">Mobile Number:</label>
                <input type="tel" id="mobileNumber" name="mobileNumber" style="width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
            </div>
            <input type="submit" value="Submit"  style="background-color: #00c0d9; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; font-size: 16px;">
        </form>
    </div>

    <!-- Library Records Section -->
    <section class="py-5" style="background-color: #f8f9fa;">
        <div class="container">
            <div class="row">
                <div class="col-md-9"></div>
                <div class="container-fluid">
                    <!-- FILEPATH: /C:/Users/mrbas/OneDrive/Desktop/repos/aaaaa/templates/hous.ejs -->
                    <div class="card m-4 border-info text-black bg-white">
                        <h4 class="card-title">Library Records: <%= nameData.length %></h4>
                        <div class="card-body">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">Flight Number: </th>
                                        <th scope="col">Arrival Date:</th>                                     
                                        <th scope="col">Email</th>
                                        <th scope="col">Phone</th>
                                        <th scope="col">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% for (var i = 0; i < nameData.length; i++) { %>
                                    <tr>
                                        <td>
                                            <form id="updateForm<%= i %>" method="POST" action="/updateName">
                                                <input type="hidden" name="devId" value="<%= nameData[i]._id %>">
                                                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                                <input type="text" name="name" value="<%= nameData[i].name %>">
                                        </td>
                                        <td>
                                            <input type="text" name="flightNumber" value="<%= nameData[i].flightNumber %>">
                                        </td>
                                        <td>
                                            <input type="text" name="arrivalDate" value="<%= nameData[i].arrivalDate %>">
                                        </td>
                                        <td>
                                            <input type="text" name="email" value="<%= nameData[i].email %>">
                                        </td>
                                        <td>
                                            <input type="text" name="mobileNumber" value="<%= nameData[i].mobileNumber %>">
                                    
                                        <td>
                                            <button class="btn btn-secondary" type="submit"
                                                form="updateForm<%= i %>">Update</button>
                                            </form>
                                            <form method="POST" action="/deleteName">
                                              <input type="hidden" name="devId" value="<%= nameData[i]._id %>">
                                              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                              <button class="btn btn-danger" type="submit" style="background-color: rgba(0, 195, 255, 0.342);">Delete</button>
                                            </form>
                                            </td>
                                    </tr>
                                    <% } %>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        function toggleShuttleInfo() {
            const shuttleInfo = document.querySelector('.shuttle-info');
            shuttleInfo.classList.toggle('hidden');
        }

        function showCarRentalOptions() {
            const carRentalOptions = document.getElementById('carRentalOptions');
            carRentalOptions.classList.toggle('hidden');
        }
    </script>

    <!-- footer & cta start -->
    <section class="footer bg-light" style="padding: 50px 20px; color: black;">
        <div class="pb-0" id="contact">
            <!-- start container -->
            <div class="container" style="padding-bottom: 40px">
                <div class="contact-item">
                    <div class="row align-items-center">
                        <div class="contact-info">
                            <div class="mb-4">
                                <h2>Let's Connect</h2>
                            </div>
                            <hr />
                            <div class="contact_details">
                                <div class="info-content">
                                    <h5>Address :</h5>
                                    <div class="d-flex mt-2">
                                        <div class="icon">
                                            <i class="mdi mdi-home-outline fs-24 text-primary"></i>
                                        </div>
                                        <div class="icon-content ms-3">
                                            <p class="mb-0 fs-15" id="address">123 Main Street</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="info-content">
                                    <h6>Support :</h6>
                                    <div class="d-flex mt-2">
                                        <div class="icon">
                                            <i class="mdi mdi-email-outline fs-24 text-primary"></i>
                                        </div>
                                        <div class="icon-content ms-3">
                                            <p class="mb-0 fs-15" id="email">example@example.com</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="info-content">
                                    <h6>Phone :</h6>
                                    <div class="d-flex mt-2">
                                        <div class="icon">
                                            <i class="mdi mdi-phone-outline fs-24 text-primary"></i>
                                        </div>
                                        <div class="icon-content ms-3">
                                            <p class="mb-0 fs-15" id="mob_no">+1234567890</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center p-4" style="background-color: #064158;">
            Â© 2024 Copyright: Saleh Basalim - Ayman Aalluhaybi
        </div>
    </section>
    <!-- footer & cta end -->
</body>

</html>
