{% include 'header.twig' %}
<style>
.dash-card,
.well,
.side-box,
.alert,
.form-control,
.btn,
.mini-info {
  border-radius: 2px !important;

}

div#service_description {
    background-color: #141414;
    padding: 10px;
    border-radius: 6px;
}

div#service_avg_time {
      background-color: #141414;
    padding: 10px;
    border-radius: 6px;
}
div#service_refill {
       background-color: #141414;
    padding: 10px;
    border-radius: 6px;
    
}

.select2-container--bootstrap .select2-dropdown {
    color: #1b57ef !important;
    background-color: #1a1d25 !important;
    text-decoration: none !important;
}

.select2-container--bootstrap .select2-results__option {
    padding: 3px 6px !important;
    color: aliceblue!important;
    font-weight: 500 !important;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    color: #1b57ef !important;
    background-color: #1a1d25 !important;
    text-decoration: none !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    padding: 0 !important;
}

.select2-container--bootstrap .select2-dropdown {
    background-color: rgb(21, 22, 25) !important;
    max-height: 1000px !important; /*طول القايمة*/
    overflow-y: auto !important; 
    margin-top: 8px !important;
    border-color: black !important;
}


.select2-container--bootstrap .select2-results__option {
    padding: 3px 6px !important;
    color: aliceblue !important;
    font-weight: 500 !important;
}



.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    color: #fff !important;
    background-color: #47474752 !important;
    text-decoration: none !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    font-weight: 500 !important;
    padding: 0;
}
.select2-container--bootstrap .select2-results>.select2-results__options {
    max-height: 400px !important;
    overflow-y: auto !important;
    background-color: #1a1a1a !important;
}
.select2-container--bootstrap .select2-results__option {
    padding: 3px 12px !important;
    color: aliceblue !important;
    font-weight: 500 !important;
}
select2-container.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: #fff;
    padding: 0;
    font-family: 'Tajawal', 'Segoe UI', sans-serif !important;
}

.badge-forms {
    background: rgb(69, 126, 191) !important;
    color: white !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    width: auto !important;
    height: 20px !important;
    display: inline-block !important;
}


@media (max-width: 768px) {
    .card {
        height: auto; 
        padding-top: 16px; 
        padding-bottom: 16px; 
    }

    .totals-block__card {
        height: auto; 
    }

    .totals-block__count h2 {
        font-size: 20px; 
    }

    .totals-block__card-name p {
        font-size: 12px; 
    }
}
.badge-forms {
    color: var(--badge_secondary_text_color) !important;
    background: #84b547 !important;
    box-shadow: var(--badge_secondary_box_shadow) !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    font-size: 10px !important;
    line-height: 1;
    display: inline-block;
    font-weight: 700 !important;
    font-style: normal !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
}


</style>



