@extends('public.layouts.guest')

@section('title', 'Choose Payment — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        <a href="{{ route('public.book.room', urlencode($pending['room_type'])) }}?check_in={{ $pending['check_in'] }}&check_out={{ $pending['check_out'] }}&guests={{ $pending['pax'] }}"
           class="inline-flex items-center gap-1.5 text-teal-300 hover:text-white text-sm mb-4 transition-colors">
            <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="M15 19l-7-7 7-7"/></svg>
            Back to Booking Form
        </a>
        <h1 class="text-3xl font-bold text-white">Choose Payment Method</h1>
        <p class="text-teal-200 mt-1 text-sm">One last step — select how you'd like to pay</p>
    </div>
</div>

<div class="py-12 bg-gray-50 min-h-screen">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">

        @if($errors->any())
        <div class="mb-6 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">
            {{ $errors->first() }}
        </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            {{-- Payment method selection --}}
            <div class="lg:col-span-2">
                <form method="POST" action="{{ route('public.book.payment.store') }}">
                    @csrf

                    <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-sm p-6 mb-6">
                        <h2 class="text-base font-semibold text-gray-900 mb-1">Payment Options</h2>
                        <p class="text-xs text-gray-400 mb-5">Online payment coming soon. Pay on Arrival is the only option available at this time.</p>

                        <div class="space-y-3">

                            {{-- ===== PAY ON ARRIVAL — ACTIVE ===== --}}
                            <label class="flex items-center gap-4 p-4 rounded-xl border-[0.5px] border-teal-300 bg-teal-50 cursor-pointer ring-2 ring-teal-400/30">
                                <input type="radio" name="payment_option" value="pay_on_arrival" checked
                                       class="w-4 h-4 accent-teal-600 flex-shrink-0">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2 flex-wrap">
                                        <span class="font-semibold text-gray-900 text-sm">Pay on Arrival</span>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-teal-100 text-teal-700 border-[0.5px] border-teal-200">
                                            Available
                                        </span>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-0.5">Pay in full at the hotel upon check-in. Cash and other payment options accepted at the property.</p>
                                </div>
                                <div class="flex-shrink-0">
                                    <svg class="w-8 h-8 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                                    </svg>
                                </div>
                            </label>

                            {{-- ===== LOCKED METHODS ===== --}}
                            @php
                            $lockedMethods = [
                                ['label' => 'GCash',         'icon' => 'mobile'],
                                ['label' => 'Maya',          'icon' => 'mobile'],
                                ['label' => 'Credit Card',   'icon' => 'card'],
                                ['label' => 'Debit Card',    'icon' => 'card'],
                                ['label' => 'Bank Transfer', 'icon' => 'bank'],
                                ['label' => 'Check',         'icon' => 'check'],
                            ];
                            @endphp

                            @foreach($lockedMethods as $method)
                            <div class="flex items-center gap-4 p-4 rounded-xl border-[0.5px] border-gray-200 bg-gray-50 opacity-60 cursor-not-allowed select-none">
                                <div class="w-4 h-4 flex-shrink-0 rounded-full border-2 border-gray-300 bg-white"></div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2 flex-wrap">
                                        <span class="font-semibold text-gray-500 text-sm">{{ $method['label'] }}</span>
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-gray-100 text-gray-400 border-[0.5px] border-gray-200">
                                            Coming Soon
                                        </span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-0.5">Online {{ $method['label'] }} payments will be available soon.</p>
                                </div>
                                <div class="flex-shrink-0">
                                    @if($method['icon'] === 'mobile')
                                    <svg class="w-7 h-7 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                                    </svg>
                                    @elseif($method['icon'] === 'card')
                                    <svg class="w-7 h-7 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                                    </svg>
                                    @elseif($method['icon'] === 'bank')
                                    <svg class="w-7 h-7 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/>
                                    </svg>
                                    @else
                                    <svg class="w-7 h-7 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                    </svg>
                                    @endif
                                </div>
                            </div>
                            @endforeach

                        </div>
                    </div>

                    {{-- Notice --}}
                    <div class="bg-amber-50 border-[0.5px] border-amber-200 rounded-xl p-4 mb-6 flex gap-3">
                        <svg class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <p class="text-amber-700 text-xs leading-relaxed">
                            By confirming, you agree to pay the full amount on arrival. Your booking will be held as <strong>pending</strong> until confirmed by our staff. We may contact you to verify your reservation.
                        </p>
                    </div>

                    <button type="submit"
                            class="w-full bg-teal-600 hover:bg-teal-700 text-white font-semibold py-4 rounded-xl text-sm transition-colors shadow-sm">
                        Confirm Booking — Pay on Arrival
                    </button>
                </form>
            </div>

            {{-- Booking summary sidebar --}}
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-sm overflow-hidden sticky top-24">

                    <div class="bg-teal-600 px-5 py-4">
                        <p class="text-teal-200 text-xs font-semibold uppercase tracking-wider mb-0.5">Booking Summary</p>
                        <p class="text-white font-bold text-lg">{{ $pending['room_type'] }}</p>
                    </div>

                    <div class="p-5 space-y-3 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500">Guest</span>
                            <span class="font-medium text-gray-900 text-right max-w-[160px] truncate">{{ $pending['guest_name'] }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Check-in</span>
                            <span class="font-medium">{{ \Carbon\Carbon::parse($pending['check_in'])->format('M d, Y') }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Check-out</span>
                            <span class="font-medium">{{ \Carbon\Carbon::parse($pending['check_out'])->format('M d, Y') }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Duration</span>
                            <span class="font-medium">{{ $pending['nights'] }} night{{ $pending['nights'] !== 1 ? 's' : '' }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Guests</span>
                            <span class="font-medium">{{ $pending['pax'] }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">Rate / night</span>
                            <span class="font-medium">₱{{ number_format($pending['room_rate']) }}</span>
                        </div>
                        <div class="border-t border-gray-100 pt-3 flex justify-between">
                            <span class="font-semibold text-gray-800">Total</span>
                            <span class="font-bold text-teal-600 text-base">₱{{ number_format($pending['amount']) }}</span>
                        </div>
                    </div>

                    <div class="bg-gray-50 px-5 py-3 text-xs text-gray-400 text-center border-t border-gray-100">
                        Amount due on arrival at the hotel
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@endsection