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

 
{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/archive/ceremony_list.css' %}">
{% endblock %}

{% block content %}
<div class="container my-5">

    <h2 class="mb-4 text-center">مراسمات</h2>
    <p class="text-center text-white-50">
        جهت بزرگنمایی پوستر روی آن کلیک کنید
    </p>

    <!-- 🔥 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" id="dropdownMenu">

                <a href="?page=1&page_size=5" style="margin-top: 10px;">۵</a>
                <a href="?page=1&page_size=10" style="margin-top: 10px;">۱۰</a>
                <a href="?page=1&page_size=20" style="margin-top: 10px;">۲۰</a>
                <a href="?page=1&page_size=30" style="margin-top: 10px;">۳۰</a>
                <a href="?page=1&page_size=50" style="margin-top: 10px;">۵۰</a>
                

            </div>

        </div>

    </div>

    <!-- لیست -->
    <div class="row g-4">
        {% for ceremony in ceremonies %}
        <div class="col-6 col-md-6 col-lg-3 d-flex">
            <div class="ceremony-card w-100">

                <img src="{{ ceremony.poster }}"
                     data-bs-toggle="modal"
                     data-bs-target="#imageModal"
                     data-img="{{ ceremony.poster }}"
                     style="cursor:pointer;">

                <h4  style="margin-top: 10px;">{{ ceremony.title }}</h4>

                <p>
                    تاریخ: {{ ceremony.date|jalali_fa }}
                </p> 

                <a href="{% url 'ceremony_detail' ceremony.id %}" class="btn w-100">
                    مشاهده جزئیات
                </a>

            </div>
        </div>
        {% empty %}
        <p class="text-center text-white">هیچ مراسمی موجود نیست.</p>
        {% endfor %}
    </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:-2 and num <= page_obj.number|add:2 %}
                    {% 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 %}

</div>

<!-- Modal -->
<div class="modal fade" id="imageModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content border-0 bg-dark position-relative">

      <button type="button"
              class="btn-close position-absolute top-0 end-0 m-3"
              data-bs-dismiss="modal"></button>

      <div class="modal-body text-center p-2">
        <img id="modalImg" src="" class="img-fluid rounded">
      </div>

    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// مودال تصویر
const imageModal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImg');

imageModal.addEventListener('show.bs.modal', function (event) {
    const trigger = event.relatedTarget;
    modalImg.src = trigger.getAttribute('data-img');
});

// 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 %}