{% extends 'dashboard/base.html' %}
{% block title %}{{ action }} Staff{% endblock %}
{% block page_title %}{{ action }} Staff Member{% endblock %}

{% block extra_css %}
<style>
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.role-card{border:2px solid var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .2s;background:#fff;}
.role-card:has(input:checked){border-color:var(--accent);background:rgba(201,168,76,.06);}
.role-card input{display:none;}
.role-title{font-weight:600;font-size:13px;margin-bottom:3px;}
.role-desc{font-size:11px;color:var(--muted);}
.role-badge-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.staff-form-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;}
@media(max-width:900px){ .staff-form-grid{grid-template-columns:1fr;} }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="breadcrumb">
    <a href="{% url 'dashboard:home' %}">Dashboard</a><span>/</span>
    <a href="{% url 'dashboard:staff_list' %}">Staff</a><span>/</span>
    <span>{{ action }}</span>
  </div>
  <div class="page-title">{{ action }} Staff Member</div>
</div>

<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div style="display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start" class="staff-form-grid">

  <!-- Left -->
  <div>
    <!-- Personal Info -->
    <div class="card" style="margin-bottom:20px">
      <div class="card-header"><div class="card-title"><i class="fas fa-user" style="color:var(--accent)"></i> Personal Information</div></div>
      <div class="card-body">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">First Name</label>
            <input type="text" name="first_name" class="form-control" value="{{ staff_profile.user.first_name|default:'' }}" placeholder="John">
          </div>
          <div class="form-group">
            <label class="form-label">Last Name</label>
            <input type="text" name="last_name" class="form-control" value="{{ staff_profile.user.last_name|default:'' }}" placeholder="Doe">
          </div>
        </div>
        {% if action == 'Create' %}
        <div class="form-group">
          <label class="form-label">Username *</label>
          <input type="text" name="username" class="form-control" required placeholder="e.g. john_doe">
        </div>
        {% endif %}
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Email Address *</label>
            <input type="email" name="email" class="form-control" value="{{ staff_profile.user.email|default:'' }}" required placeholder="email@example.com">
          </div>
          <div class="form-group">
            <label class="form-label">Phone Number</label>
            <input type="tel" name="phone" class="form-control" value="{{ staff_profile.phone|default:'' }}" placeholder="+234 800 000 0000">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">{% if action == 'Create' %}Password *{% else %}New Password <span style="color:var(--muted);font-weight:400">(leave blank to keep current)</span>{% endif %}</label>
          <input type="password" name="password" class="form-control" {% if action == 'Create' %}required{% endif %} placeholder="Minimum 8 characters">
        </div>
      </div>
    </div>

    <!-- Role -->
    <div class="card" style="margin-bottom:20px">
      <div class="card-header"><div class="card-title"><i class="fas fa-id-badge" style="color:var(--accent)"></i> Role</div></div>
      <div class="card-body">
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px;margin-bottom:16px">
          {% for val, label in role_choices %}
          <label class="role-card">
            <input type="radio" name="role" value="{{ val }}" {% if staff_profile and staff_profile.role == val %}checked{% elif not staff_profile and val == 'viewer' %}checked{% endif %} onchange="applyRolePreset('{{ val }}')">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
              <div class="role-badge-dot" style="background:{% if val == 'superadmin' %}#c9a84c{% elif val == 'manager' %}#3182ce{% elif val == 'editor' %}#38a169{% elif val == 'support' %}#d69e2e{% else %}#718096{% endif %}"></div>
              <div class="role-title">{{ label }}</div>
            </div>
            <div class="role-desc">
              {% if val == 'superadmin' %}Full access to everything
              {% elif val == 'manager' %}All except staff management
              {% elif val == 'editor' %}Products, categories & reviews
              {% elif val == 'support' %}Orders, customers & reviews
              {% else %}Analytics view only{% endif %}
            </div>
          </label>
          {% endfor %}
        </div>
        <p style="font-size:12px;color:var(--muted)"><i class="fas fa-info-circle"></i> Selecting a role auto-fills the permissions below. You can then customise individually.</p>
      </div>
    </div>

    <!-- Permissions -->
    <div class="card">
      <div class="card-header"><div class="card-title"><i class="fas fa-key" style="color:var(--accent)"></i> Permissions</div></div>
      <div class="card-body">
        <div class="perm-grid" id="permGrid">
          {% for field, label, icon in perm_fields %}
          <label class="check-perm" id="perm_{{ field }}">
            <input type="checkbox" name="{{ field }}" id="cb_{{ field }}"
              {% if staff_profile %}
                {% if field == 'can_manage_products'   and staff_profile.can_manage_products   %}checked
                {% elif field == 'can_manage_categories' and staff_profile.can_manage_categories %}checked
                {% elif field == 'can_manage_orders'     and staff_profile.can_manage_orders     %}checked
                {% elif field == 'can_manage_customers'  and staff_profile.can_manage_customers  %}checked
                {% elif field == 'can_manage_coupons'    and staff_profile.can_manage_coupons    %}checked
                {% elif field == 'can_manage_reviews'    and staff_profile.can_manage_reviews    %}checked
                {% elif field == 'can_view_analytics'    and staff_profile.can_view_analytics    %}checked
                {% elif field == 'can_manage_staff'      and staff_profile.can_manage_staff      %}checked
                {% endif %}
              {% endif %}>
            <div class="check-perm-icon"><i class="fas {{ icon }}"></i></div>
            <span class="check-perm-label">{{ label }}</span>
          </label>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <!-- Right sidebar -->
  <div>
    <div class="card" style="margin-bottom:16px">
      <div class="card-header"><div class="card-title">Profile Photo</div></div>
      <div class="card-body">
        {% if staff_profile and staff_profile.avatar %}
        <div style="text-align:center;margin-bottom:12px">
          <img src="{{ staff_profile.avatar.url }}" style="width:80px;height:80px;border-radius:50%;object-fit:cover;">
        </div>
        {% endif %}
        <input type="file" name="avatar" accept="image/*" class="form-control">
        <div class="form-hint">JPG or PNG, max 2MB</div>
      </div>
    </div>

    {% if action == 'Edit' %}
    <div class="card" style="margin-bottom:16px">
      <div class="card-header"><div class="card-title">Account Status</div></div>
      <div class="card-body">
        <label class="toggle-switch">
          <input type="checkbox" name="is_active" {% if staff_profile.is_active %}checked{% endif %}>
          <div class="toggle-track"></div>
          <span class="toggle-label">Account Active</span>
        </label>
      </div>
    </div>
    {% endif %}

    <div class="card">
      <div class="card-body">
        <button type="submit" class="btn btn-accent" style="width:100%;justify-content:center;padding:11px">
          <i class="fas fa-save"></i> {{ action }} Staff Member
        </button>
        <a href="{% url 'dashboard:staff_list' %}" class="btn btn-outline" style="width:100%;justify-content:center;margin-top:10px">
          Cancel
        </a>
      </div>
    </div>
  </div>
