<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['partners' => collect()]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter((['partners' => collect()]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>




<?php if($partners->isNotEmpty()): ?>
<?php
    $allPartners = $partners->values()->map(fn($p) => [
        'id'                    => $p->id,
        'organization_name'     => $p->organization_name,
        'slug'                  => $p->slug,
        'logo'                  => $p->logo,
        'organization_type'     => $p->organization_type ?? '',
        'partnership_level'     => $p->partnership_level ?? '',
        'partnership_start_date'=> $p->partnership_start_date ? $p->partnership_start_date->toDateString() : null,
    ])->toArray();

    $typeLabels = [
        'government'      => ['label' => 'Government',     'icon' => 'fa-landmark'],
        'ngo'             => ['label' => 'NGO',             'icon' => 'fa-hands-helping'],
        'private_sector'  => ['label' => 'Private Sector', 'icon' => 'fa-briefcase'],
        'academic'        => ['label' => 'Academic',        'icon' => 'fa-graduation-cap'],
        'healthcare'      => ['label' => 'Healthcare',      'icon' => 'fa-hospital'],
        'international'   => ['label' => 'International',   'icon' => 'fa-globe'],
        'community_based' => ['label' => 'Community',       'icon' => 'fa-people-group'],
        'faith_based'     => ['label' => 'Faith-Based',     'icon' => 'fa-church'],
        'other'           => ['label' => 'Other',           'icon' => 'fa-circle-dot'],
    ];

    $allTypes = array_keys($typeLabels);
?>

<section class="py-20 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="container mx-auto px-4 lg:px-6">

        
        <div class="text-center mb-12">
            <span class="inline-block px-4 py-1.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm font-semibold tracking-wide uppercase mb-4">
                <i class="fa-solid fa-handshake mr-2"></i>Collaborations
            </span>
            <h2 class="text-3xl sm:text-4xl font-bold text-theme-heading mb-3">Our Partners</h2>
            <p class="text-theme-body max-w-5xl mx-auto text-base sm:text-lg">
                We collaborate with leading organizations across government, academia, healthcare, and the private sector to advance digital health in South Sudan.
            </p>
        </div>

        
        <script>
            window.__partnersData = <?php echo json_encode($allPartners, 15, 512) ?>;
        </script>

        
        <div
            x-data="partnersDirectory()"
            x-init="init()"
            class="flex flex-col lg:flex-row gap-0 rounded-2xl overflow-hidden shadow-lg border border-theme-divider"
        >
            
            <aside
                class="lg:w-60 shrink-0 flex flex-col"
                style="background: linear-gradient(180deg, #1e40af 0%, #0f766e 100%);"
            >
                <div class="px-4 py-4 border-b border-white/20">
                    <p class="text-xs font-bold uppercase tracking-widest text-white/60">Filter by Type</p>
                </div>

                
                <button
                    @click="setTab('all')"
                    :class="activeTab === 'all' ? 'bg-white/20 font-semibold' : 'hover:bg-white/10'"
                    class="w-full flex items-center gap-3 px-4 py-3 text-sm text-white transition-all duration-150 border-b border-white/10 text-left"
                >
                    <i class="fa-solid fa-layer-group w-4 text-center shrink-0 opacity-80"></i>
                    <span class="flex-1">All Partners</span>
                </button>

                
                <?php $__currentLoopData = $allTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php $meta = $typeLabels[$type]; ?>
                    <button
                        @click="setTab('<?php echo e($type); ?>')"
                        :class="activeTab === '<?php echo e($type); ?>' ? 'bg-white/20 font-semibold' : 'hover:bg-white/10'"
                        class="w-full flex items-center gap-3 px-4 py-3 text-sm text-white transition-all duration-150 border-b border-white/10 last:border-b-0 text-left"
                    >
                        <i class="fa-solid <?php echo e($meta['icon']); ?> w-4 text-center shrink-0 opacity-80"></i>
                        <span class="flex-1 truncate"><?php echo e($meta['label']); ?></span>
                    </button>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </aside>

            
            <div class="flex-1 min-w-0 bg-theme-card p-6 flex flex-col gap-4">

                
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-theme-heading" x-text="tabLabel"></h3>
                    <span class="text-xs text-theme-body" x-text="filtered.length + ' partner(s)'"></span>
                </div>

                
                <div x-show="filtered.length === 0" class="flex flex-col items-center justify-center py-16 text-center text-theme-body">
                    <i class="fa-solid fa-handshake-slash text-4xl mb-3 opacity-30"></i>
                    <p class="text-sm">No partners in this category yet.</p>
                </div>

                
                <div x-show="filtered.length > 0">
                    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
                        <template x-for="partner in paged" :key="partner.id">
                            <div class="bg-white dark:bg-gray-800 border border-theme-divider rounded-xl p-4 flex flex-col items-center gap-2 text-center group hover:shadow-md transition-shadow duration-200">

                                
                                <div class="w-14 h-14 rounded-xl overflow-hidden flex items-center justify-center bg-gray-50 dark:bg-gray-700 border border-theme-divider shrink-0">
                                    <template x-if="partner.logo">
                                        <img
                                            :src="'/storage/' + partner.logo"
                                            :alt="partner.organization_name + ' logo'"
                                            class="w-full h-full object-contain grayscale group-hover:grayscale-0 transition-all duration-300"
                                            loading="lazy"
                                        >
                                    </template>
                                    <template x-if="!partner.logo">
                                        <span
                                            class="text-lg font-bold text-blue-600 dark:text-blue-400"
                                            x-text="partner.organization_name.substring(0, 2).toUpperCase()"
                                        ></span>
                                    </template>
                                </div>

                                
                                <p class="text-xs font-semibold text-theme-heading leading-tight line-clamp-2 w-full" x-text="partner.organization_name"></p>

                                
                                <template x-if="partner.partnership_level">
                                    <span
                                        class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium capitalize"
                                        :class="{
                                            'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300': partner.partnership_level === 'bronze',
                                            'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300': partner.partnership_level === 'silver',
                                            'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': partner.partnership_level === 'gold',
                                            'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300': partner.partnership_level === 'platinum',
                                        }"
                                        x-text="partner.partnership_level"
                                    ></span>
                                </template>

                                
                                <template x-if="partner.partnership_start_date">
                                    <p class="text-xs text-gray-400 dark:text-gray-500">
                                        Since <span x-text="new Date(partner.partnership_start_date).getFullYear()"></span>
                                    </p>
                                </template>
                            </div>
                        </template>
                    </div>

                    
                    <div class="flex items-center justify-between gap-3 mt-6" x-show="totalPages > 1">
                        <button
                            @click="prev()"
                            :disabled="page === 1"
                            :class="page === 1 ? 'opacity-40 cursor-not-allowed' : 'hover:opacity-90'"
                            class="theme-btn-primary inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all"
                        >
                            <i class="fa-solid fa-chevron-left text-xs"></i> Prev
                        </button>

                        <span class="text-sm text-theme-body">
                            Page <span x-text="page" class="font-semibold text-theme-heading"></span>
                            of <span x-text="totalPages" class="font-semibold text-theme-heading"></span>
                        </span>

                        <button
                            @click="next()"
                            :disabled="page === totalPages"
                            :class="page === totalPages ? 'opacity-40 cursor-not-allowed' : 'hover:opacity-90'"
                            class="theme-btn-primary inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all"
                        >
                            Next <i class="fa-solid fa-chevron-right text-xs"></i>
                        </button>
                    </div>
                </div>

                
                <div class="text-center mt-4">
                    <a href="<?php echo e(route('partners.public.index')); ?>" class="inline-flex items-center gap-2 theme-btn-primary px-6 py-3 rounded-xl font-semibold text-sm transition-all">
                        <i class="fa-solid fa-arrow-right"></i> View All Partners
                    </a>
                </div>
            </div>
        </div>

    </div>
</section>

<script>
function partnersDirectory() {
    return {
        activeTab: 'all',
        page: 1,
        perPage: 12,
        allPartners: [],
        tabLabels: {
            'all': 'All Partners',
            'government': 'Government',
            'ngo': 'NGO',
            'private_sector': 'Private Sector',
            'academic': 'Academic',
            'healthcare': 'Healthcare',
            'international': 'International',
            'community_based': 'Community',
            'faith_based': 'Faith-Based',
            'other': 'Other',
        },
        init() {
            this.allPartners = window.__partnersData || [];
        },
        get tabLabel() {
            return this.tabLabels[this.activeTab] || 'Partners';
        },
        get filtered() {
            if (this.activeTab === 'all') return this.allPartners;
            return this.allPartners.filter(p => p.organization_type === this.activeTab);
        },
        get totalPages() {
            return Math.max(1, Math.ceil(this.filtered.length / this.perPage));
        },
        get paged() {
            const start = (this.page - 1) * this.perPage;
            return this.filtered.slice(start, start + this.perPage);
        },
        setTab(tab) {
            this.activeTab = tab;
            this.page = 1;
        },
        prev() { if (this.page > 1) this.page--; },
        next() { if (this.page < this.totalPages) this.page++; },
    };
}
</script>
<?php endif; ?><?php /**PATH /home/www/sshia.org/sshia/resources/views/components/home/partners.blade.php ENDPATH**/ ?>