From c7a8f8103973b97d644e86097c9cd8a81c7eda82 Mon Sep 17 00:00:00 2001
From: Ain Izazi <ain55645@gmail.com>
Date: Wed, 29 Oct 2025 10:29:14 +0800
Subject: [PATCH] adjust sikit

---
 resources/js/components/Searchbarangkes.vue | 330 ++++++++--------
 resources/js/pages/Detailssag.vue           | 401 ++++++++++++--------
 2 files changed, 398 insertions(+), 333 deletions(-)

diff --git a/resources/js/components/Searchbarangkes.vue b/resources/js/components/Searchbarangkes.vue
index acab1cb..f158631 100644
--- a/resources/js/components/Searchbarangkes.vue
+++ b/resources/js/components/Searchbarangkes.vue
@@ -1,197 +1,189 @@
 <template>
-      <div class="container w-full max-w-xl mx-auto mt-10 px-4 font-sans">
-         <form class="bg-white w-full shadow-md rounded-lg px-8 pt-6 pb-4 mb-4" onclick="return false">
-            <div class="mb-4 w-96 mx-auto">
-               <label class="block text-gray-500 font-medium text-sm mb-2">SAG</label>
-               <div class="flex flex-wrap">
-                  <div class="flex flex-row w-96 mx-auto">
-                  
-                     <div class="flex flex-col w-96">
-                        <input id="frminput" type="text" ref="btnDropdownRef" placeholder="Masukkan No Rujukan SAG" class="mr-2 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" />
-                     
-                        <div ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
-                           <div class="py-1" role="none">
-                              <a v-for="(cust,i) in arrayCustomer" :key="i" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500" role="menuitem" tabindex="-1" id="menu-item-0" :href="Urlredirect({ cust: cust.id })"  v-on:click="ClickUrl($event)">{{ cust.nama }}<br><b>{{ (cust.kpbaru) ? cust.kpbaru : cust.kplama }}</b></a>
-                           </div>
+   <div class="container w-full max-w-xl mx-auto mt-10 px-4 font-sans">
+      <form class="bg-white w-full shadow-md rounded-lg px-8 pt-6 pb-4 mb-4" onclick="return false">
+         <div class="mb-4 w-96 mx-auto">
+            <label class="block text-gray-500 font-medium text-sm mb-2">SAG</label>
+            <div class="flex flex-wrap">
+               <div class="flex flex-row w-96 mx-auto">
+               
+                  <div class="flex flex-col w-96">
+                     <input id="frminput" type="text" ref="btnDropdownRef" placeholder="Masukkan No Rujukan SAG" class="mr-2 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" v-model="inputValue" @input="validateInput"/>
+                     <p v-if="warningMessage" class="text-red-500 text-sm mt-1">{{ warningMessage }}</p>
+                     <div ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+                        <div class="py-1" role="none">
+                           <a v-for="(cust,i) in arrayCustomer" :key="i" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500" role="menuitem" tabindex="-1" id="menu-item-0" :href="Urlredirect({ cust: cust.id })"  v-on:click="ClickUrl($event)">{{ cust.nama }}<br><b>{{ (cust.kpbaru) ? cust.kpbaru : cust.kplama }}</b></a>
                         </div>
-                     </div>                     
-                                    
-                     <button id="buttonsearch" class="px-4 py-2 bg-blue-600 rounded ml-2" v-on:click="toggleDropdown()"><i class="fas fa-search text-white"></i></button>
-                  </div>
+                     </div>
+                  </div>                     
+                                 
+                  <button id="buttonsearch" class="px-4 py-2 bg-blue-600 rounded ml-2" v-on:click="toggleDropdown()"><i class="fas fa-search text-white"></i></button>
                </div>
             </div>
