{% extends "layouts/base.html" %}
{% load jalali_tags %}

{% block content %}
<div class="container py-4" dir="rtl" style="text-align: right;">
    <div class="mb-4">
        <a href="{% url 'orders:manage-order-list' %}" class="btn btn-sm btn-outline-secondary">
             بازگشت به لیست مدیریت
        </a>
    </div>

    <div class="row g-4">
        <!-- جزئیات اقلام فاکتور سفارش -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-dark text-white py-3">
                    <h5 class="mb-0 fw-bold">اطلاعات سفارش #{{ order.id }}</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <span class="text-secondary small d-block">نام مشتری:</span>
                            <strong class="text-dark">{{ order.full_name }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary small d-block">تلفن تماس:</span>
                            <strong class="text-dark">{{ order.phone }}</strong>
                        </div>
                        <div class="col-12">
                            <span class="text-secondary small d-block">آدرس تحویل:</span>
                            <strong class="text-dark d-block mt-1">{{ order.address }}</strong>
                        </div>
                        {% if order.note %}
                            <div class="col-12 bg-light p-3 rounded">
                                <span class="text-secondary small d-block">یادداشت مشتری:</span>
                                <p class="mb-0 mt-1 text-dark">{{ order.note }}</p>
                            </div>
                        {% endif %}
                    </div>

                    <h5 class="fw-bold mb-3 border-bottom pb-2">اقلام سفارش</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle text-center">
                            <thead class="table-light">
                                <tr>
                                    <th>غذا</th>
                                    <th>قیمت واحد</th>
                                    <th>تعداد</th>
                                    <th>جمع کل</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in order.items.all %}
                                <tr>
                                    <td class="text-start fw-semibold">{{ item.food.name }}</td>
                                    <td>{{ item.price }} تومان</td>
                                    <td>{{ item.quantity }}</td>
                                    <td class="fw-bold text-success">{{ item.total_price }} تومان</td>
                                </tr>
                                {% endfor %}
                                <tr class="table-light">
                                    <td colspan="3" class="text-end fw-bold">مبلغ نهایی فاکتور:</td>
                                    <td class="fw-bold fs-5 text-success">{{ order.total_price }} تومان</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- سایدبار بررسی رسید و کنترل وضعیت -->
        <div class="col-lg-4">
            <!-- نمایش رسید پرداخت -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0 fw-bold">رسید پرداخت بانکی</h5>
                </div>
                <div class="card-body text-center">
                    {% if order.payment_receipt %}
                        <div class="mb-3">
                            <span class="text-secondary small d-block mb-2">زمان ارسال فیش:</span>
                            <strong class="text-dark">{{ order.payment_submitted_at|jalali_date:'%Y/%m/%d - %H:%M' }}</strong>
                        </div>
                        <div class="receipt-preview-container border rounded p-2 bg-light cursor-pointer" 
                             data-bs-toggle="modal" data-bs-target="#receiptModal">
                            <img src="{{ order.payment_receipt.url }}" alt="رسید پرداخت" class="img-fluid rounded" style="max-height: 220px; object-fit: contain;">
                            <div class="mt-2 text-primary small fw-semibold">
                                <i class="bi bi-zoom-in"></i> جهت بزرگنمایی کلیک کنید
                            </div>
                        </div>
                    {% else %}
                        <div class="py-4 text-muted">
                            <i class="bi bi-image-fill fs-1 d-block mb-2"></i>
                            رسیدی برای این سفارش بارگذاری نشده است.
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- پنل تغییر وضعیت و اکشن‌ها -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-secondary text-white py-3">
                    <h5 class="mb-0 fw-bold">عملیات مدیریتی</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'orders:manage-update-status' order.id %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-secondary">تغییر وضعیت سفارش به:</label>
                            <select name="status" class="form-select" id="id_status_select">
                                {% for value, label in status_choices %}
                                    <option value="{{ value }}" {% if order.status == value %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- فیلد ثبت یادداشت مدیر در صورت بروز مشکل یا رد فیش -->
                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-secondary">توضیحات و یادداشت مدیریت:</label>
                            <textarea name="admin_note" rows="3" class="form-control" placeholder="علت لغو، رد واریزی یا هرگونه هماهنگی دیگر را بنویسید...">{{ order.admin_note }}</textarea>
                        </div>

                        <!-- دکمه‌های عملکرد سریع (Quick Actions) -->
                        <div class="d-grid gap-2 mt-4">
                            {% if order.status == 'payment_submitted' %}
                                <button type="button" class="btn btn-success fw-bold" onclick="submitQuickStatus('paid')">
                                    تایید نهایی پرداخت (Paid)
                                </button>
                                <button type="button" class="btn btn-danger fw-bold" onclick="submitQuickStatus('awaiting_payment', 'فیش واریزی مورد تایید نیست. مجددا فیش معتبر ارسال کنید.')">
                                    رد رسید پرداخت (نامعتبر)
                                </button>
                            {% endif %}
                            <button type="submit" class="btn btn-dark">ثبت تغییرات وضعیت</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- مودال شیک و تمیز نمایش بزرگ رسید تصویر -->
{% if order.payment_receipt %}
<div class="modal fade" id="receiptModal" tabindex="-1" aria-labelledby="receiptModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title fw-bold" id="receiptModalLabel">تصویر رسید پرداخت شماره #{{ order.id }}</h5>
                <button type="button" class="btn-close btn-close-white ms-0 me-auto" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center bg-light">
                <img src="{{ order.payment_receipt.url }}" class="img-fluid rounded shadow-sm" style="max-height: 80vh;" alt="رسید اصلی پرداخت">
            </div>
            <div class="modal-footer bg-dark border-0 justify-content-between text-white-50">
                <small>زمان بارگذاری: {{ order.payment_submitted_at|jalali_date:'%Y/%m/%d - %H:%M' }}</small>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">بستن مودال</button>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

{% block extra_js %}
<script>
    // اسکریپت اعمال سریع وضعیت‌ها با دکمه‌های تایید و رد سریع
    function submitQuickStatus(statusValue, noteValue = '') {
        const statusSelect = document.getElementById('id_status_select');
        const noteTextarea = document.querySelector('textarea[name="admin_note"]');
        
        statusSelect.value = statusValue;
        if(noteValue) {
            noteTextarea.value = noteValue;
        }
        statusSelect.form.submit();
    }
</script>
<style>
    .cursor-pointer {
        cursor: pointer;
        transition: transform 0.2s ease-in-out;
    }
    .cursor-pointer:hover {
        transform: scale(1.02);
    }
</style>
{% endblock %}