{% extends "client/layout.html" %}

{% block title %}Reports — {{ active_cat or 'All' }}{% endblock %}

{% block page_title %}
Reports
<span class="sep">/</span>
<span id="bc-cat">{{ active_cat or '' }}</span>
{% endblock %}

{% block topbar_badge %}
  {% if client_name %}
  <div class="topbar-badge">
    <span class="badge-dot"></span>
    {{ client_name }}
  </div>
  {% endif %}
{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
{% endblock %}

{% block nav_reports_active %}active open{% endblock %}
{% block nav_sub_open %}open{% endblock %}

{% block sidebar_categories %}
{% if category_list %}
{% for cat in category_list %}
<button class="nav-sub-item {% if cat == active_cat %}active{% endif %}" data-cat="{{ cat }}"
  onclick="selectCategory('{{ cat | escapejs }}', this)">
  <span class="sub-dot"></span>
  <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;">{{ cat
    }}</span>
  <span class="sub-count">{{ categories[cat]|length }}</span>
</button>
{% endfor %}
{% endif %}
{% endblock %}

{% block extra_css %}
<style>
  /* ── Page Header ── */
  .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
  }

  .ph-left .eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
    display: block;
  }

  .ph-left .page-h1 {
    font-family: 'Fraunces', serif;
    font-size: 30px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.4px;
    line-height: 1.1;
  }

  .ph-left .page-sub {
    font-size: 13px;
    color: var(--ink3);
    margin-top: 5px;
  }

  .ph-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* ── Search ── */
  .search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  .search-field {
    position: relative;
    flex: 1;
    max-width: 400px;
  }

  .search-field input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 10px 14px 10px 40px;
    color: var(--ink);
    font-size: 13.5px;
    outline: none;
    transition: all var(--transition);
  }

  .search-field input:focus {
    border-color: var(--border2);
    box-shadow: 0 0 0 3px var(--primaryglow);
  }

  .search-field input::placeholder {
    color: var(--ink3);
  }

  .search-field .sf-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink3);
    pointer-events: none;
  }

  .search-field .sf-icon svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .search-clear {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ink3);
    cursor: pointer;
    display: none;
    padding: 2px;
  }

  .search-clear:hover {
    color: var(--ink2);
  }

  .search-clear svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .result-pill {
    font-size: 12px;
    color: var(--ink3);
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .result-pill b {
    color: var(--ink2);
  }

  /* ── Grid / List ── */
  .report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
  }

  .report-list-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Grid Card */
  .report-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    cursor: default;
    position: relative;
    overflow: hidden;
  }

  .report-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--teal-light), transparent);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
  }

  .report-card:hover {
    border-color: var(--border2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
  }

  .report-card:hover::after {
    opacity: 1;
  }

  .rc-icon {
    width: 42px;
    height: 42px;
    background: var(--teal-light);
    border: 1px solid var(--border2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .rc-icon svg {
    width: 19px;
    height: 19px;
    stroke: var(--primary2);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .rc-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    flex: 1;
  }

  .rc-meta {
    font-size: 11.5px;
    color: var(--ink3);
    margin-top: 2px;
  }

  .rc-action {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid var(--border);
  }

  .btn-download {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--r);
    background: linear-gradient(135deg, var(--primary), #3b6fd4);
    border: none;
    color: white;
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 3px 12px rgba(79, 142, 247, 0.28);
    flex: 1;
    justify-content: center;
  }

  .btn-download:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(79, 142, 247, 0.45);
  }

  .btn-download svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* List Row */
  .report-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color var(--transition), box-shadow var(--transition);
  }

  .report-row:hover {
    border-color: var(--border2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .rr-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--teal-light);
    border: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .rr-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--primary2);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .rr-info {
    flex: 1;
    min-width: 0;
  }

  .rr-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rr-cat {
    font-size: 11.5px;
    color: var(--ink3);
    margin-top: 2px;
  }

  .rr-dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--r);
    background: linear-gradient(135deg, var(--primary), #3b6fd4);
    border: none;
    color: white;
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(79, 142, 247, 0.25);
  }

  .rr-dl:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(79, 142, 247, 0.42);
  }

  .rr-dl svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* View Toggle */
  .view-toggle {
    display: flex;
    gap: 3px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 3px;
  }

  .vtbtn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: transparent;
    border: none;
    color: var(--ink3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
  }

  .vtbtn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }

  .vtbtn:hover {
    color: var(--ink2);
    background: var(--surface3);
  }

  .vtbtn.active {
    background: var(--surface3);
    color: var(--primary2);
  }

  /* Empty / No results */
  .empty-state {
    text-align: center;
    padding: 80px 20px;
  }

  .es-title {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: var(--ink2);
    margin-bottom: 8px;
  }

  .es-sub {
    font-size: 13px;
    color: var(--ink3);
    line-height: 1.7;
    max-width: 340px;
    margin: 0 auto;
  }

  .no-results-msg {
    text-align: center;
    padding: 40px;
    color: var(--ink3);
    font-size: 13.5px;
  }

  /* Skeleton */
  .sk-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .sk-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .sk-sq {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .sk-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .sk-line {
    height: 10px;
    border-radius: 4px;
  }

  .sk-btn {
    width: 90px;
    height: 34px;
    border-radius: var(--r);
    flex-shrink: 0;
  }

  /* ── MODAL ── */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }

  .modal-overlay.open {
    opacity: 1;
    pointer-events: all;
  }

  .modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    width: 520px;
    max-width: 96vw;
    max-height: 88vh;
    overflow-y: auto;
    padding: 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }

  .modal-overlay.open .modal {
    transform: none;
  }

  .modal::-webkit-scrollbar {
    width: 4px;
  }

  .modal::-webkit-scrollbar-thumb {
    background: var(--surface3);
    border-radius: 4px;
  }

  .modal-head {
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }

  .modal-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .modal-rep-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--teal-light);
    border: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .modal-rep-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary2);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .modal-title {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
  }

  .modal-cat {
    font-size: 11px;
    color: var(--ink3);
    margin-top: 3px;
  }

  .modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--ink3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition);
  }

  .modal-close:hover {
    background: var(--surface3);
    color: var(--ink);
  }

  .modal-close svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  .modal-body {
    padding: 22px 24px;
  }

  .params-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: var(--ink3);
    font-size: 13px;
  }

  .params-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 16px;
    color: var(--ink3);
    font-size: 13px;
  }

  .params-empty svg {
    width: 16px;
    height: 16px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .params-error {
    background: rgba(242, 107, 107, 0.07);
    border: 1px solid rgba(242, 107, 107, 0.2);
    border-radius: var(--r);
    padding: 14px 16px;
    color: var(--red);
    font-size: 13px;
  }

  .params-error small {
    display: block;
    color: var(--ink3);
    font-size: 11.5px;
    margin-top: 4px;
  }

  .params-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink3);
    margin-bottom: 14px;
  }

  .param-group {
    margin-bottom: 16px;
  }

  .param-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink2);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .param-label .req {
    color: var(--primary);
    margin-left: 2px;
  }

  .param-input,
  .param-select {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 11px 14px;
    color: var(--ink);
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    outline: none;
    transition: all var(--transition);
    appearance: none;
  }

  .param-input:focus,
  .param-select:focus {
    border-color: var(--border2);
    box-shadow: 0 0 0 3px var(--primaryglow);
  }

  .param-input::placeholder {
    color: var(--ink3);
  }

  .param-input.has-value,
  .param-select.has-value {
    border-color: rgba(46, 201, 124, 0.35);
    background: rgba(46, 201, 124, 0.03);
  }

  .date-input-wrap {
    position: relative;
  }

  .date-input-wrap .param-input {
    padding-right: 38px;
    cursor: pointer;
  }

  .date-cal-icon {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink3);
    pointer-events: none;
  }

  .date-cal-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .param-input.has-date {
    border-color: rgba(46, 201, 124, 0.35);
    background: rgba(46, 201, 124, 0.03);
  }

  .entity-wrap {
    position: relative;
  }

  .entity-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 11px 38px 11px 14px;
    color: var(--ink);
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    outline: none;
    transition: all var(--transition);
  }

  .entity-input:focus {
    border-color: var(--border2);
    box-shadow: 0 0 0 3px var(--primaryglow);
  }

  .entity-input::placeholder {
    color: var(--ink3);
  }

  .entity-input.resolved {
    border-color: rgba(46, 201, 124, 0.35);
    background: rgba(46, 201, 124, 0.03);
  }

  .entity-status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ink3);
  }

  .entity-status svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .entity-resolved {
    display: none;
    margin-top: 6px;
    background: rgba(46, 201, 124, 0.07);
    border: 1px solid rgba(46, 201, 124, 0.2);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--green);
    align-items: center;
    gap: 8px;
  }

  .entity-resolved.show {
    display: flex;
  }

  .entity-resolved-text {
    flex: 1;
  }

  .entity-clear-btn {
    background: none;
    border: none;
    color: var(--green);
    cursor: pointer;
    font-size: 12px;
    opacity: 0.8;
    padding: 0 2px;
    font-family: 'Sora', sans-serif;
  }

  .entity-clear-btn:hover {
    opacity: 1;
  }

  .entity-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: none;
    max-height: 200px;
    overflow-y: auto;
  }

  .entity-dropdown.open {
    display: block;
  }

  .entity-dropdown::-webkit-scrollbar {
    width: 3px;
  }

  .entity-dropdown::-webkit-scrollbar-thumb {
    background: var(--surface3);
  }

  .dd-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
  }

  .dd-item:last-child {
    border-bottom: none;
  }

  .dd-item:hover {
    background: var(--surface3);
  }

  .dd-code {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary2);
    background: var(--teal-light);
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    font-family: monospace;
  }

  .dd-name {
    font-size: 13px;
    color: var(--ink2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dd-msg {
    padding: 14px;
    color: var(--ink3);
    font-size: 13px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .btn-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--primary2);
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
  }

  .btn-retry:hover {
    background: var(--teal-light);
    border-color: var(--border2);
  }

  .btn-retry svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  .modal-foot {
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
  }

  .btn-cancel-modal {
    padding: 10px 20px;
    border-radius: var(--r);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink3);
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
  }

  .btn-cancel-modal:hover {
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ink2);
  }

  .btn-do-dl {
    padding: 10px 24px;
    border-radius: var(--r);
    background: linear-gradient(135deg, var(--primary), #3b6fd4);
    border: none;
    color: white;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(79, 142, 247, 0.3);
    transition: all var(--transition);
  }

  .btn-do-dl:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(79, 142, 247, 0.45);
  }

  .btn-do-dl:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .btn-do-dl svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .flatpickr-calendar {
    font-family: 'Sora', sans-serif !important;
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--surface2) !important;
    z-index: 9999 !important;
  }

  /* Month + year header */
  .flatpickr-months {
    background: var(--surface2) !important;
  }

  .flatpickr-current-month {
    color: var(--ink) !important;
  }

  .flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background: var(--surface2) !important;
    color: var(--ink) !important;
    border: none !important;
    outline: none !important;
    font-family: 'Sora', sans-serif !important;
  }

  /* Dropdown options */
  .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: var(--surface2) !important;
    color: var(--ink) !important;
  }

  /* Year input */
  .numInputWrapper input {
    color: var(--ink) !important;
    background: transparent !important;
  }

  /* Arrows */
  .flatpickr-prev-month svg,
  .flatpickr-next-month svg {
    fill: var(--ink) !important;
  }

  /* Weekdays */
  .flatpickr-weekdays {
    background: var(--surface2) !important;
  }

  .flatpickr-weekday {
    color: var(--ink3) !important;
  }

  /* Days */
  .flatpickr-day {
    color: var(--ink2) !important;
  }

  .flatpickr-day:hover {
    background: var(--surface3) !important;
    border-color: transparent !important;
  }

  .flatpickr-day.selected,
  .flatpickr-day.selected:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
  }

  .flatpickr-day.today {
    border-color: var(--primary) !important;
    color: var(--primary2) !important;
  }

  @media(max-width:600px) {
    .report-grid {
      grid-template-columns: 1fr;
    }

    .page-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .ph-right {
      width: 100%;
    }

    .search-row {
      flex-wrap: wrap;
    }

    .result-pill {
      display: none;
    }
  }