-         </form>
-      </div>
+         </div>
+      </form>
+   </div>
 </template>
 
 <script>
 import { createPopper } from "@popperjs/core";
 
 export default{
-   props: {
-      placement: {
-         type: String,
-         default: "bottom-start"
-      }
-   },
-   data() {
-      return {
-         dropdownShow: false,
-         param1: "",
-         arrayCustomer: [],
-         tempcaw: '',
-         tempnorujukan: '',
-      }
-   },
-   mounted() {
-    document.addEventListener('click', this.onClick);
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.onClick);
-  },
-   methods: {
-   //    async toggleDropdown(){
-       
-   //    await this.getData()
-   //    await this.$nextTick()
+props: {
+   placement: {
+      type: String,
+      default: "bottom-start"
+   }
+},
+data() {
+   return {
+      dropdownShow: false,
+      param1: "",
+      arrayCustomer: [],
+      tempcaw: '',
+      tempnorujukan: '',
+      inputValue: '',
+      warningMessage: ''
+   }
+},
+mounted() {
+ document.addEventListener('click', this.onClick);
+},
+beforeDestroy() {
+ document.removeEventListener('click', this.onClick);
+},
+methods: {
 
-   //    if(this.arrayCustomer.length > 0)
-   //    {
-   //       console.log('masuk');
-   //       this.dropdownShow = true;
-   //       createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
-   //          placement: "bottom-start",
-   //           modifiers: [{
-   //            name: "preventOverflow",
-   //          }]
-   //       });
-        
-   //    }
-   //    else{
-   //       console.log('siap')
-   //    }
-     
-   //  },
-   async toggleDropdown() {
-      await this.getData();          
-      await this.$nextTick();        
+validateInput() {
+const length = this.inputValue.length;
 
-      if (this.arrayCustomer.length > 0) {
-         console.log('masuk');
-         this.dropdownShow = true;
-         createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
-            placement: "bottom-start",
-            modifiers: [{ name: "preventOverflow" }]
-         });
-      } else {
-         console.log('siap');
-      }
-   },
-    async getPrefix(value){
-      let tempcaw = '';
-      let kodcaw = '';
-      tempcaw = value.slice(0,6)
+if (length > 0 && length < 10) {
+   this.warningMessage = 'Input terlalu pendek. Minimum 10 aksara.';
+} else if (length > 17) {
+   this.warningMessage = 'Input terlalu panjang.';
+} else {
+   this.warningMessage = '';
+}
+},
 
-      // if (/^[A-Za-z]/.test(value)) {
-      //    // Kalau mula dengan huruf → ambil 3 char
-      //    tempcaw = value.slice(0, 3);
-      // } else if (/^\d/.test(value)) {
-      //    // Kalau mula dengan nombor → ambil 5 char
-      //    tempcaw = value.slice(0, 5);
-      // }
+async toggleDropdown() {
+// Check validation before searching
+if (this.warningMessage) {
+   return; // Don't proceed if there's a warning
+}
 
-      kodcaw = await this.compareCawangan(tempcaw)
+await this.getData();          
+await this.$nextTick();        
 
-      if(kodcaw) return kodcaw; else null;
+if (this.arrayCustomer.length > 0) {
+   console.log('masuk');
+   this.dropdownShow = true;
+   createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
+      placement: "bottom-start",
+      modifiers: [{ name: "preventOverflow" }]
+   });
+} else {
+   console.log('siap');
+}
+},
 
