<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>الهادي لخدمات الطباعة</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
  <style>
    .hide,
    .hidden,
    .hide-descriptions {
      display: none;
    }

    footer a:hover {
      color: #007bff !important;
      /* تغيير لون النص عند التحويم */
      text-decoration: underline !important;
      /* إضافة خط تحت النص */
      cursor: pointer;
    }

    footer img {
      transition: transform 0.3s ease;
      /* إضافة تأثير تحويل للأيقونات */
    }

    footer img:hover {
      transform: scale(1.2);
      /* تكبير الأيقونات عند التحويم */
    }

    .size-image {
      width: 300px;

    }
    /* new edit */
    .btn-primary, .form-control, .form-select {
  transition: all 0.3s ease;
}

.btn-primary:hover, .form-control:hover, .form-select:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* new 2 */
body {
    font-family: 'Tajawal', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
}
.container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 20px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
 .logo {
  width: 90px;
 }


  </style>
</head>

<body>
  <header class="bg-primary text-white text-center py-3">
    <h1>الهادي لخدمات الطباعة</h1>
  </header>

  <main class="container mt-5">
    <section class="example-box p-4 bg-light rounded shadow-sm example-box">
      <h2 class="mb-4">تفاصيل طلب إحدى خدمات الطباعة</h2>
      <p>من أجل حساب التكلفة بدقة، يُرجى تقديم بعض التفاصيل الأساسية عن طلبك</p>
    </section>

    <section class="card shadow-lg mt-5">
      <div class="card-header bg-primary text-white text-center">
        <h2>استبيان الخدمة</h2>
      </div>
      <div class="card-body">
        <form id="contact-form" class="needs-validation" action="https://formspree.io/f/mdkkpged" method="POST">
          <!-- البيانات الأساسية -->
          <div class="mb-3">
            <label for="name" class="form-label">الاسم</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="أدخل اسمك" required>
            <div class="invalid-feedback">يرجى إدخال اسمك.</div>
          </div>

          <div class="mb-3">
            <label for="number" class="form-label">رقم الهاتف</label>
            <input type="number" class="form-control" name="phone" id="number" placeholder="أدخل رقم الهاتف" required>
            <div class="invalid-feedback">يرجى إدخال رقم هاتفك.</div>
          </div>

          <div class="mb-3">
            <label for="email" class="form-label">البريد الإلكتروني</label>
            <input type="email" class="form-control" name="email" id="email" placeholder="أدخل بريدك الإلكتروني"
              required>
            <div class="invalid-feedback">يرجى إدخال بريد إلكتروني صحيح.</div>
          </div>

          <!-- تحديد الخدمة -->
          <div class="mb-3">
            <label for="services" class="form-label">الخدمة المطلوبة</label>
            <select class="form-select" name="services" id="services" required>
              <option value="" disabled selected>اختر الخدمة المطلوبة</option>
              <option value="تقاويم">تقاويم</option>
              <option value="دفتر">دفتر</option>
              <option value="كتاب">كتاب</option>
              <option value="مجلة">مجلة</option>
              <option value="كتالوج">كتالوج</option>
              <option value="خدمة أخرى">خدمة أخرى</option>
            </select>
            <div class="invalid-feedback">يرجى اختيار الخدمة المطلوبة.</div>
          </div>

          <!-- تفاصيل الخدمة -->
          <div style="margin:20px 30px 0 0">
            <!-- وصف وتعريف الخدمة -->
            <div class="hide-descriptions" id="دفتر-deiscription">
              <h3>الدفاتر</h3>
              <p>هي أدوات أساسية للكتابة والتدوين تأتي بأشكال وأحجام متنوعة لتناسب مختلف الاستخدامات، ومن أنواعها
                (دفاتر الملاحظات - الدفاتر الإدارية - الدفاتر المدرسية)</p>
              <div class="d-flex flex-wrap justify-content-between">
                <img class="size-image" src="./images/notebook/دفتر 2.png" alt="كتاب 1">
                <img class="size-image" src="./images/notebook/دفتر واحد.png" alt="كتاب 2">
              </div>
            </div>

            <div class="hide-descriptions" id="كتاب-deiscription">
              <h3>الكتاب</h3>
              <p>هو مجموعة من الأوراق أو الصفحات المترابطة والتي تحتوي على نصوص مكتوبة، صور، أو رسوم توضيحية، تجمع
                معًا لتكون وسيلة لنقل المعلومات أو الأفكار. ومن أشكال الكتاب (الكتب التعليمية - الكتب الدينية - الكتب
                الفنية)</p>
              <div class="d-flex flex-wrap justify-content-between">
                <img class="size-image" src="./images/books/كتاب 2.png" alt="كتاب 1">
                <img class="size-image" src="./images/books/كتاب1.png" alt="كتاب 2">
              </div>
            </div>

            <div class="hide-descriptions" id="تقاويم-deiscription">
              <h3>التقويم </h3>
              <p>التقويم هو أداة تساعد في تنظيم الوقت وتحديد الأيام والأشهر، ويأتي بأنواع مختلفة مثل التقاويم المكتبية
                والحائطية. يمكن أن يحتوي على صور أو تصميمات فنية تجعله مناسبًا للاستخدام الشخصي أو الإعلاني.</p>
              <div class="d-flex flex-wrap justify-content-between">
                <img class="size-image" src="./images/clendar/حائطي.jpg" alt="كتاب 1">
                <img class="size-image" src="./images/clendar/مكتبي.png" alt="كتاب 2">
              </div>
            </div>

            <div class="hide-descriptions" id="كتالوج-deiscription">
              <h3>الكتالوج</h3>
              <p>الكتالوج هو أداة تسويقية فعّالة تحتوي على قائمة مفصلة بالمنتجات أو الخدمات، مصحوبة بصور عالية الجودة
                ووصف دقيق لكل منتج. يُستخدم الكتالوج لعرض المنتجات بشكل منظم وجذاب، مما يساعد العملاء على اتخاذ قرارات
                الشراء بسهولة.</p>
              <div class="d-flex flex-wrap justify-content-between">
                <img class="size-image" src="./images/catalog/كتالوج1.png" alt="كتاب 1">
                <img class="size-image" src="./images/catalog/كتالوج2.png" alt="كتاب 2">
              </div>
            </div>

            <div class="hide-descriptions" id="مجلة-deiscription">
              <h3>المجلة</h3>
              <p>المجلة هي منشور دوري يحتوي على مقالات وصور وتصاميم فنية، وتستخدم لنشر المعلومات والأخبار في مجالات
                مختلفة. يمكن أن تكون المجلة متخصصة في موضوع معين مثل الأزياء، الرياضة، أو الثقافة.</p>
              <div class="d-flex flex-wrap justify-content-between">
                <img class="size-image" src="./images/magazine/مجلة1.png" alt="كتاب 1">
                <img class="size-image" src="./images/magazine/مجلة2_1.png" alt="كتاب 2">
              </div>
            </div>

            <div class="hide-descriptions" id="خدمة أخرى-deiscription">
              <h3>خدمة أخرى</h3>
              <p>إذا كنت تبحث عن خدمة غير مدرجة في القائمة، يرجى وصفها بالتفصيل في الحقل أدناه. سنقوم بمراجعة طلبك
                والاتصال بك لتقديم الحل الأنسب لاحتياجاتك.</p>
              <div class="mb-3">
                <textarea class="form-control" name="other-service" id="other-service" rows="5"
                  placeholder="صف الخدمة التي تريدها بالتفصيل"></textarea>
                <div class="invalid-feedback">يرجى إدخال وصف للخدمة المطلوبة.</div>
              </div>
            </div>


         




            <div id="تقاويم-form" class="hidden">
              <div class="mb-3">
                <label for="closing-type" class="form-label"> نوع التقويم</label>
                <select class="form-select" name="calendar-type" id="calendar-type">
                  <option value="" disabled selected>اختار النوع المناسب</option>
                  <option value="بشر">تقويم مكتبي( 6 اوراق)</option>
                  <option value="سلك زوجي">تقويم مكتبي اعلاني ( 12 ورقة)</option>
                  <option value="سلك حلزوني">تقويم حائطي</option>
                  <option value="دبوس">تقويم حائطي اعلاني</option>
                </select>
              </div>
            </div>

 
            <div class="mb-3 hide">
              <label for="amount" class="form-label">الكمية</label>
              <input type="number" class="form-control" name="amount" id="amount" placeholder="كم نسخة تحتاج؟">
            </div>

            <div class="mb-3 hide">
              <label for="size" class="form-label"> مقاس النسخة</label>
              <input list="size" name="size" class="form-control" placeholder="خصص او اختار مقاس زي 20 * CM 25">
              <datalist id="size">
                <option value="A5(14.8 * 21)">
                <option value="A4(21 * 29.7)">
                <option value="A3(29.7 * 42)">
              </datalist>
            </div>

