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

{% block page_title %}مدیریت تصاویر هدر{% endblock %}

{% block content %}

<!-- ===== هدر ===== -->
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0">
            <i class="fas fa-images text-primary"></i> مدیریت تصاویر هدر
        </h4>
        <p class="text-secondary small mb-0">مدیریت اسلایدر تصاویر هدر سایت</p>
    </div>
    <a href="{{ url_for('admin_dashboard') }}" class="btn btn-secondary btn-sm rounded-pill">
        <i class="fas fa-arrow-right"></i> بازگشت
    </a>
</div>

<!-- ===== کارت‌های آمار ===== -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card text-center">
            <div class="h3 text-primary mb-0">{{ images|length|default(0)|persian_numbers }}</div>
            <div class="text-secondary small">مجموع تصاویر</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card text-center">
            <div class="h3 text-success mb-0">{{ images|selectattr('is_active')|list|length|default(0)|persian_numbers }}</div>
            <div class="text-secondary small">فعال</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card text-center">
            <div class="h3 text-warning mb-0">{{ images|selectattr('is_default')|list|length|default(0)|persian_numbers }}</div>
            <div class="text-secondary small">پیش‌فرض</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card text-center">
            <div class="h3 text-secondary mb-0">
                {% if images and images[0] %}
                    {{ images[0].created_at|persian_date }}
                {% else %}
                    -
                {% endif %}
            </div>
            <div class="text-secondary small">آخرین آپلود</div>
        </div>
    </div>
</div>

<!-- ===== فرم آپلود ===== -->
<div class="card border-0 shadow-sm mb-4" style="border-radius:16px;overflow:hidden;">
    <div class="card-header bg-white py-3">
        <h6 class="fw-bold mb-0"><i class="fas fa-upload text-success"></i> آپلود تصویر جدید</h6>
    </div>
    <div class="card-body p-3 p-md-4">
        <form action="{{ url_for('admin_header_image_upload') }}" method="POST" enctype="multipart/form-data">
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label fw-bold small">عنوان</label>
                    <input type="text" name="title" class="form-control" placeholder="عنوان تصویر">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold small">متن جایگزین (Alt)</label>
                    <input type="text" name="alt_text" class="form-control" placeholder="توضیح برای سئو">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold small">لینک</label>
                    <input type="url" name="link_url" class="form-control" placeholder="https://example.com">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold small">تصویر <span class="text-danger">*</span></label>
                    <input type="file" name="image" class="form-control" accept="image/*" required>
                </div>
                <div class="col-md-1">
                    <button type="submit" class="btn btn-success rounded-pill w-100">
                        <i class="fas fa-upload"></i>
                    </button>
                </div>
            </div>
            <div class="mt-3">
                <div class="form-check">
                    <input type="checkbox" name="is_default" class="form-check-input" id="isDefault">
                    <label class="form-check-label small" for="isDefault">
                        <i class="fas fa-star text-warning"></i> تصویر پیش‌فرض
                    </label>
                    <div class="text-muted small">فقط یک تصویر می‌تواند پیش‌فرض باشد</div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- ===== لیست تصاویر ===== -->
<div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
    <div class="card-header bg-white py-3 d-flex flex-wrap justify-content-between align-items-center">
        <h6 class="fw-bold mb-0"><i class="fas fa-list text-primary"></i> لیست تصاویر</h6>
        <div>
            <input type="text" id="searchImages" class="form-control form-control-sm" placeholder="جستجو..." style="width:200px;display:inline-block;">
            <select id="filterStatus" class="form-select form-select-sm" style="width:150px;display:inline-block;">
                <option value="">همه</option>
                <option value="active">فعال</option>
                <option value="inactive">غیرفعال</option>
            </select>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="imagesTable">
                <thead class="table-light">
                    <tr>
                        <th style="width:30px;">#</th>
                        <th style="width:100px;">تصویر</th>
                        <th>عنوان</th>
                        <th>وضعیت</th>
                        <th>پیش‌فرض</th>
                        <th>عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    {% if images %}
                        {% for image in images %}
                        <tr data-status="{% if image.is_active %}active{% else %}inactive{% endif %}">
                            <td>{{ loop.index|persian_numbers }}</td>
                            <td>
                                <img src="{{ image.image_path }}" alt="{{ image.alt_text|default(image.title|default('تصویر هدر')) }}" 
                                     style="width:70px;height:45px;object-fit:cover;border-radius:8px;">
                            </td>
                            <td>
                                <span class="fw-bold">{{ image.title|default('بدون عنوان')|truncate(25) }}</span>
                                {% if image.link_url %}
                                    <span class="badge bg-info text-dark" style="font-size:0.55rem;">
                                        <i class="fas fa-link"></i>
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                {% if image.is_active %}
                                    <span class="badge bg-success">فعال</span>
                                {% else %}
                                    <span class="badge bg-danger">غیرفعال</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if image.is_default %}
                                    <span class="badge bg-warning text-dark"><i class="fas fa-star"></i> پیش‌فرض</span>
                                {% else %}
                                    <span class="badge bg-light text-dark">-</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="d-flex gap-1">
                                    <form action="{{ url_for('admin_header_image_toggle', id=image.id) }}" method="POST" style="display:inline;">
                                        <button type="submit" class="btn btn-sm {% if image.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %} rounded-pill">
                                            {% if image.is_active %}
                                                <i class="fas fa-pause"></i>
                                            {% else %}
                                                <i class="fas fa-play"></i>
                                            {% endif %}
                                        </button>
                                    </form>
                                    <button onclick="confirmDelete({{ image.id }})" class="btn btn-sm btn-outline-danger rounded-pill">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    <form id="deleteForm{{ image.id }}" method="POST" action="{{ url_for('admin_header_image_delete', id=image.id) }}" style="display:none;"></form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="6" class="text-center text-secondary py-4">
                                <i class="fas fa-images" style="font-size:2rem;opacity:0.3;"></i>
                                <p class="mt-2 mb-0">هیچ تصویری ثبت نشده است.</p>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- ===== مودال حذف ===== -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:16px;">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold"><i class="fas fa-exclamation-triangle text-danger"></i> تأیید حذف</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>آیا از حذف این تصویر مطمئن هستید؟</p>
                <p class="text-secondary small mb-0">این عمل غیرقابل بازگشت است.</p>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-secondary btn-sm rounded-pill" data-bs-dismiss="modal">انصراف</button>
                <button type="button" class="btn btn-danger btn-sm rounded-pill" id="confirmDeleteBtn">حذف</button>
            </div>
        </div>
    </div>
</div>

<!-- ===== اسکریپت‌ها ===== -->
<script>
    // جستجو
    document.getElementById('searchImages').addEventListener('keyup', function() {
        var search = this.value.toLowerCase();
        var rows = document.querySelectorAll('#imagesTable tbody tr');
        rows.forEach(function(row) {
            var text = row.textContent.toLowerCase();
            row.style.display = text.indexOf(search) > -1 ? '' : 'none';
        });
    });
    
    // فیلتر وضعیت
    document.getElementById('filterStatus').addEventListener('change', function() {
        var status = this.value;
        var rows = document.querySelectorAll('#imagesTable tbody tr');
        rows.forEach(function(row) {
            var rowStatus = row.getAttribute('data-status') || '';
            row.style.display = status === '' || rowStatus === status ? '' : 'none';
        });
    });
    
    // حذف
    var deleteId = null;
    
    function confirmDelete(id) {
        deleteId = id;
        var modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }
    
    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        if (deleteId) {
            document.getElementById('deleteForm' + deleteId).submit();
        }
    });
</script>

{% endblock %}