</style>
{% endblock %}

{% block content %}
<!-- Data island -->
<script id="rh-data" type="application/json">
{{ {
    "clientName": client_name,
    "folder": folder,
    "categories": categories,
    "catList": category_list,
    "activeCat": active_cat,
    "paramEntityMap": param_entity_map
} | tojson }}
</script>
<script>
  window.__RH__ = JSON.parse(document.getElementById('rh-data').textContent);
  document.body.dataset.clientName = window.__RH__.clientName;
</script>

<!-- Page header -->
<div class="page-header animate-fade-up">
  <div class="ph-left">
    <span class="eyebrow" id="rpt-eyebrow">Reports</span>
    <div class="page-h1" id="rpt-h1">{{ active_cat or 'Select a category' }}</div>
    <div class="page-sub" id="rpt-sub">Select a report to download</div>
  </div>
  <div class="ph-right">
    <div class="view-toggle">
      <button class="vtbtn" id="vtbtn-grid" onclick="setLayout('grid')" title="Grid view">
        <svg viewBox="0 0 24 24">
          <rect x="3" y="3" width="7" height="7" rx="1" />
          <rect x="14" y="3" width="7" height="7" rx="1" />
          <rect x="3" y="14" width="7" height="7" rx="1" />
          <rect x="14" y="14" width="7" height="7" rx="1" />
        </svg>
      </button>
      <button class="vtbtn active" id="vtbtn-list" onclick="setLayout('list')" title="List view">
        <svg viewBox="0 0 24 24">
          <line x1="8" y1="6" x2="21" y2="6" />
          <line x1="8" y1="12" x2="21" y2="12" />
          <line x1="8" y1="18" x2="21" y2="18" />
          <line x1="3" y1="6" x2="3.01" y2="6" />
          <line x1="3" y1="12" x2="3.01" y2="12" />
          <line x1="3" y1="18" x2="3.01" y2="18" />
        </svg>
      </button>
    </div>
  </div>
