@extends('layouts.app')

@section('content')
<div class="pt-24 pb-12 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="mb-8">
            <a href="{{ route('profiles') }}" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-primary">
                <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4" 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>
                Back to all profiles
            </a>
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mt-4">{{ $elderly->name }}</h1>
        </div>

        <!-- Enhanced Profile Detail Component -->
        <x-elderly.enhanced-profile-detail 
            :elderly="$elderly" 
            :showDonationCard="true" 
            :showShareCard="true"
            :showRecentDonations="true"
        />

        <!-- Call to Action Section -->
        <div class="mt-12 bg-white border rounded-lg p-6 md:p-8">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">Want to help more elderly individuals?</h2>
                <p class="text-lg text-gray-600 mb-6">
                    Your support can make a significant difference in the lives of elderly individuals in need.
                    Consider exploring more profiles or making a donation today.
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="{{ route('profiles') }}" class="inline-flex items-center justify-center rounded-md bg-white px-6 py-3 text-base font-medium text-primary shadow-sm border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                        View All Profiles
                    </a>
                    <a href="{{ route('donate', ['elderly_id' => $elderly->id]) }}" class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                        Donate Now
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle currency display
        const userCurrency = "{{ $currency }}";
        const currencySymbol = "{{ $currencySymbol }}";
        
        // Make sure the currency is respected throughout the page
        if (window.updateCurrencyDisplay) {
            window.updateCurrencyDisplay(userCurrency, currencySymbol);
        }
        
        // Set global currency preference for any JavaScript that needs it
        window.userPreferredCurrency = userCurrency;
    });
</script>
@endpush
@endsection