{% extends "base.html" %}

{% block content %}
<div class="max-w-4xl mx-auto space-y-6">
    
    <!-- Header -->
    <div class="flex justify-between items-center bg-white/60 backdrop-blur p-4 rounded-xl border border-white/50 sticky top-20 z-10">
        <div>
            <h2 class="text-xl font-bold text-slate-800 flex items-center gap-2">
                سفارش <span class="font-mono text-blue-600 text-2xl" dir="ltr">{{ order.order_number }}</span>
            </h2>
            <p class="text-sm text-slate-500">ثبت شده در {{ order.created_at_jalali }}</p>
        </div>
        <div class="flex gap-2">
            <button onclick="window.print()" class="btn-secondary">
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                چاپ
            </button>
            <a href="#" class="btn-primary">ویرایش</a>
        </div>
    </div>

    <!-- Order Details Grid -->
    <div class="win-card print:shadow-none print:border-none">
        
        <!-- Section: General -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 pb-6 border-b border-dashed">
            <div>
                <span class="block text-xs text-slate-400 mb-1">مشتری</span>
                <span class="font-bold text-lg">{{ order.customer_name }}</span>
            </div>
            <div>
                <span class="block text-xs text-slate-400 mb-1">برند / محصول</span>
                <span class="font-bold text-lg">{{ order.brand_name }}</span>
            </div>
            <div>
                <span class="block text-xs text-slate-400 mb-1">تعداد سفارش</span>
                <span class="font-bold text-lg">{{ order.order_quantity }}</span>
            </div>
            <div>
                <span class="block text-xs text-slate-400 mb-1">وضعیت فعلی</span>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                    ثبت شده
                </span>
            </div>
        </div>

        <!-- Section: Carton Info -->
        <h3 class="font-bold text-slate-800 mb-4 border-r-4 border-orange-500 pr-3">مشخصات فنی</h3>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-y-6 gap-x-4 mb-8 bg-slate-50 p-4 rounded-lg">
            <div>
                <span class="block text-xs text-slate-400">نوع کارتن</span>
                <span class="font-medium">{{ order.carton_type }}</span>
            </div>
            <div>
                <span class="block text-xs text-slate-400">خدمات</span>
                <span class="font-medium">{{ order.service_name }}</span>
            </div>
            <div>
                <span class="block text-xs text-slate-400">ابعاد (ط×ع×ا)</span>
                <span class="font-medium" dir="ltr">{{ order.dim_length }} x {{ order.dim_width }} x {{ order.dim_height }}</span>
            </div>
            <div>
                <span class="block text-xs text-slate-400">تیغ به تیغ</span>
                <span class="font-medium" dir="ltr">{{ order.net_length }} x {{ order.net_width }}</span>
            </div>
            <div>
                <span class="block text-xs text-slate-400">نوع رنگ</span>
                <span class="font-medium">{{ order.color_type }}</span>
            </div>
        </div>

        <!-- Section: Material Info -->
        <h3 class="font-bold text-slate-800 mb-4 border-r-4 border-green-500 pr-3">متریال ({{ order.material_mode }})</h3>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-y-6 gap-x-4">
            <div>
                <span class="block text-xs text-slate-400">ترکیب</span>
                <span class="font-medium">{{ order.material_combo }}</span>
            </div>
            <div>
                <span class="block text-xs text-slate-400">تامین کننده</span>
                <span class="font-medium">{{ order.supplier }}</span>
            </div>
             <div>
                <span class="block text-xs text-slate-400">تعداد متریال</span>
                <span class="font-medium">{{ order.material_qty }}</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}