</div>

<!-- Search -->
<div class="search-row animate-fade-up anim-delay-1">
  <div class="search-field">
    <span class="sf-icon">
      <svg viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="8" />
        <line x1="21" y1="21" x2="16.65" y2="16.65" />
      </svg>
    </span>
    <input type="text" id="report-search" placeholder="Search reports in this category…"
      oninput="filterReports(this.value)">
    <button class="search-clear" id="search-clear-btn" onclick="clearSearch()">
      <svg viewBox="0 0 24 24">
        <line x1="18" y1="6" x2="6" y2="18" />
        <line x1="6" y1="6" x2="18" y2="18" />
      </svg>
    </button>
  </div>
  <div class="result-pill" id="result-pill" style="display:none;"></div>
</div>

<!-- Reports container -->
<div id="reports-container" class="report-list-view animate-fade-up anim-delay-2"></div>
<div id="no-results" class="no-results-msg" style="display:none;">
  No reports match "<span id="no-results-q"></span>"
</div>

<!-- ═══ DOWNLOAD MODAL ═══ -->
<div class="modal-overlay" id="modal">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title-el">
    <div class="modal-head">
      <div class="modal-head-left">
        <div class="modal-rep-icon">
          <svg viewBox="0 0 24 24">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <polyline points="14 2 14 8 20 8" />
            <line x1="16" y1="13" x2="8" y2="13" />
            <line x1="16" y1="17" x2="8" y2="17" />
          </svg>
        </div>
        <div>
          <div class="modal-title" id="modal-title-el">Download Report</div>
          <div class="modal-cat" id="modal-cat-el"></div>
        </div>
      </div>
      <button class="modal-close" onclick="closeModal()" aria-label="Close">
        <svg viewBox="0 0 24 24">
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </button>
    </div>
    <div class="modal-body" id="modal-params"></div>
    <div class="modal-foot">
      <button class="btn-cancel-modal" onclick="closeModal()">Cancel</button>
      <button class="btn-do-dl" id="dl-btn" onclick="triggerDownload()">
        <svg viewBox="0 0 24 24">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
          <polyline points="7 10 12 15 17 10" />
          <line x1="12" y1="15" x2="12" y2="3" />
        </svg>
        Download Excel
      </button>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
  /* ═══════════════════════════════════════════════
     STATE
  ═══════════════════════════════════════════════ */
  const RH = window.__RH__;
  let currentCat = RH.activeCat || RH.catList[0] || null;
  let currentLayout = 'list';
  let curReport = null;

  /* ═══════════════════════════════════════════════
     INIT
  ═══════════════════════════════════════════════ */
  document.addEventListener('DOMContentLoaded', function () {
    if (currentCat) renderCategory(currentCat);
    updateBreadcrumb(currentCat);
  });

  /* ═══════════════════════════════════════════════
     CATEGORY SELECT
  ═══════════════════════════════════════════════ */
  function selectCategory(cat, el) {
    currentCat = cat;

    document.querySelectorAll('.nav-sub-item').forEach(btn => {
      btn.classList.toggle('active', btn.dataset.cat === cat);
    });

    document.getElementById('report-search').value = '';
    document.getElementById('search-clear-btn').style.display = 'none';
    document.getElementById('result-pill').style.display = 'none';
    document.getElementById('no-results').style.display = 'none';

    updateBreadcrumb(cat);
    renderCategory(cat);

    /* Update URL without reload so browser history works */
    const url = new URL(window.location.href);
    url.searchParams.set('cat', cat);
    window.history.pushState({}, '', url);
  }

  function updateBreadcrumb(cat) {
    const el = document.getElementById('bc-cat');
    if (el) el.textContent = cat || '';
  }

  /* ═══════════════════════════════════════════════
     RENDER CATEGORY
  ═══════════════════════════════════════════════ */
  function renderCategory(cat) {
    const reports = RH.categories[cat] || [];

    document.getElementById('rpt-eyebrow').textContent =
      `${reports.length} Report${reports.length !== 1 ? 's' : ''} Available`;
    document.getElementById('rpt-h1').textContent = cat;
    document.getElementById('rpt-sub').textContent =
      reports.length ? 'Select a report to download' : 'No reports available';

    renderReports(reports);
  }

  /* ═══════════════════════════════════════════════
     RENDER REPORTS
  ═══════════════════════════════════════════════ */
  function renderReports(reports) {
    const container = document.getElementById('reports-container');
    container.innerHTML = '';
    container.className = currentLayout === 'grid'
      ? 'report-grid animate-fade-up'
      : 'report-list-view animate-fade-up';

    if (!reports.length) {
      container.innerHTML = `
      <div class="empty-state">
        <div class="es-title">No Reports</div>
        <div class="es-sub">No reports available in this category.</div>
      </div>`;
      return;
    }

    reports.forEach((r, i) => {
      const el = currentLayout === 'grid' ? makeGridCard(r) : makeListRow(r);
      el.style.animationDelay = `${i * 0.03}s`;
      container.appendChild(el);
    });
  }

  /* ═══════════════════════════════════════════════
     ICONS
  ═══════════════════════════════════════════════ */
  const FILE_SVG = `<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>`;
  const DL_SVG = `<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`;

  /* ═══════════════════════════════════════════════
     LIST ROW
  ═══════════════════════════════════════════════ */
  function makeListRow(r) {
    const div = document.createElement('div');
    div.className = 'report-row';
    div.dataset.name = r.name.toLowerCase();
    div.innerHTML = `
    <div class="rr-icon">${FILE_SVG}</div>
    <div class="rr-info">
      <div class="rr-name">${esc(prettify(r.name))}</div>
      <div class="rr-cat">${esc(currentCat)}</div>
    </div>
    <button class="rr-dl"
      onclick="openDownload('${esc(r.id)}','${esc(r.path)}','${esc(r.name)}','${esc(currentCat)}')">
      ${DL_SVG} Download
    </button>`;
    return div;
  }

  /* ═══════════════════════════════════════════════
     GRID CARD
  ═══════════════════════════════════════════════ */
  function makeGridCard(r) {
    const div = document.createElement('div');
    div.className = 'report-card';
    div.dataset.name = r.name.toLowerCase();
    div.innerHTML = `
    <div style="display:flex;align-items:flex-start;gap:14px;">
      <div class="rc-icon">${FILE_SVG}</div>
      <div style="flex:1;">
        <div class="rc-name">${esc(prettify(r.name))}</div>
        <div class="rc-meta">${esc(currentCat)}</div>
      </div>
    </div>
    <div class="rc-action">
      <button class="btn-download"
        onclick="openDownload('${esc(r.id)}','${esc(r.path)}','${esc(r.name)}','${esc(currentCat)}')">
        ${DL_SVG} Download
      </button>
    </div>`;
    return div;
  }

  /* ═══════════════════════════════════════════════
     LAYOUT TOGGLE
  ═══════════════════════════════════════════════ */
  function setLayout(mode) {
    currentLayout = mode;
    document.getElementById('vtbtn-grid')?.classList.toggle('active', mode === 'grid');
    document.getElementById('vtbtn-list')?.classList.toggle('active', mode === 'list');
    const q = document.getElementById('report-search').value;
    const reports = (RH.categories[currentCat] || [])
      .filter(r => r.name.toLowerCase().includes(q.toLowerCase()));
    renderReports(reports);
  }

  /* ═══════════════════════════════════════════════
     SEARCH
  ═══════════════════════════════════════════════ */
  function filterReports(q) {
    document.getElementById('search-clear-btn').style.display = q ? 'block' : 'none';
    const all = RH.categories[currentCat] || [];
    const filtered = q ? all.filter(r => r.name.toLowerCase().includes(q.toLowerCase())) : all;
    renderReports(filtered);

    const pill = document.getElementById('result-pill');
    const nores = document.getElementById('no-results');

    if (q) {
      pill.style.display = 'block';
      pill.innerHTML = `<b>${filtered.length}</b> of ${all.length} results`;
      nores.style.display = filtered.length ? 'none' : 'block';
      document.getElementById('no-results-q').textContent = q;
    } else {
      pill.style.display = 'none';
      nores.style.display = 'none';
    }
  }

  function clearSearch() {
    document.getElementById('report-search').value = '';
    filterReports('');
  }

  window.appOnSearch = function (val) {
    document.getElementById('report-search').value = val;
    filterReports(val);
  };

  /* ═══════════════════════════════════════════════
     ESCAPE
  ═══════════════════════════════════════════════ */
  function esc(s) {
    if (s == null) return '';
    return String(s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  }
  function prettify(str) {
    if (!str) return '';
    return str
      .replace(/([A-Z][a-z]+)/g, ' $1')
      .replace(/([A-Z]+)(?=[A-Z][a-z])/g, ' $1')
      .trim();
  }

  /* ═══════════════════════════════════════════════
     DATE PARAM DETECTION  ← NEW
     Matches any param whose name or prompt contains
     the word "date" (standalone or as part of
     fromdate / todate / startdate / enddate etc.)
     regardless of the declared type.
  ═══════════════════════════════════════════════ */
  function isDateParam(p) {
    // Always treat DateTime type as a date field
    if (p.type === 'DateTime') return true;
    // Normalise: lowercase, strip spaces/underscores/hyphens, then test
    const key = ((p.name || '') + ' ' + (p.prompt || ''))
      .toLowerCase()
      .replace(/[\s_\-]/g, '');
    return /date/.test(key);
  }

  /* ═══════════════════════════════════════════════
     MODAL — openDownload, closeModal, triggerDownload
  ═══════════════════════════════════════════════ */
  function openDownload(id, path, name, cat) {
    curReport = { id, path, name, cat };
    document.getElementById('modal-title-el').textContent = prettify(name);
    document.getElementById('modal-cat-el').textContent = cat;
    document.getElementById('modal-params').innerHTML =
      `<div class="params-loading"><div class="spinner"></div> Loading parameters…</div>`;
    document.getElementById('modal').classList.add('open');
    document.body.style.overflow = 'hidden';
    loadParams(id, path);
  }

  function closeModal() {
    document.getElementById('modal').classList.remove('open');
    document.body.style.overflow = '';
    curReport = null;
  }

  document.getElementById('modal').addEventListener('click', function (e) {
    if (e.target === this) closeModal();
  });

  async function loadParams(id, path) {
    const paramsEl = document.getElementById('modal-params');
    try {
      const res = await fetch(`/client/api/params?id=${encodeURIComponent(id)}&path=${encodeURIComponent(path)}`);
      const data = await res.json();
      renderParams(data);
    } catch (err) {
      paramsEl.innerHTML = `
      <div class="params-error">
        Failed to load parameters
        <small>${err.message}</small>
      </div>
      <button class="btn-retry" onclick="loadParams('${esc(id)}','${esc(path)}')">
        <svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
        Retry
      </button>`;
    }
  }

  function renderParams(params) {
    const paramsEl = document.getElementById('modal-params');
    const dlBtn = document.getElementById('dl-btn');

    if (!params || !params.length) {
      paramsEl.innerHTML = `
      <div class="params-empty">
        <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
        No parameters required — ready to download.
      </div>`;
      dlBtn.disabled = false;
      return;
    }

    paramsEl.innerHTML = `<div class="params-section-label">Report Parameters</div>`;

    params.forEach(p => {
      const group = document.createElement('div');
      group.className = 'param-group';
      const req = p.required ? `<span class="req">*</span>` : '';

      if (p.entityLookup) {
        group.innerHTML = buildEntityField(p, req);
      } else if (isDateParam(p)) {
        /* ← use isDateParam() instead of p.type === 'DateTime'
             so text params named *date* also get a calendar     */
        group.innerHTML = buildDateField(p, req);
      } else if (p.validValues && p.validValues.length) {
        group.innerHTML = buildSelectField(p, req);
      } else {
        group.innerHTML = buildTextField(p, req);
      }

      paramsEl.appendChild(group);

      /* init flatpickr for every date param ← updated check */
      if (isDateParam(p) && !p.entityLookup) {
        const inp = group.querySelector('.date-fp');
        if (inp) flatpickr(inp, {
          dateFormat: 'Y-m-d',
          onChange: function (sel, str) { inp.classList.toggle('has-date', !!str); }
        });
      }

      /* init entity search */
      if (p.entityLookup) {
        initEntitySearch(group, p);
      }
    });

    dlBtn.disabled = false;
    checkRequired();
  }

  function buildTextField(p, req) {
    return `
    <label class="param-label">${esc(prettify(p.prompt || p.name))}${req}</label>
    <input class="param-input" type="text"
      name="${esc(p.name)}"
      placeholder="${esc(p.prompt || p.name)}"
      ${p.defaultValue ? `value="${esc(p.defaultValue)}"` : ''}
      oninput="onParamChange(this)">`;
  }

  function buildDateField(p, req) {
    return `
    <label class="param-label">${esc(p.prompt || p.name)}${req}</label>
    <div class="date-input-wrap">
      <input class="param-input date-fp" type="text"
        name="${esc(p.name)}"
        placeholder="YYYY-MM-DD"
        ${p.defaultValue ? `value="${esc(p.defaultValue)}"` : ''}
        readonly>
      <span class="date-cal-icon">
        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
      </span>
    </div>`;
  }

  function buildSelectField(p, req) {
    const opts = p.validValues.map(v =>
      `<option value="${esc(v.value)}" ${p.defaultValue === v.value ? 'selected' : ''}>${esc(v.label || v.value)}</option>`
    ).join('');
    return `
    <label class="param-label">${esc(p.prompt || p.name)}${req}</label>
    <select class="param-select" name="${esc(p.name)}" onchange="onParamChange(this)">
      <option value="">— Select —</option>
      ${opts}
    </select>`;
  }

  function buildEntityField(p, req) {
    return `
    <label class="param-label">${esc(p.prompt || p.name)}${req}</label>
    <div class="entity-wrap" data-param="${esc(p.name)}" data-entity="${esc(p.entityLookup)}">
      <input class="entity-input" type="text"
        placeholder="Type to search…"
        autocomplete="off">
      <span class="entity-status">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      </span>
      <div class="entity-dropdown"></div>
    </div>
    <div class="entity-resolved">
      <span class="entity-resolved-text"></span>
      <button type="button" class="entity-clear-btn" onclick="clearEntity(this)">✕ Clear</button>
    </div>
    <input type="hidden" name="${esc(p.name)}" value="">`;
  }

  function initEntitySearch(group, p) {
    const wrap = group.querySelector('.entity-wrap');
    const input = wrap.querySelector('.entity-input');
    const dropdown = wrap.querySelector('.entity-dropdown');
    const resolved = group.querySelector('.entity-resolved');
    const hidden = group.querySelector(`input[type=hidden][name="${p.name}"]`);
    const entity = p.entityLookup;
    let debounce;

    input.addEventListener('input', function () {
      const q = this.value.trim();
      clearTimeout(debounce);
      hidden.value = '';
      resolved.classList.remove('show');
      input.classList.remove('resolved');

      if (!q) { dropdown.classList.remove('open'); dropdown.innerHTML = ''; return; }

      debounce = setTimeout(async () => {
        dropdown.innerHTML = `<div class="dd-msg"><div class="spinner" style="width:13px;height:13px;border-width:2px;"></div> Searching…</div>`;
        dropdown.classList.add('open');
        try {
          const res = await fetch(`/client/api/search?type=${encodeURIComponent(entity)}&q=${encodeURIComponent(q)}`);
          const data = await res.json();
          if (!data.length) {
            dropdown.innerHTML = `<div class="dd-msg">No results found</div>`;
          } else {
            dropdown.innerHTML = '';
            data.slice(0, 10).forEach(item => {
              const d = document.createElement('div');
              d.className = 'dd-item';
              d.innerHTML = `<span class="dd-code">${esc(item.code || item.id)}</span><span class="dd-name">${esc(item.name)}</span>`;
              d.addEventListener('click', () => {
                input.value = item.name;
                input.classList.add('resolved');
                hidden.value = item.id || item.code;
                dropdown.classList.remove('open');
                dropdown.innerHTML = '';
                resolved.querySelector('.entity-resolved-text').textContent = `${item.code || item.id} — ${item.name}`;
                resolved.classList.add('show');
                checkRequired();
              });
              dropdown.appendChild(d);
            });
          }
        } catch {
          dropdown.innerHTML = `<div class="dd-msg">Search failed</div>`;
        }
      }, 300);
    });

    document.addEventListener('click', e => {
      if (!wrap.contains(e.target)) dropdown.classList.remove('open');
    });
  }

  function clearEntity(btn) {
    const group = btn.closest('.param-group');
    const resolved = group.querySelector('.entity-resolved');
    const input = group.querySelector('.entity-input');
    const hidden = group.querySelector('input[type=hidden]');
    resolved.classList.remove('show');
    input.value = '';
    input.classList.remove('resolved');
    if (hidden) hidden.value = '';
    checkRequired();
  }

  function onParamChange(el) {
    el.classList.toggle('has-value', !!el.value);
    checkRequired();
  }

  function checkRequired() {
    /* basic: enable DL button always; server validates */
    document.getElementById('dl-btn').disabled = false;
  }

  /* ═══════════════════════════════════════════════
     TRIGGER DOWNLOAD
  ═══════════════════════════════════════════════ */
  function triggerDownload() {
    if (!curReport) return;

    const params = new URLSearchParams();
    params.set('path', curReport.path);
    params.set('name', curReport.name);
    params.set('format', 'EXCELOPENXML');

    document.querySelectorAll('#modal-params [name]').forEach(el => {
      if (el.value.trim()) params.set(el.name, el.value.trim());
    });

    window.location.href = `/client/download?${params.toString()}`;
    closeModal();
  }
</script>
{% endblock %}