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

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

{% block extra_css %}

<link rel="stylesheet" href="{% static 'css/archive/audios.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>

    {% for audio in audios %}
    <div class="audio-card">
        <a href="{% url 'audio_detail' audio.id %}"
            style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">
            <div class="img-audio">
                <img src="{{audio.thumbnail}}" alt="عکس صوت وجود ندارد">
            </div>

            <div class="card-body" style="height: 80px;">
                <h6 class="card-title" style="margin-top: 10px; ">{{audio.title}}</h6>
                <p style="color: rgba(123, 123, 123, 0.801); margin-top: 5px; margin-bottom: 0;">
                    {{audio.occasion.title}}
                </p>
                 <p style="color:  #f4be3576; margin: 0;">
                    {{audio.get_file_style_display }}
                </p>
                <!-- <p style="color: rgba(123, 123, 123, 0.801); margin-top: 5px;">
                    ۲۷هزار بازدید.دو روز قبل
                </p> -->

            </div>
        </a>

        <!-- دکمه‌های سمت چپ -->
        <div class="actions">
            <a href="{{audio.file}}" class="download-btn" download>
                <i class="fa-solid fa-download"></i>
            </a>
            <button class="play-btn" data-src="{{audio.file}}">
                <i class="fas fa-play"></i>
            </button>

        </div>
    </div>
    {% endfor %}



    <!-- ========= پلیر پایین صفحه ========= -->
    <div id="bottomAudioPlayer" class="audio-player">

        <!-- بستن -->
        <button id="closePlayer" class="close-btn">
            <i class="fas fa-times"></i>
        </button>

        <!-- اطلاعات -->
        <div class="player-left">
            <div id="playerCover" class="cover"></div>
            <div class="info">
                <span id="audioTitle" سفش>عنوان صوت</span>
                <small>در حال پخش</small>
            </div>
        </div>

        <!-- کنترل‌ها -->
        <div class="player-center">
            <div class="controls">
                <button style="background-color:  #f4bf35;" id="playPause"><i class="fas fa-play"></i></button>
            </div>

            <div class="progress-container">
                <span id="currentTime">۰:۰۰</span>
                <input type="range" id="progressBar" value="0">
                <span id="duration">۰:۰۰</span>
            </div>
        </div>

        <!-- صدا -->
        <div class="player-right">
            <i class="fas fa-volume-up"></i>
            <input type="range" id="volume" min="0" max="1" step="0.01" value="1">
        </div>

        <audio id="mainAudio"></audio>
    </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 %}

</main>


{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener("DOMContentLoaded", function () {

        const audio = document.getElementById("mainAudio");
        const volume = document.getElementById("volume");

        // ← این دو خط اضافه می‌کنیم:
        audio.volume = 1;      // صدا روی بیشترین
        volume.value = 1;      // اسلایدر هم سمت راست

        // ادامه کد فعلیت:
        const playBtns = Array.from(document.querySelectorAll(".play-btn"));
        const player = document.getElementById("bottomAudioPlayer");
        const title = document.getElementById("audioTitle");
        const playPause = document.getElementById("playPause");
        const progress = document.getElementById("progressBar");
        const currentTimeEl = document.getElementById("currentTime");
        const durationEl = document.getElementById("duration");
        const closeBtn = document.getElementById("closePlayer");

        let currentIndex = -1;

        function toPersianNumber(num) {
            return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d]);
        }

        function formatTime(time) {
            const m = Math.floor(time / 60);
            const s = Math.floor(time % 60).toString().padStart(2, '0');
            return toPersianNumber(`${m}:${s}`);
        }

        function syncIcons() {
            playBtns.forEach((btn, i) => {
                if (i !== currentIndex) {
                    btn.innerHTML = '<i class="fas fa-play"></i>';
                    return;
                }
                btn.innerHTML = audio.paused
                    ? '<i class="fas fa-play"></i>'
                    : '<i class="fas fa-pause"></i>';
            });
            playPause.innerHTML = audio.paused
                ? '<i class="fas fa-play"></i>'
                : '<i class="fas fa-pause"></i>';
        }

        function playAudio(index) {
            const btn = playBtns[index];
            if (!btn) return;
            const src = btn.dataset.src;
            const songTitle = btn.closest(".audio-card")
                .querySelector(".card-title").innerText;
            const card = btn.closest(".audio-card");
            // عکس
            const imgSrc = card
                .querySelector(".img-audio img").src;

            // کاور پلیر
            const cover = document.getElementById("playerCover");

            cover.style.backgroundImage = `url('${imgSrc}')`;


            title.innerText = songTitle;
            player.classList.add("show");
            if (currentIndex === index) {
                audio.paused ? audio.play() : audio.pause();
            } else {
                audio.src = src;
                audio.play();
                currentIndex = index;
            }
            syncIcons();
        }

        playBtns.forEach((btn, index) => {
            btn.addEventListener("click", () => {
                playAudio(index);
            });
        });

        playPause.addEventListener("click", () => {
            audio.paused ? audio.play() : audio.pause();
            syncIcons();
        });

        audio.addEventListener("ended", () => {
            let nextIndex = currentIndex + 1;
            if (nextIndex < playBtns.length) {
                playAudio(nextIndex);
            } else {
                currentIndex = -1;
                player.classList.remove("show");
            }
        });

        audio.addEventListener("timeupdate", () => {
            if (!audio.duration) return;
            progress.value = (audio.currentTime / audio.duration) * 100;
            currentTimeEl.innerText = formatTime(audio.currentTime);
        });

        audio.addEventListener("loadedmetadata", () => {
            durationEl.innerText = formatTime(audio.duration);
        });

        progress.addEventListener("input", () => {
            audio.currentTime = (progress.value / 100) * audio.duration;
        });

        volume.addEventListener("input", () => {
            audio.volume = volume.value;
        });

        closeBtn.addEventListener("click", () => {
            audio.pause();
            player.classList.remove("show");
            currentIndex = -1;
            syncIcons();
        });

        audio.addEventListener("play", syncIcons);
        audio.addEventListener("pause", syncIcons);

    });
</script>



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