<html lang="en">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1" />

<title>Admin Dashboard</title>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<header class="top">

<button id="themeToggle">🌙 Dark Mode</button>

<h1>Admin — Flights</h1>

<div>

<button id="btnHome">Search Flights</button>

<button id="btnLogout">Logout</button>

</div>

</header>

<main class="container">

<section class="card">

<h2>Create / Edit Flight</h2>

<form id="flightForm">

<input type="hidden" name="id" />

<label

>Airline

<select name="airline" required>

<option>IndiGo</option>

<option>Air India</option>

<option>Vistara</option>

<option>SpiceJet</option>

<option>Go First</option>

<option>Emirates</option>

<option>Qatar Airways</option>

<option>Singapore Airlines</option>

</select>

</label>

<label

>Aircraft Type

<select name="aircraftType" id="aircraftType" required>

<option value="">Select Type</option>

</select>

</label>

<label>Source <input name="source" required /></label>

<label>Destination <input name="destination" required /></label>

<label

>Departure (datetime-local)

<input name="departureTime" type="datetime-local" required />

</label>

<label

>Arrival (datetime-local)

<input name="arrivalTime" type="datetime-local" required />

</label>

<label

>Fare <input name="fare" type="number" step="0.01" required

/></label>

<label

>Seats Available

<input

name="seatsAvailable"

id="seatsAvailable"

type="number"

required

readonly

/>

</label>

<label>Seat Map Preview</label>

<div id="seatPreview" class="seat-preview">

<p>Select an aircraft type to see the layout.</p>

</div>

<div class="row">

<button type="submit">Save</button>

<button type="button" id="btnReset">Reset</button>

</div>

</form>

</section>

<section class="card">

<h2>Flights</h2>

<div class="row">

<button id="btnGenerate">Generate Sample Flights</button>

<input

id="fetchIata"

placeholder="Departure IATA (e.g. DEL)"

/>

<button id="btnFetch">Fetch Real Flights</button>

</div>

<div id="adminFlights">Loading...</div>

</section>

<section class="card">

<h2>Reports</h2>

<pre id="reportsArea">Loading...</pre>

</section>

</main>

<script src="app.js"></script>

<script>

ensureAuth();

document.getElementById("btnLogout").addEventListener("click", logout);

document

.getElementById("btnHome")

.addEventListener("click", () => (location.href = "flights.html"));

const flightForm = document.getElementById("flightForm");

flightForm.addEventListener("submit", async (e) => {

e.preventDefault();

const data = Object.fromEntries(new FormData(flightForm));

const payload = {

airline: data.airline,

aircraftType: data.aircraftType,

source: data.source,

destination: data.destination,

departureTime: new Date(data.departureTime).toISOString(),

arrivalTime: new Date(data.arrivalTime).toISOString(),

fare: Number(data.fare),

seatsAvailable: Number(data.seatsAvailable),

};

try {

if (data.id) {

await apiPut("/admin/flights/" + data.id, payload);

alert("Updated");

} else {

await apiPost("/admin/flights", payload);

alert("Created");

}

resetForm();

loadFlights();

loadReports();

} catch (err) {

alert("Save failed: " + (err.message || JSON.stringify(err)));

}

});

document.getElementById("btnReset").addEventListener("click", resetForm);

function resetForm() {

flightForm.reset();

flightForm.id.value = "";

}

let aircraftMetadata = {};

const aircraftTypeSelect = document.getElementById("aircraftType");

const seatsAvailableInput = document.getElementById("seatsAvailable");

const seatPreview = document.getElementById("seatPreview");

async function loadAircraftMetadata() {

try {

aircraftMetadata = await apiGet("/flights/aircraft-metadata");

console.log("Loaded aircraft metadata:", aircraftMetadata);

} catch (err) {

console.error("Failed to fetch aircraft metadata:", err);

}

//Load data into aircraftType

for (const type in aircraftMetadata) {

const option = document.createElement("option");

option.value = type;

option.textContent = `${type} (${aircraftMetadata[type].totalSeats} seats)`;

aircraftTypeSelect.appendChild(option);

}

}

aircraftTypeSelect.addEventListener("change", () => {

const type = aircraftTypeSelect.value;

const layout = aircraftMetadata[type];

if (!layout) {

seatsAvailableInput.value = "";

seatPreview.innerHTML =

"<p>Select an aircraft type to see the layout.</p>";

return;

}

// Update seat count

seatsAvailableInput.value = layout.totalSeats;

// Generate seat preview grid

let html = "";

for (let r = 1; r <= layout.rows; r++) {

html += `<div class="seat-row"><span class="row-label">${r}</span>`;

for (const c of layout.cols) {

html += `<div class="seat">${r}${c}</div>`;

}

html += `</div>`;

}

seatPreview.innerHTML = html;

});

