<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>अंडा सेंटर - ऑनलाइन ऑर्डर</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f4f4f9; margin: 0; padding: 10px; }
    .order-box { background: #ffffff; padding: 20px; border-radius: 12px; max-width: 450px; margin: auto; box-shadow: 0px 4px 15px rgba(0,0,0,0.2); }
    h2 { text-align: center; color: #d9534f; margin-top: 0; }
    .shop-contact { text-align: center; background: #ffebe6; padding: 10px; border-radius: 6px; font-weight: bold; color: #333; margin-bottom: 15px; font-size: 16px; }
    .form-group { margin-bottom: 12px; }
    label { display: block; font-weight: bold; margin-bottom: 4px; color: #333; }
    input[type="text"], input[type="tel"], textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
    .menu-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
    .item-name { font-size: 15px; font-weight: 600; }
    .item-price { color: #27ae60; font-weight: bold; }
    .qty-input { width: 60px !important; text-align: center; font-size: 16px; }
    .submit-btn { width: 100%; background-color: #25D366; color: white; border: none; padding: 14px; font-size: 18px; font-weight: bold; border-radius: 6px; cursor: pointer; margin-top: 15px; }
  </style>
</head>
<body>
  <div class="order-box">
    <h2>🥚 अंडा सेंटर - ऑर्डर करें</h2>
    <div class="shop-contact">
      📞 दुकान का नंबर: <a href="tel:7697487260" style="color:#d9534f; text-decoration:none;">7697487260</a>
    </div>
    <form id="eggOrderForm">
      <div class="form-group">
        <label for="custName">आपका नाम:</label>
        <input type="text" id="custName" placeholder="अपना नाम लिखें" required>
      </div>
      <div class="form-group">
        <label for="custPhone">मोबाइल नंबर:</label>
        <input type="tel" id="custPhone" placeholder="10 अंकों का नंबर" required>
      </div>
      <div class="form-group">
        <label for="custAddress">पूरा पता (Address):</label>
        <textarea id="custAddress" rows="2" placeholder="घर का पता लिखें" required></textarea>
      </div>
      <hr>
      <label>मेन्यू से क्वांटिटी चुनिए:</label>
      <div class="menu-item">
        <div><div class="item-name">कच्चा अंडा</div><div class="item-price">₹9 / पीस</div></div>
        <input type="number" class="qty-input" id="item1" min="0" value="0">
      </div>
      <div class="menu-item">
        <div><div class="item-name">उबला हुआ अंडा</div><div class="item-price">₹10 / पीस</div></div>
        <input type="number" class="qty-input" id="item2" min="0" value="0">
      </div>
      <div class="menu-item">
        <div><div class="item-name">1 अंडा ऑमलेट</div><div class="item-price">₹20 / प्लेट</div></div>
        <input type="number" class="qty-input" id="item3" min="0" value="0">
      </div>
      <div class="menu-item">
        <div><div class="item-name">1 अंडा पाव भाजी / पाव</div><div class="item-price">₹20 / प्लेट</div></div>
        <input type="number" class="qty-input" id="item4" min="0" value="0">
      </div>
      <div class="menu-item">
        <div><div class="item-name">1 अंडा फ्राई</div><div class="item-price">₹12 / पीस</div></div>
        <input type="number" class="qty-input" id="item5" min="0" value="0">
      </div>
      <div class="menu-item">
        <div><div class="item-name">1 अंडा बेंटो</div><div class="item-price">₹20 / प्लेट</div></div>
        <input type="number" class="qty-input" id="item6" min="0" value="0">
      </div>
      <button type="button" class="submit-btn" onclick="sendOrder()">📲 व्हाट्सएप पर ऑर्डर भेजें</button>
    </form>
  </div>
  <script>
    function sendOrder() {
      const name = document.getElementById('custName').value;
      const phone = document.getElementById('custPhone').value;
      const address = document.getElementById('custAddress').value;
      if (!name || !phone || !address) { alert("कृपया अपना नाम, नंबर और पता पूरा भरें!"); return; }
      const items = [
        { id: 'item1', name: 'कच्चा अंडा', price: 9 },
        { id: 'item2', name: 'उबला हुआ अंडा', price: 10 },
        { id: 'item3', name: '1 अंडा ऑमलेट', price: 20 },
        { id: 'item4', name: '1 अंडा पाव भाजी', price: 20 },
        { id: 'item5', name: '1 अंडा फ्राई', price: 12 },
        { id: 'item6', name: '1 अंडा बेंटो', price: 20 }
      ];
      let orderText = `🛒 *नया अंडा ऑर्डर*\n\n👤 *नाम:* ${name}\n📞 *फोन:* ${phone}\n🏠 *पता:* ${address}\n\n📋 *ऑर्डर विवरण:*\n`;
      let totalAmount = 0, hasItems = false;
      items.forEach(item => {
        const qty = parseInt(document.getElementById(item.id).value) || 0;
        if (qty > 0) {
          hasItems = true;
          const itemTotal = qty * item.price;
          totalAmount += itemTotal;
          orderText += `- ${item.name} x ${qty} = ₹${itemTotal}\n`;
        }
      });
      if (!hasItems) { alert("कृपया कम से कम एक आइटम चुनें!"); return; }
      orderText += `\n💰 *कुल राशि:* ₹${totalAmount}`;
      window.open(`https://wa.me/917697487260?text=${encodeURIComponent(orderText)}`, '_blank');
    }
  </script>
</body>
</html>