<!-- FontAwesome (لو مش موجود عندك) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<style>
  /* Dashboard cards */
  .dash-card{
    background: linear-gradient(180deg, #1a1a1a, #000000);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    padding: 14px 14px;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    min-height: 90px;
  }
  .dash-card:before{
    content:"";
    position:absolute;
    top:-40px; right:-40px;
    width:120px; height:120px;
    background: rgba(74, 99, 255, .08);
    border-radius: 50%;
  }
  .dash-card .dash-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .dash-title{
    font-size: 12px;
    color:#ffffff;
    margin:0 0 6px 0;
  }
  .dash-value{
    font-size: 22px;
    font-weight: 800;
    margin:0;
    color:#ffffff;
    line-height: 1.2;
  }
  .dash-sub{
    margin-top:6px;
    font-size:12px;
    color:#ffffff;
  }
  .dash-icon{
    width:44px; height:44px;
    border-radius: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(74, 99, 255, .12);
    color:#ffffff;
    font-size:18px;
    flex: 0 0 auto;
  }
  .dash-icon.green{ background: rgba(16,185,129,.14); color:#10b981; }
  .dash-icon.orange{ background: rgba(245,158,11,.18); color:#f59e0b; }
  .dash-icon.purple{ background: rgba(139,92,246,.16); color:#8b5cf6; }

  /* Balance dot blink */
  .blink-dot{
    display:inline-block;
    width:10px; height:10px;
    border-radius:50%;
    background:#10b981;
    box-shadow: 0 0 0 rgba(16,185,129,.7);
    margin-right:8px;
    animation: pulse 1.2s infinite;
    vertical-align: middle;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(16,185,129,.65); opacity:1; }
    70%{ box-shadow: 0 0 0 10px rgba(16,185,129,0); opacity:.9; }
    100%{ box-shadow: 0 0 0 0 rgba(16,185,129,0); opacity:1; }
  }

  /* Right instruction box */
  .side-box{
    background:#1a1a1a;
    color:#e5e7eb;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    margin-bottom: 14px;
  }
  .side-box h4{
    margin:0 0 10px 0;
    font-weight:800;
    font-size:14px;
    color:#fff;
  }
  .side-box ul{
    padding-left:18px;
    margin:0;
    color:#cbd5e1;
    font-size:13px;
    line-height:1.8;
  }
  .side-box .hint{
    margin-top:10px;
    font-size:12px;
    color:#94a3b8;
  }

  /* Make the form well nicer a bit */
  .well{
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 10px 22px rgba(0,0,0,.05);
  }
</style>
<style>
  /* ===== New Order Form polish ===== */
  .well { background: #141414; }
  .form-control{
    background:#1f1f20;
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    height:44px;
    box-shadow:none !important;
  }
  .form-control:focus{
    border-color: rgba(16,185,129,.6);
    box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
  }
  label.control-label{ color:#fff; font-weight:700; }

  /* Section separation */
  .component_button_forms .form-group{ margin-bottom: 14px; }

  /* Submit button nicer */
  #neworderbutton{
    width:100%;
    height:48px;
    border-radius:12px;
    font-weight:800;
  }

  /* Charge + balance mini cards */
  .mini-info{
    background:#1a1a1a;
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    padding:12px;
  }
  .mini-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .mini-left{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
  }
  .mini-ico{
    width:38px;height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(74,99,255,.12);
    color:#fff;
    flex:0 0 auto;
  }
  .mini-ico.green{ background: rgba(16,185,129,.14); color:#10b981; }
  .mini-amount{
    font-weight:900;
    color:#fff;
    font-size:14px;
    white-space:nowrap;
  }
  .mini-note{
    margin-top:6px;
    font-size:12px;
    color: rgba(255,255,255,.75);
  }

  /* Mobile improvements */
  @media (max-width: 767px){
    .dash-card{ min-height:auto; }
    .side-box{ margin-top:14px; }
    .well{ padding:14px; }
    .form-control{ height:46px; }
  }
</style>

<div class="container">
  <div class="row">

    <!-- LEFT: main -->
    <div class="col-md-8">

      <!-- Dashboard (2 cards per row) -->
      <div class="row">
        <div class="col-sm-6">
          <div class="dash-card">
            <div class="dash-top">
              <div>
                <p class="dash-title"><i class="fa fa-shopping-bag"></i> عدد الطلبات</p>
                <p class="dash-value">{{ totalOrdersCount }}</p>
                <div class="dash-sub">كل الطلبات التي تم إنشاؤها</div>
              </div>
              <div class="dash-icon purple"><i class="fa fa-list-alt"></i></div>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="dash-card">
            <div class="dash-top">
              <div>
                <p class="dash-title"><i class="fa fa-user-circle"></i> عدد طلبات الحساب</p>
                <p class="dash-value">{{ data["stats"]["account_orders"] ?? 0 }}</p>
                <div class="dash-sub">طلبات مرتبطة بحسابك</div>
              </div>
              <div class="dash-icon orange"><i class="fa fa-id-badge"></i></div>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="dash-card">
            <div class="dash-top">
              <div>
                <p class="dash-title"><i class="fa fa-hand-peace-o"></i> مرحباً</p>
                <p class="dash-value">{{ user["username"] ?? "User" }}</p>
                <div class="dash-sub">سعيدين بوجودك معنا 🎉</div>
              </div>
              <div class="dash-icon"><i class="fa fa-smile-o"></i></div>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="dash-card">
            <div class="dash-top">
              <div>
                <p class="dash-title">
                  <span class="blink-dot"></span>
                  <i class="fa fa-wallet"></i> الرصيد
                </p>
                <p class="dash-value">{{ convert_currency(user["balance"] ?? 0) }}</p>
                <div class="dash-sub">رصيدك الحالي متاح للاستخدام</div>
              </div>
              <div class="dash-icon green"><i class="fa fa-money"></i></div>
            </div>

            <div style="margin-top:10px;">
              <a href="/addfunds" class="btn btn-success btn-sm">
                <i class="fa fa-plus-circle"></i> إضافة رصيد
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- /Dashboard -->

      <!-- Your existing content (well + form) -->
      <div class="well">

        <form action="/" method="post" id="order-form">
          <div class="form-group">

            {% if error %}
            <div class="alert alert-dismissible alert-danger">
              {{ errorText }}
            </div>
            <br>
            {% endif %}

            {% if data["order"]["success"] == 1 %}
            <div class="alert alert-dismissible alert-success" id="success-alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <strong>{{ lang["neworder.success.id"] }}:</strong> {{ data['order']['id'] }} <br>
              <strong>{{ lang["neworder.success.service"] }}:</strong> {{ data['order']['service'] }} <br>
              <strong>{{ lang["neworder.success.link"] }}:</strong> {{ data['order']['link'] }} <br>
              <strong>{{ lang["neworder.success.quantity"] }}:</strong> {{ data['order']['quantity'] }} <br>
              <strong>{{ lang["neworder.success.charge"] }}:</strong> {{ convert_currency(data['order']['price']) }} <br>
              <strong>{{ lang["neworder.success.balance"] }}:</strong> {{ convert_currency(data['order']['balance']) }} <br>
            </div>
            {% endif %}

            {% if data["order"]["success"] == 2 %}
            <div class="alert alert-dismissible alert-success">
              <strong>{{ lang["neworder.success.id"] }}:</strong> {{ data['order']['id'] }} <br>
              <strong>{{ lang["neworder.success.service"] }}:</strong> {{ data['order']['service'] }} <br>
              <strong>{{ lang["neworder.success.username"] }}:</strong> {{ data['order']['link'] }} <br>
              <strong>{{ lang["neworder.success.quantity"] }}:</strong> {{ data['order']['min'] }} - {{ data['order']['max'] }} <br>
              <strong>{{ lang["neworder.success.posts"] }}:</strong> {{ data['order']['posts'] }} <br>
              <strong>{{ lang["neworder.success.delay"] }}:</strong> {{ data['order']['delay'] }} <br>
            </div>
            <br>
            {% endif %}

            <!-- ✅ component_button_forms OPEN -->
            <div class="component_button_forms">

              <div class="form-group">
                <div class="search_sevices_content">
                  <span class="parent_searches">
                    <span>
                      <input
                        type="search"
                        id="search_services_field"
                        class="form-control"
                        placeholder="بحث"
                      />
                    </span>
                  </span>
                </div>
                <div id="dropdown_for_search" class="dropdown" style="display: block;"></div>
              </div>

              <div class="form-group">
                <label for="orderform-category" class="control-label">{{ lang["neworder.category"] }}</label>
                <select class="form-control" data-show-content="true" id="neworder_category" name="categories">
                  {% for category in categories %}
                  <option data-icon="{{category["category_icon"]}}" value="{{ category["category_id"] }}" {% if category["category_id"] == data['categories'] %} selected {% endif %}>
                    {{ category["category_name"] }}
                  </option>
                  {% endfor %}
                </select>
              </div>

              <div class="form-group">
                <label for="orderform-service" class="control-label">{{ lang["neworder.service"] }}</label>
                <select class="form-control" id="neworder_services" name="services"></select>
              </div>

              <div id="neworder_fields"></div>
              <div id="fields"></div>

              <!-- Charge + Balance block -->
              <div class="form-group" id="charge_div">
                <div class="mini-info">

                  <!-- تكلفة الطلب -->
                  <div class="mini-row">
                    <div class="mini-left">
                      <div class="mini-ico"><i class="fa fa-calculator"></i></div>
                      <div>
                        <div style="font-weight:800; color:#fff;">{{ lang["neworder.charge"] }}</div>
                        <div class="mini-note">التكلفة النهائية للطلب</div>
                      </div>
                    </div>
                    <div style="min-width: 160px;">
                      <input type="text" class="form-control" id="charge" readonly style="height:40px; border-radius:10px;">
                    </div>
                  </div>

                  {% if userLevelInfo.moduleEnabled and userLevel and userLevel.discount > 0 %}
                  <div style="margin-top:10px;" class="text-success">
                    <i class="fa fa-tag"></i> {{ userLevel.discount }}% Level Discount Applied!
                  </div>
                  {% endif %}

                  <hr style="border-color: rgba(255,255,255,.08); margin:12px 0;">

                  <!-- رصيد الحساب -->
                  <div class="mini-row">
                    <div class="mini-left">
                      <div class="mini-ico green"><i class="fa fa-money"></i></div>
                      <div>
                        <div style="font-weight:800; color:#fff;">رصيد الحساب</div>
                        <div class="mini-note">المتاح للخصم من رصيدك</div>
                      </div>
                    </div>
                    <div class="mini-amount">
                      {{ convert_currency(user["balance"] ?? 0) }}
                    </div>
                  </div>

                </div>
              </div>
              <!-- /Charge + Balance block -->

            </div>
            <!-- ✅ component_button_forms CLOSE -->

            <br>
            <input type="hidden" name="crsf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="submission_token" value="{{ random() }}{{ 'now'|date('U') }}">

            <div class="new-order-button-submit component_button_submit">
              <button type="submit" class="btn btn-primary" id="neworderbutton">
                {{ lang["neworder.button"] }}
              </button>
            </div>

          </div>
        </form>

      </div>
      <!-- /well -->

    </div>
    <!-- /col-md-8 -->

    <!-- RIGHT: instructions (same level) -->
    <div class="col-md-4">
      <div class="side-box">
        <h4><i class="fa fa-info-circle"></i> تعليمات سريعة</h4>
        <ul>
          <li>اختار <b>القسم</b> ثم <b>الخدمة</b>.</li>
          <li>تأكد من <b>الرابط</b> قبل الإرسال.</li>
          <li>تابع <b>السعر</b> في خانة الشحن قبل تنفيذ الطلب.</li>
          <li>لو الخدمة فيها حد أدنى/أقصى التزم بالنطاق.</li>
        </ul>
        <div class="hint">
          <i class="fa fa-life-ring"></i>
          لو محتاج مساعدة: ادخل على الدعم أو اقرأ الشروط.
        </div>
      </div>

      <div class="side-box" style="background: #1a1a1a;">
        <h4><i class="fa fa-bolt"></i> نصايح لتحسين النتائج</h4>
        <ul>
          <li>ابدأ بكمية قليلة للتجربة.</li>
          <li>استخدم خدمات بوقت تسليم مناسب.</li>
          <li>متابعة الطلب من صفحة الطلبات.</li>
        </ul>
      </div>
    </div>
    <!-- /col-md-4 -->

  </div>
  <!-- /row -->
</div>
<!-- /container -->


<script type="text/javascript">
window.modules = window.modules || {};
window.modules.siteOrder = {
    "lazyLoad": false,
    "isVisual": false,
    "user_lang": "{{ user.lang|default('en') }}",
    "services_search": true,
    "service_avg_time_setting": "{{ settings.service_avg_time|default('1') }}",
    "currency_symbol": "{{ curr_symbol|e('js') }}",
    "currency_format": {{ settings.currency_format|default(3) }},
    "rates_rounding": {{ settings.rates_rounding|default(2) }},
    "categories": {
        {% for category in categories %}
        "{{ category.category_id }}": {
            "id": "{{ category.category_id }}",
            "name": "{{ category.category_name|e('js') }}",
            "icon": "{{ category.category_icon|default('') }}"
        }{% if not loop.last %},{% endif %}
        {% endfor %}
    },
    "services": {
        {% set service_counter = 0 %}
        {% for category in categories %}
            {% for service in category.services %}
                {% set service_price = service.service_price %}
                {% if userLevel.discount > 0 %}
                    {% set service_price = service_price - (service_price * (userLevel.discount / 100)) %}
                {% endif %}
                {# Use convert_currency_raw function which should return just the numeric value #}
                {% set service_price_converted = convert_currency_raw(service_price) %}
                {# Debug: Check what values we're getting #}
                <!-- DEBUG Service {{ service.service_id }}: Original={{ service_price }}, Converted={{ service_price_converted }} -->

                {% set service_name = service.service_name %}
                {% set service_description = service.service_description|default('') %}
                {% if service_counter > 0 %},{% endif %}
                "{{ service.service_id }}": {
                    "id": "{{ service.service_id }}",
                    "cid": "{{ category.category_id }}",
                    "position": "{{ loop.index0 }}",
                    "type": "0",
                    "price": "{{ service_price_converted }}",
                    "favorite": false,
                    "added_to_favorite_at": null,
                    "orig_price": "{{ service_price_converted }}",
                    "user_level_discount": {{ userLevel.discount|default(0) }},
                    "link_type": "{{ service.want_username|default('1') }}",
                    "description": "{{ service_description|e('js') }}",
                    "min": "{{ service.service_min }}",
                    "max": "{{ service.service_max }}",
                    "min_max_label": "Min: {{ service.service_min }} - Max: {{ service.service_max }}",
                    "average_time": "{{ service.service_avg_time|default('Not Enough Data') }}",
                    "drip_feed": {{ service.service_dripfeed == '2' ? 'true' : 'false' }},
                    "origin_name": "{{ service_name|e('js') }}",
                    "name": "{{ service.service_id }} - {{ service_name|e('js') }} - {{ convert_currency(service_price)|e('js') }}",
                    "package": "{{ service.service_package|default('1') }}",
                    "want_username": "{{ service.want_username|default('1') }}",
                    "refill": {{ service.service_refill == '1' ? 'true' : 'false' }},
                    "cancel": {{ service.service_cancel == '1' ? 'true' : 'false' }},
                    "secret_note": "{{ service.service_secret_note|default('')|e('js') }}",
                    "name_template": {
                        "search_template": "{{ service.service_id }} - {{ service_name|e('js') }} - {{ convert_currency(service_price)|e('js') }}",
                        "template": "{{ service.service_id }} {{ service_name|e('js') }}",
                        "service_name": "{{ service_name|e('js') }}",
                        "service_id": "{{ service.service_id }}",
                        "rate_formatted": "{{ convert_currency(service_price)|e('js') }}"
                    }
                }
                {% set service_counter = service_counter + 1 %}
            {% endfor %}
        {% endfor %}
    }
};




// Initialize the order system with preloaded data
if (typeof initializeOrderSystem === 'function') {
    initializeOrderSystem();
}

// Order persistence system - Set flags for ajax.js to handle
{% if data["order"]["success"] == 1 and data["services"] and data["categories"] and data["viewing_order"] %}
// Set flags to prevent automatic first service selection
// These will be used by the ajax.js script to handle order view mode
window.preventAutoServiceSelection = true;
window.expectedServiceId = "{{ data['services'] }}";
window.expectedCategoryId = "{{ data['categories'] }}";

// Set server-side session flag to preserve form data
{% set session_viewing_order = true %}
{% else %}
// Regular neworder page - normal behavior
window.preventAutoServiceSelection = false;
window.expectedServiceId = null;
window.expectedCategoryId = null;
{% endif %}

// Debug: Test if serviceclicked function is available
console.log('window.serviceclicked function available:', typeof window.serviceclicked);
console.log('window.modules.siteOrder data:', window.modules.siteOrder);

// Debug: Validate JSON structure
try {
    var servicesCount = Object.keys(window.modules.siteOrder.services || {}).length;
    var categoriesCount = Object.keys(window.modules.siteOrder.categories || {}).length;
    console.log('✅ Valid JSON - Services:', servicesCount, 'Categories:', categoriesCount);

    // Test a sample service
    var firstServiceId = Object.keys(window.modules.siteOrder.services || {})[0];
    if (firstServiceId) {
        var firstService = window.modules.siteOrder.services[firstServiceId];
        console.log('Sample service:', firstServiceId, firstService);
    }
} catch (e) {
    console.log('❌ JSON parsing error:', e);
}

// Debug: Test serviceclicked function after a short delay
setTimeout(function() {
    console.log('Testing serviceclicked function availability...');
    if (typeof window.serviceclicked === 'function') {
        console.log('✅ serviceclicked function is ready');

        // Test if we can call it (without actually executing)
        console.log('Function signature:', window.serviceclicked.toString().substring(0, 100) + '...');
    } else {
        console.log('❌ serviceclicked function not found');
    }
}, 2000);
</script>

</body>

{% include 'footer.twig' %}

<script>
// Comprehensive Order Submission Protection System
(function() {
    let isSubmitting = false;
    let submitTimeout = null;
    let lastSubmissionData = null;

    function preventDuplicateSubmission() {
        const form = document.getElementById('order-form');
        const button = document.getElementById('neworderbutton');

        if (!form || !button) return;

        // Prevent multiple event listeners
        if (button.hasAttribute('data-protected')) return;
        button.setAttribute('data-protected', 'true');

        // Store original button text
        const originalText = button.innerHTML;

        // Form submission handler
        form.addEventListener('submit', function(e) {
            // Check if already submitting
            if (isSubmitting) {
                e.preventDefault();
                console.log('Duplicate submission prevented - already processing');
                return false;
            }

            // Get current form data for duplicate detection
            const formData = new FormData(form);
            const currentData = {
                service: formData.get('services'),
                quantity: formData.get('quantity'),
                link: formData.get('link') || '',
                categories: formData.get('categories')
            };

            // Check for duplicate submission (same data within 30 seconds)
            if (lastSubmissionData) {
                const timeDiff = Date.now() - lastSubmissionData.timestamp;
                const sameData = (
                    lastSubmissionData.service === currentData.service &&
                    lastSubmissionData.quantity === currentData.quantity &&
                    lastSubmissionData.link === currentData.link &&
                    lastSubmissionData.categories === currentData.categories
                );

                if (timeDiff < 30000 && sameData) {
                    e.preventDefault();
                    alert('Please wait before submitting another identical order.');
                    return false;
                }
            }

            // Mark as submitting
            isSubmitting = true;
            lastSubmissionData = {
                ...currentData,
                timestamp: Date.now()
            };

            // Disable button immediately
            button.disabled = true;
            button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing...';
            button.style.opacity = '0.6';

            // Add visual feedback to form
            form.style.opacity = '0.8';
            form.style.pointerEvents = 'none';

            // Safety timeout - re-enable after 60 seconds if no redirect occurs
            submitTimeout = setTimeout(function() {
                resetSubmissionState();
            }, 60000);

            console.log('Order submission started');
        });

        // Reset function
        function resetSubmissionState() {
            isSubmitting = false;
            if (submitTimeout) {
                clearTimeout(submitTimeout);
                submitTimeout = null;
            }

            button.disabled = false;
            button.innerHTML = originalText;
            button.style.opacity = '1';
            form.style.opacity = '1';
            form.style.pointerEvents = 'auto';

            console.log('Submission state reset');
        }

        // Reset on page visibility change (user comes back to tab)
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden && isSubmitting) {
                // Check if we're still on the same page (no redirect happened)
                setTimeout(function() {
                    if (window.location.pathname.includes('neworder') && !window.location.pathname.includes('order/')) {
                        resetSubmissionState();
                    }
                }, 1000);
            }
        });

        // Reset on page unload (cleanup)
        window.addEventListener('beforeunload', function() {
            resetSubmissionState();
        });

        console.log('Order submission protection initialized');
    }

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', preventDuplicateSubmission);
    } else {
        preventDuplicateSubmission();
    }
})();
</script>