@extends('layouts.app')

@section('title', 'Submit Payment Proof')

@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">
            <h1 class="font-serif text-4xl md:text-5xl text-[#0c2340] mb-2">Submit Payment Proof</h1>
            <p class="text-lg text-[#0c2340]/70">Booking Reference: {{ $booking->booking_reference }}</p>
        </div>

        @if ($errors->any())
            <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
                <p class="font-semibold text-red-800 mb-2">Please fix the following errors:</p>
                <ul class="list-disc list-inside text-red-700 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Main Form -->
        <form method="POST" action="{{ route('offline-payment.submit', $booking->booking_reference) }}" enctype="multipart/form-data" class="space-y-8">
            @csrf

            <!-- Booking 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">Booking Information</h2>
                
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-[#0c2340]/70">Package:</span>
                        <span class="font-semibold text-[#0c2340]">{{ $booking->package->title }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-[#0c2340]/70">Booking Reference:</span>
                        <span class="font-semibold text-[#0c2340]">{{ $booking->booking_reference }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-[#0c2340]/70">Total Amount:</span>
                        <span class="font-semibold text-[#0c2340] text-lg">{{ $booking->formatted_total_price }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-[#0c2340]/70">Travel Date:</span>
                        <span class="font-semibold text-[#0c2340]">{{ $booking->travel_date->format('d M Y') }}</span>
                    </div>
                </div>
            </div>

            <!-- Payment Instructions -->
            @if($offlineSettings['enabled'])
            <div class="bg-blue-50 border border-blue-200 rounded-3xl p-8">
                <h2 class="font-serif text-2xl text-blue-900 mb-6">Payment Instructions</h2>
                <p class="text-blue-800 mb-6">{{ $offlineSettings['instructions'] }}</p>

                <!-- Bank Transfer Details -->
                @if(!empty($offlineSettings['bank_details']['bank_name']))
                <div class="bg-white rounded-xl p-6 mb-6">
                    <h3 class="font-semibold text-[#0c2340] mb-4 text-lg">Bank Transfer Details</h3>
                    <div class="space-y-3">
                        <div>
                            <span class="text-[#0c2340]/70 text-sm">Bank Name:</span>
                            <p class="font-semibold text-[#0c2340]">{{ $offlineSettings['bank_details']['bank_name'] }}</p>
                        </div>
                        <div>
                            <span class="text-[#0c2340]/70 text-sm">Account Holder:</span>
                            <p class="font-semibold text-[#0c2340]">{{ $offlineSettings['bank_details']['account_holder'] }}</p>
                        </div>
                        <div>
                            <span class="text-[#0c2340]/70 text-sm">Account Number:</span>
                            <p class="font-mono text-[#0c2340]">{{ $offlineSettings['bank_details']['account_number'] }}</p>
                        </div>
                        @if($offlineSettings['bank_details']['routing_number'])
                        <div>
                            <span class="text-[#0c2340]/70 text-sm">Routing Number:</span>
                            <p class="font-mono text-[#0c2340]">{{ $offlineSettings['bank_details']['routing_number'] }}</p>
                        </div>
                        @endif
                        @if($offlineSettings['bank_details']['swift_code'])
                        <div>
                            <span class="text-[#0c2340]/70 text-sm">SWIFT Code:</span>
                            <p class="font-mono text-[#0c2340]">{{ $offlineSettings['bank_details']['swift_code'] }}</p>
                        </div>
                        @endif
                    </div>
                </div>
                @endif

                <!-- Mobile Money Details -->
                @if(!empty($offlineSettings['mobile_money_details']['provider']))
                <div class="bg-white rounded-xl p-6">
                    <h3 class="font-semibold text-[#0c2340] mb-4 text-lg">Mobile Money Details</h3>
                    <div class="space-y-3">
                        <div>
                            <span class="text-[#0c2340]/70 text-sm">Provider:</span>
                            <p class="font-semibold text-[#0c2340]">{{ $offlineSettings['mobile_money_details']['provider'] }}</p>
                        </div>
                        <div>
                            <span class="text-[#0c2340]/70 text-sm">Account Holder:</span>
                            <p class="font-semibold text-[#0c2340]">{{ $offlineSettings['mobile_money_details']['account_holder'] }}</p>
                        </div>
                        <div>
                            <span class="text-[#0c2340]/70 text-sm">Phone Number:</span>
                            <p class="font-mono text-[#0c2340]">{{ $offlineSettings['mobile_money_details']['number'] }}</p>
                        </div>
                    </div>
                </div>
                @endif
            </div>
            @endif

            <!-- Payment Submission -->
            <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">Submit Payment Proof</h2>

                <div class="space-y-6">
                    <!-- Payment Method -->
                    <div>
                        <label for="payment_method" class="block text-sm font-semibold text-[#0c2340] mb-3">Payment Method Used *</label>
                        <select name="payment_method" id="payment_method" 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]" required>
                            <option value="">Select payment method...</option>
                            <option value="bank_transfer" {{ old('payment_method') === 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                            <option value="mobile_money" {{ old('payment_method') === 'mobile_money' ? 'selected' : '' }}>Mobile Money</option>
                            <option value="check" {{ old('payment_method') === 'check' ? 'selected' : '' }}>Check</option>
                            <option value="cash" {{ old('payment_method') === 'cash' ? 'selected' : '' }}>Cash</option>
                        </select>
                        @error('payment_method')
                            <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Payment Date -->
                    <div>
                        <label for="payment_date" class="block text-sm font-semibold text-[#0c2340] mb-3">Date of Payment *</label>
                        <input type="date" name="payment_date" id="payment_date" 
                               value="{{ old('payment_date', now()->format('Y-m-d')) }}"
                               max="{{ now()->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]"
                               required>
                        @error('payment_date')
                            <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Transaction Reference -->
                    <div>
                        <label for="transaction_reference" class="block text-sm font-semibold text-[#0c2340] mb-3">Transaction Reference (Optional)</label>
                        <input type="text" name="transaction_reference" id="transaction_reference" 
                               value="{{ old('transaction_reference') }}"
                               placeholder="e.g., Transfer ID, Check #, Receipt #"
                               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]">
                        @error('transaction_reference')
                            <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Payment Proof File -->
                    <div>
                        <label for="proof_file" class="block text-sm font-semibold text-[#0c2340] mb-3">Payment Proof *</label>
                        <div class="border-2 border-dashed border-[#0c2340]/30 rounded-xl p-8 text-center cursor-pointer hover:border-[#c9a84c] hover:bg-[#c9a84c]/5 transition"
                             onclick="document.getElementById('proof_file').click()">
                            <input type="file" name="proof_file" id="proof_file" 
                                   accept=".jpg,.jpeg,.png,.pdf"
                                   class="hidden"
                                   onchange="updateFilePreview(this)">
                            <p class="text-[#0c2340] font-semibold mb-2">Click to upload or drag and drop</p>
                            <p class="text-[#0c2340]/60 text-sm">JPG, PNG, or PDF (Max 5MB)</p>
                            <p id="file-name" class="text-[#c9a84c] font-semibold mt-4 hidden"></p>
                        </div>
                        @error('proof_file')
                            <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Additional Notes -->
                    <div>
                        <label for="notes" class="block text-sm font-semibold text-[#0c2340] mb-3">Additional Notes (Optional)</label>
                        <textarea name="notes" id="notes" rows="4"
                                  placeholder="Any additional information about your payment..."
                                  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]">{{ old('notes') }}</textarea>
                        @error('notes')
                            <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Important Note -->
            <div class="bg-amber-50 border border-amber-200 rounded-3xl p-8">
                <h3 class="font-semibold text-amber-900 mb-4 flex items-center gap-2">
                    Important
                </h3>
                <ul class="text-amber-800 space-y-2 text-sm">
                    <li>• Please ensure the payment proof clearly shows the transaction details</li>
                    <li>• Your booking will be confirmed once the admin approves the payment</li>
                    <li>• You'll receive a confirmation email when your payment is reviewed</li>
                    <li>• Keep your payment proof safe for your records</li>
                </ul>
            </div>

            <!-- Submit Button -->
            <div class="flex gap-4">
                <a href="{{ route('booking.success', $booking->booking_reference) }}" 
                   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">
                    Submit Payment Proof
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function updateFilePreview(input) {
        if (input.files && input.files[0]) {
            const fileName = input.files[0].name;
            const fileNameElement = document.getElementById('file-name');
            fileNameElement.textContent = '✓ ' + fileName;
            fileNameElement.classList.remove('hidden');
        }
    }
</script>
@endsection
