{{define "patients"}}
<div class="border-b border-slate-100 px-5 py-3">
  <form id="patients-filter-form" class="grid gap-2 md:grid-cols-[1fr_220px_auto]">
    <input type="hidden" name="kpi_filter" value="{{.KpiFilter}}"/>
    <input type="text" name="search" value="{{.Search}}" placeholder="Search name or preregister ID"
      class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200"/>
    <select name="progress_status"
      class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
      <option value="" {{if eq .ProgressStatus ""}}selected{{end}}>All Progress</option>
      <option value="not_yet" {{if eq .ProgressStatus "not_yet"}}selected{{end}}>Not Yet</option>
      <option value="partial" {{if eq .ProgressStatus "partial"}}selected{{end}}>Progress / Partial</option>
      <option value="done" {{if eq .ProgressStatus "done"}}selected{{end}}>Done</option>
    </select>
    <button type="submit"
      class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-600">
      Filter
    </button>
  </form>
  {{if .KpiFilter}}
  <div class="mt-2 inline-flex items-center gap-2 rounded-md border border-brand-200 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-700">
    <span>
      KPI Filter:
      {{if eq .KpiFilter "invited"}}Invited Staff{{end}}
      {{if eq .KpiFilter "total_staff"}}Total Staff{{end}}
      {{if eq .KpiFilter "inprogress"}}In Progress{{end}}
      {{if eq .KpiFilter "checkedout"}}Checked Out{{end}}
    </span>
    <button type="button" id="clear-kpi-filter-btn" onclick="if (window.clearPatientsKpiFilter) window.clearPatientsKpiFilter()" class="inline-flex h-4 w-4 items-center justify-center rounded-sm text-brand-700 hover:bg-brand-100" title="Clear KPI filter">
      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>
  </div>
  {{end}}
</div>

<div id="patients-list-wrap">
  <div id="patients-list" class="divide-y divide-slate-100">
    {{template "patients-rows-content" .}}
  </div>
  <div id="patients-load-more" class="px-5 py-3 text-center text-xs text-slate-400">
    {{if .HasMore}}Memuat data berikutnya...{{else}}Semua data sudah ditampilkan{{end}}
  </div>
</div>

<script>
(function () {
  const form = document.getElementById('patients-filter-form');
  const list = document.getElementById('patients-list');
  const loadMore = document.getElementById('patients-load-more');
  if (!form || !list || !loadMore) return;

  let loading = false;
  let hasMore = {{if .HasMore}}true{{else}}false{{end}};
  let nextPage = {{.NextPage}};

  function buildParams(page) {
    const params = new URLSearchParams(window.location.search);
    const formData = new FormData(form);
    const search = String(formData.get('search') || '').trim();
    const progressStatus = String(formData.get('progress_status') || '').trim();
    const kpiFilter = String(formData.get('kpi_filter') || '').trim();
    if (search) params.set('search', search); else params.delete('search');
    if (progressStatus) params.set('progress_status', progressStatus); else params.delete('progress_status');
    if (kpiFilter) params.set('kpi_filter', kpiFilter); else params.delete('kpi_filter');
    params.set('page', String(page));
    params.set('chunk', '1');
    return params;
  }

  function fetchPage(page, append) {
    if (loading) return;
    loading = true;
    loadMore.textContent = 'Memuat data berikutnya...';
    fetch('{{b "/dashboard/patients"}}?' + buildParams(page).toString())
      .then(function (r) { return r.text(); })
      .then(function (html) {
        const tmp = document.createElement('div');
        tmp.innerHTML = html;
        const rows = tmp.querySelector('[data-patients-rows]');
        const meta = tmp.querySelector('[data-patients-meta]');
        if (!rows || !meta) {
          throw new Error('invalid chunk');
        }
        if (append) {
          list.insertAdjacentHTML('beforeend', rows.innerHTML);
        } else {
          list.innerHTML = rows.innerHTML;
        }
        hasMore = meta.getAttribute('data-has-more') === '1';
        nextPage = parseInt(meta.getAttribute('data-next-page') || '1', 10);
        loadMore.textContent = hasMore ? 'Scroll ke bawah untuk muat lagi...' : 'Semua data sudah ditampilkan';
      })
      .catch(function () {
        loadMore.textContent = 'Gagal memuat data.';
      })
      .finally(function () {
        loading = false;
      });
  }

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    hasMore = true;
    nextPage = 1;
    fetchPage(1, false);
  });

  const clearKpiBtn = document.getElementById('clear-kpi-filter-btn');
  if (clearKpiBtn) {
    clearKpiBtn.addEventListener('click', function () {
      const kpiInput = form.querySelector('input[name="kpi_filter"]');
      if (kpiInput) kpiInput.value = '';
      hasMore = true;
      nextPage = 1;
      fetchPage(1, false);
    });
  }

  const observer = new IntersectionObserver(function (entries) {
    if (!entries[0].isIntersecting || loading || !hasMore) return;
    fetchPage(nextPage, true);
  }, { root: document.getElementById('patients-modal-body'), threshold: 0.1 });

  observer.observe(loadMore);
})();
</script>
{{end}}

