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

  {% if message %}
  <div class="alert alert-success" role="alert">
    {{ message }}
  </div>
  {% endif %}

  {% if errors %}
  <div class="alert alert-danger" role="alert">
    <ul class="mb-0">
      {% for error in errors %}
      <li>{{ error }}</li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  <div class="card">
    <div class="card-body">
      <h2 class="h5 mb-3">Charging Sessions</h2>
      <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">Actions</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>
                <button type="button" class="btn btn-primary btn-sm"
                  data-action="assign-vehicle"
                  data-session-id="{{ session.id }}"
                  data-vehicle-id="{{ session.vehicle_id }}">
                  Assign Vehicle
                </button>
              </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 }}</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="8" class="text-center text-muted py-4">No charging sessions available.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>

<div class="modal fade" id="assignVehicleModal" tabindex="-1" aria-labelledby="assignVehicleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form method="post" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="assignVehicleModalLabel">Assign Vehicle</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" name="session_id" id="assignVehicleSessionId">
        <div class="mb-3">
          <label for="assignVehicleSelect" class="form-label">Fleet Vehicle</label>
          <select class="form-select" id="assignVehicleSelect" name="vehicle_id">
            <option value="0">No vehicle assigned</option>
            {% for vehicle in vehicles %}
            <option value="{{ vehicle.id }}">{{ vehicle.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var modalElement = document.getElementById('assignVehicleModal');
    if (!modalElement || !window.bootstrap || !window.bootstrap.Modal) {
      return;
    }

    var sessionInput = document.getElementById('assignVehicleSessionId');
    var vehicleSelect = document.getElementById('assignVehicleSelect');
    var modal = new window.bootstrap.Modal(modalElement);

    document.querySelectorAll('[data-action="assign-vehicle"]').forEach(function (button) {
      button.addEventListener('click', function () {
        var sessionId = this.getAttribute('data-session-id') || '';
        var vehicleId = this.getAttribute('data-vehicle-id') || '';
        if (sessionInput) {
          sessionInput.value = sessionId;
        }
        if (vehicleSelect) {
          vehicleSelect.value = vehicleId && vehicleId !== '0' ? vehicleId : '0';
        }
        modal.show();
      });
    });
  });
</script>
{% endblock %}