{% 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"/>
{% endblock %}

{% block extra_scripts %}
  <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-tag"></i></span>
      <div>
        <h3 class="badge-title-main crm-title-main mb-0">FICHE DÉCLINAISON</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">
            <a href="{{ path('produit_show', {'id': declinaison.produit.id }) }}" class="m-nav__link text-dark">
              {{ declinaison.produit.reference }}
            </a>
          </li>
          <li class="m-nav__separator">-</li>
          <li class="m-nav__item">
            <span class="m-nav__link text-muted">{{ declinaison.reference }} | {{ declinaison.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}
{% block stat %}{% endblock %}

{% block bodycontent %}
  <div class="grid_container">
    <div class="row gutters mt-3">

      {# Colonne gauche (resume declinaison) #}
      <div id="overview-leftpane" class="col-12 col-md-4 col-lg-3 px-0 mb-4">
        {% include '@admin/produit_declination_value/_tab/_left_summary.html.twig' %}
      </div>

      {# Colonne droite (onglets) #}
      <div class="col-9 span_9">
        <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>

              {% 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_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_galery" href="#content_galery">
                  <i class="fa fa-image me-1"></i> Photos
                </a>
              </li>

              <li class="nav-item">
                <a class="nav-link m-tabs__link" data-bs-toggle="tab" data-tab="content_other_declinaisons" href="#content_other_declinaisons">
                  <i class="fa fa-tags me-1"></i> Autres declinaisons
                </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>

              <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 {{ declinaison.produit.comments|length > 0 ? 'm-badge--danger' : '' }}">
                    {{ declinaison.produit.comments|length }}
                  </span>
                </a>
              </li>
            </ul>

            <div class="tab-content">
              {% include '@admin/produit_declination_value/_tab/tab_infos.html.twig' %}
              {% include '@admin/produit_declination_value/_tab/tab_stock.html.twig' %}
              {% include '@admin/produit_declination_value/_tab/tab_tarif_promotions.html.twig' %}
              {% include '@admin/produit_declination_value/_tab/tab_photos.html.twig' %}
              {% include '@admin/produit_declination_value/_tab/tab_other_declinaisons.html.twig' %}
              {% include '@admin/produit_declination_value/_tab/tab_documents.html.twig' %}
              {% include '@admin/produit_declination_value/_tab/tab_commentaires.html.twig' %}
            </div>

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

    </div>
  </div>

  <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>
    </div>
  </div>
{% endblock %}

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

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

      function setTabInputValue(form, tab) {
        var existing = form.querySelector('input[name="tab"]');
        if (existing) existing.value = tab;
        else {
          var hidden = document.createElement('input');
          hidden.type = 'hidden';
          hidden.name = 'tab';
          hidden.value = tab;
          form.appendChild(hidden);
        }
      }

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

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

      document.addEventListener('submit', function (e) {
        var form = e.target.closest('form');
        if (!form) return;
        var tab = getActiveTabKey() || sessionStorage.getItem(storageKey);
        if (tab) setTabInputValue(form, tab);
      });
    })();

    window.DeclinaisonTabs = window.DeclinaisonTabs || {};

    window.DeclinaisonTabs.refreshSection = function (selector, onDone) {
      var url = new URL(window.location.href);
      var activeTab = sessionStorage.getItem('decli_active_tab');
      if (activeTab) {
        url.searchParams.set('tab', activeTab);
      }

      fetch(url.toString(), {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      })
        .then(function (response) { return response.text(); })
        .then(function (html) {
          var parser = new DOMParser();
          var doc = parser.parseFromString(html, 'text/html');
          var next = doc.querySelector(selector);
          var current = document.querySelector(selector);

          if (!next || !current) {
            if (typeof onDone === 'function') onDone(false);
            return;
          }

          current.innerHTML = next.innerHTML;
          if (typeof onDone === 'function') onDone(true);
        })
        .catch(function () {
          if (typeof onDone === 'function') onDone(false);
        });
    };

    window.DeclinaisonTabs.refreshTab = function (tabId, onDone) {
      window.DeclinaisonTabs.refreshSection('#' + tabId, function (ok) {
        if (tabId === 'content_informations' && ok && typeof window.DeclinaisonTabs.initInfoEditor === 'function') {
          window.DeclinaisonTabs.initInfoEditor();
        }
        if (typeof onDone === 'function') onDone(ok);
      });
    };

    window.DeclinaisonTabs.refreshLeftSummary = function (onDone) {
      window.DeclinaisonTabs.refreshSection('#overview-leftpane', onDone);
    };

    window.DeclinaisonTabs.refreshTabAndSummary = function (tabId, onDone) {
      window.DeclinaisonTabs.refreshTab(tabId, function (okTab) {
        window.DeclinaisonTabs.refreshLeftSummary(function (okSummary) {
          if (typeof onDone === 'function') onDone(okTab && okSummary);
        });
      });
    };

    window.DeclinaisonTabs.submitInfoForm = function () {
      var form = document.querySelector('form.js-declination-info-form');
      if (!form) return;

      var button = form.querySelector('.js-declination-info-save');
      var formData = new FormData(form);

      if (window.declinaisonInfoEditor && typeof window.declinaisonInfoEditor.getData === 'function') {
        formData.set('form_info[description]', window.declinaisonInfoEditor.getData());
      }

      if (button) button.disabled = true;

      fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      })
        .then(function (response) { return response.json(); })
        .then(function (data) {
          if (!data || data.result !== 1) {
            throw new Error((data && data.message) || 'Erreur lors de l enregistrement des informations.');
          }

          window.DeclinaisonTabs.refreshTabAndSummary('content_informations', function () {
            if (typeof toastr !== 'undefined') {
              toastr.success(data.message || 'Informations de la declinaison mises a jour.');
            }
          });
        })
        .catch(function (error) {
          if (typeof Swal !== 'undefined') {
            Swal.fire({
              icon: 'error',
              title: 'Enregistrement impossible',
              text: error.message || 'Erreur lors de l enregistrement des informations.'
            });
          }
        })
        .finally(function () {
          if (button) button.disabled = false;
        });
    };

    window.DeclinaisonTabs.submitPhotosForm = function () {
      var form = document.querySelector('form.js-declination-upload-images-form');
      if (!form) return;

      var button = document.getElementById('saveDeclinaisonImagesBtn');
      var fileInput = form.querySelector('input[type="file"][name*="[picture]"]');
      if (!fileInput || !fileInput.files || !fileInput.files.length) {
        if (typeof Swal !== 'undefined') {
          Swal.fire({
            icon: 'warning',
            title: 'Aucune image selectionnee',
            text: 'Selectionnez au moins une image avant l enregistrement.'
          });
        }
        return;
      }

      if (button) button.disabled = true;

      fetch(form.action, {
        method: 'POST',
        body: new FormData(form),
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      })
        .then(function (response) { return response.json(); })
        .then(function (data) {
          if (!data || data.success !== true) {
            throw new Error((data && data.message) || 'Erreur d enregistrement des images.');
          }

          window.DeclinaisonTabs.refreshTabAndSummary('content_galery', function () {
            if (typeof toastr !== 'undefined') {
              toastr.success(data.message || 'Images ajoutees avec succes.');
            }
          });
        })
        .catch(function (error) {
          if (typeof Swal !== 'undefined') {
            Swal.fire({
              icon: 'error',
              title: 'Enregistrement impossible',
              text: error.message || 'Erreur d enregistrement des images.'
            });
          }
        })
        .finally(function () {
          if (button) button.disabled = false;
        });
    };

    document.addEventListener('click', function (e) {
      var stockHistoryBtn = e.target.closest('.modal_stock_history');
      if (stockHistoryBtn) {
        e.preventDefault();
        var stockId = stockHistoryBtn.getAttribute('data-stock');
        var modalEl = document.getElementById('modalStockHistory');
        var content = document.getElementById('stockHistoryContent');
        if (!stockId || !modalEl || !content || typeof Routing === 'undefined') return;

        content.innerHTML = '<div class="p-4 text-center"><i class="fa fa-spinner fa-spin"></i></div>';
        if (window.bootstrap) {
          bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }

        fetch(Routing.generate('stock_history_declinaison', { id: stockId }), {
          headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
          .then(function (response) { return response.text(); })
          .then(function (html) {
            content.innerHTML = html;
          })
          .catch(function () {
            content.innerHTML = '<div class="alert alert-danger mb-0">Erreur de chargement.</div>';
          });
        return;
      }

      var editDeclinationBtn = e.target.closest('.updateDeclination');
      if (editDeclinationBtn) {
        e.preventDefault();
        var url = editDeclinationBtn.getAttribute('data-url');
        var modalBody = document.getElementById('modal_content');
        var modalEl = document.getElementById('m_modal_ajax');
        if (!url || !modalBody || !modalEl) return;

        modalBody.innerHTML = '<div class="p-4 text-center"><i class="fa fa-spinner fa-spin"></i></div>';
        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
          .then(function (response) { return response.text(); })
          .then(function (html) {
            modalBody.innerHTML = html;
            if (window.bootstrap) {
              bootstrap.Modal.getOrCreateInstance(modalEl).show();
            }
          });
      }
    });

    document.addEventListener('change', function (e) {
      var input = e.target.closest('#content_galery input[type="file"][name*="[picture]"]');
      if (!input) return;

      var preview = document.getElementById('selectedFilePreview');
      var count = document.getElementById('selectedFileCount');
      var names = document.getElementById('selectedFileNames');
      var clearBtn = document.getElementById('clearAllSelectedImages');
      if (!preview || !count || !names) return;

      preview.innerHTML = '';
      names.textContent = '';

      var files = Array.from(input.files || []);
      count.textContent = files.length + (files.length > 1 ? ' selectionnees' : ' selectionnee');
      if (clearBtn) clearBtn.style.display = files.length ? '' : 'none';

      files.forEach(function (file, idx) {
        var reader = new FileReader();
        reader.onload = function (evt) {
          preview.insertAdjacentHTML('beforeend',
            '<div class="selected-preview-item position-relative" data-index="' + idx + '">' +
              '<img src="' + evt.target.result + '" alt="" title="' + (file.name || '').replace(/"/g, '&quot;') + '">' +
            '</div>'
          );
        };
        reader.readAsDataURL(file);
      });
    });

    document.addEventListener('submit', function (e) {
      var uploadForm = e.target.closest('form.js-declination-upload-images-form');
      if (uploadForm) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
      }
    });

    window.DeclinaisonTabs.initInfoEditor = function () {
      var textarea = document.querySelector('#item_notes');
      if (!textarea || typeof ClassicEditor === 'undefined') {
        return;
      }

      if (window.declinaisonInfoEditor && typeof window.declinaisonInfoEditor.destroy === 'function') {
        window.declinaisonInfoEditor.destroy().catch(function () {});
        window.declinaisonInfoEditor = null;
      }

      ClassicEditor.create(textarea)
        .then(function (editor) {
          window.declinaisonInfoEditor = editor;
        })
        .catch(function (error) { console.error(error); });
    };

    window.DeclinaisonTabs.initInfoEditor();
  </script>
{% endblock %}