@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="row bh-row">
    <div class="col-12">
        <div class="booking-history px-3 py-3 mt-2">
            <div class="booking-title px-3">
                <div>
                    <p class="fs-20 fw-700 red-hat ps-0">Bookings</p>
                </div>
                <div class="booking-form lexend">
                    <ul class="nav nav-pills mb-3 btn-group" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link btn-physical {{ request('tab', 'physical') == 'physical' ? 'active' : '' }}" 
                                    id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" 
                                    aria-controls="pills-home" aria-selected="{{ request('tab', 'physical') == 'physical' ? 'true' : 'false' }}">
                                Physical
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link btn-physical {{ request('tab') == 'online' ? 'active' : '' }}" 
                                    id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" 
                                    aria-controls="pills-profile" aria-selected="{{ request('tab') == 'online' ? 'true' : 'false' }}">
                                Online
                            </button>
                        </li>
                    </ul>

  <form method="GET" action="{{ route('admin.booking.index') }}" 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 class="booking-icon">
                        <div class="dropdown d-inline-block">
                            <a href="#" class="dropdown-toggle" id="statusFilterDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <img src="{{ asset('admin/img/toggler.png') }}" alt="Filter">
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="statusFilterDropdown">
                                <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['status' => null, 'tab' => request('tab', 'physical')]) }}">All</a></li>
                                <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['status' => 'Pending', 'tab' => request('tab', 'physical')]) }}">Pending</a></li>
                                <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['status' => 'Accepted', 'tab' => request('tab', 'physical')]) }}">Accepted</a></li>
                                <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['status' => 'Completed', 'tab' => request('tab', 'physical')]) }}">Completed</a></li>
                            </ul>
                        </div>     
                        <img src="{{ asset('admin/img/Calendar.png') }}" alt="Calendar">
                    </div>
                </div>
            </div>

            <div class="tab-content" id="pills-tabContent">

{{-- PHYSICAL BOOKINGS --}}
<div class="tab-pane fade {{ request('tab', 'physical') == 'physical' ? 'show active' : '' }}" 
     id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="ps-5 ps-0 red-hat">Booking ID / Date & Time</th>
                    <th>Service</th>
                    <th>Amount</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($physicalBookings as $booking)
                    <tr onclick="window.location='{{ route('admin.booking.detail', ['booking_id' => $booking->id]) }}'" style="cursor:pointer;">
                        <td>#{{ $booking->id }} <br> {{ $booking->booking_date }} {{ $booking->start_time }}</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>

        {{-- Physical Pagination --}}
        <div class="d-flex justify-content-center tab-pagination">
            {{ $physicalBookings->appends(request()->except('physical_page'))
                                ->appends(['tab' => 'physical'])
                                ->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>


{{-- ONLINE BOOKINGS --}}
<div class="tab-pane fade {{ request('tab') == 'online' ? 'show active' : '' }}" 
     id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="ps-5 ps-0 red-hat">Booking ID / Date & Time</th>
                    <th>Service</th>
                    <th>Amount</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($onlineBookings as $booking)
                    <tr onclick="window.location='{{ route('admin.booking.detail', ['booking_id' => $booking->id]) }}'" style="cursor:pointer;">
                        <td>#{{ $booking->id }} <br> {{ $booking->booking_date }} {{ $booking->start_time }}</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>

        {{-- Online Pagination --}}
        <div class="d-flex justify-content-center tab-pagination">
            {{ $onlineBookings->appends(request()->except('online_page'))
                              ->appends(['tab' => 'online'])
                              ->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>


            </div>
        </div>
    </div>
</div>

@endsection

@push('body-scripts')
<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- ye cdns lagao agar pehle se nahi lage -->
<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