@extends('sitebuilder.layouts.site')

@section('title', 'Reservar Cita — ' . $service->title)

@section('content')

<x-sitebuilder.page-header eyebrow="Randevu" :title="$service->title" :description="$service->duration_minutes . ' dakika · ' . number_format($service->price, 0, ',', '.') . ' ₺ — uygun bir saat seç'" />

<section class="mx-auto max-w-4xl px-6 py-16 lg:px-8">
    @if(session('slot_error'))
        <div class="mb-8 rounded-xl border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-700">
            {{ session('slot_error') }}
        </div>
    @endif

    @if(empty($slotsByDay))
        <div class="rounded-2xl border border-ink-900/10 bg-white p-10 text-center">
            <p class="text-ink-800/70">Şu anda uygun randevu saati bulunmuyor.</p>
            <p class="mt-2 text-sm text-ink-800/50">Astrolog müsaitlik takvimini yakında güncelleyecek — WhatsApp üzerinden de ulaşabilirsin.</p>
            <a href="{{ route('sitebuilder.randevu') }}" class="mt-6 inline-block rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-6 py-3 text-sm font-semibold text-white hover:opacity-90">
                İletişim Bilgilerine Dön
            </a>
        </div>
    @else
        <div x-data="{ activeDay: '{{ array_key_first($slotsByDay) }}' }">
            <div class="flex gap-2 overflow-x-auto pb-2">
                @foreach($slotsByDay as $day => $slots)
                    @php $dayCarbon = \Carbon\Carbon::parse($day); @endphp
                    <button type="button" @click="activeDay = '{{ $day }}'"
                        :class="activeDay === '{{ $day }}' ? 'bg-brand-600 text-white border-brand-600' : 'border-ink-900/10 text-ink-800/70 hover:border-brand-300'"
                        class="flex-none rounded-xl border px-4 py-3 text-center text-sm font-medium transition">
                        <span class="block text-xs uppercase tracking-wide opacity-70">{{ $dayCarbon->translatedFormat('D') }}</span>
                        <span class="block font-display text-lg">{{ $dayCarbon->format('d.m') }}</span>
                    </button>
                @endforeach
            </div>

            @foreach($slotsByDay as $day => $slots)
                <div x-show="activeDay === '{{ $day }}'" x-cloak class="mt-8 grid grid-cols-3 gap-3 sm:grid-cols-4">
                    @foreach($slots as $slot)
                        <a href="{{ route('sitebuilder.booking.checkout', ['service' => $service->slug, 'slot' => $slot->format('Y-m-d\TH:i:s')]) }}"
                            class="rounded-xl border border-ink-900/10 bg-white py-3 text-center text-sm font-semibold text-ink-900 hover:border-brand-400 hover:bg-brand-50">
                            {{ $slot->format('H:i') }}
                        </a>
                    @endforeach
                </div>
            @endforeach
        </div>
    @endif
</section>

@endsection