@extends('layouts.app')

@section('title', 'Verifying Payment | Kevron Suites')

@section('content')
<section class="section-soft-blue py-16" style="background-color: #f7fafc; font-family: var(--font-body);">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Status Card -->
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-8 md:p-12 text-center shadow-sm relative overflow-hidden mb-8" 
             style="border-radius: 0.2rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;"
             x-data="{
                booking_reference: '{{ $booking->booking_reference }}',
                attempts: 0,
                maxAttempts: 10,
                async checkStatus() {
                    try {
                        let res = await fetch(`/api/bookings/${this.booking_reference}/status`);
                        let data = await res.json();
                        if (data.status === 'confirmed' || data.payment_status === 'paid') {
                            window.location.href = `/payments/success/${this.booking_reference}`;
                            return;
                        }
                        if (data.payment_status === 'failed') {
                            window.location.href = `/payments/failed/${this.booking_reference}`;
                            return;
                        }
                    } catch (e) {
                        console.error('Error fetching payment status');
                    }
                    
                    this.attempts++;
                    if (this.attempts < this.maxAttempts) {
                        setTimeout(() => this.checkStatus(), 3000);
                    } else {
                        // Redirect anyway to confirmation or let them retry
                        window.location.href = `/booking/confirmation/${this.booking_reference}`;
                    }
                },
                init() {
                    setTimeout(() => this.checkStatus(), 3000);
                }
             }">
            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-blue-900 via-amber-500 to-cyan-400"></div>
            
            <div class="w-16 h-16 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mx-auto mb-6"></div>
            
            <span class="text-[10px] font-bold text-amber-500 uppercase tracking-[0.2em] block mb-2">Transaction Verification in Progress</span>
            <h1 class="text-xl md:text-2xl font-normal text-slate-900 dark:text-white leading-tight mb-4">Verifying Payment Securely...</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-lg mx-auto mb-8 font-medium leading-relaxed">
                We are currently connecting to Flutterwave to confirm your transaction. This process should take only a few moments. Please do not refresh this page.
            </p>

            <!-- Details Grid -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-left border-t border-b border-slate-100 dark:border-slate-800 py-6 mb-8 text-[11px] font-semibold">
                <div>
                    <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Booking Ref</span>
                    <span class="text-slate-900 dark:text-white font-bold">{{ $booking->booking_reference }}</span>
                </div>
                <div>
                    <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Amount</span>
                    <span class="text-slate-900 dark:text-white font-bold">₦{{ number_format($booking->total_price) }}</span>
                </div>
                <div>
                    <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Check-in</span>
                    <span class="text-slate-900 dark:text-white font-bold">{{ optional($booking->check_in_date)->format('F d, Y') }}</span>
                </div>
                <div>
                    <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Check-out</span>
                    <span class="text-slate-900 dark:text-white font-bold">{{ optional($booking->check_out_date)->format('F d, Y') }}</span>
                </div>
            </div>

            <!-- Fallback Buttons -->
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
                <a href="{{ route('payments.retry', ['booking_reference' => $booking->booking_reference]) }}" class="btn-pill btn-primary px-8 py-3 text-xs uppercase tracking-wider font-bold">
                    Retry Payment
                </a>
                <a href="{{ route('booking.find') }}" class="btn-pill btn-outline-gold px-8 py-3 text-xs uppercase tracking-wider font-bold">
                    Check Dashboard
                </a>
            </div>
        </div>

    </div>
</section>
@endsection