-      // return null; // fallback kalau tak match
-    },
-    compareCawangan: function(kodcaw){
-      return this.axios.get('/api/check/cawangan')
-      .then(response => {
-         let cawanganlist = response.data;
-         let prefix = kodcaw;
-         let exactMatch = cawanganlist.find(item => 
-            item.kodcaw.toLowerCase() === prefix.toLowerCase()
-         );
+async getPrefix(value){
+let tempcaw = '';
+let kodcaw = '';
+tempcaw = value.slice(0,6)
 
-         // if (exactMatch) return { ...exactMatch, matchType: 'exact' };
-         if (exactMatch) return exactMatch.kodcaw;
+kodcaw = await this.compareCawangan(tempcaw)
 
-    
-         // Contains match
-         let containsMatch = cawanganlist.find(item => 
-            item.kodcaw.toLowerCase().includes(prefix.toLowerCase()) ||
-            prefix.toLowerCase().includes(item.kodcaw.toLowerCase())
-         );
-         
-      return containsMatch ? containsMatch.kodcaw : null;
-      // return containsMatch ? { ...containsMatch, matchType: 'contains' } : null;
-      })
-      .catch(error => {
-         console.error('Error fetching cawangan:', error);
-      });
+if(kodcaw) return kodcaw; else null;
 
+// return null; // fallback kalau tak match
+},
+ 
+ compareCawangan: function(kodcaw){
+   return this.axios.get('/api/check/cawangan')
+   .then(response => {
+      let cawanganlist = response.data;
+      let prefix = kodcaw;
+      let exactMatch = cawanganlist.find(item => 
+         item.kodcaw.toLowerCase() === prefix.toLowerCase()
+      );
 
-    },
-    async getData() {
-      let inputvalue = document.getElementById("frminput").value;
-      let kodcaw = await this.getPrefix(inputvalue);
+      // if (exactMatch) return { ...exactMatch, matchType: 'exact' };
+      if (exactMatch) return exactMatch.kodcaw;
+
+ 
+      // Contains match
+      let containsMatch = cawanganlist.find(item => 
+         item.kodcaw.toLowerCase().includes(prefix.toLowerCase()) ||
+         prefix.toLowerCase().includes(item.kodcaw.toLowerCase())
+      );
       
-      this.tempcaw = kodcaw;
-      this.tempnorujukan = inputvalue;
+   return containsMatch ? containsMatch.kodcaw : null;
+   // return containsMatch ? { ...containsMatch, matchType: 'contains' } : null;
+   })
+   .catch(error => {
+      console.error('Error fetching cawangan:', error);
+   });
 
-      if (inputvalue && /-/.test(inputvalue)) {
-         try {
-            let response = await this.axios.get(this.$hostname + '/admin/searchBySag', {
-            params: {
-               norujukan: inputvalue,
-               kodcaw: kodcaw
-            }
-            });
-            this.arrayCustomer = response.data;
-         } catch (error) {
-            console.log(error);
+
+ },
+ async getData() {
+   let inputvalue = document.getElementById("frminput").value;
+   let kodcaw = await this.getPrefix(inputvalue);
+   
+   this.tempcaw = kodcaw;
+   this.tempnorujukan = inputvalue;
+
+   if (inputvalue && /-/.test(inputvalue)) {
+      try {
+         let response = await this.axios.get(this.$hostname + '/admin/searchBySag', {
+         params: {
+            norujukan: inputvalue,
+            kodcaw: kodcaw
          }
-      }
-   },
-    hasNumber: function(inputString){
-      return /\d/.test(inputString);
-    },
-    onClick: function(){
-       let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
-       let searchInside = this.$refs.btnDropdownRef.contains(event.target);
-       let buttonSearch = document.getElementById('buttonsearch');
-
-        if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
-           if(buttonSearch.value !== '')
-           {
-            this.dropdownShow = true
-           }
-         }
-         else{
-
-            if(this.$refs.btnDropdownRef.value != '')
-            {
-               this.dropdownShow = false
-            }else{
-               this.dropdownShow = false
-               this.arrayCustomer = []
-            }
-            
-         }
-    },
-      Urlredirect: function(options) {
-         // const inputElement = document.getElementById('frminput');
-         // const value = inputElement.value;
-         // return window.route('pelanggan.detailssag', options.cust)
-            return window.route('pelanggan.detailssag', options.cust) + '?norujukan=' + this.tempnorujukan + '&kodcaw=' + this.tempcaw;
-      },
-
-      ClickUrl: function(e){
-         window.location.href = e.target.getAttribute('href');
+         });
+         this.arrayCustomer = response.data;
+      } catch (error) {
+         console.log(error);
       }
    }
+},
+ hasNumber: function(inputString){
+   return /\d/.test(inputString);
+ },
+ onClick: function(){
+    let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
+    let searchInside = this.$refs.btnDropdownRef.contains(event.target);
+    let buttonSearch = document.getElementById('buttonsearch');
+
+     if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
+        if(buttonSearch.value !== '')
+        {
+         this.dropdownShow = true
+        }
+      }
+      else{
+
+         if(this.$refs.btnDropdownRef.value != '')
+         {
+            this.dropdownShow = false
+         }else{
+            this.dropdownShow = false
+            this.arrayCustomer = []
+         }
+         
+      }
+ },
+   Urlredirect: function(options) {
+      // const inputElement = document.getElementById('frminput');
+      // const value = inputElement.value;
+      // return window.route('pelanggan.detailssag', options.cust)
+         return window.route('pelanggan.detailssag', options.cust) + '?norujukan=' + this.tempnorujukan + '&kodcaw=' + this.tempcaw;
+   },
+
+   ClickUrl: function(e){
+      window.location.href = e.target.getAttribute('href');
+   }
+}
 
 }
 </script>
diff --git a/resources/js/pages/Detailssag.vue b/resources/js/pages/Detailssag.vue
index 6db243b..36d8f32 100644
--- a/resources/js/pages/Detailssag.vue
+++ b/resources/js/pages/Detailssag.vue
@@ -1,144 +1,223 @@
 <template>
