{% extends'@admin/base.html.twig' %}
 {% block stylesheets %}
   {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/admin/fiche_produit.css') }}">

   <link href="{{ asset('build/vendors/image-picker/image-picker.css') }}" rel="stylesheet" type="text/css"/>
   <link href="{{ asset('build/vendors/custom/fullcalendar/fullcalendar.bundle.css') }}" rel="stylesheet" type="text/css"/>
   <link href="{{ asset('build/print/print.min.css') }}" rel="stylesheet" type="text/css"/>
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>


 {% endblock %}
 {# ===================== Scripts ===================== #}
{% block extra_scripts %}
 {{ parent() }}
  <script src="{{ asset('js/admin/product-functions.js') }}"></script>
{% endblock %}
{% block subheader %}
  <div class="badge-titre crm-title-bar d-flex justify-content-between align-items-center flex-wrap w-100 mb-3">
    <div class="crm-title-left">
      <span class="crm-badge">
        <i class="fa fa-box-open"></i>
      </span>

      <div>
        <h3 class="badge-title-main crm-title-main mb-0">
          FICHE PRODUIT
        </h3>

        <ul class="m-subheader__breadcrumbs m-nav m-nav--inline mt-1 mb-0 crm-title-meta">

          <li class="m-nav__item">Catalogue</li>
          <li class="m-nav__separator">-</li>
          <li class="m-nav__item">
            <a href="{{ path('produit_index') }}" class="m-nav__link text-dark">Produits</a>
          </li>
          <li class="m-nav__separator">-</li>
          <li class="m-nav__item">
            <span class="m-nav__link text-muted">
              {{ produit.name }} <span class="text-secondary">|</span> {{ produit.reference }}
            </span>
          </li>
        </ul>
      </div>
    </div>

    <div class="crm-title-right">
      <div class="crm-title-actions">
      {% if "PRODUIT_UPDATE" in rights %}
        <a href="#" class="btn btn-primary btn-sm modalEditProduit" data-produit="{{ produit.id }}">
          <i class="fas fa-edit me-1"></i> Modifier
        </a>
      {% endif %}


      </div>
    </div>

  </div>
{% endblock %}

{% block stat %}

{% endblock %}
{% block bodycontent %}
  <div class="grid_container">

    <div class="row gutters mt-3">
      {# === COLONNE GAUCHE : Détails produit et image principale === #}
    <div id="overview-leftpane" class="col-3 span_3">
    {% include '@admin/produit/_tab/_left_summary.html.twig' %}
  </div>

      <div class="col-9 span_9">
        <div class="gutters">
          <div class="col span_12">

            <div class="m-portlet">
              <div class="m-portlet__body">

                  <ul class="nav nav-tabs" role="tablist">

                    <li class="nav-item">
                        <a class="nav-link m-tabs__link"
                          data-bs-toggle="tab"
                          data-tab="content_informations"
                          href="#content_informations">
                            <i class="fa fa-info-circle me-1"></i> Infos
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link m-tabs__link"
                          data-bs-toggle="tab"
                          data-tab="content_decli"
                          href="#content_decli">
                            <i class="fa fa-sitemap me-1"></i> Déclinaisons
                        </a>
                    </li>

                    {% if "STOCK" in arrayRight or is_granted('ROLE_SUPER_ADMIN') %}
                        <li class="nav-item">
                            <a class="nav-link m-tabs__link"
                              data-bs-toggle="tab"
                              data-tab="info_stock"
                              href="#info_stock">
                                <i class="fa fa-warehouse me-1"></i> Stock
                            </a>
                        </li>
                    {% endif %}

                    <li class="nav-item">
                        <a class="nav-link m-tabs__link"
                          data-bs-toggle="tab"
                          data-tab="content_galery"
                          href="#content_galery">
                            <i class="fa fa-image me-1"></i> images
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link m-tabs__link"
                          data-bs-toggle="tab"
                          data-tab="content_pricing_promo"
                          href="#content_pricing_promo">
                            <i class="fa fa-tags me-1"></i> Tarifs & Promotions
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link m-tabs__link"
                          data-bs-toggle="tab"
                          data-tab="content_documents"
                          href="#content_documents">
                            <i class="fa fa-folder-open me-1"></i> Documents
                        </a>
                    </li>

                    {% if "STATISTIQUE" in arrayRight or is_granted('ROLE_SUPER_ADMIN') %}
                        <li class="nav-item">
                            <a class="nav-link m-tabs__link"
                              data-bs-toggle="tab"
                              data-tab="content_stats"
                              href="#content_stats">
                                <i class="fa fa-signal me-1"></i> Statistiques
                            </a>
                        </li>
                    {% endif %}

                    <li class="nav-item">
                        <a class="nav-link m-tabs__link"
                          data-bs-toggle="tab"
                          data-tab="content_commentsevents"
                          href="#content_commentsevents">
                            <i class="fa fa-comments me-1"></i> Commentaires
                            <span class="m-badge {{ produit.comments|length > 0 ? 'm-badge--danger' : '' }}">
                                {{ produit.comments|length }}
                            </span>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link m-tabs__link"
                          data-bs-toggle="tab"
                          data-tab="content_historique"
                          href="#content_historique">
                            <i class="fa fa-history me-1"></i> Historique
                        </a>
                    </li>

                </ul>


                  <div class="tab-content">
                    {# Onglet initial rendu côté serveur #}
                    {% include '@admin/produit/_tab/tab_infos.html.twig' %}

                    {# Onglets lazy: contenu chargé au clic #}
                    <div class="tab-pane" id="content_decli" role="tabpanel"
                        data-produit-id="{{ produit.id }}"
                        data-lazy-url="{{ path('produit_show_tab', {'id': produit.id, 'tab': 'content_decli'}) }}">
                      <div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin me-2"></i>Chargement…</div>
                    </div>

                    {% if "STOCK" in arrayRight or is_granted('ROLE_SUPER_ADMIN') %}
                    <div class="tab-pane" id="info_stock" role="tabpanel"
                        data-lazy-url="{{ path('produit_show_tab', {'id': produit.id, 'tab': 'info_stock'}) }}">
                      <div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin me-2"></i>Chargement…</div>
                    </div>
                    {% endif %}

                    <div class="tab-pane" id="content_galery" role="tabpanel"
                        data-lazy-url="{{ path('produit_show_tab', {'id': produit.id, 'tab': 'content_galery'}) }}">
                      <div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin me-2"></i>Chargement…</div>
                    </div>

                    <div class="tab-pane" id="content_pricing_promo" role="tabpanel"
                        data-lazy-url="{{ path('produit_show_tab', {'id': produit.id, 'tab': 'content_pricing_promo'}) }}">
                      <div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin me-2"></i>Chargement…</div>
                    </div>

                    <div class="tab-pane" id="content_documents" role="tabpanel"
                        data-lazy-url="{{ path('produit_show_tab', {'id': produit.id, 'tab': 'content_documents'}) }}">
                      <div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin me-2"></i>Chargement…</div>
                    </div>

                    {% if "STATISTIQUE" in arrayRight or is_granted('ROLE_SUPER_ADMIN') %}
                    <div class="tab-pane" id="content_stats" role="tabpanel"
                        data-lazy-url="{{ path('produit_show_tab', {'id': produit.id, 'tab': 'content_stats'}) }}">
                      <div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin me-2"></i>Chargement…</div>
                    </div>
                    {% endif %}

                    <div class="tab-pane" id="content_commentsevents" role="tabpanel"
                        data-lazy-url="{{ path('produit_show_tab', {'id': produit.id, 'tab': 'content_commentsevents'}) }}">
                      <div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin me-2"></i>Chargement…</div>
                    </div>

                    <div class="tab-pane" id="content_historique" role="tabpanel"
                        data-lazy-url="{{ path('produit_show_tab', {'id': produit.id, 'tab': 'content_historique'}) }}">
                      <div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin me-2"></i>Chargement…</div>
                    </div>


                  </div>

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


          <div class="row gutters1">
            <div class="col span_12">
              <div id="itemVerticalTab">
                <div class="tab-v-container row gutters1">
                  <div class="col-12 span_9 sub-leftpane-fix-content">
                    <div class="tab-v-content">
                      <div id="info_stock" class="content-block hidden" style="display: none;">
                        {% if "STOCK" in rights %}
                          {% if produit.produitDeclinationValues %}
                            <div class="row gutters1">
                              <div class="col span_12">
                                <h3 class="mt-0 title-h3">Informations du stock</h3>
                                {% set total = 0 %}
                                {% set reserved = 0 %}
                                <table class="table table-striped table-hover">
                                  {% for declinationValue in produit.produitDeclinationValues %}
                                    {% for stock in declinationValue.stocks %}
                                      {% set total = total + stock.qtStock %}
                                      {% set reserved = reserved + stock.qtReserved %}
                                    {% endfor %}
                                  {% endfor %}
                                  <tbody>
                                    <tr>
                                      <td>Valorisation</td>
                                      <td>{{ total * produit.buyingPriceTtc }} <sup>TND</sup></td>
                                    </tr><tr>
                                      <td>Qt en stock</td>

                                      <td>{{ total }}</td>
                                    </tr>
                                    <tr>
                                      <td>Qt réservée</td>
                                      <td>{{ reserved }}</td>
                                    </tr>
                                    <tr>
                                      <td>Qt disponible</td>
                                      <td>{{ total - reserved }}</td>
                                    </tr>
                                    <tr>
                                      <td>Methode du stock</td>
                                      <td>Aucune</td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                            <div class="row gutters1 mt-3">
                              <div class="col span_12">
                                <header class="ov-auto mb-2">
                                  <h3 class="m-0 dinlineb title-h3">Stock et entrepôt</h3>

                                </header>
                                <div class="stockTables" style="margin-bottom: 0px;">
                                  <table class="table table-striped table-hover">
                                    <tbody>
                                      <tr>
                                        <th style="width: 140px;">Entrepôt</th>
                                        <th style="width: 170px;">Reference</th>
                                        <th>Quantité totale</th>
                                        <th>Quantité réservée</th>
                                        <th>Quantité disponible</th>
                                        <th></th>
                                      </tr>
                                      {% for declinationValue in produit.produitDeclinationValues %}
                                        {% for stock in declinationValue.stocks %}
                                          <tr>
                                            <td>Entrepôt {{ stock.storehouse }}</td>
                                            <td>{{ declinationValue.reference }}</td>
                                            <td>{{ stock.qtStock }}</td>
                                            <td>{{ stock.qtReserved }}</td>
                                            <td>{{ stock.qtStock - stock.qtReserved }}</td>
                                            {% if "STOCK_UPDATE" in rights %}
                                              <td>
                                                <a href="#" id="modal_edit_stock" class="btn btn-dark m-btn m-btn--icon m-btn--icon-only m-btn--pill m-btn--air" data-bs-toggle="modal" data-stock="{{ stock.id }}">
                                                  <i class="fa fa-refresh"></i>
                                                </a>
                                              </td>
                                            {% endif %}
                                          </tr>
                                        {% endfor %}
                                      {% endfor %}
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            </div>
                          {% elseif produit.stocks %}
                            <div class="row gutters1">
                              <div class="col span_12">
                                <h3 class="mt-0 title-h3">Informations du stock</h3>
                                {% set totalStock = 0 %}
                                {% set reservedStock = 0 %}
                                {% for stock in produit.stocks %}
                                  {% set totalStock = totalStock + stock.qtStock %}
                                  {% set reservedStock = reservedStock + stock.qtReserved %}
                                {% endfor %}
                                <table class="table table-striped table-hover">
                                  <tbody>
                                    <tr>
                                      <td>Valorisation</td>
                                      <td>{{ totalStock * produit.buyingPriceTtc }} <sup>TND</sup></td>
                                    </tr><tr>
                                      <td>Qt en stock</td>
                                      <td>{{ totalStock }}</td>
                                    </tr>
                                    <tr>
                                      <td>Qt réservée</td>
                                      <td>{{ reservedStock }}</td>
                                    </tr>
                                    <tr>
                                      <td>Qt disponible</td>
                                      <td>{{ totalStock - reservedStock }}</td>
                                    </tr>
                                    <tr>
                                      <td>Methode du stock</td>
                                      <td>Aucune</td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                            <div class="row gutters1 mt-3">
                              <div class="col span_12">
                                <header class="ov-auto mb-2">
                                  <h3 class="m-0 dinlineb title-h3">Stock et entrepôt</h3>
                                  <ul class="action-nav action-nav-small-btn fright">
                                    <li>
                                      <a href="javascript:void(0);" onclick="Stock.stockAdjustOnChild()">Mouvement stock manuel</a>
                                    </li>
                                  </ul>
                                </header>
                                <div class="stockTables" style="margin-bottom: 0px;">
                                  <table class="table table-striped table-hover">
                                    <tbody>
                                      <tr>
                                        <th style="width: 140px;">Entrepôt</th>
                                        <th>Quantité totale</th>
                                        <th>Quantité réservée</th>
                                        <th>Quantité disponible</th>
                                      </tr>
                                      {% for stock in produit.stocks %}
                                        <tr>
                                          <td>Entrepôt {{ stock.storehouse }}</td>
                                          <td>{{ stock.qtStock }}</td>
                                          <td>{{ stock.qtReserved }}</td>
                                          <td>{{ stock.qtStock - stock.qtReserved }}</td>
                                        </tr>
                                      {% endfor %}
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            </div>
                          {% else %}
                            <div class="row gutters1">
                              <div class="col span_12">
                                <h3 class="mt-0 title-h3">Informations du stock</h3>
                                <table class="table table-striped table-hover">
                                  <tbody>
                                    <tr>
                                      <td>Valorisation</td>
                                      <td>0 <sup>TND</sup></td>
                                    </tr><tr>
                                      <td>Qt en stock</td>
                                      <td>0</td>
                                    </tr>
                                    <tr>
                                      <td>Qt réservée</td>
                                      <td>0</td>
                                    </tr>
                                    <tr>
                                      <td>Qt disponible</td>
                                      <td>0</td>
                                    </tr>
                                    <tr>
                                      <td>Methode du stock</td>
                                      <td>Aucune</td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                            <div class="row gutters1 mt-3">
                              <div class="col span_12">
                                <header class="ov-auto mb-2">
                                  <h3 class="m-0 dinlineb title-h3">Stock et entrepôt</h3>
                                  <ul class="action-nav action-nav-small-btn fright">
                                    <li>
                                      <a href="javascript:void(0);" onclick="Stock.stockAdjustOnChild()">Mouvement stock manuel</a>
                                    </li>
                                  </ul>
                                </header>
                                <div class="stockTables" style="margin-bottom: 0px;">
                                  <table class="table table-striped table-hover">
                                    <tbody>
                                      <tr>
                                        <th style="width: 140px;">Entrepôt</th>
                                        <th>Quantité totale</th>
                                        <th>Quantité réservée</th>
                                        <th>Quantité disponible</th>
                                      </tr>
                                      <tr>
                                        <td>Entrepôt Principal</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            </div>
                          {% endif %}
                        {% endif %}
                      </div>
                      <div id="content_customfields" class="content-block hidden" style="display: none;">
                        <h3 class="mt-0 dinlineb">Champs personnalisés produit</h3>
                        <div class="row gutters1">
                          <div>
                            <div>
                              <div class="placeholder">
                                <p>Il n’y a aucun champ personnalisé pour le moment</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div id="content_historique" class="content-block hidden" style="display: none;">
                        <div class="row gutters1">
                          <div class="col span_12">
                            <div class="placeholder">
                              <div class="m-portlet__body">
                                <div class="m-scrollable mCustomScrollbar _mCS_5 mCS-autoHide" data-scrollbar-shown="true" data-scrollable="true" data-max-height="380" style="overflow: visible; height: 380px; max-height: 380px; position: relative;">
                                  <div class="container-timeline">
                                    <div class="row">
                                      <div class="col-md-12">
                                        <div class="card">
                                          <div class="card-body">
                                            <h3 class="card-title">Historique</h3>
                                            <div id="content">
                                              <ul class="timeline">
                                                {% for activity in produit.activities %}
                                                  <li class="event" data-date="{{ activity.createdAt|date("d/m/Y H:m") }}">
                                                    {% if activity.type == 'info' %}
                                                      <span class="m-badge m-badge--info m-badge--wide">Info</span>
                                                    {% elseif activity.type == 'danger' %}
                                                      <span class="m-badge m-badge--danger m-badge--wide">Error</span>
                                                    {% else %}
                                                      <span class="m-badge m-badge--success m-badge--wide">Message</span>
                                                    {% endif %}
                                                    <p>{{ activity.message }}</p>
                                                  </li>
                                                {% endfor %}
                                              </ul>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="content_associateditems" class="content-block hidden" style="display: none;">
                        <div class="row gutters1">
                          <h3 class="mt-0">Produits associés</h3>
                          <div class="col span_12">
                            <div class="alert alert-info">Les produits associés seront proposés dans les fiches produits de vos boutiques e-commerce</div>
                            <div class="mb-3">
                              <div class="form-input">
                                <span class="input-addon input-addon-select prepend" style="padding: 3px 15px;">Ajouter un produit associé</span>
                                <ul class="token-input-list">
                                  <li class="token-input-input-token">
                                    <input type="text" autocomplete="off" id="token-input-associatedItemAdd" class="token-input-placeholder" style="outline: none;">
                                  <tester style="position: absolute; top: -9999px; left: -9999px; width: auto; font-size: 12px; font-family: ProximaNova, Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: 0px; white-space: nowrap;"></tester>
                                  </li>
                                </ul>
                                <input type="text" id="associatedItemAdd" name="associatedItemAdd" e_autoitem="item|service" e_autoitemmore="declid" e_autoitemmax="1" placeholder="Choisisser un produit" e_autoitemcallback="associatedItem.addForItem('9050776_1950564', item)" style="display: none;">
                              </div>
                            </div>
                            <div id="itemAssociatedList">
                              <div class="placeholder">
                                <p>Vous n’avez pour l’instant aucun produit associé. Utilisez le champ ci-dessus pour en ajouter.</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="content_briefcase" class="row hidden" style="display: none;">
                        <div id="briefcasev2tab">
                          <div class="aright">
                            <div template="qqtpl-uploadRelatedFile" maxuploadsize="15728640" alloweduploadtypes="rtf,txt,jpg,jpeg,png,pdf,xml,xsl,csv,xls,zip,xlsx,doc,docx,ppt,pptx,json,dxf,dwg,svg,psd,ai,eps,indd,gdoc,avi,mp3,m4a,mp4,rar,gif,gplf,gform,gsheet,gslides,gdraw,ods,odt,odp,odg,odf,sat,wav,wave,wmv,xlsm,stl,ped,tgz,kmz,kml,ppsx,tiff,tif,amr,vcf,cdr,ar3,eml,mmap,msg,skp,ics,tnef,webp" uploadfile="true" multipleupload="true" backjs="BriefCaseV2Light.addIt(data)" action="?_f=uploadFile&amp;action=uploadRelatedFile&amp;relatedType=item&amp;relatedId=9050776" class="fileUpload uploadfilesetup">
                              <div class="qq-uploader-selector qq-uploader span12">
                                <div class="qq-upload-drop-area-selector qq-upload-drop-area span12" qq-hide-dropzone="" style="display: none;">
                                  <p><i class="fa icon-folder"></i><span>Glissez vos fichiers ici</span></p>
                                </div>
                                <div class="qq-upload-button-selector qq-upload-button qq-upload-button-tab btn btn-primary btn-small" style="width: auto; height: auto; position: relative; overflow: hidden; direction: ltr;">
                                  <div>Ajouter un document</div>
                                  <input qq-button-id="27a30a38-cbd9-4175-a9e7-db485e54c9a8" title="file input" multiple="" type="file" name="qqfile" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0; height: 100%;">
                                </div>
                                <ul class="qq-upload-list-selector qq-upload-list"></ul>
                              </div>
                            </div>
                            <script type="text/template" id="qqtpl-uploadRelatedFile" style="display: none;"><div class="qq-uploader-selector qq-uploader span12"><div class="qq-upload-drop-area-selector qq-upload-drop-area span12" qq-hide-dropzone=""><p><i class="fa icon-folder"></i><span>Glissez vos fichiers ici</span></p></div><div class="qq-upload-button-selector qq-upload-button qq-upload-button-tab btn btn-primary btn-small" style="width:auto;height:auto;"><div>Ajouter un document</div></div><ul class="qq-upload-list-selector qq-upload-list"><li><div class="qq-upload-details"><span class="qq-upload-spinner-selector qq-upload-spinner"></span><span class="qq-upload-file-selector qq-upload-file"></span><i class="icon-task qq-upload-check hidden fright ps-4"></i><span class="qq-upload-size-selector qq-upload-size fright ps-4"></span><a class="qq-upload-cancel-selector qq-upload-cancel" href="#"><i class="fa icon-close"></i></a><span class="qq-upload-status-text-selector qq-upload-status-text"></span></div><div class="qq-progress-bar-container-selector"><div class="qq-progress-bar-selector qq-progress-bar"></div></div><div class="clear"></div></li></ul></div></script>
                          </div>
                          <div class="clear"></div>
                          <a href="javascript:void(0);" onclick="BriefCaseV2Light.downloadLinkedDocs('item', '9050776')" tips="Télécharger le ZIP" class="blue fright ms-3 mt-3 me-3" data-hasqtip="28">Télécharger le dossier</a>
                          <div class="folderUploader"><a href="javascript:void(0);" onclick="BriefCaseV2Light.createDir('55157514')" class="blue fright ms-3 mt-3">Créer un dossier</a></div>
                          <ul class="structure">
                            <li id="folder_55157514" type="folder" class="lightbf_row open alreadyOpenned">
                              <div class="one-droppable ui-droppable"><a href="javascript:void(0);" onclick="BriefCaseV2Light.toggleDir('55157514')" class="briefcase-toggler-close briefcase-toggler-open"></a><i alt="testprod" class="fa fa-17 fa-folder" style="color: rgb(110, 170, 245); margin-right: 3px;"></i><a href="javascript:void(0);" onclick="BriefCaseV2Light.toggleDir('55157514')">testprod</a></div>
                              <div class="sub">
                                <ul xmlns:php="http://php.net/xsl" xmlns:og="http://ogp.me/ns#" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" class="lightbf_lvl"></ul>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div id="content_documents_legacy" class="row content-block hidden" style="display: none;">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>



        <div class="clear"></div>
      </div>
    </div>
  </div>

  {#--Liste des déclinaisons à afficher en fenêtre modal--#}
  {% include '@admin/includes/modals/_produit_declinaisons_modal.html.twig' %}


  {#--Fin Liste des déclinaisons--#}


  <div class="modal fade" id="m_modal_ajax" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content" id="modal_content">
            <div id="modal-loader" class="text-center py-5">
                <div class="spinner-border text-dark" role="status">
                  <span class="visually-hidden">Chargement...</span>
                </div>
                <div class="mt-2">Chargement du formulaire...</div>
            </div>
        </div>
    </div>
  </div>



    <div class="modal fade" id="m_edit_stock" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content" id="edit_stock_content"> </div>
        </div>
    </div>

     {# Modal AJAX générique  #}
      <div class="modal fade" id="ajaxModal" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
              <div class="modal-content" id="ajaxModalContent"></div>
          </div>
      </div>
{% endblock %}



{% block js %}
  {{ parent() }}
  <script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>
  <script>

      //$(document).ready(function () {

        $('.select2').select2({ width: '100%' });

    //});

    (function () {
      var storageKey = 'produit_active_tab';

      function getActiveTabKey() {
        var $active = $('.nav-tabs .nav-link.active[data-tab]');
        if ($active.length) {
          return $active.data('tab');
        }
        var url = new URL(window.location.href);
        return url.searchParams.get('tab') || '';
      }

      function setTabInputValue($form, tab) {
        if ($form.find('input[name="tab"]').length) {
          $form.find('input[name="tab"]').val(tab);
        } else {
          $form.append('<input type="hidden" name="tab" value="' + tab + '">');
        }
      }

      var savedTab = sessionStorage.getItem(storageKey);
      if (!new URL(window.location.href).searchParams.get('tab') && savedTab) {
        var savedEl = document.querySelector('.nav-tabs .nav-link[data-tab="' + savedTab + '"]');
        if (savedEl) {
          if (window.bootstrap && bootstrap.Tab) {
            bootstrap.Tab.getOrCreateInstance(savedEl).show();
          } else {
            savedEl.click();
          }
        }

      }

      $(document).on('shown.bs.tab', 'a[data-bs-toggle="tab"][data-tab]', function (e) {
        var tab = $(e.target).data('tab');
        if (tab) {
          sessionStorage.setItem(storageKey, tab);
        }
      });

      $(document).on('submit', 'form', function () {
        var tab = getActiveTabKey() || sessionStorage.getItem(storageKey);
        if (!tab) {
          return;
        }
        setTabInputValue($(this), tab);
      });
    })();


    $('.loader-submit').on('click', function () {
      var btn = $(this);
      btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Chargement...');
      btn.closest('form').submit();
    });

    if (window.ProductTabs && typeof window.ProductTabs.initInfoTab === 'function') {
      window.ProductTabs.initInfoTab();
    }


    (function () {
      var loadedTabs = {};
        var $active = $('.nav-tabs .nav-link.active[data-tab]');
        if ($active.length) {
          loadedTabs[$active.data('tab')] = true;
        } else {
          loadedTabs['content_informations'] = true;
      }


      function initDynamicUi($scope) {
        // Select2
        $scope.find('.select2').each(function () {
          var $el = $(this);
          if ($el.hasClass('select2-hidden-accessible')) {
            $el.select2('destroy');
          }
          $el.select2({ width: '100%' });
        });

        // Tooltips BS5
        $scope.find('[data-bs-toggle="tooltip"]').each(function () {
          if (window.bootstrap && bootstrap.Tooltip) {
            bootstrap.Tooltip.getOrCreateInstance(this);
          }
        });
      }

      function loadProduitTab(tabId) {
        if (!tabId || loadedTabs[tabId]) return;

        var $pane = $('#' + tabId);
        if (!$pane.length) return;

        var url = $pane.data('lazy-url');
        if (!url) return;

        $pane.html('<div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin me-2"></i>Chargement…</div>');

        $.get(url)
          .done(function (html) {
            var $tmp = $('<div>').html(html);

            // Injecter les modales définies hors tab-pane (une seule fois)
            $tmp.find('.modal[id]').each(function () {
              var id = this.id;
              if (!id) return;
              if (!document.getElementById(id)) {
                document.body.appendChild(this);
              }
            });


            // styles
            $tmp.filter('style').add($tmp.find('style')).each(function () {
              var css = $(this).html() || '';
              if (!css.trim()) return;
              var key = 'lazy-style-' + btoa(unescape(encodeURIComponent(css))).slice(0, 40);
              if (!document.getElementById(key)) {
                var s = document.createElement('style');
                s.id = key;
                s.appendChild(document.createTextNode(css));
                document.head.appendChild(s);
              }
            });

            // html pane
            var $fromResponse = $tmp.find('#' + tabId).first();
            var inner = $fromResponse.length ? $fromResponse.html() : html;
            if ($fromResponse.length) {
              Array.from($fromResponse.get(0).attributes).forEach(function (attr) {
                if (attr.name.indexOf('data-') === 0) {
                  $pane.attr(attr.name, attr.value);
                }
              });
            }
            $pane.html(inner);


            if (window.ProductTabs) {


              if (tabId === 'content_decli' && typeof window.ProductTabs.initDeclinaisonsTab === 'function') {
                window.ProductTabs.initDeclinaisonsTab();
              }

              if (tabId === 'info_stock' && typeof window.ProductTabs.initStockTab === 'function') {
                window.ProductTabs.initStockTab();
              }

              if (tabId === 'content_galery' && typeof window.ProductTabs.initPhotosTab === 'function') {
                window.ProductTabs.initPhotosTab();
              }

              if (tabId === 'content_pricing_promo' && typeof window.ProductTabs.initTarifPromotionsTab === 'function') {
                window.ProductTabs.initTarifPromotionsTab();
              }

              if (tabId === 'content_stats' && typeof window.ProductTabs.initStatsTab === 'function') {
                window.ProductTabs.initStatsTab();
              }

              if (tabId === 'content_documents' && typeof window.ProductTabs.initDocumentsTab === 'function') {
                  window.ProductTabs.initDocumentsTab();
                }

            }


            // scripts inline
            $tmp.filter('script').add($tmp.find('script')).each(function () {
              var code = this.text || this.textContent || this.innerHTML || '';
              if (code.trim()) {
                try { $.globalEval(code); } catch (e) { console.error(e); }
              }
            });

            loadedTabs[tabId] = true;
            initDynamicUi($pane);
          })

          .fail(function () {
            $pane.html('<div class="alert alert-danger m-3">Erreur de chargement de l’onglet. Réessayez.</div>');
          });
      }

      // Chargement lazy au clic onglet
      $(document).on('show.bs.tab', 'a[data-bs-toggle="tab"][data-tab]', function (e) {
        loadProduitTab($(e.target).data('tab'));
      });

      // Si un onglet restauré depuis sessionStorage est déjà actif à l'ouverture
      var $active = $('.nav-tabs .nav-link.active[data-tab]');
      if ($active.length) {
        loadProduitTab($active.data('tab'));
      }
    })();


  </script>
{% endblock %}