@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-5">

            <!-- Header -->
            <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">Yeni Menü Ekle - {{ $restaurant->name }}</h1>
                        <p class="mt-2 text-xs text-stone-700">Restoranınıza yeni bir menü seçeneği ekleyin.</p>
                    </div>
                </div>
            </div>

            <!-- Form -->
            <div class="bg-white rounded-lg shadow ring-1 ring-stone-300 p-4">
                <form action="{{ route('admin.restaurants.menus.store', ['restaurant' => $restaurant->id]) }}"
                    method="POST">
                    @csrf

                    <div class="space-y-6">
                        <!-- Menü Adı -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-stone-900">Menü Adı</label>
                            <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                class="mt-1 block w-full rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm">
                            @error('name')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Açıklama -->
                        <div>
                            <label for="description" class="block text-sm font-medium text-stone-900">Açıklama</label>
                            <textarea name="description" id="description" rows="3"
                                class="mt-1 block w-full rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm">{{ old('description') }}</textarea>
                            <p class="mt-1 text-xs text-stone-500">Müşterilere görünecek açıklama metni</p>
                            @error('description')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Fiyat -->
                        <div>
                            <label for="price" class="block text-sm font-medium text-stone-900">Fiyat (₺)</label>
                            <input type="number" name="price" id="price" value="{{ old('price', 0) }}" step="0.01"
                                min="0" required
                                class="mt-1 block w-full rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm">
                            <p class="mt-1 text-xs text-stone-500">Bilgi amaçlıdır, ödeme tutarına dahil edilmez</p>
                            @error('price')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Servis Dönemi -->
                        <div>
                            <label for="service" class="block text-sm font-medium text-stone-900">Servis Dönemi</label>
                            <select name="service" id="service" required
                                class="mt-1 block w-full rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm">
                                <option value="">Seçiniz...</option>
                                @foreach($servicePeriods as $period)
                                <option value="{{ $period }}" {{ old('service')==$period ? 'selected' : '' }}>
                                    {{ $period }}
                                </option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-stone-500">Bu menünün hangi servis döneminde gösterileceğini
                                belirler</p>
                            @error('service')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Sıra Numarası -->
                        <div>
                            <label for="sort_order" class="block text-sm font-medium text-stone-900">Sıra
                                Numarası</label>
                            <input type="number" name="sort_order" id="sort_order" value="{{ old('sort_order', 0) }}"
                                min="0"
                                class="mt-1 block w-full rounded-md border-stone-300 shadow-sm focus:border-stone-500 focus:ring-stone-500 sm:text-sm">
                            <p class="mt-1 text-xs text-stone-500">Küçük sayılar önce gösterilir (varsayılan: 0)</p>
                            @error('sort_order')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Aktif -->
                        <div class="flex items-start">
                            <div class="flex h-5 items-center">
                                <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active',
                                    true) ? 'checked' : '' }}
                                    class="h-4 w-4 rounded border-stone-300 text-stone-600 focus:ring-stone-500">
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="is_active" class="font-medium text-stone-900">Aktif</label>
                                <p class="text-stone-500">Bu menü rezervasyonlarda görünebilir</p>
                            </div>
                        </div>

                        <!-- Buttons -->
                        <div class="flex items-center justify-end gap-x-4 pt-4 border-t border-stone-200">
                            <a href="{{ route('admin.restaurants.menus.index', ['restaurant' => $restaurant->id]) }}"
                                class="text-sm font-semibold leading-6 text-stone-900 hover:text-stone-700">
                                İptal
                            </a>
                            <button type="submit"
                                class="px-3 py-2 text-sm font-semibold 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">
                                Menüyü Kaydet
                            </button>
                        </div>
                    </div>
                </form>
            </div>

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