-    <div class="container w-full max-w-7xl mx-auto mt-10 px-4 font-sans">
-      <div class="bg-white shadow rounded-lg">
-        <!-- Customer Info -->
-        <div v-if="customer" class="p-6 border-b">
-          <h2 class="text-lg font-bold mb-2">Maklumat Customer</h2>
-          <p><strong>Nama:</strong> {{ customer.nama }}</p>
-          <p><strong>No Telefon:</strong> {{ customer.telefon }}</p>
-          <p><strong>KP Baru:</strong> {{ customer.kpbaru }}</p>
-          <p><strong>No Rujukan:</strong> {{ gadaiItem.norujukan }}</p>
+  <div class="container w-full max-w-7xl mx-auto mt-10 px-4 font-sans">
+    <div class="bg-white shadow rounded-lg">
+      <!-- Customer Info -->
+      <div v-if="customer" class="p-6 border-b">
+        <h2 class="text-lg font-bold mb-2">Maklumat Customer</h2>
+        <p><strong>Nama:</strong> {{ customer.nama }}</p>
+        <p><strong>No Telefon:</strong> {{ customer.telefon }}</p>
+        <p><strong>KP Baru:</strong> {{ customer.kpbaru }}</p>
+        <p><strong>No Rujukan:</strong> {{ gadaiItem.norujukan }}</p>
+      </div>
+
+      <!-- Tab Title -->
+      <div class="border-b flex">
+        <a id="sag"
+           href="#"
+           class="px-6 py-3 font-semibold text-blue-600 border-b-2 border-blue-600">
+           Maklumat SAG
+        </a>
+       
+      </div>
+
+      <div v-if="gadaiItem" class="p-6">
+        <div class="grid grid-cols-2 gap-6">
+          <div>
+            <label class="block text-sm font-medium text-gray-700">No Rujukan</label>
+            <input
+              class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
+              -500"
+              type="text"
+              v-model="gadaiItem.norujukan"
+              :readonly="!isEditing"
+              required
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Tarikh</label>
+            <input
+              class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
+              -500"
+              type="date"
+              v-model="gadaiItem.t_gadai"
+              :readonly="!isEditing"
+              required
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Pinjaman (RM)</label>
+            <input
+              class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
+              -500"
+              type="number"
+              step="0.01"
+              v-model="gadaiItem.pinjaman"
+              :readonly="!isEditing"
+              required
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Nilai Marhun (RM)</label>
+            <input
+              class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
+              -500"
+              type="number"
+              step="0.01"
+              v-model="gadaiItem.nilaimarhun"
+              :readonly="!isEditing"
+              required
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">JBG</label>
+            <input
+              class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
+              -500"
+              type="number"
+              v-model="gadaiItem.jbg"
+              :readonly="!isEditing"
+              required
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Keuntungan 1% (RM)</label>
+            <input
+              class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
+              -500"
+              type="number"
+              step="0.01"
+              v-model="gadaiItem.tunggakanonepercent"
+              :readonly="!isEditing"
+              required
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Lain-lain caj (RM)</label>
+            <input
+              class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue
+              -500"
+              type="number"
+              step="0.01"
+              v-model="gadaiItem.tunggakanujrah"
+              :readonly="!isEditing"
+              required
+            />
+          </div>
         </div>
