From 281accbbd9567816230e1eef89f772d51b1beaf2 Mon Sep 17 00:00:00 2001
From: muamars <official.muammar@gmail.com>
Date: Mon, 30 Mar 2026 11:24:05 +0700
Subject: [PATCH] update: added selesaikan pengantaran

---
 wwwroot/driver/js/detail-penjemputan-tps.js | 110 +++++++++++++++++++-
 1 file changed, 109 insertions(+), 1 deletion(-)

diff --git a/wwwroot/driver/js/detail-penjemputan-tps.js b/wwwroot/driver/js/detail-penjemputan-tps.js
index 7cbfa0b..84ea4f6 100644
--- a/wwwroot/driver/js/detail-penjemputan-tps.js
+++ b/wwwroot/driver/js/detail-penjemputan-tps.js
@@ -764,7 +764,7 @@ const DetailPenjemputan = (function () {
             `;
 
     elements.tpsContentContainer.innerHTML = `
-            <form class="space-y-5 pb-8" data-tps-index="${tps.index}">
+            <form class="space-y-5" data-tps-index="${tps.index}">
                 <input type="hidden" class="tps-lokasi-angkut-id" value="${tps.lokasiAngkutId || ""}" />
                 <input type="hidden" class="tps-spj-detail-id" value="${tps.spjDetailId || ""}" />
                 <input type="hidden" class="tps-latitude" value="${tps.latitude}" />
@@ -787,6 +787,7 @@ const DetailPenjemputan = (function () {
     attachTpsFormListeners();
     restoreTpsTimbanganItems();
     restorePhotoPreview();
+    renderFinishTransportButton();
   }
 
   function renderSection1Kedatangan(tps, showTpsName) {
@@ -2340,6 +2341,113 @@ const DetailPenjemputan = (function () {
         }, 3200);
     }
 
+  function showConfirmModal({ title, body, confirmText = 'Ya, Lanjutkan', cancelText = 'Batal' }) {
+    return new Promise((resolve) => {
+      const existing = document.getElementById('espj-confirm-modal');
+      if (existing) existing.remove();
+
+      const overlay = document.createElement('div');
+      overlay.id = 'espj-confirm-modal';
+      overlay.className = 'fixed inset-0 z-[9998] flex items-end justify-center bg-slate-950/60 p-4 backdrop-blur-sm sm:items-center';
+      overlay.innerHTML = `
+        <div class="w-full max-w-xs rounded-2xl bg-white p-6 shadow-2xl">
+          <h3 class="text-base font-black tracking-tight text-slate-900">${title}</h3>
+          <div class="mt-3 text-sm leading-relaxed text-slate-600 space-y-2">${body}</div>
+          <div class="mt-6 flex gap-2">
+            <button id="espj-confirm-cancel" type="button" class="flex-1 rounded-2xl bg-slate-100 px-4 py-3 text-xs font-black uppercase tracking-wide text-slate-700 transition active:scale-95">${cancelText}</button>
+            <button id="espj-confirm-ok" type="button" class="flex-1 rounded-2xl bg-upst px-4 py-3 text-xs font-black uppercase tracking-wide text-white shadow-sm transition active:scale-95">${confirmText}</button>
+          </div>
+        </div>
+      `;
+
+      document.body.appendChild(overlay);
+      document.body.style.overflow = 'hidden';
+
+      function close(result) {
+        overlay.remove();
+        document.body.style.overflow = '';
+        resolve(result);
+      }
+
+      overlay.querySelector('#espj-confirm-ok').addEventListener('click', () => close(true));
+      overlay.querySelector('#espj-confirm-cancel').addEventListener('click', () => close(false));
+      overlay.addEventListener('click', (e) => { if (e.target === overlay) close(false); });
+    });
+  }
+
+  function renderFinishTransportButton() {
+    if (!elements.tpsTabsContainer) return;
+
+    const hasMultipleTps = state.tpsData.length > 1;
+    const submittedCount = state.tpsData.filter((t) => t.submitted).length;
+    const allSubmitted = submittedCount === state.tpsData.length;
+
+    let wrapper = document.getElementById('btn-finish-transport-wrapper');
+
+    if (!hasMultipleTps || submittedCount === 0 || allSubmitted) {
+      if (wrapper) wrapper.remove();
+      return;
+    }
+
+    if (!wrapper) {
+      wrapper = document.createElement('div');
+      wrapper.id = 'btn-finish-transport-wrapper';
+      elements.tpsTabsContainer.appendChild(wrapper);
+    }
+
+    const unsubmittedNames = state.tpsData
+      .filter((t) => !t.submitted)
+      .map((t) => t.name)
+      .join(', ');
+
+    wrapper.innerHTML = `
+      <div class="mt-4 p-4 space-y-3 border-t border-gray-200">
+        <button type="button" id="btn-finish-transport-action" class="w-full bg-blue-500 text-white py-3 rounded-xl font-bold text-sm hover:brightness-110 transition">
+          Selesaikan Pengangkutan
+        </button>
+      </div>
+    `;
+
+    const actionBtn = wrapper.querySelector('#btn-finish-transport-action');
+    if (actionBtn) {
+      actionBtn.addEventListener('click', handleFinishTransport);
+    }
+  }
+
+  async function handleFinishTransport() {
+    const submittedTps = state.tpsData.filter((t) => t.submitted);
+    const unsubmittedTps = state.tpsData.filter((t) => !t.submitted);
+
+    const submittedListHtml = submittedTps.map((t) => `<span class="inline-block bg-green-100 text-green-700 text-xs font-bold px-2 py-0.5 rounded-lg">${t.name}</span>`).join(' ');
+    const unsubmittedListHtml = unsubmittedTps.map((t) => `<span class="inline-block bg-red-100 text-red-600 text-xs font-bold px-2 py-0.5 rounded-lg">${t.name}</span>`).join(' ');
+
+    const confirmed = await showConfirmModal({
+      title: 'Selesaikan Pengangkutan?',
+      body: `
+        <p>TPS yang sudah disubmit <span class="font-bold text-slate-800">(${submittedTps.length})</span>:</p>
+        <p>${submittedListHtml}</p>
+        <p class="mt-1">TPS yang tidak diangkut <span class="font-bold text-slate-800">(${unsubmittedTps.length})</span>:</p>
+        <p>${unsubmittedListHtml}</p>
+        <p class="mt-2 text-xs text-amber-600 font-medium">Data TPS yang tidak diangkut tidak akan dikirim.</p>
+      `,
+      confirmText: 'Ya, Selesaikan',
+      cancelText: 'Batal',
+    });
+
+    if (!confirmed) return;
+
+    const btn = document.getElementById('btn-finish-transport-action');
+    if (btn) {
+      btn.disabled = true;
+      btn.textContent = 'Memproses...';
+    }
+
+    clearStateIfAllSubmitted();
+    setTimeout(() => {
+      window.location.href = '/upst/detail-penjemputan/detail-selesai';
+    }, 400);
+  }
+
   return {
     init: init,
     hydrateFromApi: applyApiRecordData,