{% extends "core/base.html" %}
{% load static %}

{% block title %}{% if mode == "edit" %}Edit Staff{% else %}Add Staff{% endif %} — SwiftPOS{% endblock %}
{% block topbar_title %}{% if mode == "edit" %}Edit Staff{% else %}Add Staff{% endif %}{% endblock %}

{% block extra_css %}
<style>
.form-card {
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border: none;
}
.form-card .card-header {
  border-radius: 16px 16px 0 0;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  padding: 1.1rem 1.5rem;
}
.form-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7c3aed;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #ede9fe;
}
.sp-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.3rem;
  display: block;
}
.sp-field input,
.sp-field select,
.sp-field textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.8rem;
  font-size: 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  font-family: inherit;
}
.sp-field input:focus,
.sp-field select:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.sp-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2.2rem;
}
.sp-field .field-error {
  font-size: 0.74rem;
  color: #dc2626;
  margin-top: 0.25rem;
}
.sp-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.sp-checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #7c3aed;
  border-radius: 5px;
  flex-shrink: 0;
  cursor: pointer;
}
.sp-checkbox-row label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}
.btn-save {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border: none;
  color: #fff;
  padding: 0.55rem 1.8rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: opacity .15s, transform .1s;
}
.btn-save:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  color: #fff;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-0" style="max-width:820px;">

  <!-- Breadcrumb -->
  <nav class="mb-3" style="font-size:.8rem;">
    <a href="{% url 'user_list' %}" class="text-decoration-none text-muted">
      <i class="fas fa-users me-1"></i>Staff
    </a>
    <span class="text-muted mx-1">/</span>
    <span class="text-dark fw-semibold">{% if mode == "edit" %}Edit {{ user_obj.get_full_name|default:user_obj.username }}{% else %}New Staff Member{% endif %}</span>
  </nav>

  <div class="card form-card">
    <div class="card-header d-flex align-items-center gap-3">
      <div class="rounded-circle d-flex align-items-center justify-content-center"
           style="width:42px;height:42px;background:rgba(255,255,255,0.18);">
        <i class="fas {% if mode == 'edit' %}fa-user-edit{% else %}fa-user-plus{% endif %} fa-lg"></i>
      </div>
      <div>
        <div class="fw-bold" style="font-size:1rem;">
          {% if mode == "edit" %}Edit Staff Account{% else %}New Staff Account{% endif %}
        </div>
        <div style="font-size:.78rem;opacity:.75;">
          {% if mode == "edit" %}Update details for {{ user_obj.get_full_name|default:user_obj.username }}{% else %}Fill in the details below to create a new staff member{% endif %}
        </div>
      </div>
    </div>

    <div class="card-body p-4">
      <form method="post" novalidate>
        {% csrf_token %}

        <!-- Non-field errors -->
        {% if form.non_field_errors %}
        <div class="alert alert-danger rounded-3 mb-3 py-2 px-3" style="font-size:.82rem;">
          {% for e in form.non_field_errors %}{{ e }}{% endfor %}
        </div>
        {% endif %}

        <!-- Personal Info -->
        <div class="form-section-title"><i class="fas fa-id-card me-2"></i>Personal Information</div>
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <div class="sp-field">
              <label for="{{ form.username.id_for_label }}">Username <span class="text-danger">*</span></label>
              <input type="text" name="username"
                     id="{{ form.username.id_for_label }}"
                     value="{{ form.username.value|default:'' }}"
                     autocomplete="username"
                     {% if form.username.field.required %}required{% endif %}>
              {% for e in form.username.errors %}<div class="field-error">{{ e }}</div>{% endfor %}
            </div>
          </div>
          <div class="col-md-4">
            <div class="sp-field">
              <label for="{{ form.first_name.id_for_label }}">First Name</label>
              <input type="text" name="first_name"
                     id="{{ form.first_name.id_for_label }}"
                     value="{{ form.first_name.value|default:'' }}">
              {% for e in form.first_name.errors %}<div class="field-error">{{ e }}</div>{% endfor %}
            </div>
          </div>
          <div class="col-md-4">
            <div class="sp-field">
              <label for="{{ form.last_name.id_for_label }}">Last Name</label>
              <input type="text" name="last_name"
                     id="{{ form.last_name.id_for_label }}"
                     value="{{ form.last_name.value|default:'' }}">
              {% for e in form.last_name.errors %}<div class="field-error">{{ e }}</div>{% endfor %}
            </div>
          </div>
          <div class="col-md-4">
            <div class="sp-field">
              <label for="{{ form.email.id_for_label }}">Email</label>
              <input type="email" name="email"
                     id="{{ form.email.id_for_label }}"
                     value="{{ form.email.value|default:'' }}">
              {% for e in form.email.errors %}<div class="field-error">{{ e }}</div>{% endfor %}
            </div>
          </div>
          <div class="col-md-4">
            <div class="sp-field">
              <label for="{{ form.phone.id_for_label }}">Phone</label>
              <input type="text" name="phone"
                     id="{{ form.phone.id_for_label }}"
                     value="{{ form.phone.value|default:'' }}">
              {% for e in form.phone.errors %}<div class="field-error">{{ e }}</div>{% endfor %}
            </div>
          </div>
        </div>

        <!-- Role & Branch -->
        <div class="form-section-title"><i class="fas fa-sitemap me-2"></i>Role & Access</div>
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <div class="sp-field">
              <label for="{{ form.role.id_for_label }}">Role <span class="text-danger">*</span></label>
              {{ form.role }}
              {% for e in form.role.errors %}<div class="field-error">{{ e }}</div>{% endfor %}
            </div>
          </div>
          <div class="col-md-4">
            <div class="sp-field">
              <label for="{{ form.branch.id_for_label }}">Branch</label>
              {{ form.branch }}
              {% for e in form.branch.errors %}<div class="field-error">{{ e }}</div>{% endfor %}
            </div>
          </div>
          <div class="col-md-4 d-flex align-items-end pb-1">
            <div class="sp-checkbox-row">
              {{ form.is_active }}
              <label for="{{ form.is_active.id_for_label }}">Active account</label>
            </div>
          </div>
        </div>

        {% if mode == "create" %}
        <!-- Password -->
        <div class="form-section-title"><i class="fas fa-lock me-2"></i>Password</div>
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <div class="sp-field">
              <label for="{{ form.password1.id_for_label }}">Password <span class="text-danger">*</span></label>
              <input type="password" name="password1"
                     id="{{ form.password1.id_for_label }}"
                     autocomplete="new-password" required>
              {% for e in form.password1.errors %}<div class="field-error">{{ e }}</div>{% endfor %}
            </div>
          </div>
          <div class="col-md-4">
            <div class="sp-field">
              <label for="{{ form.password2.id_for_label }}">Confirm Password <span class="text-danger">*</span></label>
              <input type="password" name="password2"
                     id="{{ form.password2.id_for_label }}"
                     autocomplete="new-password" required>
              {% for e in form.password2.errors %}<div class="field-error">{{ e }}</div>{% endfor %}
            </div>
          </div>
        </div>
        {% endif %}

        <!-- Actions -->
        <div class="d-flex justify-content-between align-items-center pt-2 border-top mt-2">
          <a href="{% url 'user_list' %}" class="btn btn-outline-secondary"
             style="border-radius:10px;font-size:.85rem;">
            <i class="fas fa-arrow-left me-1"></i> Cancel
          </a>
          <button type="submit" class="btn btn-save">
            <i class="fas fa-save me-1"></i>
            {% if mode == "edit" %}Save Changes{% else %}Create Staff{% endif %}
          </button>
        </div>

      </form>
    </div>
  </div>
</div>

<script>
/* Apply .sp-field styling to select/widget fields rendered by Django */
document.querySelectorAll('.sp-field select, .sp-field input[type="checkbox"]').forEach(function(el) {
  if (el.type === 'checkbox') return; // already handled
  el.style.display = 'block';
  el.style.width = '100%';
});
</script>
{% endblock %}