radiantrh/Vue/Ficheadherent/index.php

<div class="container-fluid py-4 animate__animated animate__fadeIn">
    
    <div class="card shadow-sm border-0 mb-4 overflow-hidden">
        <div class="card-body p-0">
            <div class="row g-0">
                <div class="col-md-8 p-4">
                    <div class="d-flex align-items-center mb-2">
                        <h3 class="fw-bold mb-0 me-3"><?= $this->nettoyer($adherent['nom']) . " " . $this->nettoyer($adherent['prenoms']) ?></h3>
                        <span class="badge bg-primary rounded-pill"><?= $this->nettoyer($adherent['numeroAdherent']) ?></span>
                        <?php if ($adherentRetire == "1") : ?>
                            <span class="badge bg-danger ms-2 animate__animated animate__pulse animate__infinite">
                                <i class="fas fa-door-open me-1"></i> <?= _("SORTI LE") ?> : <?= dateLang($dateSortieAdherent) ?>
                            </span>
                        <?php endif; ?>
                    </div>
                    <p class="text-muted mb-0">
                        <i class="fas fa-university me-2"></i><?= $this->nettoyer($adherent['libelleCollege']) ?> | 
                        <i class="fas fa-map-marker-alt ms-3 me-1"></i> <?= $this->nettoyer($adherent['ville']) ?>, <?= $this->nettoyer($adherent['pays']) ?>
                    </p>
                </div>
                <?php if($controlerPlafondAdherent): ?>
                <div class="col-md-4 bg-light border-start d-flex align-items-center justify-content-around p-3">
                    <div class="text-center">
                        <small class="text-muted d-block text-uppercase fw-bold"><?= _("Consommé") ?></small>
                        <span class="h5 fw-bold text-danger"><?= format_N($limite_adherent['consommationAdherent']) ?></span>
                    </div>
                    <div class="vr mx-2 text-secondary opacity-25"></div>
                    <div class="text-center">
                        <small class="text-muted d-block text-uppercase fw-bold"><?= _("Solde Famille") ?></small>
                        <span class="h5 fw-bold text-success"><?= format_N($limite_adherent['soldeAdherent']) ?></span>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <ul class="nav nav-pills mb-4 shadow-sm p-2 bg-white rounded" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active fw-bold" id="tab-famille" data-bs-toggle="pill" data-bs-target="#content-famille" type="button">
                <i class="fas fa-users me-2"></i><?= _("Détail Famille") ?>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold" id="tab-primes" data-bs-toggle="pill" data-bs-target="#content-primes" type="button">
                <i class="fas fa-file-invoice-dollar me-2"></i><?= _("Récapitulatif Primes") ?>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold" id="tab-limites" data-bs-toggle="pill" data-bs-target="#content-limites" type="button">
                <i class="fas fa-shield-alt me-2"></i><?= _("Plafonds & Garanties") ?>
            </button>
        </li>
    </ul>

    <div class="tab-content" id="pills-tabContent">
        
        <div class="tab-pane fade show active" id="content-famille" role="tabpanel">
            <div class="card shadow-sm border-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light text-muted small text-uppercase">
                            <tr>
                                <th class="text-center">#</th>
                                <th><?= _("Bénéficiaire") ?></th>
                                <th class="text-center"><?= _("Parenté") ?></th>
                                <th class="text-center"><?= _("Âge") ?></th>
                                <th class="text-end"><?= _("Prime Nette") ?></th>
                                <th class="text-end"><?= _("TTC") ?></th>
                                <th class="text-center"><?= _("Statut") ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($beneficiaires as $beneficiaire): 
                                $photo = ($beneficiaire['faceRegistered'] == "1" && $beneficiaire['lienPhoto'] > " ") 
                                         ? $_SESSION['dossierPhoto_C'].$_SESSION['dossierSociete'].'/Photos/'.$beneficiaire['lienPhoto'] 
                                         : "assets/img/default-avatar.png";
                            ?>
                            <tr class="cursor-pointer" onclick="selectionner_beneficiaire(<?= $beneficiaire['idBeneficiaire'] ?>,'<?= $beneficiaire['numeroBeneficiaire'] ?>')">
                                <td class="text-center">
                                    <img src="<?= $photo ?>" class="rounded-circle border shadow-sm" width="35" height="35" style="object-fit: cover;">
                                </td>
                                <td>
                                    <div class="fw-bold"><?= $beneficiaire['nomBeneficiaire'] . " " . $beneficiaire['prenomsBeneficiaire'] ?></div>
                                    <div class="small text-muted"><?= $beneficiaire['numeroBeneficiaire'] ?></div>
                                </td>
                                <td class="text-center small"><?= est_anglophone() ? $beneficiaire['LienParenteEng'] : $beneficiaire['LienParente'] ?></td>
                                <td class="text-center"><?= $beneficiaire['age'] ?> <span class="text-muted small">ans</span></td>
                                <td class="text-end font-monospace"><?= format_N($beneficiaire['primeHt']) ?></td>
                                <td class="text-end font-monospace fw-bold text-primary"><?= format_N($beneficiaire['primeTtc']) ?></td>
                                <td class="text-center">
                                    <span class="badge bg-<?= ($beneficiaire['codeEtatBeneficiaire'] == 'A') ? 'success' : 'secondary' ?>-subtle text-<?= ($beneficiaire['codeEtatBeneficiaire'] == 'A') ? 'success' : 'secondary' ?>">
                                        <?= $beneficiaire['codeEtatBeneficiaire'] ?>
                                    </span>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                        <tfoot class="bg-primary bg-opacity-10 fw-bold">
                            <tr>
                                <td colspan="4" class="text-end"><?= _("CUMUL FAMILLE") ?></td>
                                <td class="text-end font-monospace"><?= format_N($totalbeneficiaires['primeHt']) ?></td>
                                <td class="text-end font-monospace"><?= format_N($totalbeneficiaires['primeTtc']) ?></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="content-primes" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="card shadow-sm border-0 mb-3">
                        <div class="card-header bg-white fw-bold"><i class="fas fa-coins me-2 text-warning"></i><?= _("Décomposition de la Prime") ?></div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between"><span><?= _("Prime HT") ?></span> <span class="fw-bold"><?= format_N($adherent['primeHt']) ?></span></li>
                                <li class="list-group-item d-flex justify-content-between"><span><?= _("Taxes") ?></span> <span class="fw-bold"><?= format_N($adherent['taxe']) ?></span></li>
                                <li class="list-group-item d-flex justify-content-between bg-light"><span><?= _("Prime TTC") ?></span> <span class="fw-bold text-primary"><?= format_N($adherent['primeTtc']) ?></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card shadow-sm border-0 mb-3">
                        <div class="card-header bg-white fw-bold"><i class="fas fa-exchange-alt me-2 text-info"></i><?= _("Répartition") ?></div>
                        <div class="card-body d-flex justify-content-around align-items-center">
                            <div class="text-center">
                                <div class="small text-muted"><?= _("Part Assureur") ?></div>
                                <div class="h4 fw-bold text-primary"><?= format_N($adherent['partAssureur']) ?></div>
                            </div>
                            <div class="text-center">
                                <div class="small text-muted"><?= _("Part Tiers") ?></div>
                                <div class="h4 fw-bold text-danger"><?= format_N($adherent['partTiers']) ?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="content-limites" role="tabpanel">
            <div class="card shadow-sm border-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="bg-light small">
                            <tr>
                                <th><?= _("Garantie") ?></th>
                                <th class="text-end"><?= _("Plafond Vigueur") ?></th>
                                <th class="text-end"><?= _("Consommé") ?></th>
                                <th class="text-end"><?= _("Solde") ?></th>
                                <th class="text-center"><?= _("Type") ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($garantieadherents as $gar): ?>
                            <tr>
                                <td class="fw-bold"><?= $gar['garantie'] ?></td>
                                <td class="text-end"><?= format_N($gar['plafond']) ?></td>
                                <td class="text-end text-danger"><?= ($gar['champApplication'] == '1') ? '-' : format_N($gar['consommation']) ?></td>
                                <td class="text-end fw-bold text-success"><?= ($gar['champApplication'] == '1') ? '-' : format_N($gar['solde']) ?></td>
                                <td class="text-center">
                                    <span class="badge rounded-pill <?= ($gar['champApplication'] == '1') ? 'bg-info' : 'bg-secondary' ?>">
                                        <?= ($gar['champApplication'] == '1') ? _("Par tête") : _("Famille") ?>
                                    </span>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .cursor-pointer { cursor: pointer; }
    .font-monospace { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }
    .nav-pills .nav-link.active { box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2); }
</style>