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

{% block content %}
<style>
  .bp-page-wrap{padding:18px;}
  .bp-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 4px 16px rgba(15,23,42,.06);}
  .bp-card-head{padding:16px 18px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .bp-title{font-size:20px;font-weight:800;color:#0f172a;margin:0;}
  .bp-muted{color:#64748b;font-size:13px;}
  .bp-body{padding:16px 18px;}
  .bp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;padding:9px 14px;text-decoration:none;font-weight:700;cursor:pointer;}
  .bp-btn-primary{background:#2563eb;color:#fff;}
  .bp-btn-light{background:#f1f5f9;color:#0f172a;}
  .bp-btn-green{background:#16a34a;color:#fff;}
  .bp-btn-red{background:#dc2626;color:#fff;}
  .bp-filter{display:grid;grid-template-columns:1fr 180px auto;gap:10px;margin-bottom:14px;}
  .bp-input,.bp-select{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;outline:none;}
  .bp-table{width:100%;border-collapse:collapse;}
  .bp-table th,.bp-table td{border-bottom:1px solid #e5e7eb;padding:10px;text-align:left;vertical-align:middle;}
  .bp-table th{background:#f8fafc;color:#334155;font-size:13px;}
  .bp-badge{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700;}
  .bp-badge-active{background:#dcfce7;color:#166534;}
  .bp-badge-inactive{background:#fee2e2;color:#991b1b;}
  .bp-actions{display:flex;gap:6px;flex-wrap:wrap;}
  .bp-pagination{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:14px;}
  @media(max-width:700px){
    .bp-filter{grid-template-columns:1fr;}
    .bp-table{font-size:13px;}
    .bp-actions{flex-direction:column;}
  }
</style>

<div class="bp-page-wrap">
  <div class="bp-card">
    <div class="bp-card-head">
      <div>
        <h2 class="bp-title">Delivery Persons</h2>
        <div class="bp-muted">Restaurant delivery staff list</div>
      </div>
      <a class="bp-btn bp-btn-primary" href="{% url 'hotel:restaurant:delivery_person_add' %}">
        + Add Delivery Person
      </a>
    </div>

    <div class="bp-body">
      {% if messages %}
        {% for message in messages %}
          <div style="margin-bottom:10px;padding:10px 12px;border-radius:10px;background:#eff6ff;color:#1e40af;">
            {{ message }}
          </div>
        {% endfor %}
      {% endif %}

      <form method="get" class="bp-filter">
        <input class="bp-input" type="text" name="q" value="{{ q }}" placeholder="Search by name, mobile, phone, address">

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

        <button class="bp-btn bp-btn-light" type="submit">Filter</button>
      </form>

      <table class="bp-table">
        <thead>
          <tr>
            <th style="width:80px;">T ID</th>
            <th>Name</th>
            <th>Mobile</th>
            <th>Phone</th>
            <th>Status</th>
            <th style="width:210px;">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for person in persons %}
            <tr>
              <td>{{ person.t_id }}</td>
              <td>
                <strong>{{ person.name }}</strong>
                {% if person.linked_user %}
                  <div class="bp-muted">User: {{ person.linked_user }}</div>
                {% endif %}
              </td>
              <td>{{ person.mobile }}</td>
              <td>{{ person.phone|default:"-" }}</td>
              <td>
                {% if person.status == "ACTIVE" %}
                  <span class="bp-badge bp-badge-active">Active</span>
                {% else %}
                  <span class="bp-badge bp-badge-inactive">Inactive</span>
                {% endif %}
              </td>
              <td>
                <div class="bp-actions">
                  <a class="bp-btn bp-btn-light" href="{% url 'hotel:restaurant:delivery_person_detail' person.t_id %}">View</a>
                  <a class="bp-btn bp-btn-green" href="{% url 'hotel:restaurant:delivery_person_edit' person.t_id %}">Edit</a>
                </div>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="6" style="text-align:center;color:#64748b;padding:20px;">
                No delivery person found.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>

      {% if page_obj.has_other_pages %}
        <div class="bp-pagination">
          {% if page_obj.has_previous %}
            <a class="bp-btn bp-btn-light" href="?page={{ page_obj.previous_page_number }}{% if query_string %}&{{ query_string }}{% endif %}">Previous</a>
          {% endif %}

          <span class="bp-muted">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>

          {% if page_obj.has_next %}
            <a class="bp-btn bp-btn-light" href="?page={{ page_obj.next_page_number }}{% if query_string %}&{{ query_string }}{% endif %}">Next</a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}