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

{% block title %}Goods Transport Hubs{% endblock %}

{% block content %}
<style>
  .gt-page{padding:14px;background:#f3f6fb;min-height:calc(100vh - 60px);}
  .gt-card{background:#fff;border:1px solid #dbe3ef;border-radius:12px;box-shadow:0 8px 22px rgba(15,23,42,.06);margin-bottom:12px;overflow:hidden;}
  .gt-head{padding:12px 14px;border-bottom:1px solid #dbe3ef;background:linear-gradient(180deg,#fff,#f8fbff);display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .gt-title{margin:0;font-size:19px;font-weight:900;color:#0f172a;}
  .gt-sub{font-size:12px;font-weight:700;color:#64748b;margin-top:2px;}
  .gt-body{padding:14px;}
  .gt-btn{border:0;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:900;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px;line-height:1;cursor:pointer;}
  .gt-primary{background:#01478f;color:#fff!important;}
  .gt-light{background:#e5e7eb;color:#111827!important;}
  .gt-danger{background:#dc2626;color:#fff!important;}
  .gt-outline{background:#fff;border:1px solid #cbd5e1;color:#111827!important;}
  .gt-grid{display:grid;grid-template-columns:2fr 1fr 1fr auto auto;gap:10px;align-items:end;}
  .gt-field label{display:block;font-size:12px;font-weight:900;color:#64748b;margin-bottom:4px;}
  .gt-input{width:100%;height:36px;border:1px solid #cbd5e1;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:700;outline:none;}
  .gt-input:focus{border-color:#01478f;box-shadow:0 0 0 3px rgba(1,71,143,.12);}
  .gt-table-wrap{overflow:auto;}
  .gt-table{width:100%;border-collapse:collapse;margin:0;}
  .gt-table th,.gt-table td{border-bottom:1px solid #e5e7eb;padding:9px 8px;font-size:13px;vertical-align:middle;}
  .gt-table th{background:#f8fafc;color:#475569;font-weight:900;white-space:nowrap;}
  .gt-table tbody tr:hover td{background:#f8fbff;}
  .gt-pill{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid #bfdbfe;background:#eff6ff;color:#01478f;}
  .gt-pill.green{border-color:#bbf7d0;background:#f0fdf4;color:#15803d;}
  .gt-pill.gray{border-color:#e5e7eb;background:#f8fafc;color:#64748b;}
  .gt-actions{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;}
  @media(max-width:1000px){.gt-grid{grid-template-columns:1fr 1fr;}.gt-grid .gt-btn{width:100%;justify-content:center;}}
  @media(max-width:650px){.gt-head{flex-direction:column;align-items:flex-start;}.gt-grid{grid-template-columns:1fr;}}
</style>

<div class="gt-page">

  <div class="gt-head gt-card">
    <div>
      <h4 class="gt-title">Goods Transport Hubs / Routes</h4>
      <div class="gt-sub">Manage hubs, stations, terminals and route points</div>
    </div>

    <a href="{% url 'good_transport:routes:add' %}" class="gt-btn gt-primary">
      <i class="fas fa-plus"></i> Add Hub
    </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="gt-card">
    <div class="gt-body">
      <form method="get" class="gt-grid">
        <div class="gt-field">
          <label>Search</label>
          <input
            type="text"
            name="q"
            value="{{ q }}"
            class="gt-input"
            placeholder="Search by hub name, code, description"
          >
        </div>

        <div class="gt-field">
          <label>Hub Type</label>
          <select name="hub_type" class="gt-input">
            <option value="">All Types</option>
            {% for value,label in hub_type_choices %}
              <option value="{{ value }}" {% if hub_type == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="gt-field">
          <label>Status</label>
          <select name="status" class="gt-input">
            <option value="all" {% if status == "all" %}selected{% endif %}>All Status</option>
            {% for value,label in status_choices %}
              <option value="{{ value }}" {% if status == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>

        <button type="submit" class="gt-btn gt-primary">
          <i class="fas fa-search"></i> Search
        </button>

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

  <div class="gt-card">
    <div class="gt-table-wrap">
      <table class="gt-table">
        <thead>
          <tr>
            <th style="width:80px;">T-ID</th>
            <th>Hub / Route Name</th>
            <th style="width:130px;">Code</th>
            <th style="width:120px;">Type</th>
            <th>Description</th>
            <th style="width:110px;">Status</th>
            <th style="width:190px;" class="text-center">Actions</th>
          </tr>
        </thead>

        <tbody>
          {% for route in routes %}
            <tr>
              <td><strong>{{ route.t_id }}</strong></td>
              <td>
                <strong>{{ route.area_name }}</strong>
                {% if not route.is_transport_hub %}
                  <span class="gt-pill gray">Not Hub</span>
                {% endif %}
              </td>
              <td>{{ route.hub_code|default:"-" }}</td>
              <td>
                {% if route.hub_type %}
                  <span class="gt-pill">{{ route.hub_type|title }}</span>
                {% else %}
                  <span class="text-muted">-</span>
                {% endif %}
              </td>
              <td>{{ route.description|default:"-" }}</td>
              <td>
                {% if route.status == "ACTIVE" %}
                  <span class="gt-pill green">Active</span>
                {% else %}
                  <span class="gt-pill gray">Inactive</span>
                {% endif %}
              </td>
              <td>
                <div class="gt-actions">
                  <a href="{% url 'good_transport:routes:edit' route.t_id %}" class="gt-btn gt-outline">
                    <i class="fas fa-edit"></i> Edit
                  </a>
                  <a href="{% url 'good_transport:routes:delete' route.t_id %}" class="gt-btn gt-danger">
                    <i class="fas fa-ban"></i> Inactive
                  </a>
                </div>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="7" class="text-center text-muted py-4">
                No hubs/routes found.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="gt-body" style="border-top:1px solid #dbe3ef;padding-top:10px;padding-bottom:10px;">
      <small class="text-muted">Showing maximum 500 hubs/routes.</small>
    </div>
  </div>

</div>
{% endblock %}