{% extends 'base.html' %}

{% block content %}
<style>
    /* تنسيقات مخصصة لدمج المنيو وتوفير مساحة على الموبايل */
    @media (max-width: 768px) {
        .menu-item-card {
            padding: 8px !important;
            margin-bottom: 6px !important;
        }
        .item-img {
            width: 50px !important;
            height: 50px !important;
            object-fit: cover;
            border-radius: 6px;
        }
        h6.item-title {
            font-size: 0.9rem !important;
            margin-bottom: 2px !important;
        }
        .item-price-val {
            font-size: 0.85rem !important;
        }
        /* تصغير أزرار الكمية والمدخل */
        .input-group-sm .btn {
            padding: 2px 8px !important;
            font-size: 0.85rem !important;
        }
        .input-group-sm .item-qty {
            font-size: 0.85rem !important;
            height: 31px;
        }
        /* فئات الطعام على الموبايل كشريط أفقي متحرك لتوفير المساحة */
        .categories-sidebar {
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            white-space: nowrap;
            gap: 5px;
            padding-bottom: 5px;
        }
        .categories-sidebar .category-btn {
            display: inline-block;
            width: auto !important;
            border-radius: 20px !important;
            padding: 6px 12px !important;
            font-size: 0.85rem;
        }
    }
</style>

<div class="container-fluid px-2 px-md-3">
    <form action="{{ url_for('view_menu', branch_id=branch.id) }}" method="POST" enctype="multipart/form-data" id="orderForm">
        <input type="hidden" name="customer_name" value="{{ customer_name or session.get('customer_name', '') }}">
