@extends('admin.layouts.master')
@section('content')
<h2>Seat Layout Builder for {{ $package->title }}</h2>
<form method="POST" action="{{ url('admin/packages/'.$package->id.'/seats') }}">
    @csrf

    <label>Rows: <input type="number" id="rows" value="10" min="1" max="20"></label>
    <label>Cols: <input type="number" id="cols" value="4" min="1" max="6"></label>
    <button type="button" id="generate">Generate Layout</button>

    <div id="seat-map" style="margin-top:20px;display:inline-block;"></div>

    <input type="hidden" name="seats" id="seats-data">
    <br><br>
    <button type="submit">Save Layout</button>
</form>

<style>
.seat { width:40px; height:40px; margin:5px; display:inline-flex; align-items:center; justify-content:center; border-radius:5px; cursor:pointer; font-size:12px; }
.available { background:#4CAF50; color:white; }
.blocked { background:#9E9E9E; color:white; }
.empty { background:#E0E0E0; border:1px dashed #bbb; cursor:not-allowed; }
.row { display:flex; }
</style>

<script>
let seatMap = document.getElementById('seat-map');
let seatData = [];

document.getElementById('generate').addEventListener('click', () => {
    let rows = parseInt(document.getElementById('rows').value);
    let cols = parseInt(document.getElementById('cols').value);
    seatMap.innerHTML = '';
    seatData = [];

    for(let r=0; r<rows; r++) {
        let rowDiv = document.createElement('div');
        rowDiv.classList.add('row');

        for(let c=0; c<cols; c++) {
            let seatNumber = String.fromCharCode(65 + r) + (c+1);
            let seatDiv = document.createElement('div');
            seatDiv.className = 'seat available';
            seatDiv.innerText = seatNumber;

            seatDiv.addEventListener('click', function() {
                if (this.classList.contains('available')) {
                    this.classList.remove('available');
                    this.classList.add('blocked');
                } else if (this.classList.contains('blocked')) {
                    this.classList.remove('blocked');
                    this.classList.add('empty');
                    this.innerText = ''; // no number for empty spot
                } else if (this.classList.contains('empty')) {
                    this.classList.remove('empty');
                    this.classList.add('available');
                    this.innerText = seatNumber;
                }
                updateSeatData();
            });

            rowDiv.appendChild(seatDiv);
            seatData.push({ seat_number: seatNumber, status: 'available' });
        }
        seatMap.appendChild(rowDiv);
    }
    updateSeatData();
});

function updateSeatData() {
    let seats = [];
    let rowDivs = seatMap.querySelectorAll('.row');
    rowDivs.forEach((row, rIndex) => {
        let seatsInRow = row.querySelectorAll('.seat');
        seatsInRow.forEach((seat, cIndex) => {
            let seatNumber = seat.innerText || null;
            let status = seat.classList.contains('available') ? 'available' :
                         seat.classList.contains('blocked') ? 'blocked' : 'empty';
            if (status !== 'empty') {
                seats.push({ seat_number: seatNumber, status: status });
            }
        });
    });
    document.getElementById('seats-data').value = JSON.stringify(seats);
}
</script>
@endsection