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

{% block title %}بررسی و تایید نهایی - {{ car.plate_number }}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <!-- هدر صفحه -->
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4><i class="fas fa-check-double me-2"></i>بررسی و تایید نهایی</h4>
                            <p class="text-sm mb-0">پلاک: {{ car.plate_number }} - مالک: {{ car.owner_name }}</p>
                        </div>
                        <a href="{% url 'manager_approval_list' %}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-arrow-right me-1"></i>
                            بازگشت به لیست
                        </a>
                    </div>
                </div>
            </div>

            <!-- خلاصه اطلاعات -->
            <div class="row mb-4">
                <div class="col-xl-3 col-md-6 mb-3">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">قیمت پایه</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            {{ car.base_price|floatformat:0 }} ریال
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-primary shadow-primary text-center border-radius-md">
                                        <i class="fas fa-tag text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-3">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">قیمت نهایی</p>
                                        <h5 class="font-weight-bolder mb-0 text-success">
                                            {% with finance=car.finance_reviews.last %}
                                                {{ finance.suggested_price|floatformat:0|default:"0" }} ریال
                                            {% endwith %}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-success shadow-success text-center border-radius-md">
                                        <i class="fas fa-calculator text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-3">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">آیتم مفقوده</p>
                                        <h5 class="font-weight-bolder mb-0 text-info">
                                            {% if inspection %}
                                                {{ inspection.missing_items.count }}
                                            {% else %}
                                                0
                                            {% endif %}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-info shadow-info text-center border-radius-md">
                                        <i class="fas fa-list-check text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-3">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">وضعیت</p>
                                        <h5 class="font-weight-bolder mb-0">
                                            <span class="badge bg-{% if car.status == 'approved' %}success{% elif car.status == 'rejected' %}danger{% else %}warning{% endif %}">
                                                {{ car.get_status_display }}
                                            </span>
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-warning shadow-warning text-center border-radius-md">
                                        <i class="fas fa-info-circle text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- ستون سمت چپ -->
                <div class="col-lg-8">
                    <!-- اطلاعات کلی خودرو -->
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h6><i class="fas fa-car me-2"></i>اطلاعات کلی خودرو</h6>
                        </div>
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-borderless">
                                            <tr>
                                                <td width="40%" class="text-sm font-weight-bold">مالک:</td>
                                                <td class="text-sm">{{ car.owner_name }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm font-weight-bold">پلاک:</td>
                                                <td class="text-sm">{{ car.plate_number }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm font-weight-bold">شماره VIN:</td>
                                                <td class="text-sm font-family-monospace">{{ car.vin }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm font-weight-bold">نوع خودرو:</td>
                                                <td class="text-sm">
                                                    {% if car.car_type %}
                                                        {{ car.car_type.type_name }}
                                                    {% else %}
                                                        <span class="text-muted">ندارد</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-borderless">
                                            <tr>
                                                <td width="40%" class="text-sm font-weight-bold">مدل:</td>
                                                <td class="text-sm">{{ car.model }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm font-weight-bold">رنگ:</td>
                                                <td class="text-sm">{{ car.color }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm font-weight-bold">ظرفیت:</td>
                                                <td class="text-sm">{{ car.capacity }} نفر</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm font-weight-bold">استان:</td>
                                                <td class="text-sm">{{ car.province }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- اطلاعات بازرسی -->
                    {% if inspection %}
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h6><i class="fas fa-clipboard-check me-2"></i>گزارش بازرسی</h6>
                        </div>
                        <div class="card-body p-3">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <p class="text-sm mb-1">
                                        <span class="font-weight-bold">بازرس:</span> 
                                        {{ inspection.inspector.get_full_name|default:inspection.inspector.username }}
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p class="text-sm mb-1">
                                        <span class="font-weight-bold">تاریخ بازرسی:</span> 
                                        {{ inspection.created_at|date:"Y/m/d H:i" }}
                                    </p>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-12">
                                    <p class="text-sm mb-1">
                                        <span class="font-weight-bold">وضعیت بازرسی:</span>
                                        <span class="badge bg-{% if inspection.status == 'approved' %}success{% else %}danger{% endif %}">
                                            {{ inspection.get_status_display }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                            
                            {% if inspection.notes %}
                            <div class="alert alert-info text-sm">
                                <strong><i class="fas fa-sticky-note me-1"></i> توضیحات بازرس:</strong><br>
                                {{ inspection.notes|linebreaks }}
                            </div>
                            {% endif %}

                            {% if missing_items %}
                            <div class="mt-4">
                                <h6 class="text-sm font-weight-bold mb-3">
                                    <i class="fas fa-list-check me-1"></i> 
                                    آیتم‌های مفقوده ({{ missing_items.count }})
                                </h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-striped table-hover align-items-center">
                                        <thead>
                                            <tr>
                                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">#</th>
                                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">نام آیتم</th>
                                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">دسته‌بندی</th>
                                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">قیمت کسر</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for item in missing_items %}
                                            <tr>
                                                <td class="text-sm">{{ forloop.counter }}</td>
                                                <td class="text-sm">{{ item.item.name }}</td>
                                                <td class="text-sm">
                                                    <span class="badge badge-sm {% if item.item.category == 'essential' %}bg-danger{% else %}bg-warning{% endif %}">
                                                        {{ item.item.get_category_display }}
                                                    </span>
                                                </td>
                                                <td class="text-sm text-end">{{ item.item_price|floatformat:0 }} ریال</td>
                                            </tr>
                                            {% endfor %}
                                            <tr class="table-warning">
                                                <td colspan="3" class="text-sm text-end font-weight-bold">جمع کل کسری:</td>
                                                <td class="text-sm text-end font-weight-bold">
                                                    {% with total=missing_items|dictsum:"item_price" %}
                                                        {{ total|floatformat:0 }} ریال
                                                    {% endwith %}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {% else %}
                            <div class="alert alert-success text-sm">
                                <i class="fas fa-check me-1"></i>
                                هیچ آیتم مفقوده‌ای گزارش نشده است.
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}

                    <!-- اطلاعات مالی -->
                    {% if finance_review %}
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h6><i class="fas fa-calculator me-2"></i>گزارش مالی</h6>
                        </div>
                        <div class="card-body p-3">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <p class="text-sm mb-1">
                                        <span class="font-weight-bold">کاربر مالی:</span> 
                                        {{ finance_review.finance_user.get_full_name|default:finance_review.finance_user.username }}
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p class="text-sm mb-1">
                                        <span class="font-weight-bold">تاریخ بررسی:</span> 
                                        {{ finance_review.created_at|date:"Y/m/d H:i" }}
                                    </p>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card bg-gradient-success text-white">
                                        <div class="card-body p-3">
                                            <div class="numbers">
                                                <p class="text-sm mb-0 text-uppercase font-weight-bold">قیمت پیشنهادی نهایی</p>
                                                <h4 class="font-weight-bolder mb-0">
                                                    {{ finance_review.suggested_price|floatformat:0 }} ریال
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            {% if finance_review.notes %}
                            <div class="alert alert-info text-sm mt-3">
                                <strong><i class="fas fa-sticky-note me-1"></i> توضیحات مالی:</strong><br>
                                {{ finance_review.notes|linebreaks }}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                </div>

                <!-- ستون سمت راست - فرم تایید نهایی -->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header pb-0">
                            <h6><i class="fas fa-gavel me-2"></i>تایید نهایی مدیر</h6>
                        </div>
                        <div class="card-body p-3">
                            <form method="post">
                                {% csrf_token %}
                                
                                <div class="form-group mb-4">
                                    <label class="form-label text-sm font-weight-bold">نتیجه نهایی:</label>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-check card">
                                                <input class="form-check-input" type="radio" name="approved" id="approved_true" value="true" required>
                                                <label class="form-check-label card-body text-center p-2" for="approved_true">
                                                    <i class="fas fa-check-circle text-success fa-2x mb-2"></i>
                                                    <h6 class="mb-1">تایید شده</h6>
                                                    <small class="text-muted">خودرو برای فروش تأیید می‌شود</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-check card">
                                                <input class="form-check-input" type="radio" name="approved" id="approved_false" value="false" required>
                                                <label class="form-check-label card-body text-center p-2" for="approved_false">
                                                    <i class="fas fa-times-circle text-danger fa-2x mb-2"></i>
                                                    <h6 class="mb-1">رد شده</h6>
                                                    <small class="text-muted">خودرو رد می‌شود</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="form-label text-sm font-weight-bold">توضیحات مدیر:</label>
                                    <textarea name="notes" class="form-control form-control-sm" rows="4" 
                                              placeholder="دلایل تایید یا رد نهایی، نکات مهم، توصیه‌ها..."></textarea>
                                </div>

                                <div class="d-grid gap-2 mt-4">
                                    <button type="submit" class="btn btn-success btn-lg">
                                        <i class="fas fa-check-double me-1"></i>
                                        ثبت تایید نهایی
                                    </button>
                                    <a href="{% url 'manager_approval_list' %}" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-arrow-right me-1"></i>
                                        بازگشت به لیست
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.font-family-monospace {
    font-family: 'Courier New', monospace;
    direction: ltr;
    text-align: left;
}

.form-check .card {
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
    cursor: pointer;
}

.form-check-input:checked + .card {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.05);
}

.form-check-input:checked + .card.text-danger {
    border-color: #f44336;
    background-color: rgba(244, 67, 54, 0.05);
}

.form-check-input {
    display: none;
}

.card-body small {
    font-size: 0.75rem;
}
</style>
{% endblock %}