admin-erahn/resources/js/components/util/RekodBayaranModal.vue

<template>
  <div>

   <transition name="modal-fade">
    <div v-if="showModal" class=" overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
      <div class="relative w-full  my-6 mx-auto max-w-6xl">
        <!--content-->
        <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
          <!--header-->
          <!--body-->
          <div class="relative p-6 flex-auto">

          <div class="grid grid-cols-3">
            <div class="h-auto w-auto text-center p-6 mt-8 rounded-lg bg-yellow-300 border border-yellow-300">Hargajualan : RM {{ formatexchange(this.hargajualan) }}</div>
            <div class="h-auto w-auto text-center p-6 mt-8 ml-2 rounded-lg bg-yellow-300 border border-yellow-300">Pembiayaan : RM {{ formatexchange(this.pinjaman) }}</div>
            <div class="h-auto w-auto text-center p-6 mt-8 ml-2 rounded-lg bg-yellow-300 border border-yellow-300">Nilai Marhun : RM {{ formatexchange(this.nilaimarhun) }}</div>
          </div>

          <div class="flex justify-center mt-10 mb-10">
            <div class="mx-2 radio">
                <input type="radio" id="bayaran" name="radpendser" value="bayaran" class="hidden focus:bg-gray-500" v-model="selected">
                <label for="bayaran" 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">Bayaran</label>
            </div>

            <div class="mx-2 radio cursor-pointer">
                <input type="radio" id="upah" name="radpendser" value="upah" class="hidden focus:bg-gray-500" v-model="selected">
                <label for="upah" 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">Keuntungan</label>
            </div>

              <div class="mx-2 radio cursor-pointer">
                <input type="radio" id="rekod" name="radpendser" value="rekod" class="hidden focus:bg-gray-500" v-model="selected">
                <label for="rekod" 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">Rekod</label>
            </div>
          </div>

          <div v-if="selected=='bayaran'">
            <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">
                    Tarikh Bayaran
                  </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">
                    Masa Bayaran
                  </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">
                    Bayaran
                  </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>
                  <tr v-if="objbayaran.length === 0">
                    <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
                      <div class="flex flex-col items-center justify-center py-8">
                        <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        <p class="text-gray-700 font-semibold text-lg">Tiada Data Diperolehi</p>
                      </div>
                    </td>
                  </tr>
                  <tr v-for="(bayaran,i) in objbayaran" :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="(i+1)">
                          </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="formatDate(bayaran.created_at,'date')">
                          </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="formatDate(bayaran.created_at,'time')">
                          </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="formatexchange(bayaran.duit_masuk)">
                          </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" @click="bayaranfunc(bayaran.id)" 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>
              </tbody>
            </table>
          </div>
          <div v-if="selected=='upah'">
            <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">
                    Tarikh
                  </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">
                    Keuntungan
                  </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">
                    Tindakan
                  </th>
                </tr>
              </thead>
              <tbody>
                  <tr v-if="objupah.length === 0">
                    <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
                      <div class="flex flex-col items-center justify-center py-8">
                        <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        <p class="text-gray-700 font-semibold text-lg">Tiada Data Diperolehi</p>
                      </div>
                    </td>
                  </tr>
                  <tr v-for="(upah,i) in objupah" :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="(i+1)">
                          </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="upah.tarikh">
                          </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="formatexchange(upah.upahDibayar)">
                          </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" @click="upahfunc(upah.norujukan)" 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>
              </tbody>
            </table>
          </div>
          <div v-if="selected=='rekod'">
            <table class="min-w-full leading-normal">
              <thead class="text-center">
                <tr>
                  <th class="w-1/8 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="w-1/8 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">
                    No Rujukan
                  </th>
                  <th class="w-1/8 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">
                    Jenis
                  </th>
                  <th class="w-1/8 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 Asal
                  </th>
                  <th class="w-1/8 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="w-1/8 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
                  </th>
                  <th class="w-1/8 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>
                  <tr v-if="objrekod.length === 0">
                    <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
                      <div class="flex flex-col items-center justify-center py-8">
                        <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        <p class="text-gray-700 font-semibold text-lg">Tiada Data Diperolehi</p>
                      </div>
                    </td>
                  </tr>
                  <tr v-for="(rekod,i) in objrekod" :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="(i+1)">
                          </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="rekod.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="rekod.jenistebus">
                          </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="formatexchange(rekod.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="rekod.jbg">
                          </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="rekod.t_tebus">
                          </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" @click="rekodfunc(rekod.norujukan,rekod.jenistebus,rekod.hargajualan)" data-modal-toggle="popup-modal" class="mt-2 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>
                          <button v-if="rekod.ujrah != 0" type="button" @click="rekodSAGStatements(rekod.norujukan)" data-modal-toggle="popup-modal" class="border border-green-600 text-green-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-green-600 hover:text-white transition-all duration-300">
                            <i class="fa-solid fa-box-archive"></i>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
              </tbody>
            </table>
          </div>

          </div>
          <!--footer-->
          <div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
            <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" @click="toggleModal" type="button">
              Batal
            </button>
          </div>
        </div>
      </div>
    </div>
    </transition>
    <transition
			enter-active-class="transition-all transform duration-200 ease-out"
		>
    </transition>

    <div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>

  </div>
