{% extends "core/base.html" %}
{% load static %}
{% block title %}Role Permissions — SwiftPOS{% endblock %}
{% block topbar_title %}Staff Role Permissions{% endblock %}

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

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-3">
    <div>
      <h5 class="mb-1 fw-bold d-flex align-items-center gap-2">
        <span style="background:linear-gradient(135deg,#4f46e5,#7c3aed);width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;">
          <i class="fas fa-shield-halved text-white" style="font-size:.9rem;"></i>
        </span>
        Staff Role Permissions
      </h5>
      <p class="text-muted small mb-0">Enable or disable features for each staff role. <strong>Admin always has full access.</strong></p>
    </div>
  </div>

  {% if messages %}
  <div class="mb-3">
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show py-2 small" role="alert">
      <i class="fas fa-check-circle me-1"></i>{{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <form method="post" id="permissionsForm">
    {% csrf_token %}

    <!-- Role Column Headers -->
    <div class="row g-0 mb-0">
      <!-- spacer -->
      <div class="col-4"></div>
      <div class="col-4" style="padding-right:8px;">
        <div style="background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:14px 14px 0 0;padding:.75rem 1.25rem;">
          <div class="d-flex align-items-center gap-2">
            <i class="fas fa-cash-register text-white fs-6"></i>
            <span class="text-white fw-bold">Cashier</span>
          </div>
          <div class="text-white opacity-75 small">Front-line POS staff</div>
        </div>
      </div>
      <div class="col-4" style="padding-left:8px;">
        <div style="background:linear-gradient(135deg,#0ea5e9,#0284c7);border-radius:14px 14px 0 0;padding:.75rem 1.25rem;">
          <div class="d-flex align-items-center gap-2">
            <i class="fas fa-id-badge text-white fs-6"></i>
            <span class="text-white fw-bold">Manager</span>
          </div>
          <div class="text-white opacity-75 small">Supervisory staff</div>
        </div>
      </div>
    </div>

    <!-- Permission rows by section -->
    {% for section_name, section_fields in permission_sections %}

    <!-- Section header -->
    <div style="background:#f1f5f9;border:1px solid #e2e8f0;border-top:none;padding:.4rem 1rem;">
      <span style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#475569;">
        {% if section_name == 'POS Operations' %}<i class="fas fa-cash-register me-1"></i>
        {% elif section_name == 'Reports & Finance' %}<i class="fas fa-chart-bar me-1"></i>
        {% elif section_name == 'Analytics & Insights' %}<i class="fas fa-lightbulb me-1"></i>
        {% elif section_name == 'Inventory Management' %}<i class="fas fa-box me-1"></i>
        {% elif section_name == 'Customer Management' %}<i class="fas fa-users me-1"></i>
        {% elif section_name == 'Staff & Administration' %}<i class="fas fa-user-shield me-1"></i>
        {% endif %}
        {{ section_name }}
      </span>
    </div>

    <!-- Rows for each permission in this section -->
    {% for field, label in section_fields %}
    <div class="row g-0 perm-row" style="border:1px solid #e2e8f0;border-top:none;background:#fff;">
      <!-- Label -->
      <div class="col-4 d-flex align-items-center px-3 py-2" style="border-right:1px solid #f1f5f9;">
        <span class="small text-dark">{{ label }}</span>
      </div>

      <!-- Cashier toggle -->
      <div class="col-4 d-flex align-items-center justify-content-center py-2" style="border-right:1px solid #f1f5f9;padding-right:8px;">
        <div class="form-check form-switch mb-0">
          <input class="form-check-input perm-toggle" type="checkbox"
                 role="switch"
                 name="cashier_{{ field }}"
                 id="id_cashier_{{ field }}"
                 style="cursor:pointer;width:40px;height:22px;"
                 {% for pfield, pval in cashier_values %}{% if pfield == field %}{% if pval %}checked{% endif %}{% endif %}{% endfor %}>
        </div>
      </div>

      <!-- Manager toggle -->
      <div class="col-4 d-flex align-items-center justify-content-center py-2" style="padding-left:8px;">
        <div class="form-check form-switch mb-0">
          <input class="form-check-input perm-toggle perm-manager" type="checkbox"
                 role="switch"
                 name="manager_{{ field }}"
                 id="id_manager_{{ field }}"
                 style="cursor:pointer;width:40px;height:22px;"
                 {% for pfield, pval in manager_values %}{% if pfield == field %}{% if pval %}checked{% endif %}{% endif %}{% endfor %}>
        </div>
      </div>
    </div>
    {% endfor %}
    {% endfor %}

    <!-- Admin notice -->
    <div class="alert border mt-4 py-2 small d-flex align-items-center gap-2" style="background:#fffbeb;border-color:#fde68a!important;">
      <i class="fas fa-crown text-warning"></i>
      <span><strong>Admin</strong> role always has <strong>full access</strong> to all features and cannot be restricted via this page.</span>
    </div>

    <!-- Save -->
    <div class="mt-3 d-flex gap-2 justify-content-end">
      <a href="{% url 'analytics:insights' %}" class="btn btn-outline-secondary">Cancel</a>
      <button type="submit" class="btn btn-primary px-4" id="saveBtn">
        <i class="fas fa-save me-1"></i>Save Permissions
      </button>
    </div>
  </form>
</div>

<style>
.form-check-input:checked {
  background-color: #4f46e5;
  border-color: #4f46e5;
}
.perm-manager:checked {
  background-color: #0ea5e9;
  border-color: #0ea5e9;
}
.perm-row:hover {
  background: #f8fafc !important;
}
</style>

<script>
document.getElementById('permissionsForm').addEventListener('submit', function() {
  const btn = document.getElementById('saveBtn');
  btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Saving...';
  btn.disabled = true;
});
</script>
{% endblock %}