{% 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>
            ویرایش بنر
        </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_edit', id=banner.id) }}" 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" value="{{ banner.title or '' }}">
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">تصویر فعلی</label>
                                <img src="{{ banner.image }}" alt="{{ banner.title }}" style="max-width: 100%; max-height: 200px; border-radius: 8px;">
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">تصویر جدید</label>
                                <input type="file" name="image" class="form-control" accept="image/*">
                                <small class="text-muted">برای تغییر تصویر، فایل جدید انتخاب کنید</small>
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">لینک بنر</label>
                                <input type="url" name="link" class="form-control" value="{{ banner.link or '' }}">
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">موقعیت نمایش</label>
                                <select name="position" class="form-select">
                                    <option value="home_top" {% if banner.position == 'home_top' %}selected{% endif %}>صفحه اصلی - بالا</option>
                                    <option value="home_bottom" {% if banner.position == 'home_bottom' %}selected{% endif %}>صفحه اصلی - پایین</option>
                                    <option value="sidebar" {% if banner.position == 'sidebar' %}selected{% endif %}>سایدبار</option>
                                    <option value="category_top" {% if banner.position == 'category_top' %}selected{% endif %}>صفحه دسته‌بندی - بالا</option>
                                    <option value="category_bottom" {% if banner.position == 'category_bottom' %}selected{% endif %}>صفحه دسته‌بندی - پایین</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">ترتیب نمایش</label>
                                <input type="number" name="order" class="form-control" value="{{ banner.order or 0 }}">
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">تاریخ شروع</label>
                                <input type="datetime-local" name="start_date" class="form-control" value="{{ banner.start_date.strftime('%Y-%m-%dT%H:%M') if banner.start_date else '' }}">
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">تاریخ پایان</label>
                                <input type="datetime-local" name="end_date" class="form-control" value="{{ banner.end_date.strftime('%Y-%m-%dT%H:%M') if banner.end_date else '' }}">
                            </div>
                            
                            <div class="col-12">
                                <div class="form-check">
                                    <input type="checkbox" name="is_active" class="form-check-input" id="is_active" {% if banner.is_active %}checked{% endif %}>
                                    <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">
                    <ul class="small text-muted">
                        <li>✅ تصویر با کیفیت بالا انتخاب کنید</li>
                        <li>✅ سایز مناسب: ۱۹۲۰×۶۰۰ برای صفحه اصلی</li>
                        <li>✅ لینک معتبر وارد کنید</li>
                        <li>✅ تاریخ پایان را مشخص کنید</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}