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

{% block title %}Expiry Report{% endblock %}
{% block heading %}Expiry Report{% endblock %}

{% block stylesheets %}
<style>
  /* ── Filter card ── */
  .rpt .form-control { min-width: 140px; }

  /* ── Status badges ── */
  .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 colours ── */
  .row-expired td { background:#ffe0e0 !important; }
  .row-short   td { background:#fff8d6 !important; }

  /* ── Group header ── */
  .row-group-header td {
    background:#e8eff7 !important;
    font-weight:700;
    font-size:.9rem;
    padding:5px 8px;
  }

  /* ── Summary pills ── */
  .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; }

  /* ── Table misc ── */
  .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 pills ── */
  .radio-pill input { display:none; }
  .radio-pill label {
    border:1px solid #ced4da; border-radius:999px;
    padding:.2rem .65rem; margin-right:.2rem;
    cursor:pointer; font-size:.85rem;
  }
  .radio-pill input:checked + label { background:#cfe2ff; border-color:#0d6efd; }
</style>
{% endblock %}

{% block content %}

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

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

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

        {# Days to Expiry #}
        <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>

        {# Status #}
        <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;30d)</option>
            <option value="ok"      {% if status_filter == 'ok'      %}selected{% endif %}>OK</option>
          </select>
        </div>

        {# Show Zero Stock #}
        <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>{# row #}

      {# ── Grouping & Actions row ── #}
      <div class="row align-items-center mt-1">

        <div class="col-12 col-md-6 mb-2">
          <div class="small text-muted mb-1">Group By</div>
          <div class="radio-pill">
            <input type="radio" id="g_none"     name="group_by" value="none"     {% if group_by == 'none'     %}checked{% endif %}>
            <label for="g_none">None</label>
            <input type="radio" id="g_status"   name="group_by" value="status"   {% if group_by == 'status'   %}checked{% endif %}>
            <label for="g_status">By Status</label>
            <input type="radio" id="g_company"  name="group_by" value="company"  {% if group_by == 'company'  %}checked{% endif %}>
            <label for="g_company">By Company</label>
            <input type="radio" id="g_category" name="group_by" value="category" {% if group_by == 'category' %}checked{% endif %}>
            <label for="g_category">By Category</label>
          </div>
        </div>

        <div class="col-12 col-md-6 mb-2">
          <div class="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-search mr-1"></i>Filter
            </button>

            <div class="d-flex gap-1">
              {# Excel #}
              <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 }}&group_by={{ group_by }}{% if show_zero %}&show_zero=1{% endif %}">
                <i class="fas fa-file-excel mr-1"></i>Excel
              </a>

              {# PDF — orientation modal #}
              <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>
            </div>

          </div>
        </div>

      </div>{# row #}

    </div>{# card-body #}
  </div>{# card #}
</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>

{# ── Data 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 %}
              {% if r.is_group_header %}
                <tr class="row-group-header">
                  <td colspan="{{ r.colspan }}">&#9658;&nbsp;{{ r.group_label }}</td>
                </tr>
              {% else %}
                <tr class="{{ r.row_class }}">
                  {% for cell in r.cells %}
                    <td class="{{ cell.class }}">
                      {# Status column: render badge #}
                      {% if forloop.counter == 9 %}
                        {% 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>
              {% endif %}
            {% 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 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>{# table-responsive #}
  </div>
</div>


{# ── PDF Orientation Modal ────────────────────────────────────────────────── #}
<div class="modal fade" id="pdfOrientModal" tabindex="-1" role="dialog"
     aria-labelledby="pdfOrientLabel" 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" id="pdfOrientLabel">
          <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>

{% endblock %}


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

  // ── PDF download button ─────────────────────────────────────────────────
  $('#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 }}"
      + "&group_by={{ group_by }}"
      {% if show_zero %}+ "&show_zero=1"{% endif %}
      + "&orientation=" + orient;
    $('#pdfOrientModal').modal('hide');
    window.location.href = url;
  });

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