@extends('layouts.app')

@section('content')
<div class="w-full px-4 pb-60">
    <div class="grid items-start max-w-2xl grid-cols-1 grid-rows-1 gap-4 mx-auto lg:mx-0 lg:max-w-none lg:grid-cols-5">
        <div class="grid gap-4 lg:col-span-5">

            <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 p-4">
                <div class="sm:flex sm:items-center">
                    <div class="sm:flex-auto">
                        <h1 class="text-base font-semibold text-stone-900">Bugünkü Rezervasyonlar - {{ $restaurant->name
                            }}</h1>
                        <p class="mt-2 text-xs text-stone-700">{{ \Carbon\Carbon::today()->isoFormat('DD MMMM YYYY') }}
                            tarihli rezervasyonlar</p>
                    </div>
                </div>
            </div>

            @if($reservations->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($reservations as $reservation)
                <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 overflow-hidden">
                    <div class="p-4 border-b border-stone-200 bg-violet-50">
                        <div class="flex items-center justify-between">
                            <div class="px-2 py-1 text-sm font-medium rounded bg-violet-200 text-violet-800">
                                {{ substr($reservation->reservation_time, 0, 5) }}
                            </div>
                            @php
                            $statusColors = [
                            'pending' => 'bg-yellow-100 text-yellow-800',
                            'confirmed' => 'bg-blue-100 text-blue-800',
                            ];
                            $statusLabels = [
                            'pending' => 'Bekliyor',
                            'confirmed' => 'Onaylandı',
                            ];
                            @endphp
                            <span
                                class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $statusColors[$reservation->status] }}">
                                {{ $statusLabels[$reservation->status] }}
                            </span>
                        </div>
                    </div>

                    <div class="p-4 space-y-2">
                        <div>
                            <div class="text-base font-medium text-stone-900">{{ $reservation->customer_name }}</div>
                            @if($reservation->customer_email)
                            <div class="text-xs text-stone-500">{{ $reservation->customer_email }}</div>
                            @endif
                        </div>

                        <div class="flex items-center justify-between text-sm">
                            <span class="text-stone-500">Kişi:</span>
                            <span class="font-medium text-stone-900">{{ $reservation->party_size }}</span>
                        </div>

                        @if($reservation->table)
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-stone-500">Masa:</span>
                            <span class="font-medium text-stone-900">{{ $reservation->table->name }}</span>
                        </div>
                        @endif

                        @if($reservation->customer_phone)
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-stone-500">Telefon:</span>
                            <span class="font-medium text-stone-900">{{ $reservation->customer_phone }}</span>
                        </div>
                        @endif
                    </div>

                    <div class="px-4 py-3 bg-stone-50 border-t border-stone-200">
                        <a href="{{ route('admin.restaurants.reservations.show', [$restaurant, $reservation]) }}"
                            class="text-sm font-medium text-stone-600 hover:text-stone-900">
                            Detayları Gör →
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 p-12 text-center">
                <span class="material-symbols-rounded text-6xl text-stone-300 mb-4">event_busy</span>
                <h3 class="text-lg font-medium text-stone-900 mb-2">Bugün Rezervasyon Yok</h3>
                <p class="text-sm text-stone-500">Bugün için planlanmış rezervasyon bulunmamaktadır.</p>
            </div>
            @endif

            <div class="flex justify-start">
                <a href="{{ route('admin.dashboard', $selectedRestaurant ? ['restaurant_id' => $selectedRestaurant->id] : []) }}"
                    class="text-sm font-semibold text-stone-600 hover:text-stone-900">
                    ← Dashboard'a Dön
                </a>
            </div>

        </div>
    </div>
</div>
@endsection