{% extends'@admin/base.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css">
    <style>


/* Handle */
.dd-list .dd-item .dd-handle{
  background:#f8f8f8;
  border:1px solid #e2e2e2;
  padding:10px 16px;
  font-size:14px;
  height:auto;
  font-weight:400;
  border-radius:3px;
  color:#6c757d;
  box-sizing:border-box;                /* important */
  padding-right:calc(var(--cat-actions-w) + 20px); /* réserve actions */
}




.dd{max-width:100%;}
.dd-item{position:relative;margin:5px 0;}
.dd-empty,.dd-placeholder{background:#fbfbfb;border-color:#e2e2e2;}
.dd-dragel .dd-handle{box-shadow:0 0 35px 0 rgba(154,161,171,.15);}

/* ligne draggable */
.dd-handle.row-cat{
  background:#f8f8f8;border:1px solid #e2e2e2;border-radius:3px;
  padding:10px 12px; color:#6c757d;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

/* colonnes */
.col-left{display:flex; align-items:center; gap:8px; flex:1 1 260px; min-width:200px;}
.cat-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.col-center{display:flex; align-items:center; gap:8px; flex:0 1 auto; white-space:nowrap;}
.m-badge{display:inline-flex; align-items:center; line-height:1; padding:.3rem .5rem;}
.m-badge--off{background:#e9ecef;color:#6c757d;text-decoration:line-through;border:1px solid #d8d8d8;}

.col-right{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
.col-right .btn{width:40px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center;}

/* grip */
.grip-icon{cursor:move; color:#adb5bd; transition:color .2s;}
.dd-handle.row-cat:hover .grip-icon{color:#64c5b1;}

/* responsive */
@media (max-width: 992px){
  .col-left{flex:1 1 50%;}
}
@media (max-width: 768px){
  .col-left{flex:1 1 100%;}
  .col-right{order:2;}
  .col-center{order:3; flex-basis:100%; justify-content:flex-start; gap:6px; margin-top:6px;}
}


/* icônes compactes avec tooltips, responsives */
.right{ gap:6px; }
.icon-flag{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:28px; padding:0 6px;
  border:1px solid #e2e2e2; border-radius:4px;
  background:#fff; color:#6c757d;
}
.icon-flag i{ font-size:14px; line-height:1; }
/* même largeur visuelle quel que soit le nombre de chiffres */
.icon-flag.count{
  width:52px;                 /* ajuste si besoin */
  justify-content:space-between;
  padding:0 8px;
}
.icon-flag.count .count-num{
  width:32px;                 /* zone réservée au nombre */
  text-align:right;
  font-variant-numeric: tabular-nums; /* chiffres à chasse fixe */
}

/* option mobile (un peu plus compact) */
@media (max-width:768px){
  .icon-flag.count{ width:56px; padding:0 6px; }
  .icon-flag.count .count-num{ width:28px; }
}


.icon-flag.on{ color:#0d6efd; border-color:#cfe2ff; background:#f8fbff; }
.icon-flag.off{ color:#adb5bd; border-color:#e5e7ea; background:#fafafa; opacity:.85; }

/* badges compacts */
.m-badge{ display:inline-flex; align-items:center; line-height:1; padding:.3rem .5rem; }

/* mobile: évite chevauchement, permet le wrap propre */
@media (max-width:768px){
  .right{ gap:4px; }
  .icon-flag{ height:26px; padding:0 6px; }
}

.icon-flag{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:28px; padding:0 6px;
  border:1px solid #e2e2e2; border-radius:4px; background:#fff; color:#6c757d;
}
.icon-flag i{ font-size:14px; line-height:1; }

/* statut actif/inactif */
.icon-flag.status.on{  color:#198754; border-color:#cfead6; background:#f3fbf5; }
.icon-flag.status.off{ color:#dc3545; border-color:#f5c2c7; background:#fff5f5; }

@media (max-width:768px){
  .icon-flag{ height:26px; padding:0 6px; }
}

</style>
{% endblock %}
{% block subheader %}

  <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">
    <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
      <span class="crm-badge me-2">
        <i class="fa fa-tags"></i>  {# Icône catégories #}
      </span>
      <div>
        <h3 class="badge-title-main mb-0" style="font-size:1.18rem;">
          LISTE DES CATÉGORIES
        </h3>

      </div>
    </div>
    <div class="d-flex align-items-center gap-2 flex-wrap">
      {% if "PRODUIT_CREATE" in rights %}
        <a href="{{ path('homepage_categories') }}"
          class="btn btn-primary btn-sm d-inline-flex align-items-center me-2 openHomepageModal"
          data-bs-toggle="modal" data-bs-target="#modalHomepageCategories">
          <i class="fa fa-sitemap me-1"></i> Ordre des catégories (Page d'Accueil)
        </a>
        <a href="javascript:void(0);"
          class="btn btn-outline-success btn-sm d-inline-flex align-items-center rounded-pill px-3"
          data-bs-toggle="modal" data-bs-target="#m_modal_new_category">
          <i class="fa fa-plus-circle me-1"></i> Ajouter une catégorie
        </a>
      {% else %}
        <a class="btn btn-secondary btn-sm rounded-pill px-3 disabled" href="javascript:;" data-bs-toggle="tooltip"
          title="Accès réservé — contactez l’administrateur">
          <i class="fa fa-plus-circle me-1"></i> Ajouter une catégorie
        </a>
      {% endif %}
    </div>
  </div>

{% endblock %}


{% block breadcrumb %}{% endblock %}
{% block stat %}{% endblock %}
{% block bodycontent %}
    <div class="row">
        <div class="col-lg-12">
            <!--begin::Portlet-->
            <div class="m-portlet">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                Glissez/déposez les catégories ci-dessous pour les réarranger.
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <!--begin::Section-->
                    <div class="m-section m-section--last">
                        <div class="m-section__content">
                            <div class="dd">
                                <ol class="dd-list">
                                    {% for category in categories %}
                                        <li class="dd-item" data-id="{{ category.id }}">
                                        <div class="dd-handle row-cat">

                                            <div class="col-left">
                                                <i class="fa fa-grip-vertical grip-icon" aria-hidden="true"></i>
                                                {% if category.icon %}<i class="{{ category.icon }} me-1"></i>{% endif %}
                                                <strong class="cat-name">{{ category.name }}</strong>
                                            </div>

                                            <div class="right d-flex align-items-center flex-wrap">
                                               {# compteur produits (icône + nombre)
                                                <span class="icon-flag count js-no-drag"
                                                        data-bs-toggle="tooltip" title="Nombre de produits">
                                                    <i class="fa fa-cubes"></i>
                                                    <span class="count-num">{{ category.produits|length }}</span>
                                                </span>
                                                #}
                                                {# affichage sur Page d'accueil #}
                                                <span class="icon-flag {{ category.showInHomepage ? 'on' : 'off' }} js-no-drag"
                                                        data-bs-toggle="tooltip"
                                                        title="{{ category.showInHomepage ? 'Affichée sur la page d’accueil' : 'Non affichée sur la page d’accueil' }}">
                                                    <i class="fa fa-home"></i>
                                                </span>

                                                {# affichage dans le Menu #}
                                                <span class="icon-flag {{ category.showInMenu ? 'on' : 'off' }} js-no-drag"
                                                        data-bs-toggle="tooltip"
                                                        title="{{ category.showInMenu ? 'Affichée dans le menu' : 'Non affichée dans le menu' }}">
                                                    <i class="fa fa-bars"></i>
                                                </span>

                                                {# statut actif/inactif (icône) #}
                                                <span class="icon-flag status {{ category.isActive ? 'on' : 'off' }} js-no-drag"
                                                    data-bs-toggle="tooltip"
                                                    title="{{ category.isActive ? 'Catégorie active' : 'Catégorie désactivée' }}">
                                                <i class="{{ category.isActive ? 'fa fa-check-circle' : 'fa fa-ban' }}"></i>
                                                </span>

                                            </div>

                                            <div class="col-right">
                                                <a href="{{ path('produit_index', {'category':category.id,'isAvailable':'All'}) }}"
                                                    class="btn btn-outline-info btn-sm js-no-drag" title="Voir les produits" target="_blank">
                                                    <i class="fa fa-list"></i>
                                                </a>
                                                <a class="btn btn-primary btn-sm js-no-drag modalEditCategory" title="Éditer" data-id="{{ category.id }}">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <a class="btn btn-outline-danger btn-sm js-no-drag deleteCategory" title="Supprimer" data-id="{{ category.id }}">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </div>

                                        </div>

                                        {% if category.subCategories %}
                                            <ol class="dd-list">
                                            {% for category in category.subCategories %}
                                                <li class="dd-item" data-id="{{ category.id }}">
                                                <div class="dd-handle row-cat">
                                                    <div class="col-left">
                                                        <i class="fa fa-grip-vertical grip-icon"></i>
                                                        {% if category.icon %}<i class="{{ category.icon }} me-1"></i>{% endif %}
                                                        <strong class="cat-name">{{ category.name }}</strong>
                                                    </div>
                                                    <div class="right d-flex align-items-center flex-wrap">
                                                        {# compteur produits (icône + nombre) #}
                                                        <span class="icon-flag count js-no-drag"
                                                                data-bs-toggle="tooltip" title="Nombre de produits">
                                                            <i class="fa fa-cubes"></i>
                                                            <span class="count-num">{{ category.produits|length }}</span>
                                                        </span>

                                                        {# affichage sur Page d'accueil #}
                                                        <span class="icon-flag {{ category.showInHomepage ? 'on' : 'off' }} js-no-drag"
                                                                data-bs-toggle="tooltip"
                                                                title="{{ category.showInHomepage ? 'Affichée sur la page d’accueil' : 'Non affichée sur la page d’accueil' }}">
                                                            <i class="fa fa-home"></i>
                                                        </span>

                                                        {# affichage dans le Menu #}
                                                        <span class="icon-flag {{ category.showInMenu ? 'on' : 'off' }} js-no-drag"
                                                                data-bs-toggle="tooltip"
                                                                title="{{ category.showInMenu ? 'Affichée dans le menu' : 'Non affichée dans le menu' }}">
                                                            <i class="fa fa-bars"></i>
                                                        </span>

                                                        {# statut actif/inactif (icône) #}
                                                        <span class="icon-flag status {{ category.isActive ? 'on' : 'off' }} js-no-drag"
                                                            data-bs-toggle="tooltip"
                                                            title="{{ category.isActive ? 'Catégorie active' : 'Catégorie désactivée' }}">
                                                            <i class="{{ category.isActive ? 'fa fa-check-circle' : 'fa fa-ban' }}"></i>
                                                        </span>

                                                        </div>

                                                    <div class="col-right">
                                                    <a href="{{ path('produit_index', {'category':category.id,'isAvailable':'All'}) }}"
                                                        class="btn btn-outline-info btn-sm js-no-drag" title="Voir les produits" target="_blank"><i class="fa fa-list"></i></a>
                                                    <a class="btn btn-primary btn-sm js-no-drag modalEditCategory" title="Éditer" data-id="{{ category.id }}"><i class="fas fa-edit"></i></a>
                                                    <a class="btn btn-outline-danger btn-sm js-no-drag deleteCategory" title="Supprimer" data-id="{{ category.id }}"><i class="fa fa-trash"></i></a>
                                                    </div>
                                                </div>

                                                {% if category.subCategories %}
                                                    <ol class="dd-list">
                                                    {% for category in category.subCategories %}
                                                        <li class="dd-item" data-id="{{ category.id }}">
                                                        <div class="dd-handle row-cat">
                                                            <div class="col-left">
                                                            <i class="fa fa-grip-vertical grip-icon"></i>
                                                            {% if category.icon %}<i class="{{ category.icon }} me-1"></i>{% endif %}
                                                            <strong class="cat-name">{{ category.name }}</strong>
                                                            </div>
                                                            <div class="right d-flex align-items-center flex-wrap">
                                                                {# compteur produits (icône + nombre) #}
                                                                    <span class="icon-flag count js-no-drag"
                                                                            data-bs-toggle="tooltip" title="Nombre de produits">
                                                                        <i class="fa fa-cubes"></i>
                                                                        <span class="count-num">{{ category.produits|length }}</span>
                                                                    </span>

                                                                    {# affichage sur Page d'accueil #}
                                                                    <span class="icon-flag {{ category.showInHomepage ? 'on' : 'off' }} js-no-drag"
                                                                            data-bs-toggle="tooltip"
                                                                            title="{{ category.showInHomepage ? 'Affichée sur la page d’accueil' : 'Non affichée sur la page d’accueil' }}">
                                                                        <i class="fa fa-home"></i>
                                                                    </span>

                                                                    {# affichage dans le Menu #}
                                                                    <span class="icon-flag {{ category.showInMenu ? 'on' : 'off' }} js-no-drag"
                                                                            data-bs-toggle="tooltip"
                                                                            title="{{ category.showInMenu ? 'Affichée dans le menu' : 'Non affichée dans le menu' }}">
                                                                        <i class="fa fa-bars"></i>
                                                                    </span>

                                                                    {# statut actif/inactif (icône) #}
                                                                    <span class="icon-flag status {{ category.isActive ? 'on' : 'off' }} js-no-drag"
                                                                        data-bs-toggle="tooltip"
                                                                        title="{{ category.isActive ? 'Catégorie active' : 'Catégorie désactivée' }}">
                                                                    <i class="{{ category.isActive ? 'fa fa-check-circle' : 'fa fa-ban' }}"></i>
                                                                    </span>

                                                                </div>
                                                            <div class="col-right">
                                                            <a href="{{ path('produit_index', {'category':category.id,'isAvailable':'All'}) }}"
                                                                class="btn btn-outline-info btn-sm js-no-drag" title="Voir les produits" target="_blank"><i class="fa fa-list"></i></a>
                                                            <a class="btn btn-primary btn-sm js-no-drag modalEditCategory" title="Éditer" data-id="{{ category.id }}"><i class="fas fa-edit"></i></a>
                                                            <a class="btn btn-outline-danger btn-sm js-no-drag deleteCategory" title="Supprimer" data-id="{{ category.id }}"><i class="fa fa-trash"></i></a>
                                                            </div>
                                                        </div>
                                                        </li>
                                                    {% endfor %}
                                                    </ol>
                                                {% endif %}
                                                </li>
                                            {% endfor %}
                                            </ol>
                                        {% endif %}
                                        </li>
                                    {% endfor %}
                                    </ol>

                            </div>
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>

        </div>
    </div>
    <div class="modal fade" id="m_modal_edit_category" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal_edit_content" id="modal_edit_content">
            </div>
        </div>
    </div>

    <div class="modal fade" id="m_modal_new_category" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal_edit_content" id="modal_new_content">
                {{ render(controller('App\\Controller\\Admin\\CategoriesController::modalNewCategory')) }}
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalHomepageCategories" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content" id="modalHomepageCategoriesContent">
            <div class="modal-body text-center py-5">
                <i class="fa fa-spinner fa-spin fa-2x"></i> Chargement…
            </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    {{ parent() }}
    <script src="//cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[name="filter_category"] .select2').select2();
            $('.dd').nestable({
                maxDepth:3 ,
                scroll: true,
                callback: function(l,e){
                    $.post(Routing.generate('nestable_save'), {
                        nestable: JSON.stringify($('.dd').nestable('serialize'))
                    }, function (data) {
                        toastr.success("Elément de menu réordonné avec succès.");
                    });
                }
            });

        });
      /*  MODAL : Édition catégorie (Bootstrap 5.3) */
    document.addEventListener('click', function (e) {

        const trigger = e.target.closest('a.modalEditCategory');
        if (!trigger) return;

        e.preventDefault();

        const id = trigger.getAttribute('data-id');
        const modalEl = document.getElementById('m_modal_edit_category');

        if (!modalEl) return;

        const dialog = modalEl.querySelector('.modal-dialog');

        /* Reset contenu */
        dialog.innerHTML = `
            <div class="modal-content">
                <div class="modal-body text-center py-5">
                    <i class="fa fa-spinner fa-spin fa-2x text-secondary"></i>
                    <div class="mt-2">Chargement…</div>
                </div>
            </div>
        `;

        /* Init / récup instance BS5 */
        const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
        modal.show();

        /* AJAX */
        $.ajax({
            url: Routing.generate('modal_edit_category', { id }),
            method: 'GET',
            success: function (response) {

                dialog.innerHTML = response;

                /* Rebind Select2 proprement */
                const $selects = $('#m_modal_edit_category .select2');
                if ($selects.length) {
                    $selects.select2({
                        dropdownParent: $('#m_modal_edit_category .modal-body'),
                        width: '100%'
                    });
                }
            }
        });

    });


         $(document).on('click', '.openHomepageModal', function (e) {
            e.preventDefault();
            var url = $(this).attr('href');

            const modalEl = document.getElementById('modalHomepageCategories');
            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            modal.show();

            $('#modalHomepageCategoriesContent').html('<div class="modal-body text-center py-5"><i class="fa fa-spinner fa-spin fa-2x"></i> Chargement…</div>');

            $.get(url, function (html) {
                $('#modalHomepageCategoriesContent').html(html);
            });
        });


       $('.dd').nestable({
            maxDepth: 3,
            scroll: true,
            noDragClass: 'js-no-drag'   // <- empêche le drag depuis ces éléments
        });



    </script>


{% endblock %}