@extends('layouts.app')

@section('title', 'Payment Failed | 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">
        
        <!-- Failed 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;">
            <div class="absolute top-0 left-0 right-0 h-1.5 bg-red-500"></div>
            
            <div class="w-16 h-16 bg-red-100 dark:bg-red-950/50 text-red-600 dark:text-red-400 rounded-full flex items-center justify-center mx-auto mb-6 shadow-md">
                <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                </svg>
            </div>
            
            <span class="text-[10px] font-bold text-red-500 uppercase tracking-[0.2em] block mb-2">Payment Verification Failed</span>
            <h1 class="text-xl md:text-2xl font-normal text-slate-900 dark:text-white leading-tight mb-4">Transaction Could Not Be Completed</h1>
            
            @if($errors->any())
            <div class="bg-red-50 dark:bg-red-950/20 border-l-4 border-red-500 p-4 mb-6 text-xs text-red-600 dark:text-red-400 font-semibold max-w-md mx-auto text-left" style="border-radius: 0.1rem;">
                {{ $errors->first() }}
            </div>
            @else
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-lg mx-auto mb-8 font-medium leading-relaxed">
                Your card transaction was either cancelled, abandoned, or rejected by the payment processor. Don't worry, your room selections have been saved. You can retry the payment online.
            </p>
            @endif

            <!-- 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 Due</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>

            <!-- Action 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 Online Payment
                </a>
                <a href="{{ route('booking.find') }}" class="btn-pill btn-outline-gold px-8 py-3 text-xs uppercase tracking-wider font-bold">
                    Manage Booking
                </a>
            </div>
        </div>

        <!-- Help Info Card -->
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-8 shadow-sm" style="border-radius: 0.2rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
            <h2 class="text-base font-normal text-slate-900 dark:text-white mb-6">Need Assistance?</h2>
            <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-semibold">
                If your card has been debited but your booking is still showing failed, please contact our guest concierge desk via email at <a href="mailto:info@kevronapartments.com" class="text-[#2B3192] dark:text-cyan-400 hover:underline">info@kevronapartments.com</a> or WhatsApp quick chat at <a href="https://wa.me/2348082131985" class="text-[#2B3192] dark:text-cyan-400 hover:underline">+234 808 213 1985</a>. Please quote your booking reference <strong class="text-slate-900 dark:text-white">{{ $booking->booking_reference }}</strong>.
            </p>
        </div>

    </div>
</section>
@endsection