admin-erahn/resources/js/Akaun/LaporanLelong.vue

<template>
    <div class="container">
         <div class="flex w-full">
             <div class="xl:w-2/3 2xl:w-1/2 p-8 mx-auto">
                 <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                     <router-link to="/akaunhome">
                         <i class="fas fa-backspace text-white"></i>
                     </router-link>
                     <span class="text-center mx-auto text-white font-bold">Laporan Lelong</span>
                 </div>
 
                 <form method="get" id="formringter" :action="Urlredirect()" target="_blank">
                     <div class="rounded bg-white shadow p-6">
                         <div class="pb-6">
                             <div class="flex justify-center mb-4">
                                 <input :value="jenisgenerate" type="hidden" name="jenis" />
                                 <input :value="this.$kodcaw" name="kodcaw" hidden />
                                 <input :value="this.$hostname" name="hostname" hidden />
                                 <input :value="selectedbatchlel" name="batchno" hidden />
 
                                 <span class="text-gray-600 border-2 rounded-l px-4 py-2 whitespace-no-wrap">Mula</span>
                                 <input v-model="tarikhmula" id="tarikhmula" name="tarikhmula" class="border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2" type="date" min="2023-01-01" :max="maxDate"/>
 
                                 <span class="text-gray-600 border-2 rounded-l px-4 py-2 whitespace-no-wrap">Hingga</span>
                                 <input v-model="tarikhhingga" id="tarikhhingga" name="tarikhhingga" class="border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2" type="date" min="2023-01-01" :max="maxDate"/>
                             </div>
                             
                          <!-- Batch Lelong Selection -->
                            <select name="batchno" v-model.trim="selectedbatchlel" class="w-full p-2 rounded-md border bg-white border-gray-400 focus:outline-none focus:ring-1 ring-cyan-500 uppercase" :disabled="filteredBatchlel.length === 0">
                                <option value="" selected disabled hidden>
                                    {{ filteredBatchlel.length === 0 ? 'Tiada Lelongan' : 'Sila Pilih Batch Lelong' }}
                                </option>
                                <option v-for="(slt, i) in filteredBatchlel" :key="i" :value="slt.batchno">
                                    Batch No: {{ slt.batchno }} / Tarikh: {{ formatDate(slt.tarikh) }}
                                </option>
                            </select>

                            <!-- Show message if no batch numbers available -->
                            <p v-if="filteredBatchlel.length === 0" class="text-red-500 font-semibold mt-2">
                                Tiada Lelongan dalam tarikh yang dipilih.
                            </p>
                         </div> 
 
                         <div class="flex justify-end mt-10">
                             <button @click.prevent="generatepdf" class="mr-2 border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">
                                 <i class="fas fa-file-pdf mr-2"></i>PDF
                             </button>
                             <button @click.prevent="generateview" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">
                                 <i class="fas fa-eye mr-2"></i>View
                             </button>
                         </div>
                     </div>
                 </form>
             </div>
         </div>
     </div>
 </template>
 
 <script>
 import { required } from 'vuelidate/lib/validators'
 import axios from 'axios';
 
 export default {
    props: {
        kodcaw: String // Ensure kodcaw is received
    },
     data() {
         return {
             jenisgenerate: 'none',
             kodcaw: this.$kodcaw,
             maxDate: null,
             tarikhmula: '',
             tarikhhingga: '',
             selectedbatchlel: '',
             jenisbatchlel: [],
            //  hostname: window.location.origin 
         };
     },
     mounted() {
         this.setMaxDate();
     },
     created() {
         console.log("kodcaw from props:", this.$kodcaw); // Should not be null
         this.senaraibatchlel();
     },
     methods: {
         setMaxDate() {
             const today = new Date();
             today.setDate(today.getDate() - 1);
             this.maxDate = today.toISOString().split('T')[0];
         },
         async generatepdf() {
             await this.setJenis('pdf');
             Vue.swal({
                 title: 'Memuatkan...',
                 allowEscapeKey: false,
                 allowOutsideClick: false,
                 showCancelButton: false,
                 showConfirmButton: false,
                 timer: 8000,
             });
             document.getElementById("formringter").submit();
         },
         async generateview() {
             await this.setJenis('view');
             Vue.swal({
                 title: 'Memuatkan...',
                 allowEscapeKey: false,
                 allowOutsideClick: false,
                 showCancelButton: false,
                 showConfirmButton: false,
                 timer: 8000,
             });
             document.getElementById("formringter").submit();
         },
         Urlredirect() {
            return window.route('cetak.laporanlelong');
         },
         setJenis(value) {
             this.jenisgenerate = value;
         },
         async senaraibatchlel() {
            try {
                const kodcawValue = this.$kodcaw || ''; // Ensure kodcaw is valid
                console.log(`Fetching batch lelong data from: ${this.hostname}/api/lookupbatchlel/${kodcawValue}`);
                console.log("kodcaw before API call:", this.$kodcaw);

                const response = await axios.get(`${this.$hostname}/api/lookupbatchlel/${kodcawValue}`);

                if (!response.data || response.data.length === 0) {
                    throw new Error("No data received.");
                }

                this.jenisbatchlel = response.data;
            } catch (error) {
                console.error("Error fetching batch lelong:", error);
                Vue.swal({
                    title: "Error!",
                    text: "Failed to fetch batch lelong data. Please try again later.",
                    icon: "error",
                });
            }
        },
         formatDate(date) {
             const d = new Date(date);
             return d.toLocaleDateString('ms-MY', { day: '2-digit', month: '2-digit', year: 'numeric' });
         }
     },
     computed: {
        filteredBatchlel() {
            if (!Array.isArray(this.jenisbatchlel)) {
                console.error("jenisbatchlel is not an array:", this.jenisbatchlel);
                return [];
            }

            // If no date is selected, show all batches
            if (!this.tarikhmula && !this.tarikhhingga) {
                return this.jenisbatchlel;
            }

            // Convert input dates to JavaScript Date objects
            const fromDate = this.tarikhmula ? new Date(this.tarikhmula) : null;
            const toDate = this.tarikhhingga ? new Date(this.tarikhhingga) : null;

            return this.jenisbatchlel.filter(batch => {
                const batchDate = new Date(batch.tarikh);

                let isWithinDateRange = true;
                if (fromDate) isWithinDateRange = batchDate >= fromDate;
                if (toDate) isWithinDateRange = isWithinDateRange && batchDate <= toDate;

                return isWithinDateRange;
            });
        }
    },
    watch: {
        tarikhmula() {
            this.selectedbatchlel = ''; // Reset batch selection when date changes
        },
        tarikhhingga() {
            this.selectedbatchlel = ''; // Reset batch selection when date changes
        }
    }
 };
 </script>