{% extends "layout.html" %}
{% block content %}
<div class="sheet">
  <div class="header">
    <div class="brand">Timesheet</div>
    <div class="row">
      <div class="emp"><strong>Employee:</strong> {{ employee.name }}</div>
      <div class="period"><strong>Period:</strong> {{ period_name }}</div>
    </div>
    <!-- Totals at the top (kept) -->
    <div class="totals-top">
      <span><strong>Regular:</strong> {{ grouped.totals.regular|fmt2 }}</span>
      <span><strong>Overtime:</strong> {{ grouped.totals.overtime|fmt2 }}</span>
      <span><strong>PTO:</strong> {{ grouped.totals.pto|fmt2 }}</span>
      <span><strong>Holiday:</strong> {{ grouped.totals.holiday|fmt2 }}</span>
      <span><strong>Other:</strong> {{ grouped.totals.bereavement|fmt2 }}</span>
      <span><strong>Paid Total:</strong> {{ grouped.totals.paid_total|fmt2 }}</span>
    </div>
  </div>

  <table class="grid">
    <thead>
      <tr>
        <th>Date</th>
        <th>Clock In</th>
        <th>Clock Out</th>
        <th class="num">Break</th>
        <th class="num">Total</th>
        <!-- PTO amount before PTO Type (kept) -->
        <th class="num">PTO</th>
        <th>PTO Type</th>
        <th class="num">Holiday</th>
        <th class="num">Other</th>
        <th class="num">Paid Total</th>
      </tr>
    </thead>
    <tbody>
      {% for r in grouped.rows %}
      <tr>
        <td class="mono">{{ r.work_date }}</td>
        <!-- Holiday takes precedence; then PTO type; else times -->
        <td class="mono">
          {% if r.holiday_hours and r.holiday_hours > 0 %}
            Holiday
          {% elif r.pto_type %}
            {{ r.pto_type }}
          {% else %}
            {{ r.clock_in|fmt_excel_dt }}
          {% endif %}
        </td>
        <td class="mono">
          {% if r.holiday_hours and r.holiday_hours > 0 %}
            Holiday
          {% elif r.pto_type %}
            {{ r.pto_type }}
          {% else %}
            {{ r.clock_out|fmt_excel_dt }}
          {% endif %}
        </td>
        <td class="num mono">{{ r.break_hours|fmt2 }}</td>
        <td class="num mono">{{ r.total_hours|fmt2 }}</td>
        <td class="num mono">{{ r.pto_hours|fmt2 }}</td>
        <td>{{ r.pto_type or "" }}</td>
        <td class="num mono">{{ r.holiday_hours|fmt2 }}</td>
        <td class="num mono">{{ r.bereavement_hours|fmt2 }}</td>
        <td class="num mono">{{ r.hours_paid|fmt2 }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <!-- Footer UNDER all content (no overlay) -->
  <div class="footer-block">
    <div class="comments">
      <div class="comments-title">Comments</div>
      <div class="comments-box">
        {% if grouped.comments %}{{ grouped.comments }}{% endif %}
      </div>
    </div>

    <div class="signatures">
      <div class="sig-block">
        <div class="signature-line"></div>
        <div class="sig-label">Employee Signature</div>
      </div>
      <div class="sig-block">
        <div class="signature-line"></div>
        <div class="sig-label">Reviewer Signature</div>
      </div>
      <div class="sig-block">
        <div class="signature-line"></div>
        <div class="sig-label">Date</div>
      </div>
    </div>
  </div>
</div>

<style>
  header, nav, .navbar, .topbar, .site-header, .app-nav, .tk-header, .tk-nav, .tk-brand { display:none !important; }
  @media print {
    body { margin: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tk-container { display:block !important; margin:0 !important; padding:0 !important; }
  }

  :root {
    --ink:#222; --grid:#cdd3da; --head:#f4f6f9;
    --margin: 0.30in;   /* sync with @page */
  }

  @page { size: Letter landscape; margin: var(--margin); }

  .sheet {
    width: calc(11in - (2 * var(--margin)));
    margin: 0;
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }

  .header { margin-bottom: 0.06in; }
  .brand { font-size: 19.5pt; font-weight: 800; line-height: 1.1; margin-bottom: 0.03in; }
  .row { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 0.16in; }
  .emp, .period { font-size: 10.4pt; }

  .totals-top {
    display:flex; flex-wrap:wrap; gap:0.12in;
    font-size: 11pt; margin-top: 0.04in; margin-bottom: 0.08in;
    border: none; padding: 0;
  }

  /* Body smaller for more fit */
  table.grid { width:100%; border-collapse: separate; border-spacing: 0; }
  thead { display: table-header-group; }
  table.grid th, table.grid td {
    border: 1pt solid var(--grid);
    padding: 0.042in 0.058in;        /* smaller cell padding */
    font-size: 9.8pt;                 /* smaller body font */
    background: #fff;
  }
  table.grid thead th {
    background: var(--head);
    text-transform: uppercase;
    font-size: 9.2pt;
    letter-spacing: .02em;
    color: #3a4856;
  }
  .num { text-align: right; }
  .mono { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; }
  table.grid tr { page-break-inside: avoid; }


  /* Footer underneath */
  .footer-block { margin-top: 0.14in; page-break-inside: avoid; }
  .comments-title { font-size: 10.2pt; font-weight: 600; margin-bottom: 0.06in; }
  .comments-box {
    border: none;
    min-height: 0.60in;               /* smaller default height */
    padding: 0.06in;
    font-size: 9.8pt;
    background: transparent;
  }
  .signatures {
    display: grid;
    grid-template-columns: 1fr 1fr 0.8fr;
    column-gap: 0.16in;
    align-items: end;
    margin-top: 0.12in;
  }
  .signature-line { border-bottom: 1.3pt solid #333; height: 0.20in; }
  .sig-label { font-size: 9.4pt; color:#555; text-align: center; margin-top: 0.04in; }

  /* Tightening classes if needed */
  .compact table.grid th, .compact table.grid td { padding: 0.038in 0.054in; font-size: 9.5pt; }
  .compact .comments-box { min-height: 0.50in; }
  .micro table.grid th, .micro table.grid td { padding: 0.034in 0.050in; font-size: 9.2pt; }
  .micro .comments-box { min-height: 0.45in; }
</style>

<script>
(function(){
  // Make sure everything fits on one page; if not, progressively shrink paddings/font sizes.
  const DPI = 96;
  const pageHeightInches = 8.5;
  const styles = getComputedStyle(document.documentElement);
  const marginInches = parseFloat(styles.getPropertyValue('--margin')) || 0.30;
  const availablePx = (pageHeightInches - (2 * marginInches)) * DPI;

  function fit() {
    const sheet = document.querySelector('.sheet');
    if (!sheet) return;

    sheet.classList.remove('compact','micro');
    let h = sheet.scrollHeight;

    if (h > availablePx) {
      sheet.classList.add('compact');
      h = sheet.scrollHeight;
    }
    if (h > availablePx) {
      sheet.classList.add('micro');
    }
  }

  window.addEventListener('load', function(){
    fit();
    setTimeout(function(){ window.focus(); window.print(); }, 60);
  });
  if (typeof window.onbeforeprint !== 'undefined') window.addEventListener('beforeprint', fit);
  if (window.matchMedia) {
    const mq = window.matchMedia('print');
    if (mq && mq.addEventListener) mq.addEventListener('change', e => { if (e.matches) fit(); });
  }
})();
</script>
{% endblock %}