@extends('admin.layouts.master')
@section('title','Create Booking')

@section('content')
<div class="container">
    <h2>Create Booking (Admin)</h2>

    <form action="{{ route('admin.bookings.store') }}" method="POST" id="booking-form">
        @csrf

        <!-- Bus Type Dropdown -->
        <div class="mb-3">
            <label for="bus_type_id">Bus Type</label>
            <select name="bus_type_id" id="bus_type_id" class="form-control" required>
                <option value="">-- Select Bus Type --</option>
                @foreach($busTypes as $bus)
                    <option value="{{ $bus->id }}">{{ $bus->name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Booking Date -->
        <div class="mb-3">
            <label for="booking_date">Booking Date</label>
            <input type="date" name="booking_date" id="booking_date" class="form-control" required>
        </div>

        <!-- Bus Layout -->
        <div id="bus-layout" class="bus-layout mb-3"></div>

        <!-- Hidden seats input -->
        <input type="hidden" name="selected_seats" id="selected_seats">

        <!-- Passenger Details -->
        <div id="passenger-details"></div>

        <button type="submit" class="btn btn-success">Save Booking</button>
    </form>
</div>

<style>
.bus-layout {
    display: grid;
    gap: 8px;
    justify-content: start;
    margin-top: 15px;
}
.seat {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #999;
    border-radius: 6px;
    cursor: pointer;
}
.seat.available { background: #f8f9fa; }
.seat.booked { background: #dc3545; color: #fff; cursor: not-allowed; }
.seat.blocked { background: #6c757d; color: #fff; cursor: not-allowed; }
.seat.selected { background: #28a745; color: #fff; }
</style>

<script>
let selectedSeats = [];

function loadBusLayout() {
    let busTypeId = document.getElementById('bus_type_id').value;
    let bookingDate = document.getElementById('booking_date').value;

    if (!busTypeId || !bookingDate) return;

    fetch(`/admin/bookings/get-seats-structure?bus_type_id=${busTypeId}&booking_date=${bookingDate}`)
        .then(res => res.json())
        .then(data => {
            let busLayout = document.getElementById('bus-layout');
            busLayout.innerHTML = '';
            busLayout.style.gridTemplateColumns = `repeat(${data.cols}, 60px)`;

            data.seats.forEach(seat => {
                let div = document.createElement('div');
                div.classList.add('seat');
                div.innerText = seat.seat_number;

                if (seat.is_blocked) {
                    div.classList.add('blocked');
                } else if (seat.is_booked) {
                    div.classList.add('booked');
                } else {
                    div.classList.add('available');
                    div.dataset.seatId = seat.id;
                    div.dataset.seatNumber = seat.seat_number;

                    div.addEventListener('click', function() {
                        toggleSeat(div, seat);
                    });
                }

                busLayout.appendChild(div);
            });
        });
}

function toggleSeat(div, seat) {
    if (div.classList.contains('selected')) {
        div.classList.remove('selected');
        selectedSeats = selectedSeats.filter(s => s.id !== seat.id);
    } else {
        div.classList.add('selected');
        selectedSeats.push(seat);
    }

    // Update hidden input
    document.getElementById('selected_seats').value = JSON.stringify(selectedSeats);

    // Update passenger details form
    renderPassengerForm();
}

function renderPassengerForm() {
    let container = document.getElementById('passenger-details');
    container.innerHTML = '';
    selectedSeats.forEach((seat, i) => {
        container.innerHTML += `
            <div class="border p-3 mb-2">
                <h5>Passenger ${i+1} (Seat: ${seat.seat_number})</h5>
                <input type="hidden" name="passengers[${i}][seat_id]" value="${seat.id}">
                <input type="text" name="passengers[${i}][name]" class="form-control mb-2" placeholder="Name" required>
                <input type="number" name="passengers[${i}][age]" class="form-control mb-2" placeholder="Age" required>
                <input type="text" name="passengers[${i}][phone]" class="form-control mb-2" placeholder="Phone" required>
                <input type="email" name="passengers[${i}][email]" class="form-control mb-2" placeholder="Email (optional)">
            </div>
        `;
    });
}

document.getElementById('bus_type_id').addEventListener('change', loadBusLayout);
document.getElementById('booking_date').addEventListener('change', loadBusLayout);
</script>
@endsection