@extends('layouts.app')

@section('title', 'Book ' . $package->title)

@section('content')
<div class="min-h-screen bg-[#f5f1ea] py-12">
    <div class="max-w-4xl mx-auto px-6 lg:px-10">
        <!-- Header -->
        <div class="mb-10">
            <a href="{{ route('packages.show', $package->slug) }}" class="text-[#c9a84c] hover:text-[#0c2340] transition font-medium flex items-center gap-2 mb-6">
                <i data-feather="arrow-left" class="w-4 h-4"></i> Back to Package
            </a>
            <h1 class="font-serif text-4xl md:text-5xl text-[#0c2340] mb-2">Book Your Journey</h1>
            <p class="text-lg text-[#0c2340]/70">{{ $package->title }}</p>
        </div>

        <!-- Main Form -->
        <form method="POST" action="{{ route('bookings.store') }}" class="space-y-8">
            @csrf
            <input type="hidden" name="package_id" value="{{ $package->id }}">

            <!-- Personal Information -->
            <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 md:p-10 border border-[#0c2340]/5">
                <h2 class="font-serif text-2xl text-[#0c2340] mb-8 flex items-center gap-3">
                    <span class="w-8 h-8 rounded-full bg-[#c9a84c] text-[#0c2340] flex items-center justify-center text-sm font-bold">1</span>
                    Your Information
                </h2>

                <div class="grid md:grid-cols-2 gap-6">
                    <!-- First Name -->
                    <div>
                        <label for="first_name" class="block text-sm font-semibold text-[#0c2340] mb-3">First Name *</label>
                        <input type="text" id="first_name" name="first_name" 
                               value="{{ old('first_name') }}"
                               class="w-full px-4 py-3 border border-[#0c2340]/20 rounded-xl focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c] transition"
                               required>
                        @error('first_name')
                            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Last Name -->
                    <div>
                        <label for="last_name" class="block text-sm font-semibold text-[#0c2340] mb-3">Last Name *</label>
                        <input type="text" id="last_name" name="last_name" 
                               value="{{ old('last_name') }}"
                               class="w-full px-4 py-3 border border-[#0c2340]/20 rounded-xl focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c] transition"
                               required>
                        @error('last_name')
                            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Email -->
                    <div>
                        <label for="email" class="block text-sm font-semibold text-[#0c2340] mb-3">Email Address *</label>
                        <input type="email" id="email" name="email" 
                               value="{{ old('email', Auth::user()?->email ?? '') }}"
                               class="w-full px-4 py-3 border border-[#0c2340]/20 rounded-xl focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c] transition"
                               required>
                        @error('email')
                            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Phone -->
                    <div>
                        <label for="phone" class="block text-sm font-semibold text-[#0c2340] mb-3">Phone Number *</label>
                        <input type="tel" id="phone" name="phone" 
                               value="{{ old('phone') }}"
                               class="w-full px-4 py-3 border border-[#0c2340]/20 rounded-xl focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c] transition"
                               required>
                        @error('phone')
                            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Country -->
                    <div class="md:col-span-2">
                        <label for="country" class="block text-sm font-semibold text-[#0c2340] mb-3">Country *</label>
                        <input type="text" id="country" name="country" 
                               value="{{ old('country') }}"
                               class="w-full px-4 py-3 border border-[#0c2340]/20 rounded-xl focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c] transition"
                               required>
                        @error('country')
                            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Trip Details -->
            <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 md:p-10 border border-[#0c2340]/5">
                <h2 class="font-serif text-2xl text-[#0c2340] mb-8 flex items-center gap-3">
                    <span class="w-8 h-8 rounded-full bg-[#c9a84c] text-[#0c2340] flex items-center justify-center text-sm font-bold">2</span>
                    Trip Details
                </h2>

                <div class="grid md:grid-cols-2 gap-6">
                    <!-- Travel Date -->
                    <div>
                        <label for="travel_date" class="block text-sm font-semibold text-[#0c2340] mb-3">Preferred Travel Date *</label>
                        <input type="date" id="travel_date" name="travel_date" 
                               value="{{ old('travel_date') }}"
                               min="{{ now()->addDay()->format('Y-m-d') }}"
                               class="w-full px-4 py-3 border border-[#0c2340]/20 rounded-xl focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c] transition"
                               required>
                        @error('travel_date')
                            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Number of People -->
                    <div>
                        <label for="number_of_people" class="block text-sm font-semibold text-[#0c2340] mb-3">Number of Travelers *</label>
                        <input type="number" id="number_of_people" name="number_of_people" 
                               value="{{ old('number_of_people', 1) }}"
                               min="{{ $package->min_people }}"
                               max="{{ $package->max_people }}"
                               class="w-full px-4 py-3 border border-[#0c2340]/20 rounded-xl focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c] transition"
                               required>
                        <p class="text-xs text-[#0c2340]/60 mt-2">{{ $package->min_people }}-{{ $package->max_people }} people</p>
                        @error('number_of_people')
                            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Special Requests -->
                    <div class="md:col-span-2">
                        <label for="special_requests" class="block text-sm font-semibold text-[#0c2340] mb-3">Special Requests (Optional)</label>
                        <textarea id="special_requests" name="special_requests" rows="4"
                                  class="w-full px-4 py-3 border border-[#0c2340]/20 rounded-xl focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c] transition"
                                  placeholder="Any special dietary requirements, accessibility needs, or other requests?">{{ old('special_requests') }}</textarea>
                        @error('special_requests')
                            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Payment Method Selection -->
            <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 md:p-10 border border-[#0c2340]/5">
                <h2 class="font-serif text-2xl text-[#0c2340] mb-8 flex items-center gap-3">
                    <span class="w-8 h-8 rounded-full bg-[#c9a84c] text-[#0c2340] flex items-center justify-center text-sm font-bold">3</span>
                    Payment Method
                </h2>

                <div class="space-y-4">
                    @if($paymentSettings['flutterwave'] ?? true)
                    <!-- Flutterwave Option -->
                    <label class="flex items-center p-6 border-2 border-[#0c2340]/20 rounded-xl cursor-pointer hover:border-[#c9a84c] hover:bg-[#c9a84c]/5 transition"
                           @click="$refs.flutterwave.checked = true">
                        <input type="radio" name="payment_method" value="flutterwave" 
                               {{ old('payment_method') === 'flutterwave' ? 'checked' : '' }}
                               ref="flutterwave"
                               class="w-5 h-5 text-[#c9a84c] accent-[#c9a84c]" required>
                        <div class="ml-4">
                            <div class="font-semibold text-[#0c2340] text-lg">Flutterwave</div>
                            <p class="text-sm text-[#0c2340]/70 mt-1">Pay securely using card, bank transfer, USSD, or mobile money</p>
                            <div class="flex flex-wrap gap-2 mt-3">
                                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">💳 Card</span>
                                <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">🏦 Bank Transfer</span>
                                <span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">📱 USSD/Mobile Money</span>
                            </div>
                        </div>
                        <i data-feather="check-circle" class="w-6 h-6 text-[#c9a84c] ml-auto opacity-0 
                           @if(old('payment_method') === 'flutterwave') opacity-100 @endif"></i>
                    </label>
                    @endif

                    @if($paymentSettings['paypal'] ?? false)
                    <!-- PayPal Option -->
                    <label class="flex items-center p-6 border-2 border-[#0c2340]/20 rounded-xl cursor-pointer hover:border-[#c9a84c] hover:bg-[#c9a84c]/5 transition"
                           @click="$refs.paypal.checked = true">
                        <input type="radio" name="payment_method" value="paypal" 
                               {{ old('payment_method') === 'paypal' ? 'checked' : '' }}
                               ref="paypal"
                               class="w-5 h-5 text-[#c9a84c] accent-[#c9a84c]" required>
                        <div class="ml-4">
                            <div class="font-semibold text-[#0c2340] text-lg">PayPal</div>
                            <p class="text-sm text-[#0c2340]/70 mt-1">Pay securely using your PayPal account or credit/debit card</p>
                            <div class="flex flex-wrap gap-2 mt-3">
                                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">🌍 International</span>
                                <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">💳 Card</span>
                            </div>
                        </div>
                        <i data-feather="check-circle" class="w-6 h-6 text-[#c9a84c] ml-auto opacity-0 
                           @if(old('payment_method') === 'paypal') opacity-100 @endif"></i>
                    </label>
                    @endif

                    <!-- WhatsApp Option -->
                    <label class="flex items-center p-6 border-2 border-[#0c2340]/20 rounded-xl cursor-pointer hover:border-[#c9a84c] hover:bg-[#c9a84c]/5 transition"
                           @click="$refs.whatsapp.checked = true">
                        <input type="radio" name="payment_method" value="whatsapp" 
                               {{ old('payment_method') === 'whatsapp' || !old('payment_method') ? 'checked' : '' }}
                               ref="whatsapp"
                               class="w-5 h-5 text-[#c9a84c] accent-[#c9a84c]" required>
                        <div class="ml-4">
                            <div class="font-semibold text-[#0c2340] text-lg">WhatsApp</div>
                            <p class="text-sm text-[#0c2340]/70 mt-1">Manual payment confirmation via WhatsApp message</p>
                        </div>
                        <i data-feather="check-circle" class="w-6 h-6 text-[#c9a84c] ml-auto opacity-0 
                           @if(old('payment_method') === 'whatsapp' || !old('payment_method')) opacity-100 @endif"></i>
                    </label>

                    <!-- Offline Payment Option -->
                    <label class="flex items-center p-6 border-2 border-[#0c2340]/20 rounded-xl cursor-pointer hover:border-[#c9a84c] hover:bg-[#c9a84c]/5 transition"
                           @click="$refs.offline.checked = true">
                        <input type="radio" name="payment_method" value="offline" 
                               {{ old('payment_method') === 'offline' ? 'checked' : '' }}
                               ref="offline"
                               class="w-5 h-5 text-[#c9a84c] accent-[#c9a84c]" required>
                        <div class="ml-4">
                            <div class="font-semibold text-[#0c2340] text-lg">Offline Payment</div>
                            <p class="text-sm text-[#0c2340]/70 mt-1">Pay via bank transfer, mobile money, or check. Submit proof for admin approval.</p>
                            <div class="flex flex-wrap gap-2 mt-3">
                                <span class="text-xs bg-amber-100 text-amber-700 px-2 py-1 rounded">🏦 Bank Transfer</span>
                                <span class="text-xs bg-amber-100 text-amber-700 px-2 py-1 rounded">📱 Mobile Money</span>
                                <span class="text-xs bg-amber-100 text-amber-700 px-2 py-1 rounded">✓ Check</span>
                            </div>
                        </div>
                        <i data-feather="check-circle" class="w-6 h-6 text-[#c9a84c] ml-auto opacity-0 
                           @if(old('payment_method') === 'offline') opacity-100 @endif"></i>
                    </label>
                </div>

                @error('payment_method')
                    <span class="text-red-500 text-sm mt-3 block">{{ $message }}</span>
                @enderror
            </div>

            <!-- Price Summary -->
            <div class="bg-[#0c2340] text-white rounded-3xl shadow-xl p-8">
                <h3 class="font-serif text-2xl mb-6">Price Summary</h3>
                <div class="space-y-3 mb-6 pb-6 border-b border-white/20">
                    <div class="flex justify-between">
                        <span>Price per person:</span>
                        <span id="pricePerPerson">{{ $package->has_discount ? $package->formatted_discount_price : $package->formatted_price }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Number of travelers:</span>
                        <span id="numberOfTravelers">1</span>
                    </div>
                </div>
                <div class="flex justify-between text-2xl font-semibold">
                    <span>Total Amount:</span>
                    <span id="totalAmount">{{ $package->has_discount ? $package->formatted_discount_price : $package->formatted_price }}</span>
                </div>
            </div>

            <!-- Terms and Conditions -->
            <div class="bg-[#f5f1ea] rounded-3xl p-8 border border-[#0c2340]/10">
                <label class="flex items-start gap-4 cursor-pointer">
                    <input type="checkbox" name="agree_terms" 
                           {{ old('agree_terms') ? 'checked' : '' }}
                           class="w-5 h-5 text-[#c9a84c] accent-[#c9a84c] mt-1" required>
                    <div>
                        <p class="text-[#0c2340]/80">I agree to the <a href="#" class="text-[#c9a84c] hover:underline">terms and conditions</a> and <a href="#" class="text-[#c9a84c] hover:underline">cancellation policy</a></p>
                        @error('agree_terms')
                            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
                        @enderror
                    </div>
                </label>
            </div>

            <!-- Submit Button -->
            <div class="flex gap-4">
                <a href="{{ route('packages.show', $package->slug) }}" 
                   class="flex-1 px-6 py-4 rounded-full border-2 border-[#0c2340] text-[#0c2340] hover:bg-[#0c2340] hover:text-white transition duration-300 font-semibold text-center">
                    Cancel
                </a>
                <button type="submit" 
                        class="flex-1 px-6 py-4 rounded-full bg-[#c9a84c] text-[#0c2340] hover:bg-[#0c2340] hover:text-white transition duration-300 font-semibold">
                    Complete Booking
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const numberOfPeople = document.getElementById('number_of_people');
        const pricePerPerson = {{ $package->has_discount ? $package->discount_price : $package->price }};
        const currency = '{{ $package->currency }}';
        
        function updatePrice() {
            const count = parseInt(numberOfPeople.value) || 1;
            const total = pricePerPerson * count;
            
            document.getElementById('numberOfTravelers').textContent = count;
            document.getElementById('totalAmount').textContent = total.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }) + ' ' + currency;
        }
        
        numberOfPeople.addEventListener('change', updatePrice);
        numberOfPeople.addEventListener('input', updatePrice);

        // Payment method selection visual feedback
        const paymentMethods = document.querySelectorAll('input[name="payment_method"]');
        paymentMethods.forEach(method => {
            method.addEventListener('change', function() {
                document.querySelectorAll('label').forEach(label => {
                    const icon = label.querySelector('i[data-feather="check-circle"]');
                    const radio = label.querySelector('input[type="radio"]');
                    if (radio) {
                        if (radio.checked && icon) {
                            icon.classList.remove('opacity-0');
                        } else if (icon) {
                            icon.classList.add('opacity-0');
                        }
                    }
                });
            });
        });
    });
</script>

<style>
    [x-cloak] { display: none; }
</style>
@endsection