{% extends "adminlte/page.html" %}
{% load static %}

{% block page_title %}Form Wizard{% endblock %}

{% block breadcrumb %}
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Forms</a></li>
  <li class="breadcrumb-item active" aria-current="page">Wizard</li>
{% endblock %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col-lg-10 col-xl-8">
      <div class="card">
        <div class="card-body p-4">
          <!-- Step indicators -->
          <ol class="wizard-steps mb-4" id="wizard-steps">
            <li class="active" data-step="0">Account</li>
            <li data-step="1">Profile</li>
            <li data-step="2">Preferences</li>
            <li data-step="3">Review</li>
          </ol>

          <!-- Form -->
          <form id="wizard-form" novalidate>
            <!-- Step 1 -->
            <fieldset class="wizard-step" data-step="0">
              <h2 class="h5 mb-3">Create your account</h2>
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="wz-email">Email</label>
                  <input type="email" class="form-control" id="wz-email" required />
                  <div class="invalid-feedback">Please enter a valid email.</div>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="wz-username"> Username </label>
                  <input
                    type="text"
                    class="form-control"
                    id="wz-username"
                    required
                    minlength="3"
                  />
                  <div class="invalid-feedback">
                    Username must be at least 3 characters.
                  </div>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="wz-password"> Password </label>
                  <input
                    type="password"
                    class="form-control"
                    id="wz-password"
                    required
                    minlength="8"
                  />
                  <div class="invalid-feedback">
                    Password must be at least 8 characters.
                  </div>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="wz-password2"> Confirm password </label>
                  <input
                    type="password"
                    class="form-control"
                    id="wz-password2"
                    required
                  />
                  <div class="invalid-feedback">Passwords must match.</div>
                </div>
              </div>
            </fieldset>

            <!-- Step 2 -->
            <fieldset class="wizard-step d-none" data-step="1">
              <h2 class="h5 mb-3">Tell us about yourself</h2>
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="wz-first"> First name </label>
                  <input type="text" class="form-control" id="wz-first" required />
                  <div class="invalid-feedback">First name is required.</div>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="wz-last"> Last name </label>
                  <input type="text" class="form-control" id="wz-last" required />
                  <div class="invalid-feedback">Last name is required.</div>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="wz-company"> Company </label>
                  <input type="text" class="form-control" id="wz-company" />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="wz-role"> Role </label>
                  <select class="form-select" id="wz-role" required>
                    <option value="">Choose&hellip;</option>
                    <option>Founder / CEO</option>
                    <option>Engineering</option>
                    <option>Design</option>
                    <option>Marketing</option>
                    <option>Other</option>
                  </select>
                  <div class="invalid-feedback">Please select a role.</div>
                </div>
              </div>
            </fieldset>

            <!-- Step 3 -->
            <fieldset class="wizard-step d-none" data-step="2">
              <h2 class="h5 mb-3">Notification preferences</h2>
              <div class="form-check form-switch mb-2">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="wz-notif-product"
                  role="switch"
                  checked
                />
                <label class="form-check-label" for="wz-notif-product">
                  Product updates &amp; releases
                </label>
              </div>
              <div class="form-check form-switch mb-2">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="wz-notif-security"
                  role="switch"
                  checked
                />
                <label class="form-check-label" for="wz-notif-security">
                  Security alerts
                </label>
              </div>
              <div class="form-check form-switch mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="wz-notif-marketing"
                  role="switch"
                />
                <label class="form-check-label" for="wz-notif-marketing">
                  Marketing &amp; tips
                </label>
              </div>
              <label class="form-label" for="wz-frequency"> Digest frequency </label>
              <select class="form-select" id="wz-frequency">
                <option>Real time</option>
                <option selected>Daily</option>
                <option>Weekly</option>
                <option>Never</option>
              </select>
            </fieldset>

            <!-- Step 4 -->
            <fieldset class="wizard-step d-none" data-step="3">
              <h2 class="h5 mb-3">Review &amp; confirm</h2>
              <dl class="row mb-3" id="wz-summary"></dl>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="wz-terms" required />
                <label class="form-check-label" for="wz-terms">
                  I agree to the <a href="#">terms of service</a>.
                </label>
                <div class="invalid-feedback">You must accept the terms to continue.</div>
              </div>
            </fieldset>

            <!-- Navigation -->
            <div class="d-flex justify-content-between mt-4">
              <button
                type="button"
                class="btn btn-outline-secondary"
                id="wz-prev"
                disabled
              >
                <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
                Previous
              </button>
              <button type="button" class="btn btn-primary" id="wz-next">
                Next
                <i class="bi bi-arrow-right ms-1" aria-hidden="true"></i>
              </button>
              <button type="submit" class="btn btn-success d-none" id="wz-submit">
                <i class="bi bi-check-lg me-1" aria-hidden="true"></i>
                Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block extra_js %}
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const form = document.getElementById('wizard-form');
      const steps = form.querySelectorAll('.wizard-step');
      const indicators = document.querySelectorAll('#wizard-steps li');
      const prevBtn = document.getElementById('wz-prev');
      const nextBtn = document.getElementById('wz-next');
      const submitBtn = document.getElementById('wz-submit');
      let current = 0;

      const show = (i) => {
        steps.forEach((s, idx) => s.classList.toggle('d-none', idx !== i));
        indicators.forEach((li, idx) => {
          li.classList.toggle('active', idx === i);
          li.classList.toggle('completed', idx < i);
        });
        prevBtn.disabled = i === 0;
        const last = i === steps.length - 1;
        nextBtn.classList.toggle('d-none', last);
        submitBtn.classList.toggle('d-none', !last);
        if (last) renderSummary();
      };

      const validateStep = (i) => {
        const step = steps[i];
        const fields = step.querySelectorAll('input, select, textarea');
        let valid = true;
        fields.forEach((field) => {
          field.classList.remove('is-invalid');
          if (!field.checkValidity()) {
            field.classList.add('is-invalid');
            valid = false;
          }
        });
        // Password match check on step 0
        if (i === 0) {
          const p1 = document.getElementById('wz-password');
          const p2 = document.getElementById('wz-password2');
          if (p1.value !== p2.value) {
            p2.classList.add('is-invalid');
            valid = false;
          }
        }
        return valid;
      };

      const renderSummary = () => {
        const summary = document.getElementById('wz-summary');
        const get = (id) => document.getElementById(id);
        const rows = [
          ['Email', get('wz-email').value],
          ['Username', get('wz-username').value],
          ['Name', `${get('wz-first').value} ${get('wz-last').value}`],
          ['Company', get('wz-company').value || '—'],
          ['Role', get('wz-role').value || '—'],
          ['Digest', get('wz-frequency').value],
        ];
        summary.innerHTML = rows
          .map(
            ([k, v]) =>
              `<dt class="col-sm-4 text-secondary fw-normal">${k}</dt><dd class="col-sm-8 fw-semibold">${v}</dd>`,
          )
          .join('');
      };

      nextBtn.addEventListener('click', () => {
        if (!validateStep(current)) return;
        if (current < steps.length - 1) {
          current++;
          show(current);
        }
      });

      prevBtn.addEventListener('click', () => {
        if (current > 0) {
          current--;
          show(current);
        }
      });

      form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (!validateStep(current)) return;
        alert('Wizard complete! Form would submit here.');
      });

      show(0);
    });
  </script>
{% endblock %}