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

{% block title %}Delivery Persons{% 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">Delivery Persons</h4>
      <small class="text-muted">Goods Transport delivery persons / loaders management</small>
    </div>

    <a href="{% url 'good_transport:delivery_persons:add' %}" class="btn btn-primary btn-sm">
      <i class="fas fa-plus mr-1"></i> Add Delivery Person
    </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</label>
          <input
            type="text"
            name="q"
            value="{{ q }}"
            class="form-control form-control-sm"
            placeholder="Search by name, mobile, address"
          >
        </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:delivery_persons: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>Name</th>
              <th style="width:150px;">Mobile</th>
              <th style="width:150px;">Phone</th>
              <th>Address</th>
              <th style="width:110px;">Status</th>
              <th style="width:230px;" class="text-center">Actions</th>
            </tr>
          </thead>

          <tbody>
            {% for person in persons %}
              <tr>
                <td class="font-weight-bold">{{ person.t_id }}</td>
                <td>{{ person.name }}</td>
                <td>{{ person.mobile|default:"-" }}</td>
                <td>{{ person.phone|default:"-" }}</td>
                <td>{{ person.address|default:"-" }}</td>
                <td>
                  {% if person.status == "ACTIVE" %}
                    <span class="badge badge-success">Active</span>
                  {% else %}
                    <span class="badge badge-secondary">Inactive</span>
                  {% endif %}
                </td>
                <td class="text-center">
                  <a href="{% url 'good_transport:delivery_persons:detail' person.t_id %}" class="btn btn-sm btn-outline-dark">
                    View
                  </a>

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

                  <a href="{% url 'good_transport:delivery_persons:delete' person.t_id %}" class="btn btn-sm btn-outline-danger">
                    Inactive
                  </a>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="7" class="text-center text-muted py-4">
                  No delivery persons found.
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

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

</div>
{% endblock %}