@if ($adherents->count() > 0)
    <div class="display-count-chic animate-fade-in">
        AFFICHAGE DE  &nbsp;<strong>{{ $adherents->count() }}</strong> &nbsp;ADHÉRENT(S)
    </div>
@endif

<div class="adherent-list-container animate-fade-in">
    <div class="row g-4">
        @forelse($adherents as $key => $a)
            @php
                $badgeText = 'Inconnu';
                $badgeClass = '';
                if ($a->enVigueur == 1 && $a->sorti != 1) { $badgeText = 'Actif'; $badgeClass = 'status-active-badge'; }
                elseif ($a->codeEtatBeneficiaire == 'R' || $a->codeEtatBeneficiaire == 'NR') { $badgeText = 'Retiré'; $badgeClass = 'status-retired-badge'; }
                elseif ($a->codeEtatBeneficiaire == 'SP') { $badgeText = 'Suspendu'; $badgeClass = 'status-suspended-badge'; }
                
                $photoPath = 'plugins/thumbs/vitalis/' . $a->lienPhoto;
                $img = ($a->lienPhoto && file_exists(public_path($photoPath))) 
                       ? asset($photoPath) 
                       : asset('plugins/thumbs/img_placeholder.png');
                
                $college = isset($colleges) ? $colleges->firstWhere('id', $a->idCollege) : null;
                $collegeLibelle = $college ? ($college->libelleCollege ?? 'Non défini') : 'Non défini';
            @endphp

            <div class="col-md-6 col-lg-4">
                <div class="adherent-card-fun animate-scale-in" style="animation-delay: {{ $loop->index * 0.03 }}s">
                    <div class="adherent-card-main" data-toggle="collapse" data-bs-toggle="collapse" 
                        data-target="#adh_pos_details_{{ $key }}" data-bs-target="#adh_pos_details_{{ $key }}">
                        <div class="adherent-avatar-container photo-update-trigger" 
                             data-id="{{ $a->idAdherent }}" 
                             data-type="adherent"
                             title="Cliquez pour changer la photo">
                            <img src="{{ $img }}" class="adherent-avatar" id="avatar-adherent-{{ $a->idAdherent }}" onerror="this.src='{{ asset('plugins/thumbs/img_placeholder.png') }}'">
                            <div class="adherent-avatar-ring"></div>
                            <div class="photo-overlay">
                                <i class="feather icon-camera"></i>
                            </div>
                            <input type="file" id="file-adherent-{{ $a->idAdherent }}" class="d-none photo-file-input" accept="image/*">
                        </div>
                        <div class="adherent-header-info">
                            <h5 class="adherent-name">{{ Str::limit($a->adherent, 25) }}</h5>
                            <div class="d-flex align-items-center">
                                <span class="adherent-id">N° {{ $a->numeroAdherent }}</span>
                                <span class="adherent-badge-status {{ $badgeClass }}">{{ $badgeText }}</span>
                            </div>
                        </div>
                        <div class="adherent-expand-icon">
                            <i class="feather icon-chevron-down"></i>
                        </div>
                    </div>

                    <div id="adh_pos_details_{{ $key }}" class="collapse adherent-card-details">
                        <div class="meta-grid">
                            <div class="meta-item">
                                <span class="meta-label">Sexe</span>
                                <span class="meta-value">{{ $a->sexe == 'M' ? 'Masculin' : ($a->sexe == 'F' ? 'Féminin' : $a->sexe) }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">Date Entrée</span>
                                <span class="meta-value">{{ \Carbon\Carbon::parse($a->dateEffetBeneficiaire)->format('d/m/Y') }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">Catégorie</span>
                                <span class="meta-value">{{ $a->codeProduit }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">Collège</span>
                                <span class="meta-value">{{ $collegeLibelle }}</span>
                            </div>
                        </div>

                        <div class="adherent-actions-grid">
                            @if ($currentUser->hasPermission('admin.adherent.show'))
                                <a href="{{ route('admin.adherent.show', ['adherent' => $a->idAdherent]) }}" class="btn-action-fun" onclick="showOverlay()">
                                    <i class="feather icon-eye"></i> Infos Adhérent
                                </a>
                            @endif

                            @if ($currentUser->hasPermission('admin.beneficiaire.index'))
                                <a href="{{ route('admin.beneficiaire.index', ['idAdherent' => $a->idAdherent]) }}" class="btn-action-fun" onclick="showOverlay()">
                                    <i class="feather icon-users"></i> Mes Bénéficiaires
                                </a>
                            @endif

                            @if ($currentUser->hasPermission('admin.reseau.index'))
                                <a href="{{ route('admin.reseau.index', ['idAdherent' => $a->idAdherent, 'idCollege' => $a->idCollege]) }}" class="btn-action-fun" onclick="showOverlay()">
                                    <i class="feather icon-activity"></i> Réseau de Soins
                                </a>
                            @endif
                            
                            @if ($a->enVigueur == 1 && $a->sorti != 1 && $currentUser->hasPermission('admin.beneficiaire.beneficiaireModal'))
                                <button type="button" class="btn-action-fun beneficiaire-modal-trigger" 
                                    data-id-adherent="{{ $a->idAdherent }}"
                                    data-url="{{ route('admin.beneficiaire.beneficiaireModal', ['idAdherent' => $a->idAdherent]) }}">
                                    <i class="feather icon-plus-circle"></i> AJOUT DE DÉPENDANT
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 py-5 text-center text-muted">
                <p>Aucun adhérent trouvé.</p>
            </div>
        @endforelse
    </div>

    @if ($adherents->count() > 0)
        <div class="d-flex justify-content-end align-items-center mt-5 mb-4 animate-fade-in">
            <div class="custom-premium-pagination">
                {!! $adherents->appends(request()->except('page'))->onEachSide(1)->links() !!}
            </div>
        </div>
    @endif
</div>

<style>
/* ══════════════════════════════════════════════
       CARTES ADHÉRENTS — Design Organique & Soft
       ══════════════════════════════════════════════ */
    .display-count-chic {
        display: inline-flex;
        align-items: center;
        padding: 8px 20px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 50px;
        color: var(--vt-muted);
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
        letter-spacing: 1px;
        margin-bottom: 25px;
        backdrop-filter: blur(10px);
    }

    .adherent-card-fun {
        background: rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 28px;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        margin-bottom: 20px;
    }

    .adherent-card-fun::before {
        content: '';
        position: absolute;
        left: 0;
        top: 25%;
        height: 50%;
        width: 5px;
        background: var(--vt-primary);
        border-radius: 0 50px 50px 0;
        box-shadow: 0 0 15px var(--vt-primary);
        transition: all 0.3s;
        z-index: 10;
    }

    .adherent-card-fun:hover {
        transform: translateY(-8px) scale(1.02);
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(var(--vt-primary-rgb), 0.3);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    }

    .adherent-card-fun:hover::before {
        height: 80%;
        top: 10%;
    }

    .adherent-avatar-ring {
        position: absolute;
        top: -4px;
        left: -4px;
        width: 56px;
        height: 56px;
        border: 2px solid var(--vt-primary);
        border-radius: 50%;
        opacity: 0.3;
        filter: blur(1px);
    }

    .photo-update-trigger {
        cursor: pointer;
        position: relative;
    }

    .photo-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 5;
        color: #fff;
        font-size: 1.2rem;
    }

    .photo-update-trigger:hover .photo-overlay {
        opacity: 1;
    }

    .adherent-card-main {
        padding: 22px 28px;
        display: flex;
        align-items: center;
        gap: 15px;
        cursor: pointer;
    }

    .adherent-avatar-container {
        position: relative;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .adherent-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.1); z-index: 2; position: relative; }

    .adherent-header-info {
        flex: 1;
        min-width: 0;
    }

    .adherent-name { font-size: 0.9rem; font-weight: 700; color: #fff; margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.5px; }
    .adherent-id { font-family: var(--font-mono); font-size: 0.7rem; color: var(--vt-muted); letter-spacing: 0.5px; }

    .adherent-badge-status {
        font-size: 0.55rem;
        font-weight: 800;
        text-transform: uppercase;
        padding: 3px 9px;
        border-radius: 10px;
        margin-left: 10px;
    }
    .status-active-badge { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.2); }
    .status-retired-badge { background: rgba(231, 76, 60, 0.15); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.2); }
    .status-suspended-badge { background: rgba(241, 196, 15, 0.15); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.2); }

    .adherent-expand-icon {
        background: rgba(255, 255, 255, 0.05);
        color: var(--vt-primary);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s;
        margin-left: auto; /* Force le positionnement à droite */
    }
    .adherent-card-main[aria-expanded="true"] .adherent-expand-icon {
        transform: rotate(180deg);
        background: var(--vt-primary);
        color: #000;
    }

    .adherent-card-details { padding: 20px 28px 28px; border-top: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255,255,255,0.01); }

    .meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .meta-item { display: flex; flex-direction: column; gap: 3px; }
    .meta-label { font-size: 0.6rem; color: var(--vt-muted); text-transform: uppercase; font-weight: 800; letter-spacing: 1px; }
    .meta-value { font-size: 0.85rem; color: #fff; font-weight: 700; }

    .adherent-actions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 25px;
    }

    .btn-action-fun {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 10px;
        border-radius: 16px;
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        color: var(--vt-muted);
        transition: all 0.3s;
        text-decoration: none;
    }

    .btn-action-fun:hover {
        background: rgba(var(--vt-primary-rgb), 0.15);
        border-color: var(--vt-primary);
        color: #fff;
        transform: translateY(-3px);
    }

    body.light-mode .btn-action-fun:hover {
        background: rgba(var(--vt-primary-rgb), 0.1);
        border-color: var(--vt-primary);
        color: var(--vt-primary);
    }

    /* ── Light Mode Overrides ── */
    body.light-mode .adherent-card-fun { background: #fff; border-color: #e2e8f0; box-shadow: 0 10px 25px rgba(0,0,0,0.03); }
    body.light-mode .adherent-card-fun:hover { border-color: var(--vt-primary); box-shadow: 0 20px 45px rgba(0,0,0,0.06); }
    body.light-mode .adherent-name, body.light-mode .meta-value { color: #1e293b; }
    body.light-mode .adherent-expand-icon { background: #f1f5f9; color: var(--vt-primary); }
    body.light-mode .adherent-card-details { border-top-color: #f1f5f9; background: #fcfdfe; }
    body.light-mode .meta-label { color: #64748b; }
    body.light-mode .btn-action-fun { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
    body.light-mode .btn-action-fun:hover { background: #1e293b; color: #fff; }
    body.light-mode .display-count-chic { background: #f8fafc; border-color: #e2e8f0; color: #64748b; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }

    /* Custom Premium Pagination */
    .custom-premium-pagination .pagination { gap: 8px; margin: 0; }
    .custom-premium-pagination .page-link {
        background: rgba(255,255,255,0.02) !important;
        border: 1px solid rgba(255,255,255,0.05) !important;
        border-radius: 12px !important;
        color: rgba(255,255,255,0.5) !important;
        padding: 8px 16px; font-weight: 700; transition: 0.3s;
    }
    .custom-premium-pagination .page-item.active .page-link {
        background: var(--vt-primary) !important;
        color: #000 !important;
        border-color: var(--vt-primary) !important;
        box-shadow: 0 0 15px rgba(var(--vt-primary-rgb), 0.3);
    }
    
    body.light-mode .custom-premium-pagination .page-link {
        background: #fff !important;
        border-color: #e2e8f0 !important;
        color: #64748b !important;
    }
</style>