-  
-        <!-- Tab Title -->
-        <div class="border-b flex">
-          <a id="sag"
-             href="#"
-             class="px-6 py-3 font-semibold text-blue-600 border-b-2 border-blue-600">
-             Maklumat SAG
-          </a>
-        </div>
-  
-        <div v-if="showSag" class="p-6">
-          <form @submit.prevent="submit" class="space-y-6">
-            <div class="grid grid-cols-2 gap-6" v-if="gadaiItem">
-              <div>
-                <label class="block text-sm font-medium text-gray-700">No Rujukan</label>
-                <input v-model="gadaiItem.norujukan" class="mt-1 block w-full rounded-md border-gray-00 shadow-sm" required />
-              </div>
-              <div>
-                <label class="block text-sm font-medium text-gray-700">Tarikh</label>
-                <input v-model="gadaiItem.t_gadai" type="date" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" required />
-              </div>
-              <!-- <div>
-                <label class="block text-sm font-medium text-gray-700">Teller</label>
-                <input v-model="customer.teller" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" required />
-              </div> -->
-              <div>
-                <label class="block text-sm font-medium text-gray-700">Pinjaman (RM)</label>
-                <input v-model="gadaiItem.pinjaman" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" required />
-              </div>
-              <div>
-                <label class="block text-sm font-medium text-gray-700">Nilai Marhun (RM)</label>
-                <input v-model="gadaiItem.nilaimarhun" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
-              </div>
-              <div>
-                <label class="block text-sm font-medium text-gray-700">JBG</label>
-                <input v-model="gadaiItem.jbg" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
-              </div>
-              <!-- <div>
-                <label class="block text-sm font-medium text-gray-700">Tunggakan (RM)</label>
-                <input v-model="gadaiItem.tunggakan" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
-              </div> -->
-              <div>
-                <label class="block text-sm font-medium text-gray-700">Keuntungan 1% (RM)</label>
-                <input v-model="gadaiItem.tunggakanonepercent" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
-              </div>
-              <div>
-                <label class="block text-sm font-medium text-gray-700">Lain-lain caj (RM)</label>
-                <input v-model="gadaiItem.tunggakanujrah" type="number" step="0.01" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm" />
-              </div>
-              <!-- <div>
-                <label class="block text-sm font-medium text-gray-700">Nota</label>
-                <textarea v-model="gadaiItem.nota" class="mt-1 block w-full rounded-md border-gray-500 shadow-sm"></textarea>
-              </div> -->
-            </div>
-  
-            <!-- Buttons -->
-            <div class="flex justify-end space-x-2">
-              <button type="button" 
-                      @click="daftar"
-                      class="px-4 py-2 bg-gray-600 text-white rounded-md shadow hover:bg-gray-700">
-                Daftar
-              </button>
-  
-              <button type="submit" 
-                      class="px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700">
-                Kemaskini
-              </button>
-            </div>
-          </form>
+
+        <!-- BUTTONS -->
+        <div class="flex justify-end space-x-2 mt-6">
+          <button
+            type="button"
+            @click="toggleEdit"
+            :class="isEditing ? 'bg-red-600 hover:bg-red-700' : 'bg-gray-600 hover:bg-blue-700'"
+            class="px-4 py-2 text-white rounded-md shadow"
+          >
+            {{ isEditing ? 'Batal' : 'Ubah' }}
+          </button>
+
+          <button
+            v-if="isEditing"
+            type="button"
+            @click="kemaskini"
+            class="px-4 py-2 bg-gray-600 text-white rounded-md shadow hover:bg-blue-700"
+          >
+            Kemaskini
+          </button>
+
+          <button
+            v-if="!isEditing"
+            type="button"
+            @click="daftar"
+            class="px-4 py-2 bg-gray-600 text-white rounded-md shadow hover:bg-blue-700"
+          >
+            Daftar
+          </button>
         </div>
       </div>
     </div>
