@php use App\Enums\TableStatus; @endphp
<x-ui.crud.list :resource="$this">
    <x-slot name="header">
        <div x-data="{ layout: @entangle('layout') }"
            class="inline-flex w-fit items-center gap-0.5 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900">
            <button
                :class="layout === 'grid' ? 'shadow-theme-xs text-gray-900 dark:text-white bg-white dark:bg-gray-800' :
                    'text-gray-500 dark:text-gray-400'"
                wire:click="$set('layout','grid')"
                class="px-3 py-2 font-medium rounded-md text-theme-sm hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400">
                {{ __('dashboard.grid') }}
            </button>
            <button
                :class="layout === 'list' ? 'shadow-theme-xs text-gray-900 dark:text-white bg-white dark:bg-gray-800' :
                    'text-gray-500 dark:text-gray-400'"
                wire:click="$set('layout','list')"
                class="px-3 py-2 font-medium rounded-md text-theme-sm hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400">
                {{ __('dashboard.list') }}
            </button>
        </div>
    </x-slot>
    <x-slot name="filters">
        @unless ($selectedBranch)
            @can('viewAny', \App\Models\Branch::class)
                <x-ui.input.select :label="__('dashboard.select_branch')" wire:model.live="filters.area-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
        @can('viewAny', \App\Models\Area::class)
            <x-ui.input.select :label="__('dashboard.select_area')" wire:model.live="filters.area_id">
                <option value="">{{ __('dashboard.select_area') }}</option>
                @foreach ($areas as $area)
                    <option value="{{ $area->id }}">{{ $area->name }}</option>
                @endforeach
            </x-ui.input.select>
        @endcan

        <x-ui.input.select wire:model.live="filters.status" :label="__('dashboard.status')">
            <option value="">{{ __('dashboard.select_status') }}</option>
            @foreach (TableStatus::options() as $status)
                <option value="{{ $status['value'] }}">{{ $status['label'] }}</option>
            @endforeach
        </x-ui.input.select>
    </x-slot>
    @if ($this->layout == 'grid')
        <div class="">
            @forelse ($grouped as $areaId => $rows)
                <h2
                    class="p-4 text-sm font-semibold text-gray-800 dark:text-white/90 border-gray-100 border-y bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
                    {{ $areaNames[$areaId] }}
                </h2>
                <div class="p-4 pt-0 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 ">

                    @foreach ($rows as $row)
                        @php
                            $tableStatus = $row->status;
                            $borderColor = match ($tableStatus) {
                                TableStatus::Available => 'border-l-lime-500 dark:border-l-lime-500',
                                TableStatus::Reserved => 'border-l-sky-500 dark:border-l-sky-500',
                                TableStatus::Occupied => 'border-l-amber-500 dark:border-l-amber-500',
                                TableStatus::Closed => 'border-l-slate-500 dark:border-l-slate-500',
                                default => 'border-l-gray-500 dark:border-l-gray-500',
                            };
                            $badgeClasses = match ($tableStatus) {
                                TableStatus::Available
                                    => 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500',
                                TableStatus::Reserved => 'bg-sky-50 text-sky-600 dark:bg-sky-500/15 dark:text-sky-400',
                                TableStatus::Occupied
                                    => 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-orange-400',
                                TableStatus::Closed
                                    => 'bg-slate-100 text-slate-700 dark:bg-slate-600/20 dark:text-slate-200',
                                default => 'bg-gray-100 text-gray-700 dark:bg-gray-700/30 dark:text-gray-200',
                            };
                        @endphp
                        <div
                            class="bg-white dark:bg-white/[0.03] mt-4 border border-zinc-200 dark:border-gray-800 rounded-sm overflow-hidden p-4 flex relative border-l-4 {{ $borderColor }}">
                            <div class="me-3">
                                {!! $row->qr_code !!}
                            </div>
                            <div class="flex flex-col">
                                <h3 class="text-gray-800 dark:text-white/90 text-sm">{{ $row->name }}</h3>
                                <h3 class="text-gray-800 dark:text-white/90 text-xs">{{ $row->capacity }}
                                    {{ __('dashboard.seats') }}</h3>
                            </div>
                            <div class="absolute top-4 end-4">
                                <span
                                    class="inline-flex items-center justify-center gap-1 rounded-full px-2.5 py-0.5 text-sm font-medium {{ $badgeClasses }}">
                                    {{ $row->status?->label() }}
                                </span>
                            </div>
                            <div class="absolute bottom-4 end-4 flex gap-2">

                                <x-ui.button.index wire:click='downloadQr({{ $row->id }})' 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="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                                    </svg>

                                </x-ui.button.index>
                                @if ($this->enableTrashFilter && !$row->trashed())
                                    @can('update', $row)
                                        <x-ui.button.secondary wire:navigate
                                            href="{{ route($this->prefix . '.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>
                                    @endcan
                                @endif
                                @if ($this->enableTrashFilter && $row->trashed())
                                    @can('restore', $row)
                                        <x-ui.button.success wire:click="confirmRestore({{ $row->id }})"
                                            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.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
                                            </svg>

                                        </x-ui.button.success>
                                    @endcan
                                @else
                                    @can('delete', $row)
                                        <x-ui.button.danger wire:click="confirmDeletion({{ $row->id }})"
                                            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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                            </svg>
                                        </x-ui.button.danger>
                                    @endcan
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @empty
                <p
                    class="text-gray-500 text-theme-sm dark:text-gray-400 p-4 text-center border-t border-gray-200 dark:border-gray-800">
                    {{ __('dashboard.no') }} {{ __($collectionTitle) }}
                    {{ __('dashboard.found') }}.
                </p>
            @endforelse
        </div>
    @else
        <!-- table -->
        <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>
                <!-- Columns -->
                <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 sortable
                    wire:click="sortBy('id')">{{ __('dashboard.code') }}</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 sortable
                    wire:click="sortBy('area_id')">{{ __('dashboard.area') }}</x-ui.table.header>
                <x-ui.table.header for-crud sortable
                    wire:click="sortBy('capacity')">{{ __('dashboard.capacity') }}</x-ui.table.header>
                <x-ui.table.header for-crud sortable
                    wire:click="sortBy('status')">{{ __('dashboard.status') }}</x-ui.table.header>
                <!-- Columns -->
                <x-ui.table.action-header></x-ui.table.action-header>
            </x-slot>
            <x-slot name="body">
                @forelse ($rows as $row)
                    <x-ui.table.row wire:loading.class.delay="opacity-75">
                        <x-ui.table.column>
                            <x-ui.input.checkbox wire:model.live="selectedRecords" value="{{ $row->id }}" />
                        </x-ui.table.column>
                        <!-- Columns -->
                        <x-ui.table.column for-crud>{{ $row->id }}</x-ui.table.column>
                        <x-ui.table.column for-crud>{!! $row->qr_code !!}</x-ui.table.column>
                        <x-ui.table.column for-crud>{{ $row->name }}</x-ui.table.column>
                        <x-ui.table.column for-crud>{{ $row->area->name }}</x-ui.table.column>
                        <x-ui.table.column for-crud>{{ $row->capacity }}
                            {{ __('dashboard.seats') }}</x-ui.table.column>
                        <x-ui.table.column for-crud>
                            @php
                                $tableStatus = $row->status;
                                $badgeClasses = match ($tableStatus) {
                                    TableStatus::Available
                                        => 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500',
                                    TableStatus::Reserved
                                        => 'bg-sky-50 text-sky-600 dark:bg-sky-500/15 dark:text-sky-400',
                                    TableStatus::Occupied
                                        => 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-orange-400',
                                    TableStatus::Closed
                                        => 'bg-slate-100 text-slate-700 dark:bg-slate-600/20 dark:text-slate-200',
                                    default => 'bg-gray-100 text-gray-700 dark:bg-gray-700/30 dark:text-gray-200',
                                };
                            @endphp
                            <span
                                class="inline-flex items-center justify-center gap-1 rounded-full px-2.5 py-0.5 text-sm font-medium {{ $badgeClasses }}">
                                {{ $row->status?->label() }}

                            </span>
                        </x-ui.table.column>
                        <!-- Columns -->

                        <x-ui.table.action-column :row="$row" :resource="$this" />
                    </x-ui.table.row>
                @empty
                    <x-ui.table.row>
                        <x-ui.table.column colspan="8" class="text-center">
                            {{ __('dashboard.no') }} {{ __($collectionTitle) }}
                            {{ __('dashboard.found') }}.
                        </x-ui.table.column>
                    </x-ui.table.row>
                @endforelse
            </x-slot>
        </x-ui.table>
    @endif
</x-crud.list>