{{define "patients-rows"}}
<div data-patients-rows>
  {{template "patients-rows-content" .}}
</div>
<div data-patients-meta data-has-more="{{if .HasMore}}1{{else}}0{{end}}" data-next-page="{{.NextPage}}"></div>
{{end}}

{{define "patients-rows-content"}}
{{if not .Patients}}
<div class="flex flex-col items-center justify-center py-16 text-slate-400">
  <p class="text-sm font-medium">Belum ada data pasien pada filter ini.</p>
</div>
{{else}}
{{range .Patients}}
{{if and (gt .DoneCount 0) (eq .DoneCount (len .Stations))}}
<div class="px-5 py-4 bg-emerald-50/60 transition-colors hover:bg-emerald-50">
{{else}}
<div class="px-5 py-4 hover:bg-slate-50 transition-colors">
{{end}}
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div class="flex items-center gap-2.5">
      <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-brand-50 text-xs font-bold text-brand-600">
        {{.Name | initials}}
      </div>
      <div>
        <p class="font-semibold text-slate-800">{{.Name}}</p>
        {{if $.IsRange}}<p class="text-xs text-slate-400 num">{{.Date | fmtDate}}</p>{{end}}
      </div>
    </div>
    <div class="flex items-center gap-3 text-xs">
      <span class="num text-slate-500">Check-in: <span class="font-semibold text-slate-700">{{if .InTime}}{{.InTime}}{{else}}-{{end}}</span></span>
      {{if and .InTime .HasOut}}
      <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 font-semibold text-emerald-700 num">Check-out: {{.OutTime}}</span>
      {{else if .InTime}}
      <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 font-semibold text-amber-600">In Progress</span>
      {{end}}
      {{if eq .ProgressStatus "done"}}
      <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 font-semibold text-emerald-700">Done</span>
      {{else if eq .ProgressStatus "partial"}}
      <span class="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-1 font-semibold text-amber-700">Progress / Partial</span>
      {{else}}
      <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-1 font-semibold text-slate-600">Not Yet</span>
      {{end}}
      <span class="text-slate-400"><span class="font-semibold text-brand-600">{{.DoneCount}}</span>/{{len .Stations}} station selesai</span>
    </div>
  </div>
  {{if .Stations}}
  <div class="mt-2.5 flex flex-wrap gap-2 pl-10">
    {{range .Stations}}
    {{if .Done}}
    <div class="inline-flex max-w-full flex-col border border-emerald-300 bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-800">
      <span class="inline-flex items-center gap-1">
        <svg class="h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        {{.Station}}
      </span>
      <span class="num text-[10px] font-semibold text-emerald-700/80">
        Process: {{if .ProcessAt}}{{.ProcessAt}}{{else}}-{{end}} | Done: {{if .DoneAt}}{{.DoneAt}}{{else}}-{{end}}
      </span>
    </div>
    {{else if .Progress}}
    <div class="inline-flex max-w-full flex-col border border-amber-300 bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-800">
      <span class="inline-flex items-center gap-1">
        <svg class="h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5"/></svg>
        {{.Station}}
      </span>
      <span class="num text-[10px] font-semibold text-amber-700/80">
        Process: {{if .ProcessAt}}{{.ProcessAt}}{{else}}-{{end}} | Done: {{if .DoneAt}}{{.DoneAt}}{{else}}-{{end}}
      </span>
    </div>
    {{else}}
    <div class="inline-flex max-w-full flex-col border border-slate-300 bg-slate-50 px-2.5 py-1 text-xs font-medium text-slate-600">
      <span class="inline-flex items-center gap-1">
        <svg class="h-3 w-3 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{.Station}}
      </span>
      <span class="num text-[10px] font-semibold text-slate-400">
        Process: {{if .ProcessAt}}{{.ProcessAt}}{{else}}-{{end}} | Done: {{if .DoneAt}}{{.DoneAt}}{{else}}-{{end}}
      </span>
    </div>
    {{end}}
    {{end}}
  </div>
  {{end}}
</div>
{{end}}
{{end}}
{{end}}