<!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>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --gov-dark:   #1a2a1a;
            --gov-green:  #1e5631;
            --gov-green2: #2d7a47;
            --gov-green3: #3a9a5c;
            --gold:       #c8a84b;
            --gold-light: #e8c96a;
            --gold-dark:  #a07830;
            --white:      #ffffff;
            --off-white:  #f7f9f7;
            --grey-light: #eef2ee;
            --grey-mid:   #c8d4c8;
            --grey-dark:  #6a7a6a;
            --text-dark:  #1a2a1a;
            --text-mid:   #3a4a3a;
            --text-muted: #6a7a6a;
            --border:     #c0d0c0;
            --shadow:     rgba(30,86,49,0.12);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Cairo', sans-serif;
            background: var(--off-white);
            color: var(--text-dark);
            min-height: 100vh;
        }

        /* ── HEADER ── */
        .header {
            background: linear-gradient(135deg, var(--gov-dark) 0%, var(--gov-green) 60%, var(--gov-green2) 100%);
            border-bottom: 3px solid var(--gold);
            padding: 22px 0 18px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .header::after {
            content: '';
            position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
            background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent);
        }
        .header-content {
            display: flex; align-items: center; justify-content: space-between;
            gap: 20px; position: relative; z-index: 1;
            max-width: 900px; margin: 0 auto; padding: 0 20px;
        }
        .logo-img {
            width: 85px; height: 85px; border-radius: 50%;
            border: 3px solid var(--gold);
            box-shadow: 0 0 18px rgba(200,168,75,0.5);
            flex-shrink: 0;
        }
        .header-text h1 {
            font-size: 1.9rem; font-weight: 900; color: var(--gold-light);
            text-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .header-text p { font-size: 0.9rem; color: var(--grey-mid); font-weight: 600; margin-top: 3px; }
        .header-badge {
            display: inline-block;
            background: rgba(200,168,75,0.15);
            border: 1px solid var(--gold-dark);
            color: var(--gold-light); padding: 3px 14px; border-radius: 20px;
            font-size: 0.78rem; font-weight: 700; margin-top: 6px;
        }

        /* ── CONTAINER ── */
        .container { max-width: 820px; margin: 35px auto; padding: 0 20px 60px; }

        /* ── FORM CARD ── */
        .form-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 16px; padding: 38px;
            box-shadow: 0 4px 24px var(--shadow), 0 1px 4px rgba(0,0,0,0.06);
        }
        .form-title { text-align: center; margin-bottom: 28px; }
        .form-title h2 {
            font-size: 1.45rem; font-weight: 800; color: var(--gov-green);
            margin-bottom: 6px;
        }
        .form-title p { color: var(--text-muted); font-size: 0.88rem; }

        .divider {
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--gov-green2), var(--gold), var(--gov-green2), transparent);
            margin: 0 0 28px; border-radius: 2px;
        }

        /* ── SECTION HEADER ── */
        .section-header {
            display: flex; align-items: center; gap: 10px;
            margin: 28px 0 16px;
            padding: 10px 16px;
            background: linear-gradient(135deg, var(--gov-green) 0%, var(--gov-green2) 100%);
            border-radius: 10px;
            border-right: 4px solid var(--gold);
        }
        .section-icon { font-size: 1.1rem; }
        .section-header h3 { font-size: 1rem; font-weight: 700; color: var(--white); }

        /* ── FORM ELEMENTS ── */
        .form-group { margin-bottom: 18px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

        label {
            display: block; font-size: 0.86rem; font-weight: 700;
            color: var(--gov-green); margin-bottom: 7px;
        }
        label span.required { color: #c0392b; margin-right: 3px; }

        input[type="text"],
        input[type="tel"],
        input[type="email"],
        input[type="number"],
        select, textarea {
            width: 100%; padding: 11px 14px;
            background: var(--off-white);
            border: 1.5px solid var(--border);
            border-radius: 9px; color: var(--text-dark);
            font-family: 'Cairo', sans-serif; font-size: 0.93rem;
            transition: all 0.25s ease; outline: none; direction: rtl;
        }
        input:focus, select:focus, textarea:focus {
            border-color: var(--gov-green2);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(45,122,71,0.12);
        }
        input::placeholder, textarea::placeholder { color: var(--text-muted); font-size: 0.83rem; }
        select option { background: var(--white); color: var(--text-dark); }

        /* ── COUNTRY SEARCH ── */
        .country-search-wrapper { position: relative; }
        .country-selected-display {
            padding: 11px 14px;
            background: var(--off-white);
            border: 1.5px solid var(--border);
            border-radius: 9px; color: var(--text-dark);
            font-family: 'Cairo', sans-serif; font-size: 0.93rem;
            cursor: pointer; display: flex; justify-content: space-between;
            align-items: center; user-select: none;
        }
        .country-selected-display:hover { border-color: var(--gov-green2); }
        .country-arrow { color: var(--text-muted); font-size: 0.8rem; transition: transform 0.2s; }
        .country-selected-display.open .country-arrow { transform: rotate(180deg); }

        .country-dropdown {
            width: 100%;
            background: var(--white);
            border: 1.5px solid var(--gov-green2);
            border-radius: 0 0 9px 9px;
            max-height: 260px; overflow-y: auto;
            display: none;
            position: absolute; z-index: 200;
            box-shadow: 0 8px 24px rgba(0,0,0,0.14);
        }
        .country-dropdown.open { display: block; }
        .search-row {
            padding: 8px 10px; border-bottom: 1px solid var(--border);
            position: sticky; top: 0; background: var(--white); z-index: 10;
            display: flex; align-items: center; gap: 8px;
        }
        .search-row span { color: var(--text-muted); }
        .country-search-input {
            flex: 1; padding: 8px 10px;
            background: var(--off-white);
            border: 1.5px solid var(--border);
            border-radius: 7px; color: var(--text-dark);
            font-family: 'Cairo', sans-serif; font-size: 0.9rem;
            outline: none; direction: rtl;
        }
        .country-search-input:focus { border-color: var(--gov-green2); background: var(--white); }
        .country-group-label {
            padding: 5px 14px; font-size: 0.75rem; font-weight: 700;
            color: var(--gov-green); background: var(--grey-light);
            border-bottom: 1px solid var(--border); letter-spacing: 0.3px;
        }
        .country-option {
            padding: 9px 14px; cursor: pointer; font-size: 0.88rem;
            color: var(--text-dark); transition: background 0.12s;
            border-bottom: 1px solid var(--grey-light);
        }
        .country-option:last-child { border-bottom: none; }
        .country-option:hover, .country-option.selected {
            background: var(--grey-light); color: var(--gov-green);
        }

        /* ── PHONE ── */
        .phone-wrapper { display: flex; gap: 8px; align-items: stretch; }
        .phone-prefix {
            background: linear-gradient(135deg, var(--gov-green) 0%, var(--gov-green2) 100%);
            border: 1.5px solid var(--gov-green2); border-radius: 9px;
            padding: 11px 14px; color: var(--white); font-weight: 700;
            font-size: 0.88rem; white-space: nowrap; display: flex;
            align-items: center; min-width: 78px; justify-content: center;
            font-family: 'Cairo', sans-serif;
        }
        .phone-wrapper input { flex: 1; }

        /* ── ACCOUNT TYPE CHIPS ── */
        .account-types { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
        .account-chip { display: none; }
        .account-chip + label {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 8px 16px; background: var(--off-white);
            border: 1.5px solid var(--border); border-radius: 25px;
            cursor: pointer; font-size: 0.84rem; font-weight: 600;
            color: var(--text-muted); transition: all 0.25s ease; margin-bottom: 0;
        }
        .account-chip:checked + label {
            background: linear-gradient(135deg, var(--gov-green) 0%, var(--gov-green2) 100%);
            border-color: var(--gold); color: var(--white);
            box-shadow: 0 3px 10px rgba(30,86,49,0.3);
        }
        .account-chip + label:hover { border-color: var(--gov-green2); color: var(--gov-green); }
        .platform-logo {
            width: 22px; height: 22px;
            object-fit: contain; border-radius: 5px;
            flex-shrink: 0;
        }
        .tiktok-logo {
            background: #000;
            border-radius: 5px;
            padding: 2px;
        }

        /* ── PAYMENT OPTIONS ── */
        .payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
        .payment-radio { display: none; }
        .payment-label {
            display: flex; align-items: center; gap: 10px;
            padding: 12px 14px; background: var(--off-white);
            border: 1.5px solid var(--border); border-radius: 10px;
            cursor: pointer; transition: all 0.25s ease; font-size: 0.86rem;
            font-weight: 600; color: var(--text-muted); margin-bottom: 0;
        }
        .payment-radio:checked + .payment-label {
            background: linear-gradient(135deg, rgba(30,86,49,0.08), rgba(45,122,71,0.08));
            border-color: var(--gov-green2); color: var(--gov-green);
            box-shadow: 0 2px 8px rgba(30,86,49,0.15);
        }
        .payment-label:hover { border-color: var(--gov-green2); }
        .payment-icon { font-size: 1.2rem; }

        /* ── PRICE ── */
        .price-wrapper { position: relative; }
        .price-currency {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            color: var(--gov-green); font-weight: 700; font-size: 0.88rem; pointer-events: none;
        }
        .price-wrapper input { padding-left: 48px; }

        /* ── SUBMIT BUTTON ── */
        .submit-btn {
            width: 100%; padding: 16px; margin-top: 28px;
            background: linear-gradient(135deg, var(--gov-dark) 0%, var(--gov-green) 50%, var(--gov-green2) 100%);
            border: 2px solid var(--gold-dark); border-radius: 12px;
            color: var(--gold-light); font-family: 'Cairo', sans-serif;
            font-size: 1.05rem; font-weight: 800; cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(30,86,49,0.35);
        }
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(30,86,49,0.45);
            border-color: var(--gold);
        }

        /* ── SUCCESS CARD ── */
        /* Terms box */
        .terms-box {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(212,175,55,0.3);
            border-radius: 10px;
            padding: 18px 20px;
            margin-bottom: 16px;
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.9;
        }
        .terms-box p { color: var(--text-main); font-weight: 600; margin-bottom: 8px; }
        .terms-box ol { padding-right: 20px; margin: 0 0 14px 0; }
        .terms-box ol li { margin-bottom: 6px; }
        .terms-check {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            color: var(--text-main);
            font-weight: 600;
            font-size: 0.9rem;
            margin-top: 10px;
        }
        .terms-check input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--gov-green);
            cursor: pointer;
            flex-shrink: 0;
        }
        .success-card { text-align: center; padding: 40px 20px; }
        .success-icon { font-size: 3.5rem; margin-bottom: 18px; }
        .success-card h2 { font-size: 1.7rem; font-weight: 800; color: var(--gov-green); margin-bottom: 10px; }
        .success-card p { color: var(--text-muted); margin-bottom: 28px; }
        .download-btn {
            display: inline-block; padding: 15px 38px;
            background: linear-gradient(135deg, var(--gov-green) 0%, var(--gov-green2) 100%);
            border: 2px solid var(--gold-dark);
            color: var(--white); border-radius: 12px; font-weight: 800;
            font-size: 1rem; text-decoration: none; transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(30,86,49,0.35);
        }
        .download-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30,86,49,0.45); }
        .new-form-btn {
            display: inline-block; margin-top: 14px; padding: 11px 28px;
            background: transparent; border: 2px solid var(--gov-green);
            border-radius: 10px; color: var(--gov-green); font-family: 'Cairo', sans-serif;
            font-size: 0.93rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease;
        }
        .new-form-btn:hover { background: rgba(30,86,49,0.08); }

        /* ── ALERT ── */
        .alert {
            padding: 13px 16px; border-radius: 9px; margin-bottom: 18px;
            font-size: 0.87rem; font-weight: 600; display: none;
        }
        .alert-error { background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.3); color: #c0392b; }

        /* ── LOADING ── */
        .loading { display: none; text-align: center; padding: 50px 20px; }
        .spinner {
            width: 42px; height: 42px;
            border: 3px solid rgba(30,86,49,0.15); border-top-color: var(--gov-green2);
            border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 15px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── FOOTER ── */
        .footer {
            text-align: center; padding: 28px 20px;
            border-top: 2px solid var(--gov-green);
            background: var(--gov-dark);
            color: var(--grey-mid); font-size: 0.84rem; line-height: 1.9;
        }
        .footer strong { color: var(--gold-light); }

        /* ── HIDDEN SECTIONS ── */
        #gulfBankSection { display: none; }
        #nonGulfSection  { display: none; }

        /* ── CUSTOM PAYMENT ── */
        .custom-payment-note {
            background: rgba(30,86,49,0.06);
            border: 1px solid rgba(30,86,49,0.2);
            border-radius: 8px; padding: 10px 14px;
            font-size: 0.83rem; color: var(--gov-green);
            margin-bottom: 10px; font-weight: 600;
        }

        /* ── INFO BOX ── */
        .info-box {
            background: rgba(200,168,75,0.08);
            border: 1px solid rgba(200,168,75,0.3);
            border-radius: 9px; padding: 12px 16px;
            font-size: 0.84rem; color: var(--text-mid);
            margin-bottom: 20px; line-height: 1.7;
        }
        .info-box strong { color: var(--gov-green); }

        @media (max-width: 600px) {
            .form-row { grid-template-columns: 1fr; }
            .payment-options { grid-template-columns: 1fr; }
            .form-card { padding: 22px 16px; }
            .header-text h1 { font-size: 1.45rem; }
            .logo-img { width: 68px; height: 68px; }
            .account-types { gap: 7px; }
        }
    </style>
</head>
<body>

<header class="header">
    <div class="header-content">
        <img src="/static/logo.png" alt="الميش ستور" class="logo-img">
        <div class="header-text">
            <h1>الميش ستور</h1>
            <p>ALMESH STORE</p>
            <span class="header-badge">🎮 وسيط حسابات الألعاب والتواصل الاجتماعي</span>
        </div>
        <img src="/static/moc_logo_official.png" alt="وزارة التجارة" style="height:70px; width:auto; background:rgba(255,255,255,0.92); border-radius:8px; padding:6px 10px;">
    </div>
</header>

<div class="container">
    <div class="form-card" id="formCard">

        <div class="form-title">
            <h2>📋 نموذج بيانات البائع</h2>
            <p>يرجى تعبئة جميع البيانات بدقة لإتمام عملية الوساطة وإصدار الإيصال الرسمي</p>
        </div>
        <div class="divider"></div>

        <div class="info-box">
            <strong>تنبيه:</strong> جميع البيانات المدخلة ستظهر في الإيصال الرسمي الصادر من
            <strong>مؤسسة فهد حمد عبدالله الزومان للتجارة</strong> والموثق لدى وزارة التجارة السعودية.
        </div>

        <div class="alert alert-error" id="alertBox"></div>

        <form id="sellerForm">

            <!-- ── القسم 1: معلومات الحساب ── -->
            <div class="section-header">
                <span class="section-icon">🎮</span>
                <h3>معلومات الحساب</h3>
            </div>

            <div class="form-group">
                <label>نوع الحساب <span class="required">*</span></label>
                <div class="account-types">
                    <input type="radio" name="account_type" id="type_pubg"      value="PUBG Mobile" class="account-chip">
                    <label for="type_pubg"><img src="/static/logos/pubg.png" class="platform-logo" alt="PUBG"> ببجي موبايل</label>
                    <input type="radio" name="account_type" id="type_instagram" value="Instagram"   class="account-chip">
                    <label for="type_instagram"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" class="platform-logo" alt="Instagram"> انستقرام</label>
                    <input type="radio" name="account_type" id="type_snapchat"  value="Snapchat"    class="account-chip">
                    <label for="type_snapchat"><img src="https://upload.wikimedia.org/wikipedia/en/c/c4/Snapchat_logo.svg" class="platform-logo" alt="Snapchat"> سناب شات</label>
                    <input type="radio" name="account_type" id="type_tiktok"    value="TikTok"      class="account-chip">
                    <label for="type_tiktok"><img src="https://upload.wikimedia.org/wikipedia/en/a/a9/TikTok_logo.svg" class="platform-logo tiktok-logo" alt="TikTok"> تيك توك</label>
                    <input type="radio" name="account_type" id="type_other"     value="أخرى"        class="account-chip">
                    <label for="type_other">➕ أخرى</label>
                </div>
            </div>

            <div class="form-group">
                <label for="account_details">تفاصيل الحساب <span class="required">*</span></label>
                <textarea id="account_details" name="account_details" rows="3"
                    placeholder="اكتب تفاصيل الحساب (اسم المستخدم، المستوى، المحتوى، عدد المتابعين، إلخ...)"></textarea>
            </div>

            <!-- ── القسم 2: التسعير ── -->
            <div class="section-header">
                <span class="section-icon">💰</span>
                <h3>التسعير والوساطة</h3>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="account_price">سعر الحساب <span class="required">*</span></label>
                    <div class="price-wrapper">
                        <input type="number" id="account_price" name="account_price"
                            placeholder="0.00" min="0" step="0.01">
                        <span class="price-currency" id="currencyLabel">ر.س</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="mediation_amount">مبلغ الوساطة <span class="required">*</span></label>
                    <div class="price-wrapper">
                        <input type="number" id="mediation_amount" name="mediation_amount"
                            placeholder="0.00" min="0" step="0.01">
                        <span class="price-currency" id="currencyLabel2">ر.س</span>
                    </div>
                </div>
            </div>

            <!-- ── القسم 3: بيانات البائع ── -->
            <div class="section-header">
                <span class="section-icon">👤</span>
                <h3>بيانات البائع</h3>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="seller_name">اسم البائع <span class="required">*</span></label>
                    <input type="text" id="seller_name" name="seller_name" placeholder="الاسم الكامل">
                </div>
                <div class="form-group">
                    <label>البلد <span class="required">*</span></label>
                    <div class="country-search-wrapper" id="countryWidget">
                        <div class="country-selected-display" id="countryDisplay" onclick="toggleCountryDropdown()">
                            <span id="countryDisplayText" style="color:var(--text-muted);">-- اختر البلد --</span>
                            <span class="country-arrow" id="countryArrow">▼</span>
                        </div>
                        <div class="country-dropdown" id="countryDropdown">
                            <div class="search-row">
                                <span>🔍</span>
                                <input type="text" class="country-search-input" id="countrySearchInput"
                                    placeholder="ابحث عن دولة..." oninput="filterCountries()" onclick="event.stopPropagation()">
                            </div>
                            <div id="countryList"></div>
                        </div>
                    </div>
                    <input type="hidden" id="seller_country" name="seller_country" value="">
                </div>
            </div>

            <!-- رقم الجوال -->
            <div class="form-group" id="phoneGroup" style="display:none;">
                <label for="seller_phone">رقم الجوال <span class="required">*</span></label>
                <div class="phone-wrapper">
                    <span class="phone-prefix" id="phonePrefix">+966</span>
                    <input type="tel" id="seller_phone" name="seller_phone"
                        placeholder="5XXXXXXXX" dir="ltr">
                </div>
            </div>

            <!-- البريد الإلكتروني -->
            <div class="form-group" id="emailGroup" style="display:none;">
                <label for="seller_email">البريد الإلكتروني <span style="color:var(--text-muted); font-weight:400;">(اختياري)</span></label>
                <input type="email" id="seller_email" name="seller_email"
                    placeholder="example@email.com" dir="ltr">
            </div>

            <!-- طريقة استلام الأموال العامة (كاش / بينانس / تحويل بنكي) -->
            <div class="form-group" id="generalPaymentGroup" style="display:none;">
                <label>طريقة استلام الأموال <span class="required">*</span></label>
                <div class="payment-options" id="generalPaymentOptions">
                    <div>
                        <input type="radio" name="general_payment" id="gp_cash" value="كاش" class="payment-radio" onchange="onGeneralPaymentChange()">
                        <label for="gp_cash" class="payment-label">
                            <span class="payment-icon">💵</span>
                            <span>كاش</span>
                        </label>
                    </div>
                    <div>
                        <input type="radio" name="general_payment" id="gp_binance" value="بينانس" class="payment-radio" onchange="onGeneralPaymentChange()">
                        <label for="gp_binance" class="payment-label">
                            <span class="payment-icon">🟡</span>
                            <span>Binance</span>
                        </label>
                    </div>
                    <div>
                        <input type="radio" name="general_payment" id="gp_bank" value="تحويل بنكي" class="payment-radio" onchange="onGeneralPaymentChange()">
                        <label for="gp_bank" class="payment-label">
                            <span class="payment-icon">🏦</span>
                            <span>تحويل بنكي</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Binance ID -->
            <div class="form-group" id="binanceIdGroup" style="display:none;">
                <label for="binance_id">Binance ID <span class="required">*</span></label>
                <input type="text" id="binance_id" name="binance_id"
                    placeholder="أدخل Binance ID الخاص بك" dir="ltr"
                    style="letter-spacing:1px; font-family:monospace;">
            </div>

            <!-- القسم 4: بيانات استلام الأموال -->
            <div class="section-header" id="bankSectionHeader" style="display:none;">
                <span class="section-icon">🏦</span>
                <h3>بيانات استلام الأموال</h3>
            </div>

            <!-- دول الخليج -->
            <div id="gulfBankSection">
                <div class="form-row">
                    <div class="form-group">
                        <label for="bank_name">اسم البنك <span class="required">*</span></label>
                        <select id="bank_name" name="bank_name">
                            <option value="">-- اختر البنك --</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="iban">رقم الآيبان (IBAN) <span class="required">*</span></label>
                        <input type="text" id="iban" name="iban"
                            placeholder="SA0000000000000000000000" dir="ltr"
                            style="text-transform:uppercase; letter-spacing:1px;">
                    </div>
                </div>
            </div>

            <!-- دول غير الخليج -->
            <div id="nonGulfSection">
                <div class="custom-payment-note">
                    💡 يرجى كتابة طريقة استلام أموالك بالتفصيل (مثال: PayPal، Western Union، رقم حوالة، إلخ...)
                </div>
                <div class="form-group">
                    <label for="custom_payment_details">طريقة استلام الأموال <span class="required">*</span></label>
                    <textarea id="custom_payment_details" name="custom_payment_details" rows="4"
                        placeholder="اكتب طريقة استلام الأموال بالتفصيل...&#10;مثال: PayPal: myemail@example.com&#10;أو: Western Union - الاسم الكامل - رقم الهوية"></textarea>
                </div>
            </div>

            <!-- ── القسم 5: بيانات المشتري ── -->
            <div class="section-header">
                <span class="section-icon">🛒</span>
                <h3>بيانات المشتري</h3>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="buyer_name">اسم المشتري <span class="required">*</span></label>
                    <input type="text" id="buyer_name" name="buyer_name" placeholder="الاسم الكامل">
                </div>
                <div class="form-group">
                    <label for="buyer_phone">رقم الجوال / المعرّف <span class="required">*</span></label>
                    <input type="text" id="buyer_phone" name="buyer_phone" placeholder="مثال: +966501234567 أو @username">
                </div>
            </div>
            <div class="form-group">
                <label>طريقة الدفع من المشتري <span class="required">*</span></label>
                <div class="payment-options" id="buyerPaymentOptions">
                    <label class="payment-option">
                        <input type="radio" name="buyer_payment" value="كاش">
                        <span>💵 كاش</span>
                    </label>
                    <label class="payment-option">
                        <input type="radio" name="buyer_payment" value="تحويل بنكي">
                        <span>🏦 تحويل بنكي</span>
                    </label>
                    <label class="payment-option">
                        <input type="radio" name="buyer_payment" value="STC Pay">
                        <span>📱 STC Pay</span>
                    </label>
                    <label class="payment-option">
                        <input type="radio" name="buyer_payment" value="Apple Pay">
                        <span>🍎 Apple Pay</span>
                    </label>
                    <label class="payment-option">
                        <input type="radio" name="buyer_payment" value="أخرى">
                        <span>➕ أخرى</span>
                    </label>
                </div>
            </div>
            <div class="form-group" id="buyerOtherPaymentDiv" style="display:none;">
                <label for="buyer_payment_other">اذكر طريقة الدفع <span class="required">*</span></label>
                <input type="text" id="buyer_payment_other" name="buyer_payment_other" placeholder="مثال: PayPal، Binance، حوالة...">
            </div>

            <!-- ── الشروط والأحكام ── -->
            <div class="section-header" style="margin-top:16px;">
                <span class="section-icon">📜</span>
                <h3>الشروط والأحكام</h3>
            </div>
            <div class="terms-box">
                <p>بموجب هذا العقد يقر الطرفان بما يلي:</p>
                <ol>
                    <li>يلتزم البائع بتسليم الحساب المذكور كاملاً وبالمواصفات الموضحة أعلاه.</li>
                    <li>يلتزم المشتري بسداد المبلغ المتفق عليه كاملاً قبل استلام بيانات الحساب.</li>
                    <li>تتولى الميش ستور دور الوسيط وتضمن حقوق الطرفين خلال عملية البيع.</li>
                    <li>لا يحق للبائع استرداد الحساب بعد اكتمال عملية البيع وتسليم المبلغ.</li>
                    <li>في حال وجود أي نزاع يُرجع إلى الميش ستور للفصل فيه.</li>
                </ol>
                <label class="terms-check">
                    <input type="checkbox" id="terms_agree" name="terms_agree">
                    <span>أوافق على الشروط والأحكام أعلاه وأقر بصحة البيانات المدخلة</span>
                </label>
            </div>

            <button type="submit" class="submit-btn">
                📄 إنشاء عقد البيع الرسمي وتحميل PDF
            </button>

        </form>

        <div class="loading" id="loadingDiv">
            <div class="spinner"></div>
            <p style="color:var(--gov-green); font-weight:700; font-size:1rem;">جاري إنشاء الإيصال الرسمي...</p>
            <p style="color:var(--text-muted); font-size:0.85rem; margin-top:6px;">يرجى الانتظار لحظة</p>
        </div>
    </div>

    <div class="form-card" id="successCard" style="display:none;">
        <div class="success-card" style="display:block;">
            <div class="success-icon">✅</div>
            <h2>تم إنشاء الإيصال بنجاح!</h2>
            <p>الإيصال الرسمي جاهز للتحميل - موثق من مؤسسة فهد حمد عبدالله الزومان للتجارة</p>
            <a href="#" id="downloadLink" class="download-btn">📥 تحميل الإيصال PDF</a>
            <br>
            <button class="new-form-btn" onclick="resetForm()">🔄 تعبئة نموذج جديد</button>
        </div>
    </div>
</div>

<footer class="footer">
    <p>
        <strong>مؤسسة فهد حمد عبدالله الزومان للتجارة</strong><br>
        المنطقة الشرقية، المملكة العربية السعودية &nbsp;|&nbsp;
        سجل تجاري: <strong>7010964133</strong> &nbsp;|&nbsp;
        بنك الأنماء &nbsp;|&nbsp; IBAN: <strong>SA1505000068205358197000</strong>
    </p>
</footer>

<script>
// ══════════════════════════════════════════════════════════════════════════════
// بيانات جميع دول العالم
// ══════════════════════════════════════════════════════════════════════════════
const ALL_COUNTRIES = [
    // دول الخليج
    { group: 'دول الخليج العربي', name: 'السعودية',  flag: '🇸🇦', prefix: '+966', gulf: true  },
    { group: 'دول الخليج العربي', name: 'الإمارات',  flag: '🇦🇪', prefix: '+971', gulf: true  },
    { group: 'دول الخليج العربي', name: 'الكويت',    flag: '🇰🇼', prefix: '+965', gulf: true  },
    { group: 'دول الخليج العربي', name: 'قطر',       flag: '🇶🇦', prefix: '+974', gulf: true  },
    { group: 'دول الخليج العربي', name: 'البحرين',   flag: '🇧🇭', prefix: '+973', gulf: true  },
    { group: 'دول الخليج العربي', name: 'عُمان',     flag: '🇴🇲', prefix: '+968', gulf: true  },
    // الدول العربية
    { group: 'الدول العربية',     name: 'مصر',        flag: '🇪🇬', prefix: '+20',  gulf: false },
    { group: 'الدول العربية',     name: 'الأردن',     flag: '🇯🇴', prefix: '+962', gulf: false },
    { group: 'الدول العربية',     name: 'العراق',     flag: '🇮🇶', prefix: '+964', gulf: false },
    { group: 'الدول العربية',     name: 'اليمن',      flag: '🇾🇪', prefix: '+967', gulf: false },
    { group: 'الدول العربية',     name: 'سوريا',      flag: '🇸🇾', prefix: '+963', gulf: false },
    { group: 'الدول العربية',     name: 'لبنان',      flag: '🇱🇧', prefix: '+961', gulf: false },
    { group: 'الدول العربية',     name: 'ليبيا',      flag: '🇱🇾', prefix: '+218', gulf: false },
    { group: 'الدول العربية',     name: 'تونس',       flag: '🇹🇳', prefix: '+216', gulf: false },
    { group: 'الدول العربية',     name: 'الجزائر',    flag: '🇩🇿', prefix: '+213', gulf: false },
    { group: 'الدول العربية',     name: 'المغرب',     flag: '🇲🇦', prefix: '+212', gulf: false },
    { group: 'الدول العربية',     name: 'السودان',    flag: '🇸🇩', prefix: '+249', gulf: false },
    { group: 'الدول العربية',     name: 'موريتانيا',  flag: '🇲🇷', prefix: '+222', gulf: false },
    { group: 'الدول العربية',     name: 'الصومال',    flag: '🇸🇴', prefix: '+252', gulf: false },
    { group: 'الدول العربية',     name: 'جيبوتي',     flag: '🇩🇯', prefix: '+253', gulf: false },
    { group: 'الدول العربية',     name: 'جزر القمر',  flag: '🇰🇲', prefix: '+269', gulf: false },
    // أوروبا
    { group: 'أوروبا',            name: 'تركيا',      flag: '🇹🇷', prefix: '+90',  gulf: false },
    { group: 'أوروبا',            name: 'فرنسا',      flag: '🇫🇷', prefix: '+33',  gulf: false },
    { group: 'أوروبا',            name: 'ألمانيا',    flag: '🇩🇪', prefix: '+49',  gulf: false },
    { group: 'أوروبا',            name: 'المملكة المتحدة', flag: '🇬🇧', prefix: '+44', gulf: false },
    { group: 'أوروبا',            name: 'إيطاليا',    flag: '🇮🇹', prefix: '+39',  gulf: false },
    { group: 'أوروبا',            name: 'إسبانيا',    flag: '🇪🇸', prefix: '+34',  gulf: false },
    { group: 'أوروبا',            name: 'هولندا',     flag: '🇳🇱', prefix: '+31',  gulf: false },
    { group: 'أوروبا',            name: 'بلجيكا',     flag: '🇧🇪', prefix: '+32',  gulf: false },
    { group: 'أوروبا',            name: 'السويد',     flag: '🇸🇪', prefix: '+46',  gulf: false },
    { group: 'أوروبا',            name: 'النرويج',    flag: '🇳🇴', prefix: '+47',  gulf: false },
    { group: 'أوروبا',            name: 'الدنمارك',   flag: '🇩🇰', prefix: '+45',  gulf: false },
    { group: 'أوروبا',            name: 'سويسرا',     flag: '🇨🇭', prefix: '+41',  gulf: false },
    { group: 'أوروبا',            name: 'النمسا',     flag: '🇦🇹', prefix: '+43',  gulf: false },
    { group: 'أوروبا',            name: 'البرتغال',   flag: '🇵🇹', prefix: '+351', gulf: false },
    { group: 'أوروبا',            name: 'اليونان',    flag: '🇬🇷', prefix: '+30',  gulf: false },
    { group: 'أوروبا',            name: 'بولندا',     flag: '🇵🇱', prefix: '+48',  gulf: false },
    { group: 'أوروبا',            name: 'رومانيا',    flag: '🇷🇴', prefix: '+40',  gulf: false },
    { group: 'أوروبا',            name: 'روسيا',      flag: '🇷🇺', prefix: '+7',   gulf: false },
    { group: 'أوروبا',            name: 'أوكرانيا',   flag: '🇺🇦', prefix: '+380', gulf: false },
    // آسيا
    { group: 'آسيا',              name: 'باكستان',    flag: '🇵🇰', prefix: '+92',  gulf: false },
    { group: 'آسيا',              name: 'الهند',      flag: '🇮🇳', prefix: '+91',  gulf: false },
    { group: 'آسيا',              name: 'بنغلاديش',   flag: '🇧🇩', prefix: '+880', gulf: false },
    { group: 'آسيا',              name: 'الفلبين',    flag: '🇵🇭', prefix: '+63',  gulf: false },
    { group: 'آسيا',              name: 'إندونيسيا',  flag: '🇮🇩', prefix: '+62',  gulf: false },
    { group: 'آسيا',              name: 'ماليزيا',    flag: '🇲🇾', prefix: '+60',  gulf: false },
    { group: 'آسيا',              name: 'سنغافورة',   flag: '🇸🇬', prefix: '+65',  gulf: false },
    { group: 'آسيا',              name: 'تايلاند',    flag: '🇹🇭', prefix: '+66',  gulf: false },
    { group: 'آسيا',              name: 'فيتنام',     flag: '🇻🇳', prefix: '+84',  gulf: false },
    { group: 'آسيا',              name: 'الصين',      flag: '🇨🇳', prefix: '+86',  gulf: false },
    { group: 'آسيا',              name: 'اليابان',    flag: '🇯🇵', prefix: '+81',  gulf: false },
    { group: 'آسيا',              name: 'كوريا الجنوبية', flag: '🇰🇷', prefix: '+82', gulf: false },
    { group: 'آسيا',              name: 'إيران',      flag: '🇮🇷', prefix: '+98',  gulf: false },
    { group: 'آسيا',              name: 'أفغانستان',  flag: '🇦🇫', prefix: '+93',  gulf: false },
    { group: 'آسيا',              name: 'نيبال',      flag: '🇳🇵', prefix: '+977', gulf: false },
    { group: 'آسيا',              name: 'سريلانكا',   flag: '🇱🇰', prefix: '+94',  gulf: false },
    // أمريكا
    { group: 'أمريكا',            name: 'الولايات المتحدة', flag: '🇺🇸', prefix: '+1',  gulf: false },
    { group: 'أمريكا',            name: 'كندا',       flag: '🇨🇦', prefix: '+1',   gulf: false },
    { group: 'أمريكا',            name: 'المكسيك',    flag: '🇲🇽', prefix: '+52',  gulf: false },
    { group: 'أمريكا',            name: 'البرازيل',   flag: '🇧🇷', prefix: '+55',  gulf: false },
    { group: 'أمريكا',            name: 'الأرجنتين',  flag: '🇦🇷', prefix: '+54',  gulf: false },
    { group: 'أمريكا',            name: 'كولومبيا',   flag: '🇨🇴', prefix: '+57',  gulf: false },
    { group: 'أمريكا',            name: 'تشيلي',      flag: '🇨🇱', prefix: '+56',  gulf: false },
    { group: 'أمريكا',            name: 'بيرو',       flag: '🇵🇪', prefix: '+51',  gulf: false },
    // أفريقيا
    { group: 'أفريقيا',           name: 'نيجيريا',    flag: '🇳🇬', prefix: '+234', gulf: false },
    { group: 'أفريقيا',           name: 'إثيوبيا',    flag: '🇪🇹', prefix: '+251', gulf: false },
    { group: 'أفريقيا',           name: 'كينيا',      flag: '🇰🇪', prefix: '+254', gulf: false },
    { group: 'أفريقيا',           name: 'غانا',       flag: '🇬🇭', prefix: '+233', gulf: false },
    { group: 'أفريقيا',           name: 'تنزانيا',    flag: '🇹🇿', prefix: '+255', gulf: false },
    { group: 'أفريقيا',           name: 'جنوب أفريقيا', flag: '🇿🇦', prefix: '+27', gulf: false },
    { group: 'أفريقيا',           name: 'أوغندا',     flag: '🇺🇬', prefix: '+256', gulf: false },
    // أوقيانوسيا
    { group: 'أوقيانوسيا',        name: 'أستراليا',   flag: '🇦🇺', prefix: '+61',  gulf: false },
    { group: 'أوقيانوسيا',        name: 'نيوزيلندا',  flag: '🇳🇿', prefix: '+64',  gulf: false },
    // أخرى
    { group: 'أخرى',              name: 'دولة أخرى',  flag: '🌍',  prefix: '+',    gulf: false },
];

// ══════════════════════════════════════════════════════════════════════════════
// بيانات البنوك ووسائل الدفع لدول الخليج
// ══════════════════════════════════════════════════════════════════════════════
const COUNTRY_DATA = {
    'السعودية': {
        banks: ['بنك الأنماء','البنك الأهلي السعودي','بنك الراجحي','بنك ساب',
                'البنك السعودي الفرنسي','بنك الرياض','البنك السعودي للاستثمار',
                'بنك البلاد','بنك الجزيرة','بنك الخليج الدولي'],
        payments: [
            {icon:'🏦', label:'تحويل بنكي',  value:'تحويل بنكي'},
            {icon:'📱', label:'STC Pay',      value:'STC Pay'},
            {icon:'💵', label:'كاش',          value:'كاش'},
            {icon:'🔄', label:'طريقة أخرى',  value:'طريقة أخرى'},
        ],
        currency: 'ر.س', ibanPrefix: 'SA'
    },
    'الإمارات': {
        banks: ['بنك الإمارات دبي الوطني','بنك أبوظبي الأول','بنك أبوظبي التجاري',
                'بنك دبي الإسلامي','بنك المشرق','بنك الفجيرة الوطني','بنك الشارقة',
                'سيتي بنك الإمارات'],
        payments: [
            {icon:'🏦', label:'تحويل بنكي', value:'تحويل بنكي'},
            {icon:'🍎', label:'Apple Pay',   value:'Apple Pay'},
            {icon:'💵', label:'كاش',         value:'كاش'},
            {icon:'🔄', label:'طريقة أخرى', value:'طريقة أخرى'},
        ],
        currency: 'د.إ', ibanPrefix: 'AE'
    },
    'الكويت': {
        banks: ['بنك الكويت الوطني','بنك الخليج','بنك برقان',
                'بيت التمويل الكويتي (بيتك)','البنك الأهلي الكويتي',
                'بنك وربة','بنك الكويت الدولي','بنك بوبيان','بنك الاتحاد الكويتي'],
        payments: [
            {icon:'🏦', label:'تحويل بنكي', value:'تحويل بنكي'},
            {icon:'💳', label:'K-Net',       value:'K-Net'},
            {icon:'📲', label:'Benefit Pay', value:'Benefit Pay'},
            {icon:'💵', label:'كاش',         value:'كاش'},
            {icon:'🔄', label:'طريقة أخرى', value:'طريقة أخرى'},
        ],
        currency: 'د.ك', ibanPrefix: 'KW'
    },
    'قطر': {
        banks: ['بنك قطر الوطني (QNB)','مصرف قطر الإسلامي','بنك الدوحة',
                'بنك قطر الدولي','بنك قطر الأول','المصرف العربي',
                'بنك الريان','بنك بروة','بنك الخليج التجاري'],
        payments: [
            {icon:'🏦', label:'تحويل بنكي', value:'تحويل بنكي'},
            {icon:'💳', label:'NAPS',        value:'NAPS'},
            {icon:'🍎', label:'Apple Pay',   value:'Apple Pay'},
            {icon:'💵', label:'كاش',         value:'كاش'},
            {icon:'🔄', label:'طريقة أخرى', value:'طريقة أخرى'},
        ],
        currency: 'ر.ق', ibanPrefix: 'QA'
    },
    'البحرين': {
        banks: ['بنك البحرين الوطني','بنك البحرين والكويت','بنك أهلي يونايتد',
                'بنك الإسكان','بنك الخليج الأول','بنك العربي',
                'بيت التمويل الخليجي','بنك البحرين الإسلامي'],
        payments: [
            {icon:'🏦', label:'تحويل بنكي',  value:'تحويل بنكي'},
            {icon:'📲', label:'BenefitPay',   value:'BenefitPay'},
            {icon:'💵', label:'كاش',          value:'كاش'},
            {icon:'🔄', label:'طريقة أخرى',  value:'طريقة أخرى'},
        ],
        currency: 'د.ب', ibanPrefix: 'BH'
    },
    'عُمان': {
        banks: ['بنك مسقط','البنك الوطني العُماني','بنك ظفار',
                'بنك صحار الدولي','البنك العربي العُماني','بنك نزوى','بنك العز الإسلامي'],
        payments: [
            {icon:'🏦', label:'تحويل بنكي', value:'تحويل بنكي'},
            {icon:'💳', label:'OmanNet',     value:'OmanNet'},
            {icon:'💵', label:'كاش',         value:'كاش'},
            {icon:'🔄', label:'طريقة أخرى', value:'طريقة أخرى'},
        ],
        currency: 'ر.ع', ibanPrefix: 'OM'
    }
};

const GULF_COUNTRIES = Object.keys(COUNTRY_DATA);

// ══════════════════════════════════════════════════════════════════════════════
// Country Search Widget
// ══════════════════════════════════════════════════════════════════════════════
let selectedCountry = null;

function buildCountryList(filter) {
    const list = document.getElementById('countryList');
    list.innerHTML = '';
    const q = (filter || '').trim().toLowerCase();
    let lastGroup = '';

    ALL_COUNTRIES.forEach(c => {
        if (q && !c.name.toLowerCase().includes(q) && !c.prefix.includes(q)) return;
        if (c.group !== lastGroup) {
            const g = document.createElement('div');
            g.className = 'country-group-label';
            g.textContent = c.group;
            list.appendChild(g);
            lastGroup = c.group;
        }
        const div = document.createElement('div');
        div.className = 'country-option' + (selectedCountry && selectedCountry.name === c.name ? ' selected' : '');
        div.textContent = c.flag + '  ' + c.name + '  (' + c.prefix + ')';
        div.onclick = () => selectCountry(c);
        list.appendChild(div);
    });

    if (!list.children.length) {
        list.innerHTML = '<div style="padding:14px;color:var(--text-muted);text-align:center;">لا توجد نتائج</div>';
    }
}

function toggleCountryDropdown() {
    const dd = document.getElementById('countryDropdown');
    const disp = document.getElementById('countryDisplay');
    const isOpen = dd.classList.contains('open');
    if (isOpen) {
        dd.classList.remove('open');
        disp.classList.remove('open');
    } else {
        dd.classList.add('open');
        disp.classList.add('open');
        document.getElementById('countrySearchInput').value = '';
        buildCountryList('');
        setTimeout(() => document.getElementById('countrySearchInput').focus(), 60);
    }
}

function filterCountries() {
    buildCountryList(document.getElementById('countrySearchInput').value);
}

function selectCountry(c) {
    selectedCountry = c;
    document.getElementById('seller_country').value = c.name;
    document.getElementById('countryDisplayText').textContent = c.flag + '  ' + c.name;
    document.getElementById('countryDisplayText').style.color = 'var(--text-dark)';
    document.getElementById('countryDropdown').classList.remove('open');
    document.getElementById('countryDisplay').classList.remove('open');
    onCountryChange(c);
}

document.addEventListener('click', function(e) {
    if (!document.getElementById('countryWidget').contains(e.target)) {
        document.getElementById('countryDropdown').classList.remove('open');
        document.getElementById('countryDisplay').classList.remove('open');
    }
});

// ══════════════════════════════════════════════════════════════════════════════
// عند تغيير الدولة
// ══════════════════════════════════════════════════════════════════════════════
function onCountryChange(c) {
    document.getElementById('phoneGroup').style.display = 'block';
        document.getElementById('emailGroup').style.display = 'block';
        document.getElementById('generalPaymentGroup').style.display = 'block';
        document.getElementById('binanceIdGroup').style.display = 'none';
        document.getElementById('phonePrefix').textContent  = c.prefix;

    document.getElementById('bankSectionHeader').style.display = 'none';
    document.getElementById('gulfBankSection').style.display   = 'none';
    document.getElementById('nonGulfSection').style.display    = 'none';
    // إعادة تعيين طريقة الدفع العامة عند تغيير الدولة
    document.querySelectorAll('input[name="general_payment"]').forEach(r => r.checked = false);
    document.getElementById('binanceIdGroup').style.display = 'none';

    if (GULF_COUNTRIES.includes(c.name)) {
        const data = COUNTRY_DATA[c.name];
        document.getElementById('currencyLabel').textContent  = data.currency;
        document.getElementById('currencyLabel2').textContent = data.currency;
        document.getElementById('iban').placeholder = data.ibanPrefix + '0000000000000000000000';

        const bankSel = document.getElementById('bank_name');
        bankSel.innerHTML = '<option value="">-- اختر البنك --</option>';
        data.banks.forEach(b => {
            const o = document.createElement('option');
            o.value = b; o.textContent = b;
            bankSel.appendChild(o);
        });
        // لا نُظهر قسم البنك هنا - سيظهر فقط عند اختيار "تحويل بنكي"
    } else {
        document.getElementById('currencyLabel').textContent  = 'عملة';
        document.getElementById('currencyLabel2').textContent = 'عملة';
        document.getElementById('bankSectionHeader').style.display = 'flex';
        document.getElementById('nonGulfSection').style.display = 'block';
    }
}

// ══════════════════════════════════════════════════════════════════════════════// Binance ID toggle
function onGeneralPaymentChange() {
    const sel = document.querySelector('input[name="general_payment"]:checked');
    const binGrp = document.getElementById('binanceIdGroup');
    const bankSectionHeader = document.getElementById('bankSectionHeader');
    const gulfBankSection = document.getElementById('gulfBankSection');
    const nonGulfSection = document.getElementById('nonGulfSection');
    const currentCountry = document.getElementById('seller_country').value;
    const isGulf = GULF_COUNTRIES.includes(currentCountry);

    // إخفاء كل شيء أولاً
    binGrp.style.display = 'none';
    document.getElementById('binance_id').value = '';
    if (bankSectionHeader) bankSectionHeader.style.display = 'none';
    if (gulfBankSection) gulfBankSection.style.display = 'none';
    if (nonGulfSection) nonGulfSection.style.display = 'none';

    if (!sel || !currentCountry) return;

    if (sel.value === 'بينانس') {
        // عند اختيار بينانس: إظهار خانة ID فقط
        binGrp.style.display = 'block';
    } else if (sel.value === 'تحويل بنكي' && isGulf) {
        // عند اختيار تحويل بنكي لدولة خليجية: إظهار قسم البنك
        if (bankSectionHeader) bankSectionHeader.style.display = 'flex';
        if (gulfBankSection) gulfBankSection.style.display = 'block';
    }
    // عند اختيار كاش أو STC Pay أو غيرها: لا يظهر شيء إضافي
}

// إرسال النموذج
// ════════════════════════════════════════════════════════════════════════════════
// إظهار حقل "أخرى" عند اختيار طريقة دفع المشتري
document.querySelectorAll('input[name="buyer_payment"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        const otherDiv = document.getElementById('buyerOtherPaymentDiv');
        otherDiv.style.display = this.value === 'أخرى' ? 'block' : 'none';
    });
});

