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

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

{% endblock %}

{% block content %}


<!-- ========= اسلایدر ========= -->
<div class="container-fluid p-0" style="margin-top: 85px;">
  <div id="mainSlider" class="carousel slide carousel-fade overflow-hidden" data-bs-ride="carousel">
    <!-- دکمه توخالی بالای دایره‌ها -->



    <!-- Indicators (دایره‌ها) -->
    <div class="carousel-indicators"  >
      <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="0" class="active" aria-current="true"
        aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>


<div class="carousel-inner">

  {% for video in sliders %}
  <div class="carousel-item {% if forloop.first %}active{% endif %}">

    <a href="{% url 'video_detail' video.id %}"
       style="text-decoration: none; color: inherit; display: block; position: relative;">

      <picture>
        <source media="(max-width: 768px)" srcset="{{video.poster}}" >
        <img src="{{video.poster_desktop}}" class="d-block  slider-img" alt="{{video.title}}">
      </picture>

      <!-- دکمه روی عکس -->
      <div class="slider-top-btn text-center mb-2"
           style="position:absolute; bottom:20px; width:100%;">
        <button class="btn btn-outline-light">
          مشاهده و دانلود
        </button>
      </div>

    </a>

  </div>
  {% endfor %}

</div>
    <!-- دکمه‌های قبلی و بعدی -->
    <button class="carousel-control-prev d-none d-md-flex" type="button" data-bs-target="#mainSlider"
      data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </button>

    <button class="carousel-control-next d-none d-md-flex" type="button" data-bs-target="#mainSlider"
      data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
    </button>
  </div>
</div>



<div class="text-center mt-4">
  <div class="custom-menu d-inline-flex flex-row-reverse">
    <a href="{% url 'ceremony_list' %}"
      style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">
      <button class="menu-btn active">جلسات</button>
    </a>
    <a href="{% url 'videos_list' %}"
      style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">
      <button class="menu-btn active">ویدئو‌ها</button>
    </a>
    <a href="{% url 'audios_list' %}"
      style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">
      <button class="menu-btn active">صوت‌ها</button>
    </a>
    <a href="{% url 'ring_back_tone_list' %}"
      style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">

      <button class="menu-btn active">پیشواز‌ها</button>
    </a>

  </div>
</div>



<!-- ========= کارت‌های ویدئو ========= -->
<div class="container">
  <div class="section-header">
    <h2><i class="fa-solid fa-video"></i> جدیدترین ویدئوها</h2>
    <a href="{% url 'videos_list' %}" 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="{{video.title}}">
        </div>
        <div class="video-body" style="height: 50px;">
          <h6 class="mt-1">{{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>




<!-- ========= کارت‌های صوتی ========= -->

<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="{{audio.title}}">
        <div class="card-body" style="height: 60px;">
          <h6 class="  card-title text-center text-white  " style="font-size: 12px; margin-top: 10px;">{{audio.title}}</h6>
          <div class="audio-p">
            <p style="color: rgba(123, 123, 123, 0.801); margin-top: 5px;">{{audio.occasion.title}}</p>
            <div class="btn-group">
              <!-- <button class="play-btn" data-src="https://cdn.t-sho.ir/main/javid.mp3">
                <i class="fas fa-play"></i>
              </button> -->

            </div>

          </div>

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




<div class="container">
  <div class="section-header">
    <h2><i class="fa-solid fa-circle-info"></i> صفحات رسمی ما </h2>
   </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>





{% for occasion in occasions %}
<div class="container ">

  <div class="section-header">
    <h2><i class="fa-solid fa-calendar-days"></i> {{occasion.title}}</h2>
    <a href="{% url 'videos_list'  %}?occasion={{occasion.id}}" class="see-all">همه موارد<i class="fa-solid fa-angle-left"></i></a>
  </div>

  <div class="roze-slider" id="rozeSlider">

    {% for file in occasion.pinned_files %}

{% if file.file_type == 'video' and file.is_pin == True %}
    <a href="{% url 'video_detail' file.id %}"
      style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">

      <div class="roze-card">
        <div class="roze-wrapper">
          <img src="{{ file.thumbnail }}" alt="{{file.title}}">
        </div>
        <div class="roze-body">
          <h6 class="mt-2"> {{ file.title }}</h6>
 
 
        </div>
      </div>
    </a>


    {% endif %}

    {% endfor %}

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



<div class="container">
  <div class="section-header">
    <h2><i class="fa-regular fa-file-audio"></i> روضه ها</h2>
    <a href="{% url 'videos_list' %}?style=rozeh" class="see-all">همه موارد<i class="fa-solid fa-angle-left"></i></a>
  </div>
  <div class="roze-slider">
    {% for rozeh in rozehs %}
    <a href="{% url 'video_detail' rozeh.id %}"
      style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">

      <div class="roze-card">
        <div class="roze-wrapper">
          <img src="{{ rozeh.thumbnail }}" alt="{{ rozeh.title }}">
        </div>
        <div class="roze-body" style="height: 50px;">
          <h6 class="mt-2">{{ rozeh.title }}</h6>
          <p style="color: rgba(123, 123, 123, 0.801); margin-top: 5px; text-align: center;">{{rozeh.occasion.title}}</p>

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




<!-- ========= معرفی ========= -->
<section class="container text-center intro-section py-4" style="margin-top: 20px;">
  <h1 class="intro-title" style="margin-top: 10px;">سایت رسمی کربلایی امین قدیم</h1>
  <p class="intro-text" style="color: rgba(255, 255, 255, 0.541);">
ما برآنیم که گنجینه‌ای از آثار صوتی و تصویری کربلایی امین قدیم را فراهم کنیم. این سایت، به‌روزترین و غنی‌ترین محتوا را در مناسبت‌های مذهبی عرضه می‌کند و دسترسی آسان به جدیدترین آثار را برای شما فراهم می‌کند.  </p>
</section>





{% endblock %}
{% block extra_js %}


<script>
  document.addEventListener("DOMContentLoaded", function () {

    function stepSlider(container, time = 2000) {

      const items = container.children;
      if (!items.length) return;

      let index = 0;
      let isUserScrolling = false;
      let scrollTimer;

      // 📌 وقتی کاربر اسکرول می‌کند
      container.addEventListener("scroll", () => {

        isUserScrolling = true;

        let closestIndex = 0;
        let closestDistance = Infinity;

        [...items].forEach((item, i) => {

          const distance = Math.abs(
            container.scrollLeft - item.offsetLeft
          );

          if (distance < closestDistance) {
            closestDistance = distance;
            closestIndex = i;
          }

        });

        index = closestIndex;

        // بعد از توقف اسکرول، دوباره اتوم
        // ات فعال شود
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
          isUserScrolling = false;
        }, 2000);

      });

      // 📌 اسلایدر اتومات
      setInterval(() => {

        if (isUserScrolling) return;

        index++;

        if (index >= items.length) {
          index = 0;
        }

        container.scrollTo({
          left: items[index].offsetLeft,
          behavior: "smooth"
        });

      }, time);

    }

    document
      .querySelectorAll(".video-slider, .audio-slider, .roze-slider")
      .forEach(el => stepSlider(el, 2000));

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