{{define "title"}}Result Reports — CpOne{{end}}
{{define "header-title"}}Consolidated Result Reports{{end}}

{{define "content"}}
{{$proj := .CurrentProject}}

{{/* Section 1: Current project */}}
<section class="card p-5">
  <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
    <div>
      <p class="text-xs font-semibold uppercase tracking-widest text-brand-500">Ongoing Project</p>
      <h2 class="mt-1 text-lg font-semibold text-slate-900">
        {{if $proj.Label}}{{$proj.Label}}{{else}}MCU #{{$proj.McuID}}{{end}}
      </h2>
      <p class="mt-0.5 text-sm text-slate-500">
        {{$proj.Number}} &bull; {{$proj.CorporateName}} &bull;
        <span class="num">{{$proj.StartDate | fmtDate}}</span> &ndash; <span class="num">{{$proj.EndDate | fmtDate}}</span>
      </p>
    </div>
    <a href="{{b "/projects"}}" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
      Change Project
    </a>
  </div>
</section>

{{/* Section 2: Summary cards */}}
<section class="grid gap-4 sm:grid-cols-2">
  <article class="card border-l-4 border-l-brand-300 p-4">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Total Patients</p>
    <p class="num mt-3 text-3xl font-semibold text-slate-900">{{.Summary.Total}}</p>
    <p class="mt-1 text-xs text-slate-400">Peserta dalam project ini</p>
  </article>
  <article class="card border-l-4 border-l-brand-500 p-4">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Sudah Ada Report Hasil</p>
    <p class="num mt-3 text-3xl font-semibold text-brand-500">{{.Summary.HasPDF}}</p>
    <p class="mt-1 text-xs text-slate-400">Laporan hasil sudah tersedia</p>
  </article>
</section>

{{/* Section 3: Filter form */}}
<section class="card p-4">
  <form method="get" action="{{b "/result"}}" class="flex flex-wrap items-end gap-3">
    <div class="min-w-[240px] flex-[2_1_420px]">
      <label for="search" class="mb-2 block text-sm font-medium text-slate-600">Search Patient</label>
      <input id="search" name="search" value="{{.Search}}" type="text" placeholder="Nama atau Employee ID"
        class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200"/>
    </div>
    <div class="min-w-[180px] flex-1">
      <label for="packet" class="mb-2 block text-sm font-medium text-slate-600">Packet</label>
      <select id="packet" name="packet"
        class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
        <option value="" {{if eq .Packet ""}}selected{{end}}>All Packets</option>
        {{range .PacketOptions}}
        <option value="{{.Code}}" {{if eq .Code $.Packet}}selected{{end}}>{{.Name}}</option>
        {{end}}
      </select>
    </div>
    <div class="min-w-[180px] flex-1">
      <label for="filter" class="mb-2 block text-sm font-medium text-slate-600">Status PDF</label>
      <select id="filter" name="filter"
        class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
        <option value=""       {{if eq .Filter ""}}selected{{end}}>All</option>
        <option value="has_pdf" {{if eq .Filter "has_pdf"}}selected{{end}}>Has PDF</option>
        <option value="no_pdf"  {{if eq .Filter "no_pdf"}}selected{{end}}>No PDF</option>
      </select>
    </div>
    <div class="shrink-0">
      <button type="submit" class="rounded-xl bg-brand-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-600">
        Filter
      </button>
    </div>
  </form>
</section>

