radiantassure/Vue/Prestataires/index.php

<?php $this->titre = "Intersanté - Réseau de soins"; ?>

<div class="card shadow-lg border-0 mb-4 main-container-card">
    <div class="card-header bg-primary text-white py-3">
        <div class="d-flex align-items-center justify-content-center">
            <i class="fas fa-project-diagram fa-lg me-3"></i>
            <h4 id="h4_titre" class="mb-0 fw-bold">
                <span id="id_titre_page"><?= _("Réseau des prestataires") ?></span>
            </h4>
        </div>
    </div>

    <div class="card-body bg-light-subtle">
        <div class="card shadow-sm border-0 mb-4 search-filter-card">
            <div class="card-body p-4">
                <div class="row g-3">
                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Type du prestataire") ?></label>
                        <select class="form-select select2-enable" id="codeTypePrestataire" name="codeTypePrestataire" autofocus>
                            <?php liste_options_consultation($typeprestataire, ""); ?>
                        </select>
                    </div>

                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Catégorie du réseau") ?></label>
                        <select class="form-select" id="codeReseau" name="codeReseau">
                            <?php liste_options_consultation($reseausoins, ""); ?>
                        </select>
                    </div>
                    
                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Nom du prestataire") ?></label>
                        <input class="form-control" type="text" id="libelle" name="libelle" 
                               placeholder="<?= _("Ex: Clinique...") ?>"
                               onkeypress="javascript:ctrlkeypress_liste_prestataires_actif(event);">
                    </div>
                    
                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Pays") ?></label>
                        <select onChange="ajaxListerVilleConsultation();" class="form-select" id="codePays" name="codePays">
                            <?php liste_options_consultation($pays, $_SESSION['codePaysSociete']); ?>
                        </select>
                    </div>
                    
                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Région") ?></label>
                        <div id="listeville">
                            <select onChange="ajaxListerLocaliteConsultation();" class="form-select" id="codeVille" name="codeVille">
                                <?php liste_options_consultation($ville, ""); ?>
                            </select>
                        </div>
                    </div>
                    
                    <div class="col-12 col-md-6 col-lg-4">
                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("District") ?></label>
                        <div id="listelocalite">
                            <select class="form-select" id="codeLocalite" name="codeLocalite">
                                <?php liste_options_consultation($listelocalite, "" ); ?>
                            </select>
                        </div>
                    </div>
                    
                    <div class="col-12 mt-4">
                        <button id="btn_filtre" type="button" class="btn btn-primary btn-lg w-100 shadow-sm transition-all" 
                                onclick="handleSearchClick();">
                            <span id="btn_text"><i class="fas fa-search me-2"></i> <?= _("Afficher les résultats") ?></span>
                            <span id="btn_spinner" class="d-none spinner-border spinner-border-sm me-2" role="status"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="container_resultats" class="card shadow-sm border-0 d-none">
            <div class="card-body p-0">
                <div id="div_liste_prestataire" class="table-responsive">
                    </div>
            </div>
        </div>
    </div>
</div>

<style>
    :root {
        --primary-soft: #e7f1ff;
        --transition-speed: 0.3s;
    }

    .main-container-card {
        border-radius: 15px !important;
        overflow: hidden;
    }

    .search-filter-card {
        border-radius: 12px !important;
        transition: transform var(--transition-speed);
    }

    .form-control, .form-select {
        border-radius: 8px;
        padding: 0.6rem 1rem;
        border: 1px solid #dee2e6;
        transition: all var(--transition-speed);
    }

    .form-control:focus, .form-select:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
        background-color: #fff;
    }

    .transition-all {
        transition: all var(--transition-speed) ease;
    }

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3) !important;
    }

    /* Améliorations Tablettes & Mobiles */
    @media (max-width: 768px) {
        .card-header h4 { font-size: 1.1rem; }
        .form-label { font-size: 0.75rem; }
        
        /* Empêche le zoom sur iOS */
        input, select { font-size: 16px !important; }
        
        .p-4 { padding: 1.5rem !important; }
    }

    /* Animation de chargement */
    .loading-opacity {
        opacity: 0.6;
        pointer-events: none;
    }
</style>

<script>
function handleSearchClick() {
    const btn = document.getElementById('btn_filtre');
    const text = document.getElementById('btn_text');
    const spinner = document.getElementById('btn_spinner');
    const resultContainer = document.getElementById('container_resultats');

    // UI Feedback
    btn.disabled = true;
    text.classList.add('d-none');
    spinner.classList.remove('d-none');

    // Appel de votre fonction originale
    if (typeof afficher_liste_prestataires_actifs === "function") {
        afficher_liste_prestataires_actifs();
        
        // Simulation d'affichage du container de résultat
        // (À intégrer idéalement dans le success de votre appel AJAX original)
        setTimeout(() => {
            resultContainer.classList.remove('d-none');
            btn.disabled = false;
            text.classList.remove('d-none');
            spinner.classList.add('d-none');
        }, 800);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Optimisation des interactions mobiles
    const selects = document.querySelectorAll('.form-select');
    selects.forEach(s => {
        s.addEventListener('change', function() {
            this.classList.add('is-valid');
        });
    });
});
</script>