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

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TAYAPROMEDIVERSE Settings</title>
    <link rel="stylesheet" href="{% static 'css/setting.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"
    />
    <style>
      .messages {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
      }
      .messages li {
        padding: 12px;
        margin-bottom: 10px;
        border-radius: 6px;
        font-weight: 500;
        font-size: 15px;
        border: 1px solid #eee;
      }
      .messages li.success {
        background: #e6ffed;
        color: #228b22;
        border: 1px solid #b2f5ea;
      }
      .messages li.error {
        background: #ffe6e6;
        color: #b22222;
        border: 1px solid #f5b2b2;
      }
      .messages li.info {
        background: #f9f9f9;
        color: #333;
        border: 1px solid #eee;
      }
      .errorlist {
        color: #b22222;
        font-size: 12px;
        margin-top: 5px;
        list-style: none;
        padding: 0;
      }
    </style>
  </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">
          <div class="mobile-menu-item-icon">🏠</div>
          <span>Home</span>
        </div>
        <div class="mobile-menu-item active">
          <div class="mobile-menu-item-icon">⚙️</div>
          <span>Settings</span>
        </div>
      </div>
    </div>

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

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

        <div class="settings-item">
          <div class="settings-icon"></div>
          <span>Setting</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>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Desktop Header -->
      <div class="header">
        <div class="page-title">Setting</div>
        <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>
          <div class="dropdown-arrow"></div>
        </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>

      <!-- Settings Content -->
      <div class="settings-content">
        <!-- Messages -->
        {% if messages %}
        <ul class="messages">
          {% for message in messages %}
          <li class="{{ message.tags }}">{{ message }}</li>
          {% endfor %}
        </ul>
        {% endif %}

        <!-- Profile Section -->
        <div class="profile-section">
          <div class="profile-avatar" id="profileAvatar">
            {{ user.first_name|first|upper }}{{ user.last_name|first|upper }}
          </div>
          <div class="profile-info">
            <h2 id="profileName">{{ user.first_name }} {{ user.last_name }}</h2>
            <p id="profileEmail">{{ user.email }}</p>
          </div>
        </div>

        <!-- General Information Form -->
        <div class="form-section">
          <h3 class="section-title">General Information</h3>
          <form method="post" id="nameForm">
            {% csrf_token %}
            <input type="hidden" name="form_type" value="name" />

            <div class="form-row">
              <div class="form-group">
                <label for="{{ name_form.first_name.id_for_label }}"
                  >First Name</label
                >
                {{ name_form.first_name }} {{ name_form.first_name.errors }}
              </div>
              <div class="form-group">
                <label for="{{ name_form.last_name.id_for_label }}"
                  >Last Name</label
                >
                {{ name_form.last_name }} {{ name_form.last_name.errors }}
              </div>
            </div>

            <button type="submit" class="save-button">Update Name</button>
          </form>

          <div class="form-row">
            <div class="form-group">
              <label for="email">Email</label>
              <input
                type="email"
                id="email"
                value="{{ user.email }}"
                placeholder="Enter email address"
                readonly
                style="background-color: #f5f5f5; color: #666"
              />
              <small style="color: #666; font-size: 12px"
                >Email cannot be changed</small
              >
            </div>
          </div>
        </div>

        <!-- Password Section -->
        <div class="password-section">
          <h3 class="section-title">Update Password</h3>
          <form method="post" id="passwordForm">
            {% csrf_token %}
            <input type="hidden" name="form_type" value="password" />

            <div class="form-row">
              <div class="form-group">
                <label for="{{ password_form.current_password.id_for_label }}"
                  >Current Password</label
                >
                {{ password_form.current_password }}
                <!-- {{
                password_form.current_password.errors }} -->
              </div>
              <div class="form-group">
                <label for="{{ password_form.new_password.id_for_label }}"
                  >New Password</label
                >
                {{ password_form.new_password }}
                <!-- {{
                password_form.new_password.errors }} -->
              </div>
              <div class="form-group">
                <label for="{{ password_form.confirm_password.id_for_label }}"
                  >Confirm Password</label
                >
                {{ password_form.confirm_password }}
                <!-- {{
                password_form.confirm_password.errors }} -->
              </div>
            </div>

            <button type="submit" class="save-button">Change Password</button>
          </form>
        </div>
      </div>
    </div>

    <script>
      // === Password Validation Functions ===
      function validatePassword(password) {
        const errors = [];

        // Check minimum length
        if (password.length < 6) {
          errors.push("Password must be at least 6 characters long.");
        }

        // Check for very common passwords
        const very_common_passwords = [
          "password",
          "123456",
          "123456789",
          "qwerty",
          "abc123",
          "admin",
        ];
        if (very_common_passwords.includes(password.toLowerCase())) {
          errors.push(
            "This password is too common. Please choose a more secure password."
          );
        }

        return errors;
      }

      function showWarning(message) {
        if (window.ToastifyUtils) {
          window.ToastifyUtils.warning(message);
        } else {
          showToast(message, "warning");
        }
      }

      function showToast(message, type = "info") {
        const backgroundColor =
          type === "error"
            ? "linear-gradient(to right, #ff416c, #ff4b2b)"
            : type === "success"
            ? "linear-gradient(to right, #4facfe, #00f2fe)"
            : type === "warning"
            ? "linear-gradient(to right, #f093fb, #f5576c)"
            : "linear-gradient(to right, #667eea, #764ba2)";

        Toastify({
          text: message,
          duration: 5000,
          gravity: "top",
          position: "right",
          backgroundColor: backgroundColor,
          stopOnFocus: true,
        }).showToast();
      }

      // === Password Form Validation ===
      document
        .getElementById("passwordForm")
        .addEventListener("submit", function (e) {
          const newPassword = document.querySelector(
            'input[name="new_password"]'
          ).value;
          const confirmPassword = document.querySelector(
            'input[name="confirm_password"]'
          ).value;

          // Validate password rules
          const passwordErrors = validatePassword(newPassword);
          if (passwordErrors.length > 0) {
            e.preventDefault();
            showWarning(passwordErrors[0]);
            return false;
          }

          // Validate password confirmation
          if (newPassword !== confirmPassword) {
            e.preventDefault();
            showWarning(
              "Passwords do not match. Please make sure both passwords are the same."
            );
            return false;
          }

          // If validation passes, proceed with form submission
          const submitBtn = document.querySelector(
            "#passwordForm .save-button"
          );
          submitBtn.textContent = "Changing...";
          submitBtn.disabled = true;
        });

      // Auto-hide messages after 5 seconds
      setTimeout(function () {
        const messages = document.querySelectorAll(".messages li");
        messages.forEach((message) => {
          message.style.opacity = "0";
          setTimeout(() => message.remove(), 300);
        });
      }, 5000);

      // 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") {
            window.location.href = "/";
          } else if (menuText === "Settings") {
            // Already on settings page
            toggleMobileMenu();
          }
        });
      });

      // Navigation functionality
      document
        .querySelector(".nav-item.home")
        .addEventListener("click", function () {
          window.location.href = "/";
        });

      // User account dropdown
      document
        .querySelector(".user-account")
        .addEventListener("click", function () {
          alert("User account menu");
        });
    </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>
