@extends('layouts.app')

@section('content')
<div class="max-w-6xl 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-5">

            <!-- Header -->
            <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">Menüler - {{ $restaurant->name }}</h1>
                        <p class="mt-2 text-xs text-stone-700">Restoranınızın menü seçeneklerini yönetin.</p>
                    </div>
                    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
                        <a href="{{ route('admin.restaurants.menus.create', ['restaurant' => $restaurant->id]) }}"
                            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">
                            YENİ MENÜ EKLE
                        </a>
                    </div>
                </div>
            </div>

            <!-- Success Message -->
            @if(session('success'))
            <div class="bg-green-50 border-l-4 border-green-400 p-4 rounded">
                <p class="text-sm text-green-700">{{ session('success') }}</p>
            </div>
            @endif

            <!-- Menus List -->
            <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 p-4">
                @if($menus->count() > 0)
                <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">
                                    Menü Adı
                                </th>
                                <th scope="col"
                                    class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                    Servis Dönemi
                                </th>
                                <th scope="col"
                                    class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                                    Fiyat
                                </th>
                                <th scope="col" class="px-3 py-2 text-sm font-semibold text-left text-stone-900">
                                    Durum
                                </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($menus as $menu)
                            <tr>
                                <td class="relative py-4 pl-4 pr-3 text-sm sm:pl-6">
                                    <div class="font-medium text-stone-900">{{ $menu->name }}</div>
                                    @if($menu->description)
                                    <div class="mt-1 text-xs text-stone-500">{{ Str::limit($menu->description, 80) }}
                                    </div>
                                    @endif
                                </td>
                                <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                    <span
                                        class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        {{ $menu->service }}
                                    </span>
                                </td>
                                <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                    ₺{{ number_format($menu->price, 2) }}
                                </td>
                                <td class="px-3 py-3.5 text-sm text-stone-500">
                                    @if($menu->is_active)
                                    <span
                                        class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        Aktif
                                    </span>
                                    @else
                                    <span
                                        class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                        Pasif
                                    </span>
                                    @endif
                                </td>
                                <td
                                    class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                    <a href="{{ route('admin.restaurants.menus.edit', ['restaurant' => $restaurant->id, 'menu' => $menu->id]) }}"
                                        class="text-stone-600 hover:text-stone-900 mr-3">Düzenle</a>
                                    <form
                                        action="{{ route('admin.restaurants.menus.destroy', ['restaurant' => $restaurant->id, 'menu' => $menu->id]) }}"
                                        method="POST" class="inline"
                                        onsubmit="return confirm('Bu menüyü 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>

                <!-- Pagination -->
                <div class="mt-4">
                    {{ $menus->links() }}
                </div>
                @else
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-stone-900">Henüz menü eklenmemiş</h3>
                    <p class="mt-1 text-sm text-stone-500">Yeni bir menü ekleyerek başlayın.</p>
                    <div class="mt-6">
                        <a href="{{ route('admin.restaurants.menus.create', ['restaurant' => $restaurant->id]) }}"
                            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-stone-600 hover:bg-stone-500">
                            + Yeni Menü Ekle
                        </a>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection