@extends('layouts.app')
@section('title', 'Rezervasyon')
@section('page-title', 'Etkinlik Alani Rezervasyonu')

@section('content')
{{-- Flash Messages --}}
@if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 px-4 py-3 rounded-xl mb-5 text-sm">
        {{ session('success') }}
    </div>
@endif
@if(session('error'))
    <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 px-4 py-3 rounded-xl mb-5 text-sm">
        {{ session('error') }}
    </div>
@endif

{{-- Tab Navigation --}}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 mb-5 overflow-hidden">
    <div class="flex border-b border-gray-100 dark:border-gray-700">
        <a href="?tab=areas" class="flex items-center gap-2 px-5 py-3.5 text-sm font-medium border-b-2 transition-colors {{ $activeTab === 'areas' ? 'border-primary text-primary' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300' }}">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            Etkinlik Alanlari
        </a>
        <a href="?tab=my-reservations" class="flex items-center gap-2 px-5 py-3.5 text-sm font-medium border-b-2 transition-colors {{ $activeTab === 'my-reservations' ? 'border-primary text-primary' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300' }}">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            Rezervasyonlarim
            @if($myReservations->whereIn('status', [1, 2])->count() > 0)
                <span class="inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-primary rounded-full">{{ $myReservations->whereIn('status', [1, 2])->count() }}</span>
            @endif
        </a>
    </div>
</div>

