{% extends '@admin/base.html.twig' %}
{% block stylesheets %}
    {{ parent() }}

<style>

    .tooltip-inner {
        max-width: 300px;
        text-align: left;
        font-size: 0.75rem;
    }


    /* === Couleurs des modules === */

    /* 1. Clients (USERS) */
    .right-badge-users,
    .module-cell.right-badge-users {
        background-color: #007bff; /* Bleu */
    }

    /* 2. Fournisseurs (SUPPLIER) */
    .right-badge-supplier,
    .module-cell.right-badge-supplier {
        background-color: #28a745; /* Vert */
    }

    /* 3. Produits (PRODUIT) */
    .right-badge-produit,
    .module-cell.right-badge-produit {
        background-color: #17a2b8; /* Cyan */
    }

    /* 4. Stock (STOCK) */
    .right-badge-stock,
    .module-cell.right-badge-stock {
        background-color: #fd7e14; /* Orange */
        color: #fff;
    }

    /* 5. Documents Client (DOCUMENT_CLIENT) */
    .right-badge-document_client,
    .module-cell.right-badge-document_client {
        background-color: #6f42c1; /* Violet */
    }

    /* 6. Documents Fournisseur (DOCUMENT_SUPPLIER) */
    .right-badge-document_supplier,
    .module-cell.right-badge-document_supplier {
        background-color: #8b4513; /* Marron */
    }

    /* 7. Statistiques (STATISTIQUE) */
    .right-badge-statistique,
    .module-cell.right-badge-statistique {
        background-color: #20c997; /* Turquoise */
    }

    /* 8. Administration (ADMINISTRATION) */
    .right-badge-administration,
    .module-cell.right-badge-administration {
        background-color: #dc3545; /* Rouge */
    }

    /* 9. Sliders (SLIDER) */
    .right-badge-slider,
    .module-cell.right-badge-slider {
        background-color: #343a40; /* Gris foncé */
    }

    /* 10. Inventaires (INVENTORY) */
    .right-badge-inventory,
    .module-cell.right-badge-inventory {
        background-color: #0d6efd; /* Bleu soutenu */
    }

    /* 11. Paiements (PAYMENT) */
    .right-badge-payment,
    .module-cell.right-badge-payment {
        background-color: #198754; /* Vert soutenu */
    }

    /* 12. Messenger interne (INTERNAL_MESSENGER) */
    .right-badge-internal_messenger,
    .module-cell.right-badge-internal_messenger {
        background-color: #5c3dc6; /* Indigo */
    }
</style>
{% endblock %}

{% block subheader %}

   <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100" style="padding: 1rem;">

        <h3 class="m-subheader__title m-subheader__title--separator d-flex align-items-center mb-0">
            <i class="fa fa-user-shield me-2" style="font-size: 1.5rem;"></i> Groupes et droits d'accès
        </h3>

        <a href="javascript:void(0);" class="btn btn-success btn-sm modalNewGroupUser" data-bs-toggle="modal" data-bs-target="#m_modal_group_user">
            <i class="fa fa-plus-circle me-1"></i> Ajouter un groupe
        </a>
    </div>



{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block stat %}

{% endblock %}

{% block bodycontent %}
<div class="row">

    <div class="col-lg-12">

        <div class="contentMargin">
            <div class="card shadow-sm">
                <div class="card shadow-sm">
                    <div class="card-body px-2 py-2">
                        <div class="table-responsive">
                            <table id="groupUsersTable" class="table table-striped table-hover w-100">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Code</th>
                                        <th>Nom du groupe</th>
                                        <th>Accès</th>
                                        <th>Nb.Utilis</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

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

{# Modal pour création/édition #}
<div class="modal fade" id="m_modal_group_user" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal_content" id="modal_content"></div>
    </div>
</div>
{% endblock %}



{% block js %}
    {{ parent() }}
    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function () {
           $('#groupUsersTable').on('click', '.js-group-rights-toggle', function() {
                const target = $(this).data('target');
                const details = $(target);
                const isHidden = details.hasClass('d-none');
                details.toggleClass('d-none', !isHidden);
                $(this).html(
                    isHidden
                        ? '<i class="fa fa-chevron-up me-1"></i>Masquer détails'
                        : '<i class="fa fa-chevron-down me-1"></i>Voir détails'
                );
            });
        });

    </script>
{% endblock %}