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

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

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

{% endblock %}

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


<div class="ceremony-detail-wrapper container">
    <div class="ceremony-header text-center mb-4">
        <h2>{{ ceremony.title }}</h2>
        <p>تاریخ: {{ ceremony.date|jalali_fa }}</p>
        <h4>پوستر مراسم:</h4>
        <img src="{{ ceremony.poster }}" class="img-fluid rounded thumb-img image-btn fade-in"
            style="width: 100%; width: 150px;" data-img="{{ ceremony.poster }}">

    </div>

    {% for type_name, files in files_by_type.items %}
    {% if files %}
    <div class="file-type-group mb-4">
        <h3 class="mb-3">{{ type_name }}</h3>
        <div class="row g-3">
            {% for file in files %}
            <div class="col-6 col-md-4 col-lg-2">
                <div class="file-item text-center p-2">
                    {% if type_name == 'تصاویر' %}
                    <img src="{{ file.file }}" class="img-fluid rounded thumb-img image-btn fade-in"
                        data-img="{{ file.file }}">
                    {% elif type_name == 'ویدیو' %}
                    <button class="file-link video-btn fade-in" data-video="{{ file.file }}"
                        data-title="{{ file.title }}">
                        {{ file.title|default:"مشاهده ویدیو" }}
                    </button>
                    {% elif type_name == 'صوت' %}
                    <button class="file-link audio-btn fade-in" data-audio="{{ file.file }}"
                        data-title="{{ file.title }}">
                        {{ file.title|default:"پخش صوت" }}
                    </button>
                    {% elif type_name == 'متن' %}
                    <button class="file-link audio-btn fade-in" data-audio="{{ file.file }}"
                        data-title="{{ file.title }}">
                        {{ file.title|default:"دانلود فایل" }}
                    </button>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    {% endfor %}
    <button class="btn btn-outline-light btn-sm px-3 py-1 mt-3 d-block mx-auto" onclick="history.back()">
        <i class="fa-solid fa-arrow-right"></i>
        بازگشت
    </button>
</div>

</div>

<!-- ================= MODALS ================= -->
<!-- Video -->
<div id="videoModal" class="custom-modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <video id="modalVideo" controls></video>
        <h4 id="videoTitle"></h4>
    </div>
</div>

<!-- Audio -->
<div id="audioModal" class="custom-modal">
    <div class="modal-content">
        <span class="close-audio">&times;</span>
        <audio id="modalAudio" controls></audio>
        <h4 id="audioTitle"></h4>
    </div>
</div>

<!-- Image -->
<div id="imageModal" class="custom-modal">
    <div class="modal-content">
        <span class="close-image">&times;</span>
        <img id="modalImage" style="width:100%; border-radius:10px;">
    </div>
</div>
</main>
{% endblock %}

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

        /* ================== FADE IN ================== */
        document.querySelectorAll('.fade-in').forEach((el, index) => {
            setTimeout(() => {
                el.classList.add('visible');
            }, index * 100);
        });

        /* ================= VIDEO ================= */
        const videoModal = document.getElementById("videoModal");
        const modalVideo = document.getElementById("modalVideo");
        const videoTitle = document.getElementById("videoTitle");
        document.querySelectorAll(".video-btn").forEach(btn => {
            btn.addEventListener("click", () => {
                modalVideo.src = btn.dataset.video;
                videoTitle.innerText = btn.dataset.title || "";
                videoModal.classList.add("active");
            });
        });
        document.querySelector(".close").onclick = () => {
            videoModal.classList.remove("active");
            modalVideo.pause();
            modalVideo.src = "";
        };

        /* ================= AUDIO ================= */
        const audioModal = document.getElementById("audioModal");
        const modalAudio = document.getElementById("modalAudio");
        const audioTitle = document.getElementById("audioTitle");
        document.querySelectorAll(".audio-btn").forEach(btn => {
            btn.addEventListener("click", () => {
                modalAudio.src = btn.dataset.audio;
                audioTitle.innerText = btn.dataset.title || "";
                audioModal.classList.add("active");
            });
        });
        document.querySelector(".close-audio").onclick = () => {
            audioModal.classList.remove("active");
            modalAudio.pause();
            modalAudio.src = "";
        };

        /* ================= IMAGE ================= */
        const imageModal = document.getElementById("imageModal");
        const modalImage = document.getElementById("modalImage");
        document.querySelectorAll(".image-btn").forEach(img => {
            img.addEventListener("click", () => {
                modalImage.src = img.dataset.img;
                imageModal.classList.add("active");
            });
        });
        document.querySelector(".close-image").onclick = () => {
            imageModal.classList.remove("active");
            modalImage.src = "";
        };

        /* ================= CLOSE OUTSIDE ================= */
        window.addEventListener("click", function (e) {
            if (e.target === videoModal) {
                videoModal.classList.remove("active");
                modalVideo.pause();
                modalVideo.src = "";
            }
            if (e.target === audioModal) {
                audioModal.classList.remove("active");
                modalAudio.pause();
                modalAudio.src = "";
            }
            if (e.target === imageModal) {
                imageModal.classList.remove("active");
                modalImage.src = "";
            }
        });

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