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

{% block title %}{{ title }}{% endblock %}
{% block heading %}{{ title }}{% endblock %}

{% block stylesheets %}
<style>
  .badge-expired { background:#dc3545; color:#fff; padding:2px 7px; border-radius:4px; font-size:.8rem; }
  .badge-short   { background:#ffc107; color:#333; padding:2px 7px; border-radius:4px; font-size:.8rem; }
  .badge-ok      { background:#28a745; color:#fff; padding:2px 7px; border-radius:4px; font-size:.8rem; }

  .row-expired td { background:#ffe0e0 !important; }
  .row-short   td { background:#fff8d6 !important; }

  .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-expired { background:#dc3545; color:#fff; }
  .pill-short   { background:#ffc107; color:#333; }
  .pill-ok      { 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; }
</style>
{% endblock %}

{% block content %}

<form method="get" class="rpt mb-3">
  <div class="card">
    <div class="card-body py-2">

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

        <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 company_id|stringformat:"s" == comp.t_id|stringformat:"s" %}selected{% endif %}>{{ comp.name }}</option>
            {% endfor %}
          </select>
        </div>

        <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 category_id|stringformat:"s" == cat.t_id|stringformat:"s" %}selected{% endif %}>{{ cat.cat_name }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-6 col-md-2 mb-2">
          <label class="mb-1 small">Expiring within (days)</label>
          <input type="number" name="days_filter" value="{{ days_filter }}"
                 min="0" max="9999" placeholder="e.g. 90"
                 class="form-control form-control-sm">
        </div>

        <div class="col-6 col-md-2 mb-2">
          <label class="mb-1 small">Status</label>
          <select name="status_filter" class="form-control form-control-sm">
            <option value="all"     {% if status_filter == 'all'     %}selected{% endif %}>All</option>
            <option value="expired" {% if status_filter == 'expired' %}selected{% endif %}>Expired</option>
            <option value="short"   {% if status_filter == 'short'   %}selected{% endif %}>Short (&le;{{ short_threshold }}d)</option>
            <option value="ok"      {% if status_filter == 'ok'      %}selected{% endif %}>OK</option>
          </select>
        </div>

        <div class="col-6 col-md-2 mb-2 d-flex align-items-end">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="show_zero" id="chkZero" value="1" {% if show_zero %}checked{% endif %}>
            <label class="form-check-label small" for="chkZero">Show Zero Stock</label>
          </div>
        </div>

      </div>

      <div class="row mt-2">
        <div class="col-auto">
          <button class="btn btn-primary btn-sm" type="submit">
            <i class="fas fa-search mr-1"></i>Filter
          </button>
        </div>
        <div class="col ml-auto d-flex justify-content-end gap-1">
          <a class="btn btn-outline-success btn-sm"
             href="{{ url_excel }}?company_id={{ company_id }}&category_id={{ category_id }}&days_filter={{ days_filter }}&status_filter={{ status_filter }}{% if show_zero %}&show_zero=1{% endif %}">
            <i class="fas fa-file-excel mr-1"></i>Excel
          </a>
          <button type="button" class="btn btn-outline-danger btn-sm"
                  data-toggle="modal" data-target="#pdfOrientModal">
            <i class="fas fa-file-pdf mr-1"></i>PDF
          </button>
          <button type="button" class="btn btn-outline-dark btn-sm"
                  data-toggle="modal" data-target="#thermalGroupModal">
            <i class="fas fa-print mr-1"></i>Thermal
          </button>
        </div>
      </div>

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

{# Summary pills #}
<div class="mb-2">
  <span class="summary-pill pill-total">Total: {{ summary.total }}</span>
  <span class="summary-pill pill-expired"><i class="fas fa-skull-crossbones mr-1"></i>Expired: {{ summary.expired }}</span>
  <span class="summary-pill pill-short"><i class="fas fa-exclamation-triangle mr-1"></i>Short (&le;{{ short_threshold }}d): {{ summary.short }}</span>
  <span class="summary-pill pill-ok"><i class="fas fa-check-circle mr-1"></i>OK: {{ summary.ok }}</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>
            {% for col in columns %}
              <th class="{% if col.align == 'right' %}text-end{% elif col.align == 'center' %}text-center{% endif %}">{{ col.label }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% if render_rows %}
            {% for r in render_rows %}
              <tr class="{{ r.row_class }}">
                {% for cell in r.cells %}
                  <td class="{{ cell.class }}">
                    {% if forloop.counter == 8 %}
                      {% if cell.value == 'Expired' %}<span class="badge-expired">{{ cell.value }}</span>
                      {% elif cell.value == 'Short'  %}<span class="badge-short">{{ cell.value }}</span>
                      {% else %}<span class="badge-ok">{{ cell.value }}</span>{% endif %}
                    {% else %}
                      {% if 'text-end' in cell.class %}{{ cell.value|floatformat:2 }}{% else %}{{ cell.value }}{% endif %}
                    {% endif %}
                  </td>
                {% endfor %}
              </tr>
            {% endfor %}
          {% else %}
            <tr><td colspan="{{ columns|length }}" class="text-center text-muted py-4">
              <i class="fas fa-inbox mr-2"></i>No batch/expiry data found in FIFO layers for the selected filters.
            </td></tr>
          {% endif %}
        </tbody>
        <tfoot>
          <tr>
            {% for cell in totals_render %}
              <th class="{{ cell.class }}">{% if 'text-end' in cell.class %}{{ cell.value|floatformat:2 }}{% else %}{{ cell.value }}{% endif %}</th>
            {% endfor %}
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

{# PDF Modal #}
<div class="modal fade" id="pdfOrientModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title"><i class="fas fa-file-pdf mr-1 text-danger"></i>PDF Orientation</h6>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body py-3">
        <div class="d-flex justify-content-around">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="pdfOrient" id="orientPortrait" value="portrait">
            <label class="form-check-label" for="orientPortrait"><i class="fas fa-file mr-1"></i>Portrait</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="pdfOrient" id="orientLandscape" value="landscape" checked>
            <label class="form-check-label" for="orientLandscape"><i class="fas fa-file-alt mr-1"></i>Landscape</label>
          </div>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger btn-sm" id="btnDownloadPdf">
          <i class="fas fa-download mr-1"></i>Download PDF
        </button>
      </div>
    </div>
  </div>
</div>

{# ── Thermal Grouping Modal ───────────────────────────────────────────────── #}
<div class="modal fade" id="thermalGroupModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title"><i class="fas fa-print mr-1"></i>Thermal Print — Group By</h6>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body py-3">
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="thermalGroup" id="tg_none" value="none" checked>
          <label class="form-check-label" for="tg_none">No Grouping</label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="thermalGroup" id="tg_company" value="company">
          <label class="form-check-label" for="tg_company">By Company</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="thermalGroup" id="tg_category" value="category">
          <label class="form-check-label" for="tg_category">By Category</label>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-dark btn-sm" id="btnThermalPrint">
          <i class="fas fa-print mr-1"></i>Print
        </button>
      </div>
    </div>
  </div>
</div>

{# ── Hidden JSON data for thermal ────────────────────────────────────────── #}
{# Column order: 0=idx, 1=prod_code, 2=prod_name, 3=company, 4=batch, 5=expiry_date, 6=days_to_exp, 7=status, 8=qty #}
<script id="thermalData" type="application/json">
[{% for r in thermal_rows %}{"prod_name":"{{ r.prod_name|escapejs }}","company":"{{ r.company|escapejs }}","category":"{{ r.category|escapejs }}","batch":"{{ r.batch|escapejs }}","expiry":"{{ r.expiry_date|escapejs }}","days":{{ r.days_to_exp }},"status":"{{ r.status|escapejs }}","qty":{{ r.qty }}}{% if not forloop.last %},{% endif %}{% endfor %}]
</script>

{% endblock %}

{% block javascripts %}
<script>
$(function () {

  // ── PDF download ──────────────────────────────────────────────────────────
  $('#btnDownloadPdf').on('click', function () {
    var orient = $('input[name="pdfOrient"]:checked').val() || 'landscape';
    var url = "{{ url_pdf }}"
      + "?company_id={{ company_id }}"
      + "&category_id={{ category_id }}"
      + "&days_filter={{ days_filter }}"
      + "&status_filter={{ status_filter }}"
      {% if show_zero %}+ "&show_zero=1"{% endif %}
      + "&orientation=" + orient;
    $('#pdfOrientModal').modal('hide');
    window.location.href = url;
  });

  // ── Thermal print ─────────────────────────────────────────────────────────
  $('#btnThermalPrint').on('click', function () {
    var groupBy = $('input[name="thermalGroup"]:checked').val() || 'none';
    $('#thermalGroupModal').modal('hide');

    var rows = [];
    try { rows = JSON.parse(document.getElementById('thermalData').textContent); }
    catch(e) { alert('Data parse error'); return; }
    if (!rows.length) { alert('No data to print.'); return; }

    // ── CSS — pure black, large, clear ──────────────────────────────────────
    var css = [
      '* { margin:0; padding:0; box-sizing:border-box; }',

      /* body: Arial for clean print, NOT Courier */
      'body {',
      '  width:80mm;',
      '  font-family: Arial, Helvetica, sans-serif;',
      '  font-size:11pt;',
      '  color:#000;',
      '  background:#fff;',
      '}',

      /* title */
      '.t-title {',
      '  text-align:center;',
      '  font-size:14pt;',
      '  font-weight:900;',
      '  letter-spacing:1px;',
      '  padding:2mm 0 1mm;',
      '  border-bottom:2px solid #000;',
      '  margin-bottom:1.5mm;',
      '}',

      /* subtitle */
      '.t-sub {',
      '  text-align:center;',
      '  font-size:9pt;',
      '  font-weight:700;',
      '  color:#000;',
      '  margin-bottom:2.5mm;',
      '}',

      /* group header */
      '.g-head {',
      '  font-size:11pt;',
      '  font-weight:900;',
      '  text-transform:uppercase;',
      '  letter-spacing:0.5px;',
      '  border-top:2px solid #000;',
      '  border-bottom:1px solid #000;',
      '  padding:1.5mm 1mm;',
      '  margin:3mm 0 1.5mm;',
      '  background:#000;',
      '  color:#fff;',
      '}',

      /* table */
      'table { width:100%; border-collapse:collapse; }',

      /* thead */
      'thead tr {',
      '  border-bottom:2px solid #000;',
      '}',
      'thead th {',
      '  font-size:10pt;',
      '  font-weight:900;',
      '  padding:1mm 1.5mm;',
      '  text-align:left;',
      '  color:#000;',
      '}',

      /* tbody rows */
      'tbody tr {',
      '  border-bottom:1px solid #000;',
      '}',
      'tbody td {',
      '  font-size:11pt;',
      '  font-weight:600;',
      '  padding:1.5mm 1.5mm;',
      '  vertical-align:top;',
      '  word-break:break-word;',
      '  color:#000;',
      '}',

      /* column widths */
      '.cn { width:48%; }',            /* product name */
      '.cq { width:14%; text-align:right; }',  /* qty */
      '.ce { width:38%; }',            /* expiry */

      /* batch line under product name */
      '.t-batch {',
      '  display:block;',
      '  font-size:9pt;',
      '  font-weight:700;',
      '  color:#000;',
      '  margin-top:0.5mm;',
      '}',

      /* status tags */
      '.t-exp {',
      '  display:inline-block;',
      '  font-size:8.5pt;',
      '  font-weight:900;',
      '  border:1.5px solid #000;',
      '  padding:0 2mm;',
      '  margin-top:0.5mm;',
      '  background:#000;',
      '  color:#fff;',
      '  letter-spacing:0.5px;',
      '}',
      '.t-short {',
      '  display:inline-block;',
      '  font-size:8.5pt;',
      '  font-weight:900;',
      '  border:1.5px solid #000;',
      '  padding:0 2mm;',
      '  margin-top:0.5mm;',
      '  color:#000;',
      '  letter-spacing:0.5px;',
      '}',

      /* days remaining */
      '.t-days {',
      '  display:block;',
      '  font-size:9pt;',
      '  font-weight:700;',
      '  color:#000;',
      '  margin-top:0.5mm;',
      '}',

      /* totals row */
      '.t-total {',
      '  border-top:2px solid #000;',
      '  margin-top:2mm;',
      '  padding:1.5mm 1.5mm 0;',
      '  font-size:11pt;',
      '  font-weight:900;',
      '  color:#000;',
      '}',

      /* section divider */
      '.t-div {',
      '  border-top:1px dashed #000;',
      '  margin:3mm 0;',
      '}',

      /* print page settings */
      '@media print {',
      '  @page { size:80mm auto; margin:2mm 3mm; }',
      '  body { width:100%; }',
      '}'
    ].join('\n');

    // ── renderTable helper ───────────────────────────────────────────────────
    function renderTable(items) {
      var out = '<table>';
      out += '<thead><tr>';
      out += '<th class="cn">Product</th>';
      out += '<th class="cq">Qty</th>';
      out += '<th class="ce">Expiry</th>';
      out += '</tr></thead><tbody>';
      var totalQty = 0;

      items.forEach(function(r) {
        out += '<tr>';

        // Product name cell
        var nameCell = '<strong>' + (r.prod_name || '') + '</strong>';
        if (r.batch) {
          nameCell += '<span class="t-batch">B: ' + r.batch + '</span>';
        }
        if (r.status === 'Expired') {
          nameCell += '<br><span class="t-exp">EXPIRED</span>';
        } else if (r.status === 'Short') {
          nameCell += '<br><span class="t-short">&#9888; SHORT</span>';
        }
        out += '<td class="cn">' + nameCell + '</td>';

        // Qty cell
        var qty = parseFloat(r.qty) || 0;
        out += '<td class="cq"><strong>' + qty.toFixed(2) + '</strong></td>';
        totalQty += qty;

        // Expiry cell
        var expCell = '<strong>' + (r.expiry || '') + '</strong>';
        if (r.days !== undefined && r.days !== null && r.days !== '') {
          var d = parseInt(r.days);
          expCell += '<span class="t-days">' + (d < 0 ? Math.abs(d) + 'd ago' : d + 'd left') + '</span>';
        }
        out += '<td class="ce">' + expCell + '</td>';

        out += '</tr>';
      });

      out += '</tbody></table>';
      out += '<div class="t-total">Total Qty: ' + totalQty.toFixed(2) + ' &nbsp;|&nbsp; Items: ' + items.length + '</div>';
      return out;
    }

    // ── Build full HTML ──────────────────────────────────────────────────────
    var today = new Date().toLocaleDateString('en-GB', {day:'2-digit', month:'short', year:'numeric'});

    var html = '<!DOCTYPE html><html><head><meta charset="utf-8">';
    html += '<title>Expiry Report</title>';
    html += '<style>' + css + '</style>';
    html += '</head><body>';

    // Header
    html += '<div class="t-title">EXPIRY REPORT</div>';
    var subLine = today;
    {% if days_filter %}subLine += ' | &le;{{ days_filter }}d';{% endif %}
    {% if status_filter != 'all' %}subLine += ' | {{ status_filter|upper }}';{% endif %}
    html += '<div class="t-sub">' + subLine + '</div>';

    // Content
    if (groupBy === 'none') {
      html += renderTable(rows);

    } else {
      var groups = {};
      var groupOrder = [];
      rows.forEach(function(r) {
        var key = (groupBy === 'company') ? (r.company || '—') : (r.category || '—');
        if (!groups[key]) { groups[key] = []; groupOrder.push(key); }
        groups[key].push(r);
      });
      groupOrder.forEach(function(gkey, gi) {
        html += '<div class="g-head">' + gkey + '</div>';
        html += renderTable(groups[gkey]);
        if (gi < groupOrder.length - 1) {
          html += '<div class="t-div"></div>';
        }
      });
    }

    html += '</body></html>';

    // ── Open print window ────────────────────────────────────────────────────
    var win = window.open('', '_blank', 'width=360,height=650,scrollbars=yes');
    win.document.write(html);
    win.document.close();
    win.onload = function() {
      win.focus();
      win.print();
    };
  });

});
</script>
{% endblock %}