{% extends 'layouts/base.html' %}
{% load price_tags %}
{% load jalali_tags %}

{% block title %}جزئیات سفارش{% endblock %}

{% block extra_css %}
<style>
    .payment-bank-card {
        background: linear-gradient(135deg, #1f2937, #111827 55%, #374151);
        color: #fff;
        border-radius: 1.25rem;
        padding: 1.5rem;
        box-shadow: 0 18px 45px rgba(17, 24, 39, 0.22);
        position: relative;
        overflow: hidden;
    }

    .payment-bank-card::before {
        content: "";
        position: absolute;
        top: -40px;
        left: -40px;
        width: 140px;
        height: 140px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 50%;
    }

    .payment-bank-card::after {
        content: "";
        position: absolute;
        bottom: -50px;
        right: -30px;
        width: 160px;
        height: 160px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    .payment-chip {
        width: 48px;
        height: 36px;
        border-radius: 10px;
        background: linear-gradient(135deg, #facc15, #f59e0b);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    }

    .payment-card-number {
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 0.18rem;
        word-spacing: 0.35rem;
        direction: ltr;
    }

    .payment-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 0.3rem;
    }

    .payment-value {
        font-size: 1rem;
        font-weight: 600;
    }

    @media (max-width: 576px) {
        .payment-bank-card {
            padding: 1.2rem;
        }

        .payment-card-number {
            font-size: 1.05rem;
            letter-spacing: 0.08rem;
            word-spacing: 0.2rem;
            line-height: 1.9;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="row g-4">
    <div class="col-lg-8">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 mb-4">
                    <h3 class="mb-0">سفارش #{{ order.id }}</h3>

                    {% if order.status == 'awaiting_payment' %}
                        <span class="badge bg-warning text-dark">{{ order.get_status_display }}</span>
                    {% elif order.status == 'payment_submitted' %}
                        <span class="badge bg-info text-dark">{{ order.get_status_display }}</span>
                    {% elif order.status == 'paid' %}
                        <span class="badge bg-success">{{ order.get_status_display }}</span>
                    {% elif order.status == 'preparing' %}
                        <span class="badge bg-primary">{{ order.get_status_display }}</span>
                    {% elif order.status == 'delivered' %}
                        <span class="badge bg-success">{{ order.get_status_display }}</span>
                    {% elif order.status == 'canceled' %}
                        <span class="badge bg-danger">{{ order.get_status_display }}</span>
                    {% else %}
                        <span class="badge bg-secondary">{{ order.get_status_display }}</span>
                    {% endif %}
                </div>

                <div class="mb-4">
                    <p class="mb-1"><strong>نام:</strong> {{ order.full_name }}</p>
                    <p class="mb-1"><strong>تلفن:</strong> {{ order.phone }}</p>
                    <p class="mb-1"><strong>آدرس:</strong> {{ order.address }}</p>
                    {% if order.note %}
                        <p class="mb-0"><strong>توضیحات:</strong> {{ order.note }}</p>
                    {% endif %}
                </div>

                {% if order.status == 'awaiting_payment' %}
                <div class="payment-card-wrapper mb-4">
                    <div class="payment-bank-card">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div>
                                <div class="small opacity-75 mb-1">پرداخت سفارش</div>
                                <div class="fw-bold fs-5">کارت بانکی</div>
                            </div>
                            <div class="payment-chip"></div>
                        </div>
                
                        <div class="payment-card-number mb-4" dir="ltr">
                            {{ payment_card_number|slice:":4" }}
                            {{ payment_card_number|slice:"4:8" }}
                            {{ payment_card_number|slice:"8:12" }}
                            {{ payment_card_number|slice:"12:16" }}
                        </div>
                
                        <div class="row g-3 align-items-end">
                            <div class="col-md-6">
                                <div class="payment-label">نام صاحب کارت</div>
                                <div class="payment-value">{{ payment_card_holder }}</div>
                            </div>
                            <div class="col-md-6 text-md-end">
                                <div class="payment-label">مبلغ قابل پرداخت</div>
                                <div class="payment-value text-warning">
                                    {{ order.total_price|price_format }} تومان
                                </div>
                            </div>
                        </div>
                    </div>
                
                    <div class="alert alert-warning border-0 shadow-sm mt-3 mb-0">
                        <div class="fw-bold mb-2">سفارش در انتظار پرداخت است</div>
                        <div class="mb-0">
                            لطفا مبلغ سفارش را به کارت بالا واریز کنید و حداکثر تا 15 دقیقه رسید را ارسال کنید.
                        </div>
                    </div>
                </div>
                

                    <div class="card border-warning mb-4">
                        <div class="card-body text-center">
                            <div class="text-muted mb-2">زمان باقی مانده تا پایان مهلت پرداخت</div>
                            <div
                                id="payment-timer"
                                class="display-6 fw-bold text-danger"
                                data-remaining-seconds="{{ remaining_seconds }}"
                            >
                                00:00
                            </div>
                            <div class="small text-muted mt-2">
                                در صورت اتمام زمان، سفارش به صورت خودکار لغو می‌شود.
                            </div>
                        </div>
                    </div>

                    <div class="card border-0 bg-light mb-4">
                        <div class="card-body">
                            <h5 class="mb-3">ارسال رسید پرداخت</h5>

                            <form method="post" action="{% url 'orders:submit-receipt' order.id %}" enctype="multipart/form-data">
                                {% csrf_token %}

                                <div class="mb-3">
                                    <label class="form-label">تصویر رسید</label>
                                    {{ receipt_form.payment_receipt }}
                                    {% if receipt_form.payment_receipt.errors %}
                                        <div class="text-danger small mt-1">{{ receipt_form.payment_receipt.errors }}</div>
                                    {% endif %}
                                </div>

                                <button type="submit" class="btn btn-success">
                                    ارسال رسید برای تایید مدیریت
                                </button>
                            </form>
                        </div>
                    </div>
                {% elif order.status == 'payment_submitted' %}
                    <div class="alert alert-info">
                        رسید پرداخت شما ثبت شده و در انتظار تایید مدیریت است.
                    </div>

                    {% if order.payment_receipt %}
                        <div class="mb-4">
                            <a href="{{ order.payment_receipt.url }}" target="_blank" class="btn btn-outline-info">
                                مشاهده رسید ارسالی
                            </a>
                        </div>
                    {% endif %}
                {% elif order.status == 'canceled' %}
                    <div class="alert alert-danger">
                        این سفارش لغو شده است.
                        {% if order.admin_note %}
                            <div class="mt-2">{{ order.admin_note }}</div>
                        {% endif %}
                    </div>
                {% elif order.status == 'paid' %}
                    <div class="alert alert-success">
                        پرداخت این سفارش توسط مدیریت تایید شده است.
                    </div>
                {% endif %}

                <h5 class="mb-3">آیتم های سفارش</h5>

                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th>غذا</th>
                                <th>قیمت</th>
                                <th>تعداد</th>
                                <th>جمع</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in order.items.all %}
                                <tr>
                                    <td>{{ item.food.name }}</td>
                                    <td>{{ item.price|price_format }}</td>
                                    <td>{{ item.quantity }}</td>
                                    <td>{{ item.total_price|price_format }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="text-end mt-3">
                    <strong class="fs-5">مبلغ کل: {{ order.total_price|price_format }} تومان</strong>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <h5 class="mb-3">اطلاعات ثبت</h5>
                <p class="mb-1"><strong>تاریخ ایجاد:</strong> {{ order.created_at|jalali_date }}</p>
                <p class="mb-1"><strong>آخرین بروزرسانی:</strong> {{ order.updated_at|jalali_date }}</p>
                {% if order.payment_deadline %}
                    <p class="mb-1"><strong>مهلت پرداخت:</strong> {{ order.payment_deadline|jalali_date }}</p>
                {% endif %}
                {% if order.payment_submitted_at %}
                    <p class="mb-0"><strong>زمان ارسال رسید:</strong> {{ order.payment_submitted_at|jalali_date }}</p>
                {% endif %}
            </div>
        </div>

        {% if order.admin_note %}
            <div class="card shadow-sm border-0 mt-4">
                <div class="card-body">
                    <h5 class="mb-3">یادداشت مدیریت</h5>
                    <p class="mb-0">{{ order.admin_note }}</p>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    (function () {
        const timerElement = document.getElementById('payment-timer');
        if (!timerElement) {
            return;
        }

        let remaining = parseInt(timerElement.dataset.remainingSeconds || '0', 10);

        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return String(minutes).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
        }

        function tick() {
            if (remaining <= 0) {
                timerElement.textContent = '00:00';
                window.location.reload();
                return;
            }

            timerElement.textContent = formatTime(remaining);
            remaining -= 1;
        }

        tick();
        setInterval(tick, 1000);
    })();
</script>
{% endblock %}