{{-- Tab: Etkinlik Alanlari --}}
@if($activeTab === 'areas')
    @if($areas->isEmpty())
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-12 text-center">
            <svg class="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            <p class="text-gray-500 dark:text-gray-400">Henuz etkinlik alani tanimlanmamis.</p>
        </div>
    @else
        {{-- Area Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            @foreach($areas as $area)
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow">
                    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-indigo-900/20 dark:to-blue-900/20">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-lg">
                                {{ $area->type?->icon ?? '📍' }}
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800 dark:text-gray-100">{{ $area->name }}</h3>
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $area->type?->name ?? '-' }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6 space-y-3">
                        @if($area->description)
                            <p class="text-sm text-gray-600 dark:text-gray-300">{{ $area->description }}</p>
                        @endif

                        <div class="grid grid-cols-2 gap-3 text-sm">
                            <div>
                                <span class="text-gray-500 dark:text-gray-400">Kapasite</span>
                                <p class="font-medium text-gray-800 dark:text-gray-200">{{ $area->capacity }} kisi</p>
                            </div>
                            <div>
                                <span class="text-gray-500 dark:text-gray-400">Tur</span>
                                <p class="font-medium text-gray-800 dark:text-gray-200">{{ $area->slot_type_name }}</p>
                            </div>
                            <div>
                                <span class="text-gray-500 dark:text-gray-400">Calisma Saatleri</span>
                                <p class="font-medium text-gray-800 dark:text-gray-200">{{ $area->working_hours }}</p>
                            </div>
                            <div>
                                <span class="text-gray-500 dark:text-gray-400">Ucret</span>
                                <p class="font-medium {{ $area->is_paid ? 'text-amber-600 dark:text-amber-400' : 'text-green-600 dark:text-green-400' }}">{{ $area->price_display }}</p>
                            </div>
                        </div>

                        @if($area->rules)
                            <div class="pt-2 border-t border-gray-100 dark:border-gray-700">
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ Str::limit($area->rules, 100) }}</p>
                            </div>
                        @endif

                        @if($area->requires_approval)
                            <div class="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                                Onay gerektirir
                            </div>
                        @endif

                        <a href="?tab=areas&area_id={{ $area->source_id }}&date={{ now()->format('Y-m-d') }}"
                           class="mt-3 w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-xl transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            Rezervasyon Yap
                        </a>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Availability & Booking Section --}}
        @if($selectedArea)
            <div class="mt-8 bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden" id="availability-section">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20">
                    <div class="flex items-center justify-between">
                        <h2 class="text-base font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2">
                            <div class="w-8 h-8 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-lg flex items-center justify-center text-white">
                                {{ $selectedArea->type?->icon ?? '📍' }}
                            </div>
                            {{ $selectedArea->name }} - Musaitlik
                        </h2>
                        <a href="?tab=areas" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">Geri Don</a>
                    </div>
                </div>

                <div class="p-6">
                    {{-- Date Picker --}}
                    <div class="flex items-center gap-4 mb-6">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Tarih:</label>
                        <input type="date" id="availabilityDate" value="{{ $selectedDate }}"
                               min="{{ now()->format('Y-m-d') }}"
                               @if($selectedArea->max_advance_days)
                                   max="{{ now()->addDays($selectedArea->max_advance_days)->format('Y-m-d') }}"
                               @endif
                               class="px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50"
                               onchange="window.location.href='?tab=areas&area_id={{ $selectedArea->source_id }}&date=' + this.value + '#availability-section'">

                        {{-- Quick navigation --}}
                        <div class="flex gap-1">
                            <a href="?tab=areas&area_id={{ $selectedArea->source_id }}&date={{ now()->format('Y-m-d') }}#availability-section"
                               class="px-3 py-1.5 text-xs rounded-lg {{ $selectedDate === now()->format('Y-m-d') ? 'bg-primary text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200' }}">Bugun</a>
                            <a href="?tab=areas&area_id={{ $selectedArea->source_id }}&date={{ now()->addDay()->format('Y-m-d') }}#availability-section"
                               class="px-3 py-1.5 text-xs rounded-lg {{ $selectedDate === now()->addDay()->format('Y-m-d') ? 'bg-primary text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200' }}">Yarin</a>
                        </div>
                    </div>

                    {{-- Time Slots --}}
                    @if(count($slots) > 0)
                        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3 mb-6">
                            @foreach($slots as $slot)
                                @if($slot['is_available'])
                                    <button type="button"
                                            onclick="selectSlot('{{ $slot['start_time'] }}', '{{ $slot['end_time'] }}')"
                                            data-start="{{ $slot['start_time'] }}" data-end="{{ $slot['end_time'] }}"
                                            class="slot-btn px-3 py-3 rounded-xl border-2 border-green-200 dark:border-green-700 bg-green-50 dark:bg-green-900/20 text-center hover:border-green-500 hover:bg-green-100 dark:hover:bg-green-900/40 transition-colors cursor-pointer">
                                        <p class="text-sm font-semibold text-green-700 dark:text-green-300">{{ $slot['start_time'] }} - {{ $slot['end_time'] }}</p>
                                        <p class="text-xs text-green-600 dark:text-green-400 mt-1">Musait</p>
                                    </button>
                                @elseif(($slot['status'] ?? '') === 'Gecmis')
                                    <div class="px-3 py-3 rounded-xl border-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-center opacity-40">
                                        <p class="text-sm font-semibold text-gray-400 dark:text-gray-500">{{ $slot['start_time'] }} - {{ $slot['end_time'] }}</p>
                                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Gecmis</p>
                                    </div>
                                @else
                                    <div class="px-3 py-3 rounded-xl border-2 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 text-center opacity-60">
                                        <p class="text-sm font-semibold text-red-700 dark:text-red-300">{{ $slot['start_time'] }} - {{ $slot['end_time'] }}</p>
                                        <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ $slot['status'] ?? 'Dolu' }}</p>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @else
                        <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">Bu tarih icin slot bulunamadi.</p>
                    @endif

                    {{-- Reservation Form (initially hidden) --}}
                    <div id="reservationForm" class="hidden border-t border-gray-100 dark:border-gray-700 pt-6">
                        <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-4">Rezervasyon Bilgileri</h3>
                        <form action="{{ route('reservations.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="area_source_id" value="{{ $selectedArea->source_id }}">
                            <input type="hidden" name="reservation_date" value="{{ $selectedDate }}">
                            <input type="hidden" name="start_time" id="formStartTime">
                            <input type="hidden" name="end_time" id="formEndTime">

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm text-gray-600 dark:text-gray-400 mb-1">Secilen Zaman</label>
                                    <p id="selectedTimeDisplay" class="text-sm font-semibold text-primary py-2">-</p>
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-600 dark:text-gray-400 mb-1">Kisi Sayisi *</label>
                                    <input type="number" name="person_count" value="1" min="1" max="{{ $selectedArea->capacity }}"
                                           class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
                                    <p class="text-xs text-gray-400 mt-1">Maks: {{ $selectedArea->capacity }}</p>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="block text-sm text-gray-600 dark:text-gray-400 mb-1">Amac</label>
                                <input type="text" name="purpose" maxlength="500" placeholder="Orn: Ders calismasi, toplanti..."
                                       class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
                            </div>

                            <div class="mb-4">
                                <label class="block text-sm text-gray-600 dark:text-gray-400 mb-1">Notlar</label>
                                <textarea name="notes" maxlength="500" rows="2" placeholder="Ek bilgi..."
                                          class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50"></textarea>
                            </div>

                            @if($selectedArea->is_paid)
                                <div class="mb-4 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-100 dark:border-amber-800">
                                    <p class="text-sm text-amber-800 dark:text-amber-200">
                                        Ucret: <span id="priceDisplay" class="font-semibold">{{ $selectedArea->price_display }}</span>
                                    </p>
                                </div>
                            @endif

                            <button type="submit"
                                    class="w-full px-4 py-3 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-xl transition-colors">
                                Rezervasyon Talebi Gonder
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    @endif
@endif

