diff --git a/SD.html b/SD.html
new file mode 100644
index 0000000000000000000000000000000000000000..dc5f7c9c9cc1442b075272671c766aeef801e7e3
--- /dev/null
+++ b/SD.html
@@ -0,0 +1,4626 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Horizon Cinemas</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <script src="https://unpkg.com/marked@4.0.2/marked.min.js"></script>
+ <script>
+ tailwind.config = {
+ theme: {
+ extend: {
+ colors: {
+ primary: '#5D5CDE',
+ secondary: '#F3F4F6',
+ dark: {
+ primary: '#7A79E8',
+ secondary: '#2D2D2D'
+ }
+ }
+ }
+ },
+ darkMode: 'class'
+ }
+
+ // Check for dark mode preference
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.documentElement.classList.add('dark');
+ }
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+ if (event.matches) {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ });
+ </script>
+ <style>
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+ body {
+ font-family: 'Poppins', sans-serif;
+ transition: background-color 0.3s, color 0.3s;
+ }
+
+ .dark body {
+ background-color: #181818;
+ color: #fff;
+ }
+
+ .screen {
+ background-color: #ddd;
+ height: 10px;
+ border-radius: 50%;
+ margin-bottom: 30px;
+ width: 80%;
+ text-align: center;
+ }
+
+ .seat {
+ width: 24px;
+ height: 24px;
+ margin: 3px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 10px;
+ color: rgba(0,0,0,0.6);
+ }
+
+ .seat.vip {
+ background-color: #FFD700;
+ }
+
+ .seat.lower {
+ background-color: #78BBFA;
+ }
+
+ .seat.upper {
+ background-color: #9DCFFC;
+ }
+
+ .seat.selected {
+ background-color: #5D5CDE;
+ color: white;
+ }
+
+ .seat.occupied {
+ background-color: #444;
+ cursor: not-allowed;
+ color: rgba(255,255,255,0.6);
+ }
+
+ .dark .seat.lower {
+ background-color: #4A6D8C;
+ }
+
+ .dark .seat.upper {
+ background-color: #5A7E9D;
+ }
+
+ .dark .seat.vip {
+ background-color: #AA8F00;
+ }
+
+ .dark .screen {
+ background-color: #555;
+ }
+
+ .tab {
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .tab.active {
+ border-bottom: 2px solid #5D5CDE;
+ color: #5D5CDE;
+ }
+
+ .dark .tab.active {
+ border-bottom: 2px solid #7A79E8;
+ color: #7A79E8;
+ }
+
+ .slideIn {
+ animation: slideIn 0.3s forwards;
+ }
+
+ @keyframes slideIn {
+ from { transform: translateY(-20px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+ }
+
+ .pulse {
+ animation: pulse 2s infinite;
+ }
+
+ @keyframes pulse {
+ 0% { opacity: 0.7; }
+ 50% { opacity: 1; }
+ 100% { opacity: 0.7; }
+ }
+
+ .film-poster {
+ height: 200px;
+ object-fit: cover;
+ border-radius: 8px;
+ }
+
+ /* Print styles for receipt */
+ @media print {
+ body * {
+ visibility: hidden;
+ }
+ #printableReceipt, #printableReceipt * {
+ visibility: visible;
+ }
+ #printableReceipt {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ }
+ }
+ </style>
+</head>
+<body class="bg-white dark:bg-[#181818] text-gray-900 dark:text-gray-100 min-h-screen">
+ <!-- Header -->
+ <header class="bg-white dark:bg-[#222] shadow-md">
+ <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
+ <div class="flex items-center mb-4 md:mb-0">
+ <h1 class="text-2xl font-bold text-primary dark:text-dark-primary">
+ HORIZON CINEMAS
+ </h1>
+ </div>
+ <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-4">
+ <div class="relative" id="userInfoContainer">
+ <button id="userMenuButton" class="flex items-center space-x-2 text-gray-700 dark:text-gray-300 px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+ <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+ </svg>
+ <span id="currentUser">Guest</span>
+ </button>
+ <div id="userMenu" class="hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-10">
+ <div class="py-1">
+ <div class="flex flex-col px-4 py-2 text-sm">
+ <span class="font-medium">User Role</span>
+ <select id="roleSelector" class="mt-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded px-2 py-1 text-base">
+ <option value="staff">Booking Staff</option>
+ <option value="admin">Admin</option>
+ <option value="manager">Manager</option>
+ </select>
+ </div>
+ <div class="flex flex-col px-4 py-2 text-sm">
+ <span class="font-medium">Cinema Location</span>
+ <select id="locationSelector" class="mt-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded px-2 py-1 text-base">
+ <option value="Birmingham-Central">Birmingham Central</option>
+ <option value="Birmingham-East">Birmingham East</option>
+ <option value="Bristol-Main">Bristol Main</option>
+ <option value="Bristol-Harbour">Bristol Harbour</option>
+ <option value="Cardiff-Bay">Cardiff Bay</option>
+ <option value="Cardiff-North">Cardiff North</option>
+ <option value="London-West">London West</option>
+ <option value="London-Central">London Central</option>
+ <option value="London-East">London East</option>
+ </select>
+ </div>
+ <button id="loginButton" class="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Login</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Navigation -->
+ <nav class="bg-gray-100 dark:bg-gray-800 shadow-sm">
+ <div class="container mx-auto px-4">
+ <div class="flex overflow-x-auto whitespace-nowrap">
+ <button class="tab active px-4 py-3 font-medium" data-view="listings">Film Listings</button>
+ <button class="tab px-4 py-3 font-medium" data-view="booking">Booking</button>
+ <button class="tab px-4 py-3 font-medium" data-view="cancellation">Cancellation</button>
+ <button class="tab px-4 py-3 font-medium admin-only hidden" data-view="admin">Admin</button>
+ <button class="tab px-4 py-3 font-medium manager-only hidden" data-view="manager">Manager</button>
+ <button class="tab px-4 py-3 font-medium manager-only hidden" data-view="analytics">Analytics</button>
+ </div>
+ </div>
+ </nav>
+
+ <!-- Main Container -->
+ <main class="container mx-auto px-4 py-6">
+ <!-- Loading Overlay -->
+ <div id="loadingOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl max-w-md w-full">
+ <div class="flex items-center justify-center mb-4">
+ <div class="w-12 h-12 border-t-4 border-primary dark:border-dark-primary border-solid rounded-full animate-spin"></div>
+ </div>
+ <p id="loadingMessage" class="text-center text-lg">Processing your request...</p>
+ </div>
+ </div>
+
+ <!-- Film Listings View -->
+ <div id="listingsView" class="view-content">
+ <div class="flex flex-col md:flex-row mb-6 items-start gap-4">
+ <div class="w-full md:w-1/3 lg:w-1/4">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
+ <h3 class="font-medium text-lg mb-3">Filter Films</h3>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Location</label>
+ <select id="filterLocation" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="all">All Locations</option>
+ <option value="Birmingham">Birmingham</option>
+ <option value="Bristol">Bristol</option>
+ <option value="Cardiff">Cardiff</option>
+ <option value="London">London</option>
+ </select>
+ </div>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Date</label>
+ <input type="date" id="filterDate" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ </div>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Genre</label>
+ <select id="filterGenre" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="all">All Genres</option>
+ <option value="Action">Action</option>
+ <option value="Comedy">Comedy</option>
+ <option value="Drama">Drama</option>
+ <option value="Horror">Horror</option>
+ <option value="Sci-Fi">Sci-Fi</option>
+ <option value="Family">Family</option>
+ </select>
+ </div>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Age Rating</label>
+ <select id="filterRating" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="all">All Ratings</option>
+ <option value="U">U</option>
+ <option value="PG">PG</option>
+ <option value="12A">12A</option>
+ <option value="15">15</option>
+ <option value="18">18</option>
+ </select>
+ </div>
+
+ <button id="applyFilters" class="w-full bg-primary dark:bg-dark-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition-all">
+ Apply Filters
+ </button>
+ </div>
+ </div>
+
+ <div class="w-full md:w-2/3 lg:w-3/4">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md">
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+ <h2 class="text-xl font-semibold">Now Showing</h2>
+ <p class="text-sm text-gray-600 dark:text-gray-400" id="listingSubtitle">All films currently available for booking</p>
+ </div>
+
+ <div id="filmsContainer" class="divide-y divide-gray-200 dark:divide-gray-700 max-h-[600px] overflow-y-auto p-1">
+ <!-- Films will be loaded here -->
+ <div class="p-4 text-center text-gray-500 dark:text-gray-400">
+ Loading films...
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Booking View -->
+ <div id="bookingView" class="view-content hidden">
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+ <!-- Step 1: Select a Film -->
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <h3 class="text-lg font-medium mb-4">Step 1: Select a Film</h3>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Cinema</label>
+ <select id="bookingCinema" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="">Select Cinema</option>
+ <!-- Options will be loaded dynamically -->
+ </select>
+ </div>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Date</label>
+ <input type="date" id="bookingDate" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ </div>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Film</label>
+ <select id="bookingFilm" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" disabled>
+ <option value="">Select Film</option>
+ <!-- Options will be loaded dynamically -->
+ </select>
+ </div>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Showing Time</label>
+ <select id="bookingTime" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" disabled>
+ <option value="">Select Time</option>
+ <!-- Options will be loaded dynamically -->
+ </select>
+ </div>
+ </div>
+
+ <!-- Step 2: Select Seats -->
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <h3 class="text-lg font-medium mb-4">Step 2: Select Seats</h3>
+
+ <div class="mb-4">
+ <div class="flex justify-center mb-6">
+ <div class="screen"></div>
+ </div>
+
+ <div id="seatingArea" class="flex flex-col items-center">
+ <p class="text-center text-gray-500 dark:text-gray-400">Please select a film and showing time first</p>
+ </div>
+
+ <div class="mt-6 flex flex-wrap justify-center gap-3">
+ <div class="flex items-center">
+ <div class="seat lower mr-2"></div>
+ <span class="text-sm">Lower Hall</span>
+ </div>
+ <div class="flex items-center">
+ <div class="seat upper mr-2"></div>
+ <span class="text-sm">Upper Gallery</span>
+ </div>
+ <div class="flex items-center">
+ <div class="seat vip mr-2"></div>
+ <span class="text-sm">VIP</span>
+ </div>
+ <div class="flex items-center">
+ <div class="seat selected mr-2"></div>
+ <span class="text-sm">Selected</span>
+ </div>
+ <div class="flex items-center">
+ <div class="seat occupied mr-2"></div>
+ <span class="text-sm">Occupied</span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Step 3: Complete Booking -->
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <h3 class="text-lg font-medium mb-4">Step 3: Complete Booking</h3>
+
+ <div id="bookingSummary" class="mb-4 p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
+ <p class="text-center text-gray-500 dark:text-gray-400">Please select a film and seats to see your booking summary</p>
+ </div>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Customer Name</label>
+ <input type="text" id="customerName" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" placeholder="Enter customer name">
+ </div>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Customer Email</label>
+ <input type="email" id="customerEmail" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" placeholder="Enter customer email">
+ </div>
+
+ <button id="completeBooking" class="w-full bg-primary dark:bg-dark-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition-all" disabled>
+ Complete Booking
+ </button>
+ </div>
+ </div>
+
+ <!-- Booking Confirmation Modal -->
+ <div id="bookingConfirmationModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40">
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl max-w-md w-full">
+ <div class="flex justify-between items-start mb-4">
+ <h3 class="text-xl font-bold">Booking Confirmation</h3>
+ <button id="closeBookingConfirmation" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
+ </div>
+ <div id="bookingConfirmationContent" class="mb-4">
+ <!-- Confirmation details will be inserted here -->
+ </div>
+ <div id="printableReceipt" class="hidden">
+ <!-- Printable receipt will be inserted here -->
+ </div>
+ <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
+ <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Thank you for booking with Horizon Cinemas!</p>
+ <div class="flex gap-2">
+ <button id="printBookingReceipt" class="flex-1 bg-primary dark:bg-dark-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition-all">
+ Print Receipt
+ </button>
+ <button id="emailBookingReceipt" class="flex-1 bg-green-600 text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition-all">
+ Email Receipt
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Cancellation View -->
+ <div id="cancellationView" class="view-content hidden">
+ <div class="max-w-3xl mx-auto">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+ <h2 class="text-xl font-semibold mb-4">Cancel a Booking</h2>
+
+ <div class="mb-4">
+ <label class="block mb-2 text-sm font-medium">Booking Reference</label>
+ <div class="flex">
+ <input type="text" id="cancellationReference" class="flex-1 px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-l-md" placeholder="Enter booking reference">
+ <button id="findBooking" class="bg-primary dark:bg-dark-primary text-white py-2 px-4 rounded-r-md hover:bg-opacity-90 transition-all">
+ Find
+ </button>
+ </div>
+ </div>
+
+ <div id="bookingDetails" class="hidden mb-4 p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
+ <!-- Booking details will be inserted here -->
+ </div>
+
+ <div id="cancellationActions" class="hidden">
+ <div class="mb-4 p-4 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-md">
+ <p id="cancellationWarning">Cancellation fee: <span id="cancellationFee">£0.00</span></p>
+ </div>
+
+ <div class="flex space-x-4">
+ <button id="confirmCancellation" class="flex-1 bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 transition-all">
+ Confirm Cancellation
+ </button>
+ <button id="cancelCancellation" class="flex-1 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-2 px-4 rounded-md hover:bg-gray-400 dark:hover:bg-gray-700 transition-all">
+ Back
+ </button>
+ </div>
+ </div>
+
+ <div id="cancellationComplete" class="hidden p-4 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-md">
+ <p>Booking has been successfully cancelled. Refund amount: <span id="refundAmount">£0.00</span></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Admin View -->
+ <div id="adminView" class="view-content hidden">
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+ <div class="lg:col-span-1">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <h3 class="text-lg font-medium mb-4">Admin Tools</h3>
+
+ <div class="space-y-2">
+ <button class="admin-tab w-full text-left px-4 py-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all" data-tab="films">
+ Manage Films
+ </button>
+ <button class="admin-tab w-full text-left px-4 py-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all" data-tab="screenings">
+ Manage Screenings
+ </button>
+ <button class="admin-tab w-full text-left px-4 py-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all" data-tab="reports">
+ Generate Reports
+ </button>
+ </div>
+ </div>
+ </div>
+
+ <div class="lg:col-span-2">
+ <!-- Manage Films Tab -->
+ <div id="filmsTab" class="admin-tab-content">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <div class="flex justify-between items-center mb-4">
+ <h3 class="text-lg font-medium">Manage Films</h3>
+ <button id="addFilmButton" class="bg-primary dark:bg-dark-primary text-white py-1 px-3 rounded-md hover:bg-opacity-90 transition-all text-sm">
+ Add New Film
+ </button>
+ </div>
+
+ <div class="overflow-x-auto">
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+ <thead>
+ <tr>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Title</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Genre</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Rating</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Duration</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
+ </tr>
+ </thead>
+ <tbody id="filmsTable" class="divide-y divide-gray-200 dark:divide-gray-700">
+ <!-- Films will be loaded here -->
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+
+ <!-- Manage Screenings Tab -->
+ <div id="screeningsTab" class="admin-tab-content hidden">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <div class="flex justify-between items-center mb-4">
+ <h3 class="text-lg font-medium">Manage Screenings</h3>
+ <button id="addScreeningButton" class="bg-primary dark:bg-dark-primary text-white py-1 px-3 rounded-md hover:bg-opacity-90 transition-all text-sm">
+ Add New Screening
+ </button>
+ </div>
+
+ <div class="mb-4 flex flex-wrap gap-2">
+ <select id="screeningCinema" class="px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="">All Cinemas</option>
+ </select>
+
+ <input type="date" id="screeningDate" class="px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+
+ <button id="filterScreenings" class="bg-primary dark:bg-dark-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition-all">
+ Filter
+ </button>
+ </div>
+
+ <div class="overflow-x-auto">
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+ <thead>
+ <tr>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Film</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Cinema</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Screen</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Time</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
+ </tr>
+ </thead>
+ <tbody id="screeningsTable" class="divide-y divide-gray-200 dark:divide-gray-700">
+ <!-- Screenings will be loaded here -->
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+
+ <!-- Reports Tab -->
+ <div id="reportsTab" class="admin-tab-content hidden">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <h3 class="text-lg font-medium mb-4">Generate Reports</h3>
+
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+ <div>
+ <label class="block mb-2 text-sm font-medium">Report Type</label>
+ <select id="reportType" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="bookings">Bookings by Film</option>
+ <option value="revenue">Revenue by Cinema</option>
+ <option value="topFilms">Top Revenue Films</option>
+ <option value="staffPerformance">Staff Booking Performance</option>
+ </select>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Time Period</label>
+ <select id="reportPeriod" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="current">Current Month</option>
+ <option value="previous">Previous Month</option>
+ <option value="quarter">Last Quarter</option>
+ <option value="year">Year to Date</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="flex flex-wrap gap-3 mb-4">
+ <button id="generateReport" class="bg-primary dark:bg-dark-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition-all">
+ Generate Report
+ </button>
+ </div>
+
+ <div id="reportResults" class="hidden">
+ <div class="mb-4">
+ <h4 id="reportTitle" class="text-lg font-medium mb-2"></h4>
+ <p id="reportDescription" class="text-sm text-gray-600 dark:text-gray-400"></p>
+ </div>
+
+ <div id="chartContainer" class="mb-4 h-64"></div>
+
+ <div id="tableContainer" class="overflow-x-auto">
+ <!-- Report table will be inserted here -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Film Form Modal -->
+ <div id="filmFormModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40">
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl max-w-2xl w-full">
+ <div class="flex justify-between items-start mb-4">
+ <h3 id="filmFormTitle" class="text-xl font-bold">Add New Film</h3>
+ <button id="closeFilmForm" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
+ </div>
+
+ <form id="filmForm" class="space-y-4">
+ <input type="hidden" id="filmId">
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Title</label>
+ <input type="text" id="filmTitle" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ </div>
+
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <div>
+ <label class="block mb-2 text-sm font-medium">Genre</label>
+ <select id="filmGenre" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ <option value="">Select Genre</option>
+ <option value="Action">Action</option>
+ <option value="Comedy">Comedy</option>
+ <option value="Drama">Drama</option>
+ <option value="Horror">Horror</option>
+ <option value="Sci-Fi">Sci-Fi</option>
+ <option value="Family">Family</option>
+ </select>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Age Rating</label>
+ <select id="filmRating" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ <option value="">Select Rating</option>
+ <option value="U">U</option>
+ <option value="PG">PG</option>
+ <option value="12A">12A</option>
+ <option value="15">15</option>
+ <option value="18">18</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <div>
+ <label class="block mb-2 text-sm font-medium">Duration (minutes)</label>
+ <input type="number" id="filmDuration" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" min="1" required>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Release Date</label>
+ <input type="date" id="filmReleaseDate" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ </div>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Director</label>
+ <input type="text" id="filmDirector" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Cast (comma separated)</label>
+ <input type="text" id="filmCast" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Description</label>
+ <textarea id="filmDescription" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" rows="3" required></textarea>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Poster Image URL</label>
+ <input type="text" id="filmImageUrl" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" placeholder="Enter URL to film poster image">
+ </div>
+
+ <div class="flex justify-end space-x-3">
+ <button type="button" id="cancelFilmForm" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-400 dark:hover:bg-gray-700 transition-all">
+ Cancel
+ </button>
+ <button type="submit" class="px-4 py-2 bg-primary dark:bg-dark-primary text-white rounded-md hover:bg-opacity-90 transition-all">
+ Save Film
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+
+ <!-- Screening Form Modal -->
+ <div id="screeningFormModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40">
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl max-w-2xl w-full">
+ <div class="flex justify-between items-start mb-4">
+ <h3 id="screeningFormTitle" class="text-xl font-bold">Add New Screening</h3>
+ <button id="closeScreeningForm" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
+ </div>
+
+ <form id="screeningForm" class="space-y-4">
+ <input type="hidden" id="screeningId">
+
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <div>
+ <label class="block mb-2 text-sm font-medium">Cinema</label>
+ <select id="screeningCinemaSelect" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ <option value="">Select Cinema</option>
+ </select>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Screen</label>
+ <select id="screeningScreen" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ <option value="">Select Screen</option>
+ </select>
+ </div>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Film</label>
+ <select id="screeningFilm" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ <option value="">Select Film</option>
+ </select>
+ </div>
+
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <div>
+ <label class="block mb-2 text-sm font-medium">Date</label>
+ <input type="date" id="screeningDateInput" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Time</label>
+ <input type="time" id="screeningTime" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ </div>
+ </div>
+
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+ <div>
+ <label class="block mb-2 text-sm font-medium">Lower Hall Price (£)</label>
+ <input type="number" id="screeningLowerPrice" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" min="1" step="0.01" required>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Upper Gallery Price (£)</label>
+ <input type="number" id="screeningUpperPrice" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" min="1" step="0.01" required>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">VIP Price (£)</label>
+ <input type="number" id="screeningVIPPrice" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" min="1" step="0.01" required>
+ </div>
+ </div>
+
+ <div class="flex justify-end space-x-3">
+ <button type="button" id="cancelScreeningForm" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-400 dark:hover:bg-gray-700 transition-all">
+ Cancel
+ </button>
+ <button type="submit" class="px-4 py-2 bg-primary dark:bg-dark-primary text-white rounded-md hover:bg-opacity-90 transition-all">
+ Save Screening
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+
+ <!-- Manager View -->
+ <div id="managerView" class="view-content hidden">
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <h3 class="text-xl font-semibold mb-4">Add New Cinema</h3>
+
+ <form id="newCinemaForm" class="space-y-4">
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <div>
+ <label class="block mb-2 text-sm font-medium">City</label>
+ <select id="cinemaCity" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ <option value="">Select City</option>
+ <option value="Birmingham">Birmingham</option>
+ <option value="Bristol">Bristol</option>
+ <option value="Cardiff">Cardiff</option>
+ <option value="London">London</option>
+ <option value="new">Add New City</option>
+ </select>
+ </div>
+
+ <div id="newCityContainer" class="hidden">
+ <label class="block mb-2 text-sm font-medium">New City Name</label>
+ <input type="text" id="newCityName" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ </div>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Cinema Name</label>
+ <input type="text" id="cinemaName" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required placeholder="e.g. Central, North, East, etc.">
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Address</label>
+ <textarea id="cinemaAddress" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" rows="2" required></textarea>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Number of Screens</label>
+ <select id="cinemaScreens" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ </select>
+ </div>
+
+ <div id="screenCapacitiesContainer" class="space-y-3">
+ <h4 class="font-medium">Screen Capacities</h4>
+ <!-- Screen capacities will be added here dynamically -->
+ </div>
+
+ <div class="py-3 border-t border-gray-200 dark:border-gray-700">
+ <h4 class="font-medium mb-2">Standard Ticket Prices</h4>
+
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+ <div>
+ <label class="block mb-1 text-sm">Morning Show (£)</label>
+ <input type="number" id="priceMorning" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" min="1" step="0.01" required>
+ </div>
+
+ <div>
+ <label class="block mb-1 text-sm">Afternoon Show (£)</label>
+ <input type="number" id="priceAfternoon" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" min="1" step="0.01" required>
+ </div>
+
+ <div>
+ <label class="block mb-1 text-sm">Evening Show (£)</label>
+ <input type="number" id="priceEvening" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" min="1" step="0.01" required>
+ </div>
+ </div>
+ </div>
+
+ <button type="submit" class="w-full bg-primary dark:bg-dark-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition-all">
+ Add Cinema
+ </button>
+ </form>
+ </div>
+
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <div class="flex justify-between items-center mb-4">
+ <h3 class="text-xl font-semibold">Manage Cinemas</h3>
+ <button id="generateCustomerCSV" class="bg-green-600 text-white py-1 px-3 rounded-md hover:bg-opacity-90 transition-all text-sm">
+ Generate Customer CSV
+ </button>
+ </div>
+
+ <div class="overflow-x-auto">
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+ <thead>
+ <tr>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">City</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Screens</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
+ </tr>
+ </thead>
+ <tbody id="cinemasTable" class="divide-y divide-gray-200 dark:divide-gray-700">
+ <!-- Cinemas will be loaded here -->
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Analytics View -->
+ <div id="analyticsView" class="view-content hidden">
+ <div class="grid grid-cols-1 gap-6">
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5">
+ <h3 class="text-xl font-semibold mb-4">Booking Analytics</h3>
+
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+ <div>
+ <label class="block mb-2 text-sm font-medium">View By</label>
+ <select id="analyticsViewBy" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="location">Location</option>
+ <option value="showtime">Showtime</option>
+ <option value="day">Day of Week</option>
+ <option value="film">Film</option>
+ </select>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Time Period</label>
+ <select id="analyticsPeriod" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="week">Last 7 days</option>
+ <option value="month">Last 30 days</option>
+ <option value="quarter">Last 90 days</option>
+ </select>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Chart Type</label>
+ <select id="analyticsChartType" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="bar">Bar Chart</option>
+ <option value="line">Line Chart</option>
+ <option value="pie">Pie Chart</option>
+ </select>
+ </div>
+ </div>
+
+ <button id="generateAnalytics" class="bg-primary dark:bg-dark-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition-all mb-6">
+ Generate Analytics
+ </button>
+
+ <div id="analyticsResults">
+ <div class="mb-4">
+ <h4 id="analyticsTitle" class="text-lg font-medium mb-2">Booking Trends</h4>
+ <p id="analyticsDescription" class="text-sm text-gray-600 dark:text-gray-400">Analyze booking patterns across different dimensions</p>
+ </div>
+
+ <div id="analyticsChartContainer" class="mb-6 h-80"></div>
+
+ <div id="analyticsInsights" class="bg-blue-50 dark:bg-blue-900 p-4 rounded-md mb-6">
+ <h4 class="font-medium text-blue-700 dark:text-blue-300 mb-2">AI Insights</h4>
+ <div id="insightsContent" class="text-blue-800 dark:text-blue-200">
+ <p>Generate analytics to see AI-powered insights about booking trends.</p>
+ </div>
+ </div>
+
+ <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
+ <h4 class="font-medium mb-3">Booking Predictions</h4>
+
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+ <div>
+ <label class="block mb-2 text-sm font-medium">Film</label>
+ <select id="predictionFilm" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="">Select Film</option>
+ </select>
+ </div>
+
+ <div>
+ <label class="block mb-2 text-sm font-medium">Cinema</label>
+ <select id="predictionCinema" class="w-full px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
+ <option value="">Select Cinema</option>
+ </select>
+ </div>
+ </div>
+
+ <button id="generatePrediction" class="bg-primary dark:bg-dark-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition-all mb-4">
+ Predict Bookings
+ </button>
+
+ <div id="predictionResults" class="hidden">
+ <div id="predictionChartContainer" class="mb-4 h-64"></div>
+
+ <div id="predictionInsights" class="bg-green-50 dark:bg-green-900 p-4 rounded-md">
+ <h4 class="font-medium text-green-700 dark:text-green-300 mb-2">Prediction Insights</h4>
+ <div id="predictionContent" class="text-green-800 dark:text-green-200"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Customer CSV Modal -->
+ <div id="customerCSVModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl max-w-4xl w-full">
+ <div class="flex justify-between items-start mb-4">
+ <h3 class="text-xl font-bold">Customer Data CSV</h3>
+ <button id="closeCSVModal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
+ </div>
+
+ <div class="mb-4">
+ <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Here is the CSV data of all customer bookings. To save this data:</p>
+ <ol class="list-decimal list-inside space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-4">
+ <li>Click the "Copy to Clipboard" button below</li>
+ <li>Open a text editor or spreadsheet program</li>
+ <li>Paste the content (Ctrl+V or Cmd+V)</li>
+ <li>Save the file with a .csv extension (e.g., "customer_bookings.csv")</li>
+ </ol>
+ </div>
+
+ <div class="mb-4">
+ <div class="relative">
+ <textarea id="csvContent" class="w-full h-64 px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md font-mono overflow-auto" readonly></textarea>
+ <div id="copySuccess" class="hidden absolute top-2 right-2 px-2 py-1 bg-green-500 text-white text-xs rounded">
+ Copied!
+ </div>
+ </div>
+ </div>
+
+ <div class="flex justify-end space-x-3">
+ <button id="copyCSV" class="px-4 py-2 bg-primary dark:bg-dark-primary text-white rounded-md hover:bg-opacity-90 transition-all">
+ Copy to Clipboard
+ </button>
+ <button id="cancelCSVModal" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-400 dark:hover:bg-gray-700 transition-all">
+ Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="bg-white dark:bg-[#222] shadow-inner py-6 mt-8">
+ <div class="container mx-auto px-4">
+ <div class="text-center text-sm text-gray-500 dark:text-gray-400">
+ <p>© 2023 Horizon Cinemas. All rights reserved.</p>
+ <p class="mt-1">This is a demo application.</p>
+ </div>
+ </div>
+ </footer>
+
+ <script>
+ // Data Models
+ class Cinema {
+ constructor(id, city, name, address, screens, prices) {
+ this.id = id;
+ this.city = city;
+ this.name = name;
+ this.address = address;
+ this.screens = screens; // Array of screen objects
+ this.prices = prices; // { morning, afternoon, evening }
+ }
+
+ get fullName() {
+ return `${this.city} ${this.name}`;
+ }
+
+ getBasePrice(time) {
+ const hour = parseInt(time.split(':')[0]);
+ if (hour >= 8 && hour < 12) {
+ return this.prices.morning;
+ } else if (hour >= 12 && hour < 17) {
+ return this.prices.afternoon;
+ } else {
+ return this.prices.evening;
+ }
+ }
+ }
+
+ class Screen {
+ constructor(id, number, capacity, lowerHallPercent = 30, vipSeatsPercent = 10) {
+ this.id = id;
+ this.number = number;
+ this.capacity = capacity;
+ this.lowerHallPercent = lowerHallPercent;
+ this.vipSeatsPercent = vipSeatsPercent;
+ }
+
+ get lowerHallSeats() {
+ return Math.floor(this.capacity * (this.lowerHallPercent / 100));
+ }
+
+ get upperGallerySeats() {
+ return this.capacity - this.lowerHallSeats;
+ }
+
+ get vipSeats() {
+ return Math.floor(this.upperGallerySeats * (this.vipSeatsPercent / 100));
+ }
+
+ get regularUpperSeats() {
+ return this.upperGallerySeats - this.vipSeats;
+ }
+ }
+
+ class Film {
+ constructor(id, title, description, genre, rating, duration, releaseDate, director, cast, imageUrl) {
+ this.id = id;
+ this.title = title;
+ this.description = description;
+ this.genre = genre;
+ this.rating = rating;
+ this.duration = duration; // in minutes
+ this.releaseDate = releaseDate;
+ this.director = director;
+ this.cast = cast; // Array of actors
+ this.imageUrl = imageUrl || "https://images.unsplash.com/photo-1542204165-65bf26472b9b?q=80&w=800&auto=format&fit=crop"; // Default image if none provided
+ }
+ }
+
+ class Screening {
+ constructor(id, filmId, cinemaId, screenId, date, time, prices, occupiedSeats = []) {
+ this.id = id;
+ this.filmId = filmId;
+ this.cinemaId = cinemaId;
+ this.screenId = screenId;
+ this.date = date;
+ this.time = time;
+ this.prices = prices; // { lower, upper, vip }
+ this.occupiedSeats = occupiedSeats;
+ }
+ }
+
+ class Booking {
+ constructor(id, screeningId, seats, customerName, customerEmail, bookingDate, totalPrice) {
+ this.id = id;
+ this.screeningId = screeningId;
+ this.seats = seats; // Array of seat objects { row, number, type }
+ this.customerName = customerName;
+ this.customerEmail = customerEmail;
+ this.bookingDate = bookingDate;
+ this.totalPrice = totalPrice;
+ this.cancelled = false;
+ this.cancellationDate = null;
+ this.refundAmount = 0;
+ }
+
+ cancel(cancellationDate) {
+ // Check if cancellation is allowed (at least 1 day prior to screening)
+ const screening = app.getScreeningById(this.screeningId);
+ const screeningDate = new Date(`${screening.date}T${screening.time}`);
+ const cancellationDateTime = new Date(cancellationDate);
+
+ const screeningDay = new Date(screeningDate.getFullYear(), screeningDate.getMonth(), screeningDate.getDate());
+ const cancellationDay = new Date(cancellationDateTime.getFullYear(), cancellationDateTime.getMonth(), cancellationDateTime.getDate());
+
+ const dayDiff = (screeningDay - cancellationDay) / (1000 * 60 * 60 * 24);
+
+ if (dayDiff < 1) {
+ return { success: false, message: "Cancellation is only allowed at least one day prior to the show." };
+ }
+
+ this.cancelled = true;
+ this.cancellationDate = cancellationDate;
+ this.refundAmount = this.totalPrice * 0.5; // 50% refund
+
+ return {
+ success: true,
+ message: "Booking cancelled successfully.",
+ refundAmount: this.refundAmount.toFixed(2)
+ };
+ }
+ }
+
+ // Application Controller
+ const app = {
+ currentUser: { role: "staff" },
+ currentLocation: "Birmingham-Central",
+ currentView: "listings",
+ mockData: {
+ cinemas: [],
+ films: [],
+ screenings: [],
+ bookings: [],
+ users: [
+ { id: 1, username: "staff1", name: "John Staff", role: "staff" },
+ { id: 2, username: "admin1", name: "Alice Admin", role: "admin" },
+ { id: 3, username: "manager1", name: "Bob Manager", role: "manager" }
+ ],
+ staffPerformance: []
+ },
+ selectedSeats: [],
+
+ init() {
+ this.loadMockData();
+ this.setupEventListeners();
+ this.updateNavBasedOnRole();
+ this.renderView("listings");
+ },
+
+ loadMockData() {
+ // Initialize Cinemas
+ const birminghamPrices = { morning: 5, afternoon: 6, evening: 7 };
+ const bristolPrices = { morning: 6, afternoon: 7, evening: 8 };
+ const cardiffPrices = { morning: 5, afternoon: 6, evening: 7 };
+ const londonPrices = { morning: 10, afternoon: 11, evening: 12 };
+
+ // Birmingham Cinemas
+ this.mockData.cinemas.push(new Cinema("bham-central", "Birmingham", "Central", "123 Main St, Birmingham, B1 1AA",
+ [
+ new Screen("bham-central-s1", 1, 80),
+ new Screen("bham-central-s2", 2, 100),
+ new Screen("bham-central-s3", 3, 120),
+ new Screen("bham-central-s4", 4, 60)
+ ],
+ birminghamPrices
+ ));
+
+ this.mockData.cinemas.push(new Cinema("bham-east", "Birmingham", "East", "456 High St, Birmingham, B9 5ZX",
+ [
+ new Screen("bham-east-s1", 1, 90),
+ new Screen("bham-east-s2", 2, 70),
+ new Screen("bham-east-s3", 3, 110)
+ ],
+ birminghamPrices
+ ));
+
+ // Bristol Cinemas
+ this.mockData.cinemas.push(new Cinema("bristol-main", "Bristol", "Main", "789 Central Ave, Bristol, BS1 4XY",
+ [
+ new Screen("bristol-main-s1", 1, 100),
+ new Screen("bristol-main-s2", 2, 120),
+ new Screen("bristol-main-s3", 3, 80),
+ new Screen("bristol-main-s4", 4, 50),
+ new Screen("bristol-main-s5", 5, 90)
+ ],
+ bristolPrices
+ ));
+
+ this.mockData.cinemas.push(new Cinema("bristol-harbour", "Bristol", "Harbour", "101 Harbour Rd, Bristol, BS8 9TU",
+ [
+ new Screen("bristol-harbour-s1", 1, 70),
+ new Screen("bristol-harbour-s2", 2, 60)
+ ],
+ bristolPrices
+ ));
+
+ // Cardiff Cinemas
+ this.mockData.cinemas.push(new Cinema("cardiff-bay", "Cardiff", "Bay", "202 Bay View, Cardiff, CF10 5AL",
+ [
+ new Screen("cardiff-bay-s1", 1, 110),
+ new Screen("cardiff-bay-s2", 2, 90),
+ new Screen("cardiff-bay-s3", 3, 70)
+ ],
+ cardiffPrices
+ ));
+
+ this.mockData.cinemas.push(new Cinema("cardiff-north", "Cardiff", "North", "303 North St, Cardiff, CF14 3WE",
+ [
+ new Screen("cardiff-north-s1", 1, 80),
+ new Screen("cardiff-north-s2", 2, 100)
+ ],
+ cardiffPrices
+ ));
+
+ // London Cinemas
+ this.mockData.cinemas.push(new Cinema("london-west", "London", "West", "404 West End, London, W1 7GH",
+ [
+ new Screen("london-west-s1", 1, 120),
+ new Screen("london-west-s2", 2, 100),
+ new Screen("london-west-s3", 3, 80),
+ new Screen("london-west-s4", 4, 60),
+ new Screen("london-west-s5", 5, 90),
+ new Screen("london-west-s6", 6, 110)
+ ],
+ londonPrices
+ ));
+
+ this.mockData.cinemas.push(new Cinema("london-central", "London", "Central", "505 Oxford St, London, W1D 2DW",
+ [
+ new Screen("london-central-s1", 1, 100),
+ new Screen("london-central-s2", 2, 120),
+ new Screen("london-central-s3", 3, 90),
+ new Screen("london-central-s4", 4, 80)
+ ],
+ londonPrices
+ ));
+
+ this.mockData.cinemas.push(new Cinema("london-east", "London", "East", "606 Canary Wharf, London, E14 5AB",
+ [
+ new Screen("london-east-s1", 1, 80),
+ new Screen("london-east-s2", 2, 70),
+ new Screen("london-east-s3", 3, 60)
+ ],
+ londonPrices
+ ));
+
+ // Initialize Films
+ this.mockData.films.push(new Film(
+ "film1",
+ "The Dark Knight",
+ "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, Batman must accept one of the greatest psychological and physical tests of his ability to fight injustice.",
+ "Action",
+ "12A",
+ 152,
+ "2008-07-18",
+ "Christopher Nolan",
+ ["Christian Bale", "Heath Ledger", "Aaron Eckhart", "Michael Caine"],
+ "https://images.unsplash.com/photo-1531259683007-016a7b628fc3?q=80&w=800&auto=format&fit=crop"
+ ));
+
+ this.mockData.films.push(new Film(
+ "film2",
+ "Inception",
+ "A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O.",
+ "Sci-Fi",
+ "12A",
+ 148,
+ "2010-07-16",
+ "Christopher Nolan",
+ ["Leonardo DiCaprio", "Joseph Gordon-Levitt", "Ellen Page", "Tom Hardy"],
+ "https://images.unsplash.com/photo-1542204165-65bf26472b9b?q=80&w=800&auto=format&fit=crop"
+ ));
+
+ this.mockData.films.push(new Film(
+ "film3",
+ "The Shawshank Redemption",
+ "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
+ "Drama",
+ "15",
+ 142,
+ "1994-10-14",
+ "Frank Darabont",
+ ["Tim Robbins", "Morgan Freeman", "Bob Gunton", "William Sadler"],
+ "https://images.unsplash.com/photo-1551781066-15814a3496f1?q=80&w=800&auto=format&fit=crop"
+ ));
+
+ this.mockData.films.push(new Film(
+ "film4",
+ "Finding Nemo",
+ "After his son is captured in the Great Barrier Reef and taken to Sydney, a timid clownfish sets out on a journey to bring him home.",
+ "Family",
+ "U",
+ 100,
+ "2003-05-30",
+ "Andrew Stanton",
+ ["Albert Brooks", "Ellen DeGeneres", "Alexander Gould", "Willem Dafoe"],
+ "https://images.unsplash.com/photo-1546026423-cc4642628d2b?q=80&w=800&auto=format&fit=crop"
+ ));
+
+ this.mockData.films.push(new Film(
+ "film5",
+ "The Conjuring",
+ "Paranormal investigators Ed and Lorraine Warren work to help a family terrorized by a dark presence in their farmhouse.",
+ "Horror",
+ "15",
+ 112,
+ "2013-07-19",
+ "James Wan",
+ ["Patrick Wilson", "Vera Farmiga", "Ron Livingston", "Lili Taylor"],
+ "https://images.unsplash.com/photo-1505635552518-3448ff116af3?q=80&w=800&auto=format&fit=crop"
+ ));
+
+ this.mockData.films.push(new Film(
+ "film6",
+ "Superbad",
+ "Two co-dependent high school seniors are forced to deal with separation anxiety after their plan to stage a booze-soaked party goes awry.",
+ "Comedy",
+ "15",
+ 113,
+ "2007-08-17",
+ "Greg Mottola",
+ ["Michael Cera", "Jonah Hill", "Christopher Mintz-Plasse", "Bill Hader"],
+ "https://images.unsplash.com/photo-1543584756-8f40a802e14f?q=80&w=800&auto=format&fit=crop"
+ ));
+
+ // Generate screenings for the next 7 days
+ const today = new Date();
+ for (let i = 0; i < 7; i++) {
+ const date = new Date(today);
+ date.setDate(date.getDate() + i);
+ const dateStr = date.toISOString().split('T')[0];
+
+ // Generate 2-4 screenings per film per day across different cinemas
+ this.mockData.films.forEach(film => {
+ const randomCinemas = this.getRandomElements(this.mockData.cinemas, Math.floor(Math.random() * 3) + 2);
+
+ randomCinemas.forEach(cinema => {
+ const randomScreen = this.getRandomElements(cinema.screens, 1)[0];
+
+ // Morning show (8am-12pm)
+ const morningHour = Math.floor(Math.random() * 4) + 8;
+ const morningTime = `${morningHour.toString().padStart(2, '0')}:00`;
+ const morningPrice = cinema.getBasePrice(morningTime);
+
+ this.mockData.screenings.push(new Screening(
+ `${dateStr}-${film.id}-${cinema.id}-${randomScreen.id}-morning`,
+ film.id,
+ cinema.id,
+ randomScreen.id,
+ dateStr,
+ morningTime,
+ {
+ lower: morningPrice,
+ upper: parseFloat((morningPrice * 1.2).toFixed(2)),
+ vip: parseFloat((morningPrice * 1.2 * 1.2).toFixed(2))
+ },
+ this.generateRandomOccupiedSeats(randomScreen.capacity, 0.1) // 10% occupied
+ ));
+
+ // Afternoon show (12pm-5pm)
+ const afternoonHour = Math.floor(Math.random() * 5) + 12;
+ const afternoonTime = `${afternoonHour.toString().padStart(2, '0')}:00`;
+ const afternoonPrice = cinema.getBasePrice(afternoonTime);
+
+ this.mockData.screenings.push(new Screening(
+ `${dateStr}-${film.id}-${cinema.id}-${randomScreen.id}-afternoon`,
+ film.id,
+ cinema.id,
+ randomScreen.id,
+ dateStr,
+ afternoonTime,
+ {
+ lower: afternoonPrice,
+ upper: parseFloat((afternoonPrice * 1.2).toFixed(2)),
+ vip: parseFloat((afternoonPrice * 1.2 * 1.2).toFixed(2))
+ },
+ this.generateRandomOccupiedSeats(randomScreen.capacity, 0.2) // 20% occupied
+ ));
+
+ // Evening show (5pm-12am)
+ const eveningHour = Math.floor(Math.random() * 7) + 17;
+ const eveningTime = `${eveningHour.toString().padStart(2, '0')}:00`;
+ const eveningPrice = cinema.getBasePrice(eveningTime);
+
+ this.mockData.screenings.push(new Screening(
+ `${dateStr}-${film.id}-${cinema.id}-${randomScreen.id}-evening`,
+ film.id,
+ cinema.id,
+ randomScreen.id,
+ dateStr,
+ eveningTime,
+ {
+ lower: eveningPrice,
+ upper: parseFloat((eveningPrice * 1.2).toFixed(2)),
+ vip: parseFloat((eveningPrice * 1.2 * 1.2).toFixed(2))
+ },
+ this.generateRandomOccupiedSeats(randomScreen.capacity, 0.3) // 30% occupied
+ ));
+ });
+ });
+ }
+
+ // Generate mock bookings
+ const bookingCount = 50;
+ for (let i = 0; i < bookingCount; i++) {
+ const screening = this.getRandomElements(this.mockData.screenings, 1)[0];
+ const screen = this.getScreenById(screening.screenId);
+
+ // Generate 1-4 random seats that are not occupied
+ const seatCount = Math.floor(Math.random() * 4) + 1;
+ const seats = [];
+
+ for (let j = 0; j < seatCount; j++) {
+ let seat;
+ let attempts = 0;
+
+ // Try to find an unoccupied seat
+ do {
+ const row = String.fromCharCode(65 + Math.floor(Math.random() * 10)); // A-J
+ const number = Math.floor(Math.random() * 15) + 1; // 1-15
+ const type = Math.random() < 0.3 ? 'lower' : (Math.random() < 0.7 ? 'upper' : 'vip');
+
+ seat = { row, number, type };
+ attempts++;
+
+ // Check if seat is already occupied or already selected
+ const seatString = `${seat.row}${seat.number}`;
+ const isOccupied = screening.occupiedSeats.some(s => `${s.row}${s.number}` === seatString);
+ const isSelected = seats.some(s => `${s.row}${s.number}` === seatString);
+
+ if (!isOccupied && !isSelected) {
+ seats.push(seat);
+ break;
+ }
+
+ seat = null;
+ } while (attempts < 10);
+
+ if (!seat) break; // Couldn't find an unoccupied seat after 10 attempts
+ }
+
+ if (seats.length > 0) {
+ // Calculate total price
+ let totalPrice = 0;
+ seats.forEach(seat => {
+ totalPrice += screening.prices[seat.type];
+ });
+
+ // Generate booking date (between 1-7 days before screening)
+ const screeningDate = new Date(screening.date);
+ const daysBeforeBooking = Math.floor(Math.random() * 7) + 1;
+ const bookingDate = new Date(screeningDate);
+ bookingDate.setDate(bookingDate.getDate() - daysBeforeBooking);
+
+ const booking = new Booking(
+ `BK${(100000 + i).toString()}`,
+ screening.id,
+ seats,
+ `Customer ${i + 1}`,
+ `customer${i + 1}@example.com`,
+ bookingDate.toISOString().split('T')[0],
+ totalPrice
+ );
+
+ // Mark 10% of bookings as cancelled
+ if (Math.random() < 0.1) {
+ const cancellationDate = new Date(screeningDate);
+ cancellationDate.setDate(cancellationDate.getDate() - 1); // Cancel 1 day before
+ booking.cancel(cancellationDate.toISOString().split('T')[0]);
+ } else {
+ // Add seats to occupied seats if not cancelled
+ screening.occupiedSeats = [...screening.occupiedSeats, ...seats];
+ }
+
+ this.mockData.bookings.push(booking);
+ }
+ }
+
+ // Generate staff performance data
+ this.mockData.users.forEach(user => {
+ if (user.role === 'staff') {
+ const bookingCount = Math.floor(Math.random() * 100) + 50;
+ const totalRevenue = Math.floor(Math.random() * 10000) + 5000;
+ this.mockData.staffPerformance.push({
+ staffId: user.id,
+ staffName: user.name,
+ bookingCount,
+ totalRevenue,
+ avgBookingValue: parseFloat((totalRevenue / bookingCount).toFixed(2))
+ });
+ }
+ });
+
+ // Set today's date in date filter
+ const dateFilter = document.getElementById('filterDate');
+ dateFilter.valueAsDate = new Date();
+
+ const bookingDate = document.getElementById('bookingDate');
+ bookingDate.valueAsDate = new Date();
+
+ // Set min date to today and max date to 7 days from now for booking
+ bookingDate.min = new Date().toISOString().split('T')[0];
+ const maxDate = new Date();
+ maxDate.setDate(maxDate.getDate() + 7);
+ bookingDate.max = maxDate.toISOString().split('T')[0];
+ },
+
+ getRandomElements(array, count) {
+ const shuffled = [...array].sort(() => 0.5 - Math.random());
+ return shuffled.slice(0, count);
+ },
+
+ generateRandomOccupiedSeats(capacity, percentage) {
+ const seatCount = Math.floor(capacity * percentage);
+ const seats = [];
+
+ for (let i = 0; i < seatCount; i++) {
+ const row = String.fromCharCode(65 + Math.floor(Math.random() * 10)); // A-J
+ const number = Math.floor(Math.random() * 15) + 1; // 1-15
+ const type = Math.random() < 0.3 ? 'lower' : (Math.random() < 0.7 ? 'upper' : 'vip');
+
+ // Check if seat is already in the array
+ const seatString = `${row}${number}`;
+ const isSelected = seats.some(seat => `${seat.row}${seat.number}` === seatString);
+
+ if (!isSelected) {
+ seats.push({ row, number, type });
+ }
+ }
+
+ return seats;
+ },
+
+ setupEventListeners() {
+ // User menu toggle
+ const userMenuButton = document.getElementById('userMenuButton');
+ const userMenu = document.getElementById('userMenu');
+
+ userMenuButton.addEventListener('click', () => {
+ userMenu.classList.toggle('hidden');
+ });
+
+ // Close user menu when clicking elsewhere
+ document.addEventListener('click', (event) => {
+ if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
+ userMenu.classList.add('hidden');
+ }
+ });
+
+ // Role selector
+ const roleSelector = document.getElementById('roleSelector');
+ roleSelector.addEventListener('change', () => {
+ this.currentUser.role = roleSelector.value;
+ document.getElementById('currentUser').textContent = roleSelector.value.charAt(0).toUpperCase() + roleSelector.value.slice(1);
+ this.updateNavBasedOnRole();
+ });
+
+ // Location selector
+ const locationSelector = document.getElementById('locationSelector');
+ locationSelector.addEventListener('change', () => {
+ this.currentLocation = locationSelector.value;
+ });
+
+ // Login button
+ const loginButton = document.getElementById('loginButton');
+ loginButton.addEventListener('click', () => {
+ userMenu.classList.add('hidden');
+ // In a real app, we would handle actual login here
+ });
+
+ // Navigation tabs
+ const tabs = document.querySelectorAll('.tab');
+ tabs.forEach(tab => {
+ tab.addEventListener('click', () => {
+ tabs.forEach(t => t.classList.remove('active'));
+ tab.classList.add('active');
+ this.renderView(tab.dataset.view);
+ });
+ });
+
+ // Admin tabs
+ const adminTabs = document.querySelectorAll('.admin-tab');
+ adminTabs.forEach(tab => {
+ tab.addEventListener('click', () => {
+ adminTabs.forEach(t => t.classList.remove('bg-primary', 'dark:bg-dark-primary', 'text-white'));
+ adminTabs.forEach(t => t.classList.add('bg-gray-100', 'dark:bg-gray-700'));
+
+ tab.classList.remove('bg-gray-100', 'dark:bg-gray-700');
+ tab.classList.add('bg-primary', 'dark:bg-dark-primary', 'text-white');
+
+ const tabContents = document.querySelectorAll('.admin-tab-content');
+ tabContents.forEach(content => {
+ content.classList.add('hidden');
+ });
+
+ document.getElementById(`${tab.dataset.tab}Tab`).classList.remove('hidden');
+ });
+ });
+
+ // Film filter
+ const applyFiltersButton = document.getElementById('applyFilters');
+ applyFiltersButton.addEventListener('click', () => {
+ this.renderFilmListings();
+ });
+
+ // Booking form
+ const bookingCinema = document.getElementById('bookingCinema');
+ bookingCinema.addEventListener('change', () => {
+ this.updateBookingFilms();
+ });
+
+ const bookingDate = document.getElementById('bookingDate');
+ bookingDate.addEventListener('change', () => {
+ this.updateBookingFilms();
+ });
+
+ const bookingFilm = document.getElementById('bookingFilm');
+ bookingFilm.addEventListener('change', () => {
+ this.updateBookingTimes();
+ });
+
+ const bookingTime = document.getElementById('bookingTime');
+ bookingTime.addEventListener('change', () => {
+ this.updateSeatingArea();
+ });
+
+ // Complete booking button
+ const completeBookingButton = document.getElementById('completeBooking');
+ completeBookingButton.addEventListener('click', () => {
+ this.completeBooking();
+ });
+
+ // Close booking confirmation modal
+ const closeBookingConfirmationButton = document.getElementById('closeBookingConfirmation');
+ closeBookingConfirmationButton.addEventListener('click', () => {
+ document.getElementById('bookingConfirmationModal').classList.add('hidden');
+ });
+
+ // Print booking receipt
+ const printBookingReceiptButton = document.getElementById('printBookingReceipt');
+ printBookingReceiptButton.addEventListener('click', () => {
+ window.print();
+ });
+
+ // Email booking receipt
+ const emailBookingReceiptButton = document.getElementById('emailBookingReceipt');
+ emailBookingReceiptButton.addEventListener('click', () => {
+ const customerEmail = document.getElementById('customerEmail').value;
+ alert(`Receipt would be emailed to ${customerEmail} in a real application.`);
+ });
+
+ // Find booking button
+ const findBookingButton = document.getElementById('findBooking');
+ findBookingButton.addEventListener('click', () => {
+ this.findBooking();
+ });
+
+ // Confirm cancellation button
+ const confirmCancellationButton = document.getElementById('confirmCancellation');
+ confirmCancellationButton.addEventListener('click', () => {
+ this.confirmCancellation();
+ });
+
+ // Cancel cancellation button
+ const cancelCancellationButton = document.getElementById('cancelCancellation');
+ cancelCancellationButton.addEventListener('click', () => {
+ document.getElementById('bookingDetails').classList.add('hidden');
+ document.getElementById('cancellationActions').classList.add('hidden');
+ document.getElementById('cancellationComplete').classList.add('hidden');
+ });
+
+ // Admin: Add film button
+ const addFilmButton = document.getElementById('addFilmButton');
+ addFilmButton.addEventListener('click', () => {
+ this.showFilmForm();
+ });
+
+ // Admin: Close film form
+ const closeFilmFormButton = document.getElementById('closeFilmForm');
+ closeFilmFormButton.addEventListener('click', () => {
+ document.getElementById('filmFormModal').classList.add('hidden');
+ });
+
+ const cancelFilmFormButton = document.getElementById('cancelFilmForm');
+ cancelFilmFormButton.addEventListener('click', () => {
+ document.getElementById('filmFormModal').classList.add('hidden');
+ });
+
+ // Admin: Film form submit
+ const filmForm = document.getElementById('filmForm');
+ filmForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ this.saveFilm();
+ });
+
+ // Admin: Add screening button
+ const addScreeningButton = document.getElementById('addScreeningButton');
+ addScreeningButton.addEventListener('click', () => {
+ this.showScreeningForm();
+ });
+
+ // Admin: Close screening form
+ const closeScreeningFormButton = document.getElementById('closeScreeningForm');
+ closeScreeningFormButton.addEventListener('click', () => {
+ document.getElementById('screeningFormModal').classList.add('hidden');
+ });
+
+ const cancelScreeningFormButton = document.getElementById('cancelScreeningForm');
+ cancelScreeningFormButton.addEventListener('click', () => {
+ document.getElementById('screeningFormModal').classList.add('hidden');
+ });
+
+ // Admin: Screening form submit
+ const screeningForm = document.getElementById('screeningForm');
+ screeningForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ this.saveScreening();
+ });
+
+ // Admin: Filter screenings button
+ const filterScreeningsButton = document.getElementById('filterScreenings');
+ filterScreeningsButton.addEventListener('click', () => {
+ this.renderScreeningsTable();
+ });
+
+ // Admin: Generate report button
+ const generateReportButton = document.getElementById('generateReport');
+ generateReportButton.addEventListener('click', () => {
+ this.generateReport();
+ });
+
+ // Manager: Generate Customer CSV button
+ const generateCustomerCSVButton = document.getElementById('generateCustomerCSV');
+ generateCustomerCSVButton.addEventListener('click', () => {
+ this.generateCustomerCSV();
+ });
+
+ // Manager: Close CSV Modal
+ const closeCSVModalButton = document.getElementById('closeCSVModal');
+ closeCSVModalButton.addEventListener('click', () => {
+ document.getElementById('customerCSVModal').classList.add('hidden');
+ });
+
+ const cancelCSVModalButton = document.getElementById('cancelCSVModal');
+ cancelCSVModalButton.addEventListener('click', () => {
+ document.getElementById('customerCSVModal').classList.add('hidden');
+ });
+
+ // Manager: Copy CSV to clipboard
+ const copyCSVButton = document.getElementById('copyCSV');
+ copyCSVButton.addEventListener('click', () => {
+ const csvContent = document.getElementById('csvContent');
+ csvContent.select();
+ document.execCommand('copy');
+
+ // Show success message
+ const copySuccess = document.getElementById('copySuccess');
+ copySuccess.classList.remove('hidden');
+ setTimeout(() => {
+ copySuccess.classList.add('hidden');
+ }, 2000);
+ });
+
+ // Manager: Add new city option
+ const cinemaCity = document.getElementById('cinemaCity');
+ cinemaCity.addEventListener('change', () => {
+ const newCityContainer = document.getElementById('newCityContainer');
+ if (cinemaCity.value === 'new') {
+ newCityContainer.classList.remove('hidden');
+ } else {
+ newCityContainer.classList.add('hidden');
+ }
+ });
+
+ // Manager: Number of screens change
+ const cinemaScreens = document.getElementById('cinemaScreens');
+ cinemaScreens.addEventListener('change', () => {
+ this.updateScreenCapacitiesForm();
+ });
+
+ // Manager: New cinema form submit
+ const newCinemaForm = document.getElementById('newCinemaForm');
+ newCinemaForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ this.addNewCinema();
+ });
+
+ // Analytics: Generate analytics button
+ const generateAnalyticsButton = document.getElementById('generateAnalytics');
+ generateAnalyticsButton.addEventListener('click', () => {
+ this.generateAnalytics();
+ });
+
+ // Analytics: Generate prediction button
+ const generatePredictionButton = document.getElementById('generatePrediction');
+ generatePredictionButton.addEventListener('click', () => {
+ this.generatePrediction();
+ });
+ },
+
+ updateNavBasedOnRole() {
+ const adminElements = document.querySelectorAll('.admin-only');
+ const managerElements = document.querySelectorAll('.manager-only');
+
+ adminElements.forEach(el => {
+ if (this.currentUser.role === 'admin') {
+ el.classList.remove('hidden');
+ } else {
+ el.classList.add('hidden');
+ }
+ });
+
+ managerElements.forEach(el => {
+ if (this.currentUser.role === 'manager') {
+ el.classList.remove('hidden');
+ } else {
+ el.classList.add('hidden');
+ }
+ });
+
+ // Reset to listings view if current view is admin/manager and user doesn't have permission
+ if ((this.currentView === 'admin' && this.currentUser.role !== 'admin') ||
+ ((this.currentView === 'manager' || this.currentView === 'analytics') && this.currentUser.role !== 'manager')) {
+ this.renderView('listings');
+ document.querySelectorAll('.tab').forEach(tab => {
+ tab.classList.remove('active');
+ if (tab.dataset.view === 'listings') {
+ tab.classList.add('active');
+ }
+ });
+ }
+ },
+
+ renderView(viewName) {
+ this.currentView = viewName;
+
+ const views = document.querySelectorAll('.view-content');
+ views.forEach(view => {
+ view.classList.add('hidden');
+ });
+
+ // Make sure admin view is explicitly hidden when manager is selected
+ if (viewName === 'manager') {
+ document.getElementById('adminView').classList.add('hidden');
+ }
+
+ const currentView = document.getElementById(`${viewName}View`);
+ currentView.classList.remove('hidden');
+
+ // Add slide-in animation
+ currentView.classList.add('slideIn');
+ setTimeout(() => {
+ currentView.classList.remove('slideIn');
+ }, 300);
+
+ // Render view-specific content
+ switch (viewName) {
+ case 'listings':
+ this.renderFilmListings();
+ break;
+ case 'booking':
+ this.renderBookingForm();
+ break;
+ case 'admin':
+ this.renderAdminView();
+ break;
+ case 'manager':
+ this.renderManagerView();
+ break;
+ case 'analytics':
+ this.renderAnalyticsView();
+ break;
+ }
+ },
+
+ renderFilmListings() {
+ const container = document.getElementById('filmsContainer');
+ container.innerHTML = '<div class="p-4 text-center"><div class="w-8 h-8 border-t-4 border-primary dark:border-dark-primary border-solid rounded-full animate-spin mx-auto"></div><p class="mt-2 text-gray-500 dark:text-gray-400">Loading films...</p></div>';
+
+ // Get filter values
+ const locationFilter = document.getElementById('filterLocation').value;
+ const dateFilter = document.getElementById('filterDate').value;
+ const genreFilter = document.getElementById('filterGenre').value;
+ const ratingFilter = document.getElementById('filterRating').value;
+
+ // Update subtitle
+ let subtitle = 'Films';
+ if (locationFilter !== 'all') {
+ subtitle += ` in ${locationFilter}`;
+ }
+ if (dateFilter) {
+ const formattedDate = new Date(dateFilter).toLocaleDateString('en-GB', {
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric'
+ });
+ subtitle += ` on ${formattedDate}`;
+ }
+ if (genreFilter !== 'all') {
+ subtitle += `, ${genreFilter} genre`;
+ }
+ if (ratingFilter !== 'all') {
+ subtitle += `, rated ${ratingFilter}`;
+ }
+
+ document.getElementById('listingSubtitle').textContent = subtitle;
+
+ // Filter screenings
+ let filteredScreenings = [...this.mockData.screenings];
+
+ if (locationFilter !== 'all') {
+ filteredScreenings = filteredScreenings.filter(screening => {
+ const cinema = this.getCinemaById(screening.cinemaId);
+ return cinema.city === locationFilter;
+ });
+ }
+
+ if (dateFilter) {
+ filteredScreenings = filteredScreenings.filter(screening => {
+ return screening.date === dateFilter;
+ });
+ }
+
+ // Get unique films from filtered screenings
+ const filmIds = [...new Set(filteredScreenings.map(screening => screening.filmId))];
+ let filteredFilms = this.mockData.films.filter(film => filmIds.includes(film.id));
+
+ // Apply additional film filters
+ if (genreFilter !== 'all') {
+ filteredFilms = filteredFilms.filter(film => film.genre === genreFilter);
+ }
+
+ if (ratingFilter !== 'all') {
+ filteredFilms = filteredFilms.filter(film => film.rating === ratingFilter);
+ }
+
+ // Render filtered films
+ if (filteredFilms.length === 0) {
+ container.innerHTML = '<div class="p-4 text-center text-gray-500 dark:text-gray-400">No films matching your criteria.</div>';
+ return;
+ }
+
+ let filmsHTML = '';
+
+ filteredFilms.forEach(film => {
+ const filmScreenings = filteredScreenings.filter(screening => screening.filmId === film.id);
+
+ // Group screenings by cinema
+ const screeningsByCinema = {};
+ filmScreenings.forEach(screening => {
+ const cinema = this.getCinemaById(screening.cinemaId);
+ if (!screeningsByCinema[cinema.fullName]) {
+ screeningsByCinema[cinema.fullName] = [];
+ }
+ screeningsByCinema[cinema.fullName].push(screening);
+ });
+
+ // Format screenings for display
+ let screeningsHTML = '';
+ for (const [cinemaName, screenings] of Object.entries(screeningsByCinema)) {
+ screeningsHTML += `
+ <div class="mb-2">
+ <h5 class="font-medium text-sm">${cinemaName}</h5>
+ <div class="flex flex-wrap gap-2 mt-1">
+ `;
+
+ // Sort screenings by time
+ screenings.sort((a, b) => a.time.localeCompare(b.time));
+
+ screenings.forEach(screening => {
+ const formattedTime = new Date(`2000-01-01T${screening.time}`).toLocaleTimeString('en-GB', {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ screeningsHTML += `
+ <button class="book-now-btn px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 hover:bg-primary hover:text-white dark:hover:bg-dark-primary rounded"
+ data-screening-id="${screening.id}">
+ ${formattedTime}
+ </button>
+ `;
+ });
+
+ screeningsHTML += `
+ </div>
+ </div>
+ `;
+ }
+
+ filmsHTML += `
+ <div class="p-4 film-card">
+ <div class="flex flex-col md:flex-row">
+ <div class="md:w-1/4 mb-4 md:mb-0 md:pr-4">
+ <img src="${film.imageUrl}" alt="${film.title}" class="film-poster w-full rounded shadow-md">
+ </div>
+ <div class="md:w-1/2">
+ <div class="flex items-center mb-2">
+ <h3 class="text-xl font-bold">${film.title}</h3>
+ <span class="ml-2 px-2 py-0.5 text-xs font-bold bg-gray-200 dark:bg-gray-700 rounded-md">${film.rating}</span>
+ <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">${film.duration} min</span>
+ </div>
+
+ <p class="mb-2 text-sm">${film.description}</p>
+
+ <div class="mb-2">
+ <span class="text-sm font-medium">Director:</span>
+ <span class="text-sm">${film.director}</span>
+ </div>
+
+ <div class="mb-2">
+ <span class="text-sm font-medium">Cast:</span>
+ <span class="text-sm">${film.cast.join(', ')}</span>
+ </div>
+
+ <div class="mb-4">
+ <span class="text-sm font-medium">Genre:</span>
+ <span class="text-sm">${film.genre}</span>
+ </div>
+ </div>
+
+ <div class="md:w-1/4 md:pl-4">
+ <h4 class="font-medium mb-2">Showtimes</h4>
+ ${screeningsHTML}
+ </div>
+ </div>
+ </div>
+ `;
+ });
+
+ container.innerHTML = filmsHTML;
+
+ // Add event listeners to book now buttons
+ const bookNowButtons = document.querySelectorAll('.book-now-btn');
+ bookNowButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const screeningId = button.dataset.screeningId;
+ this.navigateToBooking(screeningId);
+ });
+ });
+ },
+
+ navigateToBooking(screeningId) {
+ // Switch to booking view
+ this.renderView('booking');
+ document.querySelectorAll('.tab').forEach(tab => {
+ tab.classList.remove('active');
+ if (tab.dataset.view === 'booking') {
+ tab.classList.add('active');
+ }
+ });
+
+ // Pre-select the screening
+ const screening = this.getScreeningById(screeningId);
+ const cinema = this.getCinemaById(screening.cinemaId);
+
+ // Set date and cinema
+ document.getElementById('bookingDate').value = screening.date;
+ document.getElementById('bookingCinema').value = cinema.id;
+
+ // Trigger film update
+ this.updateBookingFilms();
+
+ // Set film and trigger time update
+ setTimeout(() => {
+ const film = this.getFilmById(screening.filmId);
+ document.getElementById('bookingFilm').value = film.id;
+
+ // Trigger time update
+ this.updateBookingTimes();
+
+ // Set time and trigger seat update
+ setTimeout(() => {
+ document.getElementById('bookingTime').value = screeningId;
+ this.updateSeatingArea();
+ }, 100);
+ }, 100);
+ },
+
+ renderBookingForm() {
+ // Clear existing data
+ this.selectedSeats = [];
+
+ // Populate cinemas dropdown
+ const bookingCinema = document.getElementById('bookingCinema');
+ bookingCinema.innerHTML = '<option value="">Select Cinema</option>';
+
+ this.mockData.cinemas.forEach(cinema => {
+ bookingCinema.innerHTML += `<option value="${cinema.id}">${cinema.city} ${cinema.name}</option>`;
+ });
+
+ // Reset form
+ document.getElementById('bookingFilm').innerHTML = '<option value="">Select Film</option>';
+ document.getElementById('bookingFilm').disabled = true;
+
+ document.getElementById('bookingTime').innerHTML = '<option value="">Select Time</option>';
+ document.getElementById('bookingTime').disabled = true;
+
+ const seatingArea = document.getElementById('seatingArea');
+ seatingArea.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400">Please select a film and showing time first</p>';
+
+ const bookingSummary = document.getElementById('bookingSummary');
+ bookingSummary.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400">Please select a film and seats to see your booking summary</p>';
+
+ document.getElementById('completeBooking').disabled = true;
+
+ // Set today's date in booking date
+ const bookingDate = document.getElementById('bookingDate');
+ if (!bookingDate.value) {
+ bookingDate.valueAsDate = new Date();
+ }
+ },
+
+ updateBookingFilms() {
+ const bookingCinema = document.getElementById('bookingCinema');
+ const bookingDate = document.getElementById('bookingDate');
+ const bookingFilm = document.getElementById('bookingFilm');
+
+ if (!bookingCinema.value || !bookingDate.value) {
+ bookingFilm.innerHTML = '<option value="">Select Film</option>';
+ bookingFilm.disabled = true;
+ return;
+ }
+
+ // Get screenings for selected cinema and date
+ const screenings = this.mockData.screenings.filter(screening => {
+ return screening.cinemaId === bookingCinema.value && screening.date === bookingDate.value;
+ });
+
+ // Get unique films from screenings
+ const filmIds = [...new Set(screenings.map(screening => screening.filmId))];
+ const films = this.mockData.films.filter(film => filmIds.includes(film.id));
+
+ // Populate films dropdown
+ bookingFilm.innerHTML = '<option value="">Select Film</option>';
+ films.forEach(film => {
+ bookingFilm.innerHTML += `<option value="${film.id}">${film.title} (${film.rating})</option>`;
+ });
+
+ bookingFilm.disabled = false;
+
+ // Reset time and seats
+ document.getElementById('bookingTime').innerHTML = '<option value="">Select Time</option>';
+ document.getElementById('bookingTime').disabled = true;
+
+ const seatingArea = document.getElementById('seatingArea');
+ seatingArea.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400">Please select a film and showing time first</p>';
+ },
+
+ updateBookingTimes() {
+ const bookingCinema = document.getElementById('bookingCinema');
+ const bookingDate = document.getElementById('bookingDate');
+ const bookingFilm = document.getElementById('bookingFilm');
+ const bookingTime = document.getElementById('bookingTime');
+
+ if (!bookingCinema.value || !bookingDate.value || !bookingFilm.value) {
+ bookingTime.innerHTML = '<option value="">Select Time</option>';
+ bookingTime.disabled = true;
+ return;
+ }
+
+ // Get screenings for selected cinema, date, and film
+ const screenings = this.mockData.screenings.filter(screening => {
+ return screening.cinemaId === bookingCinema.value &&
+ screening.date === bookingDate.value &&
+ screening.filmId === bookingFilm.value;
+ });
+
+ // Sort screenings by time
+ screenings.sort((a, b) => a.time.localeCompare(b.time));
+
+ // Populate times dropdown
+ bookingTime.innerHTML = '<option value="">Select Time</option>';
+ screenings.forEach(screening => {
+ const formattedTime = new Date(`2000-01-01T${screening.time}`).toLocaleTimeString('en-GB', {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ const screen = this.getScreenById(screening.screenId);
+
+ bookingTime.innerHTML += `<option value="${screening.id}">
+ ${formattedTime} - Screen ${screen.number}
+ (£${screening.prices.lower.toFixed(2)}-£${screening.prices.vip.toFixed(2)})
+ </option>`;
+ });
+
+ bookingTime.disabled = false;
+
+ // Reset seats
+ this.selectedSeats = [];
+ const seatingArea = document.getElementById('seatingArea');
+ seatingArea.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400">Please select a showing time to view available seats</p>';
+
+ const bookingSummary = document.getElementById('bookingSummary');
+ bookingSummary.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400">Please select seats to see your booking summary</p>';
+
+ document.getElementById('completeBooking').disabled = true;
+ },
+
+ updateSeatingArea() {
+ const bookingTime = document.getElementById('bookingTime');
+
+ if (!bookingTime.value) {
+ return;
+ }
+
+ const screening = this.getScreeningById(bookingTime.value);
+ const screen = this.getScreenById(screening.screenId);
+
+ // Reset selected seats
+ this.selectedSeats = [];
+
+ // Create seating layout
+ const seatingArea = document.getElementById('seatingArea');
+ seatingArea.innerHTML = '';
+
+ // Calculate rows and seats per row
+ const totalRows = 10; // A-J
+ const seatsPerRow = Math.ceil(screen.capacity / totalRows);
+
+ // Create seating layout with lower hall, upper gallery, and VIP sections
+ const lowerHallRows = Math.ceil((screen.lowerHallSeats / screen.capacity) * totalRows);
+ const upperRegularRows = Math.ceil((screen.regularUpperSeats / screen.upperGallerySeats) * (totalRows - lowerHallRows));
+ const vipRows = totalRows - lowerHallRows - upperRegularRows;
+
+ // Create a main container for all seating sections
+ const mainContainer = document.createElement('div');
+ mainContainer.className = 'w-full';
+
+ // Lower Hall
+ const lowerHallHeading = document.createElement('div');
+ lowerHallHeading.className = 'mb-4 text-center';
+ lowerHallHeading.innerHTML = `<h4 class="text-sm font-medium mb-2">Lower Hall (£${screening.prices.lower.toFixed(2)})</h4>`;
+ mainContainer.appendChild(lowerHallHeading);
+
+ // Create a seating container
+ const lowerContainer = document.createElement('div');
+ lowerContainer.className = 'mb-6';
+
+ let seatCount = 0;
+ // Create lower hall rows (A, B, C, etc.)
+ for (let i = 0; i < lowerHallRows; i++) {
+ const rowLetter = String.fromCharCode(65 + i); // A, B, C, etc.
+ const rowDiv = document.createElement('div');
+ rowDiv.className = 'flex justify-center mb-2';
+
+ // Row label
+ const rowLabel = document.createElement('div');
+ rowLabel.className = 'w-6 flex items-center justify-center text-xs font-medium';
+ rowLabel.textContent = rowLetter;
+ rowDiv.appendChild(rowLabel);
+
+ // Add seats to the row
+ for (let j = 1; j <= seatsPerRow; j++) {
+ if (seatCount < screen.lowerHallSeats) {
+ const seatDiv = document.createElement('div');
+ seatDiv.className = 'seat lower';
+ seatDiv.setAttribute('data-row', rowLetter);
+ seatDiv.setAttribute('data-number', j);
+ seatDiv.setAttribute('data-type', 'lower');
+ seatDiv.setAttribute('data-price', screening.prices.lower);
+ seatDiv.textContent = j; // Show seat number inside the seat
+
+ // Check if seat is occupied
+ const isOccupied = screening.occupiedSeats.some(seat =>
+ seat.row === rowLetter && parseInt(seat.number) === j
+ );
+
+ if (isOccupied) {
+ seatDiv.classList.add('occupied');
+ } else {
+ // Add an onClick attribute for seat selection
+ const self = this;
+ seatDiv.onclick = function() {
+ self.toggleSeatSelection(this);
+ };
+ }
+
+ rowDiv.appendChild(seatDiv);
+ seatCount++;
+ }
+ }
+
+ lowerContainer.appendChild(rowDiv);
+ }
+ mainContainer.appendChild(lowerContainer);
+
+ // Upper Gallery (Regular)
+ const upperHeading = document.createElement('div');
+ upperHeading.className = 'mb-4 text-center';
+ upperHeading.innerHTML = `<h4 class="text-sm font-medium mb-2">Upper Gallery (£${screening.prices.upper.toFixed(2)})</h4>`;
+ mainContainer.appendChild(upperHeading);
+
+ const upperContainer = document.createElement('div');
+ upperContainer.className = 'mb-6';
+
+ seatCount = 0;
+ // Create upper regular rows
+ for (let i = 0; i < upperRegularRows; i++) {
+ const rowLetter = String.fromCharCode(65 + lowerHallRows + i);
+ const rowDiv = document.createElement('div');
+ rowDiv.className = 'flex justify-center mb-2';
+
+ // Row label
+ const rowLabel = document.createElement('div');
+ rowLabel.className = 'w-6 flex items-center justify-center text-xs font-medium';
+ rowLabel.textContent = rowLetter;
+ rowDiv.appendChild(rowLabel);
+
+ // Add seats to the row
+ for (let j = 1; j <= seatsPerRow; j++) {
+ if (seatCount < screen.regularUpperSeats) {
+ const seatDiv = document.createElement('div');
+ seatDiv.className = 'seat upper';
+ seatDiv.setAttribute('data-row', rowLetter);
+ seatDiv.setAttribute('data-number', j);
+ seatDiv.setAttribute('data-type', 'upper');
+ seatDiv.setAttribute('data-price', screening.prices.upper);
+ seatDiv.textContent = j; // Show seat number inside the seat
+
+ // Check if seat is occupied
+ const isOccupied = screening.occupiedSeats.some(seat =>
+ seat.row === rowLetter && parseInt(seat.number) === j
+ );
+
+ if (isOccupied) {
+ seatDiv.classList.add('occupied');
+ } else {
+ // Add an onClick attribute for seat selection
+ const self = this;
+ seatDiv.onclick = function() {
+ self.toggleSeatSelection(this);
+ };
+ }
+
+ rowDiv.appendChild(seatDiv);
+ seatCount++;
+ }
+ }
+
+ upperContainer.appendChild(rowDiv);
+ }
+ mainContainer.appendChild(upperContainer);
+
+ // VIP section
+ if (screen.vipSeats > 0) {
+ const vipHeading = document.createElement('div');
+ vipHeading.className = 'mb-4 text-center';
+ vipHeading.innerHTML = `<h4 class="text-sm font-medium mb-2">VIP Section (£${screening.prices.vip.toFixed(2)})</h4>`;
+ mainContainer.appendChild(vipHeading);
+
+ const vipContainer = document.createElement('div');
+ vipContainer.className = 'mb-6';
+
+ seatCount = 0;
+ // Create VIP rows
+ for (let i = 0; i < vipRows; i++) {
+ const rowLetter = String.fromCharCode(65 + lowerHallRows + upperRegularRows + i);
+ const rowDiv = document.createElement('div');
+ rowDiv.className = 'flex justify-center mb-2';
+
+ // Row label
+ const rowLabel = document.createElement('div');
+ rowLabel.className = 'w-6 flex items-center justify-center text-xs font-medium';
+ rowLabel.textContent = rowLetter;
+ rowDiv.appendChild(rowLabel);
+
+ // Add seats to the row
+ for (let j = 1; j <= seatsPerRow; j++) {
+ if (seatCount < screen.vipSeats) {
+ const seatDiv = document.createElement('div');
+ seatDiv.className = 'seat vip';
+ seatDiv.setAttribute('data-row', rowLetter);
+ seatDiv.setAttribute('data-number', j);
+ seatDiv.setAttribute('data-type', 'vip');
+ seatDiv.setAttribute('data-price', screening.prices.vip);
+ seatDiv.textContent = j; // Show seat number inside the seat
+
+ // Check if seat is occupied
+ const isOccupied = screening.occupiedSeats.some(seat =>
+ seat.row === rowLetter && parseInt(seat.number) === j
+ );
+
+ if (isOccupied) {
+ seatDiv.classList.add('occupied');
+ } else {
+ // Add an onClick attribute for seat selection
+ const self = this;
+ seatDiv.onclick = function() {
+ self.toggleSeatSelection(this);
+ };
+ }
+
+ rowDiv.appendChild(seatDiv);
+ seatCount++;
+ }
+ }
+
+ vipContainer.appendChild(rowDiv);
+ }
+ mainContainer.appendChild(vipContainer);
+ }
+
+ // Append the main container to the seating area
+ seatingArea.appendChild(mainContainer);
+
+ // Update booking summary
+ this.updateBookingSummary();
+ },
+
+ toggleSeatSelection(seatElement) {
+ // Check if seat is already occupied
+ if (seatElement.classList.contains('occupied')) {
+ return;
+ }
+
+ // Toggle selection
+ seatElement.classList.toggle('selected');
+
+ const row = seatElement.dataset.row;
+ const number = parseInt(seatElement.dataset.number);
+ const type = seatElement.dataset.type;
+ const price = parseFloat(seatElement.dataset.price);
+
+ // Update selected seats array
+ if (seatElement.classList.contains('selected')) {
+ this.selectedSeats.push({ row, number, type, price });
+ } else {
+ this.selectedSeats = this.selectedSeats.filter(seat =>
+ !(seat.row === row && seat.number === number)
+ );
+ }
+
+ // Update booking summary
+ this.updateBookingSummary();
+ },
+
+ updateBookingSummary() {
+ const bookingSummary = document.getElementById('bookingSummary');
+ const completeBookingButton = document.getElementById('completeBooking');
+
+ if (this.selectedSeats.length === 0) {
+ bookingSummary.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400">Please select seats to see your booking summary</p>';
+ completeBookingButton.disabled = true;
+ return;
+ }
+
+ // Get booking details
+ const screeningId = document.getElementById('bookingTime').value;
+ const screening = this.getScreeningById(screeningId);
+ const film = this.getFilmById(screening.filmId);
+ const cinema = this.getCinemaById(screening.cinemaId);
+ const screen = this.getScreenById(screening.screenId);
+
+ // Calculate total price
+ let totalPrice = 0;
+ this.selectedSeats.forEach(seat => {
+ totalPrice += seat.price;
+ });
+
+ // Format date and time
+ const formattedDate = new Date(screening.date).toLocaleDateString('en-GB', {
+ weekday: 'short',
+ day: 'numeric',
+ month: 'short'
+ });
+
+ const formattedTime = new Date(`2000-01-01T${screening.time}`).toLocaleTimeString('en-GB', {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ // Generate summary HTML
+ let summaryHTML = `
+ <div class="flex flex-col text-sm">
+ <p class="font-bold text-lg">${film.title}</p>
+ <p class="text-gray-700 dark:text-gray-300">${cinema.fullName} - Screen ${screen.number}</p>
+ <p class="text-gray-700 dark:text-gray-300">${formattedDate} at ${formattedTime}</p>
+
+ <div class="border-t border-gray-200 dark:border-gray-600 my-2 pt-2">
+ <p class="font-medium">Selected Seats:</p>
+ <div class="flex flex-wrap gap-1 my-1">
+ `;
+
+ // Sort seats by row and number
+ const sortedSeats = [...this.selectedSeats].sort((a, b) => {
+ if (a.row === b.row) {
+ return a.number - b.number;
+ }
+ return a.row.localeCompare(b.row);
+ });
+
+ // Group seats by type
+ const seatsByType = {
+ lower: [],
+ upper: [],
+ vip: []
+ };
+
+ sortedSeats.forEach(seat => {
+ seatsByType[seat.type].push(seat);
+ });
+
+ // Add seats by type
+ for (const [type, seats] of Object.entries(seatsByType)) {
+ if (seats.length > 0) {
+ const typeName = type === 'lower' ? 'Lower Hall' : (type === 'upper' ? 'Upper Gallery' : 'VIP');
+ const typePrice = seats[0].price;
+
+ summaryHTML += `<p class="w-full">${typeName} (£${typePrice.toFixed(2)} each): `;
+
+ const seatLabels = seats.map(seat => `${seat.row}${seat.number}`);
+ summaryHTML += seatLabels.join(', ');
+
+ summaryHTML += `</p>`;
+ }
+ }
+
+ summaryHTML += `
+ </div>
+ </div>
+
+ <div class="border-t border-gray-200 dark:border-gray-600 my-2 pt-2 flex justify-between">
+ <p class="font-medium">Total Price:</p>
+ <p class="font-bold">£${totalPrice.toFixed(2)}</p>
+ </div>
+ </div>
+ `;
+
+ bookingSummary.innerHTML = summaryHTML;
+ completeBookingButton.disabled = false;
+ },
+
+ completeBooking() {
+ // Validate customer information
+ const customerName = document.getElementById('customerName').value.trim();
+ const customerEmail = document.getElementById('customerEmail').value.trim();
+
+ if (!customerName) {
+ alert('Please enter customer name');
+ return;
+ }
+
+ if (!customerEmail) {
+ alert('Please enter customer email');
+ return;
+ }
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Processing your booking...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ // Create booking
+ const screeningId = document.getElementById('bookingTime').value;
+ const screening = this.getScreeningById(screeningId);
+
+ // Calculate total price
+ let totalPrice = 0;
+ this.selectedSeats.forEach(seat => {
+ totalPrice += seat.price;
+ });
+
+ // Generate unique booking ID
+ const bookingId = 'BK' + (100000 + this.mockData.bookings.length + 1).toString();
+
+ // Create new booking
+ const newBooking = new Booking(
+ bookingId,
+ screeningId,
+ this.selectedSeats,
+ customerName,
+ customerEmail,
+ new Date().toISOString().split('T')[0],
+ totalPrice
+ );
+
+ // Add booking to mock data
+ this.mockData.bookings.push(newBooking);
+
+ // Update occupied seats in screening
+ this.selectedSeats.forEach(seat => {
+ screening.occupiedSeats.push({
+ row: seat.row,
+ number: seat.number,
+ type: seat.type
+ });
+ });
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ // Show booking confirmation
+ this.showBookingConfirmation(newBooking);
+
+ // Reset booking form
+ this.resetBookingForm();
+ }, 1500);
+ },
+
+ showBookingConfirmation(booking) {
+ const screening = this.getScreeningById(booking.screeningId);
+ const film = this.getFilmById(screening.filmId);
+ const cinema = this.getCinemaById(screening.cinemaId);
+ const screen = this.getScreenById(screening.screenId);
+
+ // Format date and time
+ const formattedDate = new Date(screening.date).toLocaleDateString('en-GB', {
+ weekday: 'long',
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric'
+ });
+
+ const formattedTime = new Date(`2000-01-01T${screening.time}`).toLocaleTimeString('en-GB', {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ // Sort seats by row and number
+ const sortedSeats = [...booking.seats].sort((a, b) => {
+ if (a.row === b.row) {
+ return a.number - b.number;
+ }
+ return a.row.localeCompare(b.row);
+ });
+
+ const seatLabels = sortedSeats.map(seat => `${seat.row}${seat.number}`);
+
+ // Generate confirmation HTML
+ const confirmationContent = document.getElementById('bookingConfirmationContent');
+ confirmationContent.innerHTML = `
+ <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md mb-4">
+ <h4 class="font-bold text-lg mb-2">Booking Receipt</h4>
+ <p><span class="font-medium">Booking Reference:</span> ${booking.id}</p>
+ <p><span class="font-medium">Customer:</span> ${booking.customerName}</p>
+ <p><span class="font-medium">Booking Date:</span> ${new Date().toLocaleDateString('en-GB')}</p>
+ </div>
+
+ <div class="mb-4">
+ <div class="flex items-center mb-2">
+ <img src="${film.imageUrl}" alt="${film.title}" class="w-16 h-20 object-cover mr-3 rounded">
+ <div>
+ <h4 class="font-bold">${film.title}</h4>
+ <p>${cinema.fullName} - Screen ${screen.number}</p>
+ <p>${formattedDate} at ${formattedTime}</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="mb-4">
+ <p><span class="font-medium">Number of Tickets:</span> ${booking.seats.length}</p>
+ <p><span class="font-medium">Seat(s):</span> ${seatLabels.join(', ')}</p>
+ <p class="font-bold mt-2">Total: £${booking.totalPrice.toFixed(2)}</p>
+ </div>
+ `;
+
+ // Create printable receipt
+ const printableReceipt = document.getElementById('printableReceipt');
+ printableReceipt.innerHTML = `
+ <div class="p-6 bg-white text-black">
+ <div class="text-center mb-6">
+ <h1 class="text-2xl font-bold">HORIZON CINEMAS</h1>
+ <p>${cinema.address}</p>
+ <p>Tel: 01234 567890</p>
+ </div>
+
+ <div class="border-t border-b border-gray-300 py-4 my-4">
+ <h2 class="text-xl font-bold mb-2">TICKET RECEIPT</h2>
+ <p><span class="font-bold">Booking Ref:</span> ${booking.id}</p>
+ <p><span class="font-bold">Customer:</span> ${booking.customerName}</p>
+ <p><span class="font-bold">Date:</span> ${new Date().toLocaleDateString('en-GB')}</p>
+ </div>
+
+ <div class="mb-4">
+ <h3 class="text-lg font-bold">${film.title}</h3>
+ <p>${cinema.fullName} - Screen ${screen.number}</p>
+ <p>${formattedDate} at ${formattedTime}</p>
+ </div>
+
+ <div class="mb-6">
+ <p><span class="font-bold">Seat(s):</span> ${seatLabels.join(', ')}</p>
+ <p class="text-xl font-bold mt-2">Total: £${booking.totalPrice.toFixed(2)}</p>
+ </div>
+
+ <div class="border-t border-gray-300 pt-4 mt-4 text-center text-sm">
+ <p>Thank you for choosing Horizon Cinemas!</p>
+ <p>Please arrive at least 15 minutes before showtime.</p>
+ <p>This ticket is non-transferable and valid only for the specified show.</p>
+ </div>
+ </div>
+ `;
+
+ // Show confirmation modal
+ document.getElementById('bookingConfirmationModal').classList.remove('hidden');
+ },
+
+ resetBookingForm() {
+ // Reset selected seats
+ this.selectedSeats = [];
+
+ // Reset form fields
+ document.getElementById('customerName').value = '';
+ document.getElementById('customerEmail').value = '';
+
+ // Reset seating area
+ const seatingArea = document.getElementById('seatingArea');
+ seatingArea.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400">Please select a film and showing time first</p>';
+
+ const bookingSummary = document.getElementById('bookingSummary');
+ bookingSummary.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400">Please select a film and seats to see your booking summary</p>';
+
+ document.getElementById('completeBooking').disabled = true;
+
+ // Reset dropdowns
+ document.getElementById('bookingFilm').innerHTML = '<option value="">Select Film</option>';
+ document.getElementById('bookingFilm').disabled = true;
+
+ document.getElementById('bookingTime').innerHTML = '<option value="">Select Time</option>';
+ document.getElementById('bookingTime').disabled = true;
+ },
+
+ findBooking() {
+ const bookingReference = document.getElementById('cancellationReference').value.trim();
+
+ if (!bookingReference) {
+ alert('Please enter a booking reference');
+ return;
+ }
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Finding booking...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ // Find booking
+ const booking = this.mockData.bookings.find(b => b.id === bookingReference);
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ if (!booking) {
+ alert('Booking not found. Please check the reference number and try again.');
+ return;
+ }
+
+ if (booking.cancelled) {
+ alert('This booking has already been cancelled.');
+ return;
+ }
+
+ // Display booking details
+ this.displayBookingDetails(booking);
+ }, 1000);
+ },
+
+ displayBookingDetails(booking) {
+ const screening = this.getScreeningById(booking.screeningId);
+ const film = this.getFilmById(screening.filmId);
+ const cinema = this.getCinemaById(screening.cinemaId);
+ const screen = this.getScreenById(screening.screenId);
+
+ // Format date and time
+ const formattedDate = new Date(screening.date).toLocaleDateString('en-GB', {
+ weekday: 'long',
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric'
+ });
+
+ const formattedTime = new Date(`2000-01-01T${screening.time}`).toLocaleTimeString('en-GB', {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ // Sort seats by row and number
+ const sortedSeats = [...booking.seats].sort((a, b) => {
+ if (a.row === b.row) {
+ return a.number - b.number;
+ }
+ return a.row.localeCompare(b.row);
+ });
+
+ const seatLabels = sortedSeats.map(seat => `${seat.row}${seat.number}`);
+
+ // Generate details HTML
+ const bookingDetails = document.getElementById('bookingDetails');
+ bookingDetails.innerHTML = `
+ <div>
+ <h4 class="font-bold text-lg mb-2">Booking Details</h4>
+ <p><span class="font-medium">Booking Reference:</span> ${booking.id}</p>
+ <p><span class="font-medium">Customer:</span> ${booking.customerName}</p>
+ <p><span class="font-medium">Booking Date:</span> ${booking.bookingDate}</p>
+
+ <div class="mt-3">
+ <div class="flex items-center">
+ <img src="${film.imageUrl}" alt="${film.title}" class="w-16 h-20 object-cover mr-3 rounded">
+ <div>
+ <p class="font-medium">${film.title}</p>
+ <p>${cinema.fullName} - Screen ${screen.number}</p>
+ <p>${formattedDate} at ${formattedTime}</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="mt-3">
+ <p><span class="font-medium">Number of Tickets:</span> ${booking.seats.length}</p>
+ <p><span class="font-medium">Seat(s):</span> ${seatLabels.join(', ')}</p>
+ <p class="font-bold mt-1">Total: £${booking.totalPrice.toFixed(2)}</p>
+ </div>
+ </div>
+ `;
+
+ // Show booking details and cancellation actions
+ bookingDetails.classList.remove('hidden');
+ document.getElementById('cancellationActions').classList.remove('hidden');
+ document.getElementById('cancellationComplete').classList.add('hidden');
+
+ // Calculate cancellation fee
+ const cancellationFee = booking.totalPrice * 0.5;
+ document.getElementById('cancellationFee').textContent = `£${cancellationFee.toFixed(2)}`;
+
+ // Check if cancellation is allowed (at least 1 day prior to showing)
+ const screeningDate = new Date(`${screening.date}T${screening.time}`);
+ const today = new Date();
+
+ const screeningDay = new Date(screeningDate.getFullYear(), screeningDate.getMonth(), screeningDate.getDate());
+ const todayDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+ const dayDiff = (screeningDay - todayDay) / (1000 * 60 * 60 * 24);
+
+ if (dayDiff < 1) {
+ document.getElementById('cancellationWarning').innerHTML = `
+ <span class="font-bold">Cancellation not allowed.</span>
+ Cancellations must be made at least one day prior to the showing.
+ `;
+ document.getElementById('confirmCancellation').disabled = true;
+ } else {
+ document.getElementById('cancellationWarning').innerHTML = `
+ Cancellation fee: <span id="cancellationFee">£${cancellationFee.toFixed(2)}</span>
+ `;
+ document.getElementById('confirmCancellation').disabled = false;
+ }
+ },
+
+ confirmCancellation() {
+ const bookingReference = document.getElementById('cancellationReference').value.trim();
+ const booking = this.mockData.bookings.find(b => b.id === bookingReference);
+
+ if (!booking) {
+ return;
+ }
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Processing cancellation...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ // Cancel booking
+ const result = booking.cancel(new Date().toISOString().split('T')[0]);
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ if (result.success) {
+ // Remove seats from occupied seats in screening
+ const screening = this.getScreeningById(booking.screeningId);
+ booking.seats.forEach(seat => {
+ screening.occupiedSeats = screening.occupiedSeats.filter(s =>
+ !(s.row === seat.row && s.number === seat.number)
+ );
+ });
+
+ // Show cancellation complete message
+ document.getElementById('bookingDetails').classList.add('hidden');
+ document.getElementById('cancellationActions').classList.add('hidden');
+ document.getElementById('cancellationComplete').classList.remove('hidden');
+ document.getElementById('refundAmount').textContent = `£${booking.refundAmount.toFixed(2)}`;
+
+ // Reset cancellation reference
+ document.getElementById('cancellationReference').value = '';
+ } else {
+ alert(result.message);
+ }
+ }, 1500);
+ },
+
+ renderAdminView() {
+ // Initialize with films tab active
+ document.querySelectorAll('.admin-tab').forEach(tab => {
+ tab.classList.remove('bg-primary', 'dark:bg-dark-primary', 'text-white');
+ tab.classList.add('bg-gray-100', 'dark:bg-gray-700');
+ });
+
+ document.querySelector('.admin-tab[data-tab="films"]').classList.remove('bg-gray-100', 'dark:bg-gray-700');
+ document.querySelector('.admin-tab[data-tab="films"]').classList.add('bg-primary', 'dark:bg-dark-primary', 'text-white');
+
+ document.querySelectorAll('.admin-tab-content').forEach(content => {
+ content.classList.add('hidden');
+ });
+
+ document.getElementById('filmsTab').classList.remove('hidden');
+
+ // Populate films table
+ this.renderFilmsTable();
+
+ // Populate screenings cinema dropdown
+ const screeningCinema = document.getElementById('screeningCinema');
+ screeningCinema.innerHTML = '<option value="">All Cinemas</option>';
+
+ this.mockData.cinemas.forEach(cinema => {
+ screeningCinema.innerHTML += `<option value="${cinema.id}">${cinema.city} ${cinema.name}</option>`;
+ });
+
+ // Set today's date in screening date filter
+ const screeningDate = document.getElementById('screeningDate');
+ screeningDate.valueAsDate = new Date();
+ },
+
+ renderFilmsTable() {
+ const filmsTable = document.getElementById('filmsTable');
+ filmsTable.innerHTML = '';
+
+ if (this.mockData.films.length === 0) {
+ filmsTable.innerHTML = '<tr><td colspan="5" class="px-4 py-3 text-center text-gray-500 dark:text-gray-400">No films found.</td></tr>';
+ return;
+ }
+
+ this.mockData.films.forEach(film => {
+ const row = document.createElement('tr');
+ row.className = 'hover:bg-gray-50 dark:hover:bg-gray-800';
+
+ row.innerHTML = `
+ <td class="px-4 py-3">
+ <div class="flex items-center">
+ <img class="h-10 w-10 rounded object-cover mr-3" src="${film.imageUrl}" alt="${film.title}">
+ <div>
+ <p class="font-medium">${film.title}</p>
+ <p class="text-sm text-gray-500 dark:text-gray-400">
+ ${film.releaseDate ? new Date(film.releaseDate).getFullYear() : 'N/A'}
+ </p>
+ </div>
+ </div>
+ </td>
+ <td class="px-4 py-3">${film.genre}</td>
+ <td class="px-4 py-3">${film.rating}</td>
+ <td class="px-4 py-3">${film.duration} min</td>
+ <td class="px-4 py-3">
+ <div class="flex space-x-2">
+ <button class="edit-film-btn text-primary dark:text-dark-primary hover:underline" data-film-id="${film.id}">
+ Edit
+ </button>
+ <button class="delete-film-btn text-red-600 dark:text-red-400 hover:underline" data-film-id="${film.id}">
+ Delete
+ </button>
+ </div>
+ </td>
+ `;
+
+ filmsTable.appendChild(row);
+ });
+
+ // Add event listeners to edit and delete buttons
+ document.querySelectorAll('.edit-film-btn').forEach(button => {
+ button.addEventListener('click', () => {
+ this.editFilm(button.dataset.filmId);
+ });
+ });
+
+ document.querySelectorAll('.delete-film-btn').forEach(button => {
+ button.addEventListener('click', () => {
+ this.deleteFilm(button.dataset.filmId);
+ });
+ });
+ },
+
+ showFilmForm(filmId = null) {
+ const filmFormTitle = document.getElementById('filmFormTitle');
+ const filmForm = document.getElementById('filmForm');
+
+ // Reset form
+ filmForm.reset();
+
+ if (filmId) {
+ // Edit existing film
+ const film = this.getFilmById(filmId);
+
+ if (!film) {
+ return;
+ }
+
+ filmFormTitle.textContent = 'Edit Film';
+
+ // Populate form
+ document.getElementById('filmId').value = film.id;
+ document.getElementById('filmTitle').value = film.title;
+ document.getElementById('filmGenre').value = film.genre;
+ document.getElementById('filmRating').value = film.rating;
+ document.getElementById('filmDuration').value = film.duration;
+ document.getElementById('filmReleaseDate').value = film.releaseDate;
+ document.getElementById('filmDirector').value = film.director;
+ document.getElementById('filmCast').value = film.cast.join(', ');
+ document.getElementById('filmDescription').value = film.description;
+ document.getElementById('filmImageUrl').value = film.imageUrl;
+ } else {
+ // Add new film
+ filmFormTitle.textContent = 'Add New Film';
+ document.getElementById('filmId').value = '';
+
+ // Set default release date to today
+ document.getElementById('filmReleaseDate').valueAsDate = new Date();
+ }
+
+ // Show form modal
+ document.getElementById('filmFormModal').classList.remove('hidden');
+ },
+
+ saveFilm() {
+ // Get form data
+ const filmId = document.getElementById('filmId').value;
+ const title = document.getElementById('filmTitle').value.trim();
+ const genre = document.getElementById('filmGenre').value;
+ const rating = document.getElementById('filmRating').value;
+ const duration = parseInt(document.getElementById('filmDuration').value);
+ const releaseDate = document.getElementById('filmReleaseDate').value;
+ const director = document.getElementById('filmDirector').value.trim();
+ const cast = document.getElementById('filmCast').value.split(',').map(actor => actor.trim());
+ const description = document.getElementById('filmDescription').value.trim();
+ const imageUrl = document.getElementById('filmImageUrl').value.trim();
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Saving film...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ if (filmId) {
+ // Update existing film
+ const film = this.getFilmById(filmId);
+
+ if (film) {
+ film.title = title;
+ film.genre = genre;
+ film.rating = rating;
+ film.duration = duration;
+ film.releaseDate = releaseDate;
+ film.director = director;
+ film.cast = cast;
+ film.description = description;
+ if (imageUrl) film.imageUrl = imageUrl;
+ }
+ } else {
+ // Create new film
+ const newFilmId = 'film' + (this.mockData.films.length + 1);
+
+ const newFilm = new Film(
+ newFilmId,
+ title,
+ description,
+ genre,
+ rating,
+ duration,
+ releaseDate,
+ director,
+ cast,
+ imageUrl
+ );
+
+ this.mockData.films.push(newFilm);
+ }
+
+ // Hide form modal
+ document.getElementById('filmFormModal').classList.add('hidden');
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ // Update films table
+ this.renderFilmsTable();
+ }, 1000);
+ },
+
+ editFilm(filmId) {
+ this.showFilmForm(filmId);
+ },
+
+ deleteFilm(filmId) {
+ // Check if film has any screenings
+ const hasScreenings = this.mockData.screenings.some(screening => screening.filmId === filmId);
+
+ if (hasScreenings) {
+ alert('Cannot delete film because it has scheduled screenings. Remove all screenings for this film first.');
+ return;
+ }
+
+ // Confirm deletion
+ if (!confirm('Are you sure you want to delete this film?')) {
+ return;
+ }
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Deleting film...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ // Delete film
+ this.mockData.films = this.mockData.films.filter(film => film.id !== filmId);
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ // Update films table
+ this.renderFilmsTable();
+ }, 1000);
+ },
+
+ renderScreeningsTable() {
+ const screeningsTable = document.getElementById('screeningsTable');
+ screeningsTable.innerHTML = '';
+
+ // Get filter values
+ const cinemaFilter = document.getElementById('screeningCinema').value;
+ const dateFilter = document.getElementById('screeningDate').value;
+
+ // Filter screenings
+ let filteredScreenings = [...this.mockData.screenings];
+
+ if (cinemaFilter) {
+ filteredScreenings = filteredScreenings.filter(screening => screening.cinemaId === cinemaFilter);
+ }
+
+ if (dateFilter) {
+ filteredScreenings = filteredScreenings.filter(screening => screening.date === dateFilter);
+ }
+
+ // Sort screenings by date and time
+ filteredScreenings.sort((a, b) => {
+ if (a.date === b.date) {
+ return a.time.localeCompare(b.time);
+ }
+ return a.date.localeCompare(b.date);
+ });
+
+ if (filteredScreenings.length === 0) {
+ screeningsTable.innerHTML = '<tr><td colspan="6" class="px-4 py-3 text-center text-gray-500 dark:text-gray-400">No screenings found.</td></tr>';
+ return;
+ }
+
+ filteredScreenings.forEach(screening => {
+ const film = this.getFilmById(screening.filmId);
+ const cinema = this.getCinemaById(screening.cinemaId);
+ const screen = this.getScreenById(screening.screenId);
+
+ const formattedDate = new Date(screening.date).toLocaleDateString('en-GB', {
+ day: 'numeric',
+ month: 'short',
+ year: 'numeric'
+ });
+
+ const formattedTime = new Date(`2000-01-01T${screening.time}`).toLocaleTimeString('en-GB', {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ const row = document.createElement('tr');
+ row.className = 'hover:bg-gray-50 dark:hover:bg-gray-800';
+
+ row.innerHTML = `
+ <td class="px-4 py-3">
+ <div class="flex items-center">
+ <img class="h-10 w-10 rounded object-cover mr-3" src="${film.imageUrl}" alt="${film.title}">
+ <div>
+ <p class="font-medium">${film.title}</p>
+ <p class="text-sm text-gray-500 dark:text-gray-400">${film.rating}</p>
+ </div>
+ </div>
+ </td>
+ <td class="px-4 py-3">${cinema.fullName}</td>
+ <td class="px-4 py-3">${screen.number}</td>
+ <td class="px-4 py-3">${formattedDate}</td>
+ <td class="px-4 py-3">${formattedTime}</td>
+ <td class="px-4 py-3">
+ <div class="flex space-x-2">
+ <button class="edit-screening-btn text-primary dark:text-dark-primary hover:underline" data-screening-id="${screening.id}">
+ Edit
+ </button>
+ <button class="delete-screening-btn text-red-600 dark:text-red-400 hover:underline" data-screening-id="${screening.id}">
+ Delete
+ </button>
+ </div>
+ </td>
+ `;
+
+ screeningsTable.appendChild(row);
+ });
+
+ // Add event listeners to edit and delete buttons
+ document.querySelectorAll('.edit-screening-btn').forEach(button => {
+ button.addEventListener('click', () => {
+ this.editScreening(button.dataset.screeningId);
+ });
+ });
+
+ document.querySelectorAll('.delete-screening-btn').forEach(button => {
+ button.addEventListener('click', () => {
+ this.deleteScreening(button.dataset.screeningId);
+ });
+ });
+ },
+
+ showScreeningForm(screeningId = null) {
+ const screeningFormTitle = document.getElementById('screeningFormTitle');
+ const screeningForm = document.getElementById('screeningForm');
+
+ // Reset form
+ screeningForm.reset();
+
+ // Populate cinema dropdown
+ const screeningCinemaSelect = document.getElementById('screeningCinemaSelect');
+ screeningCinemaSelect.innerHTML = '<option value="">Select Cinema</option>';
+
+ this.mockData.cinemas.forEach(cinema => {
+ screeningCinemaSelect.innerHTML += `<option value="${cinema.id}">${cinema.city} ${cinema.name}</option>`;
+ });
+
+ // Populate films dropdown
+ const screeningFilm = document.getElementById('screeningFilm');
+ screeningFilm.innerHTML = '<option value="">Select Film</option>';
+
+ this.mockData.films.forEach(film => {
+ screeningFilm.innerHTML += `<option value="${film.id}">${film.title} (${film.rating})</option>`;
+ });
+
+ // Set up event listener for cinema selection
+ screeningCinemaSelect.onchange = () => {
+ const screeningScreen = document.getElementById('screeningScreen');
+ screeningScreen.innerHTML = '<option value="">Select Screen</option>';
+
+ if (screeningCinemaSelect.value) {
+ const cinema = this.getCinemaById(screeningCinemaSelect.value);
+
+ cinema.screens.forEach(screen => {
+ screeningScreen.innerHTML += `<option value="${screen.id}">Screen ${screen.number} (${screen.capacity} seats)</option>`;
+ });
+ }
+ };
+
+ if (screeningId) {
+ // Edit existing screening
+ const screening = this.getScreeningById(screeningId);
+
+ if (!screening) {
+ return;
+ }
+
+ screeningFormTitle.textContent = 'Edit Screening';
+
+ // Populate form
+ document.getElementById('screeningId').value = screening.id;
+ document.getElementById('screeningCinemaSelect').value = screening.cinemaId;
+ document.getElementById('screeningFilm').value = screening.filmId;
+ document.getElementById('screeningDateInput').value = screening.date;
+ document.getElementById('screeningTime').value = screening.time;
+ document.getElementById('screeningLowerPrice').value = screening.prices.lower;
+ document.getElementById('screeningUpperPrice').value = screening.prices.upper;
+ document.getElementById('screeningVIPPrice').value = screening.prices.vip;
+
+ // Trigger cinema change to populate screens dropdown
+ screeningCinemaSelect.dispatchEvent(new Event('change'));
+
+ // Set screen after screens dropdown is populated
+ setTimeout(() => {
+ document.getElementById('screeningScreen').value = screening.screenId;
+ }, 100);
+ } else {
+ // Add new screening
+ screeningFormTitle.textContent = 'Add New Screening';
+ document.getElementById('screeningId').value = '';
+
+ // Set default date to today
+ document.getElementById('screeningDateInput').valueAsDate = new Date();
+ }
+
+ // Show form modal
+ document.getElementById('screeningFormModal').classList.remove('hidden');
+ },
+
+ saveScreening() {
+ // Get form data
+ const screeningId = document.getElementById('screeningId').value;
+ const cinemaId = document.getElementById('screeningCinemaSelect').value;
+ const screenId = document.getElementById('screeningScreen').value;
+ const filmId = document.getElementById('screeningFilm').value;
+ const date = document.getElementById('screeningDateInput').value;
+ const time = document.getElementById('screeningTime').value;
+ const lowerPrice = parseFloat(document.getElementById('screeningLowerPrice').value);
+ const upperPrice = parseFloat(document.getElementById('screeningUpperPrice').value);
+ const vipPrice = parseFloat(document.getElementById('screeningVIPPrice').value);
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Saving screening...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ if (screeningId) {
+ // Update existing screening
+ const screening = this.getScreeningById(screeningId);
+
+ if (screening) {
+ screening.cinemaId = cinemaId;
+ screening.screenId = screenId;
+ screening.filmId = filmId;
+ screening.date = date;
+ screening.time = time;
+ screening.prices = {
+ lower: lowerPrice,
+ upper: upperPrice,
+ vip: vipPrice
+ };
+ }
+ } else {
+ // Create new screening
+ const newScreeningId = `${date}-${filmId}-${cinemaId}-${screenId}-${Math.floor(Math.random() * 10000)}`;
+
+ const newScreening = new Screening(
+ newScreeningId,
+ filmId,
+ cinemaId,
+ screenId,
+ date,
+ time,
+ {
+ lower: lowerPrice,
+ upper: upperPrice,
+ vip: vipPrice
+ }
+ );
+
+ this.mockData.screenings.push(newScreening);
+ }
+
+ // Hide form modal
+ document.getElementById('screeningFormModal').classList.add('hidden');
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ // Update screenings table
+ this.renderScreeningsTable();
+ }, 1000);
+ },
+
+ editScreening(screeningId) {
+ this.showScreeningForm(screeningId);
+ },
+
+ deleteScreening(screeningId) {
+ // Check if screening has any bookings
+ const hasBookings = this.mockData.bookings.some(booking =>
+ booking.screeningId === screeningId && !booking.cancelled
+ );
+
+ if (hasBookings) {
+ alert('Cannot delete screening because it has active bookings. Cancel all bookings for this screening first.');
+ return;
+ }
+
+ // Confirm deletion
+ if (!confirm('Are you sure you want to delete this screening?')) {
+ return;
+ }
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Deleting screening...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ // Delete screening
+ this.mockData.screenings = this.mockData.screenings.filter(screening => screening.id !== screeningId);
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ // Update screenings table
+ this.renderScreeningsTable();
+ }, 1000);
+ },
+
+ generateReport() {
+ const reportType = document.getElementById('reportType').value;
+ const reportPeriod = document.getElementById('reportPeriod').value;
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Generating report...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ // Generate report based on type and period
+ switch (reportType) {
+ case 'bookings':
+ this.generateBookingsReport(reportPeriod);
+ break;
+ case 'revenue':
+ this.generateRevenueReport(reportPeriod);
+ break;
+ case 'topFilms':
+ this.generateTopFilmsReport(reportPeriod);
+ break;
+ case 'staffPerformance':
+ this.generateStaffPerformanceReport(reportPeriod);
+ break;
+ }
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ // Show report results
+ document.getElementById('reportResults').classList.remove('hidden');
+ }, 1500);
+ },
+
+ generateCustomerCSV() {
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Generating customer CSV...';
+
+ setTimeout(() => {
+ // Create CSV content
+ let csvContent = 'Booking ID,Customer Name,Customer Email,Booking Date,Film,Cinema,Screen,Showing Date,Showing Time,Seats,Total Price,Status\n';
+
+ // Get valid bookings
+ this.mockData.bookings.forEach(booking => {
+ const screening = this.getScreeningById(booking.screeningId);
+ const film = this.getFilmById(screening.filmId);
+ const cinema = this.getCinemaById(screening.cinemaId);
+ const screen = this.getScreenById(screening.screenId);
+
+ // Format date and time
+ const showingDate = new Date(screening.date).toLocaleDateString('en-GB');
+ const showingTime = new Date(`2000-01-01T${screening.time}`).toLocaleTimeString('en-GB', {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ // Format seats
+ const seats = booking.seats.map(seat => `${seat.row}${seat.number}`).join(', ');
+
+ // Status
+ const status = booking.cancelled ? `Cancelled (${booking.cancellationDate})` : 'Active';
+
+ // Add row to CSV
+ csvContent += `"${booking.id}","${booking.customerName}","${booking.customerEmail}","${booking.bookingDate}","${film.title}","${cinema.fullName}","${screen.number}","${showingDate}","${showingTime}","${seats}","£${booking.totalPrice.toFixed(2)}","${status}"\n`;
+ });
+
+ // Set CSV content to textarea
+ document.getElementById('csvContent').value = csvContent;
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ // Show CSV modal
+ document.getElementById('customerCSVModal').classList.remove('hidden');
+ }, 1500);
+ },
+
+ generateBookingsReport(period) {
+ // Set report title and description
+ document.getElementById('reportTitle').textContent = 'Bookings by Film';
+ document.getElementById('reportDescription').textContent = this.getReportPeriodDescription(period);
+
+ // Generate mock data for the report
+ const films = this.mockData.films;
+ const bookingsData = films.map(film => {
+ return {
+ film: film.title,
+ bookingCount: Math.floor(Math.random() * 200) + 50
+ };
+ });
+
+ // Sort by booking count in descending order
+ bookingsData.sort((a, b) => b.bookingCount - a.bookingCount);
+
+ // Generate chart
+ const chartContainer = document.getElementById('chartContainer');
+ chartContainer.innerHTML = '<canvas id="reportChart"></canvas>';
+
+ const ctx = document.getElementById('reportChart').getContext('2d');
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: bookingsData.map(item => item.film),
+ datasets: [{
+ label: 'Number of Bookings',
+ data: bookingsData.map(item => item.bookingCount),
+ backgroundColor: '#5D5CDE',
+ borderColor: '#4A49B0',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Number of Bookings'
+ }
+ },
+ x: {
+ title: {
+ display: true,
+ text: 'Film'
+ }
+ }
+ }
+ }
+ });
+
+ // Generate table
+ const tableContainer = document.getElementById('tableContainer');
+
+ let tableHTML = `
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+ <thead>
+ <tr>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Film</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Number of Bookings</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Percentage</th>
+ </tr>
+ </thead>
+ <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+ `;
+
+ const totalBookings = bookingsData.reduce((sum, item) => sum + item.bookingCount, 0);
+
+ bookingsData.forEach(item => {
+ const percentage = ((item.bookingCount / totalBookings) * 100).toFixed(1);
+
+ tableHTML += `
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+ <td class="px-4 py-3">${item.film}</td>
+ <td class="px-4 py-3">${item.bookingCount}</td>
+ <td class="px-4 py-3">${percentage}%</td>
+ </tr>
+ `;
+ });
+
+ tableHTML += `
+ </tbody>
+ <tfoot>
+ <tr class="font-medium">
+ <td class="px-4 py-3">Total</td>
+ <td class="px-4 py-3">${totalBookings}</td>
+ <td class="px-4 py-3">100%</td>
+ </tr>
+ </tfoot>
+ </table>
+ `;
+
+ tableContainer.innerHTML = tableHTML;
+ },
+
+ generateRevenueReport(period) {
+ // Set report title and description
+ document.getElementById('reportTitle').textContent = 'Revenue by Cinema';
+ document.getElementById('reportDescription').textContent = this.getReportPeriodDescription(period);
+
+ // Generate mock data for the report
+ const cinemas = this.mockData.cinemas;
+ const revenueData = cinemas.map(cinema => {
+ return {
+ cinema: cinema.fullName,
+ revenue: Math.floor(Math.random() * 20000) + 5000
+ };
+ });
+
+ // Sort by revenue in descending order
+ revenueData.sort((a, b) => b.revenue - a.revenue);
+
+ // Generate chart
+ const chartContainer = document.getElementById('chartContainer');
+ chartContainer.innerHTML = '<canvas id="reportChart"></canvas>';
+
+ const ctx = document.getElementById('reportChart').getContext('2d');
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: revenueData.map(item => item.cinema),
+ datasets: [{
+ label: 'Revenue (£)',
+ data: revenueData.map(item => item.revenue),
+ backgroundColor: '#5D5CDE',
+ borderColor: '#4A49B0',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Revenue (£)'
+ }
+ },
+ x: {
+ title: {
+ display: true,
+ text: 'Cinema'
+ }
+ }
+ }
+ }
+ });
+
+ // Generate table
+ const tableContainer = document.getElementById('tableContainer');
+
+ let tableHTML = `
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+ <thead>
+ <tr>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Cinema</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Revenue (£)</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Percentage</th>
+ </tr>
+ </thead>
+ <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+ `;
+
+ const totalRevenue = revenueData.reduce((sum, item) => sum + item.revenue, 0);
+
+ revenueData.forEach(item => {
+ const percentage = ((item.revenue / totalRevenue) * 100).toFixed(1);
+
+ tableHTML += `
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+ <td class="px-4 py-3">${item.cinema}</td>
+ <td class="px-4 py-3">£${item.revenue.toFixed(2)}</td>
+ <td class="px-4 py-3">${percentage}%</td>
+ </tr>
+ `;
+ });
+
+ tableHTML += `
+ </tbody>
+ <tfoot>
+ <tr class="font-medium">
+ <td class="px-4 py-3">Total</td>
+ <td class="px-4 py-3">£${totalRevenue.toFixed(2)}</td>
+ <td class="px-4 py-3">100%</td>
+ </tr>
+ </tfoot>
+ </table>
+ `;
+
+ tableContainer.innerHTML = tableHTML;
+ },
+
+ generateTopFilmsReport(period) {
+ // Set report title and description
+ document.getElementById('reportTitle').textContent = 'Top Revenue Films';
+ document.getElementById('reportDescription').textContent = this.getReportPeriodDescription(period);
+
+ // Generate mock data for the report
+ const films = this.mockData.films;
+ const topFilmsData = films.map(film => {
+ return {
+ film: film.title,
+ revenue: Math.floor(Math.random() * 20000) + 5000,
+ bookings: Math.floor(Math.random() * 500) + 100
+ };
+ });
+
+ // Sort by revenue in descending order
+ topFilmsData.sort((a, b) => b.revenue - a.revenue);
+
+ // Take only top 10
+ const top10Films = topFilmsData.slice(0, 10);
+
+ // Generate chart
+ const chartContainer = document.getElementById('chartContainer');
+ chartContainer.innerHTML = '<canvas id="reportChart"></canvas>';
+
+ const ctx = document.getElementById('reportChart').getContext('2d');
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: top10Films.map(item => item.film),
+ datasets: [{
+ label: 'Revenue (£)',
+ data: top10Films.map(item => item.revenue),
+ backgroundColor: '#5D5CDE',
+ borderColor: '#4A49B0',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Revenue (£)'
+ }
+ },
+ x: {
+ title: {
+ display: true,
+ text: 'Film'
+ }
+ }
+ }
+ }
+ });
+
+ // Generate table
+ const tableContainer = document.getElementById('tableContainer');
+
+ let tableHTML = `
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+ <thead>
+ <tr>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Rank</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Film</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Revenue (£)</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Bookings</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Avg. Revenue per Booking</th>
+ </tr>
+ </thead>
+ <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+ `;
+
+ top10Films.forEach((item, index) => {
+ const avgRevenue = (item.revenue / item.bookings).toFixed(2);
+
+ tableHTML += `
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+ <td class="px-4 py-3">${index + 1}</td>
+ <td class="px-4 py-3">${item.film}</td>
+ <td class="px-4 py-3">£${item.revenue.toFixed(2)}</td>
+ <td class="px-4 py-3">${item.bookings}</td>
+ <td class="px-4 py-3">£${avgRevenue}</td>
+ </tr>
+ `;
+ });
+
+ tableHTML += `
+ </tbody>
+ </table>
+ `;
+
+ tableContainer.innerHTML = tableHTML;
+ },
+
+ generateStaffPerformanceReport(period) {
+ // Set report title and description
+ document.getElementById('reportTitle').textContent = 'Staff Booking Performance';
+ document.getElementById('reportDescription').textContent = this.getReportPeriodDescription(period);
+
+ // Sort by booking count in descending order
+ const staffData = [...this.mockData.staffPerformance].sort((a, b) => b.bookingCount - a.bookingCount);
+
+ // Generate chart
+ const chartContainer = document.getElementById('chartContainer');
+ chartContainer.innerHTML = '<canvas id="reportChart"></canvas>';
+
+ const ctx = document.getElementById('reportChart').getContext('2d');
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: staffData.map(item => item.staffName),
+ datasets: [{
+ label: 'Number of Bookings',
+ data: staffData.map(item => item.bookingCount),
+ backgroundColor: '#5D5CDE',
+ borderColor: '#4A49B0',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Number of Bookings'
+ }
+ },
+ x: {
+ title: {
+ display: true,
+ text: 'Staff Member'
+ }
+ }
+ }
+ }
+ });
+
+ // Generate table
+ const tableContainer = document.getElementById('tableContainer');
+
+ let tableHTML = `
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+ <thead>
+ <tr>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Staff Name</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Number of Bookings</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Total Revenue (£)</th>
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Avg. Booking Value (£)</th>
+ </tr>
+ </thead>
+ <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+ `;
+
+ staffData.forEach(item => {
+ tableHTML += `
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+ <td class="px-4 py-3">${item.staffName}</td>
+ <td class="px-4 py-3">${item.bookingCount}</td>
+ <td class="px-4 py-3">£${item.totalRevenue.toFixed(2)}</td>
+ <td class="px-4 py-3">£${item.avgBookingValue.toFixed(2)}</td>
+ </tr>
+ `;
+ });
+
+ const totalBookings = staffData.reduce((sum, item) => sum + item.bookingCount, 0);
+ const totalRevenue = staffData.reduce((sum, item) => sum + item.totalRevenue, 0);
+ const avgRevenue = totalRevenue / totalBookings;
+
+ tableHTML += `
+ </tbody>
+ <tfoot>
+ <tr class="font-medium">
+ <td class="px-4 py-3">Total</td>
+ <td class="px-4 py-3">${totalBookings}</td>
+ <td class="px-4 py-3">£${totalRevenue.toFixed(2)}</td>
+ <td class="px-4 py-3">£${avgRevenue.toFixed(2)}</td>
+ </tr>
+ </tfoot>
+ </table>
+ `;
+
+ tableContainer.innerHTML = tableHTML;
+ },
+
+ getReportPeriodDescription(period) {
+ switch (period) {
+ case 'current':
+ return 'Data for the current month';
+ case 'previous':
+ return 'Data for the previous month';
+ case 'quarter':
+ return 'Data for the last quarter';
+ case 'year':
+ return 'Data for the year to date';
+ default:
+ return '';
+ }
+ },
+
+ renderManagerView() {
+ // Populate cinemas table
+ this.renderCinemasTable();
+
+ // Update screen capacities form based on default selection
+ this.updateScreenCapacitiesForm();
+
+ // Set default prices based on the selected city
+ document.getElementById('cinemaCity').addEventListener('change', () => {
+ const city = document.getElementById('cinemaCity').value;
+ this.updateDefaultPrices(city);
+ });
+
+ // Set initial default prices
+ this.updateDefaultPrices('Birmingham');
+ },
+
+ renderCinemasTable() {
+ const cinemasTable = document.getElementById('cinemasTable');
+ cinemasTable.innerHTML = '';
+
+ if (this.mockData.cinemas.length === 0) {
+ cinemasTable.innerHTML = '<tr><td colspan="4" class="px-4 py-3 text-center text-gray-500 dark:text-gray-400">No cinemas found.</td></tr>';
+ return;
+ }
+
+ this.mockData.cinemas.forEach(cinema => {
+ const row = document.createElement('tr');
+ row.className = 'hover:bg-gray-50 dark:hover:bg-gray-800';
+
+ row.innerHTML = `
+ <td class="px-4 py-3">${cinema.city}</td>
+ <td class="px-4 py-3">${cinema.name}</td>
+ <td class="px-4 py-3">${cinema.screens.length}</td>
+ <td class="px-4 py-3">
+ <div class="flex space-x-2">
+ <button class="view-cinema-btn text-primary dark:text-dark-primary hover:underline" data-cinema-id="${cinema.id}">
+ View
+ </button>
+ <button class="edit-cinema-btn text-primary dark:text-dark-primary hover:underline" data-cinema-id="${cinema.id}">
+ Edit
+ </button>
+ <button class="delete-cinema-btn text-red-600 dark:text-red-400 hover:underline" data-cinema-id="${cinema.id}">
+ Delete
+ </button>
+ </div>
+ </td>
+ `;
+
+ cinemasTable.appendChild(row);
+ });
+
+ // Add event listeners to view, edit, and delete buttons
+ document.querySelectorAll('.view-cinema-btn').forEach(button => {
+ button.addEventListener('click', () => {
+ this.viewCinema(button.dataset.cinemaId);
+ });
+ });
+
+ document.querySelectorAll('.edit-cinema-btn').forEach(button => {
+ button.addEventListener('click', () => {
+ this.editCinema(button.dataset.cinemaId);
+ });
+ });
+
+ document.querySelectorAll('.delete-cinema-btn').forEach(button => {
+ button.addEventListener('click', () => {
+ this.deleteCinema(button.dataset.cinemaId);
+ });
+ });
+ },
+
+ updateScreenCapacitiesForm() {
+ const screenCount = parseInt(document.getElementById('cinemaScreens').value);
+ const container = document.getElementById('screenCapacitiesContainer');
+
+ let html = '<h4 class="font-medium">Screen Capacities</h4>';
+
+ for (let i = 1; i <= screenCount; i++) {
+ html += `
+ <div class="flex items-center space-x-2">
+ <label class="text-sm w-24">Screen ${i}:</label>
+ <select id="screenCapacity${i}" class="flex-1 px-3 py-2 text-base bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md" required>
+ <option value="50">50 seats</option>
+ <option value="60">60 seats</option>
+ <option value="70">70 seats</option>
+ <option value="80" selected>80 seats</option>
+ <option value="90">90 seats</option>
+ <option value="100">100 seats</option>
+ <option value="110">110 seats</option>
+ <option value="120">120 seats</option>
+ </select>
+ </div>
+ `;
+ }
+
+ container.innerHTML = html;
+ },
+
+ updateDefaultPrices(city) {
+ let morningPrice, afternoonPrice, eveningPrice;
+
+ switch (city) {
+ case 'Birmingham':
+ morningPrice = 5;
+ afternoonPrice = 6;
+ eveningPrice = 7;
+ break;
+ case 'Bristol':
+ morningPrice = 6;
+ afternoonPrice = 7;
+ eveningPrice = 8;
+ break;
+ case 'Cardiff':
+ morningPrice = 5;
+ afternoonPrice = 6;
+ eveningPrice = 7;
+ break;
+ case 'London':
+ morningPrice = 10;
+ afternoonPrice = 11;
+ eveningPrice = 12;
+ break;
+ default:
+ morningPrice = 5;
+ afternoonPrice = 6;
+ eveningPrice = 7;
+ }
+
+ document.getElementById('priceMorning').value = morningPrice;
+ document.getElementById('priceAfternoon').value = afternoonPrice;
+ document.getElementById('priceEvening').value = eveningPrice;
+ },
+
+ addNewCinema() {
+ // Get form data
+ let city = document.getElementById('cinemaCity').value;
+ const name = document.getElementById('cinemaName').value.trim();
+ const address = document.getElementById('cinemaAddress').value.trim();
+ const screenCount = parseInt(document.getElementById('cinemaScreens').value);
+ const morningPrice = parseFloat(document.getElementById('priceMorning').value);
+ const afternoonPrice = parseFloat(document.getElementById('priceAfternoon').value);
+ const eveningPrice = parseFloat(document.getElementById('priceEvening').value);
+
+ // Handle new city
+ if (city === 'new') {
+ city = document.getElementById('newCityName').value.trim();
+
+ if (!city) {
+ alert('Please enter a city name');
+ return;
+ }
+ }
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Adding new cinema...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ // Create screens
+ const screens = [];
+ for (let i = 1; i <= screenCount; i++) {
+ const capacity = parseInt(document.getElementById(`screenCapacity${i}`).value);
+ screens.push(new Screen(`${city.toLowerCase()}-${name.toLowerCase()}-s${i}`, i, capacity));
+ }
+
+ // Create new cinema
+ const cinemaId = `${city.toLowerCase()}-${name.toLowerCase()}`;
+
+ const newCinema = new Cinema(
+ cinemaId,
+ city,
+ name,
+ address,
+ screens,
+ {
+ morning: morningPrice,
+ afternoon: afternoonPrice,
+ evening: eveningPrice
+ }
+ );
+
+ // Add cinema to mock data
+ this.mockData.cinemas.push(newCinema);
+
+ // Update location selector
+ const locationSelector = document.getElementById('locationSelector');
+ locationSelector.innerHTML += `<option value="${cinemaId}">${city} ${name}</option>`;
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ // Reset form
+ document.getElementById('newCinemaForm').reset();
+
+ // Update cinemas table
+ this.renderCinemasTable();
+
+ // Show success message
+ alert(`Cinema "${city} ${name}" has been added successfully!`);
+ }, 1500);
+ },
+
+ viewCinema(cinemaId) {
+ const cinema = this.getCinemaById(cinemaId);
+
+ if (!cinema) {
+ return;
+ }
+
+ // Show cinema details in a modal or alert
+ alert(`
+ Cinema: ${cinema.fullName}
+ Address: ${cinema.address}
+ Screens: ${cinema.screens.length}
+ Prices:
+ Morning: £${cinema.prices.morning}
+ Afternoon: £${cinema.prices.afternoon}
+ Evening: £${cinema.prices.evening}
+ `);
+ },
+
+ editCinema(cinemaId) {
+ alert('This feature is not implemented in the demo.');
+ },
+
+ deleteCinema(cinemaId) {
+ // Check if cinema has any screenings
+ const hasScreenings = this.mockData.screenings.some(screening => screening.cinemaId === cinemaId);
+
+ if (hasScreenings) {
+ alert('Cannot delete cinema because it has scheduled screenings. Remove all screenings for this cinema first.');
+ return;
+ }
+
+ // Confirm deletion
+ if (!confirm('Are you sure you want to delete this cinema?')) {
+ return;
+ }
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Deleting cinema...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ // Delete cinema
+ this.mockData.cinemas = this.mockData.cinemas.filter(cinema => cinema.id !== cinemaId);
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+
+ // Update cinemas table
+ this.renderCinemasTable();
+ }, 1000);
+ },
+
+ renderAnalyticsView() {
+ // Update film dropdown for predictions
+ const predictionFilm = document.getElementById('predictionFilm');
+ predictionFilm.innerHTML = '<option value="">Select Film</option>';
+
+ this.mockData.films.forEach(film => {
+ predictionFilm.innerHTML += `<option value="${film.id}">${film.title}</option>`;
+ });
+
+ // Update cinema dropdown for predictions
+ const predictionCinema = document.getElementById('predictionCinema');
+ predictionCinema.innerHTML = '<option value="">Select Cinema</option>';
+
+ this.mockData.cinemas.forEach(cinema => {
+ predictionCinema.innerHTML += `<option value="${cinema.id}">${cinema.fullName}</option>`;
+ });
+ },
+
+ generateAnalytics() {
+ const viewBy = document.getElementById('analyticsViewBy').value;
+ const period = document.getElementById('analyticsPeriod').value;
+ const chartType = document.getElementById('analyticsChartType').value;
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Generating analytics...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ // Generate analytics based on parameters
+ let analyticsTitle, analyticsDescription, labels, data;
+
+ switch (viewBy) {
+ case 'location':
+ analyticsTitle = 'Booking Distribution by Location';
+ analyticsDescription = 'Analysis of booking patterns across different cinema locations';
+
+ labels = this.mockData.cinemas.map(cinema => cinema.fullName);
+ data = this.mockData.cinemas.map(() => Math.floor(Math.random() * 1000) + 100);
+ break;
+
+ case 'showtime':
+ analyticsTitle = 'Booking Distribution by Showtime';
+ analyticsDescription = 'Analysis of booking patterns across different show times';
+
+ labels = ['Morning (8am-12pm)', 'Afternoon (12pm-5pm)', 'Evening (5pm-12am)'];
+ data = [
+ Math.floor(Math.random() * 1000) + 100,
+ Math.floor(Math.random() * 1500) + 500,
+ Math.floor(Math.random() * 2000) + 1000
+ ];
+ break;
+
+ case 'day':
+ analyticsTitle = 'Booking Distribution by Day of Week';
+ analyticsDescription = 'Analysis of booking patterns across different days of the week';
+
+ labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+ data = labels.map(() => Math.floor(Math.random() * 1000) + 100);
+ break;
+
+ case 'film':
+ analyticsTitle = 'Booking Distribution by Film';
+ analyticsDescription = 'Analysis of booking patterns across different films';
+
+ labels = this.mockData.films.map(film => film.title);
+ data = this.mockData.films.map(() => Math.floor(Math.random() * 1000) + 100);
+ break;
+ }
+
+ // Update title and description
+ document.getElementById('analyticsTitle').textContent = analyticsTitle;
+ document.getElementById('analyticsDescription').textContent = analyticsDescription;
+
+ // Generate chart
+ const chartContainer = document.getElementById('analyticsChartContainer');
+ chartContainer.innerHTML = '<canvas id="analyticsChart"></canvas>';
+
+ const ctx = document.getElementById('analyticsChart').getContext('2d');
+
+ let chartConfig;
+
+ if (chartType === 'bar') {
+ chartConfig = {
+ type: 'bar',
+ data: {
+ labels: labels,
+ datasets: [{
+ label: 'Number of Bookings',
+ data: data,
+ backgroundColor: '#5D5CDE',
+ borderColor: '#4A49B0',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Number of Bookings'
+ }
+ },
+ x: {
+ title: {
+ display: true,
+ text: viewBy.charAt(0).toUpperCase() + viewBy.slice(1)
+ }
+ }
+ }
+ }
+ };
+ } else if (chartType === 'line') {
+ chartConfig = {
+ type: 'line',
+ data: {
+ labels: labels,
+ datasets: [{
+ label: 'Number of Bookings',
+ data: data,
+ backgroundColor: 'rgba(93, 92, 222, 0.2)',
+ borderColor: '#5D5CDE',
+ borderWidth: 2,
+ tension: 0.3,
+ fill: true
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Number of Bookings'
+ }
+ },
+ x: {
+ title: {
+ display: true,
+ text: viewBy.charAt(0).toUpperCase() + viewBy.slice(1)
+ }
+ }
+ }
+ }
+ };
+ } else if (chartType === 'pie') {
+ chartConfig = {
+ type: 'pie',
+ data: {
+ labels: labels,
+ datasets: [{
+ data: data,
+ backgroundColor: [
+ '#5D5CDE', '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40',
+ '#7A79E8', '#FF85A5', '#57B3FF', '#FFD677', '#6CD1D1', '#AA77FF', '#FFAF61'
+ ]
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ position: 'right'
+ }
+ }
+ }
+ };
+ }
+
+ new Chart(ctx, chartConfig);
+
+ // Generate insights
+ this.generateAIInsights(viewBy, period, labels, data);
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+ }, 2000);
+ },
+
+ generateAIInsights(viewBy, period, labels, data) {
+ // Generate insights based on the analytics
+ const insightsContent = document.getElementById('insightsContent');
+
+ let insights = '';
+
+ switch (viewBy) {
+ case 'location':
+ // Find highest and lowest performing locations
+ const maxLocationIndex = data.indexOf(Math.max(...data));
+ const minLocationIndex = data.indexOf(Math.min(...data));
+
+ insights = `
+ <p><strong>Key Insights:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>${labels[maxLocationIndex]} is your top performing location with ${data[maxLocationIndex]} bookings.</li>
+ <li>${labels[minLocationIndex]} has the lowest bookings at ${data[minLocationIndex]}. Consider special promotions to boost attendance.</li>
+ <li>The average booking per location is ${Math.round(data.reduce((a, b) => a + b, 0) / data.length)} tickets.</li>
+ <li>London locations show 18% higher bookings during weekends compared to weekdays.</li>
+ <li>Birmingham locations perform 23% better during school holidays.</li>
+ </ul>
+ <p class="mt-3"><strong>Recommendations:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>Implement location-specific promotions for ${labels[minLocationIndex]} to increase attendance.</li>
+ <li>Consider expanded showtimes at ${labels[maxLocationIndex]} to accommodate high demand.</li>
+ <li>Analyze staffing levels at high-performing locations to ensure optimal customer service.</li>
+ </ul>
+ `;
+ break;
+
+ case 'showtime':
+ insights = `
+ <p><strong>Key Insights:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>Evening shows are your most popular time slot with ${data[2]} bookings.</li>
+ <li>Morning shows have the lowest attendance at ${data[0]} bookings.</li>
+ <li>Weekend afternoon shows have 27% higher attendance than weekday afternoons.</li>
+ <li>Family films perform 35% better during afternoon slots.</li>
+ <li>Horror and thriller films perform 42% better during evening slots.</li>
+ </ul>
+ <p class="mt-3"><strong>Recommendations:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>Consider adjusting morning show pricing to incentivize higher attendance.</li>
+ <li>Schedule high-demand films during evening slots to maximize revenue.</li>
+ <li>Target family films for weekend afternoon slots to optimize attendance.</li>
+ </ul>
+ `;
+ break;
+
+ case 'day':
+ // Find highest and lowest performing days
+ const maxDayIndex = data.indexOf(Math.max(...data));
+ const minDayIndex = data.indexOf(Math.min(...data));
+
+ insights = `
+ <p><strong>Key Insights:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>${labels[maxDayIndex]} is your busiest day with ${data[maxDayIndex]} bookings.</li>
+ <li>${labels[minDayIndex]} has the lowest attendance at ${data[minDayIndex]} bookings.</li>
+ <li>Weekend days (Sat-Sun) account for 48% of total weekly bookings.</li>
+ <li>Tuesday discount promotions have increased attendance by 22% compared to previous periods.</li>
+ <li>Premium seating has 36% higher utilization on Friday and Saturday evenings.</li>
+ </ul>
+ <p class="mt-3"><strong>Recommendations:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>Introduce mid-week promotions to boost attendance on ${labels[minDayIndex]}.</li>
+ <li>Consider releasing major films on ${labels[maxDayIndex]} to maximize opening attendance.</li>
+ <li>Adjust staffing levels to match day-of-week attendance patterns.</li>
+ </ul>
+ `;
+ break;
+
+ case 'film':
+ // Find highest and lowest performing films
+ const maxFilmIndex = data.indexOf(Math.max(...data));
+ const minFilmIndex = data.indexOf(Math.min(...data));
+
+ insights = `
+ <p><strong>Key Insights:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>"${labels[maxFilmIndex]}" is your top performing film with ${data[maxFilmIndex]} bookings.</li>
+ <li>"${labels[minFilmIndex]}" has the lowest attendance at ${data[minFilmIndex]} bookings.</li>
+ <li>Action and adventure films generate 32% higher revenue per screening than other genres.</li>
+ <li>Family films show 45% higher concession sales per attendee.</li>
+ <li>Horror films have 29% higher attendance during late-night showings.</li>
+ </ul>
+ <p class="mt-3"><strong>Recommendations:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>Consider extending the run of "${labels[maxFilmIndex]}" to capitalize on strong performance.</li>
+ <li>Evaluate marketing strategy for "${labels[minFilmIndex]}" or consider reducing screenings.</li>
+ <li>Schedule high-performing genres during peak attendance times.</li>
+ </ul>
+ `;
+ break;
+ }
+
+ insightsContent.innerHTML = insights;
+ },
+
+ generatePrediction() {
+ const filmId = document.getElementById('predictionFilm').value;
+ const cinemaId = document.getElementById('predictionCinema').value;
+
+ if (!filmId || !cinemaId) {
+ alert('Please select both a film and a cinema for prediction.');
+ return;
+ }
+
+ // Show loading overlay
+ document.getElementById('loadingOverlay').classList.remove('hidden');
+ document.getElementById('loadingMessage').textContent = 'Generating prediction...';
+
+ // Simulate processing delay
+ setTimeout(() => {
+ const film = this.getFilmById(filmId);
+ const cinema = this.getCinemaById(cinemaId);
+
+ // Show prediction results
+ document.getElementById('predictionResults').classList.remove('hidden');
+
+ // Generate chart
+ const chartContainer = document.getElementById('predictionChartContainer');
+ chartContainer.innerHTML = '<canvas id="predictionChart"></canvas>';
+
+ const ctx = document.getElementById('predictionChart').getContext('2d');
+
+ // Generate days of the week
+ const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+ // Generate mock prediction data
+ const baseOccupancy = Math.floor(Math.random() * 30) + 20;
+
+ // Higher occupancy on weekends and for popular genres
+ const occupancyRates = days.map(day => {
+ let rate = baseOccupancy;
+
+ // Adjust for day of week
+ if (day === 'Friday') rate += 15;
+ if (day === 'Saturday') rate += 25;
+ if (day === 'Sunday') rate += 20;
+
+ // Adjust for film genre
+ if (film.genre === 'Action' || film.genre === 'Sci-Fi') rate += 10;
+ if (film.genre === 'Horror' && (day === 'Friday' || day === 'Saturday')) rate += 15;
+ if (film.genre === 'Family' && day === 'Saturday') rate += 15;
+
+ // Add some randomness
+ rate += Math.floor(Math.random() * 10);
+
+ // Cap at 100%
+ return Math.min(rate, 100);
+ });
+
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: days,
+ datasets: [{
+ label: 'Predicted Occupancy (%)',
+ data: occupancyRates,
+ backgroundColor: 'rgba(93, 92, 222, 0.2)',
+ borderColor: '#5D5CDE',
+ borderWidth: 2,
+ tension: 0.3,
+ fill: true
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true,
+ max: 100,
+ title: {
+ display: true,
+ text: 'Occupancy (%)'
+ }
+ },
+ x: {
+ title: {
+ display: true,
+ text: 'Day of Week'
+ }
+ }
+ }
+ }
+ });
+
+ // Generate prediction insights
+ const peakDay = days[occupancyRates.indexOf(Math.max(...occupancyRates))];
+ const lowDay = days[occupancyRates.indexOf(Math.min(...occupancyRates))];
+ const avgOccupancy = Math.round(occupancyRates.reduce((a, b) => a + b, 0) / occupancyRates.length);
+
+ const predictionContent = document.getElementById('predictionContent');
+ predictionContent.innerHTML = `
+ <p><strong>Prediction Summary for "${film.title}" at ${cinema.fullName}:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>Average predicted occupancy: ${avgOccupancy}%</li>
+ <li>Peak attendance day: ${peakDay} (${Math.max(...occupancyRates)}% occupancy)</li>
+ <li>Lowest attendance day: ${lowDay} (${Math.min(...occupancyRates)}% occupancy)</li>
+ <li>Weekend average: ${Math.round((occupancyRates[5] + occupancyRates[6]) / 2)}%</li>
+ <li>Weekday average: ${Math.round((occupancyRates[0] + occupancyRates[1] + occupancyRates[2] + occupancyRates[3] + occupancyRates[4]) / 5)}%</li>
+ </ul>
+ <p class="mt-3"><strong>Recommendations:</strong></p>
+ <ul class="list-disc pl-5 space-y-1">
+ <li>Schedule additional screenings on ${peakDay} to accommodate high demand.</li>
+ <li>Consider special promotions for ${lowDay} to boost attendance.</li>
+ <li>Allocate ${Math.min(Math.max(...occupancyRates) > 80 ? 'larger screens' : 'appropriate screen size', 'appropriate screen size')} based on expected attendance.</li>
+ <li>Prepare for ${avgOccupancy > 70 ? 'high' : 'moderate'} concession demand, especially on ${peakDay}.</li>
+ </ul>
+ `;
+
+ // Hide loading overlay
+ document.getElementById('loadingOverlay').classList.add('hidden');
+ }, 2500);
+ },
+
+ // Helper functions to access data
+ getCinemaById(id) {
+ return this.mockData.cinemas.find(cinema => cinema.id === id);
+ },
+
+ getScreenById(id) {
+ for (const cinema of this.mockData.cinemas) {
+ const screen = cinema.screens.find(screen => screen.id === id);
+ if (screen) return screen;
+ }
+ return null;
+ },
+
+ getFilmById(id) {
+ return this.mockData.films.find(film => film.id === id);
+ },
+
+ getScreeningById(id) {
+ return this.mockData.screenings.find(screening => screening.id === id);
+ },
+
+ getBookingById(id) {
+ return this.mockData.bookings.find(booking => booking.id === id);
+ }
+ };
+
+ // Initialize the application
+ window.addEventListener('DOMContentLoaded', () => {
+ app.init();
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file