{% extends "pos/base.html" %}
{% load humanize %}

{% block title %}Session Usage Report{% endblock %}

{% block content %}
<div class="container-fluid">
  <h1 class="h3 mb-4 text-gray-800">Session Usage Report</h1>

  <!-- Filters -->
  <form method="get" class="form-inline mb-3">

    <!-- Period filter -->
    <label for="id_range" class="mr-2">Period:</label>
    <select name="range" id="id_range" class="form-control mr-3">
      <option value="1" {% if range_code == "1" %}selected{% endif %}>Last 1 day</option>
      <option value="7" {% if range_code == "7" %}selected{% endif %}>Last 7 days</option>
      <option value="30" {% if range_code == "30" %}selected{% endif %}>Last 30 days</option>
      <option value="90" {% if range_code == "90" %}selected{% endif %}>Last 90 days</option>
      <option value="custom" {% if range_code == "custom" %}selected{% endif %}>Custom range</option>
      <option value="all" {% if range_code == "all" %}selected{% endif %}>All time</option>
    </select>

    <!-- Custom range (only when "custom") -->
    <div id="custom-range-fields"
         class="form-inline mr-3"
         {% if range_code != "custom" %}style="display:none"{% endif %}>
      <label for="id_start" class="mr-2">From:</label>
      <input type="date"
             name="start"
             id="id_start"
             class="form-control mr-2"
             value="{% if start_date %}{{ start_date|date:'Y-m-d' }}{% endif %}">

      <label for="id_end" class="mr-2">To:</label>
      <input type="date"
             name="end"
             id="id_end"
             class="form-control"
             value="{% if end_date %}{{ end_date|date:'Y-m-d' }}{% endif %}">
    </div>

    <!-- Branch filter -->
    <label for="id_branch" class="mr-2">Branch:</label>
    <select name="branch_id" id="id_branch" class="form-control mr-3">
      <option value="">All branches</option>
      {% for b in branches %}
        <option value="{{ b.id }}"
                {% if branch_id and branch_id|add:"" == b.id|add:"" %}selected{% endif %}>
          {{ b.company_name }} / {{ b.branch_name }}
        </option>
      {% endfor %}
    </select>

    <button type="submit" class="btn btn-primary">Apply</button>
  </form>

  {% if start_date or end_date %}
    <p class="text-muted small">
      Showing sessions
      {% if start_date %}from <strong>{{ start_date }}</strong>{% endif %}
      {% if end_date %} to <strong>{{ end_date }}</strong>{% endif %}
    </p>
  {% endif %}

  <!-- SUMMARY: Branch + user usage -->
  <div class="card mb-4">
    <div class="card-header">
      <strong>Branch &amp; User Summary</strong>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-striped table-hover mb-0 text-nowrap">
          <thead class="thead-light">
            <tr>
              <th>Branch</th>
              <th>User</th>
              <th>Role</th>
              <th>Sessions</th>
              <th>Total Time</th>
              <th>Last Login</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {% if summary %}
              {% for row in summary %}
                <tr>
                  <td>
                    {{ row.branch__company_name }} /
                    {{ row.branch__branch_name }}
                  </td>
                  <td>{{ row.user__username }}</td>
                  <td>{{ row.role|title }}</td>
                  <td>{{ row.session_count }}</td>
                  <td>{{ row.total_human }}</td>
                  <td>
                    {% if row.last_login %}
                      {{ row.last_login|date:"Y-m-d H:i" }}
                    {% else %}
                      -
                    {% endif %}
                  </td>
                  <td>
                    {# "Sessions" button: same period + selected branch #}
                    <a href="?range={{ range_code }}{% if start_date %}&start={{ start_date|date:'Y-m-d' }}{% endif %}{% if end_date %}&end={{ end_date|date:'Y-m-d' }}{% endif %}&branch_id={{ row.branch__id }}#details"
                       class="btn btn-sm btn-outline-primary">
                      Sessions
                    </a>
                  </td>
                </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="7" class="text-center text-muted">
                  No data for selected filters.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- DETAILS: selected branch sessions (same period) -->
  {% if branch_id and details %}
    <div id="details" class="card">
      <div class="card-header">
        <strong>
          Sessions for
          {% if branch_obj %}
            {{ branch_obj.company_name }} / {{ branch_obj.branch_name }}
          {% else %}
            Branch ID {{ branch_id }}
          {% endif %}
        </strong>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-striped table-hover mb-0 text-nowrap">
            <thead class="thead-light">
              <tr>
                <th>User</th>
                <th>Role</th>
                <th>Login at</th>
                <th>Logout at</th>
                <th>Duration</th>
              </tr>
            </thead>
            <tbody>
              {% for log in details %}
                <tr>
                  <td>{{ log.user.username }}</td>
                  <td>{{ log.get_role_display }}</td>
                  <td>{{ log.login_at|date:"Y-m-d H:i" }}</td>
                  <td>
                    {% if log.logout_at %}
                      {{ log.logout_at|date:"Y-m-d H:i" }}
                    {% else %}
                      <span class="text-success">Active / Auto-logout pending</span>
                    {% endif %}
                  </td>
                  <td>{{ log.duration_human }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  {% elif branch_id %}
    <p id="details" class="text-muted">
      No sessions found for this branch in selected period.
    </p>
  {% endif %}
</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
  // Custom range show/hide
  (function(){
    var select = document.getElementById('id_range');
    var box    = document.getElementById('custom-range-fields');
    function toggleBox(){
      if(!select || !box) return;
      if(select.value === 'custom'){
        box.style.display = '';
      } else {
        box.style.display = 'none';
      }
    }
    if(select){
      select.addEventListener('change', toggleBox);
      toggleBox();
    }
  })();
</script>
{% endblock %}