<div>
    <div class="my-4 grid gap-6 grid-cols-3">
        <!-- Card Section -->
        <div class="space-y-8 col-span-2">
            @foreach ($tables as $area)

                <div @class([
                    'flex flex-col gap-3 sm:gap-4 space-y-3 rounded-lg p-2 -m-2',
                    'ring-2 ring-skin-base/40 bg-skin-base/[0.05]' => $reservation->area_id && $reservation->area_id === $area->id,
                ]) wire:key='area-{{ $area->id }}'>
                    <h3 class="f-15 font-medium inline-flex gap-2 items-center flex-wrap dark:text-neutral-200">
                        {{ $area->area_name }}
                        @if ($reservation->area_id && $reservation->area_id === $area->id)
                            <span class="px-2 py-0.5 text-xs rounded-full bg-skin-base/15 text-skin-base border border-skin-base/30">@lang('modules.reservation.preferredArea')</span>
                        @endif
                        <span class="px-2 py-1 text-sm rounded bg-slate-100 border-gray-300 border text-gray-800 ">{{ $area->tables->count() }} @lang('modules.table.table')</span>
                    </h3>
                    <!-- Card -->

                    <div class="grid sm:grid-cols-3 gap-3 sm:gap-4">
                        @foreach ($area->tables as $item)
                        @php
                            $isAvailable = $this->isTableAvailable($item->id);
                            $conflictingInfo = $this->getConflictingReservationInfo($item->id);
                        @endphp

                        <div class="relative">
                            <div
                            @class([
                                'group flex items-center justify-center border shadow-sm rounded-lg transition dark:bg-gray-700 dark:border-gray-600', 'bg-red-50 border-red-200 hover:shadow-md cursor-pointer' => ($item->status == 'inactive'),
                                'bg-white hover:shadow-md cursor-pointer' => ($item->status == 'active' && $isAvailable),
                                'bg-gray-100 border-gray-300 cursor-not-allowed opacity-60' => ($item->status == 'active' && !$isAvailable),
                            ])
                            @if($isAvailable && $item->status == 'active')
                                wire:click='setReservationTable({{ $item->id }})'
                            @endif
                            wire:key='table-{{ $item->id }}'
                            title="{{ !$isAvailable && $item->status == 'active' ? 'Table is already reserved for this time' : '' }}">
                                <div class="p-3">
                                    <div class="flex flex-col space-y-2 items-center justify-center">
                                        @if ($item->status == 'inactive')
                                            <div class="inline-flex text-xs gap-1 text-red-600 font-semibold">
                                                @lang('app.inactive')
                                            </div>
                                        @endif
                                        <div @class(['p-2 rounded-lg tracking-wide ',
                                        'bg-green-100 text-green-600' => ($item->available_status == 'available' && $isAvailable),
                                        'bg-red-100 text-red-600' => ($item->available_status == 'reserved' || !$isAvailable),
                                        'bg-blue-100 text-blue-600' => ($item->available_status == 'running')])>
                                            <h3 wire:loading.class.delay='opacity-50'
                                                @class(['font-semibold'])>
                                                {{ $item->table_code }}
                                            </h3>
                                        </div>
                                        <p
                                        @class(['text-xs font-medium dark:text-neutral-200 text-gray-500'])>
                                            {{ $item->seating_capacity }} @lang('modules.table.seats')
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Card -->
                        @endforeach
                    </div>
                </div>
            @endforeach

        </div>
        <!-- End Card Section -->


        <div class="col-span-1 space-y-3 bg-gray-50 dark:bg-neutral-900/30 rounded-md p-3">
            <h4 class="text-xs font-semibold">@lang('modules.reservation.reservedTables'): {{ $reservation->reservation_date_time->translatedFormat('d F') }}</h4>

            @if ($capacityError)
            <div class="bg-red-50 border border-red-200 text-red-700 rounded-md p-3 text-xs font-medium">
                {{ $capacityError }}
            </div>
            @endif

            @if ($reservation->area)
            <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-md p-3">
                <h5 class="text-xs font-semibold text-amber-800 dark:text-amber-200 mb-1">@lang('modules.reservation.preferredArea')</h5>
                <p class="text-sm text-amber-900 dark:text-amber-100">{{ $reservation->area->area_name }}</p>
            </div>
            @endif

            @if ($reservation->table_id && $reservation->table)
            <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md p-3">
                <h5 class="text-xs font-semibold text-blue-800 dark:text-blue-200 mb-2">@lang('modules.reservation.currentTable')</h5>
                <div class="flex items-center gap-2 flex-wrap">
                    <div class="p-2 rounded-md bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200">
                        <span class="font-semibold text-sm">{{ $reservation->table->table_code }}</span>
                    </div>
                    <span class="text-xs text-blue-600 dark:text-blue-300">{{ $reservation->table->seating_capacity }} @lang('modules.table.seats')</span>
                </div>
                @if ($reservation->table->area)
                <p class="mt-2 text-center text-xs font-semibold text-blue-700 dark:text-blue-300">
                    {{ $reservation->table->area->area_name }}
                </p>
                @endif
            </div>
            @endif

            @forelse ($reservations as $item)
            <div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70 p-2">
                <div class="flex justify-between">
                    <div class="text-base font-semibold text-gray-800 dark:text-white">
                        <div @class(['p-2 rounded-md tracking-wide bg-skin-base/[0.2] text-skin-base'])>
                            <h3 wire:loading.class.delay='opacity-50'
                                @class(['font-semibold'])>
                                {{ $item->table->table_code }}
                            </h3>
                        </div>
                    </div>
                    <div class=" text-gray-700 dark:text-neutral-400 flex flex-col space-y-1">
                        <div class="inline-flex gap-2 items-center text-xs">
                            {{ $item->party_size }} @lang('modules.reservation.guests')
                        </div>

                        <div class="inline-flex gap-2 items-center text-xs">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/>
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/>
                            </svg>
                            {{ $item->reservation_date_time->translatedFormat(timeFormat()) }}
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div>
                @lang('messages.noTableReserved')
            </div>
            @endforelse
        </div>

    </div>

</div>