<!-- hide in calendar -->
            <div class="mb-3 hidden flixple-data">
              <label for="printing" class="form-label">اتجاه فتح النسخة</label>
              <select class="form-select" name="directions" id="printing">
                <option value="" disabled selected> فتح النسخة</option>
                <option value="right-to-left">من اليمين </option>
                <option value="left-to-right">من اليسار </option>
                <option value="top-to-bottom">من الأسفل</option>
              </select>
            </div>
<!-- hide in calendar -->
            <div class="mb-3 hidden flixple-data">
              <label for="transcription" class="form-label">عدد الداخلي</label>
              <input type="number" class="form-control" name="transcription" id="transcription"
                placeholder="كم ورقة تريد في كل نسخة؟ مثل 30 ورقة (60 صفحة)">
            </div>
<!-- hide in calendar -->
            <div class="mb-3 hidden flixple-data">
              <label for="closing-type" class="form-label">نوع التقفيل</label>
              <select class="form-select" name="closing-type" id="closing-type">
                <option value="" disabled selected>حابب التقفيل يكون إزاي</option>
                <option value="بشر">بشر</option>
                <option value="سلك زوجي">سلك زوجي</option>
                <option value="سلك حلزوني">سلك حلزوني</option>
                <option value="دبوس">دبوس</option>
              </select>
            </div>
            
            <div class="mb-3 hide">
              <label for="printing" class="form-label">الطباعة</label>
              <select class="form-select " name="printing" id="printing">
                <option value="" disabled selected>الطباعة للورق الداخلي</option>
                <option value="أبيض وأسود">أبيض وأسود</option>
                <option value="ألوان">ألوان</option>
                <option value="UV">UV</option>
              </select>
            </div>

            <div class="mb-3 hide">
              <label for="radio1">الطباعة وجه واحد</label>
              <input type="radio" id="radio1" name="choice" value="وجه واحد">
              <label for="radio2">الطباعة وجهين</label>
              <input type="radio" id="radio2" name="choice" value="وجهين">
            </div>

            
          </div>
          
          <!-- خدمات إضافية -->
          <div class="mb-3 statik">
            <label for="extra-services" class="form-label">خدمات إضافية</label>
            <select class="form-select " name="extra-services" id="extra-services">
              <option value="" disabled selected></option>
              <option value="طبقة حماية (سلوفان)">طبقة حماية (سلوفان)</option>
              <option value="توضيح النص أو الشعار">توضيح النص أو الشعار</option>
              <option value="إبراز النص أو الشعار">إبراز النص أو الشعار</option>
              <option value="التذهيب">التذهيب</option>
            </select>
          </div>

          <!-- طريقة الاستلام -->
          <div class="mb-3">
            <label for="geting" class="form-label">طريقة الاستلام</label>
            <select class="form-select statik" name="geting" id="geting">
              <option value="" disabled selected>الاستلام بعد الانتهاء من تنفيذ الخدمة</option>
              <option value="المطبعة">المطبعة</option>
              <option value="شحن داخل القاهرة">شحن داخل القاهرة</option>
              <option value="شحن خارج القاهرة">شحن خارج القاهرة</option>
            </select>
          </div>

          <!-- ملاحظات -->
          <div class="mb-3 statik">
            <label for="message" class="form-label">ملاحظات</label>
            <textarea class="form-control" name="notes" id="message" rows="5"
              placeholder="لو في أي شيء إضافي"></textarea>
            <div class="invalid-feedback">يرجى إدخال تفاصيل الطلب.</div>
          </div>

          <!-- زر الإرسال -->
          <button type="submit" class="btn btn-primary w-100 d-flex align-items-center justify-content-center"
            id="submit-btn">
            <span id="spinner" class="spinner-border spinner-border-sm me-2 d-none" role="status"
              aria-hidden="true"></span>
            إرسال
          </button>
        </form>
      </div>
    </section>

    <div class="alert alert-info mt-4 text-center">
      إذا لم تكن لديك معلومات كافية أو كنت غير قادر على تحديد الخدمة المناسبة بدقة، فيسعدنا مساعدتك! يمكنك زيارة
      <strong>
        <a style="text-decoration: none;" href="https://alhadi-printing.netlify.app/">موقعنا الإلكتروني</a>
      </strong>
      أو التواصل معنا من خلال
      <strong>
        <a style="text-decoration: none;" href="https://alhadi-printing.netlify.app/">منصات التواصل الاجتماعي</a>
      </strong>
      الخاصة بنا، وسنقدم لك كل الإرشادات والدعم اللازم.
    </div>
  </main>

  <!-- الفوتر -->
  <footer class="bg-light text-dark py-4 mt-5 border-top">
    <div class="container" style="display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;">
        <!-- الشعار -->
        <div class="d-flex align-items-center">
            <img src="./icons/logo.png" alt="شعار الشركة" style="width: 100px; height: auto;">
        </div>

        <!-- طرق التواصل -->
        <div class="d-flex flex-wrap justify-content-center gap-4">
            <!-- الهاتف -->
            <div>
                <strong>
                    <img src="./icons/phone.png" alt="هاتف" class="me-2" style="width: 20px; height: 20px;">
                </strong>
                <a href="tel:01013773726" class="text-dark text-decoration-none">01013773726</a>
            </div>

            <!-- واتساب -->
            <div>
                <strong>
                    <img src="./icons/whatsapp.png" alt="واتساب" class="me-2" style="width: 20px; height: 20px;">
                </strong>
                <a href="https://wa.me/20107836995" target="_blank" class="text-dark text-decoration-none">0107836995</a>
            </div>

            <!-- فيسبوك -->
            <div>
                <strong>
                    <img src="./icons/facebook.png" alt="فيسبوك" class="me-2" style="width: 20px; height: 20px;">
                </strong>
                <a href="https://www.facebook.com/Alhadi.Printing.Services/?locale=ar_AR%25E2%2580%258F" target="_blank"
                    class="text-dark text-decoration-none">
                    فيسبوك
                </a>
            </div>

            <!-- البريد الإلكتروني -->
            <div>
                <strong>
                    <img src="./icons/email.png" alt="بريد إلكتروني" class="me-2" style="width: 20px; height: 20px;">
                </strong>
                <a href="mailto:alhadiservices0@gmail.com"
                    class="text-dark text-decoration-none">alhadiservices0@gmail.com</a>
            </div>

            <!-- العنوان -->
            <div>
                <strong>
                    <img src="./icons/location.png" alt="موقعنا" class="me-2" style="width: 20px; height: 20px;">
                </strong>
                <a href="https://maps.app.goo.gl/yjoQMPg9CeaD8Tgm7" target="_blank" class="text-dark text-decoration-none">
                    القاهرة، جسر السويس, عين شمس، العرب, تقاطع سيدي بلال من الحرية, مطبعة الهادي
                </a>
            </div>
        </div>
    </div>
