@extends('layouts.app')
@section('content')
<div class="max-w-6xl mx-auto p-6">
    <h1 class="text-xl font-semibold mb-4">Bookings</h1>
    <form method="GET" class="mb-4 flex items-end gap-3">
        <div>
            <label class="block text-sm font-medium mb-1">Status</label>
            <select name="status" class="border rounded p-2">
                <option value="">All</option>
                <option value="pre_booking" @selected(request('status')==='pre_booking')>Pre-Booking</option>
                <option value="booked" @selected(request('status')==='booked')>Booked</option>
                <option value="transferred" @selected(request('status')==='transferred')>Transferred</option>
                <option value="cancelled" @selected(request('status')==='cancelled')>Cancelled</option>
            </select>
        </div>
        <div class="flex-1">
            <label class="block text-sm font-medium mb-1">Search</label>
            <input type="text" name="q" value="{{ $q }}" class="w-full border rounded p-2" placeholder="Booking #, Customer, Unit #">
        </div>
        <div>
            <button class="px-4 py-2 bg-gray-800 text-white rounded">Filter</button>
        </div>
    </form>
    <div class="bg-white rounded shadow overflow-hidden">
        <table class="min-w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">#</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Customer</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Unit</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Total</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Token</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Status</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($bookings as $b)
                <tr>
                    <td class="px-4 py-2">{{ $b->booking_number }}</td>
                    <td class="px-4 py-2">{{ $b->customer?->name }}</td>
                    <td class="px-4 py-2">{{ $b->unit?->unit_number }}</td>
                    <td class="px-4 py-2">{{ number_format($b->total_price, 2) }}</td>
                    <td class="px-4 py-2">{{ number_format($b->token_amount, 2) }}</td>
                    <td class="px-4 py-2 capitalize">{{ str_replace('_',' ', $b->status) }}</td>
                    <td class="px-4 py-2 space-x-2">
                        <a href="{{ route('bookings.show', $b) }}" class="text-blue-600">View</a>
                        <a href="{{ route('installments.index', $b) }}" class="text-indigo-600">Installments</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-4">
        {{ $bookings->links() }}
    </div>
    <div class="mt-6">
        <a class="px-4 py-2 bg-green-600 text-white rounded" href="{{ route('bookings.pre.create') }}">New Pre-Booking</a>
    </div>
@endsection