/* =====================================================
   MZIONA CUSTOM JAVASCRIPT
===================================================== */


/* =====================================================
   1) ربط نموذج التواصل مع Google Forms
===================================================== */

document.addEventListener('DOMContentLoaded', function () {

  const form = document.querySelector(".mziona-contact-form form");

  if (!form) return;

  form.onsubmit = function (e) {

    e.preventDefault();

    const inputs = form.querySelectorAll("input");
    const textarea = form.querySelector("textarea");

    const data = new URLSearchParams();

    data.append("entry.960599253", inputs[0]?.value || "");
    data.append("entry.701474463", inputs[1]?.value || "");
    data.append("entry.268227693", inputs[2]?.value || "");
    data.append("entry.1530854721", textarea?.value || "");

    fetch(
      "https://docs.google.com/forms/d/e/1FAIpQLSd0uI9BSpmKkz1sJIh0vuraWxRhwVO6kTN0-XuvpJ98nsBIxA/formResponse",
      {
        method: "POST",
        mode: "no-cors",
        body: data
      }
    );

    alert("تم إرسال رسالتك بنجاح ✨");

    form.reset();
  };

});



/* =====================================================
   2) إخفاء عداد الزوار خارج الرئيسية
===================================================== */

document.addEventListener('DOMContentLoaded', function () {

  if (location.pathname === '/') return;

  function hideVisitorPopup() {

    const popup = document.querySelector('#visitor-counter-popup');

    if (popup) {
      popup.style.display = 'none';
    }
  }

  hideVisitorPopup();

  new MutationObserver(hideVisitorPopup).observe(document.body, {
    childList: true,
    subtree: true
  });

});



/* =====================================================
   3) جدول المقاسات
   المقاس داخل الجدول يختار/يلغي خيار المقاس الأصلي
===================================================== */

