{% 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 Vehicles</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 %}

  <button type="button" class="btn btn-primary btn-sm mb-3" id="toggle-add-form"
    aria-expanded="{{ 'true' if show_add_form else 'false' }}">
    Add Vehicle
  </button>

  <div id="add-vehicle-card" class="card mb-4 {% if not show_add_form %}d-none{% endif %}">
    <div class="card-body">
      <h2 class="h5">New Fleet Vehicle</h2>
      <form method="post">
        <input type="hidden" name="action" value="add">
        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label" for="fleet_vehicle_name">Name *</label>
            <input id="fleet_vehicle_name" name="name" type="text" class="form-control" required
              value="{{ new_fleet_form.name }}" placeholder="e.g. Pool Car #1">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="fleet_vehicle_catalog">Vehicle Database Entry</label>
            <select id="fleet_vehicle_catalog" name="vehicle_catalog_id" class="form-select">
              <option value="">Select vehicle…</option>
              {% for vehicle in vehicle_catalog %}
              <option value="{{ vehicle.id }}" {% if vehicle.id == new_fleet_form.vehicle_catalog_id|int %}selected{% endif %}>
                {{ vehicle.manufacturer }} {{ vehicle.model }}{% if vehicle.name %} – {{ vehicle.name }}{% endif %}
              </option>
              {% endfor %}
            </select>
          </div>
          <div class="col-md-4">
            <label class="form-label" for="fleet_vehicle_build_year">Build Year</label>
            <input id="fleet_vehicle_build_year" name="build_year" type="text" class="form-control"
              value="{{ new_fleet_form.build_year }}" placeholder="e.g. 2022">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="fleet_vehicle_vin">VIN</label>
            <input id="fleet_vehicle_vin" name="vin" type="text" class="form-control"
              value="{{ new_fleet_form.vin }}" placeholder="e.g. WF0TK3R71PMA53706">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="fleet_vehicle_license_plate">License Plate</label>
            <input id="fleet_vehicle_license_plate" name="license_plate" type="text" class="form-control"
              value="{{ new_fleet_form.license_plate }}" placeholder="e.g. M-FG 256E">
          </div>
        </div>
        <div class="mt-3">
          <button type="submit" class="btn btn-success btn-sm">Save Vehicle</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h2 class="h5">Registered Fleet Vehicles</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">Name</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Vehicle Database Entry</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Build Year</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">VIN</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">License Plate</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for fleet in fleet_entries %}
            <tr>
              <form method="post">
                <td>
                  <input type="text" name="name" class="form-control" value="{{ fleet.name }}" required>
                </td>
                <td>
                  <select name="vehicle_catalog_id" class="form-select">
                    <option value="">Select vehicle…</option>
                    {% for vehicle in vehicle_catalog %}
                    <option value="{{ vehicle.id }}" {% if vehicle.id == (fleet.vehicle_catalog_id or 0) %}selected{% endif %}>
                      {{ vehicle.manufacturer }} {{ vehicle.model }}{% if vehicle.name %} – {{ vehicle.name }}{% endif %}
                    </option>
                    {% endfor %}
                  </select>
                </td>
                <td>
                  <input type="text" name="build_year" class="form-control" value="{{ fleet.build_year or '' }}">
                </td>
                <td>
                  <input type="text" name="vin" class="form-control" value="{{ fleet.vin or '' }}">
                </td>
                <td>
                  <input type="text" name="license_plate" class="form-control" value="{{ fleet.license_plate or '' }}">
                </td>
                <td class="text-end">
                  <input type="hidden" name="id" value="{{ fleet.id }}">
                  <div class="btn-group" role="group">
                    <button type="submit" name="action" value="update" class="btn btn-primary btn-sm">Save</button>
                    <button type="submit" name="action" value="delete" class="btn btn-danger btn-sm"
                      onclick="return confirm('Delete fleet vehicle {{ fleet.name }}?');">Delete</button>
                  </div>
                </td>
              </form>
            </tr>
            {% else %}
            <tr>
              <td colspan="6" class="text-center text-muted">No fleet vehicles registered yet.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var toggleButton = document.getElementById('toggle-add-form');
    var formCard = document.getElementById('add-vehicle-card');
    if (!toggleButton || !formCard) {
      return;
    }
    toggleButton.addEventListener('click', function () {
      var isHidden = formCard.classList.contains('d-none');
      if (isHidden) {
        formCard.classList.remove('d-none');
        toggleButton.setAttribute('aria-expanded', 'true');
        var firstInput = formCard.querySelector('input[name="name"]');
        if (firstInput) {
          firstInput.focus();
        }
      } else {
        formCard.classList.add('d-none');
        toggleButton.setAttribute('aria-expanded', 'false');
      }
    });
  });
</script>
{% endblock %}