{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">Processed Charging Sessions</h1>

  <div class="card">
    <div class="card-body">
      <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-3">
        <h2 class="h5 mb-0">Charging Sessions</h2>
        <form method="get" class="mt-2 mt-md-0">
          <input type="hidden" name="include_unassigned" value="0">
          <div class="form-check form-switch mb-0">
            <input class="form-check-input"
                   type="checkbox"
                   role="switch"
                   id="includeUnassignedToggle"
                   name="include_unassigned"
                   value="1"
                   {% if include_unassigned %}checked{% endif %}
                   onchange="this.form.submit()">
            <label class="form-check-label" for="includeUnassignedToggle">
              Show sessions without vehicle assignment
            </label>
          </div>
        </form>
      </div>
      <div class="table-responsive">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Highlight</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Show Analytics</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Start / End</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Vehicle</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Duration</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Transaction ID</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Chargepoint ID</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">ID Tag</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">kWh Charged</th>
            </tr>
          </thead>
          <tbody>
            {% for session in sessions %}
            <tr>
              <td>
                {% if session.transaction_id %}
                <button type="button"
                        class="btn btn-link text-warning text-decoration-none p-0 toggle-highlight"
                        data-transaction-id="{{ session.transaction_id }}"
                        data-highlighted="{{ 'true' if session.highlighted else 'false' }}"
                        aria-label="Toggle highlight for transaction {{ session.transaction_id }}">
                  <span class="fs-4">{{ '★' if session.highlighted else '☆' }}</span>
                </button>
                {% else %}
                <span class="text-muted">—</span>
                {% endif %}
              </td>
              <td>
                <a class="btn btn-primary btn-sm"
                   href="{{ url_for('vehicle_session_analytics', session_id=session.id) }}">
                  Show Analytics
                </a>
              </td>
              <td>
                <div class="text-sm">{{ session.start_display }}</div>
                <div class="text-xs text-muted">{{ session.end_display }}</div>
              </td>
              <td>
                {% if session.vehicle_name %}
                <span class="text-sm">{{ session.vehicle_name }}</span>
                {% else %}
                <span class="text-muted">—</span>
                {% endif %}
              </td>
              <td><span class="text-sm">{{ session.duration_display }}</span></td>
              <td><span class="text-sm">{{ session.transaction_id or '—' }}</span></td>
              <td><span class="text-sm">{{ session.station_id }}</span></td>
              <td><span class="text-sm">{{ session.id_tag }}</span></td>
              <td><span class="text-sm">{{ session.kwh_display }}</span></td>
            </tr>
            {% else %}
            <tr>
              <td colspan="9" class="text-center text-muted py-4">
                {% if include_unassigned %}
                  No charging sessions available.
                {% else %}
                  No vehicle-assigned charging sessions available.
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.toggle-highlight').forEach(function (button) {
      button.addEventListener('click', function () {
        var transactionId = this.getAttribute('data-transaction-id');
        if (!transactionId) {
          return;
        }
        var currentlyHighlighted = this.getAttribute('data-highlighted') === 'true';
        fetch('/op_vehicle_session_highlight', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            transaction_id: transactionId,
            highlight: !currentlyHighlighted
          })
        })
          .then(function (response) { return response.json(); })
          .then(function (payload) {
            if (!payload || !payload.success) {
              return;
            }
            button.setAttribute('data-highlighted', payload.highlight ? 'true' : 'false');
            button.querySelector('span').textContent = payload.highlight ? '★' : '☆';
          })
          .catch(function () {
            // ignore errors in this basic UI handler
          });
      });
    });
  });
</script>
{% endblock %}