{% extends "static/login_base.html" %}

{% block title %}enviPath - Sign In{% endblock %}

{% block extra_styles %}
  <style>
    /* Tab styling */
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }
    input[type="radio"].tab-radio {
      display: none;
    }
    .tab-label {
      cursor: pointer;
      padding: 0.75rem 1.5rem;
      border-bottom: 2px solid transparent;
      transition: all 0.3s ease;
    }
    .tab-label:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    input[type="radio"].tab-radio:checked + .tab-label {
      border-bottom-color: #3b82f6;
      font-weight: 600;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="card bg-base-200 mb-6 ">
    <div class="card-body">
      <h3 class="card-title">Welcome to the new enviPath!</h3>
    </div>
  </div>
  <!-- Tab Navigation -->
  <div class="border-base-300 mb-6 border-b">
    <div class="flex justify-start">
      <input
        type="radio"
        name="auth-tab"
        id="tab-sso"
        class="tab-radio"
        checked
      />
      <label for="tab-sso" class="tab-label">SSO</label>

      <input
        type="radio"
        name="auth-tab"
        id="tab-signin"
        class="tab-radio"
      />
      <label for="tab-signin" class="tab-label">Local User</label>
    </div>
  </div>

  <!-- SSO Tab -->
  <div id="content-sso" class="tab-content active">
      <button role="link" onclick="window.location.href='/entra/login'" name="sso" class="btn btn-primary w-full">
        Login with Microsoft
      </button>
  </div>

  <!-- Sign In Tab -->
  <div id="content-signin" class="tab-content">
    <form method="post" action="{% url 'login' %}" class="space-y-4">
      {% csrf_token %}
      <input type="hidden" name="login" value="true" />

      <div class="form-control">
        <label class="label" for="username">
          <span class="label-text">Account</span>
        </label>
        <input
          type="text"
          id="username"
          name="username"
          placeholder="Username or Email"
          class="input input-bordered w-full"
          required
          autocomplete="username"
        />
      </div>

      <div class="form-control">
        <label class="label" for="passwordinput">
          <span class="label-text">Password</span>
        </label>
        <input
          type="password"
          id="passwordinput"
          name="password"
          placeholder="••••••••"
          class="input input-bordered w-full"
          required
          autocomplete="current-password"
        />
      </div>

      <div class="text-right">
        <a href="{% url 'password_reset' %}" class="link link-primary text-sm"
          >Forgot password?</a
        >
      </div>

      <input type="hidden" name="next" value="{{ next }}" />

      <button type="submit" name="signin" class="btn btn-primary w-full">
        Sign In
      </button>
    </form>
  </div>

{% endblock %}

{% block extra_scripts %}
  <script>
    // Tab switching functionality
    document.querySelectorAll('input[name="auth-tab"]').forEach((radio) => {
      radio.addEventListener("change", function () {
        // Hide all content
        document.querySelectorAll(".tab-content").forEach((content) => {
          content.classList.remove("active");
        });

        // Show selected content
        const contentId = "content-" + this.id.replace("tab-", "");
        document.getElementById(contentId).classList.add("active");
      });
    });

    // Check for hash in URL to auto-select tab
    window.addEventListener("DOMContentLoaded", function () {
      const hash = window.location.hash.substring(1); // Remove the # symbol
      if (hash === "signup" || hash === "signin") {
        const tabRadio = document.getElementById("tab-" + hash);
        if (tabRadio) {
          tabRadio.checked = true;
          // Trigger change event to show correct content
          tabRadio.dispatchEvent(new Event("change"));
        }
      }
    });
  </script>
{% endblock %}