@php
    use App\Models\Reservation;

    $statusBadges = [
        Reservation::STATUS_CONFIRMED => [
            'label' => __('dashboard.reservations.statuses.confirmed'),
            'class' => 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500',
        ],
        Reservation::STATUS_PENDING => [
            'label' => __('dashboard.reservations.statuses.pending'),
            'class' => 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-orange-400',
        ],
        Reservation::STATUS_CANCELLED => [
            'label' => __('dashboard.reservations.statuses.cancelled'),
            'class' => 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500',
        ],
        Reservation::STATUS_COMPLETED => [
            'label' => __('dashboard.reservations.statuses.completed'),
            'class' => 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500',
        ],
    ];
@endphp

<x-ui.crud.list :resource="$this">
    <x-slot name="filters">
        @unless ($selectedBranch)

            @can('viewAny', \App\Models\Branch::class)
                <x-ui.input.select :label="__('dashboard.select_branch')" wire:model.live="filters.branch_id">
                    <option value="">{{ __('dashboard.select_branch') }}</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                    @endforeach
                </x-ui.input.select>
            @endcan
        @endunless


        <x-ui.input.select :label="__('dashboard.status')" wire:model.live="filters.status">
            <option value="">{{ __('dashboard.select_status') }}</option>
            @foreach (Reservation::STATUSES as $status)
                <option value="{{ $status }}">{{ __('dashboard.reservations.statuses.' . $status) }}</option>
            @endforeach
        </x-ui.input.select>

        <x-ui.input.date :label="__('dashboard.from_date')" wire:model.live="filters.date_from" />
        <x-ui.input.date :label="__('dashboard.to_date')" wire:model.live="filters.date_to" />
    </x-slot>

    <x-ui.table>
        <x-slot name="head">
            <x-ui.table.header class="w-10">
                <x-ui.input.checkbox wire:click="selectAll" wire:model.live="selectedAll" />
            </x-ui.table.header>

            <x-ui.table.header class="w-10" for-crud sortable
                wire:click="sortBy('id')">{{ __('dashboard.id') }}</x-ui.table.header>
            <x-ui.table.header for-crud>{{ __('dashboard.branch') }}</x-ui.table.header>
            <x-ui.table.header for-crud sortable
                wire:click="sortBy('name')">{{ __('dashboard.name') }}</x-ui.table.header>
            <x-ui.table.header for-crud>{{ __('dashboard.phone') }}</x-ui.table.header>
            <x-ui.table.header for-crud sortable
                wire:click="sortBy('reservation_date')">{{ __('dashboard.reservations.date') }}</x-ui.table.header>
            <x-ui.table.header for-crud sortable
                wire:click="sortBy('guests')">{{ __('dashboard.guests') }}</x-ui.table.header>
            <x-ui.table.header for-crud sortable
                wire:click="sortBy('status')">{{ __('dashboard.status') }}</x-ui.table.header>
            <x-ui.table.header for-crud>{{ __('dashboard.actions') }}</x-ui.table.header>
        </x-slot>

        <x-slot name="body">
            @forelse ($rows as $row)
                @php
                    $badge = $statusBadges[$row->status] ?? [
                        'label' => $row->status ?: 'N/A',
                        'class' => 'bg-gray-50 text-gray-600 dark:bg-gray-500/15 dark:text-gray-400 font-capitalize',
                    ];
                @endphp

                <x-ui.table.row wire:loading.class.delay="opacity-75" wire:key="reservation-{{ $row->id }}">
                    <x-ui.table.column>
                        <x-ui.input.checkbox wire:model.live="selectedRecords" value="{{ $row->id }}" />
                    </x-ui.table.column>

                    <x-ui.table.column for-crud>{{ $row->id }}</x-ui.table.column>
                    <x-ui.table.column for-crud>
                        <div class="flex flex-col">
                            <span>{{ $row->branch?->name ?? 'N/A' }}</span>
                            <span class="text-xs text-gray-400">{{ $row->table?->area?->name ?? '' }}</span>
                            <span class="text-xs text-gray-400">{{ $row->table?->name ?? '' }}</span>
                        </div>
                    </x-ui.table.column>
                    <x-ui.table.column for-crud class="font-medium">{{ $row->name }}</x-ui.table.column>
                    <x-ui.table.column for-crud>{{ $row->phone }}</x-ui.table.column>
                    <x-ui.table.column for-crud>
                        <div class="flex flex-col">
                            <span>{{ $row->reservation_date?->format('Y-m-d') ?? 'N/A' }}</span>
                            <span
                                class="text-xs text-gray-400">{{ $row->reservation_time?->format('H:i') ?? '--:--' }}</span>
                        </div>
                    </x-ui.table.column>
                    <x-ui.table.column for-crud>{{ $row->guests }}</x-ui.table.column>
                    <x-ui.table.column for-crud>
                        <span
                            class="inline-flex items-center justify-center gap-1 rounded-full px-2.5 py-0.5 text-sm font-medium {{ $badge['class'] }}">
                            {{ $badge['label'] }}
                        </span>
                    </x-ui.table.column>

                    <x-ui.table.column for-crud>
                        <div class="flex items-center gap-2">
                            <x-ui.button.secondary wire:navigate :href="route('reservations.edit', $row)" size="size-3">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="size-3">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                </svg>
                            </x-ui.button.secondary>

                            @if ($row->status === Reservation::STATUS_PENDING)
                                <button
                                    wire:click="updateStatus({{ $row->id }}, '{{ Reservation::STATUS_CONFIRMED }}')"
                                    class="text-xs bg-success-50 text-success-600 px-2 py-1 rounded hover:bg-success-100">
                                    {{ __('dashboard.confirm') }}
                                </button>
                            @endif

                            @if ($row->status === Reservation::STATUS_CONFIRMED)
                                <button
                                    wire:click="updateStatus({{ $row->id }}, '{{ Reservation::STATUS_COMPLETED }}')"
                                    class="text-xs bg-success-50 text-success-600 px-2 py-1 rounded hover:bg-success-100">
                                    {{ __('dashboard.complete') }}
                                </button>
                            @endif

                            @if ($row->status !== Reservation::STATUS_CANCELLED && $row->status !== Reservation::STATUS_COMPLETED)
                                <button
                                    wire:click="updateStatus({{ $row->id }}, '{{ Reservation::STATUS_CANCELLED }}')"
                                    class="text-xs bg-error-50 text-error-600 px-2 py-1 rounded hover:bg-error-100">
                                    {{ __('dashboard.cancel') }}
                                </button>
                            @endif
                        </div>
                    </x-ui.table.column>
                </x-ui.table.row>
            @empty
                <x-ui.table.row>
                    <x-ui.table.column colspan="8" class="text-center">
                        {{ __('dashboard.no_records_found') }}
                    </x-ui.table.column>
                </x-ui.table.row>
            @endforelse
        </x-slot>
    </x-ui.table>
</x-ui.crud.list>