{# templates/reports/purchase_order.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Purchase Order{% endblock %}
{% block heading %}Purchase Order (Suggestion){% endblock %}

{% block stylesheets %}
<style>
  .rpt .form-control { min-width: 140px; }

  .summary-pill {
    display:inline-block; padding:4px 14px;
    border-radius:20px; font-weight:600;
    font-size:.85rem; margin-right:6px;
  }
  .pill-total { background:#e9ecef; color:#333; }
  .pill-qty   { background:#ffc107; color:#333; }
  .pill-cost  { background:#28a745; color:#fff; }

  .rpt table thead th { background:#1f3864; color:#fff; white-space:nowrap; }
  .rpt tfoot th { background:#d6e4f7; font-weight:700; }
  .text-end { text-align:right; }
  .text-center { text-align:center; }

  .radio-pill input { display:none; }
  .radio-pill label {
    border:1px solid #ced4da; border-radius:999px;
    padding:.3rem .9rem; margin-right:.3rem;
    cursor:pointer; font-size:.88rem;
  }
  .radio-pill input:checked + label { background:#cfe2ff; border-color:#0d6efd; }

  #dateRangeBlock.is-hidden { display:none; }
</style>
{% endblock %}

{% block content %}

{# ── Filter form ──────────────────────────────────────────────────────── #}
<form method="get" class="rpt mb-3" id="poFilterForm">
  <div class="card">
    <div class="card-body py-2">

      <div class="row align-items-end g-2">

        {# Mode #}
        <div class="col-12 mb-2">
          <div class="small text-muted mb-1">Purchase Order Mode</div>
          <div class="radio-pill">
            <input type="radio" id="m_reorder" name="mode" value="reorder"
                   {% if filters.mode == 'reorder' %}checked{% endif %}>
            <label for="m_reorder">Re-Order Level</label>
            <input type="radio" id="m_sale" name="mode" value="sale"
                   {% if filters.mode == 'sale' %}checked{% endif %}>
            <label for="m_sale">Sale Based</label>
          </div>
        </div>

        {# Company #}
        <div class="col-6 col-md-3 mb-2">
          <label class="mb-1 small">Company</label>
          <select name="company_id" class="form-control form-control-sm">
            <option value="">— All Companies —</option>
            {% for comp in companies %}
              <option value="{{ comp.t_id }}" {% if filters.company_id == comp.t_id %}selected{% endif %}>
                {{ comp.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        {# Category #}
        <div class="col-6 col-md-3 mb-2">
          <label class="mb-1 small">Category</label>
          <select name="category_id" class="form-control form-control-sm">
            <option value="">— All Categories —</option>
            {% for cat in categories %}
              <option value="{{ cat.t_id }}" {% if filters.category_id == cat.t_id %}selected{% endif %}>
                {{ cat.cat_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        {# Date range — sirf Sale Based mode k lea #}
        <div class="col-12 col-md-4 mb-2" id="dateRangeBlock">
          <label class="mb-1 small">Sale Date Range</label>
          <div class="d-flex gap-1">
            <input type="date" name="from" value="{{ filters.from|date:'Y-m-d' }}" class="form-control form-control-sm">
            <input type="date" name="to" value="{{ filters.to|date:'Y-m-d' }}" class="form-control form-control-sm">
          </div>
        </div>

        {# Limit #}
        <div class="col-6 col-md-2 mb-2">
          <label class="mb-1 small">Limit</label>
          <select name="limit" class="form-control form-control-sm">
            {% for l in "100,200,500,1000"|make_list %}{% endfor %}
            <option value="100"  {% if filters.limit == 100 %}selected{% endif %}>100</option>
            <option value="200"  {% if filters.limit == 200 %}selected{% endif %}>200</option>
            <option value="500"  {% if filters.limit == 500 %}selected{% endif %}>500</option>
            <option value="1000" {% if filters.limit == 1000 %}selected{% endif %}>1000</option>
          </select>
        </div>

      </div>{# row #}

      <div class="row align-items-center mt-1">
        <div class="col-12 d-flex justify-content-between align-items-center flex-wrap gap-1">

          <button class="btn btn-primary btn-sm" type="submit">
            <i class="fas fa-filter mr-1"></i>Filter
          </button>

          <div class="d-flex gap-1">
            <a class="btn btn-outline-secondary btn-sm" target="_blank"
               href="{% url 'reports:purchase_order_print' %}?mode={{ filters.mode }}&company_id={{ filters.company_id }}&category_id={{ filters.category_id }}&from={{ filters.from|date:'Y-m-d' }}&to={{ filters.to|date:'Y-m-d' }}&limit={{ filters.limit }}&paper=a4">
              <i class="fas fa-print mr-1"></i>Print A4
            </a>
            <a class="btn btn-outline-secondary btn-sm" target="_blank"
               href="{% url 'reports:purchase_order_print' %}?mode={{ filters.mode }}&company_id={{ filters.company_id }}&category_id={{ filters.category_id }}&from={{ filters.from|date:'Y-m-d' }}&to={{ filters.to|date:'Y-m-d' }}&limit={{ filters.limit }}&paper=a5">
              <i class="fas fa-print mr-1"></i>Print A5
            </a>
            <a class="btn btn-outline-dark btn-sm" target="_blank"
               href="{% url 'reports:purchase_order_print' %}?mode={{ filters.mode }}&company_id={{ filters.company_id }}&category_id={{ filters.category_id }}&from={{ filters.from|date:'Y-m-d' }}&to={{ filters.to|date:'Y-m-d' }}&limit={{ filters.limit }}&paper=thermal">
              <i class="fas fa-receipt mr-1"></i>Thermal 80mm
            </a>
          </div>

        </div>
      </div>

    </div>
  </div>
</form>

{# ── Summary pills ───────────────────────────────────────────────────── #}
<div class="mb-2">
  <span class="summary-pill pill-total">Items to Order: {{ totals.total_items }}</span>
  <span class="summary-pill pill-qty">Total Qty: {{ totals.total_required_qty|floatformat:2 }}</span>
  <span class="summary-pill pill-cost">Est. Cost: {{ totals.total_required_cost|floatformat:2 }}</span>
</div>

{# ── Table ───────────────────────────────────────────────────────────── #}
<div class="card rpt">
  <div class="card-body p-2">
    <div class="table-responsive">
      <table class="table table-bordered table-hover table-sm mb-0">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Code</th>
            <th>Company</th>
            <th>Category</th>
            {% if filters.mode == 'sale' %}
              <th class="text-end">Sold Qty (Range)</th>
            {% else %}
              <th class="text-end">Stock Limit</th>
            {% endif %}
            <th class="text-end">Present Stock</th>
            <th class="text-end">Order Qty</th>
            <th class="text-end">Pur. Price</th>
            <th class="text-end">Est. Cost</th>
          </tr>
        </thead>
        <tbody>
          {% for it in items %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td>{{ it.name }}{% if it.member_count > 1 %} <span class="badge badge-info">{{ it.member_count }} codes</span>{% endif %}</td>
              <td>{{ it.product_code }}</td>
              <td>{{ it.company_name }}</td>
              <td>{{ it.category_name }}</td>
              {% if filters.mode == 'sale' %}
                <td class="text-end">{{ it.sold_qty|floatformat:2 }}</td>
              {% else %}
                <td class="text-end">{{ it.stock_limit|floatformat:2 }}</td>
              {% endif %}
              <td class="text-end">{{ it.present_stock|floatformat:2 }}</td>
              <td class="text-end"><strong>{{ it.required_qty|floatformat:2 }}</strong></td>
              <td class="text-end">{{ it.purchase_price|floatformat:2 }}</td>
              <td class="text-end">{{ it.required_cost|floatformat:2 }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="10" class="text-center text-muted py-4">
                <i class="fas fa-check-circle mr-2"></i>Koi item order karne ki zarurat nahi — sab stock theek hy.
              </td>
            </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <th colspan="7" class="text-end">TOTAL</th>
            <th class="text-end">{{ totals.total_required_qty|floatformat:2 }}</th>
            <th></th>
            <th class="text-end">{{ totals.total_required_cost|floatformat:2 }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
$(function () {
  function toggleDateBlock() {
    var mode = $('input[name="mode"]:checked').val();
    if (mode === 'sale') {
      $('#dateRangeBlock').removeClass('is-hidden');
    } else {
      $('#dateRangeBlock').addClass('is-hidden');
    }
  }
  toggleDateBlock();
  $('input[name="mode"]').on('change', toggleDateBlock);
});
</script>
{% endblock %}