{{-- Tab: Rezervasyonlarim --}}
@if($activeTab === 'my-reservations')
    @if($myReservations->isEmpty())
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-12 text-center">
            <svg class="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            <p class="text-gray-500 dark:text-gray-400">Henuz rezervasyonunuz bulunmuyor.</p>
            <a href="?tab=areas" class="mt-4 inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary hover:text-primary/80 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                Rezervasyon Yap
            </a>
        </div>
    @else
        <div class="space-y-4">
            @foreach($myReservations as $reservation)
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                    <div class="p-5">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-xl flex items-center justify-center text-white text-lg flex-shrink-0">
                                    {{ $reservation->area?->type?->icon ?? '📍' }}
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-800 dark:text-gray-100">{{ $reservation->area?->name ?? 'Bilinmeyen Alan' }}</h3>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $reservation->area?->type?->name ?? '-' }}</p>
                                </div>
                            </div>
                            @php
                                $colors = [
                                    'yellow' => 'bg-yellow-50 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
                                    'green' => 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-300',
                                    'red' => 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-300',
                                    'gray' => 'bg-gray-50 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
                                    'blue' => 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
                                ];
                            @endphp
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold {{ $colors[$reservation->status_color] ?? $colors['gray'] }}">
                                {{ $reservation->status_text }}
                            </span>
                        </div>

                        <div class="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
                            <div>
                                <span class="text-gray-500 dark:text-gray-400">Tarih</span>
                                <p class="font-medium text-gray-800 dark:text-gray-200">{{ $reservation->reservation_date->format('d.m.Y') }}</p>
                            </div>
                            <div>
                                <span class="text-gray-500 dark:text-gray-400">Saat</span>
                                <p class="font-medium text-gray-800 dark:text-gray-200">{{ $reservation->time_slot_display }}</p>
                            </div>
                            <div>
                                <span class="text-gray-500 dark:text-gray-400">Kisi Sayisi</span>
                                <p class="font-medium text-gray-800 dark:text-gray-200">{{ $reservation->person_count }}</p>
                            </div>
                            @if($reservation->total_price)
                            <div>
                                <span class="text-gray-500 dark:text-gray-400">Ucret</span>
                                <p class="font-medium text-amber-600 dark:text-amber-400">{{ number_format($reservation->total_price, 2) }} {{ $reservation->area?->currency_code ?? 'TL' }}</p>
                            </div>
                            @endif
                        </div>

                        @if($reservation->purpose)
                            <div class="mt-3">
                                <span class="text-xs text-gray-500 dark:text-gray-400">Amac:</span>
                                <p class="text-sm text-gray-700 dark:text-gray-300">{{ $reservation->purpose }}</p>
                            </div>
                        @endif

                        @if($reservation->status == 3 && $reservation->rejection_reason)
                            <div class="mt-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-100 dark:border-red-800">
                                <p class="text-xs text-red-600 dark:text-red-400 font-medium">Ret Nedeni:</p>
                                <p class="text-sm text-red-800 dark:text-red-200">{{ $reservation->rejection_reason }}</p>
                            </div>
                        @endif

                        @if(in_array($reservation->status, [1, 2]))
                            <div class="mt-4 flex justify-end">
                                <form action="{{ route('reservations.cancel', $reservation) }}" method="POST"
                                      onsubmit="return confirm('Rezervasyonu iptal etmek istediginizden emin misiniz?')">
                                    @csrf
                                    <button type="submit"
                                            class="px-4 py-2 text-xs font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-lg border border-red-200 dark:border-red-800 transition-colors">
                                        Iptal Et
                                    </button>
                                </form>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endif

@push('scripts')
<script>
function selectSlot(startTime, endTime) {
    // Highlight selected slot
    document.querySelectorAll('.slot-btn').forEach(btn => {
        btn.classList.remove('border-primary', 'bg-primary/10', 'dark:bg-primary/20');
        btn.classList.add('border-green-200', 'dark:border-green-700', 'bg-green-50', 'dark:bg-green-900/20');
    });
    const selectedBtn = document.querySelector(`.slot-btn[data-start="${startTime}"]`);
    if (selectedBtn) {
        selectedBtn.classList.remove('border-green-200', 'dark:border-green-700', 'bg-green-50', 'dark:bg-green-900/20');
        selectedBtn.classList.add('border-primary', 'bg-primary/10', 'dark:bg-primary/20');
    }

    // Show form and set values
    document.getElementById('reservationForm').classList.remove('hidden');
    document.getElementById('formStartTime').value = startTime;
    document.getElementById('formEndTime').value = endTime;
    document.getElementById('selectedTimeDisplay').textContent = startTime + ' - ' + endTime;

    // Scroll to form
    document.getElementById('reservationForm').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
</script>
@endpush
@endsection