<!DOCTYPE html>
<html lang="ar">
<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: #f8f9fa;
            margin: 0;
            padding: 0;
            direction: rtl;
        }

        h2 {
            text-align: center;
            color: #000000;
            margin-top: 40px;
            font-size: 30px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }

        form {
            max-width: 600px;
            margin: 30px auto;
            padding: 30px;
            background-color: #6c757d; /* لون رمادي أنيق */
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .form-group {
            margin-bottom: 25px;
        }

        label {
            font-size: 18px;
            color: #fff;
            display: block;
            margin-bottom: 8px;
        }

        input, select, textarea {
            width: 100%;
            padding: 12px;
            margin-top: 8px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 16px;
            box-sizing: border-box;
        }

        textarea {
            resize: vertical;
            min-height: 120px;
        }

        button {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 15px 20px;
            font-size: 18px;
            border-radius: 6px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #218838;
        }

        .help-icon {
            color: #28a745;
            font-size: 20px;
            cursor: pointer;
            margin-left: 5px;
            vertical-align: middle;
        }

        .help-icon:hover {
            color: #fff;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .form-row .form-group {
            width: calc(50% - 10px);
        }

        @media (max-width: 768px) {
            .form-row .form-group {
                width: 100%;
            }
        }

        /* رسم لتزيين النموذج */
        .decoration {
            position: absolute;
            top: -20px;
            left: -20px;
            width: 100px;
            height: 100px;
            background-color: #f4f4f4;
            border-radius: 50%;
            z-index: -1;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
        }

        .decoration-right {
            top: -20px;
            right: -20px;
            background-color: #6c757d;
        }
    </style>
</head>
<body>
    <!-- رسم للتزيين -->
    <div class="decoration"></div>
    <div class="decoration decoration-right"></div>

    <h2>أدخل بياناتك</h2>
    <form id="clientForm">
        <div class="form-row">
            <div class="form-group">
                <label for="name">الاسم الثنائي</label>
                <input type="text" id="name" required placeholder="أدخل اسمك بالكامل">
            </div>

            <div class="form-group">
                <label for="phone">رقم الهاتف</label>
                <input type="text" id="phone" required placeholder="أدخل رقم هاتفك" oninput="validatePhone()" maxlength="11">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="city">المدينة</label>
                <select id="city" required onchange="updateShippingCost()">
                    <option value="">اختر المدينة</option>
                    <option value="شرم الشيخ">شرم الشيخ</option>
                    <option value="الأقصر">الأقصر</option>
                    <option value="أسوان">أسوان</option>
                    <option value="الوادي الجديد">الوادي الجديد</option>
                    <option value="دمنهور">دمنهور</option>
                    <option value="الغربية">الغربية</option>
                    <option value="القاهرة">القاهرة</option>
                    <option value="الجيزة">الجيزة</option>
                    <option value="الجيزة (المدن الجديدة والتجمعات)">الجيزة (المدن الجديدة والتجمعات)</option>
                    <option value="شمال سيناء">شمال سيناء</option>
                    <option value="العريش">العريش</option>
                    <option value="البحر الأحمر">البحر الأحمر</option>
                    <option value="جنوب سيناء">جنوب سيناء</option>
                    <option value="كفر الشيخ">كفر الشيخ</option>
                    <option value="الفيوم">الفيوم</option>
                    <option value="بني سويف">بني سويف</option>
                    <option value="مرسي مطروح">مرسي مطروح</option>
                    <option value="المنيا">المنيا</option>
                    <option value="أسيوط">أسيوط</option>
                    <option value="سوهاج">سوهاج</option>
                    <option value="قنا">قنا</option>
                    <option value="الغردقة">الغردقة</option>
                    <option value="الإسكندرية">الإسكندرية</option>
                    <option value="الدقهلية">الدقهلية</option>
                    <option value="الشرقية">الشرقية</option>
                    <option value="المنوفية">المنوفية</option>
                    <option value="القليوبية">القليوبية</option>
                    <option value="البحيرة">البحيرة</option>  
                    <option value="بورسعيد">بورسعيد</option>
                    <option value="دمياط">دمياط</option>
                    <option value="الإسماعيلية">الإسماعيلية</option>
                    <option value="السويس">السويس</option>
                </select>
            </div>

            <div class="form-group">
                <label for="shippingCost">سعر الشحن</label>
                <input type="text" id="shippingCost" readonly placeholder="سيتم تحديد سعر الشحن بعد اختيار المدينة">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="country">البلد</label>
                <select id="country" required>
                    <option value="مصر">مصر</option>
                </select>
            </div>

            <div class="form-group">
                <label for="address">العنوان بالتفصيل</label>
                <textarea id="address" required placeholder="* عنوانك بالتفصيل (المركز - الحي - الشارع - العمارة - رقم الشقة)*"></textarea>
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="productCode">كود الصنف</label>
                <input type="text" id="productCode" required placeholder="أدخل كود الصنف (حروف كبيرة وأرقام)" oninput="validateProductCode()">
            </div>

            <div class="form-group">
                <label for="size">مقاسك</label>
                <select id="size" required>
                    <option value="S">S</option>
                    <option value="M">M</option>
                    <option value="L">L</option>
                    <option value="XL">XL</option>
                    <option value="XXL">XXL</option>
                    <option value="XXXL">XXXL</option>
                </select>
            </div>
        </div>

        <button type="button" onclick="sendToWhatsApp()">إرسال عبر واتساب</button>
    </form>

    <script>
        // دالة لتحديث سعر الشحن بناءً على المدينة المختارة
        function updateShippingCost() {
            var city = document.getElementById("city").value;
            var shippingCostInput = document.getElementById("shippingCost");

            // قائمة أسعار الشحن بناءً على المدينة
            var shippingCosts = {
                "شرم الشيخ": "130 جنيه",
                "الأقصر": "65 جنيه",
                "أسوان": "65 جنيه",
                "الوادي الجديد": "130 جنيه",
                "دمنهور": "50 جنيه",
                "الغربية": "50 جنيه",
                "القاهرة": "45 جنيه",
                "الجيزة": "45 جنيه",
                "الجيزة (المدن الجديدة والتجمعات)": "50 جنيه",
                "شمال سيناء": "130 جنيه",
                "العريش": "130 جنيه",
                "البحر الأحمر": "130 جنيه",
                "جنوب سيناء": "130 جنيه",
                "كفر الشيخ": "50 جنيه",
                "الفيوم": "50 جنيه",
                "بني سويف": "60 جنيه",
                "مرسي مطروح": "130 جنيه",
                "المنيا": "60 جنيه",
                "أسيوط": "60 جنيه",
                "سوهاج": "60 جنيه",
                "قنا": "60 جنيه",
                "الغردقة": "130 جنيه",
                "الإسكندرية": "50 جنيه",
                "الدقهلية": "50 جنيه",
                "الشرقية": "50 جنيه",
                "المنوفية": "50 جنيه",
                "القليوبية": "50 جنيه",
                "البحيرة": "50 جنيه",
                "بورسعيد": "55 جنيه",
                "دمياط": "50 جنيه",
                "الإسماعيلية": "55 جنيه",
                "السويس": "55 جنيه",
            };

            // تحديث سعر الشحن بناءً على المدينة
            if (shippingCosts[city]) {
                shippingCostInput.value = shippingCosts[city];
            } else {
                shippingCostInput.value = "";
            }
        }

        function validatePhone() {
            var phoneInput = document.getElementById("phone");
            phoneInput.value = phoneInput.value.replace(/\D/g, ''); // منع الحروف
            if (phoneInput.value.length > 11) {
                phoneInput.value = phoneInput.value.slice(0, 11); // تأكيد على أن الرقم 11 فقط
            }
        }

        function validateProductCode() {
            var productCodeInput = document.getElementById("productCode");
            productCodeInput.value = productCodeInput.value.toUpperCase().replace(/[^A-Z0-9]/g, ''); // ضمان أنه فقط حروف كبيرة وأرقام
        }

        function sendToWhatsApp() {
            var name = document.getElementById("name").value;
            var phone = document.getElementById("phone").value;
            var city = document.getElementById("city").value;
            var country = document.getElementById("country").value;
            var address = document.getElementById("address").value;
            var productCode = document.getElementById("productCode").value;
            var size = document.getElementById("size").value;
            var shippingCost = document.getElementById("shippingCost").value;

            if (!name || !phone || !city || !country || !address || !productCode || !size || !shippingCost) {
                alert("يرجى ملء جميع الحقول.");
                return;
            }

            var message = `الاسم: ${name}\nرقم الهاتف: ${phone}\nالمدينة: ${city}\nالبلد: ${country}\nالعنوان: ${address}\nكود الصنف: ${productCode}\nالمقاس: ${size}\nسعر الشحن: ${shippingCost}`;
            var url = `https://wa.me/201210743861?text=${encodeURIComponent(message)}`;
            window.open(url, '_blank');
        }
    </script>
</body>
</html><!DOCTYPE html>
<html lang="ar">
<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: #f8f9fa;
            margin: 0;
            padding: 0;
            direction: rtl;
        }

        h2 {
            text-align: center;
            color: #000000;
            margin-top: 40px;
            font-size: 30px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }

        form {
            max-width: 600px;
            margin: 30px auto;
            padding: 30px;
            background-color: #6c757d; /* لون رمادي أنيق */
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .form-group {
            margin-bottom: 25px;
        }

        label {
            font-size: 18px;
            color: #fff;
            display: block;
            margin-bottom: 8px;
        }

        input, select, textarea {
            width: 100%;
            padding: 12px;
            margin-top: 8px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 16px;
            box-sizing: border-box;
        }

        textarea {
            resize: vertical;
            min-height: 120px;
        }

        button {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 15px 20px;
            font-size: 18px;
            border-radius: 6px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #218838;
        }

        .help-icon {
            color: #28a745;
            font-size: 20px;
            cursor: pointer;
            margin-left: 5px;
            vertical-align: middle;
        }

        .help-icon:hover {
            color: #fff;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .form-row .form-group {
            width: calc(50% - 10px);
        }

        @media (max-width: 768px) {
            .form-row .form-group {
                width: 100%;
            }
        }

        /* رسم لتزيين النموذج */
        .decoration {
            position: absolute;
            top: -20px;
            left: -20px;
            width: 100px;
            height: 100px;
            background-color: #f4f4f4;
            border-radius: 50%;
            z-index: -1;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
        }

        .decoration-right {
            top: -20px;
            right: -20px;
            background-color: #6c757d;
        }
    </style>
</head>
<body>
    <!-- رسم للتزيين -->
    <div class="decoration"></div>
    <div class="decoration decoration-right"></div>

    <h2>أدخل بياناتك</h2>
    <form id="clientForm">
        <div class="form-row">
            <div class="form-group">
                <label for="name">الاسم الثنائي</label>
                <input type="text" id="name" required placeholder="أدخل اسمك بالكامل">
            </div>

            <div class="form-group">
                <label for="phone">رقم الهاتف</label>
                <input type="text" id="phone" required placeholder="أدخل رقم هاتفك" oninput="validatePhone()" maxlength="11">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="city">المدينة</label>
                <select id="city" required onchange="updateShippingCost()">
                    <option value="">اختر المدينة</option>
                    <option value="شرم الشيخ">شرم الشيخ</option>
                    <option value="الأقصر">الأقصر</option>
                    <option value="أسوان">أسوان</option>
                    <option value="الوادي الجديد">الوادي الجديد</option>
                    <option value="دمنهور">دمنهور</option>
                    <option value="الغربية">الغربية</option>
                    <option value="القاهرة">القاهرة</option>
                    <option value="الجيزة">الجيزة</option>
                    <option value="الجيزة (المدن الجديدة والتجمعات)">الجيزة (المدن الجديدة والتجمعات)</option>
                    <option value="شمال سيناء">شمال سيناء</option>
                    <option value="العريش">العريش</option>
                    <option value="البحر الأحمر">البحر الأحمر</option>
                    <option value="جنوب سيناء">جنوب سيناء</option>
                    <option value="كفر الشيخ">كفر الشيخ</option>
                    <option value="الفيوم">الفيوم</option>
                    <option value="بني سويف">بني سويف</option>
                    <option value="مرسي مطروح">مرسي مطروح</option>
                    <option value="المنيا">المنيا</option>
                    <option value="أسيوط">أسيوط</option>
                    <option value="سوهاج">سوهاج</option>
                    <option value="قنا">قنا</option>
                    <option value="الغردقة">الغردقة</option>
                    <option value="الإسكندرية">الإسكندرية</option>
                    <option value="الدقهلية">الدقهلية</option>
                    <option value="الشرقية">الشرقية</option>
                    <option value="المنوفية">المنوفية</option>
                    <option value="القليوبية">القليوبية</option>
                    <option value="البحيرة">البحيرة</option>  
                    <option value="بورسعيد">بورسعيد</option>
                    <option value="دمياط">دمياط</option>
                    <option value="الإسماعيلية">الإسماعيلية</option>
                    <option value="السويس">السويس</option>
                </select>
            </div>

            <div class="form-group">
                <label for="shippingCost">سعر الشحن</label>
                <input type="text" id="shippingCost" readonly placeholder="سيتم تحديد سعر الشحن بعد اختيار المدينة">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="country">البلد</label>
                <select id="country" required>
                    <option value="مصر">مصر</option>
                </select>
            </div>

            <div class="form-group">
                <label for="address">العنوان بالتفصيل</label>
                <textarea id="address" required placeholder="* عنوانك بالتفصيل (المركز - الحي - الشارع - العمارة - رقم الشقة)*"></textarea>
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="productCode">كود الصنف</label>
                <input type="text" id="productCode" required placeholder="أدخل كود الصنف (حروف كبيرة وأرقام)" oninput="validateProductCode()">
            </div>

            <div class="form-group">
                <label for="size">مقاسك</label>
                <select id="size" required>
                    <option value="S">S</option>
                    <option value="M">M</option>
                    <option value="L">L</option>
                    <option value="XL">XL</option>
                    <option value="XXL">XXL</option>
                    <option value="XXXL">XXXL</option>
                </select>
            </div>
        </div>

        <button type="button" onclick="sendToWhatsApp()">إرسال عبر واتساب</button>
    </form>

    <script>
        // دالة لتحديث سعر الشحن بناءً على المدينة المختارة
        function updateShippingCost() {
            var city = document.getElementById("city").value;
            var shippingCostInput = document.getElementById("shippingCost");

            // قائمة أسعار الشحن بناءً على المدينة
            var shippingCosts = {
                "شرم الشيخ": "130 جنيه",
                "الأقصر": "65 جنيه",
                "أسوان": "65 جنيه",
                "الوادي الجديد": "130 جنيه",
                "دمنهور": "50 جنيه",
                "الغربية": "50 جنيه",
                "القاهرة": "45 جنيه",
                "الجيزة": "45 جنيه",
                "الجيزة (المدن الجديدة والتجمعات)": "50 جنيه",
                "شمال سيناء": "130 جنيه",
                "العريش": "130 جنيه",
                "البحر الأحمر": "130 جنيه",
                "جنوب سيناء": "130 جنيه",
                "كفر الشيخ": "50 جنيه",
                "الفيوم": "50 جنيه",
                "بني سويف": "60 جنيه",
                "مرسي مطروح": "130 جنيه",
                "المنيا": "60 جنيه",
                "أسيوط": "60 جنيه",
                "سوهاج": "60 جنيه",
                "قنا": "60 جنيه",
                "الغردقة": "130 جنيه",
                "الإسكندرية": "50 جنيه",
                "الدقهلية": "50 جنيه",
                "الشرقية": "50 جنيه",
                "المنوفية": "50 جنيه",
                "القليوبية": "50 جنيه",
                "البحيرة": "50 جنيه",
                "بورسعيد": "55 جنيه",
                "دمياط": "50 جنيه",
                "الإسماعيلية": "55 جنيه",
                "السويس": "55 جنيه",
            };

            // تحديث سعر الشحن بناءً على المدينة
            if (shippingCosts[city]) {
                shippingCostInput.value = shippingCosts[city];
            } else {
                shippingCostInput.value = "";
            }
        }

        function validatePhone() {
            var phoneInput = document.getElementById("phone");
            phoneInput.value = phoneInput.value.replace(/\D/g, ''); // منع الحروف
            if (phoneInput.value.length > 11) {
                phoneInput.value = phoneInput.value.slice(0, 11); // تأكيد على أن الرقم 11 فقط
            }
        }

        function validateProductCode() {
            var productCodeInput = document.getElementById("productCode");
            productCodeInput.value = productCodeInput.value.toUpperCase().replace(/[^A-Z0-9]/g, ''); // ضمان أنه فقط حروف كبيرة وأرقام
        }

        function sendToWhatsApp() {
            var name = document.getElementById("name").value;
            var phone = document.getElementById("phone").value;
            var city = document.getElementById("city").value;
            var country = document.getElementById("country").value;
            var address = document.getElementById("address").value;
            var productCode = document.getElementById("productCode").value;
            var size = document.getElementById("size").value;
            var shippingCost = document.getElementById("shippingCost").value;

            if (!name || !phone || !city || !country || !address || !productCode || !size || !shippingCost) {
                alert("يرجى ملء جميع الحقول.");
                return;
            }

            var message = `الاسم: ${name}\nرقم الهاتف: ${phone}\nالمدينة: ${city}\nالبلد: ${country}\nالعنوان: ${address}\nكود الصنف: ${productCode}\nالمقاس: ${size}\nسعر الشحن: ${shippingCost}`;
            var url = `https://wa.me/201210743861?text=${encodeURIComponent(message)}`;
            window.open(url, '_blank');
        }
    </script>
</body>
</html>