@extends('sitebuilder.layouts.site')

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

@section('content')

<x-sitebuilder.page-header eyebrow="Son Adım" title="Confirmar Cita" description="Bilgilerini kontrol et ve randevunu tamamla." />

<section class="mx-auto max-w-3xl px-6 py-16 lg:px-8">
    <div class="grid grid-cols-1 gap-10 lg:grid-cols-5">
        <div class="lg:col-span-2">
            <div class="rounded-2xl border border-ink-900/10 bg-white p-6">
                <p class="text-xs uppercase tracking-wide text-ink-800/40">Hizmet</p>
                <p class="mt-1 font-display text-lg font-semibold text-ink-900">{{ $service->title }}</p>

                <p class="mt-4 text-xs uppercase tracking-wide text-ink-800/40">Tarih &amp; Saat</p>
                <p class="mt-1 font-semibold text-ink-900">{{ $slot->translatedFormat('d F Y, l') }}</p>
                <p class="text-ink-800/70">{{ $slot->format('H:i') }} · {{ $service->duration_minutes }} dakika</p>

                <div class="mt-6 border-t border-ink-900/5 pt-4">
                    <p class="text-xs uppercase tracking-wide text-ink-800/40">Tutar</p>
                    <p class="mt-1 font-display text-2xl font-semibold text-brand-700">{{ number_format($service->price, 0, ',', '.') }} ₺</p>
                </div>
            </div>

            <div class="mt-4 rounded-xl border border-gold-500/20 bg-gold-500/5 px-4 py-3 text-xs text-gold-700">
                Bu demo sürümde ödeme adımı PayTR entegrasyonu tamamlanana kadar bir onay adımı olarak çalışır —
                randevun bu saati rezerve eder, kart bilgisi alınmaz.
            </div>
        </div>

        <div class="lg:col-span-3">
            <form method="POST" action="{{ route('sitebuilder.booking.confirm', ['service' => $service->slug, 'slot' => $slot->format('Y-m-d\TH:i:s')]) }}" class="space-y-5">
                @csrf

                <div>
                    <label class="text-xs font-medium text-ink-800/60">Ad Soyad</label>
                    <input type="text" name="customer_name" value="{{ old('customer_name') }}" required
                        class="mt-2 w-full rounded-xl border border-ink-900/10 bg-white px-4 py-3 text-sm text-ink-900 focus:border-brand-400 focus:outline-none">
                    @error('customer_name') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="text-xs font-medium text-ink-800/60">E-posta</label>
                    <input type="email" name="customer_email" value="{{ old('customer_email') }}" required
                        class="mt-2 w-full rounded-xl border border-ink-900/10 bg-white px-4 py-3 text-sm text-ink-900 focus:border-brand-400 focus:outline-none">
                    @error('customer_email') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="text-xs font-medium text-ink-800/60">Telefon</label>
                    <input type="text" name="customer_phone" value="{{ old('customer_phone') }}"
                        class="mt-2 w-full rounded-xl border border-ink-900/10 bg-white px-4 py-3 text-sm text-ink-900 focus:border-brand-400 focus:outline-none">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="text-xs font-medium text-ink-800/60">Doğum Tarihi</label>
                        <input type="date" name="birth_date" value="{{ old('birth_date') }}"
                            class="mt-2 w-full rounded-xl border border-ink-900/10 bg-white px-4 py-3 text-sm text-ink-900 focus:border-brand-400 focus:outline-none">
                    </div>
                    <div>
                        <label class="text-xs font-medium text-ink-800/60">Doğum Saati</label>
                        <input type="time" name="birth_time" value="{{ old('birth_time') }}"
                            class="mt-2 w-full rounded-xl border border-ink-900/10 bg-white px-4 py-3 text-sm text-ink-900 focus:border-brand-400 focus:outline-none">
                    </div>
                </div>

                <div>
                    <label class="text-xs font-medium text-ink-800/60">Doğum Yeri</label>
                    <input type="text" name="birth_place" value="{{ old('birth_place') }}"
                        class="mt-2 w-full rounded-xl border border-ink-900/10 bg-white px-4 py-3 text-sm text-ink-900 focus:border-brand-400 focus:outline-none">
                </div>

                <div>
                    <label class="text-xs font-medium text-ink-800/60">Eklemek istediğin bir not var mı?</label>
                    <textarea name="message" rows="3"
                        class="mt-2 w-full rounded-xl border border-ink-900/10 bg-white px-4 py-3 text-sm text-ink-900 focus:border-brand-400 focus:outline-none">{{ old('message') }}</textarea>
                </div>

                <button type="submit" class="w-full rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-6 py-3.5 text-sm font-semibold text-white shadow-glow hover:opacity-90">
                    Randevuyu Onayla
                </button>
            </form>
        </div>
    </div>
</section>

@endsection