{% extends "admin/base_admin.html" %}

{% block title %}ویرایش محصول | {{ site_name }}{% endblock %}

{% block admin_content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">
            <i class="fas fa-edit text-primary me-2"></i>
            ویرایش محصول: {{ product.title }}
        </h1>
        <a href="{{ url_for('admin_products') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-right me-2"></i> بازگشت
        </a>
    </div>

    <form method="POST" action="{{ url_for('admin_product_edit', product_id=product.id) }}" enctype="multipart/form-data">
        <div class="row g-4">
            <div class="col-lg-8">
                <!-- ===== اطلاعات اصلی ===== -->
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i> اطلاعات اصلی</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">عنوان محصول <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control" value="{{ product.title }}" required>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">دسته‌بندی</label>
                                <select name="category_id" class="form-select">
                                    <option value="">انتخاب کنید</option>
                                    {% for category in categories %}
                                        <option value="{{ category.id }}" {% if product.category_id == category.id %}selected{% endif %}>
                                            {{ category.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">برند</label>
                                <select name="brand_id" class="form-select">
                                    <option value="">انتخاب کنید</option>
                                    {% for brand in brands %}
                                        <option value="{{ brand.id }}" {% if product.brand_id == brand.id %}selected{% endif %}>
                                            {{ brand.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">توضیحات کوتاه</label>
                                <input type="text" name="short_description" class="form-control" value="{{ product.short_description }}">
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">توضیحات کامل</label>
                                <textarea name="description" class="form-control" rows="5">{{ product.description }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ===== قیمت و موجودی ===== -->
                <div class="card shadow-sm border-0 mt-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-dollar-sign me-2"></i> قیمت و موجودی</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">قیمت (تومان) <span class="text-danger">*</span></label>
                                <input type="number" name="price" class="form-control" value="{{ product.price }}" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">قیمت مقایسه (تومان)</label>
                                <input type="number" name="compare_price" class="form-control" value="{{ product.compare_price or 0 }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">قیمت تمام شده</label>
                                <input type="number" name="cost_per_item" class="form-control" value="{{ product.cost_per_item or 0 }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">تعداد موجودی <span class="text-danger">*</span></label>
                                <input type="number" name="stock_quantity" class="form-control" value="{{ product.stock_quantity }}" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">کد SKU</label>
                                <input type="text" name="sku" class="form-control" value="{{ product.sku }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">وزن (کیلوگرم)</label>
                                <input type="number" name="weight" class="form-control" step="0.1" value="{{ product.weight or 0 }}">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ===== تخفیف ===== -->
                <div class="card shadow-sm border-0 mt-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-tag me-2"></i> تخفیف</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">درصد تخفیف</label>
                                <input type="number" name="discount_percent" class="form-control" value="{{ product.discount_percent or 0 }}" min="0" max="100">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">تاریخ شروع</label>
                                <input type="datetime-local" name="discount_start" class="form-control" value="{{ product.discount_start.strftime('%Y-%m-%dT%H:%M') if product.discount_start else '' }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">تاریخ پایان</label>
                                <input type="datetime-local" name="discount_end" class="form-control" value="{{ product.discount_end.strftime('%Y-%m-%dT%H:%M') if product.discount_end else '' }}">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ===== سئو ===== -->
                <div class="card shadow-sm border-0 mt-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-search me-2"></i> سئو</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">عنوان سئو</label>
                                <input type="text" name="seo_title" class="form-control" value="{{ product.seo_title }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">توضیحات سئو</label>
                                <textarea name="seo_description" class="form-control" rows="2">{{ product.seo_description }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">کلمات کلیدی سئو</label>
                                <input type="text" name="seo_keywords" class="form-control" value="{{ product.seo_keywords }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- ===== تصاویر ===== -->
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-image me-2"></i> تصاویر</h5>
                    </div>
                    <div class="card-body">
                        <!-- تصاویر موجود -->
                        {% if product.images %}
                            <div class="row g-2 mb-3">
                                {% for image in product.images %}
                                    <div class="col-4">
                                        <div style="position: relative;">
                                            <img src="{{ image.image_url }}" alt="{{ product.title }}" style="width: 100%; height: 80px; object-fit: cover; border-radius: 4px;">
                                            {% if image.is_main %}
                                                <span class="badge bg-primary" style="position: absolute; bottom: 4px; right: 4px; font-size: 9px;">اصلی</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                        
                        <div class="mb-3">
                            <label class="form-label">افزودن تصاویر جدید</label>
                            <input type="file" name="images" class="form-control" accept="image/*" multiple>
                        </div>
                    </div>
                </div>

                <!-- ===== مشخصات فنی ===== -->
                <div class="card shadow-sm border-0 mt-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-list me-2"></i> مشخصات فنی</h5>
                    </div>
                    <div class="card-body">
                        <div id="specs-container">
                            {% for spec in product.specs %}
                                <div class="row g-2 spec-row mb-2">
                                    <div class="col-5">
                                        <input type="text" name="spec_key[]" class="form-control" value="{{ spec.spec_key }}">
                                    </div>
                                    <div class="col-5">
                                        <input type="text" name="spec_value[]" class="form-control" value="{{ spec.spec_value }}">
                                    </div>
                                    <div class="col-2">
                                        <button type="button" class="btn btn-danger btn-sm w-100" onclick="removeSpec(this)">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            {% else %}
                                <div class="row g-2 spec-row">
                                    <div class="col-5">
                                        <input type="text" name="spec_key[]" class="form-control" placeholder="عنوان">
                                    </div>
                                    <div class="col-5">
                                        <input type="text" name="spec_value[]" class="form-control" placeholder="مقدار">
                                    </div>
                                    <div class="col-2">
                                        <button type="button" class="btn btn-danger btn-sm w-100" onclick="removeSpec(this)">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm mt-2" onclick="addSpec()">
                            <i class="fas fa-plus me-1"></i> افزودن مشخصه
                        </button>
                    </div>
                </div>

                <!-- ===== وضعیت ===== -->
                <div class="card shadow-sm border-0 mt-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-toggle-on me-2"></i> وضعیت</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-2">
                            <input type="checkbox" name="is_active" class="form-check-input" id="is_active" {% if product.is_active %}checked{% endif %}>
                            <label class="form-check-label" for="is_active">فعال</label>
                        </div>
                        <div class="form-check mb-2">
                            <input type="checkbox" name="is_featured" class="form-check-input" id="is_featured" {% if product.is_featured %}checked{% endif %}>
                            <label class="form-check-label" for="is_featured">محصول ویژه</label>
                        </div>
                        <div class="form-check mb-2">
                            <input type="checkbox" name="is_new" class="form-check-input" id="is_new" {% if product.is_new %}checked{% endif %}>
                            <label class="form-check-label" for="is_new">محصول جدید</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" name="free_shipping" class="form-check-input" id="free_shipping" {% if product.free_shipping %}checked{% endif %}>
                            <label class="form-check-label" for="free_shipping">ارسال رایگان</label>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary w-100 mt-4">
                    <i class="fas fa-save me-2"></i> ذخیره تغییرات
                </button>
            </div>
        </div>
    </form>
</div>

<script>
function addSpec() {
    const container = document.getElementById('specs-container');
    const row = document.createElement('div');
    row.className = 'row g-2 spec-row mt-2';
    row.innerHTML = `
        <div class="col-5">
            <input type="text" name="spec_key[]" class="form-control" placeholder="عنوان">
        </div>
        <div class="col-5">
            <input type="text" name="spec_value[]" class="form-control" placeholder="مقدار">
        </div>
        <div class="col-2">
            <button type="button" class="btn btn-danger btn-sm w-100" onclick="removeSpec(this)">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `;
    container.appendChild(row);
}

function removeSpec(btn) {
    const row = btn.closest('.spec-row');
    if (document.querySelectorAll('.spec-row').length > 1) {
        row.remove();
    } else {
        alert('حداقل یک مشخصه باید وجود داشته باشد');
    }
}
</script>
{% endblock %}