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

{% block title %}پیشواز ها{% endblock %}

{% block extra_css %}

<link rel="stylesheet" href="{% static 'css/archive/ring_back_tone_list.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" aria-expanded="false"
                style="width: 170px; font-size: 14px; height: 38px;">
                بروزرسانی:۲۲اردیبهشت۱۴۱۲
            </button>

        </div>

         <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                نوع
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">ویدیو</a></li>
                <li><a class="dropdown-item" href="#">پادکست</a></li>
                <li><a class="dropdown-item" href="#">مقاله</a></li>
            </ul>
        </div>

         <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                سبک
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">آموزشی</a></li>
                <li><a class="dropdown-item" href="#">تحلیلی</a></li>
                <li><a class="dropdown-item" href="#">سرگرمی</a></li>
            </ul>
        </div>

    </div> -->


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

         <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                تاریخ
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">امروز</a></li>
                <li><a class="dropdown-item" href="#">این هفته</a></li>
                <li><a class="dropdown-item" href="#">این ماه</a></li>
            </ul>
        </div>

         <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                نوع
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">ویدیو</a></li>
                <li><a class="dropdown-item" href="#">پادکست</a></li>
                <li><a class="dropdown-item" href="#">مقاله</a></li>
            </ul>
        </div>

         <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                سبک
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">آموزشی</a></li>
                <li><a class="dropdown-item" href="#">تحلیلی</a></li>
                <li><a class="dropdown-item" href="#">سرگرمی</a></li>
            </ul>
        </div>

         <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                محبوب
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">پربازدید</a></li>
                <li><a class="dropdown-item" href="#">بیشترین لایک</a></li>
            </ul>
        </div>

    </div> -->

    <div class="pishvaz" style="text-align: center;">
        <!-- <h6 style="color: white;">کد ارسال برای <span style="color: #f4bf35;">ایرانسل</span>: ۸۶۸۶</h6> -->
        <h6 style="color: rgba(255, 255, 255, 0.159);">جهت استفاده روی اپراتور خود کلیک کنید</h6>
        <h6 style="color: rgba(255, 255, 255, 0.159);">کد کپی شده را جایگزاری کنید</h6>

    </div>
    {% for ring_back_tone in ring_back_tones %}
    <div class="audio-card">
        <div class="img-audio">
            <img src="{{ring_back_tone.cover}}" alt="">
        </div>

        <div class="card-body">
            <h6 class="card-title">{{ring_back_tone.title}}</h6>
            <p style="color: rgba(123, 123, 123, 0.801); margin: 0; margin-top: 5px;">
                {{ring_back_tone.occasion.title}}
            </p>


        </div>


<div class="actions">

    <!-- همراه اول -->
    <div class="action-item">
        <p style="color:#355bf4 ;">همراه اول</p>

        <button class="copy-btn"
            data-code="{{ring_back_tone.code_mci}}"
            style="background-color:#355bf4;">
            <i class="fa-solid fa-copy"></i>
        </button>
    </div>

    <!-- ایرانسل -->
    <div class="action-item">
        <p style="color:#f4bf35 ;">ایرانسل</p>

        <button class="copy-btn2"
            data-code="{{ring_back_tone.code_mtn}}"
            style="background-color:#f4bf35;">
            <i class="fa-solid fa-copy"></i>
        </button>
    </div>

    <!-- پخش -->
    <div class="action-item" style="margin-top: 30px;">
        <button class="play-btn"
            data-src="{{ring_back_tone.audio_file}}">
            <i class="fas fa-play"></i>
        </button>
    </div>

</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>
 <script>
document.querySelectorAll(".copy-btn").forEach(btn => {

    btn.addEventListener("click", function () {

        const code = this.dataset.code;

        this.innerHTML = '<i class="fa-solid fa-check"></i>';

        // همراه اول
        window.location.href =
            `sms:8989?body=${encodeURIComponent(code)}`;

    });

});

document.querySelectorAll(".copy-btn2").forEach(btn => {

    btn.addEventListener("click", function () {

        const code = this.dataset.code;

        this.innerHTML = '<i class="fa-solid fa-check"></i>';

        // ایرانسل
        window.location.href =
            `sms:7575?body=${encodeURIComponent(code)}`;

    });

});
</script>

{% endblock %}