checkout

[woocommerce_checkout]

<div id="sagar-order-form">
  <style>
    #sagar-order-form {
      font-family: Arial, sans-serif;
      max-width: 650px;
      margin: 25px auto;
      padding: 22px;
      background: #fff;
      border: 1px solid #e4eadf;
      border-radius: 16px;
      box-shadow: 0 8px 28px rgba(28, 80, 35, .08);
      color: #24352a;
    }
    #sagar-order-form * { box-sizing: border-box; }
    #sagar-order-form h2 {
      text-align: center;
      color: #176b38;
      font-size: 27px;
      margin: 0 0 8px;
    }
    #sagar-order-form .subtitle {
      text-align: center;
      color: #68766b;
      margin: 0 0 24px;
      font-size: 14px;
    }
    #sagar-order-form .field { margin-bottom: 17px; }
    #sagar-order-form label {
      display: block;
      font-weight: 600;
      margin-bottom: 7px;
      font-size: 14px;
    }
    #sagar-order-form input,
    #sagar-order-form textarea,
    #sagar-order-form select {
      width: 100%;
      padding: 13px;
      border: 1px solid #d5dfd4;
      border-radius: 8px;
      background: #fff;
      font-size: 15px;
      outline-color: #218647;
    }
    #sagar-order-form textarea {
      min-height: 85px;
      resize: vertical;
    }
    #sagar-order-form .summary {
      background: #f1f8ef;
      border: 1px solid #dcebd7;
      border-radius: 10px;
      padding: 16px;
      margin: 20px 0;
      line-height: 2;
    }
    #sagar-order-form .total {
      border-top: 1px dashed #b6cbb1;
      margin-top: 8px;
      padding-top: 8px;
      font-size: 19px;
      font-weight: bold;
      color: #176b38;
    }
    #sagar-order-form button {
      width: 100%;
      padding: 15px;
      background: #198343;
      color: white;
      border: 0;
      border-radius: 9px;
      font-size: 17px;
      font-weight: bold;
      cursor: pointer;
    }
    #sagar-order-form button:hover { background: #126b34; }
    #sagar-order-form .note {
      text-align: center;
      color: #718071;
      font-size: 12px;
      margin: 13px 0 0;
    }
    @media(max-width:480px) {
      #sagar-order-form { padding: 16px; margin: 12px auto; }
      #sagar-order-form h2 { font-size: 23px; }
    }
  </style>

  <h2>আপনার অর্ডারটি সম্পন্ন করুন</h2>
  <p class="subtitle">নিচের ফর্মে আপনার সঠিক তথ্য দিন</p>

  <form id="sagar-order-details">
    <div class="field">
      <label for="sagar-name">আপনার নাম *</label>
      <input id="sagar-name" name="name" type="text"
        placeholder="আপনার সম্পূর্ণ নাম লিখুন" required>
    </div>

    <div class="field">
      <label for="sagar-phone">মোবাইল নম্বর *</label>
      <input id="sagar-phone" name="phone" type="tel"
        placeholder="01XXXXXXXXX" pattern="01[0-9]{9}" required>
    </div>

    <div class="field">
      <label for="sagar-district">জেলা *</label>
      <input id="sagar-district" name="district" type="text"
        placeholder="আপনার জেলার নাম" required>
    </div>

    <div class="field">
      <label for="sagar-address">সম্পূর্ণ ডেলিভারি ঠিকানা *</label>
      <textarea id="sagar-address" name="address"
        placeholder="গ্রাম/এলাকা, থানা, জেলা ও বাসার ঠিকানা লিখুন"
        required></textarea>
    </div>

    <div class="field">
      <label for="sagar-product">পণ্যের নাম *</label>
      <select id="sagar-product" name="product" required>
        <option value="">পণ্য নির্বাচন করুন</option>
        <option value="আম আচার">আম আচার</option>
        <option value="তেঁতুল আচার">তেঁতুল আচার</option>
        <option value="বড়ই আচার">বড়ই আচার</option>
        <option value="মিক্স আচার">মিক্স আচার</option>
        <option value="কম্বো প্যাকেজ">কম্বো প্যাকেজ</option>
      </select>
    </div>

    <div class="field">
      <label for="sagar-qty">পরিমাণ *</label>
      <select id="sagar-qty" name="quantity" required>
        <option value="1">১টি</option>
        <option value="2">২টি</option>
        <option value="3">৩টি</option>
        <option value="4">৪টি</option>
        <option value="5">৫টি</option>
      </select>
    </div>

    <div class="summary">
      <div>পণ্যের মূল্য: <strong id="sagar-price">৳১২০</strong></div>
      <div>ডেলিভারি চার্জ: <strong>নির্ধারণ করতে হবে</strong></div>
      <div class="total">সর্বমোট: <span id="sagar-total">৳১২০</span></div>
    </div>

    <div class="field">
      <label for="sagar-note">অতিরিক্ত নির্দেশনা (ঐচ্ছিক)</label>
      <textarea id="sagar-note" name="note"
        placeholder="বিশেষ কোনো নির্দেশনা থাকলে লিখুন"></textarea>
    </div>

    <button type="submit">অর্ডার কনফার্ম করুন</button>
    <p class="note">অর্ডারের তথ্য সঠিকভাবে পূরণ করুন।</p>
    <p id="sagar-message" role="status" style="display:none;color:#176b38;text-align:center"></p>
  </form>

  <script>
    (function () {
      const form = document.getElementById('sagar-order-details');
      const product = document.getElementById('sagar-product');
      const qty = document.getElementById('sagar-qty');
      const priceText = document.getElementById('sagar-price');
      const totalText = document.getElementById('sagar-total');
      const message = document.getElementById('sagar-message');

      const prices = {
        'আম আচার': 120,
        'তেঁতুল আচার': 120,
        'বড়ই আচার': 120,
        'মিক্স আচার': 120,
        'কম্বো প্যাকেজ': 999
      };

      function updateTotal() {
        const price = prices[product.value] || 120;
        const total = price * Number(qty.value);
        priceText.textContent = '৳' + price.toLocaleString('en-US');
        totalText.textContent = '৳' + total.toLocaleString('en-US');
      }

      product.addEventListener('change', updateTotal);
      qty.addEventListener('change', updateTotal);

      form.addEventListener('submit', function (event) {
        event.preventDefault();
        message.style.display = 'block';
        message.textContent =
          'ফর্মটি তৈরি হয়েছে। অর্ডার গ্রহণ করতে ফর্মটি WooCommerce বা অন্য কোনো অর্ডার সিস্টেমের সঙ্গে যুক্ত করতে হবে।';
      });

      updateTotal();
    })();
  </script>
</div>