<!DOCTYPE html>
<html lang="en">
  {% load static %}

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TAYAPROMEDIVERSE Dashboard</title>
    <link rel="stylesheet" href="{% static 'css/dashboard.css' %}" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />

    <!-- Toastify CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
    />
  </head>

  <body>
    <!-- Mobile Menu Overlay -->
    <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>

    <!-- Mobile Menu -->
    <div class="mobile-menu" id="mobileMenu">
      <div class="mobile-menu-header">TAYAPROMEDIVERSE</div>
      <div class="mobile-menu-items">
        <div class="mobile-menu-item active">
          <div class="mobile-menu-item-icon">🏠</div>
          <span>Home</span>
        </div>
        <div class="mobile-menu-item">
          <div class="mobile-menu-item-icon">⚙️</div>
          <span>Settings</span>
        </div>
        <div class="mobile-menu-item">
          <div class="mobile-menu-item-icon">💳</div>
          <span>Subscription</span>
        </div>
      </div>
    </div>

    <div class="sidebar">
      <div class="sidebar-top">
        <div class="logo">TAYAPROMEDIVERSE</div>

        <div class="nav-item home active">
          <div class="nav-icon"></div>
          <span>Home</span>
        </div>

        <div
          class="settings-item"
          id="settingsNav"
          onclick="handleSettings()"
          style="cursor: pointer"
        >
          <div class="settings-icon"></div>
          <span>Setting</span>
        </div>

        <div
          class="nav-item subscription"
          id="subscriptionNav"
          onclick="handleSubscription()"
          style="cursor: pointer; margin-top: 10px"
        >
          <div class="nav-icon">💳</div>
          <span>Subscription</span>
        </div>
      </div>

      <!-- Support Card -->
      <div class="support-card">
        <div class="support-icon"></div>
        <div class="support-title">Support</div>
        <div class="support-description">
          Having trouble with TAYAPROMEDIVERSE? Please contact us for more
          questions.
        </div>

        <div class="contact-frame">
          <div class="contact-label">Cell:</div>
          <div class="contact-value-phone">8553728266</div>
        </div>

        <div class="contact-frame">
          <div class="contact-label">Mail:</div>
          <div class="contact-value-email">tayaprolibrary@gmail.com</div>
        </div>
      </div>
    </div>

    <div class="main-content">
      <!-- Desktop Header -->
      <div class="header">
        <div class="page-title" id="pageTitle">Home</div>

        <div class="auth-buttons">
          {% if user %}
          <div class="user-account">
            <div class="user-avatar" id="headerAvatar">
              {{ user.first_name|first|upper }}{{ user.last_name|first|upper }}
            </div>
            <div class="user-info">
              <div class="user-name" id="headerUserName">
                {{ user.first_name }} {{ user.last_name }}
              </div>
            </div>
            <a href="{% url 'logout' %}" class="logout-link">Logout</a>
          </div>
          {% else %}
          <button class="login-btn" onclick="handleLogin()">Login</button>
          <button class="signup-btn" onclick="handleSignup()">Sign Up</button>
          {% endif %}
        </div>
      </div>

      <!-- Mobile Header -->
      <div class="mobile-header">
        <div class="mobile-logo">TAYAPROMEDIVERSE</div>
        <div class="hamburger-menu" id="hamburgerMenu">
          <div class="hamburger-line"></div>
          <div class="hamburger-line"></div>
          <div class="hamburger-line"></div>
        </div>
      </div>

      <div class="dashboard-content" id="dashboardContent">
        <div class="content-rectangle">
          <div class="search-filter-bar">
            <div class="search-container">
              <input
                type="text"
                class="search-input"
                placeholder="Search card..."
              />
              <div class="search-icon">🔍</div>
            </div>
            <div class="filter-container">
              <button class="filter-button">
                <span>Filter</span>
                <span>▼</span>
              </button>
            </div>
          </div>

          <!-- ✅ Dynamic Dashboard Items -->
          <div class="grid-container">
            {% for item in dashboard_items %}
            <div
              class="card"
              onclick="viewDetails('{{ item.title }}', '{{ item.link }}')"
              style="cursor: pointer"
            >
              <img
                class="card-image"
                src="{{ item.image }}"
                alt="{{ item.title }}"
              />
              <div class="card-content">
                <div class="card-title">{{ item.title }}</div>
                <button
                  class="view-details-btn"
                  onclick="event.stopPropagation(); viewDetails('{{ item.title }}', '{{ item.link }}')"
                >
                  View Details
                </button>
              </div>
            </div>
            {% empty %}
            <p>No items available.</p>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

    <script>
      function handleLogin() {
        window.location.href = "{% url 'signin' %}";
      }

      function handleSignup() {
        window.location.href = "{% url 'signup' %}";
      }

      function handleSettings() {
        // Check if user is logged in
        {% if user %}
          // User is logged in, proceed to settings
          window.location.href = "{% url 'settings' %}";
        {% else %}
          // User is not logged in, show notification
          if (window.ToastifyUtils) {
            window.ToastifyUtils.warning("Please login to access settings. Click the Login button to proceed.");
          } else {
            alert("Please login to access settings.");
          }
        {% endif %}
      }

      function handleSubscription() {
        // Check if user is logged in
        {% if user %}
          // User is logged in, proceed to subscription
          window.location.href = "{% url 'subscription' %}";
        {% else %}
          // User is not logged in, show notification
          if (window.ToastifyUtils) {
            window.ToastifyUtils.warning("Please login to access subscription. Click the Login button to proceed.");
          } else {
            alert("Please login to access subscription.");
          }
        {% endif %}
      }

      function viewDetails(title, link) {
        // Check if user is logged in
        {% if user %}
          // User is logged in, check for active subscription
          {% if has_active_subscription %}
            // User has active subscription, allow access
            if (link) {
              window.open(link, '_blank');
            } else {
              alert(`No link available for: ${title}`);
            }
          {% else %}
            // User is logged in but no active subscription
            if (window.ToastifyUtils) {
              window.ToastifyUtils.warning("Please subscribe to access this content. Click the Subscription button to choose a plan.");
            } else {
              alert("Please subscribe to access this content.");
            }
            // Optionally redirect to subscription page after a short delay
            setTimeout(function() {
              window.location.href = "{% url 'subscription' %}";
            }, 2000);
          {% endif %}
        {% else %}
          // User is not logged in, show notification
          if (window.ToastifyUtils) {
            window.ToastifyUtils.warning("Please login to view details. Click the Login button to proceed.");
          } else {
            alert("Please login to view details.");
          }
        {% endif %}
      }

      // Mobile menu functionality
      const hamburgerMenu = document.getElementById("hamburgerMenu");
      const mobileMenu = document.getElementById("mobileMenu");
      const mobileMenuOverlay = document.getElementById("mobileMenuOverlay");

      function toggleMobileMenu() {
        mobileMenu.classList.toggle("active");
        mobileMenuOverlay.style.display = mobileMenu.classList.contains(
          "active"
        )
          ? "block"
          : "none";
      }

      if (hamburgerMenu) {
        hamburgerMenu.addEventListener("click", toggleMobileMenu);
      }

      if (mobileMenuOverlay) {
        mobileMenuOverlay.addEventListener("click", toggleMobileMenu);
      }

      // Mobile menu item clicks
      document.querySelectorAll(".mobile-menu-item").forEach((item) => {
        item.addEventListener("click", function () {
          const menuText = this.querySelector("span").textContent;
          if (menuText === "Home") {
            // Already on home page
            toggleMobileMenu();
          } else if (menuText === "Settings") {
            handleSettings();
            toggleMobileMenu();
          } else if (menuText === "Subscription") {
            handleSubscription();
            toggleMobileMenu();
          }
        });
      });

      // Navigation functionality
      document
        .querySelector(".nav-item.home")
        .addEventListener("click", function () {
          // Already on home page, do nothing
        });

      // Search filtering
      document.addEventListener("DOMContentLoaded", () => {
        const searchInput = document.querySelector(".search-input");
        const cards = document.querySelectorAll(".card");

        searchInput.addEventListener("input", (e) => {
          const term = e.target.value.toLowerCase();
          cards.forEach((card) => {
            const title = card
              .querySelector(".card-title")
              .textContent.toLowerCase();
            card.style.display = title.includes(term) ? "block" : "none";
          });
        });
      });
    </script>

    <!-- Toastify JS -->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/toastify-js"
    ></script>

    <!-- Toastify Utils -->
    <script src="{% static 'js/toastify-utils.js' %}"></script>

    <!-- Django Messages with Toastify -->
    {% if messages %}
    <div id="django-messages" style="display: none">
      {% for message in messages %}
      <div
        data-type="{{ message.tags }}"
        data-message="{{ message|escapejs }}"
      ></div>
      {% endfor %}
    </div>
    {% endif %}
  </body>
</html>
