{% extends "base.html" %}
{% block content %}
<div class="container mt-4">

  <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
    <div>
      <h4 class="mb-1">
        <i class="bi bi-diagram-3 me-2"></i>Location Access Mapping
      </h4>
      <div class="text-muted small">
        Select employee → assign locations → that employee can view reports for those locations.
      </div>
    </div>

    <div class="d-flex gap-2 align-items-center">
      <span class="badge bg-secondary">Employees: {{ total_employees }}</span>
      <span class="badge bg-success">Mapped: {{ mapped_employees }}</span>
      <span class="badge bg-light text-dark">Page {{ page }} / {{ total_pages }}</span>
    </div>
  </div>

  <!-- Filters (GET): Employee selector + search + per_page -->
  <form method="GET" class="card shadow-sm mb-3">
    <div class="card-body row g-2 align-items-end">

      <div class="col-md-5">
        <label class="form-label fw-semibold">Employee (to edit mapping)</label>
        <select class="form-select" name="employee_id" onchange="this.form.submit()">
          <option value="">-- Select Employee --</option>
          {% for e in employees %}
            <option value="{{ e.id }}" {% if selected_employee_id==e.id %}selected{% endif %}>
              {{ e.full_name }} ({{ e.employee_code }})
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-4">
        <label class="form-label fw-semibold">Search in list</label>
        <input type="text" class="form-control" name="q" value="{{ q or '' }}"
               placeholder="Employee name / code">
      </div>

      <div class="col-md-2">
        <label class="form-label fw-semibold">Rows</label>
        <select class="form-select" name="per_page" onchange="this.form.submit()">
          {% for n in [10,20,30,50,100,200] %}
            <option value="{{ n }}" {% if per_page==n %}selected{% endif %}>{{ n }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-1 d-grid">
        <button class="btn btn-outline-primary">
          <i class="bi bi-search"></i>
        </button>
      </div>

      <input type="hidden" name="page" value="1">
    </div>
  </form>

  <!-- Mapping form (POST) -->
  <form method="POST" class="card shadow-sm mb-4">
    <input type="hidden" name="employee_id" value="{{ selected_employee_id or '' }}">

    <!-- keep list filters while saving -->
    <input type="hidden" name="q" value="{{ q or '' }}">
    <input type="hidden" name="page" value="{{ page }}">
    <input type="hidden" name="per_page" value="{{ per_page }}">

    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-12">
          <label class="form-label fw-semibold">Allowed Locations (multi-select)</label>
          <select class="form-select"
                  name="institutes"
                  id="institutesSelect"
                  multiple
                  {% if not selected_employee_id %}disabled{% endif %}>
            {% for inst in institutes %}
              <option value="{{ inst }}" {% if inst in selected_institutes %}selected{% endif %}>
                {{ inst }}
              </option>
            {% endfor %}
          </select>
          <div class="form-text">
            Tip: type to search. Empty selection = user will only see their own data (unless Admin/HR).
          </div>
        </div>
      </div>
    </div>

    <div class="card-footer d-flex justify-content-end gap-2">
      <button class="btn btn-primary" {% if not selected_employee_id %}disabled{% endif %}>
        <i class="bi bi-check2-circle me-1"></i> Save
      </button>
    </div>
  </form>

  <!-- List access -->
  <div class="card shadow-sm">
    <div class="card-header bg-white d-flex align-items-center justify-content-between">
      <div class="fw-semibold">
        <i class="bi bi-list-check me-2"></i>Current Location Access
      </div>
      <div class="text-muted small">
        Edit or clear employee mappings
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th style="width: 70px;">#</th>
            <th>Employee</th>
            <th style="width: 160px;">Emp Code</th>
            <th>Locations</th>
            <th style="width: 180px;">Updated</th>
            <th style="width: 240px;" class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% if access_rows and access_rows|length > 0 %}
            {% for r in access_rows %}
              <tr>
                <td>{{ ((page-1)*per_page) + loop.index }}</td>
                <td class="fw-semibold">{{ r.full_name }}</td>
                <td>{{ r.employee_code }}</td>
                <td>
                  {% if r.institutes %}
                    <span class="badge bg-secondary-subtle text-dark">{{ r.institutes }}</span>
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>
                <td>
                  {% if r.updated_at %}
                    <span class="text-muted small">
                      {{ r.updated_at.strftime('%d %b %Y %I:%M %p') }}
                    </span>
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>
                <td class="text-end">
                  <a class="btn btn-sm btn-outline-primary"
                     href="{{ url_for('institute_access.institute_access',
                                      employee_id=r.employee_id, q=q, per_page=per_page, page=page) }}">
                    <i class="bi bi-pencil-square me-1"></i> Edit
                  </a>

                  <form method="POST"
                        action="{{ url_for('institute_access.clear_institute_access',
                                           employee_id=r.employee_id, q=q, per_page=per_page, page=page) }}"
                        class="d-inline"
                        onsubmit="return confirm('Clear location access for this employee?');">
                    <button class="btn btn-sm btn-outline-danger">
                      <i class="bi bi-x-circle me-1"></i> Clear
                    </button>
                  </form>
                </td>
              </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="6" class="text-center text-muted py-4">
                No employees found for this filter.
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="card-footer bg-white d-flex flex-wrap justify-content-between align-items-center gap-2">
      <div class="text-muted small">
        Showing {{ access_rows|length }} of {{ total_employees }} employees
      </div>

      <nav aria-label="Pagination">
        <ul class="pagination pagination-sm mb-0">

          <li class="page-item {% if page <= 1 %}disabled{% endif %}">
            <a class="page-link"
               href="{{ url_for('institute_access.institute_access', q=q, per_page=per_page, page=page-1, employee_id=selected_employee_id) }}">
              <i class="bi bi-chevron-left"></i>
            </a>
          </li>

          {% set start = 1 if page-2 < 1 else page-2 %}
          {% set end = total_pages if page+2 > total_pages else page+2 %}

          {% if start > 1 %}
            <li class="page-item">
              <a class="page-link"
                 href="{{ url_for('institute_access.institute_access', q=q, per_page=per_page, page=1, employee_id=selected_employee_id) }}">1</a>
            </li>
            {% if start > 2 %}
              <li class="page-item disabled"><span class="page-link">…</span></li>
            {% endif %}
          {% endif %}

          {% for p in range(start, end+1) %}
            <li class="page-item {% if p==page %}active{% endif %}">
              <a class="page-link"
                 href="{{ url_for('institute_access.institute_access', q=q, per_page=per_page, page=p, employee_id=selected_employee_id) }}">{{ p }}</a>
            </li>
          {% endfor %}

          {% if end < total_pages %}
            {% if end < total_pages-1 %}
              <li class="page-item disabled"><span class="page-link">…</span></li>
            {% endif %}
            <li class="page-item">
              <a class="page-link"
                 href="{{ url_for('institute_access.institute_access', q=q, per_page=per_page, page=total_pages, employee_id=selected_employee_id) }}">{{ total_pages }}</a>
            </li>
          {% endif %}

          <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
            <a class="page-link"
               href="{{ url_for('institute_access.institute_access', q=q, per_page=per_page, page=page+1, employee_id=selected_employee_id) }}">
              <i class="bi bi-chevron-right"></i>
            </a>
          </li>

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

</div>

<script>
document.addEventListener("DOMContentLoaded", function(){
  if (window.$ && $('#institutesSelect').length){
    $('#institutesSelect').select2({
      width:'100%',
      placeholder:'Select institutes',
      allowClear: true
    });
  }
});
</script>
{% endblock %}