production/Vue/Recherche/index.php

<div class="container-fluid py-3 px-3">
    <!-- SECTION: HEADER -->
    <div class="mb-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1" style="font-size:12px">
                <li class="breadcrumb-item text-secondary">INTER-SANTÉ</li>
                <li class="breadcrumb-item active text-dark"><?= _("Recherche assuré") ?></li>
            </ol>
        </nav>
        <h5 class="fw-semibold text-dark mb-0"><?= _("Recherche assuré") ?></h5>
    </div>

    <!-- SECTION: ALERTE REMPLACEMENT CARTE -->
    <?php if (is_array($derniernumerobeneficiaires) && $derniernumerobeneficiaires['nouveau'] > 0): ?>
    <div class="d-flex align-items-center gap-2 mb-3 p-3 bg-white rounded"
         style="border: 1px solid #DEE2E6; border-left: 3px solid #DC3545;">
        <i class="fa-solid fa-triangle-exclamation text-danger" style="font-size:14px"></i>
        <div style="font-size:13px">
            <strong><?= _("Alerte remplacement") ?> :</strong>
            <?= _("Carte") ?>
            <span class="badge border text-danger fw-normal ms-1"><?= $derniernumerobeneficiaires['ancien'] ?></span>
            <?= _("remplacée par") ?>
            <span class="badge border text-success fw-normal ms-1"><?= $derniernumerobeneficiaires['nouveau'] ?></span>
        </div>
    </div>
    <?php endif; ?>

    <!-- SECTION: FORMULAIRE RECHERCHE -->
    <div class="card mb-3">
        <div class="card-header d-flex align-items-center gap-2">
            <i class="fa-solid fa-magnifying-glass" style="font-size:12px;color:#6C757D"></i>
            <span class="section-label"><?= _("Critères de recherche") ?></span>
        </div>
        <div class="card-body p-3">
            <form id="frmrecherche" name="frmrecherche" method="post" action="Recherche/index/">

                <!-- Groupe : Identifiants -->
                <div class="group-label"><?= _("Identifiants") ?></div>
                <div class="row g-2 mb-3">
                    <div class="col-md-3">
                        <label class="form-label" for="numeroBeneficiaire"><?= _("N° Bénéficiaire") ?></label>
                        <input class="form-control form-control-sm" type="text"
                               id="numeroBeneficiaire" name="numeroBeneficiaire" autofocus>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="numeroAdherent"><?= _("N° Famille") ?></label>
                        <input class="form-control form-control-sm" type="text"
                               id="numeroAdherent" name="numeroAdherent">
                    </div>
                </div>

                <!-- Groupe : Identité -->
                <div class="group-label"><?= _("Identité") ?></div>
                <div class="row g-2 mb-3">
                    <div class="col-md-3">
                        <label class="form-label" for="nomBeneficiaire"><?= _("Nom") ?></label>
                        <input class="form-control form-control-sm" type="text"
                               id="nomBeneficiaire" name="nomBeneficiaire">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="prenomsBeneficiaire"><?= _("Prénoms") ?></label>
                        <input class="form-control form-control-sm" type="text"
                               id="prenomsBeneficiaire" name="prenomsBeneficiaire">
                    </div>
                </div>

                <!-- Groupe : Contact + Action -->
                <div class="group-label"><?= _("Contact") ?></div>
                <div class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label" for="telephonePortable"><?= _("Téléphone") ?></label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">
                                <i class="fa-solid fa-phone" style="font-size:11px"></i>
                            </span>
                            <input class="form-control form-control-sm" type="text"
                                   id="telephonePortable" name="telephonePortable">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="email">E-mail</label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">
                                <i class="fa-solid fa-envelope" style="font-size:11px"></i>
                            </span>
                            <input class="form-control form-control-sm" type="email"
                                   id="email" name="email">
                        </div>
                    </div>
                    <div class="col-md-6 d-flex justify-content-end">
                        <button type="submit" class="btn btn-dark btn-sm px-4">
                            <i class="fa-solid fa-magnifying-glass me-2"></i><?= _("Rechercher") ?>
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </div>

    <!-- SECTION: RÉSULTATS -->
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <span class="section-label"><?= _("Résultats") ?></span>
            <span class="badge border text-secondary fw-normal">
                <?= count($beneficiaires) ?> <?= _("trouvé(s)") ?>
            </span>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th><?= _("Bénéficiaire") ?></th>
                        <th><?= _("Identité") ?></th>
                        <th><?= _("Parenté") ?></th>
                        <th class="text-center"><?= _("Infos") ?></th>
                        <th><?= _("Souscripteur") ?></th>
                        <th class="text-center"><?= _("État") ?></th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (!empty($beneficiaires)): ?>
                        <?php foreach ($beneficiaires as $beneficiaire): ?>
                        <tr class="clickable-row" onclick="...">
                            <td>
                                <span class="fw-semibold text-dark">
                                    #<?= $beneficiaire['numeroBeneficiaire'] ?>
                                </span><br>
                                <small class="text-secondary">
                                    Fam: <?= $beneficiaire['numeroAdherent'] ?>
                                </small>
                            </td>
                            <td>
                                <div class="fw-semibold">
                                    <?= strtoupper($beneficiaire['nomBeneficiaire']) ?>
                                </div>
                                <div class="text-secondary" style="font-size:12px">
                                    <?= $beneficiaire['prenomsBeneficiaire'] ?>
                                </div>
                            </td>
                            <td>
                                <span class="badge border text-secondary fw-normal">
                                    <?= $beneficiaire['codeLienParente'] ?>
                                </span>
                            </td>
                            <td class="text-center" style="font-size:12px">
                                <span class="text-secondary"><?= $beneficiaire['sexe'] ?></span>
                                <span class="text-secondary mx-1">·</span>
                                <?= dateLang($beneficiaire['dateNaissance']) ?><br>
                                <i class="fa-solid fa-phone text-secondary me-1"
                                   style="font-size:10px"></i>
                                <span class="text-secondary">
                                    <?= $beneficiaire['telephonePortable'] ?>
                                </span>
                            </td>
                            <td class="fw-semibold"><?= $beneficiaire['nomClient'] ?></td>
                            <td class="text-center">
                                <?php $isActif = ($beneficiaire['codeEtatBeneficiaire'] == 'ACTIF'); ?>
                                <span class="badge border fw-normal
                                    <?= $isActif ? 'text-success' : 'text-secondary' ?>"
                                    style="font-size:11px">
                                    <i class="fa-solid fa-circle fa-2xs me-1"></i>
                                    <?= $beneficiaire['codeEtatBeneficiaire'] ?>
                                </span>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="6" class="text-center text-secondary py-3">
                                <i class="fa-solid fa-inbox me-2"></i><?= _("Aucun résultat") ?>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

</div><!-- /container -->