{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="card p-3 p-md-4 shadow-sm border-0 rounded-4">
            <h3 class="fw-bold text-center mb-4" style="color: #800020;">
                <i class="fa-solid fa-location-dot me-2"></i>التحقق من نطاق التغطية
            </h3>

            <!-- تنبيه توضيحي للعميل -->
            <div class="alert alert-warning text-center small mb-4">
                <i class="fa-solid fa-triangle-exclamation me-1"></i>
                خدمة الطلب متاحة فقط للعملاء داخل نطاق 1 كيلومتر من فروعنا. يرجى تفعيل الموقع للمتابعة.
            </div>

            <form action="{{ url_for('create_order') }}" method="POST" id="strictLocationForm">
                <input type="hidden" name="user_lat" id="user_lat">
                <input type="hidden" name="user_lon" id="user_lon">

                <div class="mb-3">
                    <label class="form-label fw-bold">اسم العميل *</label>
                    <input type="text" name="customer_name" class="form-control form-control-md" placeholder="أدخل اسمك بالكامل" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">رقم الموبايل *</label>
                    <input type="tel" name="customer_phone" class="form-control form-control-md" placeholder="01XXXXXXXXX" required>
                </div>

                <div class="mb-4 text-center bg-light p-3 rounded border">
                    <button type="button" class="btn btn-danger fw-bold w-100 py-2.5 shadow-sm" onclick="getStrictLocationAndSubmit()">
                        <i class="fa-solid fa-crosshairs me-2"></i> اضغط هنا لتحديد موقعي والتحقق من النطاق
                    </button>
                    <div id="locationStatusMsg" class="small mt-2 fw-bold text-muted">لم يتم تحديد الموقع بعد</div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function getStrictLocationAndSubmit() {
    const statusEl = document.getElementById('locationStatusMsg');
    if (!navigator.geolocation) {
        statusEl.innerHTML = '<span class="text-danger">متصفحك لا يدعم خاصية تحديد الموقع.</span>';
        return;
    }

    statusEl.innerHTML = '<span class="text-primary"><i class="fa-solid fa-spinner fa-spin me-1"></i>جاري تحديد موقعك والتحقق من الزون...</span>';
    
    navigator.geolocation.getCurrentPosition(
        function(position) {
            document.getElementById('user_lat').value = position.coords.latitude;
            document.getElementById('user_lon').value = position.coords.longitude;
            statusEl.innerHTML = '<span class="text-success"><i class="fa-solid fa-check-circle me-1"></i>تم تحديد موقعك! جاري توجيهك...</span>';
            
            // إرسال الفورم أوتوماتيكياً بعد التقاط الإحداثيات
            setTimeout(() => {
                document.getElementById('strictLocationForm').submit();
            }, 800);
        },
        function(error) {
            statusEl.innerHTML = '<span class="text-danger">فشل تحديد الموقع. يجب السماح بالوصول للموقع للتمكن من إتمام الطلب.</span>';
        },
        { timeout: 10000, enableHighAccuracy: true }
    );
}
</script>
{% endblock %}