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

   <div class="text-center mt-3 d-flex justify-content-center gap-2 flex-wrap">

        <!-- تاریخ -->
        <div>
 <button class="btn btn-outline-secondary" type="button"
        style="width: 170px; font-size: 14px; height: 38px; text-align: right; direction: rtl;">
    
    بروزرسانی:
{{ last_update|jalali_fa }}
</button>
        </div>

        <!-- نوع -->
    <!-- تاریخ -->
<div class="dropdown">
    <button class="btn btn-outline-secondary dropdown-toggle" 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 %}">جدیدترین</a></li>
        <li><a class="dropdown-item" href="?order=oldest{% if request.GET.style %}&style={{ request.GET.style }}{% endif %}">قدیمی‌ترین</a></li>
    </ul>
</div>

<!-- سبک -->
<div class="dropdown">
    <button class="btn btn-outline-secondary dropdown-toggle" 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" %}
            واحد
        {% else %}
            سبک
        {% endif %}
    </button>

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

        <li><a class="dropdown-item" href="?style=shoore{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">شور</a></li>
        <li><a class="dropdown-item" href="?style=zamineh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">زمینه</a></li>
        <li><a class="dropdown-item" href="?style=namahanag{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">نماهنگ</a></li>
        <li><a class="dropdown-item" href="?style=rozeh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">روضه</a></li>
        <li><a class="dropdown-item" href="?style=naghmeh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">نغمه</a></li>
        <li><a class="dropdown-item" href="?style=vahed{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">واحد</a></li>
    </ul>
</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">
                <h6 class="card-title" style="margin-top: 10px;">{{audio.title}}</h6>
                <p style="color: rgba(123, 123, 123, 0.801); margin: 0;">
                    {{audio.ceremony.occasion.title}}
                </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>


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