{% extends 'base.html' %}
{% load static %}
{% load jformat %}
{% load persian_numbers %}

{% block title %}جزئیات مراسم{% endblock %}

{% block extra_css %}

<link rel="stylesheet" href="{% static 'css/archive/video_list.css' %}">

{% endblock %}

{% block content %}
<main class="container my-5">
    <h2>آثار ویدئویی</h2>
    <!-- 🔥 Dropdown کاستوم -->
    <div class="page-size-custom text-center mb-4">

        <div class="dropdown-wrapper">

            <button class="dropdown-btn" onclick="toggleDropdown()">
                تعداد نمایش:
                <span id="currentSize">
                    {{ request.GET.page_size|default:"۵۰" |to_persian_numbers }}
                </span>
                ▾
            </button>

            <div class="dropdown-menu dm" id="dropdownMenu">

                <a href="?page=1&page_size=50" style="margin-top: 10px;">۵۰</a>
                <a href="?page=1&page_size=100" style="margin-top: 10px;">۱۰۰</a>
                <a href="?page=1&page_size=150" style="margin-top: 10px;">۱۵۰</a>
                <a href="?page=1&page_size=200" style="margin-top: 10px;">۲۰۰</a>
                 

            </div>

        </div>

    </div>
    <!-- ========= کارت‌های ویدئو ========= -->

<div class="filter-wrapper mt-3">

    <!-- ردیف بالا: تاریخ -->
    <div class="filter-top text-center mb-2">
        <button class="btn btn-light filter-btn">
            بروزرسانی: {{ last_update|jalali_fa }}
        </button>
    </div>

    <!-- ردیف پایین: فیلترها -->
    <div class="filter-bar d-flex flex-wrap justify-content-center align-items-center gap-2">
<div class="dropdown filter-item">
    <button class="btn btn-outline-secondary dropdown-toggle filter-btn" data-bs-toggle="dropdown">
        {% if request.GET.order == "oldest" %}
            قدیمی‌ترین
        {% elif request.GET.order == "newest" %}
            جدیدترین
        {% else %}
            ترتیب
        {% endif %}
    </button>

    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item"
               href="?order=newest{% if request.GET.style %}&style={{ request.GET.style }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">
                جدیدترین
            </a>
        </li>
        <hr>

        <li>
            <a class="dropdown-item"
               href="?order=oldest{% if request.GET.style %}&style={{ request.GET.style }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">
                قدیمی‌ترین
            </a>
        </li>
    </ul>
</div>

<!-- سبک -->
<div class="dropdown filter-item">
    <button class="btn btn-outline-secondary dropdown-toggle filter-btn" data-bs-toggle="dropdown">
        {% if request.GET.style == "shoore" %}شور
        {% elif request.GET.style == "zamineh" %}زمینه
        {% elif request.GET.style == "namahanag" %}نماهنگ
        {% elif request.GET.style == "rozeh" %}روضه
        {% elif request.GET.style == "naghmeh" %}نغمه
        {% elif request.GET.style == "vahed" %}واحد
        {% elif request.GET.style == "tak" %}تک
        {% elif request.GET.style == "noheh" %}نوحه
        {% else %}سبک
        {% endif %}
    </button>

    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item"
               href="?{% if request.GET.order %}order={{ request.GET.order }}{% endif %}{% if request.GET.page_size %}{% if request.GET.order %}&{% endif %}page_size={{ request.GET.page_size }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}">
                همه
            </a>
        </li>
        <hr>

        <li><a class="dropdown-item" href="?style=shoore{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">شور</a></li>
        <hr>

        <li><a class="dropdown-item" href="?style=zamineh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">زمینه</a></li>
        <hr>

        <li><a class="dropdown-item" href="?style=namahanag{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">نماهنگ</a></li>
        <hr>

        <li><a class="dropdown-item" href="?style=rozeh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">روضه</a></li>
        <hr>

        <li><a class="dropdown-item" href="?style=naghmeh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">نغمه</a></li>
        <hr>

        <li><a class="dropdown-item" href="?style=vahed{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">واحد</a></li>
        <hr>

        <li><a class="dropdown-item" href="?style=tak{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">تک</a></li>
        <hr>

        <li><a class="dropdown-item" href="?style=noheh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.occasion %}&occasion={{ request.GET.occasion }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">نوحه</a></li>
    </ul>
</div>

<!-- مناسبت -->
<div class="dropdown filter-item">
    <button class="btn btn-outline-secondary dropdown-toggle filter-btn" data-bs-toggle="dropdown">

        {% if request.GET.occasion %}
            {% for occasion in occasions %}
                {% if occasion.id|stringformat:"s" == request.GET.occasion %}
                    {{ occasion.title }}
                {% endif %}
            {% endfor %}
        {% else %}
            مناسبت
        {% endif %}

    </button>

    <ul class="dropdown-menu">

        <li>
            <a class="dropdown-item"
               href="?{% if request.GET.style %}style={{ request.GET.style }}{% endif %}{% if request.GET.order %}{% if request.GET.style %}&{% endif %}order={{ request.GET.order }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">
                همه
            </a>
        </li>
        <hr>

        {% for occasion in occasions %}
        <li>
            <a class="dropdown-item"
               href="?occasion={{ occasion.id }}{% if request.GET.style %}&style={{ request.GET.style }}{% endif %}{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}">
                {{ occasion.title }}
            </a>
        </li>
        <hr>
        {% endfor %}
    </ul>
</div>



    </div>
</div>


  



</main>




<div class="container">
    <div class="video-slider">
        {% for video in videos %}
        <a href="{% url 'video_detail' video.id %}"
            style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">

            <div class="video-card">
                <div class="video-wrapper">
                    <img src="{{video.thumbnail}}" alt="عکس صوت وجود ندارد">
                </div>
                <div class="video-body" style="height: 50px;">
                    <h6 class="mt-1">{{video.title}}</h6>
                    <p style="color: rgba(123, 123, 123, 0.801); text-align: center; font-size: 12px; margin-top: 5px;">{{video.occasion.title}}</p>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
    
</div>
   <!-- 🔥 Pagination -->
    {% if is_paginated %}
    <nav class="mt-5">
        <ul class="pagination justify-content-center">

            <!-- قبلی -->
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link"
                   href="?page={{ page_obj.previous_page_number }}&page_size={{ request.GET.page_size }}">
                    قبلی
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link">قبلی</span>
            </li>
            {% endif %}

            <!-- صفحات نزدیک -->
            {% for num in paginator.page_range %}
                {% if num >= page_obj.number|add:-1 and num <= page_obj.number|add:1 %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num|to_persian_numbers }}</span>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link"
                               href="?page={{ num }}&page_size={{ request.GET.page_size }}">
                                {{ num|to_persian_numbers }}
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
            {% endfor %}

            <!-- بعدی -->
            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link"
                   href="?page={{ page_obj.next_page_number }}&page_size={{ request.GET.page_size }}">
                    بعدی
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link">بعدی</span>
            </li>
            {% endif %}

        </ul>
    </nav>
    {% endif %}
{% endblock %}
{% block extra_js %}
<script>
 
// dropdown باز/بسته
function toggleDropdown() {
    document.getElementById("dropdownMenu").classList.toggle("show");
}

// بستن dropdown با کلیک بیرون
document.addEventListener("click", function(e) {
    const dropdown = document.getElementById("dropdownMenu");
    const button = document.querySelector(".dropdown-btn");

    if (!button.contains(e.target) && !dropdown.contains(e.target)) {
        dropdown.classList.remove("show");
    }
});
</script>
{% endblock %}