@extends('admin.layout.master')
@section('title', __('admin.reservations'))
@section('content')

    <div class="row mb-6">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ __('admin.filter') }}</h5>
                </div>
                <div class="card-body">
                    <form method="get" action="{{ route('admin.reservation.index') }}">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="id" class="form-label">{{ __('admin.id') }}</label>
                                    <input type="text" class="form-control" id="id" value="{{ request('id') }}" name="id"
                                           placeholder="{{ __('admin.id') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="provider" class="form-label">{{ __('admin.user') }}</label>
                                    <select class="form-select" id="provider" name="user_id">
                                        <option value="">{{ __('admin.user') }}</option>
                                        @foreach ($users as $user)
                                            <option {{ request('user_id') == $user->id?"selected":'' }} value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="provider" class="form-label">{{ __('admin.status') }}</label>
                                    <select class="form-select" id="provider" name="status">
                                        <option value="">{{ __('admin.status') }}</option>
                                       <option {{ request('status') == "pending" ? 'selected' : '' }} value="pending">{{ __('admin.pending') }}</option>
                                        <option {{ request('status') == "accepted" ? 'selected' : '' }} value="accepted">{{ __('admin.accept') }}</option>
                                        <option {{ request('status') == "finished" ? 'selected' : '' }} value="finished">{{ __('admin.finished') }}</option>
                                        <option {{ request('status') == "rejected" ? 'selected' : '' }} value="rejected">{{ __('admin.rejected') }}</option>
                                        <option {{ request('status') == "cancelled" ? 'selected' : '' }} value="cancelled">{{ __('admin.cancelled') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-end">
                            <div class="col-md-4 text-end">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>


    <!-- Order List Table -->
    <div class="card">
        <div class="card-datatable table-responsive">
            <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                <table class="table datatables-reservation breservation-top dataTable no-footer dtr-column collapsed"
                    id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" style="width: 1215px;">
                    <thead>
                        <tr>
                            <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 50px;" aria-label="reservation: activate to sort column ascending">
                                {{ __('admin.reservation') }}</th>
                            <th class="sorting sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 124px;" aria-label="date: activate to sort column descending"
                                aria-sort="ascending">{{ __('admin.date') }}</th>
                            <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 256px;"
                                aria-label="customers: activate to sort column ascending">{{ __('admin.customer') }}</th>
                            <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 100px;"
                                aria-label="payment: activate to sort column ascending">{{ __('admin.payment') }}</th>
                            <th class="sorting dtr-hidden" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 113px; "
                                aria-label="status: activate to sort column ascending">{{ __('admin.status') }}</th>
                            <th class="sorting dtr-hidden" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 139px; "
                                aria-label="provider: activate to sort column ascending">{{ __('admin.provider') }}</th>
                            <th class="sorting_disabled dtr-hidden" rowspan="1" colspan="1" style="width: 63px;"
                                aria-label="Actions">{{ __('admin.actions') }}</th>

                        </tr>
                    </thead>
                    <tbody>
                        {{-- odd or even --}}
                        @foreach ($reservations as $reservation)
                            <tr class="{{ $loop->odd ? 'odd' : 'even' }}">

                                {{-- reservation id id 00001 --}}
                                <td><a
                                        href="{{ route('admin.reservation.show', $reservation->id) }}"><span>#{{ $reservation->id }}</span></a>
                                </td>
                                <td class="sorting_1"><span class="text-nowrap">
                                        {{ date('M d, Y h:i A', strtotime($reservation->day . ' ' . $reservation->time)) }}</span></td>
                                <td>
                                    <div class="d-flex justify-content-start align-items-center reservation-name text-nowrap">
                                        <div class="avatar-wrapper">
                                            <div class="avatar avatar-sm me-3"><img src="{{ $reservation->user->image }}"
                                                    alt="Avatar" class="rounded-circle"></div>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <h6 class="m-0"><a href="pages-profile-user.html"
                                                    class="text-heading">{{ $reservation->user->name }}</a></h6>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {{ $reservation->payment_type }}

                                </td>

                                <td class="dtr-hidden"><span
                                        class="px-2"
                                        text-capitalized="">{{ __($reservation->status) }}</span>
                                </td>

                                <td>
                                    <div class="d-flex justify-content-start align-items-center reservation-name text-nowrap">
                                        <div class="avatar-wrapper">
                                            <div class="avatar avatar-sm me-3"><img src="{{ $reservation->provider->image }}"
                                                    alt="Avatar" class="rounded-circle"></div>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <h6 class="m-0"><a href="pages-profile-user.html"
                                                    class="text-heading">{{ $reservation->provider->name }}</a></h6>
                                        </div>
                                    </div>
                                </td>
                                <td class="dtr-hidden">
                                    <div class="d-flex justify-content-sm-start align-items-sm-center"><button
                                            class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill dropdown-toggle hide-arrow"
                                            data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                                        <div class="m-0 dropdown-menu dropdown-menu-end"><a
                                                href="{{ route('admin.reservation.show', $reservation->id) }}"
                                                class="dropdown-item"><i class="ti ti-eye me-2"></i>{{ __('admin.view') }}</a></div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>
               <div class="card-footer d-flex justify-content-end align-items-center">
                <div class="d-flex justify-content-start align-items-center">
                    {{ $reservations->links() }}
                </div>
               </div>
            </div>
        </div>
    </div>


@endsection