admin-erahn/resources/js/pages/Detailssag.vue

<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>
  
        <!-- 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>
        </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
        }
      },

    async daftar() {
      try {
        console.log("Customer data:", this.customer)
        console.log("Gadai Item:", this.gadaiItem)
        console.log("kod caw:", this.kodcaw)

        let response = await axios.post(this.$hostname + '/api/barangkes/store', {   
          ...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) {
        console.error("Error daftar:", e)
        Swal.fire({ icon: 'error', title: 'Server Error', text: 'dok jadi' })
      }
    },
  
      //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: ''
        }
      }
    }
  }
  </script>