@extends('layouts.app')
@section('content')
<h2>Select Your Seats</h2>
<form method="POST" action="">
    @csrf
    <div id="seat-selection" style="display:flex;flex-wrap:wrap;max-width:300px;">
        @foreach($seats as $seat)
            <div class="seat {{ $seat->status }}" data-seat="{{ $seat->seat_number }}">
                {{ $seat->seat_number }}
            </div>
        @endforeach
    </div>
    <input type="hidden" name="seat_numbers[]" id="selected-seats">
    <button type="submit">Book Now</button>
</form>

<style>
.seat { width:40px;height:40px;margin:5px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer; }
.available { background: #4CAF50; color:white; }
.booked { background: #F44336; color:white; cursor:not-allowed; }
.blocked { background: #9E9E9E; color:white; cursor:not-allowed; }
.selected { background: #2196F3; color:white; }
</style>

<script>
document.querySelectorAll('.seat.available').forEach(seat => {
    seat.addEventListener('click', function() {
        this.classList.toggle('selected');
        updateSelectedSeats();
    });
});
function updateSelectedSeats(){
    let selected = document.querySelectorAll('.seat.selected');
    let seatNumbers = Array.from(selected).map(s => s.dataset.seat);
    document.getElementById('selected-seats').value = seatNumbers;
}
</script>
@endsection