{% extends 'exams/base.html' %}
{% load static %}

{% block page_title %}Manage Users{% endblock %}

{% block content %}

<div class="container mt-4">

  <div class="d-flex justify-content-between mb-3">
    <h3><i class="fas fa-users-cog"></i> Manage Users</h3>

    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
      <i class="fas fa-user-plus"></i> Add User
    </button>

    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bulkCreateModal">
      <i class="fas fa-file-upload"></i> Bulk ExcelUpload
    </button>

<!--     <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bulkRoleUpdateModal">
      <i class="fas fa-file-upload"></i> Bulk Role Update
    </button>

    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bulkUploadModal">
      <i class="fas fa-file-upload"></i> Bulk Upload
    </button>
 -->



<form method="POST">
  {% csrf_token %}
  <input type="hidden" name="mode" value="download_template">
  <input type="hidden" name="template" value="create">
  <button class="btn btn-outline-primary btn-sm">Download Create Template</button>
</form>

<form method="POST">
  {% csrf_token %}
  <input type="hidden" name="mode" value="download_template">
  <input type="hidden" name="template" value="update">
  <button class="btn btn-outline-warning btn-sm">Download Role Update Template</button>
</form>

  </div>




    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endif %}
    





<form method="get" class="mb-3 d-flex">
  <input
    type="text"
    name="q"
    value="{{ search }}"
    class="form-control me-2"
    placeholder="Search username, email, role, region, school..."
  >
  <button type="submit" class="btn btn-primary">Search</button>
</form>

