{% extends "finance/base.html" %}
{% load humanize %}
{% block content %}
<style>
.table-responsive{overflow-x:auto}.filter-label{font-weight:600;margin-bottom:4px}.report-title{font-size:2.5rem;font-weight:600;margin-bottom:0}.btn-report{min-width:90px}.showing-text{font-size:13px;color:#6c757d}.pagination{margin-bottom:0}.pagination .page-link{color:#495057}.pagination .active .page-link{background-color:rgb(80,90,97);border-color:rgb(80,90,97);color:#fff}
.attach4-table{min-width:1900px;font-size:12px}.attach4-table th{background:#F2F2F2!important;color:#111!important;border:1px solid #d1cba9!important;text-align:center;vertical-align:middle;white-space:nowrap;padding:4px}.attach4-table td{border:1px solid #d1cba9!important;vertical-align:middle;padding:3px}.attach4-line{min-width:45px;text-align:center}.attach4-description{min-width:220px;white-space:nowrap}.attach4-number{min-width:105px;text-align:right;white-space:nowrap}.attach4-total td{font-weight:700;background:#dce8ef!important}.attach4-section td{background:#0878cf!important;color:#fff!important;font-weight:600}
</style>
<div class="container-fluid mt-3">
  <div class="d-flex justify-content-between align-items-end flex-wrap gap-3 mb-3">
    <div><div class="report-title">FQR#4 Attachment</div><div class="text-muted small">Attachment -4-</div></div>
    <form method="get" class="d-flex flex-wrap align-items-end gap-2 mb-0">
      <div><label class="filter-label d-block">Year</label><select name="year" class="form-select">{% for y in years %}<option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>{% endfor %}</select></div>
      <div><label class="filter-label d-block">Quarter</label><select name="quarter" class="form-select">{% for value,label in quarters %}<option value="{{ value }}" {% if value == quarter %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></div>
      <button type="submit" class="btn btn-secondary btn-report">Calculate</button>
      <a href="?year={{ year }}&quarter={{ quarter }}&output=pdf" target="_blank" class="btn btn-secondary btn-report">PDF</a>
      <a href="?year={{ year }}&quarter={{ quarter }}&output=excel" class="btn btn-secondary btn-report">Excel</a>
    </form>
  </div>
  {% if paginator_obj %}
  <div class="d-flex justify-content-between align-items-center mb-2"><div class="showing-text">{% if paginator_obj.paginator.count %}Showing {{ paginator_obj.start_index }} - {{ paginator_obj.end_index }} of {{ paginator_obj.paginator.count }}{% else %}Showing 0 - 0 of 0{% endif %}</div><nav><ul class="pagination pagination-sm mb-0">
    {% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page=1">First</a></li><li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.previous_page_number }}">Previous</a></li>{% endif %}
    {% for num in page_obj.paginator.page_range %}{% if num == page_obj.number %}<li class="page-item active"><span class="page-link">{{ num }}</span></li>{% elif num >= page_obj.number|add:"-2" and num <= page_obj.number|add:"2" %}<li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page={{ num }}">{{ num }}</a></li>{% endif %}{% endfor %}
    {% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.next_page_number }}">Next</a></li><li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.paginator.num_pages }}">Last</a></li>{% endif %}
  </ul></nav></div>{% endif %}
  <div class="table-responsive"><table class="table table-bordered table-sm align-middle attach4-table">
    <thead>
      <tr>
        <th rowspan="3" class="attach4-line">Line</th><th rowspan="3" class="attach4-description">Description</th>
        <th colspan="4">Personnel Cost</th><th colspan="2">Technical Services</th><th rowspan="3">5) Contract /<br>Outside Services</th>
        <th colspan="2" rowspan="2">6) Material</th><th colspan="2" rowspan="2">7) Insurance</th><th colspan="2" rowspan="2">8) Environment</th><th rowspan="3">9) Sundries</th><th colspan="3">TOTAL THIS PERIOD</th>
      </tr>
      <tr>
        <th colspan="2">1) Salaries &amp; Wages</th><th colspan="2">2) Others/Empl. Benefit</th><th rowspan="2">3) Corporate<br>Assistant</th><th rowspan="2">4) Contracts</th>
        <th rowspan="2">Actual</th><th rowspan="2">Budget</th><th rowspan="2">Over/(Under)<br>Budget</th>
      </tr>
      <tr><th>Expt.</th><th>Nat'l</th><th>Expt.</th><th>Nat'l</th><th>Dom.</th><th>Import</th><th>Dom.</th><th>Import</th><th>Comm.Dev</th><th>Env.Ctrl</th></tr>
    </thead>
    <tbody>
      {% for row in page_obj %}
      <tr {% if row.type == 'HEADER' or row.type == 'TITLE' or row.type == 'SECTION' %}class="attach4-section"{% endif %}>
        <td class="attach4-line">{{ row.lineno }}</td>
        <td class="attach4-description">{% if row.type == "ACCT" %}<span style="display:inline-block;margin-left:20px">{{ row.descript }}</span>{% else %}{{ row.descript }}{% endif %}</td>
        {% for value in row.column_values %}<td class="attach4-number">{{ value|floatformat:2|intcomma }}</td>{% endfor %}
        <td class="attach4-number">{{ row.qtract|floatformat:2|intcomma }}</td><td class="attach4-number">{{ row.qtrbgt|floatformat:2|intcomma }}</td><td class="attach4-number">{{ row.qtroverbgt|floatformat:2|intcomma }}</td>
      </tr>
      {% empty %}<tr><td colspan="19" class="text-center text-muted py-4">No attachment data found.</td></tr>{% endfor %}
      {% if page_obj %}<tr class="attach4-total"><td></td><td>Total</td>{% for value in totals.column_values %}<td class="text-end">{{ value|floatformat:2|intcomma }}</td>{% endfor %}<td class="text-end">{{ totals.qtract|floatformat:2|intcomma }}</td><td class="text-end">{{ totals.qtrbgt|floatformat:2|intcomma }}</td><td class="text-end">{{ totals.qtroverbgt|floatformat:2|intcomma }}</td></tr>{% endif %}
    </tbody>
  </table></div>
  {% if paginator_obj %}<div class="d-flex justify-content-between align-items-center mt-2"><div class="showing-text">{% if paginator_obj.paginator.count %}Showing {{ paginator_obj.start_index }} - {{ paginator_obj.end_index }} of {{ paginator_obj.paginator.count }}{% else %}Showing 0 - 0 of 0{% endif %}</div><nav><ul class="pagination pagination-sm mb-0">
    {% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page=1">First</a></li><li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.previous_page_number }}">Previous</a></li>{% endif %}
    {% for num in page_obj.paginator.page_range %}{% if num == page_obj.number %}<li class="page-item active"><span class="page-link">{{ num }}</span></li>{% elif num >= page_obj.number|add:"-2" and num <= page_obj.number|add:"2" %}<li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page={{ num }}">{{ num }}</a></li>{% endif %}{% endfor %}
    {% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.next_page_number }}">Next</a></li><li class="page-item"><a class="page-link" href="?year={{ year }}&quarter={{ quarter }}&page={{ page_obj.paginator.num_pages }}">Last</a></li>{% endif %}
  </ul></nav></div>{% endif %}
</div>
{% endblock %}