{% extends 'cars/base.html' %}
{% load custom_filters %}

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

{% block content %}
<div class="page-header">
    <h1>جزئیات بازرسی</h1>
    <p>مشاهده کامل اطلاعات بازرسی</p>
</div>

<div class="card">
    <div class="card-header">
        <h2>اطلاعات خودرو</h2>
    </div>
    <div class="card-body">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">
            <div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">شماره بدنه:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.car.chassis_number }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">مدل:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.car.model }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">نوع:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.car.car_type }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">رنگ:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.car.color }}</span>
                </div>
            </div>
            <div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">مالک:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.car.owner_name }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">شماره پلاک:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.car.plate_number }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">شماره موتور:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.car.engine_number }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">ظرفیت:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.car.capacity }} نفر</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>نتایج بازرسی</h2>
    </div>
    <div class="card-body">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">
            <div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">بازرس:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.inspector.get_full_name }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">تاریخ بازرسی:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.inspection_date|date:"Y/m/d" }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">ساعت بازرسی:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.inspection_time }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">نتیجه کلی:</span>
                    <span>
                        <span class="status-badge status-{{ inspection.overall_status }}">
                            {{ inspection.get_overall_status_display }}
                        </span>
                    </span>
                </div>
            </div>
            <div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">قیمت پایه:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.base_price|floatformat:0 }} ریال</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">مجموع کسری:</span>
                    <span style="color: var(--dark-text-secondary);">{{ inspection.total_deduction|floatformat:0 }} ریال</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--dark-border);">
                    <span style="font-weight: 500; color: var(--dark-text);">قیمت نهایی:</span>
                    <span style="color: var(--success); font-weight: 600;">{{ inspection.final_price|floatformat:0 }} ریال</span>
                </div>
            </div>
        </div>

        {% if missing_items %}
        <div class="form-group">
            <label class="form-label">اقلام مفقودی:</label>
            <table class="table">
                <thead>
                    <tr>
                        <th>نام قلم</th>
                        <th>قیمت</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in missing_items %}
                    <tr>
                        <td>{{ item.item.name }}</td>
                        <td>{{ item.item_price|floatformat:0 }} ریال</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}

        {% if inspection.notes %}
        <div class="form-group">
            <label class="form-label">توضیحات بازرس:</label>
            <div style="background: var(--dark-border); padding: 1rem; border-radius: 8px; margin-top: 0.5rem;">
                {{ inspection.notes|linebreaks }}
            </div>
        </div>
        {% endif %}
    </div>
</div>

<div style="text-align: center; margin-top: 2rem;">
    <a href="{% url 'inspection_list' %}" class="btn btn-secondary">بازگشت به تاریخچه</a>
</div>
{% endblock %}