<div class="d-flex justify-content-between align-items-center mt-3">

  <!-- LEFT: PAGE INFO -->
  <div class="text-muted small">
    Showing page {{ users.number }} of {{ users.paginator.num_pages }}
  </div>

  <!-- RIGHT: PAGINATION BUTTONS -->
  <nav>
    <ul class="pagination pagination-sm mb-0">

      {% if users.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?page=1&q={{ search }}">«</a>
        </li>
        <li class="page-item">
          <a class="page-link"
             href="?page={{ users.previous_page_number }}&q={{ search }}">‹</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">«</span></li>
        <li class="page-item disabled"><span class="page-link">‹</span></li>
      {% endif %}

      <!-- PAGE NUMBERS -->
      {% for num in users.paginator.page_range %}
        {% if num >= users.number|add:-2 and num <= users.number|add:2 %}
          {% if num == users.number %}
            <li class="page-item active">
              <span class="page-link">{{ num }}</span>
            </li>
          {% else %}
            <li class="page-item">
              <a class="page-link" href="?page={{ num }}&q={{ search }}">{{ num }}</a>
            </li>
          {% endif %}
        {% endif %}
      {% endfor %}

      {% if users.has_next %}
        <li class="page-item">
          <a class="page-link"
             href="?page={{ users.next_page_number }}&q={{ search }}">›</a>
        </li>
        <li class="page-item">
          <a class="page-link"
             href="?page={{ users.paginator.num_pages }}&q={{ search }}">»</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">›</span></li>
        <li class="page-item disabled"><span class="page-link">»</span></li>
      {% endif %}

    </ul>
  </nav>
</div>
  <table id="userTable" class="table table-striped table-bordered">
    <thead class="table-dark"><tr><th>#</th><th>Username</th><th>Email</th><th>Role</th><th>Region/District/Ward/School</th><th>Action</th></tr></thead>

<tbody>
{% for u in users %}
<tr>
    <td>{{ forloop.counter }}</td>
    <td>{{ u.username }}</td>
    <td>{{ u.email }}</td>

    <!-- USER ROLE -->
    <td>
        {% if u.profile %}
            {{ u.profile.role }}
        {% else %}
            <span class="text-muted">—</span>
        {% endif %}
    </td>

    <!-- REGION / DISTRICT / WARD / SCHOOL -->
    <td>
        {% if u.profile %}
            {% if u.profile.region %}
                {{ u.profile.region.name }}
            {% else %}
                —
            {% endif %} /

            {% if u.profile.district %}
                {{ u.profile.district.name }}
            {% else %}
                —
            {% endif %} /

            {% if u.profile.ward %}
                {{ u.profile.ward.name }}
            {% else %}
                —
            {% endif %} /

            {% if u.profile.school %}
                {{ u.profile.school.name }}
            {% else %}
                —
            {% endif %}
        {% else %}
            <span class="text-muted">No profile</span>
        {% endif %}
    </td>

            <td>




          <button class="btn btn-sm btn-secondary toggle-user"
                  data-id="{{ u.id }}"

                  data-url="{% url 'exams:toggle_user_active' u.id %}">
                  <i class="fas fa-users"></i>
            <input type="hidden" id="csrf-token" value="{{ csrf_token }}">

            {% if u.is_active %}Disable{% else %}Enable{% endif %}
          </button>

<button type="button"
        class="btn btn-sm btn-warning reset-pass"
        data-url="{% url 'exams:reset_user_password' u.id %}"
        title="Reset password to 12345678">
  <i class="fas fa-key"></i>
</button>

<button type="button"
        class="btn btn-sm btn-info edit-user"
        data-url="{% url 'exams:edit_user_ajax' u.id %}"
        data-id="{{ u.id }}"
        data-username="{{ u.username }}"
        data-email="{{ u.email }}"
        data-role="{{ u.profile.role }}">
  <i class="fas fa-edit"></i>
</button>





        </td>

</tr>
{% endfor %}
</tbody>
</table>

<div class="d-flex justify-content-between align-items-center mt-3">

  <!-- LEFT: PAGE INFO -->
  <div class="text-muted small">
    Showing page {{ users.number }} of {{ users.paginator.num_pages }}
  </div>

  <!-- RIGHT: PAGINATION BUTTONS -->
  <nav>
    <ul class="pagination pagination-sm mb-0">

      {% if users.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?page=1&q={{ search }}">«</a>
        </li>
        <li class="page-item">
          <a class="page-link"
             href="?page={{ users.previous_page_number }}&q={{ search }}">‹</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">«</span></li>
        <li class="page-item disabled"><span class="page-link">‹</span></li>
      {% endif %}

      <!-- PAGE NUMBERS -->
      {% for num in users.paginator.page_range %}
        {% if num >= users.number|add:-2 and num <= users.number|add:2 %}
          {% if num == users.number %}
            <li class="page-item active">
              <span class="page-link">{{ num }}</span>
            </li>
          {% else %}
            <li class="page-item">
              <a class="page-link" href="?page={{ num }}&q={{ search }}">{{ num }}</a>
            </li>
          {% endif %}
        {% endif %}
      {% endfor %}

      {% if users.has_next %}
        <li class="page-item">
          <a class="page-link"
             href="?page={{ users.next_page_number }}&q={{ search }}">›</a>
        </li>
        <li class="page-item">
          <a class="page-link"
             href="?page={{ users.paginator.num_pages }}&q={{ search }}">»</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">›</span></li>
        <li class="page-item disabled"><span class="page-link">»</span></li>
      {% endif %}

    </ul>
  </nav>
</div>




</div>




<div class="modal fade" id="editUserModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Edit User</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <input type="hidden" id="edit-user-url">

        <div class="mb-2">
          <label>Username</label>
          <input class="form-control" id="edit-username">
        </div>

        <div class="mb-2">
          <label>Email</label>
          <input class="form-control" id="edit-email">
        </div>

        <div class="mb-2">
          <label>Role</label>
          <select class="form-control" id="edit-role">
            <option value="super">Super</option>
            <option value="region">Region</option>
            <option value="district">District</option>
            <option value="ward">Ward</option>
            <option value="school">School</option>
            <option value="data">Data</option>
          </select>
        </div>

        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="edit-active">
          <label class="form-check-label">Active</label>
        </div>

      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" id="save-user-btn">Save</button>
      </div>

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





<!-- ================= ADD USER MODAL ================= -->
<div class="modal fade" id="addUserModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="POST">
        {% csrf_token %}
        <input type="hidden" name="mode" value="add_single">

        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title"><i class="fas fa-user-plus"></i> Add User</h5>
          <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">

          <div class="row g-3">

            <div class="col-md-6">
              <label class="form-label fw-bold">Username</label>
              <input class="form-control" name="username" required>
            </div>

            <div class="col-md-6">
              <label class="form-label fw-bold">Email</label>
              <input class="form-control" name="email" type="email">
            </div>

            <div class="col-md-6">
              <label class="form-label fw-bold">Password (optional)</label>
              <input class="form-control" name="password" type="password">
            </div>

            <div class="col-md-6">
              <label class="form-label fw-bold">Role</label>
              <select class="form-select" name="role" id="roleSelect" required>
                <option value="">-- choose role --</option>
                <option value="super">Super Admin</option>
                <option value="region">Region Admin</option>
                <option value="district">District Admin</option>
                <option value="ward">Ward Admin</option>
                <option value="school">School Admin</option>
                <option value="data">Data Capture</option>
              </select>
            </div>

            <!-- REGION -->
            <div class="col-md-6">
              <label class="form-label fw-bold">Region</label>
              <select class="form-select" name="region" id="regionSelect">
                <option value="">-- none --</option>
                {% for r in regions %}
                  <option value="{{ r.id }}">{{ r.name }}</option>
                {% endfor %}
              </select>
            </div>

            <!-- DISTRICT -->
            <div class="col-md-6">
              <label class="form-label fw-bold">District</label>
              <select class="form-select" name="district" id="districtSelect">
                <option value="">-- none --</option>
              </select>
            </div>

            <!-- WARD -->
            <div class="col-md-6">
              <label class="form-label fw-bold">Ward</label>
              <select class="form-select" name="ward" id="wardSelect">
                <option value="">-- none --</option>
              </select>
            </div>

            <!-- SCHOOL -->
            <div class="col-md-6">
              <label class="form-label fw-bold">School</label>
              <select class="form-select" name="school" id="schoolSelect">
                <option value="">-- none --</option>
              </select>
            </div>

          </div> <!-- row -->

        </div>

        <div class="modal-footer">
          <button class="btn btn-primary w-100" type="submit">
            <i class="fas fa-save"></i> Save User
          </button>
        </div>

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









<!-- ================= BULK CREATE USERS (EXCEL) ================= -->
<div class="modal fade" id="bulkCreateModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="hidden" name="mode" value="bulk_create_excel">

        <div class="modal-header bg-success text-white">
          <h5 class="modal-title">
            <i class="fas fa-users"></i> Bulk Create Users (Excel)
          </h5>
          <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <p class="fw-bold mb-2">Excel columns required:</p>
          <pre class="bg-light p-2 small">
username | email | role | region_id | district_id | ward_id | school_code | password
          </pre>

          <p class="text-muted small">
            • Leave password empty to create user with unusable password<br>
            • Location fields depend on role
          </p>

          <input type="file"
                 name="excel_file"
                 accept=".xlsx"
                 class="form-control"
                 required>
        </div>

        <div class="modal-footer">
          <button class="btn btn-success w-100">
            <i class="fas fa-upload"></i> Upload & Create
          </button>
        </div>
      </form>
    </div>
  </div>
</div>










<!-- ================= BULK ROLE UPDATE (EXCEL) ================= -->
<div class="modal fade" id="bulkRoleUpdateModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="hidden" name="mode" value="bulk_update_roles_excel">

        <div class="modal-header bg-warning">
          <h5 class="modal-title">
            <i class="fas fa-sync"></i> Bulk Update User Roles
          </h5>
          <button class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <p class="fw-bold mb-2">Excel columns required:</p>
          <pre class="bg-light p-2 small">
username | new_role | region_id | district_id | ward_id | school_code
          </pre>

          <p class="text-danger small">
            ⚠ This will overwrite existing role & location assignments
          </p>

          <input type="file"
                 name="excel_file"
                 accept=".xlsx"
                 class="form-control"
                 required>
        </div>

        <div class="modal-footer">
          <button class="btn btn-warning w-100">
            <i class="fas fa-sync"></i> Update Roles
          </button>
        </div>
      </form>
    </div>
  </div>
</div>









<!-- ================= BULK UPLOAD MODAL ================= -->
<div class="modal fade" id="bulkUploadModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="hidden" name="bulk_upload" value="1">

        <div class="modal-header">
          <h5>Bulk Upload Users (CSV)</h5>
          <button class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <p><strong>CSV format:</strong></p>
          <pre>username, email, role, password</pre>

          <input type="file" name="csv_file" accept=".csv" class="form-control" required>
        </div>

        <div class="modal-footer">
          <button class="btn btn-success">Upload</button>
        </div>

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



<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>




<script>
document.addEventListener("DOMContentLoaded", function () {

    // -----------------------------
    // ELEMENTS
    // -----------------------------
    const roleSelect    = document.getElementById("roleSelect");
    const regionSelect  = document.getElementById("regionSelect");
    const districtSelect = document.getElementById("districtSelect");
    const wardSelect     = document.getElementById("wardSelect");
    const schoolSelect   = document.getElementById("schoolSelect");

    // -----------------------------
    // HELPER: FETCH JSON
    // -----------------------------
    async function getJSON(url){
        const r = await fetch(url, { credentials: "same-origin" });
        return await r.json();
    }

    // -----------------------------
    // ROLE → REQUIRED FIELDS LOGIC
    // -----------------------------
    function setRequiredForRole(){
        const role = roleSelect.value;

        // Reset required
        regionSelect.required  = false;
        districtSelect.required = false;
        wardSelect.required     = false;
        schoolSelect.required   = false;

        if (role === "region"){
            regionSelect.required = true;
        }
        else if (role === "district"){
            regionSelect.required = true;
            districtSelect.required = true;
        }
        else if (role === "ward"){
            regionSelect.required = true;
            districtSelect.required = true;
            wardSelect.required = true;
        }
        else if (role === "school"){
            regionSelect.required  = true;
            districtSelect.required = true;
            wardSelect.required     = true;
            schoolSelect.required   = true;
        }
    }

    roleSelect.addEventListener("change", setRequiredForRole);
    setRequiredForRole(); // initial call

    // -----------------------------
    // REGION → DISTRICT
    // -----------------------------
    regionSelect.addEventListener("change", async function () {
        const regionId = this.value;

        districtSelect.innerHTML = '<option value="">-- none --</option>';
        wardSelect.innerHTML     = '<option value="">-- none --</option>';
        schoolSelect.innerHTML   = '<option value="">-- none --</option>';

        if (!regionId) return;

        const url = "{% url 'exams:ajax_get_districts' 0 %}".replace("/0/", `/${regionId}/`);
        const districts = await getJSON(url);

        districts.forEach(d => {
            districtSelect.insertAdjacentHTML(
                "beforeend",
                `<option value="${d.id}">${d.name}</option>`
            );
        });
    });

    // -----------------------------
    // DISTRICT → WARD
    // -----------------------------
    districtSelect.addEventListener("change", async function () {
        const districtId = this.value;

        wardSelect.innerHTML   = '<option value="">-- none --</option>';
        schoolSelect.innerHTML = '<option value="">-- none --</option>';

        if (!districtId) return;

        const url = "{% url 'exams:ajax_get_wards' 0 %}".replace("/0/", `/${districtId}/`);
        const wards = await getJSON(url);

        wards.forEach(w => {
            wardSelect.insertAdjacentHTML(
                "beforeend",
                `<option value="${w.id}">${w.name}</option>`
            );
        });
    });

    // -----------------------------
    // WARD → SCHOOL
    // -----------------------------
    wardSelect.addEventListener("change", async function () {
        const wardId = this.value;

        schoolSelect.innerHTML = '<option value="">-- none --</option>';

        if (!wardId) return;

        const url = "{% url 'exams:ajax_get_schools' 0 %}".replace("/0/", `/${wardId}/`);
        const schools = await getJSON(url);

        schools.forEach(s => {
            schoolSelect.insertAdjacentHTML(
                "beforeend",
                `<option value="${s.school_code}">${s.name}</option>`
            );
        });
    });

});
</script>



<script>
document.addEventListener("click", function (e) {

  const btn = e.target.closest(".toggle-user");
  if (!btn) return;

  e.preventDefault();

  const url = btn.dataset.url;
  const csrftoken = document.getElementById("csrf-token")?.value;

  if (!csrftoken) {
    alert("CSRF token missing");
    return;
  }

  btn.disabled = true;

  fetch(url, {
    method: "POST",
    headers: {
      "X-CSRFToken": csrftoken,
      "X-Requested-With": "XMLHttpRequest"
    }
  })
  .then(res => res.json())
  .then(data => {
    if (!data.ok) {
      alert(data.error || "Failed");
      return;
    }

    btn.textContent = data.active ? "Disable" : "Enable";
    btn.classList.toggle("btn-secondary");
    btn.classList.toggle("btn-success");
  })
  .catch(err => {
    console.error(err);
    alert("Network error");
  })
  .finally(() => {
    btn.disabled = false;
  });
});
</script>



<script>
document.addEventListener("click", function (e) {

  const btn = e.target.closest(".reset-pass");
  if (!btn) return;

  e.preventDefault();

  if (!confirm("Reset password to 12345678?")) return;

  const url = btn.dataset.url;
  const csrftoken = document.getElementById("csrf-token")?.value;

  btn.disabled = true;

  fetch(url, {
    method: "POST",
    headers: {
      "X-CSRFToken": csrftoken,
      "X-Requested-With": "XMLHttpRequest"
    }
  })
  .then(r => r.json())
  .then(data => {
    if (data.ok) {
      btn.classList.remove("btn-warning");
      btn.classList.add("btn-success");
      btn.innerHTML = '<i class="fas fa-check"></i>';
      btn.title = "Password reset";
    } else {
      alert(data.error || "Reset failed");
    }
  })
  .catch(() => alert("Server error"))
  .finally(() => btn.disabled = false);
});
</script>



<script>
const csrfToken = document.getElementById("csrf-token")?.value;

// OPEN MODAL
document.addEventListener("click", function (e) {
  const btn = e.target.closest(".edit-user");
  if (!btn) return;

  document.getElementById("edit-user-url").value = btn.dataset.url;
  document.getElementById("edit-username").value = btn.dataset.username;
  document.getElementById("edit-email").value = btn.dataset.email;
  document.getElementById("edit-role").value = btn.dataset.role;
  document.getElementById("edit-active").checked = btn.closest("tr")
    ?.querySelector(".toggle-user")?.textContent.trim() === "Disable";

  new bootstrap.Modal(document.getElementById("editUserModal")).show();
});

// SAVE
document.getElementById("save-user-btn").addEventListener("click", function () {

  const url = document.getElementById("edit-user-url").value;

  const data = new FormData();
  data.append("username", document.getElementById("edit-username").value);
  data.append("email", document.getElementById("edit-email").value);
  data.append("role", document.getElementById("edit-role").value);
  data.append("is_active", document.getElementById("edit-active").checked ? "1" : "0");

  fetch(url, {
    method: "POST",
    headers: {
      "X-CSRFToken": csrfToken,
      "X-Requested-With": "XMLHttpRequest"
    },
    body: data
  })
  .then(r => r.json())
  .then(data => {
    if (!data.ok) {
      alert(data.error || "Update failed");
      return;
    }
    location.reload(); // simplest + safe
  })
  .catch(() => alert("Server error"));
});
</script>


{% endblock %}