<input type="hidden" name="customer_phone" value="{{ customer_phone or session.get('customer_phone', '') }}">

        <div class="row">
            <!-- قائمة المجموعات (الفئات) -->
            <div class="col-md-3 mb-3">
                <div class="card shadow-sm sticky-top" style="top: 15px;">
                    <div class="card-header bg-dark text-white fw-bold py-2">
                        <i class="fa-solid fa-list me-2"></i>فئات قائمة الطعام
                    </div>
                    <div class="card-body p-2">
                        <div class="list-group list-group-flush categories-sidebar" id="category-list">
                            <!-- زر عرض الكل -->
                            <button type="button" class="list-group-item list-group-item-action fw-bold active category-btn rounded mb-1" onclick="filterCategory('all', this)">
                                🌟 عرض الكل
                            </button>
                            
                            {% for cat in categories %}
                            <button type="button" class="list-group-item list-group-item-action fw-bold d-flex justify-content-between align-items-center category-btn rounded mb-1" onclick="filterCategory('cat-{{ cat.id }}', this)">
                                <span>{{ cat.name }}</span>
                                <span class="badge bg-secondary rounded-pill ms-2">{{ cat.items|length }}</span>
                            </button>
                            {% else %}
                            <div class="p-2 text-muted small">لا توجد مجموعات مضافة للفرع.</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- عرض أصناف المجموعات -->
            <div class="col-md-6 mb-3">
                {% for cat in categories %}
                <div class="card mb-3 shadow-sm category-block border-0" id="cat-{{ cat.id }}">
                    <div class="card-header bg-light fw-bold text-danger py-2 border-start border-4 border-danger">
                        🔥 {{ cat.name }}
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            {% for item in cat.items %}
                            <div class="list-group-item menu-item-card p-2 p-md-3">
                                <div class="row align-items-center g-2">
                                    <div class="col-3 col-sm-2 text-center">
                                        <img src="/static/uploads/{{ item.image }}" class="img-fluid rounded item-img" style="max-height: 60px; object-fit: cover;" onerror="this.src='/static/uploads/default_food.png';">
                                    </div>
                                    <div class="col-6 col-sm-7">
                                        <h6 class="fw-bold item-title mb-1">{{ item.name }}</h6>
                                        <span class="text-success fw-bold item-price-val" data-price="{{ item.price }}">{{ "%.2f"|format(item.price) }} EGP</span>
                                    </div>
                                    <div class="col-3 col-sm-3 text-end">
                                        <div class="input-group input-group-sm">
                                            <button type="button" class="btn btn-outline-danger px-2" onclick="updateQty('{{ item.id }}', -1)">-</button>
                                            <input type="number" id="qty_{{ item.id }}" name="qty_{{ item.id }}" class="form-control text-center item-qty px-1" value="0" readonly>
                                            <button type="button" class="btn btn-danger px-2" onclick="updateQty('{{ item.id }}', 1)">+</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% else %}
                            <div class="p-3 text-muted small">لا توجد أصناف بهذه المجموعة.</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- سلة المشتريات وإتمام الطلب -->
            <div class="col-md-3 mb-3">
                <div class="card shadow-sm sticky-top border-danger" style="top: 15px;">
                    <div class="card-header bg-danger text-white fw-bold py-2">
                        <i class="fa-solid fa-shopping-bag me-2"></i>سلة مشترياتك
                    </div>
                    <div class="card-body p-3">
                        <p class="small text-muted mb-2 border-bottom pb-2">العميل: <strong class="text-dark">{{ customer_name }}</strong> <br><span class="text-secondary">{{ customer_phone }}</span></p>
                        
                        <div class="d-flex justify-content-between align-items-center mb-3 bg-light p-2 rounded">
                            <span class="fw-bold">الإجمالي:</span>
                            <span class="fw-bold fs-5 text-danger"><span id="grandTotal">0.00</span> EGP</span>
                        </div>

                        <!-- خانة وقت الاستلام الاختياري فوق زر الإرسال -->
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">
                                <i class="fa-solid fa-clock text-danger me-1"></i> وقت استلام الأوردر (اختياري)
                            </label>
                            <input type="time" name="scheduled_pickup_time" id="scheduled_pickup_time" class="form-control form-control-sm">
                            <small class="text-muted" style="font-size: 0.75rem;">اتركه فارغاً إذا كنت تريده في أسرع وقت.</small>
                        </div>

                        <div class="border rounded p-2 mb-3 bg-light">
                            <small class="fw-bold text-success d-block mb-1">طريقة الدفع ( محفظة):</small>
                            <h6 class="fw-bold text-dark mb-2">{{ payment_number }}</h6>
                            <label class="form-label small fw-bold">إرفاق صورة إيصال التحويل *</label>
                            <input type="file" name="payment_proof" id="payment_proof_input" class="form-control form-control-sm" accept="image/*" required>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">
                                <i class="fa-solid fa-comment-dots me-1"></i> ملاحظات أو تعليق على الطلب (اختياري)
                            </label>
                            <textarea name="customer_comment" id="customer_comment_input" class="form-control form-control-sm" rows="2" placeholder="اكتب أي تفاصيل أو ملاحظات خاصة بطلبك هنا..."></textarea>
                        </div>

                        <!-- زر يفتح موديل المراجعة بدلاً من الإرسال المباشر -->
                        <button type="button" class="btn btn-success w-100 fw-bold py-2" onclick="openOrderReviewModal()">
                            مراجعة وإرسال الطلب <i class="fa-solid fa-arrow-left ms-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Modal مراجعة الطلب قبل الإرسال النهائي -->
<div class="modal fade" id="orderReviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title fw-bold">
                    <i class="fa-solid fa-clipboard-check me-2"></i>مراجعة تفاصيل طلبك قبل الإرسال
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small mb-2">يرجى مراجعة الأصناف والأسعار ووقت الاستلام:</p>
                
                <!-- جدول مصغر للأصناف المختارَّة -->
                <div class="table-responsive mb-3 border rounded p-2 bg-light">
                    <table class="table table-sm mb-0 align-middle" style="font-size: 0.85rem;">
                        <thead class="table-dark">
                            <tr>
                                <th>الصنف</th>
                                <th>الكمية</th>
                                <th>السعر</th>
                            </tr>
                        </thead>
                        <tbody id="reviewItemsList">
                            <!-- سيتم تعبئتها ديناميكياً بجافاسكريبت -->
                        </tbody>
                    </table>
                </div>

                <div class="mb-2 small">
                    <strong>وقت الاستلام المحدد: </strong> <span id="reviewPickupTime" class="text-danger fw-bold">فوراً / في أسرع وقت</span>
                </div>
                <div class="mb-2 small">
                    <strong>ملاحظاتك: </strong> <span id="reviewComment" class="text-muted">لا يوجد</span>
                </div>
                <div class="p-2 bg-warning-subtle rounded border text-center mb-0">
                    <span class="fw-bold">الإجمالي الكلي: </span>
                    <span class="text-danger fw-bold fs-5" id="reviewGrandTotal">0.00</span> EGP
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary fw-bold" data-bs-dismiss="modal">تعديل الطلب</button>
                <button type="button" class="btn btn-success fw-bold" onclick="submitFinalOrder()">تأكيد وإرسال نهائي</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// دالة الفلترة: إظهار المجموعة المختارة وإخفاء المجموعات الأخرى
