@extends('public.layouts.app')

@section('content')
<main class="flex-grow w-full max-w-md px-6 pt-12 pb-32 mx-auto">
    <div class="grid items-start grid-cols-1 gap-12 lg:grid-cols-12">
        <!-- Success Message & Next Steps -->
        <div class="space-y-8 lg:col-span-9">
            <!-- Success Header -->
            <div class="space-y-4">
                <div class="inline-flex items-center justify-center w-20 h-20 mb-4 rounded-full bg-primary/10">
                    <span class="text-6xl material-symbols-outlined text-primary">check_circle</span>
                </div>
                <h1 class="text-4xl leading-tight font-headline md:text-5xl text-primary">
                    @if($reservation->status === 'confirmed')
                    Rezervasyonunuz <span class="italic">Onaylandı!</span>
                    @else
                    Rezervasyonunuz <span class="italic">Alındı!</span>
                    @endif
                </h1>
                <p class="max-w-xl text-lg leading-relaxed text-on-surface-variant">
                    @if($reservation->paid_amount > 0)
                    Rezervasyonunuz başarıyla oluşturuldu ve ödemeniz alındı. Kısa süre içinde e-posta adresinize onay
                    bilgileri gönderilecektir.
                    @else
                    Rezervasyonunuz başarıyla oluşturuldu. Kısa süre içinde e-posta adresinize onay bilgileri
                    gönderilecektir.
                    @endif
                </p>
            </div>

            <!-- Reservation Details -->
            <div class="p-8 space-y-6 bg-surface-container-low rounded-xl">
                <h2 class="text-2xl font-headline text-primary">Rezervasyon Detayları</h2>

                <div class="space-y-4">
                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">confirmation_number</span>
                        <div>
                            <p class="font-medium text-on-surface">Onay Kodu</p>
                            <p class="text-2xl font-bold text-primary">{{ $reservation->confirmation_code }}</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">calendar_today</span>
                        <div>
                            <p class="font-medium text-on-surface">Tarih ve Saat</p>
                            <p class="text-sm text-on-surface-variant">
                                {{ \Carbon\Carbon::parse($reservation->reservation_date)->format('d F Y') }} -
                                {{ \Carbon\Carbon::parse($reservation->reservation_time)->format('H:i') }}
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">groups</span>
                        <div>
                            <p class="font-medium text-on-surface">Kişi Sayısı</p>
                            <p class="text-sm text-on-surface-variant">{{ $reservation->party_size }} Kişi</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">email</span>
                        <div>
                            <p class="font-medium text-on-surface">E-posta Adresi</p>
                            <p class="text-sm text-on-surface-variant">{{ $reservation->customer_email }}</p>
                        </div>
                    </div>

                    @if($reservation->paid_amount > 0)
                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">payments</span>
                        <div>
                            <p class="font-medium text-on-surface">Ön Ödeme</p>
                            <p class="text-sm text-on-surface-variant">₺{{ number_format($reservation->paid_amount, 2)
                                }}</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Next Steps Section -->
            <div class="p-8 space-y-6 bg-surface-container-low rounded-xl">
                <h2 class="text-2xl font-headline text-primary">Sonraki Adımlar</h2>
                <div class="space-y-4">
                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">email</span>
                        <div>
                            <p class="font-medium text-on-surface">E-posta Onayı</p>
                            @if($reservation->status === 'confirmed')
                            <p class="text-sm text-on-surface-variant">Rezervasyon detayları e-posta adresinize
                                gönderildi</p>
                            @else
                            <p class="text-sm text-on-surface-variant">Rezervasyonunuz onay bekliyor. Onaylandıktan
                                sonra
                                e-posta ile bilgilendirileceksiniz.</p>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">notifications</span>
                        <div>
                            <p class="font-medium text-on-surface">Hatırlatma</p>
                            <p class="text-sm text-on-surface-variant">Rezervasyon tarihinden 24 saat önce hatırlatma
                                alacaksınız</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">confirmation_number</span>
                        <div>
                            <p class="font-medium text-on-surface">Restorana Varış</p>
                            <p class="text-sm text-on-surface-variant">Restorana vardığınızda rezervasyon kodunuzu
                                belirtiniz</p>
                        </div>
                    </div>
                </div>
            </div>

            @php
            $settings = $reservation->restaurant->settings;
            $showBankInfo = $settings->reservation_settings['show_bank_info'] ?? false;
            $bankName = $settings->reservation_settings['bank_name'] ?? '';
            $accountName = $settings->reservation_settings['account_name'] ?? '';
            $iban = $settings->reservation_settings['iban'] ?? '';
            @endphp

            @if($showBankInfo && ($bankName || $iban))
            <!-- Bank Information -->
            <div class="p-8 space-y-6 bg-surface-container-low rounded-xl" x-data="{ copiedField: null }">
                <h2 class="text-2xl font-headline text-primary">Banka Bilgileri</h2>
                <p class="text-sm text-on-surface-variant">Aşağıdaki banka hesabına ön ödeme yapabilirsiniz.</p>
                <div class="space-y-3">
                    @if($bankName)
                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">account_balance</span>
                        <div class="flex-1">
                            <p class="font-medium text-on-surface">Banka</p>
                            <p class="text-sm text-on-surface-variant">{{ $bankName }}</p>
                        </div>
                        <button type="button"
                            @click="navigator.clipboard.writeText('{{ $bankName }}'); copiedField = 'bank'; setTimeout(() => copiedField = null, 2000)"
                            class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors flex items-center gap-1"
                            :class="copiedField === 'bank' ? 'bg-green-100 text-green-700' : 'bg-surface-container text-on-surface hover:bg-surface-container-high'">
                            <span class="material-symbols-outlined text-sm"
                                x-text="copiedField === 'bank' ? 'check' : 'content_copy'"></span>
                            <span x-text="copiedField === 'bank' ? 'Kopyalandı!' : 'Kopyala'"></span>
                        </button>
                    </div>
                    @endif
                    @if($accountName)
                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">person</span>
                        <div class="flex-1">
                            <p class="font-medium text-on-surface">Hesap Adı</p>
                            <p class="text-sm text-on-surface-variant">{{ $accountName }}</p>
                        </div>
                        <button type="button"
                            @click="navigator.clipboard.writeText('{{ $accountName }}'); copiedField = 'account'; setTimeout(() => copiedField = null, 2000)"
                            class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors flex items-center gap-1"
                            :class="copiedField === 'account' ? 'bg-green-100 text-green-700' : 'bg-surface-container text-on-surface hover:bg-surface-container-high'">
                            <span class="material-symbols-outlined text-sm"
                                x-text="copiedField === 'account' ? 'check' : 'content_copy'"></span>
                            <span x-text="copiedField === 'account' ? 'Kopyalandı!' : 'Kopyala'"></span>
                        </button>
                    </div>
                    @endif
                    @if($iban)
                    <div class="flex items-start gap-4">
                        <span class="mt-1 material-symbols-outlined text-secondary">credit_card</span>
                        <div class="flex-1">
                            <p class="font-medium text-on-surface">IBAN</p>
                            <p class="text-sm font-mono font-semibold text-on-surface-variant">{{ $iban }}</p>
                        </div>
                        <button type="button"
                            @click="navigator.clipboard.writeText('{{ $iban }}'); copiedField = 'iban'; setTimeout(() => copiedField = null, 2000)"
                            class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors flex items-center gap-1"
                            :class="copiedField === 'iban' ? 'bg-green-100 text-green-700' : 'bg-surface-container text-on-surface hover:bg-surface-container-high'">
                            <span class="material-symbols-outlined text-sm"
                                x-text="copiedField === 'iban' ? 'check' : 'content_copy'"></span>
                            <span x-text="copiedField === 'iban' ? 'Kopyalandı!' : 'Kopyala'"></span>
                        </button>
                    </div>
                    @endif
                </div>

                <!-- Copy All Button -->
                @if($bankName && $accountName && $iban)
                <div class="pt-4 border-t border-outline-variant">
                    <button type="button"
                        @click="const allInfo = 'Banka: {{ $bankName }}\nHesap Adı: {{ $accountName }}\nIBAN: {{ $iban }}'; navigator.clipboard.writeText(allInfo); copiedField = 'all'; setTimeout(() => copiedField = null, 2000)"
                        class="w-full px-4 py-3 text-sm font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
                        :class="copiedField === 'all' ? 'bg-green-500 text-white' : 'bg-primary text-on-primary hover:bg-primary-hover'">
                        <span class="material-symbols-outlined"
                            x-text="copiedField === 'all' ? 'check_circle' : 'content_copy'"></span>
                        <span
                            x-text="copiedField === 'all' ? 'Tüm Bilgiler Kopyalandı!' : 'Tüm Banka Bilgilerini Kopyala'"></span>
                    </button>
                </div>
                @endif

                <p class="text-xs text-on-surface-variant italic">Açıklama kısmına rezervasyon kodunuzu (<strong>{{
                        $reservation->confirmation_code }}</strong>) yazmayı unutmayınız.</p>
            </div>
            @endif

            <!-- Action Buttons -->
            <div class="flex flex-col gap-4 pt-4">
                <a href="{{ route('public.reservation.show', $reservation->restaurant->slug) }}"
                    class="flex-1 inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-br from-[#00261e] to-[#0b3d33] text-white rounded-full font-label text-sm font-semibold uppercase tracking-widest hover:scale-[1.02] active:scale-95 transition-all duration-300 shadow-lg">
                    <span class="text-sm material-symbols-outlined">add</span>
                    YENİ REZERVASYON YAP
                </a>
            </div>
        </div>
    </div>
</main>
@endsection