@extends('public.layouts.guest')

@section('nav_explore', 'text-teal-700 font-semibold')
@section('nav_pay', 'text-teal-700 font-semibold bg-teal-50/50')
@section('title', 'How to Pay — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))
@section('meta_description', 'Payment options for ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO') . ' — GCash, Maya and bank transfer details, or simply pay on arrival.')

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
        <p class="text-teal-300 text-xs font-semibold tracking-[0.2em] uppercase mb-2">Payments</p>
        <h1 class="text-4xl font-bold text-white">How to Pay</h1>
        <p class="text-teal-200 mt-3 text-sm">Payment is due on arrival — but if you'd like to settle early, use any channel below and keep your reference.</p>
    </div>
</div>

<div class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        @php
            $methods = [];
            if (!empty($payment['gcash_number'])) {
                $methods[] = ['label' => 'GCash', 'color' => '#0084FF', 'name' => $payment['gcash_name'] ?? '', 'number' => $payment['gcash_number'], 'qr' => $payment['gcash_qr'] ?? ''];
            }
            if (!empty($payment['maya_number'])) {
                $methods[] = ['label' => 'Maya', 'color' => '#00B14F', 'name' => $payment['maya_name'] ?? '', 'number' => $payment['maya_number'], 'qr' => $payment['maya_qr'] ?? ''];
            }
            if (!empty($payment['bank_account_number'])) {
                $methods[] = ['label' => $payment['bank_name'] ?? 'Bank Transfer', 'color' => '#0f766e', 'name' => $payment['bank_account_name'] ?? '', 'number' => $payment['bank_account_number'], 'qr' => $payment['bank_qr'] ?? ''];
            }
        @endphp

        @if(empty($methods) && empty($payment['payment_note']))
        <div class="text-center text-gray-400 text-sm py-12">
            Payment details will be shared by our front desk. You may also simply pay on arrival — contact us if you have any questions.
        </div>
        @else

        @if(count($methods))
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mb-8">
            @foreach($methods as $m)
            <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 overflow-hidden">
                <div class="px-5 py-3 text-white font-semibold text-sm" style="background: {{ $m['color'] }}">{{ $m['label'] }}</div>
                <div class="p-5 text-center">
                    @if($m['qr'])
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($m['qr']) }}" alt="{{ $m['label'] }} QR"
                         class="w-40 h-40 object-contain mx-auto mb-4 rounded-lg border-[0.5px] border-gray-100">
                    @endif
                    @if($m['name'])
                    <p class="text-xs text-gray-400 uppercase tracking-wide">Account Name</p>
                    <p class="font-semibold text-gray-900 text-sm mb-2">{{ $m['name'] }}</p>
                    @endif
                    <p class="text-xs text-gray-400 uppercase tracking-wide">Number</p>
                    <p class="font-bold text-gray-900 text-lg tracking-wide select-all">{{ $m['number'] }}</p>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        @if(!empty($payment['payment_note']))
        <div class="bg-amber-50 border-[0.5px] border-amber-200 rounded-2xl p-5 text-sm text-amber-800">
            <p class="font-semibold mb-1">Important</p>
            <p class="text-amber-700 whitespace-pre-line leading-relaxed">{{ $payment['payment_note'] }}</p>
        </div>
        @endif

        @endif

        <div class="mt-10 text-center">
            <a href="{{ route('public.contact') }}"
               class="inline-flex items-center gap-2 text-teal-600 hover:text-teal-800 font-semibold text-sm">
                Questions about payment? Contact us
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </a>
        </div>
    </div>
</div>

@endsection