@props([
    'profile',
    'featured' => false,
    'currency' => null,
    'currencySymbol' => null,
    'showCategory' => true
])

<div class="border rounded-lg overflow-hidden h-full flex flex-col transition-all duration-300 hover:shadow-md bg-white">
    <div class="relative">
        <div class="absolute inset-0 bg-muted/50 flex items-center justify-center" id="loading-placeholder-{{ $profile->id }}">
            <div class="w-10 h-10 rounded-full border-2 border-primary/30 border-t-primary animate-spin" aria-label="Loading profile image"></div>
        </div>
        
        <img
            src="{{ $profile->profile_image_url }}"
            alt="{{ $profile->name }}, {{ $profile->age }} years old from {{ $profile->location }}"
            class="w-full aspect-[4/3] object-cover transition-all duration-700 opacity-0 scale-110"
            id="profile-image-{{ $profile->id }}"
            data-profile-id="{{ $profile->id }}"
            loading="lazy"
            decoding="async"
            width="400"
            height="300"
        />
        
        @if($profile->featured)
            <div class="absolute top-3 left-3 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
                Featured
            </div>
        @endif
        
        @if(isset($profile->deadline) && $profile->deadline)
            @php
                $daysLeft = \Carbon\Carbon::now()->diffInDays($profile->deadline, false);
            @endphp
            
            @if($daysLeft > 0)
                <div class="absolute top-3 right-3 inline-flex items-center rounded-full bg-white/90 backdrop-blur-sm px-3 py-1 text-xs font-medium text-gray-800 shadow-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 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"></circle>
                        <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                    {{ $daysLeft }} days left
                </div>
            @elseif($daysLeft === 0)
                <div class="absolute top-3 right-3 inline-flex items-center rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-800 shadow-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 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"></circle>
                        <line x1="12" y1="8" x2="12" y2="12"></line>
                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                    </svg>
                    Last day
                </div>
            @else
                <div class="absolute top-3 right-3 inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-800 shadow-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 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"></circle>
                        <line x1="12" y1="8" x2="12" y2="12"></line>
                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                    </svg>
                    Deadline passed
                </div>
            @endif
        @endif
    </div>
    
    <div class="flex-1 p-4 flex flex-col">
        <div>
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900">{{ $profile->name }}</h3>
                <span class="text-sm text-gray-500">{{ $profile->age }} years</span>
            </div>
            
            <div class="flex items-center text-sm text-gray-500 mt-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 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>{{ $profile->location }}</span>
            </div>
        </div>
        
        <p class="text-sm text-gray-600 my-4 flex-grow">
            {{ \Illuminate\Support\Str::limit($profile->story, 120) }}
        </p>
        
        @if($profile->needs && is_object($profile->needs) && method_exists($profile->needs, 'count') && $profile->needs->count() > 0)
            <div class="flex flex-wrap gap-1 mb-3">
                @foreach($profile->needs->take(3) as $need)
                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">
                        {{ \Illuminate\Support\Str::limit($need->title, 15) }}
                    </span>
                @endforeach
                @if($profile->needs->count() > 3)
                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">
                        +{{ $profile->needs->count() - 3 }} more
                    </span>
                @endif
            </div>
        @endif
        
        <div class="mt-auto">
            <div class="mb-3">
                <div class="flex justify-between text-sm mb-1">
                    <span class="font-medium">{{ $profile->formatted_raised }} raised</span>
                    <span class="text-gray-500">of {{ $profile->formatted_goal }}</span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2">
                    <div class="bg-primary h-2 rounded-full" style="width: {{ $profile->progress_percentage }}%"></div>
                </div>
            </div>
            
            <div class="flex items-center justify-between space-x-2">
                @if($showCategory && isset($profile->category))
                    <span class="text-xs text-gray-500">{{ $profile->category }}</span>
                @else
                    <span></span>
                @endif
                <div class="flex space-x-2">
                    <a href="{{ route('profiles.show', $profile->id) }}" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-primary text-primary hover:bg-primary/10 h-9 px-3 py-2">
                        View Profile
                    </a>
                    <a href="{{ route('donate') }}?elderly_id={{ $profile->id }}" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-white hover:bg-primary/90 h-9 px-3 py-2">
                        Donate
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@once
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Debug information
        console.log('Enhanced profile card script loaded');
        const profileImages = document.querySelectorAll('img[data-profile-id]');
        
        if (!profileImages.length) return;
        
        console.log('Found ' + profileImages.length + ' profile images to load');
        
        // Immediately show all images without waiting for intersection
        profileImages.forEach(function(img) {
            const profileId = img.getAttribute('data-profile-id');
            const originalSrc = img.src;
            
            console.log('Loading image for profile ID: ' + profileId + ', src: ' + originalSrc);
            
            // Force image to be visible immediately
            img.classList.remove('opacity-0', 'scale-110');
            img.classList.add('opacity-100', 'scale-100');
            
            // Handle image load event
            img.addEventListener('load', function() {
                console.log('Successfully loaded image for profile ID: ' + profileId);
                const placeholder = document.getElementById('loading-placeholder-' + profileId);
                if (placeholder) placeholder.classList.add('hidden');
            });
            
            // Handle image error event
            img.addEventListener('error', function() {
                console.error('Failed to load image for profile ID: ' + profileId + ', src: ' + originalSrc);
                
                // Try loading with a modified path
                const modifiedSrc = originalSrc.replace('/storage/', '/storage/elderly/profiles/');
                console.log('Attempting with modified path: ' + modifiedSrc);
                
                if (originalSrc !== modifiedSrc) {
                    this.src = modifiedSrc;
                    return;
                }
                
                const placeholder = document.getElementById('loading-placeholder-' + profileId);
                if (placeholder) placeholder.classList.add('hidden');
                
                // Set fallback image on error
                if (this.src !== '{{ asset("images/placeholder.jpg") }}') {
                    this.src = '{{ asset("images/placeholder.jpg") }}';
                }
            });
        });
    });
</script>
@endonce