document.getElementById('sellerForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const alertBox = document.getElementById('alertBox');
    alertBox.style.display = 'none';

    const country  = document.getElementById('seller_country').value;
    const isGulf   = GULF_COUNTRIES.includes(country);
    const acctType = document.querySelector('input[name="account_type"]:checked');
    const payMeth  = document.querySelector('input[name="payment_method"]:checked');

    if (!acctType)                                                               { showAlert('يرجى اختيار نوع الحساب'); return; }
    if (!document.getElementById('account_details').value.trim())               { showAlert('يرجى إدخال تفاصيل الحساب'); return; }
    if (!document.getElementById('account_price').value)                        { showAlert('يرجى إدخال سعر الحساب'); return; }
    if (!document.getElementById('mediation_amount').value)                     { showAlert('يرجى إدخال مبلغ الوساطة'); return; }
    if (!document.getElementById('seller_name').value.trim())                   { showAlert('يرجى إدخال اسم البائع'); return; }
    if (!country)                                                                { showAlert('يرجى اختيار البلد'); return; }
    if (!document.getElementById('seller_phone').value.trim())                  { showAlert('يرجى إدخال رقم الجوال'); return; }
    const genPayMeth = document.querySelector('input[name="general_payment"]:checked');
    if (!genPayMeth) { showAlert('يرجى اختيار طريقة استلام الأموال'); return; }
    if (genPayMeth.value === 'بينانس' && !document.getElementById('binance_id').value.trim()) { showAlert('يرجى إدخال Binance ID'); return; }

    if (isGulf && genPayMeth.value === 'تحويل بنكي') {
        if (!document.getElementById('bank_name').value)                        { showAlert('يرجى اختيار البنك'); return; }
        if (!document.getElementById('iban').value.trim())                      { showAlert('يرجى إدخال رقم الآيبان'); return; }
    } else if (!isGulf) {
        if (!document.getElementById('custom_payment_details').value.trim())    { showAlert('يرجى كتابة طريقة استلام الأموال'); return; }
    }
    // تحقق من بيانات المشتري
    const buyerPayMeth = document.querySelector('input[name="buyer_payment"]:checked');
    if (!document.getElementById('buyer_name').value.trim())                    { showAlert('يرجى إدخال اسم المشتري'); return; }
    if (!document.getElementById('buyer_phone').value.trim())                   { showAlert('يرجى إدخال رقم جوال أو معرّف المشتري'); return; }
    if (!buyerPayMeth)                                                           { showAlert('يرجى اختيار طريقة دفع المشتري'); return; }
    if (buyerPayMeth.value === 'أخرى' && !document.getElementById('buyer_payment_other').value.trim()) { showAlert('يرجى ذكر طريقة دفع المشتري'); return; }
    if (!document.getElementById('terms_agree').checked)                        { showAlert('يرجى الموافقة على الشروط والأحكام'); return; }

    const phonePrefix = document.getElementById('phonePrefix').textContent;
    const phoneNumber = document.getElementById('seller_phone').value.trim();

    const formData = {
        account_type:           acctType.value,
        account_details:        document.getElementById('account_details').value.trim(),
        account_price:          document.getElementById('account_price').value,
        mediation_amount:       document.getElementById('mediation_amount').value,
        seller_name:            document.getElementById('seller_name').value.trim(),
        seller_country:         country,
        seller_phone:           phonePrefix + phoneNumber,
        seller_email:           document.getElementById('seller_email').value.trim(),
        general_payment_method: genPayMeth ? genPayMeth.value : '',
        binance_id:             (genPayMeth && genPayMeth.value === 'بينانس') ? document.getElementById('binance_id').value.trim() : '',
        bank_name:              (isGulf && genPayMeth && genPayMeth.value === 'تحويل بنكي') ? document.getElementById('bank_name').value : '',
        iban:                   (isGulf && genPayMeth && genPayMeth.value === 'تحويل بنكي') ? document.getElementById('iban').value.trim().toUpperCase() : '',
        payment_method:         genPayMeth ? genPayMeth.value : '',
        custom_payment_details: !isGulf ? document.getElementById('custom_payment_details').value.trim() : '',
        buyer_name:             document.getElementById('buyer_name').value.trim(),
        buyer_phone:            document.getElementById('buyer_phone').value.trim(),
        buyer_payment:          buyerPayMeth ? (buyerPayMeth.value === 'أخرى' ? document.getElementById('buyer_payment_other').value.trim() : buyerPayMeth.value) : '',
    };

    document.getElementById('sellerForm').style.display = 'none';
    document.getElementById('loadingDiv').style.display = 'block';

    try {
        const response = await fetch('/generate_pdf', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        });

        if (response.ok) {
            const blob = await response.blob();
            const url  = window.URL.createObjectURL(blob);
            document.getElementById('downloadLink').href     = url;
            document.getElementById('downloadLink').download = 'almesh_receipt.pdf';
            document.getElementById('loadingDiv').style.display  = 'none';
            document.getElementById('formCard').style.display    = 'none';
            document.getElementById('successCard').style.display = 'block';
        } else {
            const err = await response.json();
            document.getElementById('loadingDiv').style.display = 'none';
            document.getElementById('sellerForm').style.display = 'block';
            showAlert(err.error || 'حدث خطأ أثناء إنشاء الإيصال');
        }
    } catch (err) {
        document.getElementById('loadingDiv').style.display = 'none';
        document.getElementById('sellerForm').style.display = 'block';
        showAlert('حدث خطأ في الاتصال بالخادم');
    }
});

function showAlert(msg) {
    const alertBox = document.getElementById('alertBox');
    alertBox.textContent = '⚠️ ' + msg;
    alertBox.style.display = 'block';
    alertBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

function resetForm() {
    selectedCountry = null;
    document.getElementById('sellerForm').reset();
    document.getElementById('countryDisplayText').textContent = '-- اختر البلد --';
    document.getElementById('countryDisplayText').style.color = 'var(--text-muted)';
    document.getElementById('seller_country').value = '';
    document.getElementById('phoneGroup').style.display        = 'none';
    document.getElementById('emailGroup').style.display        = 'none';
    document.getElementById('bankSectionHeader').style.display = 'none';
    document.getElementById('gulfBankSection').style.display   = 'none';
    document.getElementById('nonGulfSection').style.display    = 'none';
    document.getElementById('successCard').style.display       = 'none';
    document.getElementById('formCard').style.display          = 'block';
    document.getElementById('sellerForm').style.display        = 'block';
    document.getElementById('currencyLabel').textContent       = 'ر.س';
    document.getElementById('currencyLabel2').textContent      = 'ر.س';
}

buildCountryList('');
</script>
</body>
</html>
