{{-- 
    Health Institution Detail Page
    Public page showing full institution details
    
    Uses: <x-site-layout>
    Requirements: 5.4
--}}
<x-site-layout 
    title="{{ $institution->name }}"
    meta-description="{{ Str::limit($institution->description, 160) }}"
    :show-breadcrumbs="false"
>
    {{-- Hero Section --}}
    <section class="bg-gradient-to-br from-green-600 via-green-700 to-emerald-800 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="lg:flex lg:items-start lg:gap-12">
                {{-- Logo/Image --}}
                <div class="lg:w-64 mb-6 lg:mb-0">
                    <div class="w-40 h-40 lg:w-48 lg:h-48 bg-white rounded-2xl shadow-xl flex items-center justify-center mx-auto lg:mx-0">
                        @if($institution->logo)
                            <img src="{{ $institution->logo_url }}" alt="{{ $institution->name }}" class="w-32 h-32 object-contain">
                        @else
                            <i class="fas fa-hospital text-6xl text-green-500"></i>
                        @endif
                    </div>
                </div>
                
                {{-- Info --}}
                <div class="flex-1 text-center lg:text-left">
                    <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-3">
                        {{ $institution->name }}
                    </h1>
                    
                    @if($institution->short_name)
                        <p class="text-green-200 text-lg mb-4">{{ $institution->short_name }}</p>
                    @endif
                    
                    <div class="flex flex-wrap items-center justify-center lg:justify-start gap-4 text-green-100 mb-6">
                        <span class="flex items-center">
                            <i class="fas fa-map-marker-alt mr-2"></i>
                            {{ $institution->city }}, {{ $institution->country }}
                        </span>
                        <span class="flex items-center">
                            <i class="fas fa-eye mr-2"></i>
                            {{ number_format($institution->view_count) }} views
                        </span>
                    </div>
                    
                    {{-- Action Buttons --}}
                    <div class="flex flex-wrap justify-center lg:justify-start gap-3">
                        <a href="tel:{{ $institution->phone }}" 
                           class="inline-flex items-center px-6 py-3 bg-white text-green-700 font-semibold rounded-lg hover:bg-green-50 transition shadow-lg">
                            <i class="fas fa-phone mr-2"></i>Call Now
                        </a>
                        <a href="mailto:{{ $institution->email }}" 
                           class="inline-flex items-center px-6 py-3 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-400 transition">
                            <i class="fas fa-envelope mr-2"></i>Email
                        </a>
                        @if($institution->website_url)
                            <a href="{{ $institution->website_url }}" target="_blank" rel="noopener"
                               class="inline-flex items-center px-6 py-3 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-green-700 transition">
                                <i class="fas fa-globe mr-2"></i>Website
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-green-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('institutions.index') }}" class="hover:text-green-600 transition">Institutions</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">{{ Str::limit($institution->name, 50) }}</span>
            </nav>
        </div>
    </div>
    
    {{-- Main Content --}}
    <section class="py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:flex lg:gap-8">
                {{-- Main Content --}}
                <main class="lg:flex-1">
                    {{-- About Section --}}
                    <div class="bg-white rounded-xl shadow-md p-6 lg:p-8 mb-8">
                        <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                            <i class="fas fa-info-circle text-green-500 mr-3"></i>About
                        </h2>
                        <div class="prose prose-green max-w-none text-gray-600">
                            {{ $institution->description }}
                        </div>
                    </div>
                    
                    {{-- Services Section --}}
                    @if(!empty($institution->services))
                        <div class="bg-white rounded-xl shadow-md p-6 lg:p-8 mb-8">
                            <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                                <i class="fas fa-stethoscope text-green-500 mr-3"></i>Services Offered
                            </h2>
                            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                                @foreach($institution->services as $service)
                                    <div class="flex items-center bg-green-50 rounded-lg p-3">
                                        <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                        <span class="text-gray-700">{{ $service }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                    
                    {{-- Gallery Section --}}
                    @if(!empty($institution->images))
                        <div class="bg-white rounded-xl shadow-md p-6 lg:p-8 mb-8">
                            <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                                <i class="fas fa-images text-green-500 mr-3"></i>Gallery
                            </h2>
                            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                                @foreach($institution->images as $image)
                                    <div class="aspect-square rounded-lg overflow-hidden bg-gray-100">
                                        <img src="{{ asset('storage/' . $image) }}" 
                                             alt="{{ $institution->name }}"
                                             class="w-full h-full object-cover hover:scale-105 transition duration-300">
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </main>
                
                {{-- Sidebar --}}
                <aside class="lg:w-96 mt-8 lg:mt-0">
                    {{-- Contact Card --}}
                    <div class="bg-white rounded-xl shadow-md p-6 mb-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                            <i class="fas fa-address-card text-green-500 mr-2"></i>Contact Information
                        </h3>
                        
                        <div class="space-y-4">
                            {{-- Address --}}
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-map-marker-alt text-green-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800">Address</h4>
                                    <p class="text-gray-600">{{ $institution->address }}</p>
                                    <p class="text-gray-600">{{ $institution->city }}, {{ $institution->country }}</p>
                                </div>
                            </div>
                            
                            {{-- Phone --}}
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-phone text-green-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800">Phone</h4>
                                    <a href="tel:{{ $institution->phone }}" class="text-green-600 hover:text-green-700">
                                        {{ $institution->phone }}
                                    </a>
                                </div>
                            </div>
                            
                            {{-- Email --}}
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-envelope text-green-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800">Email</h4>
                                    <a href="mailto:{{ $institution->email }}" class="text-green-600 hover:text-green-700">
                                        {{ $institution->email }}
                                    </a>
                                </div>
                            </div>
                            
                            {{-- Website --}}
                            @if($institution->website_url)
                                <div class="flex items-start">
                                    <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                        <i class="fas fa-globe text-green-600"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-gray-800">Website</h4>
                                        <a href="{{ $institution->website_url }}" target="_blank" rel="noopener" class="text-green-600 hover:text-green-700 break-all">
                                            {{ Str::limit($institution->website_url, 35) }}
                                        </a>
                                    </div>
                                </div>
                            @endif
                        </div>
                        
                        {{-- Quick Actions --}}
                        <div class="mt-6 pt-6 border-t border-gray-200">
                            <a href="tel:{{ $institution->phone }}" 
                               class="w-full flex items-center justify-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition shadow-lg">
                                <i class="fas fa-phone mr-2"></i>Call Now
                            </a>
                        </div>
                    </div>
                    
                    {{-- Register CTA --}}
                    <div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl p-6 text-white">
                        <h3 class="text-xl font-bold mb-2">
                            <i class="fas fa-hospital mr-2"></i>List Your Institution
                        </h3>
                        <p class="text-blue-100 text-sm mb-4">
                            Join our directory and connect with patients across South Sudan.
                        </p>
                        <a href="{{ route('institutions.register') }}" 
                           class="inline-block px-6 py-3 bg-white text-blue-700 font-semibold rounded-lg hover:bg-blue-50 transition">
                            Register Now
                        </a>
                    </div>
                </aside>
            </div>
        </div>
    </section>
    
    {{-- Related Institutions --}}
    @if($related->count() > 0)
        <section class="py-12 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl font-bold text-gray-800 mb-8">
                    <i class="fas fa-hospital text-green-500 mr-3"></i>Related Institutions
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($related as $relatedInst)
                        <a href="{{ route('institutions.show', $relatedInst->slug) }}" 
                           class="bg-white rounded-xl shadow-md hover:shadow-xl transition overflow-hidden group">
                            <div class="h-40 bg-gradient-to-br from-green-100 to-green-200 flex items-center justify-center">
                                @if($relatedInst->logo)
                                    <img src="{{ $relatedInst->logo_url }}" alt="{{ $relatedInst->name }}" class="w-24 h-24 object-contain">
                                @else
                                    <i class="fas fa-hospital text-4xl text-green-300"></i>
                                @endif
                            </div>
                            <div class="p-4">
                                <h3 class="font-semibold text-gray-800 group-hover:text-green-600 transition truncate">
                                    {{ $relatedInst->name }}
                                </h3>
                                <p class="text-sm text-gray-500">
                                    <i class="fas fa-map-marker-alt mr-1"></i>
                                    {{ $relatedInst->city }}
                                </p>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
</x-site-layout>
