@extends('layouts.app')

@section('content')
<div class="w-full px-4 pb-60">
    <div class="max-w-7xl">
        <!-- Header Section -->
        <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 p-4 mb-4">
            <div class="sm:flex sm:items-center sm:justify-between">
                <div class="sm:flex-auto">
                    <h1 class="text-base font-semibold text-stone-900">Rezervasyon Detayı #{{ $reservation->id }}</h1>
                    <p class="mt-2 text-xs text-stone-700">Rezervasyon detayları ve işlem geçmişi.</p>
                </div>
                <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none flex gap-2">
                    @if($reservation->status === 'pending_payment' || $reservation->status === 'paid')
                    <form action="{{ route('admin.restaurants.reservations.confirm', [$restaurant, $reservation]) }}"
                        method="POST">
                        @csrf
                        <button type="submit"
                            class="px-3 py-2 text-sm font-semibold text-white rounded-md shadow-sm bg-teal-600 hover:bg-teal-500">
                            Onayla
                        </button>
                    </form>
                    @endif

                    @if(in_array($reservation->status, ['pending_payment', 'paid', 'confirmed']))
                    <form action="{{ route('admin.restaurants.reservations.cancel', [$restaurant, $reservation]) }}"
                        method="POST"
                        onsubmit="return confirm('Bu rezervasyonu iptal etmek istediğinizden emin misiniz?');">
                        @csrf
                        <button type="submit"
                            class="px-3 py-2 text-sm font-semibold text-white rounded-md shadow-sm bg-rose-600 hover:bg-rose-500">
                            İptal Et
                        </button>
                    </form>
                    @endif

                    @if($reservation->status === 'confirmed')
                    <form action="{{ route('admin.restaurants.reservations.complete', [$restaurant, $reservation]) }}"
                        method="POST">
                        @csrf
                        <button type="submit"
                            class="px-3 py-2 text-sm font-semibold text-white rounded-md shadow-sm bg-sky-600 hover:bg-sky-500">
                            Tamamla
                        </button>
                    </form>
                    @endif
                </div>
            </div>
        </div>

        <!-- Two Column Layout -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- Left Column - Reservation Details -->
            <div class="lg:col-span-2 space-y-4">
                <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 p-4">
                    <dl class="divide-y divide-stone-100">
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Onay Kodu</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0 font-mono">{{
                                $reservation->confirmation_code }}</dd>
                        </div>
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Misafir Adı</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">{{ $reservation->customer_name
                                }}
                            </dd>
                        </div>
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">E-posta</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">{{
                                $reservation->customer_email }}
                            </dd>
                        </div>
                        @if($reservation->customer_phone)
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Telefon</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">{{
                                $reservation->customer_phone }}
                            </dd>
                        </div>
                        @endif
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Tarih</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">
                                {{ \Carbon\Carbon::parse($reservation->reservation_date)->format('d.m.Y') }}
                            </dd>
                        </div>
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Saat</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">
                                {{ substr($reservation->reservation_time, 0, 5) }}
                            </dd>
                        </div>
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Kişi Sayısı</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">{{ $reservation->party_size }}
                                kişi</dd>
                        </div>
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Masa</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">
                                {{ $reservation->table ? $reservation->table->name : 'Atanmamış' }}
                            </dd>
                        </div>
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Durum</dt>
                            <dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
                                @php
                                $statusColors = [
                                'pending_payment' => 'bg-yellow-100 text-yellow-800',
                                'paid' => 'bg-green-100 text-green-800',
                                'confirmed' => 'bg-blue-100 text-blue-800',
                                'cancelled' => 'bg-red-100 text-red-800',
                                'completed' => 'bg-gray-100 text-gray-800',
                                ];
                                $statusLabels = [
                                'pending_payment' => 'Ödeme Bekliyor',
                                'paid' => 'Ödendi',
                                'confirmed' => 'Onaylandı',
                                'cancelled' => 'İptal Edildi',
                                'completed' => 'Tamamlandı',
                                ];
                                @endphp
                                <span
                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $statusColors[$reservation->status] }}">
                                    {{ $statusLabels[$reservation->status] }}
                                </span>
                            </dd>
                        </div>
                        @if($reservation->special_requests)
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Özel İstekler</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">{{
                                $reservation->special_requests
                                }}</dd>
                        </div>
                        @endif
                        @if($reservation->menu_notes)
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Menü Tercihleri</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0 whitespace-pre-line">{{
                                $reservation->menu_notes
                                }}</dd>
                        </div>
                        @endif
                        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                            <dt class="text-sm font-medium text-stone-500">Oluşturulma</dt>
                            <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">
                                {{ $reservation->created_at->format('d.m.Y H:i') }}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            <!-- Right Column - Notifications -->
            <div class="lg:col-span-1 space-y-4">
                @if($reservation->notifications && $reservation->notifications->count() > 0)
                <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 p-4">
                    <h2 class="text-base font-semibold text-stone-900 mb-4">Bildirim Geçmişi</h2>
                    <div class="space-y-2">
                        @foreach($reservation->notifications as $notification)
                        <div class="flex items-start gap-3 p-3 bg-stone-50 rounded">
                            <span class="material-symbols-rounded text-stone-500 text-sm">notifications</span>
                            <div class="flex-1">
                                <div class="text-sm text-stone-900">{{ $notification->type }}</div>
                                <div class="text-xs text-stone-500">{{ $notification->created_at->format('d.m.Y H:i') }}
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Back Link -->
        <div class="mt-4 flex justify-start">
            <a href="{{ route('admin.restaurants.reservations.index', $restaurant) }}"
                class="text-sm font-semibold text-stone-600 hover:text-stone-900">
                ← Rezervasyonlara Dön
            </a>
        </div>
    </div>
</div>
@endsection