{% 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 bg-gradient-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-1"><i class="fas fa-clipboard-check me-2"></i>فرم بازرسی فنی خودرو</h4>
                            <p class="mb-0 opacity-8">پلاک: <strong>{{ car.plate_number }}</strong> | مالک: <strong>{{ car.owner_name }}</strong></p>
                        </div>
                        <div class="text-end">
                            <span class="badge bg-light text-primary fs-6">{{ car.get_status_display }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- ستون سمت چپ - فرم بازرسی -->
                <div class="col-lg-8">
                    <!-- اطلاعات خودرو -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-car me-2 text-primary"></i>مشخصات خودرو</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <tbody>
                                        <tr>
                                            <td width="30%" class="bg-light fw-bold">مالک خودرو</td>
                                            <td>{{ car.owner_name }}</td>
                                            <td width="30%" class="bg-light fw-bold">نوع خودرو</td>
                                            <td>
                                                {% if car.car_type %}
                                                    {{ car.car_type.type_name }}
                                                {% else %}
                                                    <span class="text-muted">تعریف نشده</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="bg-light fw-bold">شماره پلاک</td>
                                            <td>{{ car.plate_number }}</td>
                                            <td class="bg-light fw-bold">شماره VIN</td>
                                            <td class="font-monospace ltr-text">{{ car.vin }}</td>
                                        </tr>
                                        <tr>
                                            <td class="bg-light fw-bold">مدل</td>
                                            <td>{{ car.model }}</td>
                                            <td class="bg-light fw-bold">رنگ</td>
                                            <td>{{ car.color }}</td>
                                        </tr>
                                        <tr>
                                            <td class="bg-light fw-bold">قیمت پایه</td>
                                            <td colspan="3" class="text-success fw-bold">{{ car.base_price|floatformat:0 }} ریال</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- فرم بازرسی -->
                    <form method="POST" id="inspectionForm">
                        {% csrf_token %}
                        
                        <!-- آیتم‌های مفقوده -->
                        <div class="card mb-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">
                                    <i class="fas fa-list-check me-2 text-warning"></i>
                                    انتخاب آیتم‌های مفقوده و معیوب
                                </h5>
                                <span class="badge bg-primary fs-6">
                                    {{ car_items.count }} آیتم موجود
                                </span>
                            </div>
                            <div class="card-body">
                                {% if car_items %}
                                <div class="table-responsive">
                                    <table class="table table-hover table-striped">
                                        <thead class="table-dark">
                                            <tr>
                                                <th width="5%">انتخاب</th>
                                                <th width="60%">نام آیتم</th>
                                                <th width="35%">دسته‌بندی</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for item in car_items %}
                                            <tr class="item-row" data-item-id="{{ item.id }}">
                                                <td>
                                                    <div class="form-check">
                                                        <input type="checkbox" 
                                                               id="item_{{ item.id }}" 
                                                               name="missing_item_{{ item.id }}"
                                                               value="{{ item.id }}"
                                                               class="form-check-input item-checkbox">
                                                    </div>
                                                </td>
                                                <td>
                                                    <label for="item_{{ item.id }}" class="form-check-label fw-medium item-name">
                                                        {{ item.name }}
                                                    </label>
                                                </td>
                                                <td>
                                                    <span class="badge {% if item.category == 'essential' %}bg-danger{% else %}bg-warning text-dark{% endif %}">
                                                        {{ item.get_category_display }}
                                                    </span>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                {% else %}
                                <div class="alert alert-warning text-center">
                                    <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
                                    <h6>هیچ آیتمی برای این نوع خودرو تعریف نشده است</h6>
                                    <p class="mb-0 text-muted">لطفاً با مدیر سیستم تماس بگیرید</p>
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- وضعیت کلی بازرسی -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-clipboard-list me-2 text-info"></i>
                                    نتیجه نهایی بازرسی
                                    <span class="text-danger">*</span>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-check card h-100 border-2">
                                            <input class="form-check-input" type="radio" name="overall_status" id="status_approved" value="approved" required>
                                            <label class="form-check-label card-body text-center" for="status_approved">
                                                <div class="status-content">
                                                    <i class="fas fa-check-circle text-success fa-3x mb-3"></i>
                                                    <h5 class="fw-bold text-success">تایید شده</h5>
                                                    <p class="text-muted mb-0">خودرو از نظر فنی قابل قبول است</p>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-check card h-100 border-2">
                                            <input class="form-check-input" type="radio" name="overall_status" id="status_rejected" value="rejected" required>
                                            <label class="form-check-label card-body text-center" for="status_rejected">
                                                <div class="status-content">
                                                    <i class="fas fa-times-circle text-danger fa-3x mb-3"></i>
                                                    <h5 class="fw-bold text-danger">رد شده</h5>
                                                    <p class="text-muted mb-0">خودرو مشکلات فنی جدی دارد</p>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- توضیحات -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-comment-dots me-2 text-success"></i>
                                    توضیحات و یادداشت‌های فنی
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <textarea class="form-control" name="notes" rows="5" 
                                              placeholder="شرح کامل وضعیت فنی خودرو شامل:
• وضعیت بدنه و رنگ
• شرایط موتور و سیستم تعلیق
• عملکرد ترمزها و سیستم برقی
• سایر موارد قابل توجه..."></textarea>
                                    <div class="form-text text-muted mt-2">
                                        <i class="fas fa-info-circle me-1"></i>
                                        توضیحات دقیق به فرآیند ارزیابی کمک می‌کند
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- ستون سمت راست - خلاصه و اقدامات -->
                <div class="col-lg-4">
                    <!-- خلاصه آیتم‌های انتخاب شده -->
                    <div class="card mb-4">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0">
                                <i class="fas fa-clipboard-list me-2"></i>
                                آیتم‌های انتخاب شده
                                <span id="selectedCount" class="badge bg-dark">0</span>
                            </h5>
                        </div>
                        <div class="card-body p-0">
                            <div id="selectedItemsList" class="selected-items-container" style="max-height: 300px; overflow-y: auto;">
                                <div class="empty-state text-center py-5">
                                    <i class="fas fa-clipboard fa-2x text-muted mb-3"></i>
                                    <p class="text-muted mb-0">هنوز آیتمی انتخاب نشده است</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- آمار و خلاصه -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-chart-bar me-2 text-info"></i>خلاصه آماری</h5>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-4">
                                    <div class="border-end">
                                        <div class="text-primary fw-bold fs-4" id="totalItemsCount">{{ car_items.count }}</div>
                                        <div class="text-muted small">کل آیتم‌ها</div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="border-end">
                                        <div class="text-warning fw-bold fs-4" id="essentialItemsCount">
                                            {% with essential_count=car_items|dictsort:"category" %}
                                                {% for item in car_items %}
                                                    {% if item.category == "essential" %}
                                                        {% if forloop.first %}
                                                            {{ forloop.revcounter0|add:1 }}
                                                        {% endif %}
                                                    {% endif %}
                                                {% endfor %}
                                            {% endwith %}
                                        </div>
                                        <div class="text-muted small">ضروری</div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-success fw-bold fs-4" id="optionalItemsCount">
                                        {% with optional_count=car_items|dictsort:"category" %}
                                            {% for item in car_items %}
                                                {% if item.category == "optional" %}
                                                    {% if forloop.first %}
                                                        {{ forloop.revcounter0|add:1 }}
                                                    {% endif %}
                                                {% endif %}
                                            {% endfor %}
                                        {% endwith %}
                                    </div>
                                    <div class="text-muted small">اختیاری</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- دکمه‌های اقدام -->
                    <div class="card">
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <button type="submit" form="inspectionForm" class="btn btn-success btn-lg py-3">
                                    <i class="fas fa-check-double me-2"></i>
                                    ثبت نهایی بازرسی
                                </button>
                                <a href="{% url 'inspection_list' %}" class="btn btn-outline-secondary btn-lg py-3">
                                    <i class="fas fa-arrow-right me-2"></i>
                                    بازگشت به لیست
                                </a>
                            </div>
                            <div class="text-center mt-3">
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>
                                    زمان تقریبی: ۱۵ دقیقه
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

/* استایل برای ردیف‌های جدول آیتم‌ها */
.item-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.item-row:hover {
    background-color: #f8f9fa !important;
    transform: translateY(-1px);
}

.item-row.selected {
    background-color: #e3f2fd !important;
    border-left: 4px solid #2196F3;
}

/* استایل برای لیست آیتم‌های انتخاب شده */
.selected-items-container {
    border-radius: 0 0 0.375rem 0.375rem;
}

.selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.2s ease;
}

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

