{# templates/sales/delivery_bill_report.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Bill-wise Delivery Report{% endblock %}

{% block stylesheets %}
<style>
  .dbr-wrap { max-width: 1200px; margin: 0 auto; }
  #dbr_table th { font-size: .78rem; background: #f1f5f9; white-space: nowrap; position: sticky; top: 0; }
  #dbr_table td { font-size: .88rem; vertical-align: middle; }
  #dbr_table tr.dbr-row { cursor: pointer; }
  #dbr_table tr.dbr-row:focus { outline: none; background: #dbeafe; }
  #dbr_table tr.dbr-active { background: #dbeafe !important; }
  .badge-pending   { background:#fef3c7; color:#92400e; }
  .badge-partial   { background:#fed7aa; color:#9a3412; }
  .badge-delivered { background:#bbf7d0; color:#166534; }
  .dbr-chip {
    display:inline-block; padding:4px 12px; border-radius:20px; font-weight:600;
    font-size:.8rem; margin-right:6px; cursor:pointer; border:1px solid transparent;
  }
  .dbr-chip.active { box-shadow: 0 0 0 2px #1e3a8a inset; }
  .chip-all { background:#e2e8f0; color:#1e293b; }
  .chip-delivered { background:#bbf7d0; color:#166534; }
  .chip-partial { background:#fed7aa; color:#9a3412; }
  .chip-pending { background:#fef3c7; color:#92400e; }
  #dbr_modal .qty-num { text-align:right; }
  .urdu-name { font-size:.85rem; color:#475569; direction: rtl; }
  @media print { .no-print { display:none !important; } }
</style>
{% endblock %}

{% block content %}
<div class="dbr-wrap mt-3">

  <div class="d-flex justify-content-between align-items-center mb-2 no-print">
    <h5 class="mb-0">📋 Bill-wise Delivery Report</h5>
    <div>
      <a href="{% url 'sales:delivery_page' %}" class="btn btn-outline-primary btn-sm">＋ Deliver</a>
      <a href="{% url 'sales:delivery_report' %}" class="btn btn-outline-secondary btn-sm">Activity Report</a>
      <button type="button" class="btn btn-outline-secondary btn-sm" onclick="window.print()">Print</button>
    </div>
  </div>

  <form method="get" class="form-inline mb-2 no-print">
    <label class="mr-2">From</label>
    <input type="date" name="date_from" value="{{ date_from }}" class="form-control form-control-sm mr-3">
    <label class="mr-2">To</label>
    <input type="date" name="date_to" value="{{ date_to }}" class="form-control form-control-sm mr-3">
    <input type="hidden" name="status" id="dbr_status_input" value="{{ status_f }}">
    <button type="submit" class="btn btn-primary btn-sm mr-2">Show</button>
    <a href="{% url 'sales:delivery_bill_report' %}" class="btn btn-light border btn-sm">Today</a>
  </form>

  <!-- Status filter chips -->
  <div class="mb-2 no-print">
    <span class="dbr-chip chip-all {% if status_f == 'all' %}active{% endif %}"        data-st="all">All ({{ count_all }})</span>
    <span class="dbr-chip chip-delivered {% if status_f == 'delivered' %}active{% endif %}" data-st="delivered">Delivered ({{ count_delivered }})</span>
    <span class="dbr-chip chip-partial {% if status_f == 'partial' %}active{% endif %}"   data-st="partial">Partial ({{ count_partial }})</span>
    <span class="dbr-chip chip-pending {% if status_f == 'pending' %}active{% endif %}"   data-st="pending">Pending ({{ count_pending }})</span>
  </div>

  <div class="text-muted mb-1" style="font-size:.8rem;">{{ date_from }} → {{ date_to }} &nbsp;•&nbsp; Tip: row par click ya <kbd>Enter</kbd> se delivery details.</div>

  <div class="table-responsive">
    <table class="table table-bordered table-hover table-sm" id="dbr_table">
      <thead>
        <tr>
          <th>#</th>
          <th>Invoice</th>
          <th>Date</th>
          <th>Customer</th>
          <th class="text-right">Total</th>
          <th class="text-center">Status</th>
          <th>Delivered By</th>
          <th>Delivered At</th>
        </tr>
      </thead>
      <tbody id="dbr_tbody">
        {% for r in rows %}
        <tr class="dbr-row" tabindex="0" data-inv="{{ r.invoice_no }}">
          <td>{{ forloop.counter }}</td>
          <td><b>{{ r.invoice_no }}</b></td>
          <td>{{ r.date }}</td>
          <td>{{ r.customer }}</td>
          <td class="text-right">{{ r.total|floatformat:0 }}</td>
          <td class="text-center">
            {% if r.status == 'delivered' %}<span class="badge badge-delivered">Delivered</span>
            {% elif r.status == 'partial' %}<span class="badge badge-partial">Partial</span>
            {% else %}<span class="badge badge-pending">Pending</span>{% endif %}
          </td>
          <td>{{ r.delivered_by }}</td>
          <td>{{ r.delivered_at }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="8" class="text-center text-muted py-4">No sale invoices found for this period / filter.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="dbr_modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title">Delivery Details — Invoice <span id="dbr_m_inv"></span></h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="d-flex justify-content-between mb-2">
          <div><b id="dbr_m_cust"></b></div>
          <div class="text-muted">Total: <b id="dbr_m_total"></b></div>
        </div>
        <div class="table-responsive">
          <table class="table table-bordered table-sm mb-0">
            <thead>
              <tr>
                <th>Code</th><th>Item</th>
                <th class="text-right">Ordered</th>
                <th class="text-right">Delivered</th>
                <th class="text-right">Remaining</th>
                <th class="text-center">Status</th>
                <th>By</th>
              </tr>
            </thead>
            <tbody id="dbr_m_body"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
(function () {
  "use strict";

  var SENTINEL = "999999999";
  var LOOKUP_TPL = "{% url 'sales:delivery_lookup' 999999999 %}";
  function lookupUrl(inv){ return LOOKUP_TPL.replace(SENTINEL, String(inv)); }

  // Status chips -> submit form with status
  var statusInput = document.getElementById('dbr_status_input');
  document.querySelectorAll('.dbr-chip').forEach(function(chip){
    chip.addEventListener('click', function(){
      statusInput.value = chip.getAttribute('data-st');
      chip.closest('form') ? null : null;
      document.querySelector('form').submit();
    });
  });

  var rowsEls = Array.prototype.slice.call(document.querySelectorAll('#dbr_tbody tr.dbr-row'));
  var activeIdx = -1;

  function setActive(i){
    rowsEls.forEach(function(r){ r.classList.remove('dbr-active'); });
    if (i < 0) i = 0;
    if (i >= rowsEls.length) i = rowsEls.length - 1;
    activeIdx = i;
    if (rowsEls[i]) { rowsEls[i].classList.add('dbr-active'); rowsEls[i].focus(); rowsEls[i].scrollIntoView({block:'nearest'}); }
  }

  function badge(s){
    if (s === 'delivered') return '<span class="badge badge-delivered">Delivered</span>';
    if (s === 'partial')   return '<span class="badge badge-partial">Partial</span>';
    return '<span class="badge badge-pending">Pending</span>';
  }
  function fmt(n){ return parseFloat(n||0).toLocaleString('en-US',{maximumFractionDigits:2}); }

  function openDetails(inv){
    fetch(lookupUrl(inv), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
      .then(function(r){ return r.json(); })
      .then(function(d){
        if (!d.ok) { return; }
        document.getElementById('dbr_m_inv').textContent = d.header.invoice_no;
        document.getElementById('dbr_m_cust').textContent = d.header.customer_name || '';
        document.getElementById('dbr_m_total').textContent = fmt(d.header.total_amount);
        var tb = document.getElementById('dbr_m_body');
        tb.innerHTML = '';
        d.items.forEach(function(it){
          var urdu = it.urdu_name ? '<div class="urdu-name">' + it.urdu_name + '</div>' : '';
          var tr = document.createElement('tr');
          tr.innerHTML =
            '<td>' + (it.code || '') + '</td>' +
            '<td>' + (it.name || '') + urdu + '</td>' +
            '<td class="qty-num">' + (it.ordered_disp || '0') + '</td>' +
            '<td class="qty-num">' + (it.delivered_disp || '0') + '</td>' +
            '<td class="qty-num">' + (it.remaining_disp || '0') + '</td>' +
            '<td class="text-center">' + badge(it.status) + '</td>' +
            '<td>' + (it.delivered_by || '') + '</td>';
          tb.appendChild(tr);
        });
        if (window.jQuery) { window.jQuery('#dbr_modal').modal('show'); }
      });
  }

  rowsEls.forEach(function(tr, i){
    tr.addEventListener('click', function(){ setActive(i); openDetails(tr.getAttribute('data-inv')); });
    tr.addEventListener('keydown', function(e){
      if (e.key === 'Enter') { e.preventDefault(); openDetails(tr.getAttribute('data-inv')); }
    });
  });

  document.addEventListener('keydown', function(e){
    if (e.key === 'ArrowDown') { e.preventDefault(); setActive(activeIdx + 1); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setActive(activeIdx - 1); }
    else if (e.key === 'Escape') { if (window.jQuery) window.jQuery('#dbr_modal').modal('hide'); }
  });

  if (rowsEls.length) setActive(0);
})();
</script>
{% endblock %}