admin-erahn/resources/js/Akaun/Ansuran.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 Ansuran Pembiayaan</span>
                    </div>
                    <form method="get" id="formansuran" :action="Urlredirect()" target="_blank">
                    <div class="rounded bg-white shadow p-6">
                        <div class="pb-6">
                        <label for="username" class="font-semibold text-gray-700 block pb-1">Tarikh</label>
                            <div class="flex flex-wrap mb-12">
                                <input :value="jenisgenerate" type="hidden" name="jenis" />
                                <input :value="$kodcaw" name="kodcaw" hidden/>
                                <input :value="$hostname" name="hostname" 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" @change="dateChecking()" class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2" type="date"/>
                            </div>
                            <div class="flex justify-center mb-4">
                                <div class="mx-2 radio">
                                    <input type="radio" id="arrahnpay" name="laporanansuran" value="arrahnpay" class="hidden focus:bg-gray-500" v-model="selected">
                                    <label for="arrahnpay" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200 focus:bg-purple-500 focus:bg-purple-500 focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Arrahn Pay</label>
                                </div>
                                
                                <div class="mx-2 radio cursor-pointer">
                                    <input type="radio" id="kaunter" name="laporanansuran" value="kaunter" class="hidden focus:bg-gray-500" v-model="selected">
                                    <label for="kaunter" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200 focus:bg-purple-500 focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Kaunter (aros)</label>
                                </div>

                                  <div class="mx-2 radio cursor-pointer">
                                    <input type="radio" id="all" name="laporanansuran" value="all" class="hidden focus:bg-gray-500" v-model="selected">
                                    <label for="all" class="cursor-pointer text-gray-500 focus:bg-gray-500 hover:bg-gray-200 focus:bg-purple-500 focus:outline-none border px-10 py-4 border-solid border-gray-500 rounded">Semua</label>
                                </div>
                            </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> 
                    </div>
                    </form>
                </div>
            </div>
    </div>
</template>

<style>
.radio input:checked + label{
    border-color:#F6D860;
	background-color:#FFF1BD;
    outline:none;
}

</style>

<script>
export default {
   data(){
    return {
        jenisgenerate: 'none',
        selected: '', // ini untuk radio button
        kodcaw: ''
    }
},
    methods: {
       async generatepdf(){
            await this.setJenis('pdf');

            var tarikhMula = document.getElementById("tarikhmula");
            var tarikhHingga = document.getElementById("tarikhhingga");
            
            var tarikh1 = new Date(tarikhMula.value);
            var tarikh2 = new Date(tarikhHingga.value);
            var Difference_In_Time = tarikh2.getTime() - tarikh1.getTime();
            var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24) + 1;

                if(Difference_In_Days > 62){
    
                    Vue.swal({
                    text: 'Sila Pilih Tarikh Kurang Dari 2 Bulan',
                    icon: 'error',
                    allowEscapeKey : false,
                    showCancelButton: false,
                    showConfirmButton: true,
                    
                    
                });
              
                } else{


                    Vue.swal({
                        title: 'Memuatkan...',
                        allowEscapeKey : false,
                        allowOutsideClick: false,
                        showCancelButton: false,
                        showConfirmButton: false,
                        timer: 8000,
                    });
        
                    document.getElementById("formansuran").submit();
                }

            
        },
        async generateview(){
            await this.setJenis('view');


            var tarikhMula = document.getElementById("tarikhmula");
            var tarikhHingga = document.getElementById("tarikhhingga");
            
            var tarikh1 = new Date(tarikhMula.value);
            var tarikh2 = new Date(tarikhHingga.value);
            var Difference_In_Time = tarikh2.getTime() - tarikh1.getTime();
            var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24) + 1;

                if(Difference_In_Days > 62){
    
                    Vue.swal({
                    text: 'Sila Pilih Tarikh Kurang Dari 2 Bulan',
                    icon: 'error',
                    allowEscapeKey : false,
                    showCancelButton: false,
                    showConfirmButton: true,
                    
                    
                    });
              
                } else{

                    Vue.swal({
                        title: 'Memuatkan...',
                        allowEscapeKey : false,
                        allowOutsideClick: false,
                        showCancelButton: false,
                        showConfirmButton: false,
                        timer: 8000,
                    });

                    document.getElementById("formansuran").submit();
                }

        },
        Urlredirect: function() {
         return window.route('cetak.ansuranRangeDate')
        },
        setJenis: function(value){
            return this.jenisgenerate = value;
        },

        dateChecking(){
            var tarikhMula = document.getElementById("tarikhmula");
            var tarikhHingga = document.getElementById("tarikhhingga");
            
            var tarikh1 = new Date(tarikhMula.value);
            var tarikh2 = new Date(tarikhHingga.value);
            var Difference_In_Time = tarikh2.getTime() - tarikh1.getTime();
            var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24) + 1;

                if(Difference_In_Days > 62){
    
                    Vue.swal({
                    text: 'Sila Pilih Tarikh Kurang Dari 2 Bulan',
                    icon: 'error',
                    allowEscapeKey : false,
                    showCancelButton: false,
                    showConfirmButton: true,
                    
                    
                });
              
                } 


        }
    }
    
}
</script>