diff --git a/resources/js/pages/Detailspelanggan.vue b/resources/js/pages/Detailspelanggan.vue
index 7ecfc45..6616c28 100644
--- a/resources/js/pages/Detailspelanggan.vue
+++ b/resources/js/pages/Detailspelanggan.vue
@@ -1,23 +1,16 @@
 <template>
          <form class="w-1/2 mt-10 p-6 bg-white rounded-xl shadow mx-auto">
-         <div class="sm:hidden">
-            <label for="tabs" class="sr-only">Select your country</label>
-            <select id="tabs" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                <option>Profile</option>
-                <option>Canada</option>
-                <option>France</option>
-                <option>Germany</option>
-            </select>
-        </div>
+        
         <ul class="flex hidden rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 mb-4">
             <li class="w-full">
-                <a href="#" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-900 bg-gray-100 rounded-l-lg focus:ring-4 focus:ring-blue-300 focus:z-20 active dark:bg-gray-700 dark:text-white" aria-current="page">Profile</a>
+                <button id="profile" type="button" :class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showprofile}" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 rounded-l-lg focus:z-20 active hover:bg-gray-50 dark:bg-gray-700 dark:text-white" aria-current="page" @click="TabsAndPills($event)">Profile</button>
             </li>
             <li class="w-full">
-                <a href="#" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:z-20 dark:text-gray-400 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white">Senarai SAG</a>
+                <button id="senaraisag" type="button" :class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showsag}" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 hover:text-gray-700 hover:bg-gray-50 focus:z-20 dark:text-gray-400 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white" @click="TabsAndPills($event)">Senarai SAG</button>
             </li>
         </ul>
 
+        <div id="tabs-1" v-if="this.showprofile">
           <div class="flex flex-wrap -mx-3 mb-6">
             <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0 form-group" :class="{ 'form-group--error': $v.name.$error }">
               <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 form__label">
@@ -36,7 +29,7 @@
               <div class="text-red-500 text-xs italic" v-if="!$v.icno.required">Field is required</div>
               <div class="text-red-500 text-xs italic" v-if="!$v.icno.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
             </div>
-          </div>
+          </div> 
           <div class="flex flex-wrap -mx-3 mb-6">
             <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
               <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
@@ -145,14 +138,312 @@
             </button>
             
           </div>
+        </div>
 
+        <div id="tabs-2" v-if="this.showsag">
+          
+          <div class="flex justify-center mt-10 mb-10">
+            <div class="mx-2 radio">
+                <input type="radio" id="belumtebus" name="radpendser" value="belum_tebus" class="hidden focus:bg-gray-500" v-model="selected">
+                <label for="belumtebus" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200 focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Belum Tebus</label>
+            </div>
+            
+            <div class="mx-2 radio cursor-pointer">
+                <input type="radio" id="sudahtebus" name="radpendser" value="sudah_tebus" class="hidden focus:bg-gray-500" v-model="selected">
+                <label for="sudahtebus" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200  focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Sudah Tebus</label>
+            </div>
+
+              <div class="mx-2 radio cursor-pointer">
+                <input type="radio" id="lelong" name="radpendser" value="lelong" class="hidden focus:bg-gray-500" v-model="selected">
+                <label for="lelong" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200  focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Lelong</label>
+            </div>
+          </div>
+
+          <div v-if="selected=='belum_tebus'">
+            <table class="min-w-full leading-normal">
+              <thead class="text-center">
+                <tr>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Bil
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Norujukan
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Tarikh Gadai
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Tarikh Matang
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Pembiayaan
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Margin
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Tempoh
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Action
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- <div v-for="(belumtebus,i) in objbelumtebus.data" :key="i"> -->
+                  <!-- <tr v-for="(btebus,b) in belumtebus" :key="b"> -->
+                  <tr v-for="(belumtebus,i) in objbelumtebus.data[0]" :key="i">
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                      <div class="flex items-center">
+                        <div class="ml-3">
+                          <p class="text-gray-900 whitespace-no-wrap" v-text="(objbelumtebus.from + i)">
+                          </p>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                      <div class="flex items-center">
+                        <div class="ml-3">
+                          <p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.norujukan">
+                          </p>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                      <div class="flex items-center">
+                        <div class="ml-3">
+                          <p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.t_gadai">
+                          </p>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                      <div class="flex items-center">
+                        <div class="ml-3">
+                          <p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.t_matang">
+                          </p>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                      <div class="flex items-center">
+                        <div class="ml-3">
+                          <p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.pinjaman">
+                          </p>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                      <div class="flex items-center">
+                        <div class="ml-3">
+                          <p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.percentpinj">
+                          </p>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                      <div class="flex items-center">
+                        <div class="ml-3">
+                          <p class="text-gray-900 whitespace-no-wrap" v-text="belumtebus.tempoh">
+                          </p>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                      <div class="flex items-center">
+                        <div class="ml-3">
+                          <button type="button" data-modal-toggle="popup-modal" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                <!-- </div> -->
+              </tbody>
+            </table>
+
+          <pagination :data="paginate" @clickEvent_="getDataSenaraiSAG"></pagination>
+
+          </div>
+
+          <div v-if="selected=='sudah_tebus'">
+            <table class="min-w-full leading-normal">
+              <thead class="text-center">
+                <tr>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Bil
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Norujukan
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Tarikh Tebus
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Baki Pembiayaan
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Margin
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Tempoh
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(sudahtebus,i) in objsudahtebus.data[0]" :key="i">
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="(objsudahtebus.from + i)">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.norujukan">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.t_update">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.bakipjm">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.percentpinj">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="sudahtebus.tempoh">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          <pagination :data="paginate" @clickEvent_="getDataSenaraiSAG"></pagination>
+          </div>
+
+
+          <div v-if="selected=='lelong'">
+            <table class="min-w-full leading-normal">
+              <thead class="text-center">
+                <tr>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Bil
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Norujukan
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Tarikh Lelong
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Tarikh Tuntut
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Pembiayaan
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Harga Jual
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Jum Tuntut/Bayar
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Caj Lelong
+                  </th>
+                </tr>
+              </thead>
+              <!-- <tbody>
+                <tr v-for="(blacklist,i) in showblacklist.data" :key="i">
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="(showblacklist.from + i)">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="blacklist.nama">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="blacklist.nokp">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <p class="text-gray-900 whitespace-no-wrap" v-text="blacklist.nota">
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                    <div class="flex items-center">
+                      <div class="ml-3">
+                        <button data-modal-toggle="popup-modal" @click="deleteBlacklist(blacklist.id,blacklist.nama,blacklist.nokp)" class="border border-red-600 text-red-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-red-600 hover:text-white transition-all duration-300">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody> -->
+            </table>
+          </div>
+
+        </div>
           </form>
 </template>
 
 <script>
 import { required, minLength, between } from 'vuelidate/lib/validators'
