{% extends "base.html" %}

{% block title %}پیگیری سفارش {{ order.order_number }} | {{ site_name }}{% endblock %}

{% block content %}
<div class="container py-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('index') }}">خانه</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('profile') }}">پروفایل</a></li>
            <li class="breadcrumb-item active">پیگیری سفارش</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-truck text-primary me-2"></i> 
                            پیگیری سفارش {{ order.order_number }}
                        </h5>
                        <span class="badge bg-primary">{{ order.created_at|jalali_date }}</span>
                    </div>
                </div>
                <div class="card-body">
                    <!-- وضعیت سفارش -->
                    <div class="text-center mb-4">
                        <div class="display-1 mb-3">
                            {% if order.order_status == 'pending' %}
                                <i class="fas fa-clock text-warning"></i>
                            {% elif order.order_status == 'processing' %}
                                <i class="fas fa-spinner fa-spin text-info"></i>
                            {% elif order.order_status == 'shipped' %}
                                <i class="fas fa-truck text-primary"></i>
                            {% elif order.order_status == 'delivered' %}
                                <i class="fas fa-check-circle text-success"></i>
                            {% elif order.order_status == 'cancelled' %}
                                <i class="fas fa-times-circle text-danger"></i>
                            {% endif %}
                        </div>
                        <h4>
                            {% if order.order_status == 'pending' %}
                                در انتظار پرداخت
                            {% elif order.order_status == 'processing' %}
                                در حال پردازش
                            {% elif order.order_status == 'shipped' %}
                                ارسال شده
                            {% elif order.order_status == 'delivered' %}
                                تحویل داده شد
                            {% elif order.order_status == 'cancelled' %}
                                لغو شده
                            {% endif %}
                        </h4>
                        <p class="text-muted">
                            آخرین به‌روزرسانی: {{ order.updated_at|jalali_date_full }}
                        </p>
                    </div>

                    <!-- مراحل -->
                    <div class="timeline position-relative mb-4" style="padding-right: 30px;">
                        <div class="step position-relative mb-4 {% if order.order_status in ['pending', 'processing', 'shipped', 'delivered'] %}active{% endif %}">
                            <div class="step-icon position-absolute" style="right: -30px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--success); border: 3px solid white; box-shadow: 0 0 0 2px var(--success);"></div>
                            <div class="step-content">
                                <h6 class="mb-0">ثبت سفارش</h6>
                                <small class="text-muted">{{ order.created_at|jalali_date_full }}</small>
                            </div>
                        </div>
                        
                        <div class="step position-relative mb-4 {% if order.order_status in ['processing', 'shipped', 'delivered'] %}active{% endif %}">
                            <div class="step-icon position-absolute" style="right: -30px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: {% if order.order_status in ['processing', 'shipped', 'delivered'] %}var(--success){% else %}var(--gray-300){% endif %}; border: 3px solid white; box-shadow: 0 0 0 2px {% if order.order_status in ['processing', 'shipped', 'delivered'] %}var(--success){% else %}var(--gray-300){% endif %};"></div>
                            <div class="step-content">
                                <h6 class="mb-0">تایید و پردازش</h6>
                                {% if order.order_status in ['processing', 'shipped', 'delivered'] %}
                                    <small class="text-muted">تایید شده</small>
                                {% else %}
                                    <small class="text-muted">در انتظار تایید</small>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="step position-relative mb-4 {% if order.order_status in ['shipped', 'delivered'] %}active{% endif %}">
                            <div class="step-icon position-absolute" style="right: -30px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: {% if order.order_status in ['shipped', 'delivered'] %}var(--success){% else %}var(--gray-300){% endif %}; border: 3px solid white; box-shadow: 0 0 0 2px {% if order.order_status in ['shipped', 'delivered'] %}var(--success){% else %}var(--gray-300){% endif %};"></div>
                            <div class="step-content">
                                <h6 class="mb-0">ارسال</h6>
                                {% if order.order_status in ['shipped', 'delivered'] %}
                                    <small class="text-muted">ارسال شده</small>
                                    {% if order.tracking_code %}
                                        <br><small class="text-primary">کد رهگیری: {{ order.tracking_code }}</small>
                                    {% endif %}
                                {% else %}
                                    <small class="text-muted">در انتظار ارسال</small>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="step position-relative {% if order.order_status == 'delivered' %}active{% endif %}">
                            <div class="step-icon position-absolute" style="right: -30px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: {% if order.order_status == 'delivered' %}var(--success){% else %}var(--gray-300){% endif %}; border: 3px solid white; box-shadow: 0 0 0 2px {% if order.order_status == 'delivered' %}var(--success){% else %}var(--gray-300){% endif %};"></div>
                            <div class="step-content">
                                <h6 class="mb-0">تحویل</h6>
                                {% if order.order_status == 'delivered' %}
                                    <small class="text-muted">تحویل داده شد ✓</small>
                                {% else %}
                                    <small class="text-muted">در انتظار تحویل</small>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- اطلاعات سفارش -->
                    <div class="row g-3 mt-4">
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded">
                                <small class="text-muted d-block">مبلغ کل</small>
                                <strong>{{ order.final_amount|persian_price }} تومان</strong>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded">
                                <small class="text-muted d-block">روش پرداخت</small>
                                <strong>
                                    {% if order.payment_method == 'online' %}
                                        <i class="fas fa-credit-card text-primary"></i> آنلاین
                                    {% elif order.payment_method == 'cod' %}
                                        <i class="fas fa-money-bill-wave text-success"></i> در محل
                                    {% else %}
                                        {{ order.payment_method }}
                                    {% endif %}
                                </strong>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded">
                                <small class="text-muted d-block">وضعیت پرداخت</small>
                                <strong>
                                    {% if order.payment_status == 'paid' %}
                                        <span class="text-success">پرداخت شده ✓</span>
                                    {% elif order.payment_status == 'pending' %}
                                        <span class="text-warning">در انتظار پرداخت</span>
                                    {% else %}
                                        {{ order.payment_status }}
                                    {% endif %}
                                </strong>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded">
                                <small class="text-muted d-block">تاریخ ثبت</small>
                                <strong>{{ order.created_at|jalali_date_full }}</strong>
                            </div>
                        </div>
                    </div>

                    <!-- لیست محصولات -->
                    <div class="mt-4">
                        <h6 class="mb-3">محصولات سفارش</h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>محصول</th>
                                        <th>تعداد</th>
                                        <th>قیمت</th>
                                        <th>جمع</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in order.items %}
                                        <tr>
                                            <td>{{ item.product_title }}</td>
                                            <td>{{ item.quantity|persian_number }}</td>
                                            <td>{{ item.price|persian_price }} تومان</td>
                                            <td>{{ item.total|persian_price }} تومان</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- آدرس -->
                    <div class="mt-4">
                        <h6 class="mb-2">آدرس تحویل</h6>
                        <div class="p-3 bg-light rounded">
                            <p class="mb-0">{{ order.full_name }}</p>
                            <p class="mb-0">{{ order.phone }}</p>
                            <p class="mb-0">{{ order.address }}</p>
                            {% if order.city %}
                                <p class="mb-0">شهر: {{ order.city }}</p>
                            {% endif %}
                            {% if order.postal_code %}
                                <p class="mb-0">کد پستی: {{ order.postal_code }}</p>
                            {% endif %}
                            {% if order.tracking_code %}
                                <p class="mb-0 text-primary">کد رهگیری: {{ order.tracking_code }}</p>
                            {% endif %}
                        </div>
                    </div>

                    <!-- دکمه‌ها -->
                    <div class="mt-4 text-center">
                        <a href="{{ url_for('profile') }}" class="btn btn-outline-primary">
                            <i class="fas fa-arrow-right me-2"></i> بازگشت به پروفایل
                        </a>
                        <a href="{{ url_for('products') }}" class="btn btn-primary">
                            <i class="fas fa-shopping-bag me-2"></i> ادامه خرید
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.timeline .step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 20px;
    width: 2px;
    height: calc(100% - 10px);
    background: var(--gray-300);
}
.timeline .step.active:not(:last-child)::after {
    background: var(--success);
}
.timeline .step .step-icon {
    z-index: 1;
}
.timeline .step .step-content {
    padding-bottom: 5px;
}
</style>
{% endblock %}