function filterCategory(catId, btnElement) {
    const buttons = document.querySelectorAll('.category-btn');
    buttons.forEach(btn => btn.classList.remove('active', 'bg-dark', 'text-white'));
    btnElement.classList.add('active');

    const blocks = document.querySelectorAll('.category-block');
    blocks.forEach(block => {
        if (catId === 'all' || block.id === catId) {
            block.style.display = 'block';
        } else {
            block.style.display = 'none';
        }
    });
}

function updateQty(itemId, change) {
    const input = document.getElementById('qty_' + itemId);
    if (!input) return;
    
    let currentVal = parseInt(input.value) || 0;
    let newVal = currentVal + change;
    if (newVal < 0) newVal = 0;
    
    input.value = newVal;
    calculateTotal();
}

function calculateTotal() {
    let grandTotal = 0;
    const inputs = document.querySelectorAll('.item-qty');
    
    inputs.forEach(input => {
        const qty = parseInt(input.value) || 0;
        if (qty > 0) {
            const priceEl = input.closest('.row').querySelector('.item-price-val');
            const price = parseFloat(priceEl.getAttribute('data-price')) || 0;
            grandTotal += price * qty;
        }
    });
    
    document.getElementById('grandTotal').innerText = grandTotal.toFixed(2);
}

// دالة فتح نافذة المراجعة والتأكد من إرفاق الإيصال واختيار الأصناف
function openOrderReviewModal() {
    let total = 0;
    let selectedRows = '';
    const inputs = document.querySelectorAll('.item-qty');
    
    inputs.forEach(input => {
        const qty = parseInt(input.value) || 0;
        if (qty > 0) {
            const row = input.closest('.row');
            const itemName = row.querySelector('.item-title').innerText;
            const price = parseFloat(row.querySelector('.item-price-val').getAttribute('data-price')) || 0;
            const itemTotal = price * qty;
            total += itemTotal;

            selectedRows += `<tr>
                <td>${itemName}</td>
                <td><span class="badge bg-secondary">×${qty}</span></td>
                <td class="fw-bold text-success">${itemTotal.toFixed(2)} EGP</td>
            </tr>`;
        }
    });

    if (total === 0) {
        alert("يرجى اختيار صنف واحد على الأقل قبل المتابعة!");
        return;
    }

    const proofInput = document.getElementById('payment_proof_input');
    if (!proofInput.files || proofInput.files.length === 0) {
        alert("يرجى إرفاق صورة إيصال التحويل أولاً!");
        return;
    }

    document.getElementById('reviewItemsList').innerHTML = selectedRows;
    document.getElementById('reviewGrandTotal').innerText = total.toFixed(2);

    const timeVal = document.getElementById('scheduled_pickup_time').value;
    document.getElementById('reviewPickupTime').innerText = timeVal ? timeVal : 'فوراً / في أسرع وقت';

    const commentVal = document.getElementById('customer_comment_input').value.trim();
    document.getElementById('reviewComment').innerText = commentVal ? commentVal : 'لا يوجد ملاحظات';

    const modalElement = document.getElementById('orderReviewModal');
    let reviewModal = bootstrap.Modal.getInstance(modalElement);
    if (!reviewModal) {
        reviewModal = new bootstrap.Modal(modalElement);
    }
    reviewModal.show();
}

function submitFinalOrder() {
    document.getElementById('orderForm').submit();
}
</script>
{% endblock %}