@props([
    'elderly',
    'showDonationCard' => true,
    'showShareCard' => true,
    'showRecentDonations' => true
])

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Main Content Column -->
    <div class="lg:col-span-2 space-y-8">
        <!-- Image Gallery -->
        <div class="space-y-4">
            <div class="aspect-[16/9] rounded-lg overflow-hidden border bg-white shadow-sm">
                <img 
                    src="{{ $elderly->profile_image_url ?? asset('images/placeholder.jpg') }}" 
                    alt="{{ $elderly->name }}" 
                    class="w-full h-full object-cover" 
                    id="main-image"
                >
            </div>
            
            @if((isset($elderly->additional_images) && is_iterable($elderly->additional_images) && count($elderly->additional_images) > 0) || 
                (isset($elderly->additionalImages) && is_object($elderly->additionalImages) && method_exists($elderly->additionalImages, 'count') && $elderly->additionalImages->count() > 0))
            <div class="flex gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
                <button class="w-20 h-20 rounded-md overflow-hidden border-2 border-primary flex-shrink-0 image-thumbnail shadow-sm" data-image="{{ $elderly->profile_image_url }}">
                    <img src="{{ $elderly->profile_image_url }}" alt="{{ $elderly->name }}" class="w-full h-full object-cover">
                </button>
                
                @if(isset($elderly->additional_images) && is_iterable($elderly->additional_images))
                    @foreach($elderly->additional_images as $index => $image)
                    <button class="w-20 h-20 rounded-md overflow-hidden border-2 border-transparent flex-shrink-0 image-thumbnail shadow-sm" data-image="{{ $image }}">
                        <img src="{{ $image }}" alt="{{ $elderly->name }} - {{ $index + 2 }}" class="w-full h-full object-cover">
                    </button>
                    @endforeach
                @endif
                
                @if(isset($elderly->additionalImages) && is_object($elderly->additionalImages) && method_exists($elderly->additionalImages, 'count'))
                    @foreach($elderly->additionalImages as $index => $imageObj)
                    <button class="w-20 h-20 rounded-md overflow-hidden border-2 border-transparent flex-shrink-0 image-thumbnail shadow-sm" data-image="{{ asset('storage/' . $imageObj->image_path) }}">
                        <img src="{{ asset('storage/' . $imageObj->image_path) }}" alt="{{ $elderly->name }} - {{ $index + 2 }}" class="w-full h-full object-cover">
                    </button>
                    @endforeach
                @endif
            </div>
            @endif
        </div>
        
        <!-- Profile Info -->
        <div class="space-y-6">
            <div class="flex flex-wrap gap-4 text-sm text-gray-500">
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                        <circle cx="12" cy="7" r="4" />
                    </svg>
                    <span>{{ $elderly->age ?? 'N/A' }} years old</span>
                </div>
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                        <circle cx="12" cy="10" r="3" />
                    </svg>
                    <span>{{ $elderly->location ?? 'Location not specified' }}</span>
                </div>
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
                        <line x1="3" x2="21" y1="9" y2="9" />
                        <line x1="9" x2="9" y1="21" y2="9" />
                    </svg>
                    <span>Added on {{ isset($elderly->created_at) ? $elderly->created_at->format('F j, Y') : date('F j, Y') }}</span>
                </div>
                
                @if(isset($elderly->deadline))
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10" />
                        <polyline points="12 6 12 12 16 14" />
                    </svg>
                    @php
                        $daysLeft = \Carbon\Carbon::now()->diffInDays($elderly->deadline, false);
                    @endphp
                    
                    @if($daysLeft > 0)
                        <span>{{ $daysLeft }} days left</span>
                    @elseif($daysLeft === 0)
                        <span class="text-amber-600 font-medium">Last day</span>
                    @else
                        <span class="text-red-600 font-medium">Deadline passed</span>
                    @endif
                </div>
                @endif
            </div>
            
            <!-- Needs Tags - Moved here from below -->
            <div class="mt-2">
                <h3 class="text-sm font-medium text-gray-700 mb-2">Needs</h3>
                <div class="flex flex-wrap gap-2">
                    @if(isset($elderly->needs) && is_object($elderly->needs) && method_exists($elderly->needs, 'count') && $elderly->needs->count() > 0)
                        @foreach($elderly->needs as $need)
                        <span class="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary border border-primary/20">
                            {{ $need->title }}
                        </span>
                        @endforeach
                    @elseif(isset($elderly->needs) && is_array($elderly->needs) && count($elderly->needs) > 0)
                        @foreach($elderly->needs as $need)
                        <span class="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary border border-primary/20">
                            {{ is_string($need) ? $need : (isset($need['title']) ? $need['title'] : 'Need') }}
                        </span>
                        @endforeach
                    @elseif(isset($elderly->additional_data) && isset($elderly->additional_data['needs']) && !empty($elderly->additional_data['needs']))
                        @foreach($elderly->additional_data['needs'] as $need)
                        <span class="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary border border-primary/20">
                            {{ is_string($need) ? $need : (isset($need['title']) ? $need['title'] : 'Need') }}
                        </span>
                        @endforeach
                    @else
                        <span class="text-sm text-gray-500">No specific needs listed</span>
                    @endif
                </div>
            </div>
            
            <h2 class="text-xl font-semibold">Their Story</h2>
            <div id="story-container" class="relative">
                <div id="story-content" class="text-gray-600 whitespace-pre-line">
                    @if(isset($elderly->story) && strlen($elderly->story) > 500)
                        <div id="story-preview">
                            {{ \Illuminate\Support\Str::limit($elderly->story, 500) }}
                        </div>
                        <div id="story-full" class="hidden">
                            {{ $elderly->story }}
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-white to-transparent pointer-events-none" id="story-fade"></div>
                    @else
                        {{ $elderly->story ?? 'No story available.' }}
                    @endif
                </div>
                
                @if(isset($elderly->story) && strlen($elderly->story) > 500)
                <button id="read-more-btn" class="mt-4 text-primary hover:text-primary/80 text-sm font-medium flex items-center">
                    Read Full Story
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </button>
                @endif
            </div>
        </div>
        
        <!-- Donations Section -->
        @if($showRecentDonations)
        <div class="space-y-4">
            <h2 class="text-xl font-semibold">Recent Donations</h2>
            @if(isset($elderly->recent_donations) && count($elderly->recent_donations) > 0)
            <div class="space-y-3">
                @foreach($elderly->recent_donations as $donation)
                <div class="border rounded-lg p-4">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center gap-3">
                            <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
                                    <path d="M14.5 4.5 20 10" />
                                    <path d="M15 9h5v5" />
                                </svg>
                            </div>
                            <div>
                                <p class="font-medium">{{ $donation['anonymous'] ? 'Anonymous Donor' : $donation['donor_name'] }}</p>
                                @if(isset($donation['message']) && $donation['message'])
                                <p class="text-sm text-gray-500">{{ $donation['message'] }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="font-semibold">{{ \App\Services\CurrencyService::formatAmount($donation['amount'], $donation['currency'] ?? $currency) }}
                                @if(isset($donation['is_recurring']) && $donation['is_recurring'])
                                    <span class="text-xs ml-1">(recurring)</span>
                                @endif
                            </p>
                            <p class="text-xs text-gray-500 flex items-center justify-end">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10" />
                                    <polyline points="12 6 12 12 16 14" />
                                </svg>
                                {{ isset($donation['created_at']) ? \Carbon\Carbon::parse($donation['created_at'])->format('F j, Y') : date('F j, Y') }}
                            </p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div class="border rounded-lg p-6 text-center">
                <div class="flex flex-col items-center justify-center space-y-3">
                    <div class="h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect width="20" height="14" x="2" y="5" rx="2" />
                            <line x1="2" x2="22" y1="10" y2="10" />
                        </svg>
                    </div>
                    <p class="text-gray-500">No donations yet. Be the first to support {{ $elderly->name }}!</p>
                    <a href="{{ route('donate', ['elderly_id' => $elderly->id]) }}" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                        <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">
                            <rect width="20" height="14" x="2" y="5" rx="2" />
                            <line x1="2" x2="22" y1="10" y2="10" />
                        </svg>
                        Donate Now
                    </a>
                </div>
            </div>
            @endif
        </div>
        @endif
    </div>
    
    <!-- Sidebar Column -->
    <div class="space-y-6">
        <!-- Donation Card -->
        @if($showDonationCard)
        <div class="border rounded-lg overflow-hidden sticky top-24 bg-white shadow-sm">
            <div class="p-6 space-y-6">
                <div class="space-y-2">
                    <h3 class="text-xl font-semibold">Support {{ $elderly->name }}</h3>
                    <p class="text-sm text-gray-500">
                        Your donation will directly help with 
                        @if(isset($elderly->needs) && is_object($elderly->needs) && method_exists($elderly->needs, 'count') && $elderly->needs->count() > 0)
                            {{ $elderly->needs->pluck('title')->implode(', ') }}
                        @else
                            their needs
                        @endif
                    </p>
                </div>
                
                <x-donation-progress 
                    :goalAmount="$elderly->goal_amount ?? 0" 
                    :raisedAmount="$elderly->raised_amount ?? 0" 
                    size="lg" 
                />
                
                <a 
                    href="{{ route('donate', ['elderly_id' => $elderly->id]) }}" 
                    class="inline-flex w-full items-center justify-center rounded-full bg-primary px-4 py-3 text-sm font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
                >
                    Donate Now
                </a>
            </div>
        </div>
        @endif
        
        <!-- Share Card -->
        @if($showShareCard)
        <div class="border rounded-lg overflow-hidden">
            <div class="p-6 space-y-4">
                <h3 class="font-semibold">Help by Sharing</h3>
                <p class="text-sm text-gray-500">Share {{ $elderly->name }}'s story to help reach the funding goal.</p>
                <div class="flex gap-2">
                    <button 
                        type="button" 
                        class="flex-1 inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
                        id="share-facebook"
                    >
                        <svg class="h-5 w-5 mr-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
                        </svg>
                        Share
                    </button>
                    <button 
                        type="button" 
                        class="flex-1 inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
                        id="share-twitter"
                    >
                        <svg class="h-5 w-5 mr-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                        </svg>
                        Tweet
                    </button>
                </div>
            </div>
        </div>
        @endif
        
        <!-- Related Profiles Card -->
        @if(isset($elderly->related_profiles) && count($elderly->related_profiles) > 0)
        <div class="border rounded-lg overflow-hidden">
            <div class="p-6 space-y-4">
                <h3 class="font-semibold">Similar Profiles</h3>
                <div class="space-y-4">
                    @foreach($elderly->related_profiles as $related)
                    <a href="{{ route('profiles.show', $related->id) }}" class="flex items-start gap-3 group">
                        <div class="w-16 h-16 rounded-md overflow-hidden flex-shrink-0">
                            <img src="{{ $related->profile_image_url ?? asset('images/placeholder.jpg') }}" alt="{{ $related->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-900 group-hover:text-primary transition-colors">{{ $related->name }}</h4>
                            <p class="text-sm text-gray-500">{{ $related->age ?? 'N/A' }} years • {{ $related->location ?? 'Location not specified' }}</p>
                            <div class="mt-1 text-xs text-gray-500">
                                {{ \Illuminate\Support\Str::limit($related->story ?? 'No story available', 50) }}
                            </div>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

@once
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Image gallery functionality
        const thumbnails = document.querySelectorAll('.image-thumbnail');
        const mainImage = document.getElementById('main-image');
        
        if (thumbnails.length > 0 && mainImage) {
            thumbnails.forEach(thumbnail => {
                thumbnail.addEventListener('click', function() {
                    // Update main image
                    mainImage.src = this.getAttribute('data-image');
                    
                    // Update active state
                    thumbnails.forEach(t => t.classList.remove('border-primary'));
                    thumbnails.forEach(t => t.classList.add('border-transparent'));
                    this.classList.remove('border-transparent');
                    this.classList.add('border-primary');
                });
            });
        }
        
        // Read more functionality
        const readMoreBtn = document.getElementById('read-more-btn');
        const storyPreview = document.getElementById('story-preview');
        const storyFull = document.getElementById('story-full');
        const storyFade = document.getElementById('story-fade');
        
        if (readMoreBtn && storyPreview && storyFull && storyFade) {
            readMoreBtn.addEventListener('click', function() {
                if (storyFull.classList.contains('hidden')) {
                    // Show full story
                    storyPreview.classList.add('hidden');
                    storyFull.classList.remove('hidden');
                    storyFade.classList.add('hidden');
                    readMoreBtn.innerHTML = `
                        Show Less
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m18 15-6-6-6 6" />
                        </svg>
                    `;
                } else {
                    // Show preview
                    storyPreview.classList.remove('hidden');
                    storyFull.classList.add('hidden');
                    storyFade.classList.remove('hidden');
                    readMoreBtn.innerHTML = `
                        Read Full Story
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m6 9 6 6 6-6" />
                        </svg>
                    `;
                }
            });
        }
        
        // Social sharing functionality
        const shareFacebook = document.getElementById('share-facebook');
        const shareTwitter = document.getElementById('share-twitter');
        
        if (shareFacebook) {
            shareFacebook.addEventListener('click', function() {
                const url = window.location.href;
                const title = document.title;
                window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}&t=${encodeURIComponent(title)}`, '_blank');
            });
        }
        
        if (shareTwitter) {
            shareTwitter.addEventListener('click', function() {
                const url = window.location.href;
                const title = document.title;
                window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`, '_blank');
            });
        }
    });
</script>
@endonce