async function loadFlights() {

const flights = await apiGet("/flights");

if (!flights || flights.length === 0) {

document.getElementById("adminFlights").innerHTML =

"<p>No flights.</p>";

return;

}

const html = flights

.map(

(f) => `

)

.join("");

document.getElementById("adminFlights").innerHTML = html;

document.querySelectorAll(".btnEdit").forEach((b) =>

b.addEventListener("click", async (e) => {

const id = e.target.dataset.id;

const flights = await apiGet("/flights");

const f = flights.find((x) => String(x.id) === id);

if (!f) return alert("Flight not found");

flightForm.id.value = f.id;

flightForm.airline.value = f.airline;

flightForm.source.value = f.source;

flightForm.destination.value = f.destination;

flightForm.departureTime.value = toLocalInput(f.departureTime);

flightForm.arrivalTime.value = toLocalInput(f.arrivalTime);

flightForm.fare.value = f.fare;

flightForm.seatsAvailable.value = f.seatsAvailable;

window.scrollTo(0, 0);

})

);

document.querySelectorAll(".btnDel").forEach((b) =>

b.addEventListener("click", async (e) => {

if (!confirm("Delete flight?")) return;

const id = e.target.dataset.id;

try {

await apiDelete("/admin/flights/" + id);

alert("Deleted");

loadFlights();

loadReports();

} catch (err) {

alert("Delete failed");

}

})

);

}

async function loadReports() {

const rep = await apiGet("/admin/reports");

document.getElementById("reportsArea").textContent = JSON.stringify(

rep,

null,

2

);

}

document

.getElementById("btnGenerate")

.addEventListener("click", async () => {

const count = prompt("How many random flights to generate?", "20");

if (!count) return;

try {

const res = await apiPost(

`/admin/flights/generate?count=${encodeURIComponent(count)}`

);

alert(res);

loadFlights();

loadReports();

} catch (err) {

alert("Generation failed: " + (err.message || JSON.stringify(err)));

}

});

document

.getElementById("btnFetch")

.addEventListener("click", async () => {

const depIata =

document.getElementById("fetchIata").value.trim() || "DEL";

try {

const res = await apiPost(

`/admin/flights/fetch?depIata=${encodeURIComponent(depIata)}`

);

alert(res);

loadFlights();

loadReports();

} catch (err) {

alert("Fetch failed: " + (err.message || JSON.stringify(err)));

}

});

loadAircraftMetadata();

loadFlights();

loadReports();

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<script>

const themeToggle = document.getElementById("themeToggle");

// Load saved theme

if (localStorage.getItem("theme") === "dark") {

document.body.classList.add("dark");

themeToggle.textContent = "☀️ Light Mode";

}

// Toggle theme on click

themeToggle.addEventListener("click", () => {

document.body.classList.toggle("dark");

const isDark = document.body.classList.contains("dark");

localStorage.setItem("theme", isDark ? "dark" : "light");

themeToggle.textContent = isDark ? "☀️ Light Mode" : "🌙 Dark Mode";

});

</script>

<canvas

id="ambientCanvas"

style="

"

></canvas>

<script>

const canvas = document.getElementById("ambientCanvas");

const ctx = canvas.getContext("2d");

let particles = [];

function resizeCanvas() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

}

resizeCanvas();

window.addEventListener("resize", resizeCanvas);

// Generate particles

for (let i = 0; i < 50; i++) {

particles.push({

x: Math.random() * canvas.width,

y: Math.random() * canvas.height,

r: Math.random() * 3 + 1,

dx: (Math.random() - 0.5) * 0.4,

dy: (Math.random() - 0.5) * 0.4,

});

}

function animate() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "rgba(255,255,255,0.85)";

particles.forEach((p) => {

ctx.beginPath();

ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);

ctx.fill();

p.x += p.dx;

p.y += p.dy;

if (p.x < 0 || p.x > canvas.width) p.dx *= -1;

if (p.y < 0 || p.y > canvas.height) p.dy *= -1;

});

requestAnimationFrame(animate);

}

animate();

</script>

<script>

anime({

targets: ".card, .top",

opacity: [0, 1],

translateY: [20, 0],

duration: 900,

delay: anime.stagger(120),

easing: "easeOutQuint",

});

</script>

</body>