document.addEventListener('DOMContentLoaded', function () {

  function injectSizeGuide() {

    if (document.querySelector('.mz-size-guide')) return;

    const trigger = document.querySelector(
      'div[onclick*="size-guide::open"]'
    );

    if (!trigger) return;

    trigger.insertAdjacentHTML('afterend', `

      <div class="mz-size-guide">

        <div class="mz-size-tabs">
          <span class="active" data-unit="cm">CM</span>
          <span data-unit="inch">INCH</span>
        </div>

        <table class="mz-size-table active" data-table="cm">

          <thead>
            <tr>
              <th>المقاس</th>
              <th>الصدر</th>
              <th>الخصر</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td><button type="button" class="mz-size-select" data-size="S">S</button></td>
              <td>82</td>
              <td>66</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="M">M</button></td>
              <td>87</td>
              <td>71</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="L">L</button></td>
              <td>92</td>
              <td>76</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="XL">XL</button></td>
              <td>97</td>
              <td>81</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="XXL">2XL</button></td>
              <td>102</td>
              <td>86</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="3XL">3XL</button></td>
              <td>107</td>
              <td>91</td>
            </tr>
          </tbody>

        </table>

        <table class="mz-size-table" data-table="inch">

          <thead>
            <tr>
              <th>المقاس</th>
              <th>الصدر</th>
              <th>الخصر</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td><button type="button" class="mz-size-select" data-size="S">S</button></td>
              <td>32.3</td>
              <td>26.0</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="M">M</button></td>
              <td>34.3</td>
              <td>28.0</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="L">L</button></td>
              <td>36.2</td>
              <td>29.9</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="XL">XL</button></td>
              <td>38.2</td>
              <td>31.9</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="XXL">2XL</button></td>
              <td>40.2</td>
              <td>33.9</td>
            </tr>

            <tr>
              <td><button type="button" class="mz-size-select" data-size="3XL">3XL</button></td>
              <td>42.1</td>
              <td>35.8</td>
            </tr>
          </tbody>

        </table>

      </div>

    `);

    document.querySelectorAll('.mz-size-tabs span').forEach(tab => {
      tab.addEventListener('click', function () {

        const unit = this.dataset.unit;
        const guide = this.closest('.mz-size-guide');

        guide.querySelectorAll('.mz-size-tabs span').forEach(item => {
          item.classList.remove('active');
        });

        guide.querySelectorAll('.mz-size-table').forEach(table => {
          table.classList.remove('active');
        });

        this.classList.add('active');

        guide
          .querySelector(`.mz-size-table[data-table="${unit}"]`)
          ?.classList.add('active');

      });
    });

    document.querySelectorAll('.mz-size-select').forEach(button => {
      button.addEventListener('click', function () {

        const wantedSize = this.dataset.size;

        const labels = document.querySelectorAll(
          '.s-product-options-grid-mode label'
        );

        const matchedLabel = Array.from(labels).find(label => {
          const span = label.querySelector('.s-product-options-grid-mode-span');

          if (!span) return false;

          const originalSize = span.textContent.trim().toUpperCase();

          return originalSize === wantedSize ||
                 (originalSize === 'XXXL' && wantedSize === '3XL') ||
                 (originalSize === '3XL' && wantedSize === 'XXXL');
        });

        if (!matchedLabel) return;

        const input = matchedLabel.querySelector('input[type="radio"]');

        if (!input) return;

        const isAlreadySelected = input.checked;

        if (isAlreadySelected) {

          input.checked = false;

          input.dispatchEvent(new Event('input', {
            bubbles: true
          }));

          input.dispatchEvent(new Event('change', {
            bubbles: true
          }));

          document.querySelectorAll('.mz-size-select').forEach(btn => {
            btn.classList.remove('active');
          });

          return;
        }

        input.checked = true;

        input.dispatchEvent(new Event('input', {
          bubbles: true
        }));

        input.dispatchEvent(new Event('change', {
          bubbles: true
        }));

        matchedLabel.click();

        document.querySelectorAll('.mz-size-select').forEach(btn => {
          btn.classList.remove('active');
        });

        document.querySelectorAll(`.mz-size-select[data-size="${wantedSize}"]`).forEach(btn => {
          btn.classList.add('active');
        });

      });
    });

  }

  injectSizeGuide();

  setTimeout(injectSizeGuide, 1000);
  setTimeout(injectSizeGuide, 2500);

});

/* =====================================================
   4) نقل اسم المنتج + السعر + SKU
===================================================== */

document.addEventListener('DOMContentLoaded', function () {

  function createTopInfo() {

    const sliderWrap = document.querySelector('.details-slider-wrapper');
    const title = document.querySelector('.product-title');
    const price = document.querySelector('.total-price-single');
    const sku = document.querySelector('.product-sku');

    if (!sliderWrap || !title || !price) return;

    let box = document.querySelector('.mz-top-info');

    if (!box) {

      box = document.createElement('div');

      box.className = 'mz-top-info';

      box.innerHTML = `
        <div class="mz-top-info-right"></div>
        <div class="mz-top-info-left"></div>
      `;

      sliderWrap.insertAdjacentElement('afterend', box);
    }

    const right = box.querySelector('.mz-top-info-right');
    const left = box.querySelector('.mz-top-info-left');

    if (!right.contains(title)) {
      right.appendChild(title);
    }

    if (sku && !right.contains(sku)) {

      const skuText = sku.innerText
        .replace('رقم الموديل', '')
        .replace(':', '')
        .replace('|', '')
        .trim();

      sku.innerHTML = `
        <span class="mz-sku-code">${skuText}</span>
      `;

      right.appendChild(sku);
    }

    if (!left.contains(price)) {
      left.appendChild(price);
    }
  }

  createTopInfo();

  setTimeout(createTopInfo, 1000);
  setTimeout(createTopInfo, 2500);
  setTimeout(createTopInfo, 4000);

});



/* =====================================================
   5) مربع البحث للجوال
===================================================== */

