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

{% block title %}
  {% if route %}Edit Hub{% else %}Add Hub{% endif %}
{% 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-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .gt-field label{display:block;font-size:12px;font-weight:900;color:#64748b;margin-bottom:4px;}
  .gt-input{width:100%;height:38px;border:1px solid #cbd5e1;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:700;outline:none;}
  textarea.gt-input{height:auto;min-height:88px;resize:vertical;}
  .gt-input:focus{border-color:#01478f;box-shadow:0 0 0 3px rgba(1,71,143,.12);}
  .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-actions{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #dbe3ef;padding:12px 14px;background:#fff;}
  .gt-check{display:flex;align-items:center;gap:8px;height:38px;font-size:13px;font-weight:800;color:#111827;}
  .gt-note{font-size:12px;color:#64748b;font-weight:700;margin-top:4px;}
  @media(max-width:800px){.gt-grid{grid-template-columns:1fr;}.gt-head{flex-direction:column;align-items:flex-start;}.gt-actions{flex-direction:column;}.gt-btn{justify-content:center;}}
</style>

<div class="gt-page">

  <div class="gt-head gt-card">
    <div>
      <h4 class="gt-title">
        {% if route %}Edit Hub / Route{% else %}Add New Hub / Route{% endif %}
      </h4>
      <div class="gt-sub">
        Ye existing sale_areas table me save hoga aur booking/challan Select2 me use hoga.
      </div>
    </div>

    <a href="{% url 'good_transport:routes:list' %}" class="gt-btn gt-light">
      <i class="fas fa-arrow-left"></i> Back
    </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 %}

  <form method="post" autocomplete="off">
    {% csrf_token %}

    <div class="gt-card">
      <div class="gt-body">

        {% if route %}
          <div class="gt-grid">
            <div class="gt-field">
              <label>T-ID</label>
              <input type="text" class="gt-input" value="{{ route.t_id }}" readonly>
            </div>
          </div>
          <hr>
        {% endif %}

        <div class="gt-grid">
          <div class="gt-field">
            <label>Hub / Route Name <span class="text-danger">*</span></label>
            <input
              type="text"
              name="area_name"
              class="gt-input"
              value="{{ route.area_name|default:'' }}"
              placeholder="Example: Mansehra Main Office"
              required
              autofocus
            >
            <div class="gt-note">Ye name booking/challan forms me show hoga.</div>
          </div>

          <div class="gt-field">
            <label>Hub Code</label>
            <input
              type="text"
              name="hub_code"
              class="gt-input"
              value="{{ route.hub_code|default:'' }}"
              placeholder="Example: MNS, PND, LHR, KHI"
            >
          </div>

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

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

          <div class="gt-field">
            <label>Transport Hub</label>
            <label class="gt-check">
              <input
                type="checkbox"
                name="is_transport_hub"
                value="1"
                {% if not route or route.is_transport_hub %}checked{% endif %}
              >
              Show in transport route selection
            </label>
          </div>

          <div class="gt-field" style="grid-column:1 / -1;">
            <label>Description</label>
            <textarea
              name="description"
              class="gt-input"
              placeholder="Optional detail, address, route note"
            >{{ route.description|default:'' }}</textarea>
          </div>
        </div>

      </div>

      <div class="gt-actions">
        <a href="{% url 'good_transport:routes:list' %}" class="gt-btn gt-light">
          Cancel
        </a>
        <button type="submit" class="gt-btn gt-primary">
          <i class="fas fa-save"></i>
          {% if route %}Update Hub{% else %}Save Hub{% endif %}
        </button>
      </div>
    </div>
  </form>

</div>
{% endblock %}