@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 sm:justify-between">
                    <div class="sm:flex-auto">
                        <h1 class="text-base font-semibold text-stone-900">Restoranlar</h1>
                        <p class="mt-2 text-xs text-stone-700">Tüm restoranlarınızı yönetin.</p>
                    </div>
                    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
                        <a href="{{ route('admin.restaurants.create') }}"
                            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">
                            YENİ RESTORAN EKLE
                        </a>
                    </div>
                </div>
            </div>

            @if($restaurants->count() > 0)
            <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 p-4">
                <div class="-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-violet-50">
                            <tr>
                                <th scope="col"
                                    class="py-2 pl-4 pr-3 text-sm font-semibold text-left text-stone-900 sm:pl-6">
                                    Logo
                                </th>
                                <th scope="col" class="px-3 py-2 text-sm font-semibold text-left text-stone-900">
                                    İsim
                                </th>
                                <th scope="col"
                                    class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                    Slug
                                </th>
                                <th scope="col"
                                    class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                    Telefon
                                </th>
                                <th scope="col" class="px-3 py-2 text-sm font-semibold text-left text-stone-900">
                                    Masalar
                                </th>
                                <th scope="col" class="py-2 pl-3 pr-4 sm:pr-6">
                                    <span class="sr-only">İşlemler</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($restaurants as $restaurant)
                            <tr>
                                <td class="relative py-4 pl-4 pr-3 text-sm sm:pl-6">
                                    @if($restaurant->logo)
                                    <img src="{{ asset('storage/' . $restaurant->logo) }}" alt="{{ $restaurant->name }}"
                                        class="h-12 w-12 object-cover rounded">
                                    @else
                                    <div class="h-12 w-12 bg-stone-200 rounded flex items-center justify-center">
                                        <span class="material-symbols-rounded text-stone-400">restaurant</span>
                                    </div>
                                    @endif
                                </td>
                                <td class="px-3 py-3.5">
                                    <div class="text-sm font-medium text-stone-900">{{ $restaurant->name }}</div>
                                    @if($restaurant->email)
                                    <div class="text-xs text-stone-500">{{ $restaurant->email }}</div>
                                    @endif
                                </td>
                                <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">{{ $restaurant->slug
                                    }}</td>
                                <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">{{
                                    $restaurant->phone ?? '-' }}</td>
                                <td class="px-3 py-3.5 text-sm text-stone-500">{{ $restaurant->tables->count() }}</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.index', $restaurant) }}"
                                        class="text-stone-600 hover:text-stone-900 mr-2">Rezervasyonlar</a>
                                    <a href="{{ route('admin.restaurants.edit', $restaurant) }}"
                                        class="text-stone-600 hover:text-stone-900 mr-2">Düzenle</a>
                                    <form action="{{ route('admin.restaurants.destroy', $restaurant) }}" method="POST"
                                        class="inline"
                                        onsubmit="return confirm('Bu restoranı silmek istediğinizden emin misiniz?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-900">Sil</button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-4">
                    {{ $restaurants->links() }}
                </div>
            </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">storefront</span>
                <p class="text-stone-500">Henüz restoran eklenmemiş.</p>
            </div>
            @endif

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