</template>

<script>
import { createPopper } from "@popperjs/core";

const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2
});

export default {

    props: {
    placement: {
        type: String,
        default: "bottom-start"
    }
   },
  name: "modal",
  data() {
    return {
      showModal: false,
      kodcaw: '',
      norujukan:'',
      kodcaw:'',
      pinjaman:0,
      hargajualan:0,
      nilaimarhun:0,
      selected: 'bayaran',
      objbayaran:{},
      objupah:{},
      objrekod:{}
    }
  },
  methods: {
    formatexchange: function(value){
        return formatter.format(value)
    },
    toggleModal: function(){
      this.showModal = false;
    },
    getData: function(){
      this.axios.get(this.$hostname + '/api/transaction/' + this.norujukan).then(response => {
        this.objbayaran = response.data;
      });

      this.axios.get(this.$hostname + '/api/listpenebusanhistory/' + this.kodcaw,{params: {
        norujukan: this.norujukan
      }}).then(response => {
        this.objrekod = response.data;
      });

      this.axios.get(this.$hostname + '/api/ansuran/' + this.kodcaw + '/' + this.norujukan).then(response => {
        this.objupah = response.data;
      });
    },
    bayaranfunc: function(id){
      let urlroute = window.route('resit.ansuran', id)
      window.open(urlroute, '_blank');
    },
    upahfunc: function(norujukan){
      let urlroute = window.route('resit.advansur', id)
      window.open(urlroute, '_blank');
    },
    rekodfunc: function(norujukan,sttebus,hargajualan){
      let urlroute = '';
      switch(sttebus) {
        case 'P':
            urlroute = window.route('resit.tambahpinjam', norujukan)
            window.open(urlroute, '_blank');
            break;
        case 'T':

            if(hargajualan === '')
            {
              urlroute = window.route('resit.belumtebus', norujukan)
              window.open(urlroute, '_blank');
            }else{
              urlroute = window.route('resit.tebus', norujukan)
              window.open(urlroute, '_blank');
            }
            break;
        case 'A':
             urlroute = window.route('resit.belumansurans', norujukan);
            window.open(urlroute, '_blank');
            break;
        case 'S':
             urlroute = window.route('resit.tebusseparuh', norujukan)
            window.open(urlroute, '_blank');
        break;
      }
    },
    rekodSAGStatements: function(norujukan){
      let urlroute = window.route('accountstatement.rekod', norujukan)
      window.open(urlroute, '_blank');
    },
    formatDate(datetime, type) {
      if (!datetime) return '';
      
      const date = new Date(datetime);
      
      if (type === 'date') {
        // Return date only in dd/mm/yyyy format
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const year = date.getFullYear();
        return `${day}/${month}/${year}`;
      }
      
      if (type === 'time') {
        // Return time in 12-hour format with AM/PM
        let hours = date.getHours();
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        const ampm = hours >= 12 ? 'PM' : 'AM';
        
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        hours = String(hours).padStart(2, '0');
        
        return `${hours}:${minutes}:${seconds} ${ampm}`;
      }
      
      // Default: return both date and time
      const day = String(date.getDate()).padStart(2, '0');
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const year = date.getFullYear();
      
      let hours = date.getHours();
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      const ampm = hours >= 12 ? 'PM' : 'AM';
      
      hours = hours % 12;
      hours = hours ? hours : 12;
      hours = String(hours).padStart(2, '0');
      
      return `${day}/${month}/${year} ${hours}:${minutes}:${seconds} ${ampm}`;
    },
  }
}
</script>

<style>

  .modal-fade-enter,
  .modal-fade-leave-to {
    opacity: 0;
  }

  .modal-fade-enter-active,
  .modal-fade-leave-active {
    transition: opacity .5s ease;
  }
</style>