{% 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-plus-circle text-primary me-2"></i>
            افزودن محصول جدید
        </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_add') }}" 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" placeholder="عنوان محصول" 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 }}">{{ 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 }}">{{ brand.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">توضیحات کوتاه</label>
                                <input type="text" name="short_description" class="form-control" placeholder="توضیحات کوتاه (حداکثر ۳۰۰ کاراکتر)">
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">توضیحات کامل</label>
                                <textarea name="description" class="form-control" rows="5" placeholder="توضیحات کامل محصول"></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" placeholder="۰" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">قیمت مقایسه (تومان)</label>
                                <input type="number" name="compare_price" class="form-control" placeholder="۰">
                                <small class="text-muted">قیمت قبل از تخفیف</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">قیمت تمام شده</label>
                                <input type="number" name="cost_per_item" class="form-control" placeholder="۰">
                            </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="0" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">کد SKU</label>
                                <input type="text" name="sku" class="form-control" placeholder="SKU-XXX">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">وزن (کیلوگرم)</label>
                                <input type="number" name="weight" class="form-control" step="0.1" value="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="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">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">تاریخ پایان</label>
                                <input type="datetime-local" name="discount_end" class="form-control">
                            </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" placeholder="عنوان صفحه سئو">
                            </div>
                            <div class="col-12">
                                <label class="form-label">توضیحات سئو</label>
                                <textarea name="seo_description" class="form-control" rows="2" placeholder="توضیحات متا"></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">کلمات کلیدی سئو</label>
                                <input type="text" name="seo_keywords" class="form-control" placeholder="کلمات کلیدی با کاما جدا کنید">
                            </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">
                        <div class="mb-3">
                            <label class="form-label">تصاویر محصول</label>
                            <input type="file" name="images" class="form-control" accept="image/*" multiple>
                            <small class="text-muted">تصویر اول به عنوان تصویر اصلی نمایش داده می‌شود</small>
                        </div>
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <span class="small">فرمت‌های مجاز: jpg, png, webp</span>
                        </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">
                            <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>
                        </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" checked>
                            <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">
                            <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">
                            <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">
                            <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 %}