/* Add custom Js code below */

var content = `
  <style>
    input, select, textarea {
      border-radius: 8px !important;
    }
  </style>

<div id="form">
  <form onsubmit="return false;" style="max-width: 800px; margin: auto;">
    <h2 style="text-align: center;">سجل بيانات شركتك للحصول على <span style="color:#6253e2;">تسعيرة خاصة</span> لغسيل سياراتكم أو سيارات موظفيكم</h2>
    <p style="text-align: center;">نحن هنا لتقديم أفضل العروض والخدمات المخصصة لاحتياجات شركتك.</p>
    <div style="display: flex; flex-wrap: wrap; gap: 20px;">
      <input type="text" name="اسم الشركة" placeholder="اسم الشركة *" required style="flex: 1; padding: 10px;">
      <input type="text" name="عنوان الشركة" placeholder="عنوان الشركة" style="flex: 1; padding: 10px;">
      <input type="text" name="اسم الشخص المسؤول" placeholder="اسم الشخص المسؤول *" required style="flex: 1; padding: 10px;">
      <input type="email" name="البريد الإلكتروني" placeholder="البريد الإلكتروني *" required style="flex: 1; padding: 10px;">
      <input type="tel" name="رقم الهاتف" placeholder="رقم الهاتف *" required style="flex: 1; padding: 10px;">
      <select name="نوع الخدمة المطلوبة" required style="flex: 1; padding: 10px;">
        <option value="">اختر نوع الخدمة *</option> 
  <option value="البراقة">البراقة</option>
  <option value="الفاخرة">الفاخرة</option>
</select>
      <input type="number" name="عدد المركبات" placeholder="عدد المركبات (اختياري)" style="flex: 1; padding: 10px;">
      <textarea name="ملاحظات إضافية" placeholder="ملاحظات إضافية (اختياري)" style="flex: 1 1 100%; padding: 10px;"></textarea>
    </div>
    <br>
    <button type="submit" style="background-color: #6253e2; color: white; padding: 10px 30px; border: none; border-radius: 5px;">إرسال البيانات</button>
  </form>
</div>
`;

if (window.location.pathname.includes("page-86890689")) {
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js';

  script.onload = function () {
    emailjs.init('fCTjPitfpW9TgZpr0'); // Your EmailJS user ID

    // Inject the form
    document.querySelector("#app > div.app-inner.flex.flex-col.min-h-full > div > div > div > div").innerHTML = content;

    const form = document.querySelector("form");

    form.addEventListener("submit", function (event) {
    console.log("started");
      event.preventDefault();

      const formData = new FormData(form);

      const emailParams = {
        from_name: formData.get('اسم الشركة'),
        company_name: formData.get('اسم الشركة'),
        address: formData.get('عنوان الشركة'),
        person_in_charge: formData.get('اسم الشخص المسؤول'),
        email: formData.get('البريد الإلكتروني'),
        phone: formData.get('رقم الهاتف'),
        service_type: formData.get('نوع الخدمة المطلوبة'),
        vehicle_count: formData.get('عدد المركبات'),
        additional_notes: formData.get('ملاحظات إضافية')
      };

      emailjs.send('service_gbapchs', 'template_oq597be', emailParams)
        .then(function(response) {
          console.log('Success:', response);
          alert('تم إرسال البيانات بنجاح');
          form.reset();
        }, function(error) {
          console.error('Error:', error);
          alert('حدث خطأ، يرجى المحاولة لاحقاً');
        });
    });
  };

  document.head.appendChild(script);

} else {

  document.querySelector("#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div:nth-child(2)").style.display = "none";

  var data = [
    {
      "q": "اذا انتهت صلاحية الباقة وفي غسلات تروح؟",
      "a": "لا، القشيب باقاته وقتها لا محدودة",
    },
    {
      "q": "ليش لما ادفع من المتجر ما تظهر المواعيد؟",
      "a": "الحجز وجدولة المواعيد من خلال الواتس لإختيار موعد مناسب",
    },
    {
      "q": "يغسل دباب او سيارة؟",
      "a": "في شركة القشيب نستخدم السيارات فقط حتى يكون ضغط الماء قوي، وايضاً  المكنسة الكهربائيه كبيرة حتى تعطي قوة شفط قوية",
    },
    {
      "q": "في غسيل مكينة",
      "a": " لا غير متوفر",
    },
    {
      "q": "في ازالة البقع",
      "a": "اختصاصنا غسيل خارجي وتنظيف داخلي ازالة البقع و التنظيف العميق",
    },
    {
      "q": "سعر الغسيل يفرق على حسب الحجم؟",
      "a": "صحيح سعر الغسيل يفرق",
    },
    {
      "q": "اثار فضلات الطيور؟",
      "a": "نستخدم مواد كيمائية لإزالة الاثار",
    },
  ];
}



for (var j = 0; j < data.length; j++) {
    document.querySelector("#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container").innerHTML += `
      <button type="button" class="collapsibleamgood">
        <div style='
          display: inline-block;
          padding: 5px 10px;
          background-color: #6253e2;
          color: white;
          border: #6253e2 solid 1px;
          border-radius: 5px;
          align-items: center;
          margin: auto;
          margin-left: 10px;
        '><p>${j + 1}</p></div>${data[j]["q"]}</button>
      <div class="contentamgood">
        <p>${data[j]["a"]}</p>
      </div>
    `;
  }

  var coll = document.getElementsByClassName("collapsibleamgood");
  for (var i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
      this.classList.toggle("activeamgood");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
    
  }
  document.querySelector("#app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\\:col-span-2.rtl\\:lg\\:pl-20.ltr\\:lg\\:pr-20 > div.flex.rtl\\:space-x-reverse.space-x-2.items-end").innerHTML += `
    <a id="amaal" style="
      display: flex;
      align-items: center;
      justify-content: center;
      align-content: center;
      position: relative;
      left: -25px;
    ">
      <img width="100%" height="100%" src="https://cdn.salla.network/images/sbc.png?v=2.0.5" data-src="https://cdn.salla.network/images/sbc.png?v=2.0.5" class="lazy hover:opacity-80 transition-opacity loaded" alt="value added tax" loading="lazy" data-ll-status="loaded" style="
        width: 65px;
        display: inline-block;
      ">
      <p>موثّق في منصة الأعمال</p>
    </a>
  `