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

{% block title %}بررسی مالی - {{ car.plate_number }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <div class="page-header">
                <h1><i class="fas fa-calculator"></i> بررسی مالی خودرو</h1>
                <p>پلاک: {{ car.plate_number }} - مالک: {{ car.owner_name }}</p>
            </div>

            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{% if message.tags == 'success' %}success{% else %}danger{% endif %}">
                        <i class="fas fa-{% if message.tags == 'success' %}check-circle{% else %}exclamation-circle{% endif %}"></i>
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}

            <!-- اطلاعات خودرو -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-car"></i> اطلاعات کلی خودرو</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <strong>مالک:</strong>
                                <span>{{ car.owner_name }}</span>
                            </div>
                            <div class="info-item">
                                <strong>پلاک:</strong>
                                <span>{{ car.plate_number }}</span>
                            </div>
                            <div class="info-item">
                                <strong>شماره VIN:</strong>
                                <span class="ltr-text">{{ car.vin }}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <strong>نوع خودرو:</strong>
                                <span>
                                    {% if car.car_type %}
                                        {{ car.car_type.type_name }}
                                    {% else %}
                                        <span class="text-muted">تعریف نشده</span>
                                    {% endif %}
                                </span>
                            </div>
                            <div class="info-item">
                                <strong>مدل:</strong>
                                <span>{{ car.model }}</span>
                            </div>
                            <div class="info-item">
                                <strong>رنگ:</strong>
                                <span>{{ car.color }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <form method="post">
                {% csrf_token %}
                
                <!-- قیمت‌گذاری -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-tag"></i> قیمت‌گذاری پایه</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label class="form-label">قیمت پایه خودرو (ریال)</label>
                            <input type="number" name="car_price" class="form-control" 
                                   value="{{ initial_car_price }}" required min="0" step="1000000">
                            <small class="text-muted">قیمت پایه خودرو قبل از کسر آیتم‌های مفقوده</small>
                        </div>
                    </div>
                </div>

                <!-- آیتم‌های مفقوده -->
                {% if missing_items %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-list-check"></i>
                            آیتم‌های مفقوده (کسورات)
                            <span class="badge bg-warning">{{ missing_items.count }} آیتم</span>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead class="table-dark">
                                    <tr>
                                        <th>نام آیتم</th>
                                        <th>دسته‌بندی</th>
                                        <th>قیمت پیشنهادی (ریال)</th>
                                        <th>قیمت کسر (ریال)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for missing_item in missing_items %}
                                    <tr>
                                        <td>
                                            <strong>{{ missing_item.item.name }}</strong>
                                        </td>
                                        <td>
                                            <span class="badge {% if missing_item.item.category == 'essential' %}bg-danger{% else %}bg-warning{% endif %}">
                                                {{ missing_item.item.get_category_display }}
                                            </span>
                                        </td>
                                        <td class="text-success">
                                            <strong>{{ missing_item.item.price|floatformat:0 }}</strong>
                                        </td>
                                        <td>
                                            <input type="number" 
                                                   name="item_price_{{ missing_item.id }}" 
                                                   class="form-control" 
                                                   value="0" 
                                                   min="0" 
                                                   step="100000"
                                                   placeholder="قیمت کسر را وارد کنید"
                                                   style="min-width: 150px;">
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="alert alert-info mt-3">
                            <i class="fas fa-info-circle"></i>
                            برای هر آیتم مفقوده، قیمت کسر را وارد کنید. این مبلغ از قیمت پایه خودرو کسر خواهد شد.
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-list-check"></i> آیتم‌های مفقوده</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            هیچ آیتم مفقوده‌ای برای این خودرو ثبت نشده است.
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- توضیحات -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-comment-dots"></i> توضیحات</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <textarea name="notes" class="form-control" rows="4" 
                                      placeholder="توضیحات مربوط به بررسی مالی، دلایل قیمت‌گذاری و سایر موارد..."></textarea>
                        </div>
                    </div>
                </div>

                <!-- خلاصه محاسبات -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-calculator"></i> خلاصه محاسبات</h5>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-4">
                                <div class="stat-card">
                                    <div class="stat-number" id="basePrice">0</div>
                                    <div class="stat-label">قیمت پایه</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="stat-card">
                                    <div class="stat-number text-warning" id="totalDeduction">0</div>
                                    <div class="stat-label">مجموع کسورات</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="stat-card">
                                    <div class="stat-number text-success" id="finalPrice">0</div>
                                    <div class="stat-label">قیمت نهایی</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- دکمه‌های اقدام -->
                <div class="form-actions">
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="fas fa-check-circle"></i>
                        ثبت بررسی مالی
                    </button>
                    <a href="{% url 'finance_list' %}" class="btn btn-secondary btn-lg">
                        <i class="fas fa-arrow-right"></i>
                        بازگشت به لیست
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.info-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--dark-border);
}

.info-item:last-child {
    border-bottom: none;
}

.ltr-text {
    direction: ltr;
    text-align: left;
    font-family: monospace;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // محاسبه خودکار قیمت‌ها
    function calculatePrices() {
        const basePrice = parseFloat(document.querySelector('input[name="car_price"]').value) || 0;
        let totalDeduction = 0;
        
        // محاسبه مجموع کسورات
        document.querySelectorAll('input[name^="item_price_"]').forEach(input => {
            totalDeduction += parseFloat(input.value) || 0;
        });
        
        const finalPrice = basePrice - totalDeduction;
        
        // به‌روزرسانی نمایش
        document.getElementById('basePrice').textContent = basePrice.toLocaleString('fa-IR');
        document.getElementById('totalDeduction').textContent = totalDeduction.toLocaleString('fa-IR');
        document.getElementById('finalPrice').textContent = finalPrice.toLocaleString('fa-IR');
        
        // تغییر رنگ قیمت نهایی در صورت منفی شدن
        if (finalPrice < 0) {
            document.getElementById('finalPrice').className = 'stat-number text-danger';
        } else {
            document.getElementById('finalPrice').className = 'stat-number text-success';
        }
    }
    
    // رویداد تغییر برای تمام فیلدهای عددی
    document.querySelector('input[name="car_price"]').addEventListener('input', calculatePrices);
    document.querySelectorAll('input[name^="item_price_"]').forEach(input => {
        input.addEventListener('input', calculatePrices);
    });
    
    // محاسبه اولیه
    calculatePrices();
    
    // اعتبارسنجی فرم
    document.querySelector('form').addEventListener('submit', function(e) {
        const basePrice = parseFloat(document.querySelector('input[name="car_price"]').value) || 0;
        const finalPrice = parseFloat(document.getElementById('finalPrice').textContent.replace(/,/g, '')) || 0;
        
        if (basePrice <= 0) {
            e.preventDefault();
            alert('لطفاً قیمت پایه خودرو را وارد کنید.');
            return;
        }
        
        if (finalPrice < 0) {
            const confirmed = confirm('قیمت نهایی منفی است. آیا از ثبت اطمینان دارید؟');
            if (!confirmed) {
                e.preventDefault();
            }
        }
    });
});
</script>
{% endblock %}