Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>School Auditorium Seat Booking</title>
    <style>
        :root {
            --available: #2ecc71; --sold: #e74c3c; --selected: #3498db;
            --reserved: #f1c40f; --outoforder: #95a5a6; --handicap: #005aa7;
        }
        body { font-family: 'Segoe UI', sans-serif; margin: 0; display: flex; background: #f0f2f5; color: #333; }
        
        /* Layout */
        .ad-sidebar { width: 15%; background: #dfe4ea; padding: 20px; min-height: 100vh; position: sticky; top: 0; text-align: center; }
        .main-container { width: 70%; padding: 30px; }
        
        /* Headers & UI */
        .header-box { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 30px; text-align: center; }
        .stage { width: 70%; height: 50px; background: #2f3542; color: white; margin: 0 auto 50px; text-align: center; line-height: 50px; border-radius: 0 0 60px 60px; font-weight: bold; font-size: 1.2rem; }
        
        /* Seating Logic */
        .seating-area { display: flex; flex-direction: column; align-items: center; gap: 40px; }
        .section-row { display: flex; justify-content: center; gap: 60px; width: 100%; }
        .row { display: flex; align-items: center; justify-content: center; margin-bottom: 5px; }
        .row-label { width: 35px; font-weight: bold; font-size: 12px; color: #57606f; }
        
        .seat {
            width: 22px; height: 22px; margin: 2px; border-radius: 4px;
            background: var(--available); color: white; font-size: 8px;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            transition: 0.2s; border: 1px solid rgba(0,0,0,0.1);
        }
        .seat:hover { transform: scale(1.2); z-index: 5; }
        .seat.handicap { width: 48px; background: var(--handicap); }
        .seat.handicap::after { content: '♿'; font-size: 14px; }
        
        /* States */
        .selected { background: var(--selected) !important; }
        .sold { background: var(--sold) !important; cursor: not-allowed; }
        .reserved { background: var(--reserved) !important; cursor: not-allowed; }
        .outoforder { background: var(--outoforder) !important; cursor: not-allowed; }

        /* Modals */
        .modal-overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:100; justify-content:center; align-items:center; }
        .modal { background: white; padding: 40px; border-radius: 15px; width: 450px; text-align: center; }
        input { width: 90%; padding: 12px; margin: 10px 0; border: 1px solid #ccc; border-radius: 6px; }
        .btn { padding: 12px 25px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; margin: 5px; }
        .btn-primary { background: var(--selected); color: white; }
        .btn-secondary { background: #ced4da; }
        
        .ad-box { background: #ffffff; border: 2px dashed #a4b0be; height: 200px; margin-top: 20px; display: flex; align-items: center; justify-content: center; color: #a4b0be; border-radius: 8px; }
    </style>
</head>
<body>

<div class="ad-sidebar">
    <h3>School Info</h3>
    <p>Spring Field High Theater</p>
    <p>Join the Drama Club!</p>
    <div class="ad-box">AD POPUP 1</div>
    <div class="ad-box">AD POPUP 2</div>
</div>

<div class="main-container">
    <div class="header-box">
        <h1>Auditorium Event Booking</h1>
        <select id="show-select" onchange="resetMap()" style="padding: 10px; border-radius: 5px;">
            <option>Friday Night Musical - 7:00 PM</option>
            <option>Saturday Matinee - 2:00 PM</option>
            <option>Saturday Night Final - 8:00 PM</option>
        </select>
    </div>

    <div class="stage">STAGE</div>

    <div class="seating-area">
        <div class="section-row">
            <div id="front-left"></div>
            <div id="front-right"></div>
        </div>

        <div class="section-row">
            <div id="middle-left"></div>
            <div id="middle-right"></div>
        </div>

        <div class="section-row">
            <div id="telescope-left"></div>
            <div id="telescope-right"></div>
        </div>
    </div>

    <div style="text-align: center; margin-top: 50px;">
        <button class="btn btn-primary" style="font-size: 1.2rem; padding: 15px 40px;" onclick="openAuth()">Purchase Selected Seats</button>
    </div>
</div>

<div class="ad-sidebar">
    <h3>Upcoming</h3>
    <p>Music Fest 2026</p>
    <div class="ad-box">AD POPUP 3</div>
</div>

<div id="auth-modal" class="modal-overlay">
    <div class="modal">
        <h2>Account Login</h2>
        <p>Enter your email to proceed to checkout.</p>
        <input type="email" id="user-email" placeholder="[email protected]">
        <br>
        <button class="btn btn-secondary" onclick="closeModals()">Cancel</button>
        <button class="btn btn-primary" onclick="openPayment()">Continue to Payment</button>
    </div>
</div>

<div id="payment-modal" class="modal-overlay">
    <div class="modal">
        <h2>Payment Details</h2>
        <div style="text-align: left; background: #f8f9fa; padding: 10px; border-radius: 5px; margin-bottom: 10px;">
            <p id="order-summary"></p>
        </div>
        <input type="text" placeholder="Card Number 0000 0000 0000 0000">
        <div style="display:flex; gap:10px;">
            <input type="text" placeholder="MM/YY">
            <input type="text" placeholder="CVC">
        </div>
        <br>
        <button class="btn btn-secondary" onclick="openAuth()">Go Back</button>
        <button class="btn btn-primary" onclick="showReceipt()" style="background:var(--available)">Pay Now</button>
    </div>
</div>

<div id="receipt-modal" class="modal-overlay">
    <div class="modal" id="printable-receipt">
        <h2 style="color:var(--available)">Payment Successful!</h2>
        <hr>
        <div id="receipt-content" style="text-align: left; line-height: 1.6;"></div>
        <br>
        <button class="btn btn-primary" onclick="window.print()">Print Receipt</button>
        <button class="btn btn-secondary" onclick="location.reload()">Done</button>
    </div>
</div>

<script>
    let selectedSeats = new Set();

    function createRow(rowLabel, start, count, step, containerId, handicap = []) {
        const container = document.getElementById(containerId);
        const rowDiv = document.createElement('div');
        rowDiv.className = 'row';
        const label = document.createElement('div');
        label.className = 'row-label'; label.innerText = rowLabel;
        rowDiv.appendChild(label);

        for (let i = 0; i < count; i++) {
            let seatNum = start + (i * step);
            let seatId = containerId + "-" + rowLabel + seatNum;
            const seat = document.createElement('div');
            
            if (handicap.includes(seatNum)) {
                seat.className = 'seat handicap';
            } else {
                seat.className = 'seat';
                seat.innerText = seatNum;
            }
            
            seat.id = seatId;
            seat.onclick = () => toggleSeat(seatId);
            rowDiv.appendChild(seat);
        }
        container.appendChild(rowDiv);
    }

    function initMap() {
        // Front Left (Evens) - A2 is HC
        const fLRows = ['A','B','C','D','E','F','G','H','J','K'];
        const fLCounts = [8,12,13,13,14,14,14,15,15,16];
        fLRows.forEach((r, i) => createRow(r, 2, fLCounts[i], 2, 'front-left', r==='A'?[2]:[]));

        // Front Right (Odds) - A1 is HC
        const fRCounts = [8,12,13,13,13,14,14,15,15,16];
        fLRows.forEach((r, i) => createRow(r, 1, fRCounts[i], 2, 'front-right', r==='A'?[1]:[]));

        // Middle Left (Evens) - L2, L34 HC
        const mRows = ['L','M','N','P','Q','R','S','T','U','V','W','X','Y'];
        const mLCounts = [15,19,19,19,19,19,19,19,19,19,19,16,12];
        mRows.forEach((r, i) => createRow(r, 2, mLCounts[i], 2, 'middle-left', r==='L'?[2,34]:[]));

        // Middle Right (Odds) - B31, B0 (as described)
        const mRCounts = [15,19,19,19,19,19,19,19,19,19,19,16,15];
        mRows.forEach((r, i) => createRow(r, 1, mRCounts[i], 2, 'middle-right', r==='L'?[31]:[]));

        // Telescope Left
        createRow('AA', 1, 13, 1, 'telescope-left');
        createRow('BB', 13, 13, 1, 'telescope-left');
        createRow('CC', 27, 18, 1, 'telescope-left');

        // Telescope Right
        createRow('AA', 1, 13, 1, 'telescope-right');
        createRow('BB', 13, 13, 1, 'telescope-right');
        createRow('CC', 27, 18, 1, 'telescope-right');
    }

    function toggleSeat(id) {
        const el = document.getElementById(id);
        if (selectedSeats.has(id)) {
            selectedSeats.delete(id);
            el.classList.remove('selected');
        } else {
            selectedSeats.add(id);
            el.classList.add('selected');
        }
    }

    function openAuth() {
        if (selectedSeats.size === 0) return alert("Select a seat first!");
        document.getElementById('auth-modal').style.display = 'flex';
    }

    function openPayment() {
        const email = document.getElementById('user-email').value;
        if (!email) return alert("Please enter an email");
        document.getElementById('auth-modal').style.display = 'none';
        document.getElementById('payment-modal').style.display = 'flex';
        document.getElementById('order-summary').innerText = `Booking ${selectedSeats.size} seats for ${email}`;
    }

    function showReceipt() {
        const email = document.getElementById('user-email').value;
        const show = document.getElementById('show-select').value;
        document.getElementById('payment-modal').style.display = 'none';
        document.getElementById('receipt-modal').style.display = 'flex';
        
        document.getElementById('receipt-content').innerHTML = `
            <strong>Show:</strong> ${show}<br>
            <strong>Email:</strong> ${email}<br>
            <strong>Seats:</strong> ${Array.from(selectedSeats).map(s => s.split('-')[1]).join(', ')}<br>
            <strong>Order ID:</strong> #SH-${Math.floor(Math.random()*90000) + 10000}<br>
            <strong>Total:</strong> $${selectedSeats.size * 12}.00
        `;
    }

    function closeModals() {
        document.querySelectorAll('.modal-overlay').forEach(m => m.style.display = 'none');
    }

    function resetMap() {
        selectedSeats.clear();
        document.querySelectorAll('.seat').forEach(s => s.classList.remove('selected'));
    }