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


{% block extra_css %}

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

{% endblock %}

{% block content %}
<main class="container my-5">
   <div class="breadcrumb-box text-center text-white  " style="margin-top:60px;">

{% if breadcrumb.ceremony %}
    <a href="{% url 'ceremony_detail' breadcrumb.ceremony.id %}"
       class="breadcrumb-item-custom text-decoration-none text-white">
        {{ breadcrumb.ceremony }}
    </a>
{% endif %}

        {% for cat in breadcrumb.categories reversed %}
        <span class="breadcrumb-sep">/</span>
        <span class="breadcrumb-item-custom">
            <a href="{% url 'category_detail' cat.id %}" class="  text-decoration-none text-white">
                {{ cat|to_persian_numbers }}
            </a> </span>
        {% endfor %}

    </div>

    <div class="img-audio" style="margin-top: 10px;">
        <img src="{{audio.poster}}" alt="" style="margin-top: 0;">
    </div>
    <div class="card-body">
        <h6 class="card-title text-white">{{audio.title}}</h6>
             <p style="color: rgba(123, 123, 123, 0.801); margin-top: 5px; text-align: center; ">{{audio.occasion.title}}</p>
        <!-- <p style="color: rgba(123, 123, 123, 0.801); margin-top: 5px;">
            ۲۷هزار بازدید.دو روز قبل
        </p> -->


    </div>
    <div class="custom-player">


        <div class="player-info">

            <audio id="audio">
                <source src="{{audio.file}}" type="audio/mpeg">
            </audio>

            <input type="range" id="progress" value="0">

            <div class="time">
                <span id="current">۰:۰۰</span>
                <span id="duration">۰:۰۰</span>
            </div>
        </div>




    </div>
    <!-- <button class="playPauseBtn" style="text-align: center;">
        <i class="fas fa-play"></i>
    </button> -->

    <div class="actions-main">


 
<a href="{% if next_audio %}{% url 'audio_detail' next_audio.id %}{% else %}#{% endif %}"
   class="forward-btn {% if not next_audio %}disabled-btn{% endif %}">
    <i class="fa-solid fa-forward fa-flip-vertical"></i>
</a>

<button class="play-btn" data-src="{{audio.file}}">
    <i class="fas fa-play"></i>
</button>

<a href="{% if prev_audio %}{% url 'audio_detail' prev_audio.id %}{% else %}#{% endif %}"
   class="forward-btn {% if not prev_audio %}disabled-btn{% endif %}">
    <i class="fa-solid fa-forward fa-flip-horizontal"></i>
</a>

    </div>

 

        <div class="actions" style="margin-top: 20px;" >
            <button class="share-btn" id="shareBtn" style="width: 40px;">
                <i class="fa-solid fa-share-nodes"></i>
            </button>
            <a href="{{audio.file}}" class="download-btn">
                <i class="fa-solid fa-download"></i>
            </a>
        </div>
        <!-- تاریخ -->
<div class="row justify-content-center mt-3 gx-0">
  {% for tag in audio.tags.all %}
    <div class="mb-2 text-center" style="width:70%;">
      <button
        class="btn btn-outline-secondary w-100"
        type="button"
        style="font-size:14px; border-radius:5px;">
        <i class="fa-solid fa-hashtag"></i>   {{ tag.name }}
      </button>
    </div>
  {% endfor %}
</div>
</main>
<div class="container">
    <div class="section-header">
        <h2><i class="fa-solid fa-circle-info"></i> صفحات رسمی ما </h2>
        <a href="#" class="see-all">همه موارد<i class="fa-solid fa-angle-left"></i></a>
    </div>
    <div class="row g-3">

  <div class="col-12 col-md-12">
  <a href="{% url 'bio' %}">
    <img src="{% static 'images/sm.jpg' %}" class="img-fluid rounded" alt="">
  </a>
</div>



    </div>
</div>



<div class="container">
    <div class="section-header">
        <h2><i class="fa-solid fa-microphone"></i> جدیدترین صوت‌ها</h2>
        <a href="{% url 'audios_list' %}" class="see-all">همه موارد<i class="fa-solid fa-angle-left"></i></a>
    </div>
    <div class="audio-slider">
    {% for audio in audios %}
    <a href="{% url 'audio_detail' audio.id %}"
      style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">

      <div class=" text-center audio-card">
        <img src="{{audio.thumbnail}}" class="card-img-top gallery-img" alt="عکس وجود ندارد">
        <div class="card-body" style="height: 60px;">
          <h6 class=" card-title   card-title text-center text-white " style="font-size: 12px;"> {{audio.title}}</h6>
             <p style="color: rgba(123, 123, 123, 0.801); margin-top: 5px; text-align: center; ">{{audio.occasion.title}}</p>
 
        </div>
      </div>
    </a>
    {% endfor %}
    </div>
</div>
<!-- ========= کارت‌های ویدئو ========= -->
<div class="container  ">
    <div class="section-header">
        <h2><i class="fa-solid fa-video"></i> جدیدترین ویدئوها</h2>
        <a href="#" class="see-all">همه موارد<i class="fa-solid fa-angle-left"></i></a>
    </div>
    <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 style="margin-top: 10px;">{{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>
{% endblock %}
{% block extra_js %}
<script>
    const audio = document.getElementById("audio");
    const playBtn = document.querySelector(".play-btn");
    const icon = playBtn.querySelector("i");
    const progress = document.getElementById("progress");
    const current = document.getElementById("current");
    const duration = document.getElementById("duration");

    function toPersianNumber(n) {
        const fa = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
        return n.toString().replace(/[0-9]/g, d => fa[d]);
    }

    playBtn.addEventListener("click", () => {
        if (audio.paused) {
            audio.play();
            icon.classList.remove("fa-play");
            icon.classList.add("fa-pause");
        } else {
            audio.pause();
            icon.classList.remove("fa-pause");
            icon.classList.add("fa-play");
        }
    });

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

        let curMin = Math.floor(audio.currentTime / 60);
        let curSec = Math.floor(audio.currentTime % 60);
        if (curSec < 10) curSec = "0" + curSec;

        current.innerText =
            `${toPersianNumber(curMin)}:${toPersianNumber(curSec)}`;
    });

    audio.addEventListener("loadedmetadata", () => {
        let durMin = Math.floor(audio.duration / 60);
        let durSec = Math.floor(audio.duration % 60);
        if (durSec < 10) durSec = "0" + durSec;

        duration.innerText =
            `${toPersianNumber(durMin)}:${toPersianNumber(durSec)}`;
    });

    progress.addEventListener("input", () => {
        audio.currentTime = (progress.value / 100) * audio.duration;
    });
</script>
<script>
    document.getElementById("shareBtn").addEventListener("click", async () => {

        const shareData = {
            title: document.title,
            url: window.location.href
        };

        try {

            // موبایل
            if (navigator.share && navigator.canShare(shareData)) {

                await navigator.share(shareData);

            } else {

                // سیستم یا مرورگرهای قدیمی
                await navigator.clipboard.writeText(window.location.href);

                alert("لینک کپی شد");
            }

        } catch (err) {
            console.log(err);
        }

    });
</script>
{% endblock %}