.selected-item:hover {
    background-color: #f8f9fa;
}

.selected-item-info {
    flex: 1;
}

.selected-item-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #2c3e50;
}

.selected-item-category {
    font-size: 0.75rem;
}

.empty-state {
    color: #6c757d;
}

/* استایل برای وضعیت‌های بازرسی */
.form-check-input:checked + .card {
    border-color: #198754 !important;
    background-color: rgba(25, 135, 84, 0.05);
}

.form-check-input[value="rejected"]:checked + .card {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.05);
}

/* اسکرول بار سفارشی */
.selected-items-container::-webkit-scrollbar {
    width: 6px;
}

.selected-items-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.selected-items-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.selected-items-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>
{% endblock %}

{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const itemRows = document.querySelectorAll('.item-row');
    const selectedItemsList = document.getElementById('selectedItemsList');
    const selectedCount = document.getElementById('selectedCount');
    
    // محاسبه تعداد آیتم‌های ضروری و اختیاری
    function calculateCategoryCounts() {
        let essentialCount = 0;
        let optionalCount = 0;
        
        itemRows.forEach(row => {
            const categoryBadge = row.querySelector('.badge');
            if (categoryBadge.classList.contains('bg-danger')) {
                essentialCount++;
            } else if (categoryBadge.classList.contains('bg-warning')) {
                optionalCount++;
            }
        });
        
        document.getElementById('essentialItemsCount').textContent = essentialCount;
        document.getElementById('optionalItemsCount').textContent = optionalCount;
    }
    
    // مدیریت انتخاب آیتم‌ها
    itemRows.forEach(row => {
        const checkbox = row.querySelector('.item-checkbox');
        const itemId = row.dataset.itemId;
        const itemName = row.querySelector('.item-name').textContent;
        const itemCategory = row.querySelector('.badge').textContent;
        const categoryClass = row.querySelector('.badge').className;
        
        // کلیک روی ردیف
        row.addEventListener('click', function(e) {
            if (e.target.type !== 'checkbox') {
                checkbox.checked = !checkbox.checked;
            }
            updateRowSelection(row, checkbox.checked);
            updateSelectedItemsList(itemId, itemName, itemCategory, categoryClass, checkbox.checked);
            updateSelectedCount();
        });
        
        // تغییر مستقیم چک‌باکس
        checkbox.addEventListener('change', function() {
            updateRowSelection(row, this.checked);
            updateSelectedItemsList(itemId, itemName, itemCategory, categoryClass, this.checked);
            updateSelectedCount();
        });
    });
    
    function updateRowSelection(row, isSelected) {
        row.classList.toggle('selected', isSelected);
    }
    
    function updateSelectedItemsList(itemId, itemName, itemCategory, categoryClass, isSelected) {
        const existingItem = document.getElementById(`selected-item-${itemId}`);
        
        if (isSelected && !existingItem) {
            // اضافه کردن آیتم جدید به لیست
            const selectedItem = document.createElement('div');
            selectedItem.className = 'selected-item';
            selectedItem.id = `selected-item-${itemId}`;
            selectedItem.innerHTML = `
                <div class="selected-item-info">
                    <div class="selected-item-name">${itemName}</div>
                    <div class="selected-item-details">
                        <span class="selected-item-category badge ${categoryClass}">${itemCategory}</span>
                    </div>
                </div>
                <div class="selected-item-actions">
                    <button type="button" class="btn btn-outline-danger btn-sm remove-item" data-item-id="${itemId}" title="حذف">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;
            
            // حذف حالت خالی اگر وجود دارد
            const emptyState = selectedItemsList.querySelector('.empty-state');
            if (emptyState) {
                emptyState.remove();
            }
            
            selectedItemsList.appendChild(selectedItem);
            
            // اضافه کردن event listener برای دکمه حذف
            selectedItem.querySelector('.remove-item').addEventListener('click', function(e) {
                e.stopPropagation();
                const itemRow = document.querySelector(`.item-row[data-item-id="${itemId}"]`);
                const checkbox = itemRow.querySelector('.item-checkbox');
                checkbox.checked = false;
                updateRowSelection(itemRow, false);
                selectedItem.remove();
                updateSelectedCount();
                
                // نمایش حالت خالی اگر آیتمی وجود ندارد
                if (selectedItemsList.children.length === 0) {
                    showEmptyState();
                }
            });
        } else if (!isSelected && existingItem) {
            // حذف آیتم از لیست
            existingItem.remove();
            
            // نمایش حالت خالی اگر آیتمی وجود ندارد
            if (selectedItemsList.children.length === 0) {
                showEmptyState();
            }
        }
    }
    
    function showEmptyState() {
        selectedItemsList.innerHTML = `
            <div class="empty-state text-center py-5">
                <i class="fas fa-clipboard fa-2x text-muted mb-3"></i>
                <p class="text-muted mb-0">هنوز آیتمی انتخاب نشده است</p>
            </div>
        `;
    }
    
    function updateSelectedCount() {
        const selectedItems = document.querySelectorAll('.item-checkbox:checked');
        selectedCount.textContent = selectedItems.length;
    }
    
    // اعتبارسنجی فرم
    const form = document.getElementById('inspectionForm');
    
    form.addEventListener('submit', function(e) {
        const statusSelected = document.querySelector('input[name="overall_status"]:checked');
        const selectedItems = document.querySelectorAll('.item-checkbox:checked');
        
        if (!statusSelected) {
            e.preventDefault();
            showAlert('لطفاً نتیجه کلی بازرسی را انتخاب کنید.', 'warning');
            return;
        }
        
        let confirmMessage = '';
        if (selectedItems.length > 0) {
            confirmMessage = `آیا از ثبت ${selectedItems.length} آیتم مفقوده اطمینان دارید؟`;
        } else {
            confirmMessage = 'آیا از ثبت بازرسی بدون آیتم مفقوده اطمینان دارید؟';
        }
        
        if (!confirm(confirmMessage)) {
            e.preventDefault();
        }
    });
    
    function showAlert(message, type) {
        // ایجاد alert داینامیک
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            <i class="fas fa-exclamation-triangle me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        // اضافه کردن alert به بالای صفحه
        const container = document.querySelector('.container-fluid');
        container.insertBefore(alertDiv, container.firstChild);
        
        // حذف خودکار بعد از 5 ثانیه
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }
    
    // محاسبه اولیه تعداد دسته‌بندی‌ها
    calculateCategoryCounts();
    updateSelectedCount();
});
</script>
{% endblock %}