</footer>



  <!-- JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

  <script>
    (function () {
      emailjs.init('8nhuAj01QkUdibM9I');
    })();

    document.getElementById('contact-form').addEventListener('submit', function (event) {
      event.preventDefault();
      if (!this.checkValidity()) {
        this.classList.add('was-validated');
        return;
      }
      emailjs.sendForm('service_2jmzbw6', 'template_sqqormo', this)
        .then(() => alert('تم إرسال الاستبيان بنجاح!'))
        .catch((error) => console.error('فشل الإرسال:', error));
    });
    // تفريغ محتوى الفورم ------------------------------------
    const contact_form = document.getElementById("contact-form");
    contact_form.addEventListener('submit', (e) => {
     setTimeout(()=>{location.reload()} ,2000)
    })

    // إظهار النموذج المناسب----------------------------

    const servicesSelect = document.getElementById("services");
    function hideAllForms() {
      const forms = document.querySelectorAll(".hidden");
      forms.forEach(form => form.style.display = "none");

    }

    function show_statik_data() {
      const element = document.querySelectorAll(".hide");
      element.forEach( e => e.style.display = "block")
      // console.log("run");
    } 

    function hideDescriptions() {
      const descriptions = document.querySelectorAll(".hide-descriptions");
      descriptions.forEach(description => description.style.display = "none");
    }
    
    servicesSelect.addEventListener("change", (e) => {
      hideDescriptions();
      hideAllForms();
      show_statik_data()

      const selectedService = e.target.value;
      // عرض inputs البيانات الثابتة
      const formToShow = document.getElementById(`${selectedService}-form`);
      if (formToShow) {
        formToShow.style.display = "block";
      }
      // عرض الوصف
      const showDescription = document.getElementById(`${selectedService}-deiscription`);
      if (showDescription) {
        showDescription.style.display = "block";
      }
      // عرض inputs المختلفة
      const type_of_calendar = document.getElementById("تقاويم-form")
      const flixple_data = document.querySelectorAll(".flixple-data")
      if (selectedService == 'تقاويم') {
        type_of_calendar.style.display = 'block'

      }else {
        flixple_data.forEach(d => d.style.display = 'block')
   
      } 



    });
  </script>
</body>

</html>