{% extends 'base.html' %}

{% block title %}

{% if asset %}
ویرایش تجهیز
{% else %}
افزودن تجهیز
{% endif %}

{% endblock %}


{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">

    <div>

        <h2 class="fw-bold mb-1">

            {% if asset %}
            ویرایش تجهیز
            {% else %}
            افزودن تجهیز جدید
            {% endif %}

        </h2>

        <p class="text-muted mb-0">
            اطلاعات کامل تجهیز IT را ثبت کنید.
        </p>

    </div>


    <a href="{% url 'asset_list' %}" class="btn btn-outline-secondary">
        ↩ برگشت به فهرست
    </a>

</div>


<div class="card border-0 shadow-sm">

    <div class="card-body p-4">


        <!-- پیام خطا -->

        {% if error %}

        <div class="alert alert-danger d-flex align-items-center mb-4" role="alert">

            <i class="bi bi-exclamation-triangle-fill me-2"></i>

            <div>
                {{ error }}
            </div>

        </div>

        {% endif %}


        <form method="post">

            {% csrf_token %}


            <!-- اطلاعات اصلی -->

            <h5 class="fw-bold mb-3">
                💻 اطلاعات اصلی تجهیز
            </h5>


            <div class="row g-3">


                <!-- کد تجهیز -->

                {% if asset %}

                <div class="col-md-6">

                    <label class="form-label fw-bold">
                        کد تجهیز
                    </label>

                    <input type="text" class="form-control" value="{{ asset.asset_code }}" readonly>

                    <small class="text-muted">
                        کد تجهیز توسط سیستم تولید شده و قابل تغییر نیست.
                    </small>

                </div>

                {% endif %}


                <!-- نام -->

                <div class="col-md-6">

                    <label class="form-label fw-bold">
                        نام تجهیز
                    </label>

                    <input type="text" name="name" class="form-control"
                        value="{% if asset %}{{ asset.name }}{% elif form_data %}{{ form_data.name }}{% endif %}"
                        placeholder="مثلاً Computer" required>

                </div>


                <!-- دسته -->

                <div class="col-md-6">

                    <label class="form-label fw-bold">
                        دسته تجهیزات
                    </label>

                    <select name="category" class="form-select" required>

                        <option value="">
                            انتخاب دسته تجهیزات
                        </option>

                        {% for category in categories %}

                        <option value="{{ category.id }}" {% if asset and asset.category_id == category.id %} selected {%
                            elif form_data and form_data.category == category.id|stringformat:"s" %} selected {% endif %}>

                            {{ category.code }} - {{ category.name }}

                        </option>

                        {% endfor %}

                    </select>

                </div>


                <!-- مکان -->

                <div class="col-md-6">

                    <label class="form-label fw-bold">
                        مکان
                    </label>

                    <select name="location" class="form-select" required>

                        {% if selected_location and not asset %}

                        <option value="{{ selected_location.id }}" selected>
                            {{ selected_location.code }} -
                            {{ selected_location.name }}
                        </option>

                        {% else %}

                        <option value="">
                            انتخاب مکان
                        </option>

                        {% for facility in facilities %}

                        <option value="{{ facility.id }}" {% if asset and asset.location_id == facility.id %} selected {%
                            elif form_data and form_data.location == facility.id|stringformat:"s" %} selected {% endif %}>

                            {{ facility.code }} -
                            {{ facility.name }}

                        </option>

                        {% endfor %}

                        {% endif %}

                    </select>

                </div>


                <!-- برند -->

                <div class="col-md-4">

                    <label class="form-label fw-bold">
                        برند
                    </label>

                    <input type="text" name="brand" class="form-control"
                        value="{% if asset %}{{ asset.brand }}{% elif form_data %}{{ form_data.brand }}{% endif %}"
                        placeholder="مثلاً HP">

                </div>


                <!-- مدل -->

                <div class="col-md-4">

                    <label class="form-label fw-bold">
                        مدل
                    </label>

                    <input type="text" name="model" class="form-control"
                        value="{% if asset %}{{ asset.model }}{% elif form_data %}{{ form_data.model }}{% endif %}"
                        placeholder="مثلاً ProDesk">

                </div>


                <!-- سریال -->

                <div class="col-md-4">

                    <label class="form-label fw-bold">
                        شماره سریال
                    </label>

                    <input type="text" name="serial_number" class="form-control"
                        value="{% if asset %}{{ asset.serial_number }}{% elif form_data %}{{ form_data.serial_number }}{% endif %}"
                        placeholder="Serial Number">

                </div>


                <!-- تعداد -->

                <div class="col-md-4">

                    <label class="form-label fw-bold">
                        تعداد
                    </label>

                    <input type="number" name="quantity" class="form-control"
                        value="{% if asset %}{{ asset.quantity }}{% elif form_data %}{{ form_data.quantity }}{% else %}1{% endif %}"
                        min="1" required>

                </div>


            </div>


            <hr class="my-4">


            <!-- وضعیت تجهیز -->

            <h5 class="fw-bold mb-3">
                📊 وضعیت تجهیز
            </h5>


            <div class="row g-3">


                <!-- حالت -->

                <div class="col-md-6">

                    <label class="form-label fw-bold">
                        حالت تجهیز
                    </label>

                    <select name="condition" class="form-select">

                        {% for value, label in condition_choices %}

                        <option value="{{ value }}" {% if asset and asset.condition == value %} selected {% elif not asset
                            and form_data and form_data.condition == value %} selected {% elif not asset and not form_data
                            and value == 'GOOD' %} selected {% endif %}>

                            {{ label }}

                        </option>

                        {% endfor %}

                    </select>

                </div>


                <!-- وضعیت -->

                <div class="col-md-6">

                    <label class="form-label fw-bold">
                        وضعیت تجهیز
                    </label>

                    <select name="status" class="form-select">

                        {% for value, label in status_choices %}

                        <option value="{{ value }}" {% if asset and asset.status == value %} selected {% elif not asset
                            and form_data and form_data.status == value %} selected {% elif not asset and not form_data
                            and value == 'ACTIVE' %} selected {% endif %}>

                            {{ label }}

                        </option>

                        {% endfor %}

                    </select>

                </div>


            </div>


            <hr class="my-4">


            <!-- اطلاعات خرید -->

            <h5 class="fw-bold mb-3">
                💰 اطلاعات خرید و گارانتی
            </h5>


            <div class="row g-3">


                <!-- تاریخ خرید -->

                <div class="col-md-4">

                    <label class="form-label fw-bold">
                        تاریخ خرید
                    </label>

                    <input type="date" name="purchase_date" class="form-control"
                        value="{% if asset and asset.purchase_date %}{{ asset.purchase_date|date:'Y-m-d' }}{% elif form_data %}{{ form_data.purchase_date }}{% endif %}">

                </div>


                <!-- قیمت -->

                <div class="col-md-4">

                    <label class="form-label fw-bold">
                        قیمت خرید
                    </label>

                    <input type="number" name="purchase_price" class="form-control" min="0" step="0.01"
                        value="{% if asset and asset.purchase_price %}{{ asset.purchase_price }}{% elif form_data %}{{ form_data.purchase_price }}{% endif %}"
                        placeholder="0.00">

                </div>


                <!-- گارانتی -->

                <div class="col-md-4">

                    <label class="form-label fw-bold">
                        تاریخ ختم گارانتی
                    </label>

                    <input type="date" name="warranty_expiry" class="form-control"
                        value="{% if asset and asset.warranty_expiry %}{{ asset.warranty_expiry|date:'Y-m-d' }}{% elif form_data %}{{ form_data.warranty_expiry }}{% endif %}">

                </div>


            </div>


            <hr class="my-4">


            <!-- توضیحات -->

            <h5 class="fw-bold mb-3">
                📝 توضیحات
            </h5>

            <textarea name="description" class="form-control" rows="4"
                placeholder="توضیحات مربوط به تجهیز...">{% if asset %}{{ asset.description }}{% elif form_data %}{{ form_data.description }}{% endif %}</textarea>


            <hr class="my-4">


            <!-- دکمه‌ها -->

            <div class="d-flex gap-2">

                <button type="submit" class="btn btn-primary px-4">

                    {% if asset %}

                    💾 ذخیره تغییرات

                    {% else %}

                    💾 ثبت تجهیز

                    {% endif %}

                </button>


                <a href="{% url 'asset_list' %}" class="btn btn-outline-secondary px-4">
                    انصراف
                </a>

            </div>

            <hr class="my-4">

            <!-- مشخصات تخنیکی -->
            <h5 class="fw-bold mb-3">
                ⚙️ مشخصات تخنیکی تجهیز
            </h5>

            <div id="specifications-container">

                <div class="row g-3 specification-row mb-2">

                    <!-- مشخصه -->
                    <div class="col-md-5">
                        <label class="form-label">
                            مشخصه
                        </label>

                        <input type="text" name="spec_key[]" class="form-control" placeholder="مثلاً RAM">
                    </div>

                    <!-- مقدار -->
                    <div class="col-md-5">
                        <label class="form-label">
                            مقدار
                        </label>

                        <input type="text" name="spec_value[]" class="form-control" placeholder="مثلاً 8GB">
                    </div>

                    <!-- حذف -->
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" class="btn btn-outline-danger w-100 remove-spec">
                            🗑️ حذف
                        </button>
                    </div>

                </div>

            </div>

            <!-- افزودن مشخصه -->
            <!-- مشخصات تخنیکی -->
            ...
            <div class="mt-3">
                <button type="button" id="add-spec" class="btn btn-outline-primary">
                    ➕ افزودن مشخصه
                </button>
            </div>

            <hr class="my-4">

            <!-- دکمه‌ها -->
            <div class="d-flex gap-2">

                <button type="submit" class="btn btn-primary px-4">
                    {% if asset %}
                    💾 ذخیره تغییرات
                    {% else %}
                    💾 ثبت تجهیز
                    {% endif %}
                </button>

                <a href="{% url 'asset_list' %}" class="btn btn-outline-secondary px-4">
                    انصراف
                </a>

            </div>




        </form>

    </div>

</div>


<script>
document.addEventListener('DOMContentLoaded', function () {

    const container = document.getElementById('specifications-container');
    const addButton = document.getElementById('add-spec');

    // افزودن ردیف جدید
    addButton.addEventListener('click', function () {

        const row = document.createElement('div');

        row.className = 'row g-3 specification-row mb-2';

        row.innerHTML = `
            <div class="col-md-5">

                <input
                    type="text"
                    name="spec_key[]"
                    class="form-control"
                    placeholder="مثلاً CPU"
                >

            </div>

            <div class="col-md-5">

                <input
                    type="text"
                    name="spec_value[]"
                    class="form-control"
                    placeholder="مثلاً Core i5"
                >

            </div>

            <div class="col-md-2">

                <button
                    type="button"
                    class="btn btn-outline-danger w-100 remove-spec"
                >
                    🗑️ حذف
                </button>

            </div>
        `;

        container.appendChild(row);

    });


    // حذف ردیف
    container.addEventListener('click', function (event) {

        if (event.target.classList.contains('remove-spec')) {

            const row = event.target.closest('.specification-row');

            row.remove();

        }

    });

});
</script>
{% endblock %}