{% extends "pos/base.html" %}
{% load static %}
{% block title %}Purchase Orders{% endblock %}

{% block stylesheets %}
<style>
  #poDataTable tbody tr:nth-child(odd) { background: #ffffff; }
  #poDataTable tbody tr:nth-child(even) { background: #f8fafc; }
  #poDataTable tbody tr:hover { background: #eaf4ff !important; }
  #poDataTable tbody tr { transition: background-color 0.15s ease-in-out; }

  .po-progress-wrap { width:100%; background:#e9ecef; border-radius:4px; height:16px; position:relative; }
  .po-progress-bar { height:16px; border-radius:4px; background:#2d8a4e; }
  .po-progress-label { position:absolute; top:0; left:0; right:0; text-align:center; font-size:.7rem; line-height:16px; color:#222; }
  .badge-delivery-not_started { background:#adb5bd; color:#fff; }
  .badge-delivery-partially_delivered { background:#e0a800; color:#fff; }
  .badge-delivery-fully_delivered { background:#2d8a4e; color:#fff; }
  .badge-delivery-no_items { background:#6c757d; color:#fff; }
</style>
{% endblock %}

{% block heading %}Purchase Orders{% endblock %}

{% block content %}
<form method="get" class="filter-box mb-3">
  <div class="row align-items-end">
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Vendor</label>
      <input type="text" name="vendor" value="{{ vendor_q }}" class="form-control" placeholder="Vendor name">
    </div>
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Status</label>
      <select name="status" class="form-control">
        <option value="">All</option>
        {% for val, label in status_choices %}
          <option value="{{ val }}" {% if status_q == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-4 mb-2">
      <label class="small mb-1 d-block">Date Range</label>
      <div class="d-flex">
        <input type="date" name="date_from" value="{{ date_from_q }}" class="form-control me-1">
        <input type="date" name="date_to"   value="{{ date_to_q }}"   class="form-control">
      </div>
    </div>
    <div class="col-auto mb-2">
      <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-search me-1"></i>Search</button>
      <a href="{% url 'purchases:po_list' %}" class="btn btn-secondary btn-sm">Reset</a>
    </div>
  </div>
</form>

<div class="mb-3">
  <a href="{% url 'purchases:po_create' %}" class="btn btn-success">
    <i class="fas fa-plus me-1"></i> New Purchase Order
  </a>
</div>

<div class="card shadow mb-4">
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered" id="poDataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th>#</th>
            <th>PO #</th>
            <th>Vendor</th>
            <th>Date</th>
            <th>Status</th>
            <th>Delivery Progress</th>
            <th class="text-end">Net Total</th>
            <th class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ row.po.t_id }}</td>
            <td>{{ row.po.vendor.name|default:"-" }}</td>
            <td>{{ row.po.po_date }}</td>
            <td>{{ row.po.get_status_display }}</td>
            <td style="min-width:160px;">
              <div class="po-progress-wrap">
                <div class="po-progress-bar" style="width:{{ row.progress_pct }}%;"></div>
                <div class="po-progress-label">{{ row.received_qty|floatformat:1 }} / {{ row.ordered_qty|floatformat:1 }}</div>
              </div>
              <span class="badge badge-delivery-{{ row.delivery_status_slug }}" style="font-size:.65rem;">{{ row.delivery_status }}</span>
            </td>
            <td class="text-end">{{ row.net_total|floatformat:2 }}</td>
            <td class="text-center">
              <a href="{% url 'purchases:po_print_saved' row.po.id %}" target="_blank" class="btn btn-info btn-sm" title="View / Print"><i class="fas fa-eye"></i></a>
              <a href="{% url 'purchases:po_edit' row.po.id %}" class="btn btn-warning btn-sm" title="Edit"><i class="fas fa-edit"></i></a>
              {% if row.delivery_status_slug != "fully_delivered" and row.line_count > 0 %}
              <a href="{% url 'purchases:po_convert_to_purchase' row.po.id %}" class="btn btn-success btn-sm" title="Receive / Convert to Purchase"><i class="fas fa-truck-loading"></i></a>
              {% endif %}
              <a href="{% url 'purchases:po_delete' row.po.id %}" class="btn btn-danger btn-sm" title="Delete"
                 onclick="return confirm('Delete PO #{{ row.po.t_id }}? This cannot be undone.');">
                <i class="fas fa-trash"></i>
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script>
  $(function(){
    $('#poDataTable').DataTable({ order: [[3, 'desc']] });
  });
</script>
{% endblock %}