@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">Masa Detayı - {{ $table->name }}</h1>
                        <p class="mt-2 text-xs text-stone-700">Masa bilgileri ve son rezervasyonlar.</p>
                    </div>
                    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
                        <a href="{{ route('admin.restaurants.tables.edit', ['restaurant' => $restaurant->id, 'table' => $table->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">
                            DÜZENLE
                        </a>
                    </div>
                </div>
            </div>

            <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">Masa Adı</dt>
                        <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">{{ $table->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">Kapasite</dt>
                        <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">{{ $table->capacity }} 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">Bölüm</dt>
                        <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">{{ $table->section ?? '-' }}</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">
                            @if($table->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
                        </dd>
                    </div>
                    @if($table->description)
                    <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-stone-500">Açıklama</dt>
                        <dd class="mt-1 text-sm text-stone-900 sm:col-span-2 sm:mt-0">{{ $table->description }}</dd>
                    </div>
                    @endif
                </dl>
            </div>

            @if($table->reservations && $table->reservations->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">Son Rezervasyonlar</h2>
                <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">
                                    Misafir</th>
                                <th scope="col" class="px-3 py-2 text-sm font-semibold text-left text-stone-900">Tarih
                                </th>
                                <th scope="col" class="px-3 py-2 text-sm font-semibold text-left text-stone-900">Saat
                                </th>
                                <th scope="col" class="px-3 py-2 text-sm font-semibold text-left text-stone-900">Durum
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($table->reservations as $reservation)
                            <tr>
                                <td class="px-3 py-3.5 text-sm text-stone-900">{{ $reservation->customer_name }}</td>
                                <td class="px-3 py-3.5 text-sm text-stone-500">{{
                                    \Carbon\Carbon::parse($reservation->reservation_date)->format('d.m.Y') }}</td>
                                <td class="px-3 py-3.5 text-sm text-stone-500">{{ substr($reservation->reservation_time,
                                    0, 5) }}</td>
                                <td class="px-3 py-3.5 text-sm">
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
                                        @if($reservation->status == 'confirmed') bg-blue-100 text-blue-800
                                        @elseif($reservation->status == 'pending') bg-yellow-100 text-yellow-800
                                        @else bg-gray-100 text-gray-800 @endif">
                                        {{ ucfirst($reservation->status) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif

            <div class="flex justify-start">
                <a href="{{ route('admin.restaurants.tables.index', ['restaurant' => $restaurant->id]) }}"
                    class="text-sm font-semibold text-stone-600 hover:text-stone-900">
                    ← Masalara Dön
                </a>
            </div>

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