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

{% block title %}Vehicles{% endblock %}

{% block content %}
<div class="container-fluid mt-3">

  <div class="d-flex align-items-center justify-content-between mb-3">
    <div>
      <h4 class="mb-0 font-weight-bold">Vehicles</h4>
      <small class="text-muted">Goods Transport vehicles management</small>
    </div>

    <a href="{% url 'good_transport:vehicles:add' %}" class="btn btn-primary btn-sm">
      <i class="fas fa-plus mr-1"></i> Add Vehicle
    </a>
  </div>

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show py-2" role="alert">
        {{ message }}
        <button type="button" class="close" data-dismiss="alert">
          <span>&times;</span>
        </button>
      </div>
    {% endfor %}
  {% endif %}

  <div class="card shadow-sm border-0">
    <div class="card-header bg-white">
      <form method="get" class="form-row align-items-end">
        <div class="col-md-4 col-sm-8 mb-2 mb-md-0">
          <label class="small font-weight-bold text-muted mb-1">Search Vehicle</label>
          <input
            type="text"
            name="q"
            value="{{ q }}"
            class="form-control form-control-sm"
            placeholder="Search by vehicle name / number / description"
          >
        </div>

        <div class="col-md-3 col-sm-4">
          <button type="submit" class="btn btn-sm btn-primary">
            <i class="fas fa-search mr-1"></i> Search
          </button>

          <a href="{% url 'good_transport:vehicles:list' %}" class="btn btn-sm btn-light border">
            Reset
          </a>
        </div>
      </form>
    </div>

    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-hover table-bordered mb-0">
          <thead class="thead-light">
            <tr>
              <th style="width:80px;">T-ID</th>
              <th>Vehicle Name / No</th>
              <th style="width:130px;" class="text-right">Rent</th>
              <th style="width:130px;" class="text-right">Balance</th>
              <th>Description</th>
              <th style="width:220px;" class="text-center">Actions</th>
            </tr>
          </thead>

          <tbody>
            {% for v in vehicles_list %}
              <tr>
                <td class="font-weight-bold">{{ v.t_id }}</td>
                <td>{{ v.name }}</td>
                <td class="text-right">{{ v.rent|floatformat:2 }}</td>
                <td class="text-right">{{ v.balance|floatformat:2 }}</td>
                <td>
                  {% if v.descp %}
                    {{ v.descp }}
                  {% else %}
                    <span class="text-muted">-</span>
                  {% endif %}
                </td>
                <td class="text-center">
                  <a href="{% url 'good_transport:vehicles:detail' v.t_id %}" class="btn btn-sm btn-outline-dark">
                    View
                  </a>

                  <a href="{% url 'good_transport:vehicles:edit' v.t_id %}" class="btn btn-sm btn-outline-primary">
                    Edit
                  </a>

                  <a href="{% url 'good_transport:vehicles:delete' v.t_id %}" class="btn btn-sm btn-outline-danger">
                    Delete
                  </a>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center text-muted py-4">
                  No vehicles found.
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="card-footer bg-white py-2">
      <small class="text-muted">Showing maximum 500 vehicles.</small>
    </div>
  </div>

</div>
{% endblock %}