+import pagination from '../components/pagination.vue'
 
 export default {
+  components: {
+    pagination
+    
+	},
   props: {
 		customer: {
 			type: Object,
@@ -185,7 +476,16 @@ export default {
       noakaunbank: this.customer.noakaun,
       jenisbank:[],
       submitStatus: '',
-      responsepostdata: 0
+      responsepostdata: 0,
+      showprofile: true,
+      showsag: false,
+      selected:'belum_tebus',
+      currentPage: 1,
+      objbelumtebus: {},
+      objsudahtebus: {},
+      objlelong:{},
+      paginate:{}
+
     }
   },
   setup: (props, context) => {
@@ -201,6 +501,18 @@ export default {
       this.jenisbank = response.data
     });
   },
+  watch: {
+    selected: function(val, oldVal) {
+      
+      this.getDataSenaraiSAG(this.currentPage);
+        // for (var i = 0; i < this.cases.length; i++) {
+        //     if (this.cases[i].status == val) {
+        //         this.activeCases.push(this.cases[i]);
+        //         alert("Fired! " + val);
+        //     }
+        // }
+    }
+  },
   methods: {
     koddaerahCall: function(negeri,daerah) {
       this.axios.get(this.$hostname + '/api/negeri/' + negeri).then(response => {
@@ -317,7 +629,48 @@ export default {
       });
   
       return response
-    }
+    },
+    TabsAndPills: function(event){
+      let targetId = event.currentTarget.id;
+
+      event.preventDefault();
+      if(targetId === 'profile' && this.showprofile === false)
+      {
+        this.showprofile = true;
+        this.showsag = false;
+      }
+
+      if(targetId === 'senaraisag' && this.showsag === false)
+      {
+        this.getDataSenaraiSAG(this.currentPage);
+        this.showprofile = false;
+        this.showsag = true;
+      }
+    },
+    getDataSenaraiSAG: function(pageNumber){
+      console.log(this.selected,this.icnoasal,pageNumber)
+      this.axios.get('http://localhost:8000/admin/customers/' + this.icnoasal + '/gadai/' + this.selected,{params: {
+        page: pageNumber
+      }}).then(response => {
+        if(this.selected === 'belum_tebus')
+        {
+           this.objbelumtebus = response.data;
+          this.paginate = response.data;
+        }
+        else if(this.selected === 'sudah_tebus')
+        {
+          this.objsudahtebus = response.data;
+          this.paginate = response.data;
+        }
+        else
+        {
+          this.objlelong = response.data;
+          this.paginate = response.data;
+        }
+
+          console.log(this.objbelumtebus,this.objsudahtebus)
+      });
+    },
   },
   validations: {
     name: {