{% extends "layout.html" %}
{% block content %}
<div class="page-wide">
  <div class="panel">
    <div class="panel-title">Submitted Timesheets</div>
    {% if flash %}<div class="alert success">{{ flash }}</div>{% endif %}
    <form method="get" action="/review" style="display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap;">
      <label class="label">Time Period</label>
      <select class="select" name="timesheet_id">
        {% for p in period_options %}
          <option value="{{ p.timesheet_id }}" {% if p.timesheet_id == active_ts %}selected{% endif %}>{{ p.display }}</option>
        {% endfor %}
      </select>
      <button class="btn primary" type="submit">Load</button>

      {% if active_ts %}
        <a class="btn" href="/overview?timesheet_id={{ active_ts }}">Time Period Overview</a>
        <!-- NEW: Export all submitted employees for this period to Excel (includes Payroll Extras) -->
        <a class="btn primary" href="/overview/export-xlsx?timesheet_id={{ active_ts }}">Export to BA</a>
      {% endif %}

      <button class="btn" type="button" onclick="openPrint('/review/print-all?timesheet_id={{ active_ts }}')">Print All Submitted</button>
    </form>

    {% if submitted and submitted|length > 0 %}
      <table class="table">
        <thead>
          <tr><th>Employee</th><th>Submitted At</th><th>Actions</th></tr>
        </thead>
        <tbody>
          {% for row in submitted %}
          <tr>
            <td>{{ row.employee_name }}</td>
            <td class="mono">{% if row.submitted_at %}{{ row.submitted_at|fmt_dt }}{% endif %}</td>
            <td style="display:flex;gap:8px;flex-wrap:wrap;">
              <a class="btn" href="/review/edit?timesheet_id={{ active_ts }}&employee_id={{ row.employee_id }}">View/Edit</a>
              <button class="btn" type="button" onclick="openPrint('/review/print?timesheet_id={{ active_ts }}&employee_id={{ row.employee_id }}')">Print</button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <div class="empty">No submitted timesheets for this period.</div>
    {% endif %}
  </div>
</div>

<!-- Hidden iframe used for printing without leaving the review page -->
<iframe id="print-iframe" style="position:fixed; inset:0; width:0; height:0; border:0; visibility:hidden;"></iframe>

<script>
function openPrint(url) {
  const iframe = document.getElementById('print-iframe');
  iframe.src = url;
}
window.addEventListener('message', function (e) {
  if (e && e.data && e.data.type === 'close-print') {
    const iframe = document.getElementById('print-iframe');
    if (iframe) {
      iframe.removeAttribute('src'); // unload
    }
  }
});
</script>

<style>
/* Uniform button sizing across this page */
.btn, .panel .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
}
.label { font-size:13px; color:#475569; }
.select { min-height:36px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
.table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
</style>
{% endblock %}