OneCompiler

AMS_sprint1_UI_1

1635

UI_1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carrier Information Form</title> <style> body { background-image: url('ui.jpg'); /* Replace with your background image */ background-size: cover; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; } 
    .form-container {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 20px;
        border-radius: 10px;
        width: 400px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    h2 {
        margin-bottom: 10px;
        color: #333;
    }

    label {
        font-weight: bold;
        margin-top: 10px;
        display: block;
        text-align: left;
    }

    input[type="text"],
    input[type="number"] {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    hr {
        margin: 15px 0;
    }

    .success-message {
        display: none;
        background-color: #d4edda;
        color: #155724;
        padding: 10px;
        border-radius: 5px;
        margin-top: 20px;
    }

    .btn {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: #45a049;
    }
</style>
</head> <body> <div class="form-container"> <h2>Enter Carrier Information</h2> 
<label for="carrierName">Carrier Name</label>
<input type="text" id="carrierName" maxlength="50" placeholder="Enter Carrier Name">

<label>Discount Percentage</label>
<hr>

<label for="advance30">30 Days Advance Booking</label>
<input type="number" id="advance30" placeholder="Enter number">

<label for="advance60">60 Days Advance Booking</label>
<input type="number" id="advance60" placeholder="Enter number">

<label for="advance90">90 Days Advance Booking</label>
<input type="number" id="advance90" placeholder="Enter number">

<label for="bulkBooking">Bulk Booking</label>
<input type="number" id="bulkBooking" placeholder="Enter number">

<label for="silverUser">Silver User</label>
<input type="number" id="silverUser" placeholder="Enter number">

<label for="goldUser">Gold User</label>
<input type="number" id="goldUser" placeholder="Enter number">

<label for="platinumUser">Platinum User</label>
<input type="number" id="platinumUser" placeholder="Enter number">

<label>Refund Percentage</label>
<hr>

<label for="refund2Days">2 Days Before Travel Date</label>
<input type="number" id="refund2Days" placeholder="Enter number">

<label for="refund10Days">10 Days Before Travel Date</label>
<input type="number" id="refund10Days" placeholder="Enter number">

<label for="refund20Days">20 Days Or More Before Travel Date</label>
<input type="number" id="refund20Days" placeholder="Enter number">

<button class="btn" onclick="saveCarrier()">Add Carrier</button>

<div class="success-message" id="successMessage">
    Carrier Information Saved Successfully!!! - Carried ID generated is <span id="carrierId">123456</span>
</div>
</div> <script> function saveCarrier() { const carrierName = document.getElementById('carrierName').value; const advance30 = document.getElementById('advance30').value; const advance60 = document.getElementById('advance60').value; const advance90 = document.getElementById('advance90').value; const bulkBooking = document.getElementById('bulkBooking').value; const silverUser = document.getElementById('silverUser').value; const goldUser = document.getElementById('goldUser').value; const platinumUser = document.getElementById('platinumUser').value; const refund2Days = document.getElementById('refund2Days').value; const refund10Days = document.getElementById('refund10Days').value; const refund20Days = document.getElementById('refund20Days').value; const carrierData = { carrierName, advance30, advance60, advance90, bulkBooking, silverUser, goldUser, platinumUser, refund2Days, refund10Days, refund20Days }; // Save the data in localStorage const carrierId = Math.floor(Math.random() * 1000000); // Simulate Carrier ID generation localStorage.setItem(`carrier_${carrierId}`, JSON.stringify(carrierData)); // Show success message document.getElementById('carrierId').innerText = carrierId; document.getElementById('successMessage').style.display = 'block'; } </script> </body> </html>

UI_2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Edit/Delete Carrier Information</title> <style> body { background-image: url('background.jpg'); /* Replace with your background image */ background-size: cover; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; } 
    .form-container {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 20px;
        border-radius: 10px;
        width: 400px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    h2 {
        margin-bottom: 10px;
        color: #333;
    }

    label {
        font-weight: bold;
        margin-top: 10px;
        display: block;
        text-align: left;
    }

    select, input[type="text"], input[type="number"] {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    hr {
        margin: 15px 0;
    }

    .btn {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }

    .btn:hover {
        background-color: #45a049;
    }

    .delete-btn {
        background-color: #f44336;
    }

    .delete-btn:hover {
        background-color: #e57373;
    }

    .success-message {
        display: none;
        background-color: #d4edda;
        color: #155724;
        padding: 10px;
        border-radius: 5px;
        margin-top: 20px;
    }

    .error-message {
        display: none;
        background-color: #f8d7da;
        color: #721c24;
        padding: 10px;
        border-radius: 5px;
        margin-top: 20px;
    }
</style>
</head> <body> <div class="form-container"> <h2>Edit/Delete Carrier Information</h2> 
<!-- Carrier Selection -->
<label for="carrierSelect">Carrier Name</label>
<select id="carrierSelect">
    <!-- Dynamically populated options -->
</select>

<button class="btn" onclick="searchCarrier()">Search</button>

<!-- Carrier Details Form -->
<div id="carrierDetailsForm" style="display:none;">
    <label for="carrierName">Carrier Name</label>
    <input type="text" id="carrierName" readonly>

    <label>Discount Percentage</label>
    <hr>

    <label for="advance60">60 Days Advance Booking</label>
    <input type="number" id="advance60">

    <label for="advance90">90 Days Advance Booking</label>
    <input type="number" id="advance90">

    <label for="bulkBooking">Bulk Booking</label>
    <input type="number" id="bulkBooking">

    <label for="silverUser">Silver User</label>
    <input type="number" id="silverUser">

    <label for="goldUser">Gold User</label>
    <input type="number" id="goldUser">

    <label for="platinumUser">Platinum User</label>
    <input type="number" id="platinumUser">

    <label>Refund Percentage</label>
    <hr>

    <label for="refund2Days">2 Days Before Travel Date</label>
    <input type="number" id="refund2Days">

    <label for="refund10Days">10 Days Before Travel Date</label>
    <input type="number" id="refund10Days">

    <label for="refund20Days">20 Days Or More Before Travel Date</label>
    <input type="number" id="refund20Days">

    <button class="btn" onclick="editCarrier()">Edit Carrier</button>
    <button class="btn delete-btn" onclick="deleteCarrier()">Delete Carrier</button>
</div>

<div class="success-message" id="successMessage"></div>
<div class="error-message" id="errorMessage"></div>
</div> <script> // Function to load carrier data from localStorage and populate the carrier dropdown function loadCarriers() { const carrierSelect = document.getElementById('carrierSelect'); carrierSelect.innerHTML = ''; // Clear previous options Object.keys(localStorage).forEach(key => { if (key.startsWith('carrier_')) { const carrier = JSON.parse(localStorage.getItem(key)); const option = document.createElement('option'); option.value = key; option.text = carrier.carrierName; carrierSelect.appendChild(option); } }); } // Function to search carrier details and populate the form function searchCarrier() { const carrierKey = document.getElementById('carrierSelect').value; if (carrierKey) { const carrier = JSON.parse(localStorage.getItem(carrierKey)); document.getElementById('carrierName').value = carrier.carrierName; document.getElementById('advance60').value = carrier.advance60; document.getElementById('advance90').value = carrier.advance90; document.getElementById('bulkBooking').value = carrier.bulkBooking; document.getElementById('silverUser').value = carrier.silverUser; document.getElementById('goldUser').value = carrier.goldUser; document.getElementById('platinumUser').value = carrier.platinumUser; document.getElementById('refund2Days').value = carrier.refund2Days; document.getElementById('refund10Days').value = carrier.refund10Days; document.getElementById('refund20Days').value = carrier.refund20Days; document.getElementById('carrierDetailsForm').style.display = 'block'; } else { document.getElementById('errorMessage').innerText = "No carrier selected!"; document.getElementById('errorMessage').style.display = 'block'; } } // Function to edit and update the carrier details function editCarrier() { const carrierKey = document.getElementById('carrierSelect').value; const carrier = { carrierName: document.getElementById('carrierName').value, advance60: document.getElementById('advance60').value, advance90: document.getElementById('advance90').value, bulkBooking: document.getElementById('bulkBooking').value, silverUser: document.getElementById('silverUser').value, goldUser: document.getElementById('goldUser').value, platinumUser: document.getElementById('platinumUser').value, refund2Days: document.getElementById('refund2Days').value, refund10Days: document.getElementById('refund10Days').value, refund20Days: document.getElementById('refund20Days').value }; localStorage.setItem(carrierKey, JSON.stringify(carrier)); document.getElementById('successMessage').innerText = `${carrier.carrierName} details are updated successfully`; document.getElementById('successMessage').style.display = 'block'; } // Function to delete the carrier from localStorage function deleteCarrier() { const carrierKey = document.getElementById('carrierSelect').value; localStorage.removeItem(carrierKey); document.getElementById('successMessage').innerText = `Carrier detail is removed from the system`; document.getElementById('successMessage').style.display = 'block'; document.getElementById('carrierDetailsForm').style.display = 'none'; loadCarriers(); // Reload the carrier list } // Load carriers on page load window.onload = loadCarriers; </script> </body> </html>

UI_3

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Feed Flight Information</title> <style> body { background-image: url('background.jpg'); /* Replace with your background image */ background-size: cover; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; } 
    .form-container {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 20px;
        border-radius: 10px;
        width: 400px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    h2 {
        margin-bottom: 10px;
        color: #333;
    }

    label {
        font-weight: bold;
        margin-top: 10px;
        display: block;
        text-align: left;
    }

    select, input[type="text"], input[type="number"] {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .btn {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }

    .btn:hover {
        background-color: #45a049;
    }

    .success-message {
        display: none;
        background-color: #d4edda;
        color: #155724;
        padding: 10px;
        border-radius: 5px;
        margin-top: 20px;
    }

</style>
</head> <body> <div class="form-container"> <h2>Feed Flight Information</h2> 
<!-- Carrier Selection -->
<label for="carrierSelect">Carrier Name</label>
<select id="carrierSelect">
    <!-- Dynamically populated options -->
</select>

<!-- Origin and Destination -->
<label for="origin">Origin</label>
<select id="origin">
    <!-- Dynamically populated options -->
</select>

<label for="destination">Destination</label>
<select id="destination">
    <!-- Dynamically populated options -->
</select>

<!-- Air Fare -->
<label for="airFare">Air Fare</label>
<input type="number" id="airFare" placeholder="Enter Air Fare" />

<!-- Seat Capacities -->
<label for="seatBusiness">Seat Capacity (Business Class)</label>
<input type="number" id="seatBusiness" placeholder="Enter Business Class Seats" />

<label for="seatEconomy">Seat Capacity (Economy Class)</label>
<input type="number" id="seatEconomy" placeholder="Enter Economy Class Seats" />

<label for="seatExecutive">Seat Capacity (Executive Class)</label>
<input type="number" id="seatExecutive" placeholder="Enter Executive Class Seats" />

<!-- Add Flight Button -->
<button class="btn" onclick="addFlight()">Add Flight</button>

<a href="UI_4.html" class="btn" style="margin-top: 20px;">Go to Edit/Delete Flight Information</a>

<!-- Success Message -->
<div class="success-message" id="successMessage"></div>
</div> <script> // Function to load carrier and location data function loadData() { const carrierSelect = document.getElementById('carrierSelect'); const originSelect = document.getElementById('origin'); const destinationSelect = document.getElementById('destination'); // Sample carrier data from localStorage Object.keys(localStorage).forEach(key => { if (key.startsWith('carrier_')) { const carrier = JSON.parse(localStorage.getItem(key)); const option = document.createElement('option'); option.value = carrier.carrierName; option.text = carrier.carrierName; carrierSelect.appendChild(option); } }); // Sample city/country data const locations = ['New York', 'London', 'Tokyo', 'Paris', 'Mumbai', 'Sydney']; locations.forEach(location => { const optionOrigin = document.createElement('option'); optionOrigin.value = location; optionOrigin.text = location; originSelect.appendChild(optionOrigin); const optionDestination = document.createElement('option'); optionDestination.value = location; optionDestination.text = location; destinationSelect.appendChild(optionDestination); }); } // Function to add flight information to localStorage function addFlight() { const carrier = document.getElementById('carrierSelect').value; const origin = document.getElementById('origin').value; const destination = document.getElementById('destination').value; const airFare = document.getElementById('airFare').value; const seatBusiness = document.getElementById('seatBusiness').value; const seatEconomy = document.getElementById('seatEconomy').value; const seatExecutive = document.getElementById('seatExecutive').value; // Static flight ID (could be dynamically generated in a real-world scenario) const flightId = 'FL123'; // Flight object const flight = { carrier, origin, destination, airFare, seatBusiness, seatEconomy, seatExecutive, flightId }; // Save flight information to localStorage localStorage.setItem(`flight_${flightId}`, JSON.stringify(flight)); // Display success message document.getElementById('successMessage').innerText = `Flight Information Saved Successfully!!! - Flight ID generated is ${flightId}`; document.getElementById('successMessage').style.display = 'block'; } // Load carrier and location data on page load window.onload = loadData; </script> </body> </html>

UI_4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Edit/Delete Flight Information</title> <style> body { background-image: url('background.jpg'); background-size: cover; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; } 
    .container {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 20px;
        border-radius: 10px;
        width: 500px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    h2 {
        color: #333;
    }

    label {
        font-weight: bold;
        margin-top: 10px;
        display: block;
        text-align: left;
    }

    select, input[type="text"], input[type="number"] {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .btn {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }

    .btn:hover {
        background-color: #45a049;
    }

    .success-message {
        display: none;
        background-color: #d4edda;
        color: #155724;
        padding: 10px;
        border-radius: 5px;
        margin-top: 20px;
    }

    .flight-details {
        margin-top: 20px;
        display: none;
    }
</style>
</head> <body> <div class="container"> <h2>Edit/Delete Flight Information</h2> 
    <label for="carrierSelect">Carrier Name</label>
    <select id="carrierSelect"></select>

    <label for="originSelect">Origin</label>
    <select id="originSelect"></select>

    <label for="destinationSelect">Destination</label>
    <select id="destinationSelect"></select>

    <button class="btn" onclick="searchFlight()">Search</button>

    <div class="flight-details" id="flightDetails">
        <h3>Flight Details</h3>

        <label for="carrierName">Carrier Name</label>
        <input type="text" id="carrierName" disabled />

        <label for="editOrigin">Origin</label>
        <input type="text" id="editOrigin" />

        <label for="editDestination">Destination</label>
        <input type="text" id="editDestination" />

        <label for="editAirFare">Air Fare</label>
        <input type="number" id="editAirFare" placeholder="Enter Air Fare" />

        <label for="editSeatBusiness">Seat Capacity (Business Class)</label>
        <input type="number" id="editSeatBusiness" placeholder="Enter Business Class Seats" />

        <label for="editSeatEconomy">Seat Capacity (Economy Class)</label>
        <input type="number" id="editSeatEconomy" placeholder="Enter Economy Class Seats" />

        <label for="editSeatExecutive">Seat Capacity (Executive Class)</label>
        <input type="number" id="editSeatExecutive" placeholder="Enter Executive Class Seats" />

        <button class="btn" onclick="editFlight()">Edit Flight</button>
        <button class="btn" onclick="deleteFlight()">Delete Flight</button>
    </div>

    <div class="success-message" id="successMessage"></div>
</div>

<script>
    // Load the available carrier and location data
    function loadData() {
        const carrierSelect = document.getElementById('carrierSelect');
        const originSelect = document.getElementById('originSelect');
        const destinationSelect = document.getElementById('destinationSelect');

        // Sample carrier and location data
        const carriers = ['Air India', 'Delta', 'American Airlines', 'Qatar Airways'];
        const locations = ['New York', 'London', 'Tokyo', 'Paris', 'Mumbai', 'Sydney'];

        carriers.forEach(carrier => {
            const option = document.createElement('option');
            option.value = carrier;
            option.text = carrier;
            carrierSelect.appendChild(option);
        });

        locations.forEach(location => {
            const optionOrigin = document.createElement('option');
            optionOrigin.value = location;
            optionOrigin.text = location;
            originSelect.appendChild(optionOrigin);

            const optionDestination = document.createElement('option');
            optionDestination.value = location;
            optionDestination.text = location;
            destinationSelect.appendChild(optionDestination);
        });
    }

    // Search for flight based on criteria
    function searchFlight() {
        const carrier = document.getElementById('carrierSelect').value;
        const origin = document.getElementById('originSelect').value;
        const destination = document.getElementById('destinationSelect').value;

        // Iterate over localStorage to find a matching flight
        let foundFlightKey = null;
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const flight = JSON.parse(localStorage.getItem(key));

            if (flight && flight.carrier === carrier && flight.origin === origin && flight.destination === destination) {
                foundFlightKey = key;
                break;
            }
        }

        if (foundFlightKey) {
            // Display flight details in the form
            const flight = JSON.parse(localStorage.getItem(foundFlightKey));
            document.getElementById('flightDetails').style.display = 'block';

            document.getElementById('carrierName').value = flight.carrier;
            document.getElementById('editOrigin').value = flight.origin;
            document.getElementById('editDestination').value = flight.destination;
            document.getElementById('editAirFare').value = flight.airFare;
            document.getElementById('editSeatBusiness').value = flight.seatBusiness;
            document.getElementById('editSeatEconomy').value = flight.seatEconomy;
            document.getElementById('editSeatExecutive').value = flight.seatExecutive;

            // Save the found flight ID for later operations
            document.getElementById('flightDetails').dataset.flightKey = foundFlightKey;
        } else {
            alert('No flight found for the selected criteria.');
        }
    }

    // Edit flight details and save back to localStorage
    function editFlight() {
        const flightKey = document.getElementById('flightDetails').dataset.flightKey;
        const carrier = document.getElementById('carrierName').value;
        const origin = document.getElementById('editOrigin').value;
        const destination = document.getElementById('editDestination').value;
        const airFare = document.getElementById('editAirFare').value;
        const seatBusiness = document.getElementById('editSeatBusiness').value;
        const seatEconomy = document.getElementById('editSeatEconomy').value;
        const seatExecutive = document.getElementById('editSeatExecutive').value;

        const updatedFlight = {
            carrier,
            origin,
            destination,
            airFare,
            seatBusiness,
            seatEconomy,
            seatExecutive
        };

        localStorage.setItem(flightKey, JSON.stringify(updatedFlight));

        document.getElementById('successMessage').innerText = "Flight Information Updated Successfully!!!";
        document.getElementById('successMessage').style.display = 'block';
    }

    // Delete the flight from localStorage
    function deleteFlight() {
        const flightKey = document.getElementById('flightDetails').dataset.flightKey;

        localStorage.removeItem(flightKey);

        document.getElementById('flightDetails').style.display = 'none';
        document.getElementById('successMessage').innerText = "Flight details are removed Successfully!!!";
        document.getElementById('successMessage').style.display = 'block';
    }

    // Load carrier and location data on page load
    window.onload = loadData;
</script>
</body> </html>

UI_5

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flight Booking</title> <style> body { background-image: url('background.jpg'); background-size: cover; margin: 0; font-family: Arial, sans-serif; height: 100vh; display: flex; flex-direction: column; } 
    nav {
        background-color: #333;
        color: white;
        padding: 15px;
        text-align: center;
        font-size: 18px;
        position: fixed;
        width: 100%;
        top: 0;
    }

    .container {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 20px;
        border-radius: 10px;
        margin: 100px auto;
        width: 60%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    h2 {
        color: #333;
    }

    label {
        font-weight: bold;
        margin-top: 10px;
        display: block;
        text-align: left;
    }

    select, input[type="date"] {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    table, th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    th {
        background-color: #4CAF50;
        color: white;
    }

    td {
        text-align: center;
    }

    .btn {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: #45a049;
    }

    .success-message {
        display: none;
        background-color: #d4edda;
        color: #155724;
        padding: 10px;
        border-radius: 5px;
        margin-top: 20px;
    }
</style>
</head> <body> 
<!-- Navigation Bar -->
<nav>
    Flight Booking System
</nav>

<!-- Main Container -->
<div class="container">
    <h2>Search Available Flights</h2>

    <label for="carrierSelect">Carrier Name</label>
    <select id="carrierSelect"></select>

    <label for="originSelect">Origin</label>
    <select id="originSelect"></select>

    <label for="destinationSelect">Destination</label>
    <select id="destinationSelect"></select>

    <label for="travelDate">Travel Date</label>
    <input type="date" id="travelDate" />

    <button class="btn" onclick="searchFlights()">Search Flights</button>

    <!-- Flight Details Table -->
    <table id="flightTable" style="display:none;">
        <thead>
            <tr>
                <th>Flight ID</th>
                <th>No. of Seats</th>
                <th>Seat Category</th>
                <th>Travel Date</th>
                <th>Book</th>
            </tr>
        </thead>
        <tbody id="flightTableBody">
            <!-- Flight rows will be inserted here dynamically -->
        </tbody>
    </table>

    <!-- Success Message -->
    <div class="success-message" id="successMessage"></div>
</div>

<script>
    // Load available carrier and location data
    function loadData() {
        const carrierSelect = document.getElementById('carrierSelect');
        const originSelect = document.getElementById('originSelect');
        const destinationSelect = document.getElementById('destinationSelect');

        // Sample carrier and location data
        const carriers = ['Air India', 'Delta', 'American Airlines', 'Qatar Airways'];
        const locations = ['New York', 'London', 'Tokyo', 'Paris', 'Mumbai', 'Sydney'];

        carriers.forEach(carrier => {
            const option = document.createElement('option');
            option.value = carrier;
            option.text = carrier;
            carrierSelect.appendChild(option);
        });

        locations.forEach(location => {
            const optionOrigin = document.createElement('option');
            optionOrigin.value = location;
            optionOrigin.text = location;
            originSelect.appendChild(optionOrigin);

            const optionDestination = document.createElement('option');
            optionDestination.value = location;
            optionDestination.text = location;
            destinationSelect.appendChild(optionDestination);
        });
    }

    // Search for flights based on criteria
    function searchFlights() {
        const carrier = document.getElementById('carrierSelect').value;
        const origin = document.getElementById('originSelect').value;
        const destination = document.getElementById('destinationSelect').value;
        const travelDate = document.getElementById('travelDate').value;

        const flightTable = document.getElementById('flightTable');
        const flightTableBody = document.getElementById('flightTableBody');
        flightTableBody.innerHTML = ''; // Clear existing rows

        let foundFlights = [];

        // Search flights in localStorage
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const flight = JSON.parse(localStorage.getItem(key));

            if (flight && flight.carrier === carrier && flight.origin === origin && flight.destination === destination) {
                foundFlights.push(flight);
            }
        }

        // If flights are found, display them in the table
        if (foundFlights.length > 0) {
            flightTable.style.display = 'table';

            foundFlights.forEach(flight => {
                const row = document.createElement('tr');

                row.innerHTML = `
                    <td>${flight.flightID}</td>
                    <td>${flight.seatEconomy + flight.seatBusiness + flight.seatExecutive}</td>
                    <td>Economy, Business, Executive</td>
                    <td>${travelDate}</td>
                    <td><button class="btn" onclick="bookFlight('${flight.flightID}')">Book</button></td>
                `;

                flightTableBody.appendChild(row);
            });
        } else {
            alert('No flights found matching the criteria.');
            flightTable.style.display = 'none';
        }
    }

    // Function to book the flight
    function bookFlight(flightID) {
        const successMessage = document.getElementById('successMessage');
        successMessage.innerText = `Flight ID - ${flightID} is booked successfully!`;
        successMessage.style.display = 'block';
    }

    // Load carrier and location data on page load
    window.onload = loadData;
</script>
</body> </html>