@extends('layouts.app')

@section('content')
<div class="pt-24">
    <div class="container mx-auto px-4 md:px-6 py-8">
        <a href="{{ $elderly ? route('profiles.show', $elderly->id) : route('profiles') }}" class="inline-flex items-center text-sm font-medium hover:text-primary mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="m15 18-6-6 6-6" />
            </svg>
            {{ $elderly ? "Back to {$elderly->name}'s Profile" : 'Back to Profiles' }}
        </a>
        
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-8">
                <h1 class="text-3xl md:text-4xl font-bold mb-4">
                    {{ $elderly ? "Support {$elderly->name}" : 'Make a Donation' }}
                </h1>
                <p class="text-muted-foreground max-w-2xl mx-auto">
                    @if($elderly)
                        Your donation will directly help {{ $elderly->name }} with their needs.
                    @else
                        Your generosity helps elderly individuals in need. Thank you for your support!
                    @endif
                </p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Donation Form -->
                <div class="lg:col-span-2">
                    <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
                        <div class="p-6">
                            <x-donation.form :elderly="$elderly" :currency="$currency" :suggestedAmounts="$suggestedAmounts" :paymentMethods="$paymentMethods" />
                        </div>
                    </div>
                </div>
                
                <!-- Donation Summary -->
                <div class="lg:col-span-1">
                    <x-donation.donation-summary :elderly="$elderly" :currencySymbol="$currencySymbol" />
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Initialize currency variables for the donation form
    window.currencyCode = "{{ $currency }}";
    window.currencySymbol = "{{ $currencySymbol }}";
    window.hasUserPreference = {{ $hasUserPreference ? 'true' : 'false' }};

    @if(isset($userPreferredCurrency) && $userPreferredCurrency)
        window.userPreferredCurrency = "{{ $userPreferredCurrency }}";
        console.log(`Setting user preferred currency from server: {{ $userPreferredCurrency }}`);
    @elseif(Auth::check() && Auth::user()->currency)
        window.userPreferredCurrency = "{{ Auth::user()->currency }}";
        console.log(`Setting user preferred currency from Auth: {{ Auth::user()->currency }}`);
    @endif
</script>
<!-- Load donation form script -->
<script src="{{ asset('js/donation-form.js') }}"></script>
@endpush
@endsection