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

{% block title %}
  {% if person %}Edit Delivery Person{% else %}Add Delivery Person{% endif %}
{% 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">
        {% if person %}Edit Delivery Person{% else %}Add Delivery Person{% endif %}
      </h4>
      <small class="text-muted">
        This will be saved in existing order_booker table with DELIVERY type.
      </small>
    </div>

    <a href="{% url 'good_transport:delivery_persons:list' %}" class="btn btn-light btn-sm border">
      <i class="fas fa-arrow-left mr-1"></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 %}

  <div class="row">
    <div class="col-lg-7 col-md-9">

      <div class="card shadow-sm border-0">
        <div class="card-header bg-white">
          <strong>Delivery Person Information</strong>
        </div>

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

          <div class="card-body">

            {% if person %}
              <div class="form-group">
                <label class="small font-weight-bold text-muted mb-1">T-ID</label>
                <input type="text" class="form-control form-control-sm" value="{{ person.t_id }}" readonly>
              </div>
            {% endif %}

            <div class="form-row">
              <div class="form-group col-md-6">
                <label class="small font-weight-bold text-muted mb-1">
                  Name <span class="text-danger">*</span>
                </label>
                <input
                  type="text"
                  name="name"
                  class="form-control form-control-sm"
                  value="{{ person.name|default:'' }}"
                  placeholder="Delivery person name"
                  required
                  autofocus
                >
              </div>

              <div class="form-group col-md-6">
                <label class="small font-weight-bold text-muted mb-1">Status</label>
                <select name="status" class="form-control form-control-sm">
                  {% for value,label in status_choices %}
                    <option value="{{ value }}" {% if person and person.status == value %}selected{% endif %}>
                      {{ label }}
                    </option>
                  {% endfor %}
                </select>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group col-md-6">
                <label class="small font-weight-bold text-muted mb-1">Mobile</label>
                <input
                  type="text"
                  name="mobile"
                  class="form-control form-control-sm"
                  value="{{ person.mobile|default:'' }}"
                  placeholder="Mobile no"
                >
              </div>

              <div class="form-group col-md-6">
                <label class="small font-weight-bold text-muted mb-1">Phone</label>
                <input
                  type="text"
                  name="phone"
                  class="form-control form-control-sm"
                  value="{{ person.phone|default:'' }}"
                  placeholder="Phone no"
                >
              </div>
            </div>

            <div class="form-group">
              <label class="small font-weight-bold text-muted mb-1">Address</label>
              <input
                type="text"
                name="address"
                class="form-control form-control-sm"
                value="{{ person.address|default:'' }}"
                placeholder="Address"
              >
            </div>

            <div class="form-group mb-0">
              <label class="small font-weight-bold text-muted mb-1">Remarks</label>
              <textarea
                name="remarks"
                rows="3"
                class="form-control form-control-sm"
                placeholder="Optional remarks"
              >{{ person.remarks|default:'' }}</textarea>
            </div>

          </div>

          <div class="card-footer bg-white d-flex justify-content-end">
            <a href="{% url 'good_transport:delivery_persons:list' %}" class="btn btn-light btn-sm border mr-2">
              Cancel
            </a>

            <button type="submit" class="btn btn-primary btn-sm">
              <i class="fas fa-save mr-1"></i>
              {% if person %}Update{% else %}Save{% endif %}
            </button>
          </div>
        </form>
      </div>

    </div>
  </div>

</div>
{% endblock %}