document.addEventListener('DOMContentLoaded', () => {

  const initMobileSearch = () => {

    if (document.querySelector('.mz-mobile-search-box')) return;

    const searchBtn = document.querySelector('#header .search-btn');
    const headerInner = document.querySelector('#header .header-components-inner');

    if (!searchBtn || !headerInner) return;

    const box = document.createElement('div');

    box.className = 'mz-mobile-search-box';

    box.innerHTML = `

      <button class="mz-search-trigger" aria-label="بحث">

        <svg xmlns="http://www.w3.org/2000/svg"
             width="16"
             height="16"
             viewBox="0 0 16 16"
             fill="none">

          <circle cx="7.49142"
                  cy="7.49142"
                  r="6.74142"
                  stroke="#424242"
                  stroke-width="1.5"/>

          <path d="M12.1802 12.5303L14.8232 15.1665"
                stroke="#424242"
                stroke-width="1.5"/>

        </svg>

      </button>

      <input type="search"
             class="mz-fake-search"
             placeholder="ادخل كلمة البحث"
             readonly>

    `;

    headerInner.insertAdjacentElement('afterend', box);

    box.querySelector('.mz-search-trigger')
      ?.addEventListener('click', () => searchBtn.click());

    box.querySelector('.mz-fake-search')
      ?.addEventListener('click', () => searchBtn.click());

  };

  initMobileSearch();

  const observer = new MutationObserver(initMobileSearch);

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

});



/* =====================================================
   6) تخصيص الهيدر النهائي
===================================================== */

(() => {

  document.querySelector('#mz-header-final-style')?.remove();

  const style = document.createElement('style');

  style.id = 'mz-header-final-style';

  style.innerHTML = `

    .top-navbar salla-contacts,
    .top-navbar .s-contacts,
    .top-navbar #contact-slot{
      display:none !important;
    }

    .top-navbar::before{
      display:none !important;
    }

    @media (min-width:769px){

      .mz-mobile-search-box{
        display:none !important;
      }

      #header .search-btn,
      #stickymain .search-btn,
      #header .mburger,
      #stickymain .mburger{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
      }

      #header .search-btn,
      #header .mburger,
      #header .s-user-menu-avatar-wrap,
      #header salla-cart-summary{
        width:34px !important;
        height:34px !important;
      }

      #header .mburger::after{
        font-size:22px !important;
      }

      #header .search-btn::after{
        font-size:21px !important;
      }

      #header .s-user-menu-avatar-wrap{
        background-size:25px !important;
      }

      #header salla-cart-summary::before{
        background-size:24px !important;
      }

      #header .min-logo img{
        width:96px !important;
      }

      #header .header-components-inner{
        min-height:56px !important;
        padding-inline:24px !important;
      }

    }

    @media (min-width:769px){

      #header .header_menu{
        padding-bottom:0 !important;
      }

      #header #big--menunavbig{
        padding-top:6px !important;
        padding-bottom:0 !important;
        margin-inline:14px !important;
      }

      #header .main-menu{
        gap:2px !important;
      }

      #header .main-menu > li > a{
        font-size:14px !important;
        padding:6px 11px !important;
        font-weight:500 !important;
        letter-spacing:.2px !important;
        color:rgba(0,0,0,.78) !important;
        transition:all .25s ease !important;
      }

      #header .main-menu > li:hover > a{
        color:#000 !important;
      }

      #header .sub-menu a{
        font-size:13px !important;
        padding:7px 12px !important;
      }

    }

    @media (max-width:768px){

      .mz-mobile-search-box{
        display:flex !important;
        margin:0 14px 10px !important;
      }

      #header .search-btn{
        display:none !important;
      }

      .mz-mobile-search-box input{
        flex:1 !important;
        border:none !important;
        outline:none !important;
        background:transparent !important;
        font-size:13px !important;
        color:#333 !important;
      }

    }

  `;

  document.head.appendChild(style);

})();



