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

<template>
    <div class="container">
         <div class="flex w-100%">
             <div class="xl:w-10/9 2xl:w-8/9 p-12 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 Pendahuluan & Serahan</span>
                 </div>
 
                 <form method="get" id="formpendser" :action="Urlredirect()" target="_blank">
                     <input :value="$kodcaw" name="kodcaw" hidden/>
                     <div class="rounded bg-white shadow p-6">
                         <div class="pb-6">
                             <div class="flex place-content-center mb-2">
                                 <input :value="jenisgenerate" type="hidden" name="jenis" />
                                 <input :value="$hostname" name="hostname" hidden/>
                                 <input :value="$kodcaw" name="kodcaw" hidden/>
 
                                 <span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Mula</span>
                                 <input id="tarikhmula" name="datemula" class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2" type="date" />
                                 <span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Hingga</span>
                                 <input id="tarikhhingga" name="datehingga" class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2" type="date" />
                             </div>
                         </div> 
 
                         <!-- Dropdown Selection -->
                         <div class="mt-6 text-center">
                             <label for="laporanType" class="text-gray-700 font-semibold block mb-2">Pilih Jenis Laporan:</label>
                             <select id="laporanType" v-model="selected" name="radpendser" class="border border-gray-500 rounded px-4 py-2 w-full sm:w-auto">
                                 <option value="pendahuluan">Pendahuluan Daripada HQ</option>
                                 <option value="pendahuluanv3">Pendahuluan Daripada V2</option>
                                 <option value="serahan">Serahan Kepada HQ</option>
                                 <option value="serahankepadav3">Serahan Kepada V3</option>
                                 <option value="online">Serahan Kepada HQ (arrahnPay)</option>
                                 <option value="serahanlelong">Serahan Kepada HQ (arrahnBid)</option>
                                 <option value="serahanonline">Semua Serahan</option>
                                 <option value="all">Semua</option>
                             </select>
                         </div>
 
                         <div class="flex justify-end mt-10">
                             <!-- PDF Button -->
                             <button @click.prevent="generatepdf" class="mr-2 border border-yellow-600 text-yellow-600 font-montserrat py-2 px-6 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300 w-full sm:w-auto">
                                 <i class="fas fa-file-pdf mr-2"></i>PDF
                             </button>
 
                             <!-- View Button -->
                             <button @click.prevent="generateview" class="mr-2 border border-yellow-600 text-yellow-600 font-montserrat py-2 px-6 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300 w-full sm:w-auto">
                                 <i class="fas fa-eye mr-2"></i>View
                             </button>
 
                             <!-- Excel Button -->
                             <button @click.prevent="generateExcel" class="border border-green-600 text-green-600 font-montserrat py-2 px-6 font-medium rounded-xl hover:bg-green-600 hover:text-white transition-all duration-300 w-full sm:w-auto">
                                 <i class="fas fa-file-excel mr-2"></i>Excel
                             </button>
                         </div>
                     </div>
                 </form>
             </div>
         </div>
     </div>
 </template>
 
 <script>
 export default {
     data() {
         return {
             jenisgenerate: 'none',
             selected: '',  // This now binds to the dropdown
             kodcaw: ''
         }
     },
     methods: {
         async generatepdf() {
             await this.setJenis('pdf');
 
             Vue.swal({
                 title: 'Memuatkan...',
                 allowEscapeKey: false,
                 allowOutsideClick: false,
                 showCancelButton: false,
                 showConfirmButton: false,
                 timer: 8000,
             });
             document.getElementById("formpendser").submit();
         },
         async generateview() {
             await this.setJenis('view');
 
             Vue.swal({
                 title: 'Memuatkan...',
                 allowEscapeKey: false,
                 allowOutsideClick: false,
                 showCancelButton: false,
                 showConfirmButton: false,
                 timer: 8000,
             });
             document.getElementById("formpendser").submit();
         },
         async generateExcel() {
             await this.setJenis('excel');
 
             Vue.swal({
                 title: 'Memuatkan...',
                 allowEscapeKey: false,
                 allowOutsideClick: false,
                 showCancelButton: false,
                 showConfirmButton: false,
                 timer: 8000,
             });
             document.getElementById("formpendser").submit();
         },
         Urlredirect() {
             return window.route('cetak.pendser') // Ensure your backend supports Excel export
         },
         setJenis(value) {
             this.jenisgenerate = value;
         }
     }
 }
 </script>