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

<template>
    <div class="container">
      <div class="flex w-full">
        <div class="xl:w-2/3 2xl:w-1/2 p-8 mx-auto">
          <!-- Tajuk -->
          <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 Barang Kes
            </span>
          </div>
  
          <!-- Borang laporan -->
          <form method="get" id="formringter" :action="Urlredirect()" target="_blank">
            <div class="rounded bg-white shadow p-6">
              
              <!-- Pilihan Tarikh -->
              <div class="pb-6">
                <div class="flex justify-center mb-4">
                  <input :value="jenisgenerate" type="hidden" name="jenis" />
                  <input :value="$kodcaw" name="kodcaw" hidden />
                  <input :value="$hostname" name="hostname" hidden />
                  <input type="hidden" name="status" :value="status" /> <!-- masih simpan status -->
  
                  <span style="background-color: #F9FAFB"
                    class="text-gray-600 border-2 rounded-l px-4 py-2 whitespace-no-wrap">Mula</span>
                  <input
                    id="tarikhmula"
                    name="datemula"
                    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 style="background-color: #F9FAFB"
                    class="text-gray-600 border-2 rounded-l px-4 py-2 whitespace-no-wrap">Hingga</span>
                  <input
                    id="tarikhhingga"
                    name="datehingga"
                    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>
              </div>
  
              <!-- Pilihan Status -->
              <div class="flex flex-col items-center mb-6">
                <!-- <label class="font-semibold text-gray-700 mb-2">Status:</label> -->
                <div class="flex space-x-6">
                  <label class="flex items-center space-x-2">
                    <input
                      type="radio"
                      value="all"
                      v-model="status"
                      class="text-yellow-600 focus:ring-yellow-500"
                    />
                    <span>Semua</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input
                      type="radio"
                      value="belum-tuntut"
                      v-model="status"
                      class="text-yellow-600 focus:ring-yellow-500"
                    />
                    <span>Belum Tuntut</span>
                  </label>
                  <label class="flex items-center space-x-2">
                    <input
                      type="radio"
                      value="dituntut"
                      v-model="status"
                      class="text-yellow-600 focus:ring-yellow-500"
                    />
                    <span>Dah Tuntut</span>
                  </label>
                </div>
              </div>
  
              <!-- Butang Action -->
              <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'
  
  export default {
    data() {
      return {
        jenisgenerate: 'none',
        kodcaw: '',
        hostname: '',
        maxDate: null,
        yesterday: null,
        selectedalasan: '',
        jenisalasan: {},
        status: 'all', // default status
      }
    },
    mounted() {
      this.setMaxDate();
    },
    created() {
      this.senaraiAlasan();
    },
    methods: {
      setMaxDate() {
        const today = new Date();
        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.laporanbarangkes');
      },
      setJenis(value) {
        this.jenisgenerate = value;
      },
      senaraiAlasan() {
        this.axios.get(this.$hostname + '/api/lookupalasan').then(response => {
          this.jenisalasan = response.data;
        });
      },
    },
    validations: {
      selectedalasan: {
        required
      }
    }
  }
  </script>
  
  <style scoped>
  select {
    min-width: 180px;
  }
  input[type="radio"] {
    accent-color: #eab308; /* warna kuning */
  }
  </style>