@php
use App\Services\CurrencyService;
@endphp

@extends('layouts.app')

@section('title', $elderly->title)

@section('content')
<div class="bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Profile Header -->
        <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-8">
            <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">{{ $elderly->name }}</h1>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">{{ $elderly->age }} years old • {{ $elderly->location }}</p>
                </div>
                @if($elderly->status === 'pending')
                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                        Pending Approval
                    </span>
                @elseif($elderly->status === 'rejected')
                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800">
                        Rejected
                    </span>
                @endif
            </div>
            
            <!-- Profile Image and Donation Progress -->
            <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Profile Image -->
                    <div class="md:col-span-2">
                        <img src="{{ $elderly->profile_image_url }}" alt="{{ $elderly->name }}" class="w-full h-auto rounded-lg shadow-md object-cover" style="max-height: 400px;">
                        
                        <!-- Additional Images Gallery -->
                        @if($elderly->additionalImages && $elderly->additionalImages->count() > 0)
                            <div class="mt-4 grid grid-cols-4 gap-2">
                                @foreach($elderly->additionalImages as $image)
                                    <img src="{{ asset('storage/' . $image->image_path) }}" alt="Additional image" class="w-full h-24 object-cover rounded shadow cursor-pointer hover:opacity-90">
                                @endforeach
                            </div>
                        @endif
                    </div>
                    
                    <!-- Donation Progress -->
                    <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                        <h3 class="text-lg font-medium text-gray-900">Donation Progress</h3>
                        
                        <div class="mt-4">
                            <div class="flex justify-between mb-1">
                                <span class="text-base font-medium text-gray-700">{{ $elderly->formatted_raised }} raised</span>
                                <span class="text-sm font-medium text-gray-500">{{ $elderly->formatted_goal }} goal</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-blue-600 h-2.5 rounded-full" style="width: {{ $elderly->progress_percentage }}%"></div>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">{{ number_format($elderly->progress_percentage, 0) }}% Complete</p>
                        </div>
                        
                        @if($elderly->deadline)
                            <div class="mt-4">
                                <p class="text-sm text-gray-500">
                                    <span class="font-medium">Deadline:</span> {{ $elderly->deadline->format('M d, Y') }}
                                </p>
                            </div>
                        @endif
                        
                        @if($elderly->status === 'approved')
                            <div class="mt-6">
                                <a href="{{ route('donate', ['elderly_id' => $elderly->id]) }}" class="w-full inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                    Donate Now
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Story Section -->
            <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
                <h3 class="text-lg font-medium text-gray-900">Story</h3>
                <div class="mt-4 prose max-w-none">
                    <p>{{ $elderly->story }}</p>
                </div>
            </div>
            
            <!-- Needs Section -->
            <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
                <h3 class="text-lg font-medium text-gray-900">Specific Needs</h3>
                <div class="mt-4">
                    @if($elderly->needs && !is_string($elderly->needs) && $elderly->needs->count() > 0)
                        <ul class="divide-y divide-gray-200">
                            @foreach($elderly->needs as $need)
                                <li class="py-4 flex justify-between">
                                    <div>
                                        <p class="text-sm font-medium text-gray-900">{{ $need->title }}</p>
                                        <p class="text-sm text-gray-500">{{ $need->description }}</p>
                                    </div>
                                    @if($need->cost > 0)
                                        <p class="text-sm font-medium text-gray-900">{{ CurrencyService::formatAmount($need->cost) }}</p>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-sm text-gray-500">No specific needs have been listed.</p>
                    @endif
                </div>
            </div>
            
            <!-- Organization Info -->
            <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
                <h3 class="text-lg font-medium text-gray-900">Managed By</h3>
                <div class="mt-4 flex items-center">
                    <div class="flex-shrink-0 h-10 w-10 bg-gray-300 rounded-full flex items-center justify-center">
                        <span class="text-lg font-medium text-white">{{ substr($elderly->organization->name, 0, 1) }}</span>
                    </div>
                    <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">{{ $elderly->organization->name }}</div>
                        <div class="text-sm text-gray-500">{{ $elderly->organization->email }}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Related Profiles -->
        @if($relatedElderly->count() > 0)
            <div class="mt-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">Other Elderly Who Need Help</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    @foreach($relatedElderly as $related)
                        <div class="bg-white shadow overflow-hidden rounded-lg">
                            <div class="h-48 overflow-hidden">
                                <img src="{{ $related->profile_image_url }}" alt="{{ $related->name }}" class="w-full h-full object-cover">
                            </div>
                            <div class="px-4 py-5 sm:p-6">
                                <h3 class="text-lg font-medium text-gray-900 truncate">{{ $related->name }}</h3>
                                <p class="mt-1 text-sm text-gray-500">{{ $related->age }} years • {{ $related->location }}</p>
                                <div class="mt-4">
                                    <div class="flex justify-between mb-1">
                                        <span class="text-xs font-medium text-gray-700">{{ $related->formatted_raised }}</span>
                                        <span class="text-xs font-medium text-gray-500">{{ $related->formatted_goal }}</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                                        <div class="bg-blue-600 h-1.5 rounded-full" style="width: {{ $related->progress_percentage }}%"></div>
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <a href="{{ route('elderly.show', $related->slug) }}" class="text-blue-600 hover:text-blue-900 text-sm font-medium">View Profile</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection