{{define "title"}}Arrival Tracking — CpOne{{end}}
{{define "header-title"}}Arrival Tracking{{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>
    <div class="flex flex-wrap items-center gap-3">
      <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>
      <form method="get" action="{{b "/arrival"}}" class="flex flex-wrap items-center gap-2">
        <input type="hidden" name="search" value="{{.Search}}"/>
        <input type="hidden" name="dept" value="{{.Department}}"/>
        <label class="text-xs font-medium text-slate-500">Check-in Date</label>
        <select name="date"
          onchange="this.form.submit()"
          class="num rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm text-slate-700 focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-200">
          {{range .AvailableDates}}
          <option value="{{.}}" {{if eq . $.Date}}selected{{end}}>{{. | fmtDate}}</option>
          {{end}}
        </select>
        <button type="submit" class="rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
          View
        </button>
      </form>
    </div>
  </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">Checked In</p>
    <p class="num mt-3 text-3xl font-semibold text-slate-900">{{.Summary.CheckedIn}}</p>
    <p class="mt-1 text-xs text-slate-400">Sudah check-in pada tanggal 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">Not Check-in Yet</p>
    <p class="num mt-3 text-3xl font-semibold text-slate-900">{{.Summary.Pending}}</p>
    <p class="mt-1 text-xs text-slate-400">Belum masuk ke area MCU</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">Total Schedule</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 yang dijadwalkan hari ini</p>
  </article>
</section>

<section class="grid gap-5 xl:grid-cols-2">
  <article class="card p-5">
    <div class="mb-3">
      <p class="text-sm font-semibold text-slate-700">Check-in Overview</p>
      <p class="text-xs text-slate-400">Inner ring: checked-in summary, outer ring: distribution by department / posisi</p>
    </div>
    <div id="arrival-overview-chart" class="h-72 w-full sm:h-80"></div>
    <div id="arrival-overview-legend-mobile" class="mt-3 hidden grid-cols-2 gap-x-4 gap-y-2 text-xs text-slate-600 sm:hidden"></div>
  </article>
  <article class="card p-5">
    <div class="mb-3">
      <p class="text-sm font-semibold text-slate-700">Per Station Distribution</p>
      <p class="text-xs text-slate-400">Current observed station loads</p>
    </div>
    <div id="station-distribution-chart" class="h-64 w-full"></div>
  </article>
</section>

<section class="card p-5">
  <div class="mb-3">
    <p class="text-sm font-semibold text-slate-700">Per Paket Completion</p>
    <p class="text-xs text-slate-400">Total pasien per paket vs sudah menyelesaikan semua station</p>
  </div>
  <div id="paket-distribution-chart" class="h-72 w-full"></div>
</section>

<section class="card p-4">
  <form id="arrival-filter-form" method="get" action="{{b "/arrival"}}" class="flex flex-wrap items-end gap-2">
    <input type="hidden" name="date" value="{{.Date}}"/>
    <div class="min-w-[160px] flex-1">
      <label for="search" class="mb-1 block text-xs font-medium text-slate-500">Search</label>
      <input id="search" name="search" value="{{.Search}}" type="text" placeholder="Name or Employee ID"
        class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200"/>
    </div>
    <div class="min-w-[160px] flex-1">
      <label for="paket" class="mb-1 block text-xs font-medium text-slate-500">Paket</label>
      <select id="paket" name="paket"
        class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
        <option value="" {{if eq .Paket ""}}selected{{end}}>All Paket</option>
        {{range .PaketOptions}}
        <option value="{{.Code}}" {{if eq .Code $.Paket}}selected{{end}}>{{.Name}}</option>
        {{end}}
      </select>
    </div>
    <div class="min-w-[140px] flex-1">
      <label for="dept" class="mb-1 block text-xs font-medium text-slate-500">Department</label>
      <select id="dept" name="dept"
        class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
        <option value="" {{if eq .Department ""}}selected{{end}}>All Departments</option>
        {{range .DepartmentOptions}}
        <option value="{{.}}" {{if eq . $.Department}}selected{{end}}>{{.}}</option>
        {{end}}
      </select>
    </div>
    <div class="shrink-0">
      <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>
    </div>
  </form>
</section>

<section id="arrival-live-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">Live Arrival List</h2>
      <p class="text-xs text-slate-400">Tanggal: {{.Date | fmtDate}}</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">Time</th>
          <th class="px-4 py-3 font-medium">Employee ID</th>
          <th class="px-4 py-3 font-medium">Name</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">Status</th>
        </tr>
      </thead>
      <tbody id="arrival-desktop-rows" class="divide-y divide-slate-100">
        {{range .FilteredRows}}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3 num">{{if .InTime}}{{.InTime}}{{else}}-{{end}}</td>
          <td class="px-4 py-3 num">{{.NIP}}</td>
          <td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
          <td class="px-4 py-3 text-slate-500">{{.Department}}</td>
          <td class="px-4 py-3 text-slate-500 text-xs max-w-[160px]">
            {{if .Pemeriksaan}}<span title="{{.Pemeriksaan}}" class="line-clamp-2">{{.Pemeriksaan}}</span>{{else}}-{{end}}
          </td>
          <td class="px-4 py-3">
            {{if not .InTime}}
            <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Not Check-In Yet</span>
            {{else if .Stations}}
            <details class="group">
              <summary class="list-none cursor-pointer">
                <div class="flex flex-wrap gap-1.5 items-center">
                  {{if gt .DoneCount 0}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Done ({{.DoneCount}})</span>{{end}}
                  {{if gt .ProgressCount 0}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">In Progress ({{.ProgressCount}})</span>{{end}}
                  {{if gt .PendingCount 0}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Pending ({{.PendingCount}})</span>{{end}}
                  <svg class="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                </div>
              </summary>
              <div class="mt-2 flex flex-wrap gap-1.5">
                {{range .Stations}}
                {{if eq .Tone "success"}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Name}}</span>
                {{else if eq .Tone "warning"}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Name}}</span>
                {{else}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Name}}</span>{{end}}
                {{end}}
              </div>
            </details>
            {{else}}
            {{if eq .StatusTone "success"}}
            <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Status}}</span>
            {{else if eq .StatusTone "warning"}}
            <span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Status}}</span>
            {{else}}
            <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Status}}</span>
            {{end}}
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>

  <div id="arrival-mobile-rows" class="grid gap-3 p-4 md:hidden">
    {{range .FilteredRows}}
    <article class="rounded-xl border border-slate-200 p-3">
      <p class="font-semibold text-slate-700">{{.Name}}</p>
      <p class="mt-1 text-xs text-slate-400">{{if .InTime}}{{.InTime}}{{else}}-{{end}} • {{.NIP}} • {{.Department}}</p>
      {{if .Pemeriksaan}}<p class="mt-1 text-xs text-slate-500 line-clamp-1">{{.Pemeriksaan}}</p>{{end}}
      <div class="mt-3">
        {{if not .InTime}}
        <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Not Check-In Yet</span>
        {{else if .Stations}}
        <details class="group">
          <summary class="list-none cursor-pointer">
            <div class="flex flex-wrap gap-1.5 items-center">
              {{if gt .DoneCount 0}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Done ({{.DoneCount}})</span>{{end}}
              {{if gt .ProgressCount 0}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">In Progress ({{.ProgressCount}})</span>{{end}}
              {{if gt .PendingCount 0}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Pending ({{.PendingCount}})</span>{{end}}
              <svg class="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
            </div>
          </summary>
          <div class="mt-2 flex flex-col gap-1.5">
            {{range .Stations}}
            {{if eq .Tone "success"}}
            <span class="flex w-full items-center gap-2 border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
              <svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
              <span class="truncate">{{.Name}}</span>
            </span>
            {{else if eq .Tone "warning"}}
            <span class="flex w-full items-center gap-2 border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
              <svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
              <span class="truncate">{{.Name}}</span>
            </span>
            {{else}}
            <span class="flex w-full items-center gap-2 border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-600">
              <svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
              <span class="truncate">{{.Name}}</span>
            </span>
            {{end}}
            {{end}}
          </div>
        </details>
        {{else}}
        {{if eq .StatusTone "success"}}
        <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Status}}</span>
        {{else if eq .StatusTone "warning"}}
        <span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Status}}</span>
        {{else}}
        <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Status}}</span>
        {{end}}
        {{end}}
      </div>
    </article>
    {{end}}
  </div>
  <div id="arrival-load-more" class="px-4 pb-4">
    {{if .HasMore}}
    <div
      hx-get='{{b "/arrival/list"}}?date={{urlquery .Date}}&search={{urlquery .Search}}&paket={{urlquery .Paket}}&dept={{urlquery .Department}}&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 arrival pada tanggal ini.
  </div>
  {{end}}
</section>
<script>
(function() {
  const arrivalFilterForm = document.getElementById('arrival-filter-form');
  if (arrivalFilterForm) {
    arrivalFilterForm.addEventListener('submit', function () {
      sessionStorage.setItem('arrival-scroll-to-list', '1');
    });
  }

  const shouldScrollToList = sessionStorage.getItem('arrival-scroll-to-list') === '1';
  if (shouldScrollToList) {
    sessionStorage.removeItem('arrival-scroll-to-list');
    const listSection = document.getElementById('arrival-live-list');
    if (listSection) {
      requestAnimationFrame(function () {
        listSection.scrollIntoView({ behavior: 'auto', block: 'start' });
      });
    }
  }

  const overviewData = {{.OverviewJSON}};
  const stationData = {{.DepartmentJSON}};
  const paketData = {{.PaketChartJSON}};
  const deptColors = ['#f59e0b', '#8b5cf6', '#f97316', '#06b6d4', '#ec4899', '#84cc16', '#14b8a6'];

  const overviewEl = document.getElementById('arrival-overview-chart');
  const overviewLegendMobileEl = document.getElementById('arrival-overview-legend-mobile');
  if (overviewEl && overviewData && typeof echarts !== 'undefined') {
    const overviewChart = echarts.init(overviewEl);
    const outerData = (overviewData.depts || []).map(function(d) {
      return { value: d.value, name: d.name };
    });
    const isMobile = window.matchMedia('(max-width: 639px)').matches;
    if (isMobile && overviewLegendMobileEl) {
      const legendItems = [
        { name: 'Checked In', color: '#3b50a0' },
        { name: 'Not Check-in Yet', color: '#cbd5e1' }
      ].concat((overviewData.depts || []).map(function(d, idx) {
        return { name: d.name, color: deptColors[idx % deptColors.length] };
      }));
      overviewLegendMobileEl.innerHTML = legendItems.map(function(item) {
        return '<div class="flex items-center gap-2 min-w-0">' +
          '<span class="h-2.5 w-2.5 shrink-0 rounded-sm" style="background:' + item.color + '"></span>' +
          '<span class="truncate">' + item.name + '</span>' +
          '</div>';
      }).join('');
      overviewLegendMobileEl.classList.remove('hidden');
      overviewLegendMobileEl.classList.add('grid');
    }
    overviewChart.setOption({
      color: ['#3b50a0', '#cbd5e1'].concat(deptColors),
      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
      legend: {
        show: !isMobile,
        type: 'scroll',
        orient: 'vertical',
        left: '68%',
        right: 0,
        top: 'middle',
        textStyle: { color: '#64748b', fontSize: 11 },
        itemGap: 8,
        selectedMode: false,
        pageIconColor: '#3b50a0',
        pageTextStyle: { color: '#64748b' }
      },
      series: [
        {
          name: 'Check-in Summary',
          type: 'pie',
          radius: ['28%', '45%'],
          center: isMobile ? ['50%', '50%'] : ['30%', '48%'],
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: overviewData.checkedIn || 0, name: 'Checked In' },
            { value: overviewData.pending || 0, name: 'Not Check-in Yet' }
          ]
        },
        {
          name: 'Dept Detail',
          type: 'pie',
          radius: ['55%', '72%'],
          center: isMobile ? ['50%', '50%'] : ['30%', '48%'],
          label: { show: false },
          labelLine: { show: false },
          data: outerData
        }
      ]
    });
    window.addEventListener('resize', () => overviewChart.resize());
  }

  const stationEl = document.getElementById('station-distribution-chart');
  if (stationEl && stationData && typeof echarts !== 'undefined') {
    const stationChart = echarts.init(stationEl);
    var revLabels = (stationData.labels || []).slice().reverse();
    var revCounts = (stationData.counts || []).slice().reverse();
    stationChart.setOption({
      color: ['#3b50a0'],
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
      grid: { left: 10, right: 20, top: 10, bottom: 10, containLabel: true },
      xAxis: { type: 'value', axisLabel: { color: '#64748b' } },
      yAxis: {
        type: 'category',
        axisLabel: { color: '#64748b' },
        data: revLabels
      },
      series: [
        {
          name: 'Patients',
          type: 'bar',
          barWidth: 18,
          data: revCounts,
          itemStyle: { borderRadius: [0, 6, 6, 0] }
        }
      ]
    });
    window.addEventListener('resize', () => stationChart.resize());
  }

  const paketEl = document.getElementById('paket-distribution-chart');
  if (paketEl && paketData && typeof echarts !== 'undefined') {
    const paketChart = echarts.init(paketEl);
    var paketLabels = (paketData.labels || []).slice().reverse();
    var paketDone = (paketData.done || []).slice().reverse();
    var paketRemaining = (paketData.remaining || []).slice().reverse();
    paketChart.setOption({
      color: ['#10b981', '#cbd5e1'],
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        formatter: function (params) {
          var done = 0;
          var remaining = 0;
          for (var i = 0; i < params.length; i++) {
            if (params[i].seriesName === 'Completed') done = params[i].value || 0;
            if (params[i].seriesName === 'Not Completed') remaining = params[i].value || 0;
          }
          var total = done + remaining;
          return params[0].name + '<br/>Total: ' + total + '<br/>Completed: ' + done + '<br/>Not Completed: ' + remaining;
        }
      },
      legend: {
        bottom: 0,
        textStyle: { color: '#64748b', fontSize: 11 }
      },
      grid: { left: 10, right: 20, top: 10, bottom: 32, containLabel: true },
      xAxis: {
        type: 'value',
        axisLabel: { color: '#64748b' }
      },
      yAxis: {
        type: 'category',
        axisLabel: { color: '#64748b' },
        data: paketLabels
      },
      series: [
        {
          name: 'Completed',
          type: 'bar',
          stack: 'total',
          barWidth: 18,
          data: paketDone
        },
        {
          name: 'Not Completed',
          type: 'bar',
          stack: 'total',
          barWidth: 18,
          data: paketRemaining,
          itemStyle: { borderRadius: [0, 6, 6, 0] }
        }
      ]
    });
    window.addEventListener('resize', () => paketChart.resize());
  }
})();
</script>
{{end}}

{{define "arrival-list-chunk"}}
<tbody id="arrival-desktop-rows" hx-swap-oob="beforeend">
  {{range .FilteredRows}}
  <tr class="hover:bg-slate-50">
    <td class="px-4 py-3 num">{{if .InTime}}{{.InTime}}{{else}}-{{end}}</td>
    <td class="px-4 py-3 num">{{.NIP}}</td>
    <td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
    <td class="px-4 py-3 text-slate-500">{{.Department}}</td>
    <td class="px-4 py-3 text-slate-500 text-xs max-w-[160px]">
      {{if .Pemeriksaan}}<span title="{{.Pemeriksaan}}" class="line-clamp-2">{{.Pemeriksaan}}</span>{{else}}-{{end}}
    </td>
    <td class="px-4 py-3">
      {{if not .InTime}}
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Not Check-In Yet</span>
      {{else if .Stations}}
      <details class="group">
        <summary class="list-none cursor-pointer">
          <div class="flex flex-wrap gap-1.5 items-center">
            {{if gt .DoneCount 0}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Done ({{.DoneCount}})</span>{{end}}
            {{if gt .ProgressCount 0}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">In Progress ({{.ProgressCount}})</span>{{end}}
            {{if gt .PendingCount 0}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Pending ({{.PendingCount}})</span>{{end}}
            <svg class="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
          </div>
        </summary>
        <div class="mt-2 flex flex-wrap gap-1.5">
          {{range .Stations}}
          {{if eq .Tone "success"}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Name}}</span>
          {{else if eq .Tone "warning"}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Name}}</span>
          {{else}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Name}}</span>{{end}}
          {{end}}
        </div>
      </details>
      {{else}}
      {{if eq .StatusTone "success"}}
      <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Status}}</span>
      {{else if eq .StatusTone "warning"}}
      <span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Status}}</span>
      {{else}}
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Status}}</span>
      {{end}}
      {{end}}
    </td>
  </tr>
  {{end}}
</tbody>

<div id="arrival-mobile-rows" hx-swap-oob="beforeend" style="display:contents">
  {{range .FilteredRows}}
  <article class="rounded-xl border border-slate-200 p-3 md:hidden">
    <p class="font-semibold text-slate-700">{{.Name}}</p>
    <p class="mt-1 text-xs text-slate-400">{{if .InTime}}{{.InTime}}{{else}}-{{end}} • {{.NIP}} • {{.Department}}</p>
    {{if .Pemeriksaan}}<p class="mt-1 text-xs text-slate-500 line-clamp-1">{{.Pemeriksaan}}</p>{{end}}
    <div class="mt-3">
      {{if not .InTime}}
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Not Check-In Yet</span>
      {{else if .Stations}}
      <details class="group">
        <summary class="list-none cursor-pointer">
          <div class="flex flex-wrap gap-1.5 items-center">
            {{if gt .DoneCount 0}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Done ({{.DoneCount}})</span>{{end}}
            {{if gt .ProgressCount 0}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">In Progress ({{.ProgressCount}})</span>{{end}}
            {{if gt .PendingCount 0}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Pending ({{.PendingCount}})</span>{{end}}
            <svg class="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
          </div>
        </summary>
        <div class="mt-2 flex flex-col gap-1.5">
          {{range .Stations}}
          {{if eq .Tone "success"}}
          <span class="flex w-full items-center gap-2 border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
            <svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            <span class="truncate">{{.Name}}</span>
          </span>
          {{else if eq .Tone "warning"}}
          <span class="flex w-full items-center gap-2 border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
            <svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            <span class="truncate">{{.Name}}</span>
          </span>
          {{else}}
          <span class="flex w-full items-center gap-2 border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-600">
            <svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            <span class="truncate">{{.Name}}</span>
          </span>
          {{end}}
          {{end}}
        </div>
      </details>
      {{else}}
      {{if eq .StatusTone "success"}}
      <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Status}}</span>
      {{else if eq .StatusTone "warning"}}
      <span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Status}}</span>
      {{else}}
      <span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Status}}</span>
      {{end}}
      {{end}}
    </div>
  </article>
  {{end}}
</div>

<div id="arrival-load-more" hx-swap-oob="outerHTML">
  {{if .HasMore}}
  <div
    hx-get='{{b "/arrival/list"}}?date={{urlquery .Date}}&search={{urlquery .Search}}&paket={{urlquery .Paket}}&dept={{urlquery .Department}}&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}}