From ee4129aec4d177b5ec5b965bd56839aad4c6fd14 Mon Sep 17 00:00:00 2001
From: renaldybrada <renaldybrada@gmail.com>
Date: Thu, 12 Mar 2026 10:00:15 +0700
Subject: [PATCH] update revisi UI

---
 index.php | 126 +++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 100 insertions(+), 26 deletions(-)

diff --git a/index.php b/index.php
index f3002b1..2a4b3e7 100644
--- a/index.php
+++ b/index.php
@@ -208,10 +208,13 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
                 <div class="col-md-4">
                     <div class="row">
                         <div class="col-md-4">
-                            <label>Operasi Selesai</label>
+                            <label>Lama Operasi</label>
                         </div>
                         <div class="col-md-8">
-                            <input type="datetime-local" id="op_selesai" class="form-control" disabled>
+                            <div class="input-group">
+                                <input type="number" id="lama_op" class="form-control">
+                                <span class="input-group-text">menit</span>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -219,10 +222,10 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
                 <div class="col-md-4">
                     <div class="row">
                         <div class="col-md-4">
-                            <label>Lama Operasi (menit)</label>
+                            <label>Operasi Selesai</label>
                         </div>
                         <div class="col-md-8">
-                            <input type="number" id="lama_op" class="form-control">
+                            <input type="datetime-local" id="op_selesai" class="form-control" disabled>
                         </div>
                     </div>
                 </div>
@@ -249,10 +252,13 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
                 <div class="col-md-4">
                     <div class="row">
                         <div class="col-md-4">
-                            <label>Pembiusan Selesai</label>
+                            <label>Lama Pembiusan</label>
                         </div>
                         <div class="col-md-8">
-                            <input type="datetime-local" id="bius_selesai" class="form-control" disabled>
+                            <div class="input-group">
+                                <input type="number" id="lama_bius" class="form-control">
+                                <span class="input-group-text">menit</span>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -260,10 +266,10 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
                 <div class="col-md-4">
                     <div class="row">
                         <div class="col-md-4">
-                            <label>Lama Pembiusan</label>
+                            <label>Pembiusan Selesai</label>
                         </div>
                         <div class="col-md-8">
-                            <input type="number" id="lama_bius" class="form-control">
+                            <input type="datetime-local" id="bius_selesai" class="form-control" disabled>
                         </div>
                     </div>
                 </div>
@@ -341,7 +347,7 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
 
                 <div class="row">
                     <div class="col-md-3">
-                        <div class="section-title">Uraian Operasi</div>
+                        <label>Uraian Operasi</label>
                     </div>
                     <div class="col-md-6">
                         <textarea class="form-control" rows="5" name="uraian"></textarea>
@@ -356,7 +362,7 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
                 </div>
                 <div class="col-md-4">
                     <div class="input-group">
-                        <input class="form-control" type="number" name="sum_darah" disabled>
+                        <input class="form-control" type="number" name="sum_darah">
                         <span class="input-group-text">cc</span>
                     </div>
                 </div>
@@ -397,8 +403,8 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
 
             <!-- FILE IMPLANT -->
 
+            <div class="section-title">Implant</div>
             <div class="row d-flex flex-column mt-3 border py-3" id="implantSection">
-
                 <div class="row mb-3">
                     <div class="col-md-3">
                         <label>Merek</label>
@@ -450,7 +456,7 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
                 <!-- TABLE IMPLANT -->
                 <div class="mt-4">
 
-                    <h5>Daftar Implant</h5>
+                    <!-- <h5>Daftar Implant</h5> -->
 
                     <table class="table table-bordered table-striped">
 
@@ -519,8 +525,8 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
             <div class="col-md-12 offset-md-0 d-flex justify-content-end ">
                 <div class="row">
                     <div class="col-md-12">
