newdesigngestionnaire/Vue/Prestatairesreseau/index.php

<?php 
    $codeReseau = $this->nettoyer($reseau['codeReseau']);
    $idReseau = $this->nettoyer($reseau['id']);
    $nomReseau = $this->nettoyer($reseau['libelle']);
?>

<div class="page-content animate__animated animate__fadeIn">
    <div class="header-section mb-4">
        <div class="d-flex align-items-center justify-content-between bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
            <div class="d-flex align-items-center">
                <div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                    <i class="fas fa-hospital-symbol fs-4"></i>
                </div>
                <div>
                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Affectation Prestataires Réseau Soins") ?></h4>
                    <p class="text-muted small mb-0"><?= _("Réseau :") ?> <span class="fw-bold text-primary"><?= $nomReseau ?></span> (<?= $codeReseau ?>)</p>
                </div>
            </div>
            <div class="d-flex gap-2">
                <button class="btn btn-light rounded-pill px-3 fw-bold shadow-xs border btn-sm" onclick="retour_liste_reseaus();">
                    <i class="fas fa-arrow-left me-1"></i> <?= _("Retour") ?>
                </button>
                <button class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm btn-sm" onclick="afficher_prestataires_reseau();">
                    <i class="fas fa-sync-alt me-1"></i> <?= _("Actualiser") ?>
                </button>
            </div>
        </div>
    </div>

    <input type="hidden" id="codeReseau" name="codeReseau" value="<?= $codeReseau ?>">
    <input type="hidden" id="idReseau" name="idReseau" value="<?= $idReseau ?>">

    <div class="row g-4">
        
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white py-3 border-bottom">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0 fw-bold text-muted text-uppercase small">
                            <i class="fas fa-list-ul me-2"></i><?= _("Disponibles") ?>
                        </h6>
                        <span class="badge bg-light text-primary border rounded-pill" id="count_dispo">
                            <?= count($prestatairesdispo) ?>
                        </span>
                    </div>
                    <div class="input-group input-group-sm mb-2">
                        <span class="input-group-text bg-white border-2 border-end-0 text-muted"><i class="fas fa-search"></i></span>
                        <input type="text" id="search_dispo" class="form-control border-2 border-start-0 shadow-none" placeholder="<?= _("Filtrer par nom, ville...") ?>" onkeyup="filterTable('tab_dispo', this.value, 'count_dispo')">
                    </div>
                    <button class="btn btn-primary-ghost btn-sm w-100 mt-2 rounded-pill fw-bold" onclick="ajouter_tous_prestataires_reseau();">
                        <?= _("Tout ajouter") ?> <i class="fas fa-angle-double-right ms-1"></i>
                    </button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-hover align-middle mb-0" id="tab_dispo" style="font-size: 8.5pt;">
                            <thead class="bg-light sticky-top">
                                <tr>
                                    <th class="ps-3 py-2"><?= _("Nom & Détails") ?></th>
                                    <th class="text-center py-2" width="50px"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($prestatairesdispo as $v): $codePres = $v['codePrestataire']; ?>
                                <tr>
                                    <td class="ps-3">
                                        <div class="fw-bold text-dark search-target"><?= $this->nettoyer($v['libelle']) ?></div>
                                        <div class="text-muted smaller search-target">
                                            <?= $this->nettoyer($v['localite']) ?> | <?= $this->nettoyer($v['typeprestataire']) ?>
                                        </div>
                                    </td>
                                    <td class="text-center pe-3">
                                        <button class="btn btn-sm btn-primary-ghost rounded-circle action-icon" onclick="ajouter_un_prestataire_reseau('<?=$codePres?>');">
                                            <i class="fas fa-chevron-right"></i>
                                        </button>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="card border-0 shadow-sm h-100 border-start border-success border-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0 fw-bold text-success text-uppercase small">
                            <i class="fas fa-check-double me-2"></i><?= _("Affectés au réseau") ?>
                        </h6>
                        <span class="badge bg-success-light text-success rounded-pill px-3" id="count_affect">
                            <?= count($prestatairesreseau) ?>
                        </span>
                    </div>
                    <div class="input-group input-group-sm mb-2">
                        <span class="input-group-text bg-white border-2 border-end-0 text-muted"><i class="fas fa-search"></i></span>
                        <input type="text" id="search_affect" class="form-control border-2 border-start-0 shadow-none" placeholder="<?= _("Rechercher dans la liste...") ?>" onkeyup="filterTable('tab_affect', this.value, 'count_affect')">
                    </div>
                    <button class="btn btn-danger-light btn-sm w-100 mt-2 rounded-pill fw-bold" onclick="retirer_tous_prestataires_du_site();">
                        <i class="fas fa-angle-double-left me-1"></i> <?= _("Retirer tous") ?>
                    </button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-hover align-middle mb-0" id="tab_affect" style="font-size: 8.5pt;">
                            <thead class="bg-success-light text-success sticky-top">
                                <tr>
                                    <th class="ps-3 py-2" width="50px"></th>
                                    <th class="py-2"><?= _("Nom du Prestataire") ?></th>
                                    <th class="py-2 pe-3"><?= _("Ville / Localité") ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($prestatairesreseau as $v): $codePres = $v['codePrestataire']; ?>
                                <tr>
                                    <td class="ps-3 text-center">
                                        <button class="btn btn-sm btn-danger-light rounded-circle action-icon" onclick="retirer_un_prestataire_reseau('<?=$codePres?>');">
                                            <i class="fas fa-chevron-left"></i>
                                        </button>
                                    </td>
                                    <td class="fw-bold search-target"><?= $this->nettoyer($v['libelle']) ?></td>
                                    <td class="pe-3 search-target"><?= $this->nettoyer($v['localite']) ?></td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
/**
 * Fonction de filtrage en temps réel
 * @param {string} tableId - ID de la table à filtrer
 * @param {string} query - Texte recherché
 * @param {string} counterId - ID du badge de décompte
 */
function filterTable(tableId, query, counterId) {
    const filter = query.toLowerCase();
    const rows = document.querySelectorAll(`#${tableId} tbody tr`);
    let visibleCount = 0;

    rows.forEach(row => {
        const text = row.innerText.toLowerCase();
        if (text.includes(filter)) {
            row.style.display = "";
            visibleCount++;
        } else {
            row.style.display = "none";
        }
    });

    // Mise à jour du compteur
    document.getElementById(counterId).innerText = visibleCount;
}
</script>

<style>
    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
    .btn-primary-ghost { color: var(--bs-primary); background-color: rgba(33, 46, 83, 0.1); border: none; }
    .bg-success-light { background-color: rgba(25, 135, 84, 0.08) !important; }
    .btn-danger-light { color: var(--bs-danger); background-color: rgba(220, 53, 69, 0.1); border: none; }
    .action-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
    .input-group-sm > .form-control:focus { border-color: #dee2e6; }
</style>