@extends('Admin.layouts.app')
@section('title', 'Booking History')

@section('content')
<div class="d-sm-flex align-items-center justify-content-between">
    <h1>Booking History</h1>
</div>

<div class="booking-history px-3 py-3 mt-2">
    <div class="booking-title px-3 d-flex justify-content-between align-items-center">
        <p class="fs-20 fw-700">Bookings</p>

        {{-- 🔹 DATE FILTER --}}
        <form method="GET" action="{{ route('admin.booking.home') }}" id="filterForm" class="d-inline-block">
            <input type="hidden" name="tab" value="{{ request('tab', 'physical') }}">
            <div class="ui calendar">
                <div class="ui input left icon">
                    <i class="calendar icon"></i>
                    <input 
                        class="datepicker"
                        type="text"
                        name="date"
                        value="{{ request('date') }}"
                        placeholder="Select Date"
                        onchange="document.getElementById('filterForm').submit();">
                </div>
            </div>
        </form>
    </div>

    <ul class="nav nav-pills mb-3 btn-group" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link {{ request('tab', 'physical') == 'physical' ? 'active' : '' }}" 
                    data-bs-toggle="pill" data-bs-target="#physical">Physical</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link {{ request('tab') == 'online' ? 'active' : '' }}" 
                    data-bs-toggle="pill" data-bs-target="#online">Online</button>
        </li>
    </ul>

    <div class="tab-content">
        {{-- 🟦 PHYSICAL TAB --}}
        <div class="tab-pane fade {{ request('tab', 'physical') == 'physical' ? 'show active' : '' }}" id="physical">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID / Date</th>
                            <th>Service</th>
                            <th>Amount</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($physicalBookings as $booking)
                            <tr>
                                <td>#{{ $booking->id }} <br> {{ $booking->booking_date }}</td>
                                <td>{{ $booking->provider_service?->services?->name ?? 'N/A' }}</td>
                                <td>{{ $booking->service_amount }}</td>
                                <td>{{ $booking->status }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4">No Physical Bookings Found</td></tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="d-flex justify-content-center">
                    {{ $physicalBookings->appends(request()->except('physical_page'))->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>

        {{-- 🟩 ONLINE TAB --}}
        <div class="tab-pane fade {{ request('tab') == 'online' ? 'show active' : '' }}" id="online">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID / Date</th>
                            <th>Service</th>
                            <th>Amount</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($onlineBookings as $booking)
                            <tr>
                                <td>#{{ $booking->id }} <br> {{ $booking->booking_date }}</td>
                                <td>{{ $booking->provider_service?->services?->name ?? 'N/A' }}</td>
                                <td>{{ $booking->service_amount }}</td>
                                <td>{{ $booking->status }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4">No Online Bookings Found</td></tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="d-flex justify-content-center">
                    {{ $onlineBookings->appends(request()->except('online_page'))->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('body-scripts')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
flatpickr(".datepicker", {
    dateFormat: "Y-m-d",
    defaultDate: "{{ request('date') ?? '' }}",
});
</script>
@endpush