</div>
</form>
{% endblock %}

{% block extra_js %}
<script>
const rolePerms = {
  superadmin:{can_manage_products:1,can_manage_categories:1,can_manage_orders:1,can_manage_customers:1,can_manage_coupons:1,can_manage_reviews:1,can_view_analytics:1,can_manage_staff:1},
  manager:   {can_manage_products:1,can_manage_categories:1,can_manage_orders:1,can_manage_customers:1,can_manage_coupons:1,can_manage_reviews:1,can_view_analytics:1,can_manage_staff:0},
  editor:    {can_manage_products:1,can_manage_categories:1,can_manage_orders:0,can_manage_customers:0,can_manage_coupons:0,can_manage_reviews:1,can_view_analytics:0,can_manage_staff:0},
  support:   {can_manage_products:0,can_manage_categories:0,can_manage_orders:1,can_manage_customers:1,can_manage_coupons:0,can_manage_reviews:1,can_view_analytics:0,can_manage_staff:0},
  viewer:    {can_manage_products:0,can_manage_categories:0,can_manage_orders:0,can_manage_customers:0,can_manage_coupons:0,can_manage_reviews:0,can_view_analytics:1,can_manage_staff:0},
};
function applyRolePreset(role){
  const perms=rolePerms[role]||{};
  Object.entries(perms).forEach(([k,v])=>{
    const cb=document.getElementById('cb_'+k);
    if(cb) cb.checked=!!v;
  });
}
</script>
{% endblock %}