-                        <button class="btn btn-secondary" type="submit">RIWAYAT LAPORAN OPERASI</button>
-                        <button class="btn btn-primary" id="btnSimpanLaporan">SIMPAN LAPORAN OPERASI</button>
+                        <button class="btn btn-secondary" id="btnRiwayat">RIWAYAT LAPORAN OPERASI</button>
+                        <button class="btn btn-primary" type="submit" id="btnSimpanLaporan">SIMPAN LAPORAN OPERASI</button>
                     </div>
                 </div>
             </div>
@@ -591,7 +597,68 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
         </div>
 
     </div>
+    
+    <!-- MODAL RIWAYAT -->
+    <div class="modal fade" id="modalRiwayat" tabindex="-1">
+        <div class="modal-dialog modal-lg modal-dialog-scrollable">
+            <div class="modal-content">
 
+            <div class="modal-header">
+                <h5 class="modal-title">Riwayat Laporan Operasi</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+
+            <div class="modal-body">
+
+                <table class="table table-bordered table-striped">
+
+                <thead class="table-primary">
+                    <tr>
+                    <th>No</th>
+                    <th>Tanggal Simpan</th>
+                    <th>DPJP Operator</th>
+                    <th>Status</th>
+                    <th>Aksi</th>
+                    </tr>
+                </thead>
+
+                <tbody id="tableRiwayatBody">
+
+                    <tr>
+                    <td>1</td>
+                    <td>28-01-2026 14:18</td>
+                    <td>dr.SYAIFULLAH AMISRAGANI, Sp.OT</td>
+                    <td><span class="badge bg-success">Valid</span></td>
+                    <td>
+                        <button class="btn btn-sm btn-outline-primary">Preview</button>
+                    </td>
+                    </tr>
+
+                    <tr>
+                    <td>2</td>
+                    <td>28-01-2026 15:00</td>
+                    <td>dr.PRADANA NURHADI,Sp.U</td>
+                    <td><span class="badge bg-warning">Draft</span></td>
+                    <td>
+                        <button class="btn btn-sm btn-outline-primary">Preview</button>
+                    </td>
+                    </tr>
+
+                </tbody>
+
+                </table>
+
+            </div>
+
+            <div class="modal-footer">
+                <button class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
+            </div>
+
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         /* kalkulasi waktu */
 
@@ -626,7 +693,6 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
         document.addEventListener("click", e => {
 
             if (e.target.classList.contains("addTindakan")) {
-                // let row = document.querySelector(".tindakanRow").cloneNode(true)
                 let row = document.createElement("div")
                 row.classList.add("row", "my-2", "tindakanRow")
                 row.innerHTML = `
@@ -646,20 +712,20 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
 
         /* darah */
 
-        function sumDarah() {
+        // function sumDarah() {
 
-            let inputs = document.querySelectorAll('input[name="jumlah_darah[]"]')
-            let total = 0
+        //     let inputs = document.querySelectorAll('input[name="jumlah_darah[]"]')
+        //     let total = 0
 
-            inputs.forEach(input => {
-                let val = parseFloat(input.value)
-                if (!isNaN(val)) {
-                    total += val
-                }
-            })
+        //     inputs.forEach(input => {
+        //         let val = parseFloat(input.value)
+        //         if (!isNaN(val)) {
+        //             total += val
+        //         }
+        //     })
 
-            document.querySelector('input[name="sum_darah"]').value = total
-        }
+        //     document.querySelector('input[name="sum_darah"]').value = total
+        // }
 
         document.addEventListener("click", e => {
 
@@ -778,6 +844,14 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
 
         })
 
+        /* Modal Riwayat*/
+        document.getElementById("btnRiwayat").addEventListener("click", function(){
+
+            let modal = new bootstrap.Modal(document.getElementById("modalRiwayat"))
+            modal.show()
+
+        })
+
         /* Tabel Riwayat Operasi */
         document.getElementById("btnSimpanLaporan").addEventListener("click", function() {
             let operatorDPJP = document.getElementById("dpjp_operator").value