{% 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">
        <form method="POST">
            {% csrf_token %}
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">نام قلم <span style="color: var(--danger);">*</span></label>
                    <input type="text" class="form-control" name="name" required>
                </div>
                <div class="form-group">
                    <label class="form-label">دسته‌بندی <span style="color: var(--danger);">*</span></label>
                    <select class="form-control" name="category" required>
                        <option value="essential">ضروری</option>
                        <option value="optional">اختیاری</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">قیمت (ریال) <span style="color: var(--danger);">*</span></label>
                    <input type="number" class="form-control" name="price" min="0" step="1000" required>
                </div>
                <div class="form-group">
                    <label class="form-label">نوع خودرو</label>
                    <input type="text" class="form-control" name="car_type" value="general">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">
                    <input type="checkbox" name="is_active" checked> فعال
                </label>
            </div>
            <button type="submit" class="btn btn-success">افزودن قلم</button>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>لیست اقلام</h2>
    </div>
    <div class="card-body">
        {% if items %}
            <table class="table">
                <thead>
                    <tr>
                        <th>ردیف</th>
                        <th>نام قلم</th>
                        <th>دسته‌بندی</th>
                        <th>قیمت</th>
                        <th>نوع خودرو</th>
                        <th>وضعیت</th>
                        <th>عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ item.name }}</td>
                        <td>
                            {% if item.category == 'essential' %}
                                <span style="color: var(--danger); font-weight: 500;">ضروری</span>
                            {% else %}
                                <span style="color: var(--warning); font-weight: 500;">اختیاری</span>
                            {% endif %}
                        </td>
                        <td>{{ item.price|floatformat:0 }} ریال</td>
                        <td>
                            <span style="background: var(--info); color: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem;">
                                {{ item.car_type }}
                            </span>
                        </td>
                        <td>
                            {% if item.is_active %}
                                <span class="status-badge status-approved">فعال</span>
                            {% else %}
                                <span class="status-badge status-rejected">غیرفعال</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'edit_item' item.id %}" class="btn btn-primary btn-sm">ویرایش</a>
                            <a href="{% url 'delete_item' item.id %}" class="btn btn-danger btn-sm" onclick="return confirm('آیا از حذف این قلم مطمئن هستید؟')">حذف</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="empty-state">
                <p>هیچ قلمی ثبت نشده است</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}