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

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

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((['community']), '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); ?>

<div 
    x-data="{ 
        isJoined: <?php echo e($community->isJoined ? 'true' : 'false'); ?>,
        isLoading: false,
        async joinCommunity() {
            this.isLoading = true;
            try {
                const response = await fetch('<?php echo e(route('communities.join', $community->id)); ?>', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
                    }
                });
                
                if (response.ok) {
                    this.isJoined = true;
                    // Optional: You can emit an event here to update global counters
                    // window.dispatchEvent(new CustomEvent('community-joined'));
                }
            } catch (error) {
                console.error('Join failed:', error);
            } finally {
                this.isLoading = false;
            }
        }
    }"
    class="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col h-full"
>
    
    <div class="h-24 bg-gradient-to-r from-[#2F3D7E] to-[#4a5bb5] relative shrink-0">
        <div class="absolute -bottom-6 left-4">
            <div class="w-12 h-12 bg-white rounded-xl border-2 border-white shadow-sm flex items-center justify-center overflow-hidden">
                <?php if(!empty($community->imageUrl)): ?>
                    <img src="<?php echo e($community->imageUrl); ?>" alt="<?php echo e($community->name); ?>" class="w-full h-full object-cover">
                <?php else: ?>
                    <div class="bg-blue-50 w-full h-full flex items-center justify-center text-[#2F3D7E] font-bold text-xl">
                        <?php echo e(substr($community->name, 0, 1)); ?>

                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <div class="pt-8 px-4 pb-4 flex-1 flex flex-col">
        <div class="flex justify-between items-start mb-2">
            <div class="min-w-0 flex-1 mr-2">
                <h3 class="font-bold text-gray-900 text-lg leading-tight mb-1 truncate"><?php echo e($community->name); ?></h3>
                <div class="flex items-center gap-2 text-xs text-gray-500">
                    <span class="flex items-center gap-1">
                        
                        <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                        <?php echo e(number_format($community->members_count ?? $community->members)); ?> members
                    </span>
                    <?php if(!empty($community->location)): ?>
                        <span class="flex items-center gap-1 truncate">
                            
                            <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                            <?php echo e($community->location); ?>

                        </span>
                    <?php endif; ?>
                </div>
            </div>
            
            
            <template x-if="isJoined">
                <div class="shrink-0 inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors bg-green-50 text-green-700 border-green-200">
                    <?php echo e($community->role === 'admin' ? 'Admin' : 'Joined'); ?>

                </div>
            </template>
        </div>

        <p class="text-gray-600 text-sm mb-4 line-clamp-2 flex-1">
            <?php echo e($community->description); ?>

        </p>
        
        <div class="flex flex-wrap gap-2 mb-4">
             <div class="inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold transition-colors bg-gray-100 text-gray-600 font-normal hover:bg-gray-200">
                <?php echo e($community->category); ?>

             </div>
        </div>

        <div class="mt-auto pt-4 border-t border-gray-50">
            
            
            <template x-if="isJoined">
                <a href="<?php echo e(route('communities.show', $community->id)); ?>" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 w-full border border-[#2F3D7E] text-[#2F3D7E] hover:bg-[#2F3D7E] hover:text-white group">
                    Enter Community
                    <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </a>
            </template>

            <template x-if="!isJoined">
                <button 
                    @click="joinCommunity()"
                    :disabled="isLoading"
                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 w-full bg-[#2F3D7E] hover:bg-[#232d5e] text-white"
                >
                    <span x-show="!isLoading">Join Community</span>
                    <span x-show="isLoading" class="flex items-center gap-2">
                        <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                        Joining...
                    </span>
                </button>
            </template>
        </div>
    </div>
</div><?php /**PATH /var/www/ratemypay/resources/views/components/network/community-card.blade.php ENDPATH**/ ?>