newdesigngestionnaire/Vue/Detailbaremepriseencharge/index.php

<?php 
    $idBareme = $_SESSION['idBaremePriseEnCharge'];
    $libelleBareme = $this->nettoyer($bareme['libelle']);
    $isAnglais = est_anglophone();
?>

<div class="page-content animate__animated animate__fadeIn">
    <div class="header-section mb-1">
        <div class="d-flex align-items-center bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
            <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-sliders-h"></i>
            </div>
            <div class="flex-grow-1">
                <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Configuration du Barème Modèle") ?></h4>
                <p class="text-muted small mb-0"><span class="badge bg-light text-primary border"><?= $libelleBareme ?></span></p>
            </div>
            <div class="text-end">
                <span class="badge bg-light text-dark border">
                    <i class="fas fa-fingerprint me-1 text-primary"></i>ID: #<?= $idBareme ?>
                </span>
            </div>
        </div>
    </div>
    
    <input type="hidden" id="idBaremePriseEnCharge" value="<?= $idBareme ?>">

    <div class="row g-3">
        <div class="col-xl-4 col-lg-5">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom-0 pt-3">
                    <ul class="nav nav-tabs card-header-tabs" id="tabBareme" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active small fw-bold text-uppercase" id="update-tab" data-bs-toggle="tab" data-bs-target="#update-zone" type="button">
                                <i class="fas fa-edit me-1"></i> <?= _("Mise à jour") ?>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link small fw-bold text-uppercase" id="history-tab" data-bs-toggle="tab" data-bs-target="#history-zone" type="button" onclick="afficherDetailBareme();">
                                <i class="fas fa-history me-1"></i> <?= _("Historique") ?>
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body tab-content">
                    <div class="tab-pane fade show active" id="update-zone">
                        <div class="mb-3">
                            <label class="lbl-saas"><?= _("Date de mise en vigueur") ?></label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                <input type="text" id="dateEffetBareme" class="form-control datepicker fw-bold">
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="lbl-saas"><?= _("Taux Global (%)") ?></label>
                            <div class="input-group input-group-sm">
                                <input type="number" id="ticketModerateurBareme" class="form-control fw-bold text-primary" value="<?= $tmBareme ?>">
                                <span class="input-group-text bg-primary text-white">%</span>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm w-100 py-2 shadow-sm fw-bold" onclick="inserer_bareme();">
                            <i class="fas fa-save me-1"></i> <?= _("Appliquer à tout") ?>
                        </button>
                    </div>

                    <div class="tab-pane fade" id="history-zone">
                        <div id="div_bareme" class="history-scroll-zone">
                            <div class="text-center py-4 text-muted small">
                                <i class="fas fa-spinner fa-spin me-2"></i> Chargement...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-8 col-lg-7">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold text-uppercase small text-secondary">
                        <i class="fas fa-list-ul me-2"></i><?= _("Détails par Famille") ?>
                    </h6>
                    <span class="badge rounded-pill bg-primary bg-opacity-10 text-primary">
                        <?= count($garantiesajoutees) ?> Familles
                    </span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 500px;">
                        <table class="table table-hover table-sm align-middle mb-0">
                            <thead class="table-light sticky-top">
                                <tr class="small text-uppercase">
                                    <th class="ps-3 py-2"><?= _("Code") ?></th>
                                    <th class="py-2"><?= _("Désignation") ?></th>
                                    <th class="text-center py-2"><?= _("Config") ?></th>
                                    <th class="text-end pe-3 py-2"><?= _("Action") ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($garantiesajoutees as $v): 
                                    $codeG = $this->nettoyer($v['codeGarantie']);  
                                    $nomG  = $isAnglais ? $this->nettoyer($v['libelleEng']) : $this->nettoyer($v['libelle']);
                                ?>
                                <tr class="row-hover" ondblclick="afficher_actes_garantiebareme(<?= $idBareme ?>,'<?= $codeG ?>');">
                                    <td class="ps-3 fw-mono small"><?= $codeG ?></td>
                                    <td>
                                        <div class="fw-bold small"><?= $nomG ?></div>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-success rounded-pill"><?= (int)$v['nbre_lignes_actives'] ?></span>
                                    </td>
                                    <td class="text-end pe-3">
                                        <button class="btn btn-xs btn-outline-primary" onclick="afficher_actes_garantiebareme(<?= $idBareme ?>,'<?= $codeG ?>');">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .lbl-saas { font-size: 10px; font-weight: 700; color: #6c757d; text-transform: uppercase; margin-bottom: 4px; display: block; }
    .nav-tabs .nav-link { border: none; color: #6c757d; padding: 10px 15px; }
    .nav-tabs .nav-link.active { color: #0d6efd; border-bottom: 2px solid #0d6efd; background: none; }
    .history-scroll-zone { max-height: 350px; overflow-y: auto; font-size: 12px; }
    .btn-xs { padding: 2px 6px; font-size: 10px; border-radius: 4px; }
    .fw-mono { font-family: monospace; }
</style>

<script>
    $(document).ready(function() {
        // Force le chargement quand on clique sur l'onglet Historique
        $('#history-tab').on('click', function() {
            afficherDetailBareme(); 
        });

        // Optionnel : Si vous voulez que l'historique se charge 
        // automatiquement si l'onglet est actif par défaut
        if ($('#history-tab').hasClass('active')) {
            afficherDetailBareme();
        }
    });
</script>