{{define "title"}}Result Progress — CpOne{{end}}
{{define "header-title"}}Result Progress{{end}}

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

<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">
      Ganti project
    </a>
  </div>
</section>

<section class="grid gap-4 sm:grid-cols-3">
  <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-emerald-500 p-4">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Validated</p>
    <p class="num mt-3 text-3xl font-semibold text-emerald-600">{{.Summary.Validated}}</p>
    <p class="mt-1 text-xs text-slate-400">Resume sudah divalidasi dokter</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">Published</p>
    <p class="num mt-3 text-3xl font-semibold text-brand-500">{{.Summary.Published}}</p>
    <p class="mt-1 text-xs text-slate-400">Hasil sudah diupload</p>
  </article>
</section>

<section class="card p-5">
  <h2 class="mb-4 text-sm font-semibold text-slate-700">Resume Progress</h2>
  <div class="space-y-4">
    <div>
      <div class="mb-1.5 flex items-center justify-between text-sm">
        <span class="font-medium text-slate-700">Validated</span>
        <span class="text-xs text-slate-400">
          {{.Summary.Validated}} / {{.Summary.Total}}
          <span class="ml-1 font-semibold text-emerald-600">{{.ValidatedPct}}%</span>
        </span>
      </div>
      <div class="h-2 overflow-hidden rounded-full bg-slate-100">
        <div class="h-2 rounded-full bg-emerald-500 transition-all" style="width: {{.ValidatedPct}}%"></div>
      </div>
    </div>
    <div>
      <div class="mb-1.5 flex items-center justify-between text-sm">
        <span class="font-medium text-slate-700">Published</span>
        <span class="text-xs text-slate-400">
          {{.Summary.Published}} / {{.Summary.Total}}
          <span class="ml-1 font-semibold text-brand-500">{{.PublishedPct}}%</span>
        </span>
      </div>
      <div class="h-2 overflow-hidden rounded-full bg-slate-100">
        <div class="h-2 rounded-full bg-brand-500 transition-all" style="width: {{.PublishedPct}}%"></div>
      </div>
    </div>
  </div>
</section>

<section class="card p-4">
  <form id="progress-filter-form" method="get" action="{{b "/progress"}}" class="grid gap-3 md:grid-cols-3">
    <div class="md:col-span-2">
      <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>
      <label for="status" class="mb-2 block text-sm font-medium text-slate-600">Status</label>
      <select id="status" name="status"
        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 .Status ""}}selected{{end}}>All</option>
        <option value="validated"     {{if eq .Status "validated"}}selected{{end}}>Validated</option>
        <option value="published"     {{if eq .Status "published"}}selected{{end}}>Published</option>
        <option value="not_validated" {{if eq .Status "not_validated"}}selected{{end}}>Not Validated</option>
        <option value="not_published" {{if eq .Status "not_published"}}selected{{end}}>Not Published</option>
      </select>
    </div>
    <div class="md:col-span-3 flex justify-end">
      <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 id="progress-list" 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 Resume List</h2>
      <p class="text-xs text-slate-400">Data dari mcu_patient_resume_status</p>
    </div>
    <span class="text-xs font-medium text-slate-400">{{.VisibleCount}} / {{.TotalFiltered}} ditampilkan</span>
  </div>

  <div class="border-b border-slate-100 px-5 py-3">
    <div class="flex flex-wrap items-center gap-2 text-xs">
      <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 font-medium text-emerald-700">Validated</span>
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 font-medium text-slate-600">Not Validated</span>
      <span class="rounded-full border border-brand-400/40 bg-brand-50 px-2 py-1 font-medium text-brand-500">Published</span>
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 font-medium text-slate-600">Not Published</span>
    </div>
  </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">Name</th>
          <th class="px-4 py-3 font-medium">NIP</th>
          <th class="px-4 py-3 font-medium">Posisi</th>
          <th class="px-4 py-3 font-medium">Resume Status</th>
          <th class="px-4 py-3 font-medium">Validated</th>
          <th class="px-4 py-3 font-medium">Published</th>
        </tr>
      </thead>
      <tbody id="progress-desktop-rows" class="divide-y divide-slate-100">
        {{range .FilteredRows}}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
          <td class="px-4 py-3 num text-slate-500">{{.NIP}}</td>
          <td class="px-4 py-3 text-slate-500">{{.Posisi}}</td>
          <td class="px-4 py-3">
            {{if .ResumeStatus}}
            <span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600">{{.ResumeStatus}}</span>
            {{else}}
            <span class="text-xs text-slate-400">—</span>
            {{end}}
          </td>
          <td class="px-4 py-3">
            {{if eq .Validated "Y"}}
            <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Y</span>
            {{else}}
            <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">N</span>
            {{end}}
          </td>
          <td class="px-4 py-3">
            {{if eq .Published "Y"}}
            <span class="rounded-full border border-brand-400/40 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-500">Y</span>
            {{else}}
            <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">N</span>
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>

  <div id="progress-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>
        </div>
        {{if .ResumeStatus}}
        <span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600">{{.ResumeStatus}}</span>
        {{end}}
      </div>
      <div class="mt-2 flex gap-2">
        {{if eq .Validated "Y"}}
        <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Validated</span>
        {{else}}
        <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">Not Validated</span>
        {{end}}
        {{if eq .Published "Y"}}
        <span class="rounded-full border border-brand-400/40 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-500">Published</span>
        {{else}}
        <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">Not Published</span>
        {{end}}
      </div>
    </article>
    {{end}}
  </div>
  <div id="progress-load-more" class="px-4 pb-4">
    {{if .HasMore}}
    <div
      hx-get='{{b "/progress/list"}}?search={{.Search}}&status={{.Status}}&page={{.NextPage}}'
      hx-trigger="revealed"
      hx-swap="outerHTML"
      class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-center text-xs font-medium text-slate-500">
      Memuat data berikutnya...
    </div>
    {{else}}
    <div class="text-center text-xs text-slate-400">Semua data sudah ditampilkan</div>
    {{end}}
  </div>
  {{else}}
  <div class="px-5 py-10 text-center text-sm text-slate-400">
    Belum ada data resume untuk project ini.
  </div>
  {{end}}