-  </template>
-  
-  <script>
-  import Swal from 'sweetalert2'
-  import axios from 'axios'
-  
-  export default {
-    props: {
-      kodcaw: { type: String, required: true },
-      customer: { type: Object, required: true },
-      gadai: { type: Object, default: () => ({}) }
-    },
-  
-    data() {
-      return {
-        gadaiItem: {
-          norujukan: '',
-          t_gadai: '',
-          pinjaman: '',
-          teller: '',
-          nilaimarhun: '',
-          jbg: '',
-          nota: '',
-          tunggakan: '',
-          tunggakanonepercent: '',
-          tunggakanujrah: ''
-        },
-        showSag: true,
-        loading: false
-      }
-    },
-  
-    mounted() {
-      console.log("Props diterima:", this.customer)
-      console.log('gadai Item:', this.gadai);
-      if (this.gadai && Object.keys(this.gadai).length > 0) {
-        this.gadaiItem = this.gadai
-      } else if (this.customer?.norujukan) {
-        this.fetchGadaiByNorujukan(this.customer.norujukan)
-      }
-    },
-  
-    methods: {
-      async fetchGadaiByNorujukan(norujukan) {
-        this.loading = true
-        try {
-          const url = this.$hostname + '/api/gadai/norujukan/' + this.customer.kodcaw + '/' + norujukan
-          const res = await axios.get(url)
-          this.gadaiItem = res.data || {}
-        } catch (e) {
-          console.error("Gagal fetch data gadai:", e)
-        } finally {
-          this.loading = false
-        }
+  </div>
+</template>
+
+<script>
+import Swal from 'sweetalert2'
+import axios from 'axios'
+
+export default {
+  props: {
+    kodcaw: { type: String, required: true },
+    customer: { type: Object, required: true },
+    gadai: { type: Object, default: () => ({}) }
+  },
+
+  data() {
+    return {
+      gadaiItem: {
+        norujukan: '',
+        t_gadai: '',
+        pinjaman: '',
+        teller: '',
+        nilaimarhun: '',
+        jbg: '',
+        nota: '',
+        tunggakan: '',
+        tunggakanonepercent: '',
+        tunggakanujrah: ''
       },
+      originalGadaiItem: {},
+      showSag: true,
+      loading: false,
+      isEditing: false
+    }
+  },
+
+  mounted() {
+    console.log("Props diterima:", this.customer)
+    console.log('gadai Item:', this.gadai);
+
+    if (this.gadai && Object.keys(this.gadai).length > 0) {
+      this.gadaiItem = { ...this.gadai }
+      this.originalGadaiItem = { ...this.gadai }
+    } else if (this.customer?.norujukan) {
+      this.fetchGadaiByNorujukan(this.customer.norujukan)
+    }
+  },
+
+  methods: {
+    async fetchGadaiByNorujukan(norujukan) {
+      this.loading = true
+      try {
+        const url = this.$hostname + '/api/gadai/norujukan/' + this.customer.kodcaw + '/' + norujukan
+        const res = await axios.get(url)
+        this.gadaiItem = res.data || {}
+        this.originalGadaiItem = { ...res.data }
+      } catch (e) {
+        console.error("Gagal fetch data gadai:", e)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    toggleEdit() {
+      // Jika sedang edit → klik Batal, reset data asal
+      if (this.isEditing) {
+        this.gadaiItem = { ...this.originalGadaiItem }
+        this.isEditing = false
+      } else {
+        // Jika belum edit → klik Ubah, enable field
+        this.isEditing = true
+      }
+    },
 
     async daftar() {
       try {
+        this.loading = true
         console.log("Customer data:", this.customer)
         console.log("Gadai Item:", this.gadaiItem)
         console.log("kod caw:", this.kodcaw)
@@ -149,46 +228,40 @@
 
         if (response.data.success) {
           Swal.fire({ icon: 'success', title: 'Berjaya', text: response.data.message })
+          this.originalGadaiItem = { ...this.gadaiItem }
+          this.isEditing = false
         } else {
           Swal.fire({ icon: 'error', title: 'Ralat', text: response.data.message })
         }
       } catch (e) {
         console.error("Error daftar:", e)
-        Swal.fire({ icon: 'error', title: 'Server Error', text: 'dok jadi' })
+        Swal.fire({ icon: 'error', title: 'Server Error', text: 'Pendaftaran gagal' })
+      } finally {
+        this.loading = false
       }
     },
-  
-      //fungsi kemaskini (sedia ada)
-      async submit() {
-        try {
-            let response = await axios.put(this.$hostname + '/api/barangkes/update/' + this.gadaiItem.recno, {
-            ...this.gadaiItem,
-          })
-  
-          if (response.data.success) {
-            Swal.fire({ icon: 'success', title: 'Berjaya', text: response.data.message })
-          } else {
-            Swal.fire({ icon: 'error', title: 'Ralat', text: response.data.message })
-          }
-        } catch (e) {
-          Swal.fire({ icon: 'error', title: 'Server Error', text: 'data tak msk' })
-        }
-      },
-  
-      resetForm() {
-        this.gadaiItem = {
-          norujukan: '',
-          tarikh: '',
-          pinjaman: '',
-          nilaimarhun: '',
-          jbg: '',
-          nota: '',
-          tunggakan: '',
-          tunggakanonepercent: '',
-          tunggakanujrah: ''
+
+    async kemaskini() {
+      try {
+        this.loading = true
+        let response = await axios.put(this.$hostname + '/api/barangkes/update/' + this.gadaiItem.recno, {
+          ...this.gadaiItem,
+        })
+
+        if (response.data.success) {
+          Swal.fire({ icon: 'success', title: 'Berjaya', text: response.data.message })
+          this.originalGadaiItem = { ...this.gadaiItem }
+          this.isEditing = false
+        } else {
+          Swal.fire({ icon: 'error', title: 'Ralat', text: response.data.message })
         }
+      } catch (e) {
+        console.error("Error kemaskini:", e)
+        Swal.fire({ icon: 'error', title: 'Server Error', text: 'Kemaskini gagal' })
+      } finally {
+        this.loading = false
       }
     }
   }
-  </script>
-  
\ No newline at end of file
+}
+</script>