@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">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900">Elderly Profiles</h1>
            <p class="mt-2 text-lg text-gray-600">Discover and support elderly individuals in need of assistance</p>
        </div>

        <!-- Advanced Filter Component -->
        <x-elderly.advanced-filter 
            :categories="[
                'Medical Care',
                'Housing',
                'Food Security',
                'Mobility',
                'Social Support',
                'Mental Health',
                'General Assistance'
            ]"
            :locations="$locations"
            :currentSort="request('sort', 'newest')"
            :minAge="$minAge"
            :maxAge="$maxAge"
            :needs="$allNeeds ?? []"
        />

        <!-- Results Section -->
        <div>
            <div class="flex justify-between items-center mb-4">
                <p class="text-sm text-gray-500">
                    Showing <span class="font-medium">{{ $elderlyProfiles->firstItem() ?? 0 }}</span> to 
                    <span class="font-medium">{{ $elderlyProfiles->lastItem() ?? 0 }}</span> of 
                    <span class="font-medium">{{ $elderlyProfiles->total() }}</span> profiles
                </p>
                <div class="flex items-center">
                    <span class="text-sm text-gray-500 mr-2">View:</span>
                    <div class="flex border rounded-md">
                        <button 
                            type="button" 
                            id="grid-view-btn" 
                            class="px-3 py-1.5 text-sm font-medium bg-primary text-white rounded-l-md"
                            aria-label="Grid view"
                        >
                            <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">
                                <rect x="3" y="3" width="7" height="7"></rect>
                                <rect x="14" y="3" width="7" height="7"></rect>
                                <rect x="14" y="14" width="7" height="7"></rect>
                                <rect x="3" y="14" width="7" height="7"></rect>
                            </svg>
                        </button>
                        <button 
                            type="button" 
                            id="list-view-btn" 
                            class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-white rounded-r-md hover:bg-gray-50"
                            aria-label="List view"
                        >
                            <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">
                                <line x1="8" y1="6" x2="21" y2="6"></line>
                                <line x1="8" y1="12" x2="21" y2="12"></line>
                                <line x1="8" y1="18" x2="21" y2="18"></line>
                                <line x1="3" y1="6" x2="3.01" y2="6"></line>
                                <line x1="3" y1="12" x2="3.01" y2="12"></line>
                                <line x1="3" y1="18" x2="3.01" y2="18"></line>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            @if($elderlyProfiles->isEmpty())
                <div class="bg-white rounded-lg shadow-sm p-8 text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"></path>
                        <path d="M6 15.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"></path>
                        <path d="M18 20a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"></path>
                        <path d="M8.5 10.5 15 8"></path>
                        <path d="M15.5 15 9 11.5"></path>
                    </svg>
                    <h3 class="mt-4 text-xl font-medium text-gray-900">No profiles found</h3>
                    <p class="mt-2 text-gray-500">Try adjusting your search or filter criteria</p>
                    <a href="{{ route('profiles') }}" class="mt-4 inline-flex items-center text-primary hover:text-primary/80">
                        <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="M3 12h18"></path>
                            <path d="M3 6h18"></path>
                            <path d="M3 18h18"></path>
                        </svg>
                        Clear all filters
                    </a>
                </div>
            @else
                <!-- Grid View (Default) -->
                <div id="grid-view" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    @foreach($elderlyProfiles as $profile)
                        <x-elderly.enhanced-profile-card 
                            :profile="$profile" 
                            :currency="$currency" 
                            :currencySymbol="$currencySymbol" 
                        />
                    @endforeach
                </div>

                <!-- List View (Hidden by Default) -->
                <div id="list-view" class="hidden space-y-4">
                    @foreach($elderlyProfiles as $profile)
                        <div class="bg-white border rounded-lg overflow-hidden flex flex-col md:flex-row">
                            <div class="md:w-1/3 lg:w-1/4">
                                <div class="relative aspect-video md:aspect-square h-full">
                                    <img 
                                        src="{{ $profile->profile_image_url }}" 
                                        alt="{{ $profile->name }}" 
                                        class="w-full h-full object-cover"
                                    >
                                    @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
                                </div>
                            </div>
                            <div class="p-4 md:p-6 flex-1 flex flex-col">
                                <div class="flex justify-between items-start mb-2">
                                    <div>
                                        <h3 class="text-lg font-semibold text-gray-900">{{ $profile->name }}</h3>
                                        <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>
                                            <span class="mx-2">•</span>
                                            <span>{{ $profile->age }} years</span>
                                        </div>
                                    </div>
                                    <span class="text-sm text-gray-500">{{ $profile->category }}</span>
                                </div>
                                
                                <p class="text-sm text-gray-600 mb-4 flex-grow">
                                    {{ \Illuminate\Support\Str::limit($profile->story, 200) }}
                                </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 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">
                                                {{ $need->title }}
                                            </span>
                                        @endforeach
                                    </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 justify-end">
                                        <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 bg-primary text-white hover:bg-primary/90 h-9 px-4 py-2">
                                            View Profile
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-8">
                    {{ $elderlyProfiles->withQueryString()->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // View toggle functionality
        const gridViewBtn = document.getElementById('grid-view-btn');
        const listViewBtn = document.getElementById('list-view-btn');
        const gridView = document.getElementById('grid-view');
        const listView = document.getElementById('list-view');
        
        if (gridViewBtn && listViewBtn && gridView && listView) {
            // Check if there's a saved preference in localStorage
            const savedView = localStorage.getItem('elderly_profiles_view');
            if (savedView === 'list') {
                gridView.classList.add('hidden');
                listView.classList.remove('hidden');
                gridViewBtn.classList.remove('bg-primary', 'text-white');
                gridViewBtn.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
                listViewBtn.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
                listViewBtn.classList.add('bg-primary', 'text-white');
            }
            
            gridViewBtn.addEventListener('click', function() {
                gridView.classList.remove('hidden');
                listView.classList.add('hidden');
                gridViewBtn.classList.add('bg-primary', 'text-white');
                gridViewBtn.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
                listViewBtn.classList.remove('bg-primary', 'text-white');
                listViewBtn.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
                localStorage.setItem('elderly_profiles_view', 'grid');
            });
            
            listViewBtn.addEventListener('click', function() {
                gridView.classList.add('hidden');
                listView.classList.remove('hidden');
                gridViewBtn.classList.remove('bg-primary', 'text-white');
                gridViewBtn.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
                listViewBtn.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
                listViewBtn.classList.add('bg-primary', 'text-white');
                localStorage.setItem('elderly_profiles_view', 'list');
            });
        }
    });
</script>
@endpush
@endsection