{{/* Section 4: Patient list */}}
<section class="card overflow-hidden">
  <div class="flex items-center justify-between border-b border-slate-100 px-5 py-3">
    <div>
      <h2 class="text-base font-semibold text-slate-700">Patient Result List</h2>
      <p class="text-xs text-slate-400">Data dari published_mcu_dashboard_sync</p>
    </div>
    <span class="text-xs font-medium text-slate-400">{{.VisibleCount}} / {{.TotalFiltered}} ditampilkan</span>
  </div>

  {{if .FilteredRows}}
  <div class="hidden overflow-x-auto md:block">
    <table class="min-w-full text-sm">
      <thead class="bg-slate-50 text-left text-slate-500">
        <tr>
          <th class="px-4 py-3 font-medium">Employee ID</th>
          <th class="px-4 py-3 font-medium">Patient</th>
          <th class="px-4 py-3 font-medium">Department</th>
          <th class="px-4 py-3 font-medium">Tests</th>
          <th class="px-4 py-3 font-medium">Report Date</th>
          <th class="px-4 py-3 font-medium">Action</th>
        </tr>
      </thead>
      <tbody id="result-desktop-rows" class="divide-y divide-slate-100">
        {{range .FilteredRows}}
        <tr class="hover:bg-slate-50">
          <td class="num px-4 py-3 text-slate-500">{{.NIP}}</td>
          <td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
          <td class="px-4 py-3 text-slate-500">{{.Posisi}}</td>
          <td class="px-4 py-3 text-slate-500 text-xs max-w-[200px]">
            {{if .Tests}}<span title="{{.Tests}}" class="line-clamp-2">{{.Tests}}</span>{{else}}-{{end}}
          </td>
          <td class="num px-4 py-3 text-slate-500">
            {{if .ReportDate}}{{.ReportDate | fmtDate}}{{else}}<span class="text-slate-300">—</span>{{end}}
          </td>
          <td class="px-4 py-3">
            {{if .FileUrl}}
            <button onclick="openPDFModal('{{$.PDFBaseURL}}{{.FileUrl}}', '{{.Name}}', '{{.ReportVersion}}')"
               class="inline-flex items-center gap-1.5 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
              View PDF
            </button>
            {{else}}
            <span class="text-xs text-slate-300">—</span>
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>

  <div id="result-mobile-rows" class="grid gap-3 p-4 md:hidden">
    {{range .FilteredRows}}
    <article class="rounded-xl border border-slate-200 p-3">
      <div class="flex items-start justify-between gap-3">
        <div>
          <p class="font-semibold text-slate-700">{{.Name}}</p>
          <p class="mt-0.5 text-xs text-slate-400">{{.NIP}} &bull; {{.Posisi}}</p>
          {{if .Tests}}<p class="mt-1 text-xs text-slate-500 line-clamp-1">{{.Tests}}</p>{{end}}
          {{if .ReportDate}}<p class="mt-0.5 num text-xs text-slate-400">{{.ReportDate | fmtDate}}</p>{{end}}
        </div>
        {{if .FileUrl}}
        <button onclick="openPDFModal('{{$.PDFBaseURL}}{{.FileUrl}}', '{{.Name}}', '{{.ReportVersion}}')"
           class="shrink-0 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
          View PDF
        </button>
        {{else}}
        <span class="text-xs text-slate-300">No PDF</span>
        {{end}}
      </div>
    </article>
    {{end}}
  </div>
  <div class="hidden items-center justify-between gap-2 border-t border-slate-100 px-4 py-3 md:flex">
    <div class="text-xs text-slate-400">Page {{.Page}} of {{.TotalPages}}</div>
    <div class="flex items-center gap-2">
      {{if .HasPrev}}
      <a href='{{b "/result"}}?search={{urlquery .Search}}&filter={{urlquery .Filter}}&packet={{urlquery .Packet}}&page={{.PrevPage}}'
         class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-brand-300 hover:text-brand-600">
        Previous
      </a>
      {{else}}
      <span class="rounded-lg border border-slate-100 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-300">Previous</span>
      {{end}}
      {{if .HasMore}}
      <a href='{{b "/result"}}?search={{urlquery .Search}}&filter={{urlquery .Filter}}&packet={{urlquery .Packet}}&page={{.NextPage}}'
         class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-brand-300 hover:text-brand-600">
        Next
      </a>
      {{else}}
      <span class="rounded-lg border border-slate-100 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-300">Next</span>
      {{end}}
    </div>
  </div>

  <div id="result-load-more" class="px-4 pb-4 md:hidden">
    {{if .HasMore}}
    <div
      hx-get='{{b "/result/list"}}?search={{urlquery .Search}}&filter={{urlquery .Filter}}&packet={{urlquery .Packet}}&page={{.NextPage}}'
      hx-trigger="revealed, click"
      hx-swap="none"
      class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-center text-xs font-medium text-slate-500">
      Load next data...
    </div>
    {{else}}
    <div class="text-center text-xs text-slate-400">All data is displayed</div>
    {{end}}
  </div>
  {{else}}
  <div class="px-5 py-10 text-center text-sm text-slate-400">
    Belum ada data untuk project ini.
  </div>
  {{end}}
</section>

{{/* PDF Modal */}}
<div id="pdf-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
     onclick="if(event.target===this)closePDFModal()">
  <div class="flex h-full w-full max-w-5xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl">
    <div class="flex shrink-0 items-center justify-between border-b border-slate-200 px-5 py-3">
      <p id="pdf-modal-title" class="truncate text-sm font-semibold text-slate-700"></p>
      <div class="ml-4 flex shrink-0 items-center gap-3">
        <a id="pdf-modal-link" href="#" target="_blank"
           class="text-xs font-medium text-brand-500 hover:underline">
          Buka di tab baru ↗
        </a>
        <button onclick="closePDFModal()"
                class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6L6 18M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </div>
    <iframe id="pdf-modal-frame" src="" class="min-h-0 flex-1 w-full" frameborder="0"></iframe>
  </div>
