
<?php if (isset($component)) { $__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $attributes; } ?>
<?php $component = App\View\Components\SiteLayout::resolve(['title' => 'Health Institution Directory','metaDescription' => 'Find healthcare institutions in South Sudan. Browse hospitals, clinics, and medical facilities near you.'] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('site-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\SiteLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    
    <section class="relative min-h-[60vh] bg-gradient-to-br from-green-600 via-green-700 to-emerald-800">
        
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;0.4&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
        </div>
        
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
            
            <div class="text-center mb-10">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 tracking-tight">
                    <i class="fas fa-hospital mr-3"></i>Health Institution Directory
                </h1>
                <p class="text-xl text-green-100 max-w-5xl mx-auto">
                    Discover healthcare facilities across South Sudan. Find hospitals, clinics, and medical centers near you.
                </p>
            </div>
            
            
            <div class="max-w-4xl mx-auto">
                <form action="<?php echo e(route('institutions.index')); ?>" method="GET" class="bg-white rounded-2xl shadow-2xl p-6">
                    
                    <div class="flex flex-col lg:flex-row gap-4">
                        <div class="flex-1 relative"
                             x-data="realtimeSearch('<?php echo e(route('api.institutions.search')); ?>')"
                             @click.outside="showDropdown = false">
                            <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 z-10"></i>
                            <input
                                type="text"
                                name="q"
                                x-model="query"
                                @input.debounce.300ms="search()"
                                @focus="if (query.length >= 2) showDropdown = true"
                                value="<?php echo e($query); ?>"
                                placeholder="Search institutions, services, locations..."
                                class="w-full pl-12 pr-4 py-4 text-lg border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition"
                                autocomplete="off"
                            >

                            
                            <div x-show="showDropdown && results.length > 0"
                                 x-transition
                                 class="absolute z-50 w-full bg-white shadow-2xl rounded-xl mt-1 max-h-80 overflow-y-auto border border-gray-100">
                                <template x-for="result in results" :key="result.slug">
                                    <a :href="result.url"
                                       class="flex items-center gap-3 px-4 py-3 hover:bg-green-50 border-b border-gray-50 last:border-0 transition">
                                        <div class="w-9 h-9 rounded-lg bg-green-100 flex-shrink-0 flex items-center justify-center overflow-hidden">
                                            <template x-if="result.logo_url">
                                                <img :src="result.logo_url" class="w-full h-full object-contain p-1">
                                            </template>
                                            <template x-if="!result.logo_url">
                                                <i class="fas fa-hospital text-green-500 text-sm"></i>
                                            </template>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <div class="font-semibold text-gray-800 text-sm truncate" x-text="result.name"></div>
                                            <div class="text-xs text-gray-500 flex items-center gap-1">
                                                <i class="fas fa-map-marker-alt text-green-400"></i>
                                                <span x-text="result.city"></span>
                                            </div>
                                        </div>
                                        <i class="fas fa-arrow-right text-gray-300 text-xs flex-shrink-0"></i>
                                    </a>
                                </template>
                            </div>

                            
                            <div x-show="showDropdown && results.length === 0 && query.length >= 2 && !loading"
                                 x-transition
                                 class="absolute z-50 w-full bg-white shadow-2xl rounded-xl mt-1 p-4 text-center text-gray-500 border border-gray-100">
                                <i class="fas fa-search-minus text-gray-300 text-2xl mb-2 block"></i>
                                No institutions found for "<span x-text="query" class="font-medium text-gray-700"></span>"
                            </div>

                            
                            <div x-show="loading"
                                 class="absolute z-50 w-full bg-white shadow-2xl rounded-xl mt-1 p-4 text-center text-gray-400 border border-gray-100">
                                <i class="fas fa-spinner fa-spin mr-2"></i>Searching...
                            </div>
                        </div>

                        <button type="submit" class="px-8 py-4 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-xl hover:from-green-700 hover:to-green-800 transition shadow-lg hover:shadow-xl">
                            <i class="fas fa-search mr-2"></i>Search
                        </button>
                    </div>
                    
                    
                    <div class="mt-4 flex flex-wrap gap-4">
                        
                        <div class="flex-1 min-w-[200px]">
                            <select name="city" class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition">
                                <option value="">All Cities</option>
                                <?php $__currentLoopData = $cities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cityName => $count): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($cityName); ?>" <?php echo e(request('city') == $cityName ? 'selected' : ''); ?>>
                                        <?php echo e($cityName); ?> (<?php echo e($count); ?>)
                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                        
                        
                        <div class="flex-1 min-w-[200px]">
                            <select name="services" class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-green-500 transition">
                                <option value="">All Services</option>
                                <?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $serviceName => $count): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($serviceName); ?>" <?php echo e(request('services') == $serviceName ? 'selected' : ''); ?>>
                                        <?php echo e($serviceName); ?> (<?php echo e($count); ?>)
                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                        
                        
                        <?php if(request('city') || request('services') || request('q')): ?>
                            <a href="<?php echo e(route('institutions.index')); ?>" class="px-4 py-3 text-red-600 hover:text-red-700 font-medium">
                                <i class="fas fa-times mr-1"></i>Clear Filters
                            </a>
                        <?php endif; ?>
                    </div>
                </form>
            </div>
            
            
            <div class="max-w-4xl mx-auto mt-8 flex justify-center gap-8 text-white">
                <div class="text-center">
                    <div class="text-3xl font-bold"><?php echo e(App\Models\HealthInstitution::published()->count()); ?></div>
                    <div class="text-green-200 text-sm">Institutions</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold"><?php echo e(count($cities)); ?></div>
                    <div class="text-green-200 text-sm">Cities</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold"><?php echo e(count($services)); ?></div>
                    <div class="text-green-200 text-sm">Services</div>
                </div>
            </div>
        </div>
    </section>
    
    
    <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="<?php echo e(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>
                <span class="text-gray-900 font-medium">Health Institution Directory</span>
            </nav>
        </div>
    </div>

    
    <section class="py-12 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:flex lg:gap-8">
                
                <div class="lg:flex-1">
                    
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">
                            <?php echo e($institutions->total()); ?> Health Institutions Found
                        </h2>
                        
                        
                        <div class="flex items-center gap-2">
                            <span class="text-sm text-gray-500">View:</span>
                            <button class="p-2 rounded-lg bg-green-600 text-white">
                                <i class="fas fa-th-large"></i>
                            </button>
                            <button class="p-2 rounded-lg bg-gray-200 text-gray-600 hover:bg-gray-300 transition">
                                <i class="fas fa-list"></i>
                            </button>
                        </div>
                    </div>
                    
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                        <?php $__empty_1 = true; $__currentLoopData = $institutions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $institution): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <a href="<?php echo e(route('institutions.show', $institution->slug)); ?>" 
                               class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden">
                                
                                <div class="relative h-48 bg-gradient-to-br from-green-100 to-green-200">
                                    <?php if($institution->logo): ?>
                                        <img src="<?php echo e($institution->logo_url); ?>" 
                                             alt="<?php echo e($institution->name); ?>"
                                             class="w-full h-full object-contain p-4">
                                    <?php else: ?>
                                        <div class="w-full h-full flex items-center justify-center">
                                            <i class="fas fa-hospital text-6xl text-green-300"></i>
                                        </div>
                                    <?php endif; ?>
                                    
                                    
                                    <span class="absolute top-3 right-3 px-2 py-1 bg-green-600 text-white text-xs font-semibold rounded-full">
                                        Verified
                                    </span>
                                </div>
                                
                                
                                <div class="p-5">
                                    <h3 class="text-lg font-bold text-gray-800 group-hover:text-green-600 transition mb-1">
                                        <?php echo e(Str::limit($institution->name, 40)); ?>

                                    </h3>
                                    
                                    <div class="flex items-center text-gray-500 text-sm mb-3">
                                        <i class="fas fa-map-marker-alt mr-1 text-green-500"></i>
                                        <?php echo e($institution->city); ?>, <?php echo e($institution->country); ?>

                                    </div>
                                    
                                    <p class="text-gray-600 text-sm line-clamp-2 mb-3">
                                        <?php echo e(Str::limit($institution->description, 100)); ?>

                                    </p>
                                    
                                    
                                    <div class="flex flex-wrap gap-1">
                                        <?php $__currentLoopData = array_slice($institution->services ?? [], 0, 3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <span class="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">
                                                <?php echo e($service); ?>

                                            </span>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        <?php if(count($institution->services ?? []) > 3): ?>
                                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                                                +<?php echo e(count($institution->services) - 3); ?> more
                                            </span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                
                                
                                <div class="px-5 py-3 bg-gray-50 border-t border-gray-100">
                                    <span class="text-green-600 font-medium text-sm group-hover:text-green-700">
                                        View Details <i class="fas fa-arrow-right ml-1 transition group-hover:translate-x-1"></i>
                                    </span>
                                </div>
                            </a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <div class="col-span-full text-center py-16">
                                <i class="fas fa-hospital text-6xl text-gray-300 mb-4"></i>
                                <h3 class="text-xl font-semibold text-gray-700 mb-2">No institutions found</h3>
                                <p class="text-gray-500 mb-4">Try adjusting your search or filters</p>
                                <a href="<?php echo e(route('institutions.index')); ?>" class="text-green-600 hover:text-green-700 font-medium">
                                    Clear all filters
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                    
                    
                    <?php echo e($institutions->links()); ?>

                </div>
                
                
                <aside class="lg:w-80 mt-8 lg:mt-0">
                    
                    <div class="bg-gradient-to-br from-green-600 to-green-700 rounded-xl p-6 text-white mb-6">
                        <h3 class="text-xl font-bold mb-2">
                            <i class="fas fa-plus-circle mr-2"></i>List Your Institution
                        </h3>
                        <p class="text-green-100 text-sm mb-4">
                            Register your healthcare facility and reach patients across South Sudan.
                        </p>
                        <a href="<?php echo e(route('institutions.register')); ?>" 
                           class="inline-block px-6 py-3 bg-white text-green-700 font-semibold rounded-lg hover:bg-green-50 transition">
                            Register Now
                        </a>
                    </div>
                    
                    
                    <?php if($featured->count() > 0): ?>
                        <div class="bg-white rounded-xl shadow-md p-6">
                            <h3 class="text-lg font-bold text-gray-800 mb-4">
                                <i class="fas fa-star text-yellow-500 mr-2"></i>Featured Institutions
                            </h3>
                            <div class="space-y-4">
                                <?php $__currentLoopData = $featured; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $featuredInst): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <a href="<?php echo e(route('institutions.show', $featuredInst->slug)); ?>" 
                                       class="flex items-center gap-3 group">
                                        <div class="w-12 h-12 rounded-lg bg-green-100 flex-shrink-0 flex items-center justify-center">
                                            <?php if($featuredInst->logo): ?>
                                                <img src="<?php echo e($featuredInst->logo_url); ?>" class="w-8 h-8 object-contain">
                                            <?php else: ?>
                                                <i class="fas fa-hospital text-green-500"></i>
                                            <?php endif; ?>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <h4 class="text-sm font-semibold text-gray-800 group-hover:text-green-600 truncate">
                                                <?php echo e($featuredInst->name); ?>

                                            </h4>
                                            <p class="text-xs text-gray-500"><?php echo e($featuredInst->city); ?></p>
                                        </div>
                                    </a>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>
                    <?php endif; ?>
                </aside>
            </div>
        </div>
    </section>

    <?php $__env->startPush('scripts'); ?>
    <script>
        function realtimeSearch(endpoint) {
            return {
                query: '',
                results: [],
                showDropdown: false,
                loading: false,
                async search() {
                    if (this.query.length < 2) {
                        this.results = [];
                        this.showDropdown = false;
                        return;
                    }
                    this.loading = true;
                    this.showDropdown = true;
                    try {
                        const res = await fetch(`${endpoint}?q=${encodeURIComponent(this.query)}`);
                        const data = await res.json();
                        this.results = data.results ?? [];
                    } catch (e) {
                        this.results = [];
                    } finally {
                        this.loading = false;
                    }
                }
            }
        }
    </script>
    <?php $__env->stopPush(); ?>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5)): ?>
<?php $attributes = $__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5; ?>
<?php unset($__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5)): ?>
<?php $component = $__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5; ?>
<?php unset($__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5); ?>
<?php endif; ?>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/institutions/index.blade.php ENDPATH**/ ?>