</section>
<script>
(function() {
  const progressFilterForm = document.getElementById('progress-filter-form');
  if (progressFilterForm) {
    progressFilterForm.addEventListener('submit', function () {
      sessionStorage.setItem('progress-scroll-to-list', '1');
    });
  }

  const shouldScrollToList = sessionStorage.getItem('progress-scroll-to-list') === '1';
  if (shouldScrollToList) {
    sessionStorage.removeItem('progress-scroll-to-list');
    const listSection = document.getElementById('progress-list');
    if (listSection) {
      requestAnimationFrame(function () {
        listSection.scrollIntoView({ behavior: 'auto', block: 'start' });
      });
    }
  }
})();
</script>
{{end}}

{{define "progress-list-chunk"}}
<tbody id="progress-desktop-rows" hx-swap-oob="beforeend">
  {{range .FilteredRows}}
  <tr class="hover:bg-slate-50">
    <td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
    <td class="px-4 py-3 num text-slate-500">{{.NIP}}</td>
    <td class="px-4 py-3 text-slate-500">{{.Posisi}}</td>
    <td class="px-4 py-3">
      {{if .ResumeStatus}}
      <span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600">{{.ResumeStatus}}</span>
      {{else}}
      <span class="text-xs text-slate-400">—</span>
      {{end}}
    </td>
    <td class="px-4 py-3">
      {{if eq .Validated "Y"}}
      <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Y</span>
      {{else}}
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">N</span>
      {{end}}
    </td>
    <td class="px-4 py-3">
      {{if eq .Published "Y"}}
      <span class="rounded-full border border-brand-400/40 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-500">Y</span>
      {{else}}
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">N</span>
      {{end}}
    </td>
  </tr>
  {{end}}
</tbody>

<div id="progress-mobile-rows" hx-swap-oob="beforeend">
  {{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>
      </div>
      {{if .ResumeStatus}}
      <span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600">{{.ResumeStatus}}</span>
      {{end}}
    </div>
    <div class="mt-2 flex gap-2">
      {{if eq .Validated "Y"}}
      <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Validated</span>
      {{else}}
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">Not Validated</span>
      {{end}}
      {{if eq .Published "Y"}}
      <span class="rounded-full border border-brand-400/40 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-500">Published</span>
      {{else}}
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">Not Published</span>
      {{end}}
    </div>
  </article>
  {{end}}
</div>

<div id="progress-load-more" hx-swap-oob="outerHTML">
  {{if .HasMore}}
  <div
    hx-get='{{b "/progress/list"}}?search={{.Search}}&status={{.Status}}&page={{.NextPage}}'
    hx-trigger="revealed"
    hx-swap="outerHTML"
    class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-center text-xs font-medium text-slate-500">
    Memuat data berikutnya...
  </div>
  {{else}}
  <div class="text-center text-xs text-slate-400">Semua data sudah ditampilkan</div>
  {{end}}
</div>
{{end}}