</div>

<script>
function normalizePdfUrl(rawUrl) {
  try {
    const u = new URL(rawUrl, window.location.origin);
    if (window.location.protocol === 'https:' && u.protocol === 'http:') {
      u.protocol = 'https:';
    }
    return u.toString();
  } catch (_) {
    return rawUrl;
  }
}

function buildPdfUrl(rawUrl, version) {
  const safeUrl = normalizePdfUrl(rawUrl);
  if (!version) return safeUrl;
  try {
    const u = new URL(safeUrl, window.location.origin);
    u.searchParams.set('v', version);
    return u.toString();
  } catch (_) {
    const joiner = safeUrl.includes('?') ? '&' : '?';
    return safeUrl + joiner + 'v=' + encodeURIComponent(version);
  }
}

function openPDFModal(url, name, version) {
  const finalUrl = buildPdfUrl(url, version);
  document.getElementById('pdf-modal-frame').src = finalUrl;
  document.getElementById('pdf-modal-title').textContent = name;
  document.getElementById('pdf-modal-link').href = finalUrl;
  const modal = document.getElementById('pdf-modal');
  modal.classList.remove('hidden');
  modal.classList.add('flex');
  document.body.style.overflow = 'hidden';
}
function closePDFModal() {
  const modal = document.getElementById('pdf-modal');
  modal.classList.add('hidden');
  modal.classList.remove('flex');
  document.getElementById('pdf-modal-frame').src = '';
  document.body.style.overflow = '';
}
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closePDFModal();
});
</script>
{{end}}

{{define "result-list-chunk"}}
<tbody id="result-desktop-rows" hx-swap-oob="beforeend">
  {{range .FilteredRows}}
  <tr class="hover:bg-slate-50">
    <td class="num px-4 py-3 text-slate-500">{{.NIP}}</td>
    <td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
    <td class="px-4 py-3 text-slate-500">{{.Posisi}}</td>
    <td class="px-4 py-3 text-slate-500 text-xs max-w-[200px]">
      {{if .Tests}}<span title="{{.Tests}}" class="line-clamp-2">{{.Tests}}</span>{{else}}-{{end}}
    </td>
    <td class="num px-4 py-3 text-slate-500">
      {{if .ReportDate}}{{.ReportDate | fmtDate}}{{else}}<span class="text-slate-300">—</span>{{end}}
    </td>
    <td class="px-4 py-3">
      {{if .FileUrl}}
      <button onclick="openPDFModal('{{$.PDFBaseURL}}{{.FileUrl}}', '{{.Name}}', '{{.ReportVersion}}')"
         class="inline-flex items-center gap-1.5 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
        View PDF
      </button>
      {{else}}
      <span class="text-xs text-slate-300">—</span>
      {{end}}
    </td>
  </tr>
  {{end}}
</tbody>

<div id="result-mobile-rows" hx-swap-oob="beforeend" class="md:hidden" style="display:contents">
  {{range .FilteredRows}}
  <article class="rounded-xl border border-slate-200 p-3 md:hidden">
    <div class="flex items-start justify-between gap-3">
      <div>
        <p class="font-semibold text-slate-700">{{.Name}}</p>
        <p class="mt-0.5 text-xs text-slate-400">{{.NIP}} &bull; {{.Posisi}}</p>
        {{if .Tests}}<p class="mt-1 text-xs text-slate-500 line-clamp-1">{{.Tests}}</p>{{end}}
        {{if .ReportDate}}<p class="mt-0.5 num text-xs text-slate-400">{{.ReportDate | fmtDate}}</p>{{end}}
      </div>
      {{if .FileUrl}}
      <button onclick="openPDFModal('{{$.PDFBaseURL}}{{.FileUrl}}', '{{.Name}}', '{{.ReportVersion}}')"
         class="shrink-0 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
        View PDF
      </button>
      {{else}}
      <span class="text-xs text-slate-300">No PDF</span>
      {{end}}
    </div>
  </article>
  {{end}}
</div>

<div id="result-load-more" hx-swap-oob="outerHTML" class="md:hidden">
  {{if .HasMore}}
  <div
    hx-get='{{b "/result/list"}}?search={{urlquery .Search}}&filter={{urlquery .Filter}}&packet={{urlquery .Packet}}&page={{.NextPage}}'
    hx-trigger="revealed, click"
    hx-swap="none"
    class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-center text-xs font-medium text-slate-500">
    Load next data...
  </div>
  {{else}}
  <div class="text-center text-xs text-slate-400">All data is displayed</div>
  {{end}}
</div>
{{end}}