{% 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_banners') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-right me-2"></i> بازگشت
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <form method="POST" action="{{ url_for('admin_banner_add') }}" enctype="multipart/form-data">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">عنوان بنر</label>
                                <input type="text" name="title" class="form-control" placeholder="عنوان بنر (اختیاری)">
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">تصویر بنر <span class="text-danger">*</span></label>
                                <input type="file" name="image" class="form-control" accept="image/*" required>
                                <small class="text-muted">فرمت‌های مجاز: jpg, png, gif, webp | حداکثر ۲ مگابایت</small>
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">لینک بنر</label>
                                <input type="url" name="link" class="form-control" placeholder="https://example.com">
                                <small class="text-muted">با کلیک روی بنر کاربر به این آدرس هدایت می‌شود</small>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">موقعیت نمایش</label>
                                <select name="position" class="form-select">
                                    <option value="home_top">صفحه اصلی - بالا</option>
                                    <option value="home_bottom">صفحه اصلی - پایین</option>
                                    <option value="sidebar">سایدبار</option>
                                    <option value="category_top">صفحه دسته‌بندی - بالا</option>
                                    <option value="category_bottom">صفحه دسته‌بندی - پایین</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">ترتیب نمایش</label>
                                <input type="number" name="order" class="form-control" value="0">
                                <small class="text-muted">عدد کوچکتر زودتر نمایش داده می‌شود</small>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">تاریخ شروع</label>
                                <input type="datetime-local" name="start_date" class="form-control">
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">تاریخ پایان</label>
                                <input type="datetime-local" name="end_date" class="form-control">
                            </div>
                            
                            <div class="col-12">
                                <div class="form-check">
                                    <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>
                            
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i> ایجاد بنر
                                </button>
                            </div>
                        </div>
                    </form>
                </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-info-circle text-primary me-2"></i> راهنما</h5>
                </div>
                <div class="card-body">
                    <p class="small text-muted">نکات مهم برای ایجاد بنر:</p>
                    <ul class="small text-muted">
                        <li>✅ تصویر با کیفیت بالا انتخاب کنید</li>
                        <li>✅ سایز مناسب: ۱۹۲۰×۶۰۰ برای صفحه اصلی</li>
                        <li>✅ لینک معتبر وارد کنید</li>
                        <li>✅ تاریخ پایان را مشخص کنید</li>
                        <li>✅ بنرهای غیرفعال نمایش داده نمی‌شوند</li>
                    </ul>
                    <div class="alert alert-info mt-3">
                        <i class="fas fa-lightbulb me-2"></i>
                        <span class="small">تصویر اول به عنوان تصویر اصلی نمایش داده می‌شود</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}