@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">
        <!-- SOL KOLON -->
        <div class="grid gap-4 lg:col-span-3">

            <!-- RESTORAN SEÇİCİ -->
            @if($restaurants->count() > 0)
            <div class="isolate inline-flex rounded-md shadow-xs overflow-x-auto max-w-full">
                <!-- Tüm Restoranlar Seçeneği -->
                <a href="{{ route('admin.dashboard') }}" class="relative inline-flex items-center px-3 py-2 text-sm font-semibold
                          {{ !request('restaurant_id') ? 'bg-stone-600 text-white' : 'bg-white text-gray-900 hover:bg-gray-50' }}
                          ring-1 ring-gray-300 focus:z-10 rounded-l-md transition-colors">
                    <span class="material-symbols-rounded text-sm mr-1">storefront</span>
                    Tüm Restoranlar
                </a>

                <!-- Tekil Restoranlar -->
                @foreach($restaurants as $restaurant)
                <a href="{{ route('admin.dashboard', ['restaurant_id' => $restaurant->id]) }}" class="relative inline-flex items-center gap-x-2 px-3 py-2 text-sm font-semibold
                          {{ request('restaurant_id') == $restaurant->id ? 'bg-stone-600 text-white' : 'bg-white text-gray-900 hover:bg-gray-50' }}
                          ring-1 ring-gray-300 focus:z-10 -ml-px transition-colors
                          {{ $loop->last ? 'rounded-r-md' : '' }}">
                    @if($restaurant->logo)
                    <img src="{{ Storage::url($restaurant->logo) }}" class="w-5 h-5 rounded-full object-cover"
                        alt="{{ $restaurant->name }}">
                    @else
                    <span class="material-symbols-rounded text-sm">restaurant</span>
                    @endif
                    <span class="hidden sm:inline">{{ Str::limit($restaurant->name, 20) }}</span>
                    <span class="sm:hidden">{{ Str::limit($restaurant->name, 10) }}</span>
                </a>
                @endforeach
            </div>
            @endif

            {{-- İŞLEVLER --}}
            <div class="grid gap-6 p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                <div>
                    <h2 class="flex justify-between leading-6 text-stone-700">
                        <div class="flex items-center mb-2 text-sm leading-6 text-stone-400">
                            İşlevler
                        </div>
                    </h2>
                    <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                        <!-- REZERVASYONLAR -->
                        @if($selectedRestaurant)
                        <x-main-button name="REZERVASYONLAR" count=""
                            route="{{ route('admin.restaurants.reservations.index', $selectedRestaurant) }}"
                            icon="calendar_meal" color="teal" unit="GÖZ AT" data="GEÇMİŞ REZERVASYONLARI LİSTELEYİN"
                            class='' />
                        @elseif($restaurants->count() > 0)
                        <x-main-button name="REZERVASYONLAR" count=""
                            route="{{ route('admin.restaurants.reservations.index', $restaurants->first()) }}"
                            icon="calendar_meal" color="teal" unit="GÖZ AT" data="GEÇMİŞ REZERVASYONLARI LİSTELEYİN"
                            class='' />
                        @else
                        <x-main-button name="REZERVASYONLAR" count="" route="#" icon="calendar_meal" color="cyan"
                            unit="GÖZ AT" data="GEÇMİŞ REZERVASYONLARI LİSTELEYİN" class='' />
                        @endif
                        <!-- RESTORANLAR -->
                        <x-main-button name="RESTORANLAR" count="" route="{{ route('admin.restaurants.index') }}"
                            icon="store" color="stone" unit="GÖZ AT" data="TÜM RESTORANLARI LİSTELEYİN" class='' />
                        <!-- MENÜLER -->
                        @if($selectedRestaurant)
                        <x-main-button name="MENÜLER" count=""
                            route="{{ route('admin.restaurants.menus.index', $selectedRestaurant) }}" icon="menu_book"
                            color="stone" unit="GÖZ AT" data="MENÜLERİ LİSTELEYİN, DÜZENLEYİN" class='' />
                        @elseif($restaurants->count() > 0)
                        <x-main-button name="MENÜLER" count=""
                            route="{{ route('admin.restaurants.menus.index', $restaurants->first()) }}" icon="menu_book"
                            color="stone" unit="GÖZ AT" data="MENÜLERİ LİSTELEYİN, DÜZENLEYİN" class='' />
                        @else
                        <x-main-button name="MENÜLER" count="" route="#" icon="menu_book" color="stone" unit="GÖZ AT"
                            data="MENÜLERİ LİSTELEYİN, DÜZENLEYİN" class='' />
                        @endif
                        <!-- MASALAR -->
                        @if($selectedRestaurant)
                        <x-main-button name="MASALAR" count=""
                            route="{{ route('admin.restaurants.tables.index', $selectedRestaurant) }}"
                            icon="table_restaurant" color="stone" unit="GÖZ AT" data="MASALARİ LİSTELEYİN, DÜZENLEYİN"
                            class='' />
                        @elseif($restaurants->count() > 0)
                        <x-main-button name="MASALAR" count=""
                            route="{{ route('admin.restaurants.tables.index', $restaurants->first()) }}"
                            icon="table_restaurant" color="stone" unit="GÖZ AT" data="MASALARİ LİSTELEYİN, DÜZENLEYİN"
                            class='' />
                        @else
                        <x-main-button name="MASALAR" count="" route="#" icon="table_restaurant" color="stone"
                            unit="GÖZ AT" data="MASALARİ LİSTELEYİN, DÜZENLEYİN" class='' />
                        @endif
                        <!-- BLOKLANAN TARİHLER -->
                        @if($selectedRestaurant)
                        <x-main-button name="BLOKLANAN TARİHLER" count=""
                            route="{{ route('admin.restaurants.blocked-dates.index', $selectedRestaurant) }}"
                            icon="do_not_disturb_on" color="stone" unit="YÖNET" data="REZERVASYONLARI YÖNETİN"
                            class='' />
                        @elseif($restaurants->count() > 0)
                        <x-main-button name="BLOKLANAN TARİHLER" count=""
                            route="{{ route('admin.restaurants.blocked-dates.index', $restaurants->first()) }}"
                            icon="do_not_disturb_on" color="stone" unit="YÖNET" data="REZERVASYONLARI YÖNETİN"
                            class='' />
                        @else
                        <x-main-button name="BLOKLANAN TARİHLER" count="" route="#" icon="do_not_disturb_on"
                            color="stone" unit="YÖNET" data="BLOKLANAN TARİHLERİ YÖNETİN" class='' />
                        @endif
                        <!-- SERVİS SAATLERİ -->
                        @if($selectedRestaurant)
                        <x-main-button name="SERVİS SAATLERİ" count=""
                            route="{{ route('admin.restaurants.working-hours', $selectedRestaurant) }}" icon="schedule"
                            color="stone" unit="DÜZENLE" data="HAFTALIK ÇALIŞMA SAATLERİ" class='' />
                        @elseif($restaurants->count() > 0)
                        <x-main-button name="SERVİS SAATLERİ" count=""
                            route="{{ route('admin.restaurants.working-hours', $restaurants->first()) }}"
                            icon="schedule" color="stone" unit="DÜZENLE" data="HAFTALIK ÇALIŞMA SAATLERİ" class='' />
                        @else
                        <x-main-button name="SERVİS SAATLERİ" count="" route="#" icon="schedule" color="stone"
                            unit="DÜZENLE" data="HAFTALIK ÇALIŞMA SAATLERİ" class='' />
                        @endif
                        <!-- AYARLAR -->
                        @if($selectedRestaurant)
                        <x-main-button name="AYARLARI" count=""
                            route="{{ route('admin.restaurants.settings.edit', $selectedRestaurant) }}" icon="settings"
                            color="stone" unit="REZERVASYON" data="GENEL AYARLARI YAPILANDIRIN" class='' />
                        @elseif($restaurants->count() > 0)
                        <x-main-button name="AYARLARI" count=""
                            route="{{ route('admin.restaurants.settings.edit', $restaurants->first()) }}"
                            icon="settings" color="stone" unit="REZERVASYON" data="GENEL AYARLARI YAPILANDIRIN"
                            class='' />
                        @else
                        <x-main-button name="AYARLARI" count="" route="#" icon="settings" color="stone"
                            unit="REZERVASYON" data="GENEL AYARLARI YAPILANDIRIN" class='' />
                        @endif
                    </div>
                </div>
            </div>

            <!-- SON REZERVASYONLAR -->
            <div class="grid gap-6 p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                <div class="">
                    <div class="sm:flex sm:items-center">
                        <div class="sm:flex-auto">
                            <h1 class="text-base font-semibold text-stone-900">
                                Son Rezervasyonlar
                                @if($selectedRestaurant)
                                <span class="text-sm font-normal text-stone-500 ml-2">- {{ $selectedRestaurant->name
                                    }}</span>
                                @endif
                            </h1>
                            <p class="mt-2 text-xs text-stone-700">
                                @if($selectedRestaurant)
                                {{ $selectedRestaurant->name }} restoranına ait son rezervasyonlar listelenmektedir.
                                @else
                                Bu tabloda tüm restoranlarınıza ait son rezervasyonlar listelenmektedir.
                                @endif
                            </p>
                        </div>
                        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
                            <a href="{{ $selectedRestaurant ? route('admin.restaurants.reservations.index', $selectedRestaurant) : '#' }}"
                                type="button"
                                class="block px-3 py-2 text-sm font-semibold text-center text-white rounded-md shadow-sm bg-stone-600 hover:bg-stone-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-600">
                                TÜM REZERVASYONLAR
                            </a>
                        </div>
                    </div>
                    <div class="mt-6 -mx-4 ring-1 ring-stone-200 sm:mx-0 sm:rounded">
                        <table class="relative min-w-full divide-y divide-gray-200">
                            <thead class="bg-teal-50">
                                <tr>
                                    <th scope="col"
                                        class="py-2 pl-4 pr-3 text-sm font-semibold text-left text-stone-900 sm:pl-6">
                                        No</th>
                                    <th scope="col"
                                        class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                        Tarih/Saat</th>
                                    <th scope="col"
                                        class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                        Müşteri</th>
                                    <th scope="col"
                                        class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                        Kişi Sayısı</th>
                                    <th scope="col"
                                        class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                        Restoran</th>
                                    <th scope="col"
                                        class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                        Durum</th>
                                    <th scope="col" class="py-2 pl-3 pr-4 sm:pr-6">
                                        <span class="sr-only">Select</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (isset($latestReservations) && $latestReservations->count() > 0)
                                @foreach ($latestReservations as $reservation)
                                <tr>
                                    <td class="relative py-4 pl-4 pr-3 text-sm sm:pl-6">
                                        <div class="font-medium text-stone-900">#{{ $reservation->id }}</div>
                                        <div class="mt-1 text-xs text-stone-500">
                                            {{ $reservation->confirmation_code ?? '-' }}
                                        </div>
                                    </td>
                                    <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                        <div>{{ $reservation->reservation_date->format('d.m.Y') }}</div>
                                        <div class="text-xs text-stone-400">{{ $reservation->reservation_time }}</div>
                                    </td>
                                    <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                        <div class="font-medium text-stone-900">{{ $reservation->customer_name }}</div>
                                        @if($reservation->customer_phone)
                                        <div class="text-xs text-stone-400">{{ $reservation->customer_phone }}</div>
                                        @endif
                                    </td>
                                    <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                        {{ $reservation->party_size }} kişi
                                    </td>
                                    <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                        {{ $reservation->restaurant ? $reservation->restaurant->name : '-' }}
                                    </td>
                                    <td class="hidden px-3 py-3.5 text-sm lg:table-cell">
                                        @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-stone-100 text-stone-800',
                                        'no_show' => 'bg-gray-100 text-gray-800',
                                        ];
                                        $statusLabels = [
                                        'pending_payment' => 'Ödeme Bekliyor',
                                        'paid' => 'Ödendi',
                                        'confirmed' => 'Onaylandı',
                                        'cancelled' => 'İptal Edildi',
                                        'completed' => 'Tamamlandı',
                                        'no_show' => 'Gelmedi',
                                        ];
                                        @endphp
                                        <span
                                            class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium {{ $statusColors[$reservation->status] ?? 'bg-gray-100 text-gray-800' }}">
                                            {{ $statusLabels[$reservation->status] ?? $reservation->status }}
                                        </span>
                                    </td>
                                    <td class="relative py-3.5 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                        <a href="{{ route('admin.restaurants.reservations.show', [$reservation->restaurant_id, $reservation]) }}"
                                            class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 hover:bg-stone-50">
                                            Görüntüle
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                                @else
                                <tr>
                                    <td colspan="7" class="py-8 text-sm text-center text-stone-500">
                                        Henüz rezervasyon bulunmamaktadır
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>

        </div>

        {{-- SAĞ KOLON - HIZLI İŞLEMLER --}}
        <div class="grid gap-4 lg:col-span-2">

            {{-- DÖVİZ KURLARI --}}
            <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                <div class="flex gap-x-1">
                    @if (isset($ex_rate) && count($ex_rate) > 0)
                    @foreach ($ex_rate as $item)
                    @if ($item)
                    <span class="pr-1 text-xs text-stone-500">{{ $item->currency }}</span><span
                        class="font-semibold tracking-tight">{{ number_format($item->rate, 2, ',', '.')
                        }}</span>{{ $loop->last ? '' : ' | ' }}
                    @endif
                    @endforeach
                    @if (isset($ex_rate['USD']) && $ex_rate['USD'] && isset($ex_rate['USD']->date))
                    <span class="flex items-center pl-3 text-xs font-light gap-x-1 text-stone-400">
                        <span class="text-sm material-symbols-rounded">
                            cached
                        </span>
                        {{ date('d.m.Y', strtotime($ex_rate['USD']->date)) }}
                    </span>
                    @endif
                    @else
                    <span class="text-xs text-stone-400">Döviz kuru bilgisi bulunamadı</span>
                    @endif
                </div>
            </div>

            <!-- REZERVASYON BAĞLANTISI -->
            <div class="grid p-4 bg-white rounded-lg shadow gap-y-4 ring-1 ring-stone-300">
                <h2 class="flex items-center text-lg leading-6 gap-x-2 font-jbmono-bold text-stone-700">
                    <span class="material-symbols-rounded text-stone-500">
                        text_compare
                    </span>
                    Rezervasyon Bağlantısı
                </h2>

                @if($selectedRestaurant)
                <div class="group flex border border-gray-200 p-4 rounded-md focus:outline-none">
                    <span class="flex flex-col gap-y-1 w-full">
                        <span class="block text-sm font-medium text-stone-900">{{ $selectedRestaurant->name }}</span>
                        <span class="block text-xs text-stone-500">Müşteriler bu bağlantı üzerinden rezervasyon
                            yapabilirler.</span>
                        <div class="mt-2 p-3 bg-stone-50 rounded-md border border-stone-200">
                            <p class="flex items-center text-xs break-all text-stone-600 font-mono">
                                https://reserve.apper.com.tr/reservation/<span class="font-bold text-teal-700">{{
                                    $selectedRestaurant->slug }}</span>
                                <button
                                    onclick="copyReservationLink('{{ url('/reservation/' . $selectedRestaurant->slug) }}', event)"
                                    class="material-symbols-rounded text-sm text-stone-400 ml-2 hover:text-teal-600 cursor-pointer transition-colors"
                                    title="Bağlantıyı kopyala">content_copy</button>
                            </p>
                        </div>
                        <div class="flex gap-x-2 mt-3">
                            <a href="{{ url('/reservation/' . $selectedRestaurant->slug) }}" target="_blank"
                                class="inline-flex items-center px-3 py-2 text-sm font-semibold text-white rounded-md w-fit bg-teal-600 hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500">
                                SAYFAYI GÖRÜNTÜLE
                                <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                </svg>
                            </a>
                        </div>
                    </span>
                </div>
                @else
                <div class="flex border border-gray-200 p-4 rounded-md bg-gray-50">
                    <span class="flex flex-col gap-y-1">
                        <span class="block text-sm font-medium text-stone-700">Restoran Seçilmedi</span>
                        <span class="block text-xs text-stone-500">Rezervasyon bağlantısını görüntülemek için lütfen
                            yukarıdan bir restoran seçin.</span>
                    </span>
                </div>
                @endif
            </div>

            {{-- BİLGİ --}}
            <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 p-4">
                <div class="flex items-start gap-x-3">
                    <span class="material-symbols-rounded text-stone-500">info</span>
                    <div>
                        <h3 class="text-sm font-medium text-stone-900">Yardım mı Lazım?</h3>
                        <p class="mt-1 text-xs text-stone-600">Rezervasyon sistemi hakkında daha fazla bilgi için
                            dokümantasyonu inceleyin.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@push('scripts')
<script>
    function copyReservationLink(url, event) {
        navigator.clipboard.writeText(url).then(function() {
            // Show success message
            const button = event.target.closest('button');
            const originalIcon = button.innerHTML;
            button.innerHTML = 'check_circle';
            button.classList.remove('text-stone-400');
            button.classList.add('text-green-600');

            setTimeout(function() {
                button.innerHTML = originalIcon;
                button.classList.remove('text-green-600');
                button.classList.add('text-stone-400');
            }, 2000);
        }).catch(function(err) {
            console.error('Could not copy text: ', err);
            alert('Bağlantı kopyalanamadı. Lütfen manuel olarak kopyalayın.');
        });
    }
</script>
@endpush

@endsection