/* =====================================================
   Animated Search Placeholder
===================================================== */

document.addEventListener('DOMContentLoaded', function () {

  const placeholders = [
    'فستان لينا',
    'فستان ايمان',
    'فستان سهرة',
    'فستان هند',
    'فستان أمل'
  ];

  let started = false;

  function startAnimation(input) {

    if (started) return;
    started = true;

    let currentWord = 0;
    let currentChar = 0;
    let deleting = false;

    function animate() {

      const word = placeholders[currentWord];

      if (!deleting) {

        input.setAttribute(
          'placeholder',
          word.substring(0, currentChar++)
        );

        if (currentChar > word.length) {

          deleting = true;

          setTimeout(animate, 1800);

          return;
        }

      } else {

        input.setAttribute(
          'placeholder',
          word.substring(0, currentChar--)
        );

        if (currentChar < 0) {

          deleting = false;

          currentWord =
            (currentWord + 1) % placeholders.length;
        }
      }

      setTimeout(
        animate,
        deleting ? 90 : 150
      );

    }

    animate();
  }

  const timer = setInterval(function () {

    const input =
      document.querySelector('.mz-mobile-search-box input');

    if (input) {

      clearInterval(timer);

      startAnimation(input);
    }

  }, 300);

});



// /* =====================================================
//    MZIONA SLIDER NAVIGATION
// ===================================================== */

// document.addEventListener('DOMContentLoaded', () => {

//   const wait = setInterval(() => {

//     const slider =
//       document.querySelector('#mzionaSlider .swiper');

//     if (!slider) return;

//     clearInterval(wait);

//     const swiper = slider.swiper;

//     document.querySelector('.mziona-next')
//       ?.addEventListener('click', () => {
//         swiper.slideNext();
//       });

//     document.querySelector('.mziona-prev')
//       ?.addEventListener('click', () => {
//         swiper.slidePrev();
//       });

//   }, 300);

// });

// /* =====================================================
//    MZIONA SLIDER NAVIGATION
// ===================================================== */

// document.addEventListener('DOMContentLoaded', () => {

//   const wait = setInterval(() => {

//     const slider =
//       document.querySelector('#mzionaSlider .swiper');

//     if (!slider) return;

//     clearInterval(wait);

//     const swiper = slider.swiper;

//     document.querySelector('.mziona-next')
//       ?.addEventListener('click', () => {
//         swiper.slideNext();
//       });

//     document.querySelector('.mziona-prev')
//       ?.addEventListener('click', () => {
//         swiper.slidePrev();
//       });

//   }, 300);

// });


// /* =========================================
/* =====================================================
   MZIONA SAJI PRODUCTS TITLE FIX
   نقل عنوان سلايدر ساجي فوق المنتجات
===================================================== */

document.addEventListener('DOMContentLoaded', function () {

  function fixMzionaSajiTitle(){

    const section = document.querySelector('#best-offers-2-slider');
    if(!section) return;

    const container = section.querySelector('.container');
    const titleBlock = section.querySelector('.s-slider-block__title');
    const sajiTitle = section.querySelector('.saji-main-title');

    if(!container || !titleBlock) return;

    /* نقل عنوان السلايدر فوق المنتجات */
    if(container.firstElementChild !== titleBlock){
      container.insertBefore(titleBlock, container.firstElementChild);
    }

    /* إضافة العنوان الجديد مرة واحدة */
    if(!titleBlock.querySelector('.mz-saji-title')){

      const title = document.createElement('h2');

      title.className = 'mz-saji-title';

      title.textContent =
        sajiTitle?.textContent.trim() || 'أحدث تشكيلة فساتين';

      titleBlock.prepend(title);
    }
  }

  fixMzionaSajiTitle();

  setTimeout(fixMzionaSajiTitle, 800);
  setTimeout(fixMzionaSajiTitle, 1800);
  setTimeout(fixMzionaSajiTitle, 3000);

});