/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

import VueApexCharts from 'vue-apexcharts'
import Alpine from 'alpinejs'
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
import VueCompositionAPI from '@vue/composition-api'
import VueAxios from 'vue-axios'
import axios from 'axios'
import JwPagination from 'jw-vue-pagination'
import Toast from "vue-toastification"
import "vue-toastification/dist/index.css"
import router from './routes'
import Vuelidate from 'vuelidate'
import datetime from 'vuejs-datetimepicker';
import VueContentPlaceholders from 'vue-content-placeholders'
// import VueIframe from 'vue-iframes'
import VueFriendlyIframe from 'vue-friendly-iframe';
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

import VueHtml5Editor from 'vue-html5-editor'

import VueFlatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';

import VueExcelXlsx from "vue-excel-xlsx";

let ops = {
    // global component name
    name: "vue-html5-editor",
    // if set true,will append module name to toolbar after icon
    showModuleName: false,
    // custom icon class of built-in modules,default using font-awesome
    icons: {
        text: "fa fa-pencil",
        color: "fa fa-paint-brush",
        font: "fa fa-font",
        align: "fa fa-align-justify",
        list: "fa fa-list",
        link: "fa fa-chain",
        unlink: "fa fa-chain-broken",
        tabulation: "fa fa-table",
        image: "fa fa-file-image-o",
        hr: "fa fa-minus",
        eraser: "fa fa-eraser",
        undo: "fa-undo fa",
        "full-screen": "fa fa-arrows-alt",
        info: "fa fa-info",
    },
    //default en-us, en-us and zh-cn are built-in
    language: "en-us",
    // the modules you don't want
    hiddenModules: [],
    // keep only the modules you want and customize the order.
    // can be used with hiddenModules together
    visibleModules: [
        "text",
        "color",
        // "font",
        "align",
        // "list",
        // "link",
        // "unlink",
        // "tabulation",
        // "image",
        // "hr",
        // "eraser",
        "undo",
        "full-screen",
        // "info",
    ]
};

Vue.use(VueHtml5Editor,ops);

require('./bootstrap');

window.Vue = require('vue').default;
window.Alpine = Alpine;

Vue.use(Vuex)
const options = {
    transition: "Vue-Toastification__fade",
    position: "top-right",
    timeout: 2000,
    closeOnClick: true,
    maxToasts: 20,
    pauseOnHover: true,
    draggable: true,
    draggablePercent: 0.6,
    closeButton: "button",
    showCloseButtonOnHover: false,
    icon: true,
    newestOnTop: true
};

Vue.use(Vuelidate)
Vue.use (VueApexCharts)
Vue.use (Alpine)
Vue.use(VueCompositionAPI)
Vue.use(VueAxios, axios)
Vue.component('jw-pagination', JwPagination)
Vue.use(Toast, options)
Vue.use(datetime)
Vue.use(VueContentPlaceholders)
Vue.use(VueSweetalert2);
Vue.use(VueFriendlyIframe)
Vue.use(VueFlatPickr)
Vue.use(VueExcelXlsx)

Vue.use(require('vue-moment'));

Alpine.start()

Vue.use(require('vue-pusher'), {
    api_key: 'da67a7e1a3a138b9b28e',
    options: {
        cluster: 'ap1',
        encrypted: true,
    }
});

Vue.prototype.$api1 = process.env.MIX_API_URL + '/';
Vue.prototype.$username = document.querySelector("meta[name='user_name']").getAttribute('content');
Vue.prototype.$userroles = document.querySelector("meta[name='user_roles']").getAttribute('content');


let initial = 'KB2';

let initialhostname = process.env.MIX_API_URL + '/';
let initialtahun = new Date().getFullYear();

const store = new Vuex.Store({
    state: {
        $kodcaw: 'KB2',

        $hostname: process.env.MIX_API_URL + '/',
        $tahun: new Date().getFullYear()
    },
    plugins: [createPersistedState()],
    mutations: {
        update$kodcaw: function(state, newKodcaw) {
             state.$kodcaw = newKodcaw;
        },
        update$hostname: function(state, newHostname) {
            state.$hostname = newHostname;
        },
        update$tahun: function(state, newTahun) {
            state.$tahun = newTahun;
        },
        reset (state) {
            state.$kodcaw = initial;
            state.$hostname = initialhostname;
            state.$tahun = initialtahun;

        }

    }
  });

Vue.mixin({
    computed: {
        $kodcaw: {
            get: function () {
                return store.state.$kodcaw
            },
        },
        $hostname: {
            get: function () {
                return store.state.$hostname
            },
        },
        $tahun: {
            get: function () {
                return store.state.$tahun
            },
        }
    },
    methods:{
        setkodcaw: function(newKodcaw) {
            // console.log(newKodcaw)
            return store.commit('update$kodcaw', newKodcaw);
        },
        sethostname: function(newHostname) {
            return store.commit('update$hostname', newHostname);
        },
        settahun: function(newTahun) {
            return store.commit('update$tahun', newTahun);
        },
        setLogout: function(){
            return store.commit('reset');
        }
    }
})


//Chart
Vue.component('dashboard-component', require('./Dashboard/index.vue').default)

Vue.component('pemb-chart', require('./components/Chart/PembiayaanChart.vue').default)
Vue.component('peny-chart', require('./components/Chart/PenyelesaianChart.vue').default)
Vue.component('keun-chart', require('./components/Chart/KeuntunganChart.vue').default)

Vue.component('breadcrumb', require('./components/Breadcrumb.vue').default)
Vue.component('dashboard', require('./pages/dashboard.vue').default)
Vue.component('tunai-component', require('./components/Tunai.vue').default)
Vue.component('petibesi-component', require('./components/Petibesi.vue').default)
Vue.component('cawangan-component', require('./components/Cawangan.vue').default)
Vue.component('modal-component', require('./components/util/Modal.vue').default)
Vue.component('searchpelanggan-component', require('./components/Searchpelanggan.vue').default)
Vue.component('laporanakaun-component', require('./Akaun/Laporan.vue').default)
Vue.component('online-component', require('./Online/Online.vue').default)
Vue.component('noticelelong-component', require('./pages/NotisLelong.vue').default)
Vue.component('noticelelong2-component', require('./pages/NotisLelongFasa2.vue').default)
Vue.component('kelulusan-component', require('./Kelulusan/TableKelulusan.vue').default)

Vue.component('details-pelanggan', require('./pages/Detailspelanggan.vue').default)
Vue.component('blacklist-pelanggan', require('./pages/Blacklist.vue').default)

Vue.component('harian-component', require('./components/Analisa/Harian.vue').default)
Vue.component('tahunan-component', require('./components/Analisa/Tahunan.vue').default)
Vue.component('aging-component', require('./components/Analisa/Aging.vue').default)


//Component Berkaitan
Vue.component('square-component', require('./components/util/Clock.vue').default)
Vue.component('bilangan-component', require('./components/Chart/BilanganChart.vue').default)

Vue.component('getkodcaw-component', require('./Bajet/GetKodcaw.vue').default)

Vue.component('senaraibajet-component', require('./Bajet/Homebajet.vue').default)
Vue.component('clock-component', require('./components/util/Clock.vue').default)

//Logout
Vue.component('logout-component', require('./Logout.vue').default)

//Notify
Vue.component('notify-component', require('./components/util/Notify.vue').default)

//Permohonan
Vue.component('permohonanindex-component', require('./Permohonan/index.vue').default)
Vue.component('permohonan-component', require('./Permohonan/SenaraiMohon.vue').default)

//WTD
Vue.component('wtdindex-component', require('./WTD/index.vue').default)

//Audit
Vue.component('audit-component', require('./Audit/Home.vue').default)

//Tetapan
Vue.component('tetapan-component', require('./Tetapan/index.vue').default)
Vue.component('pengguna-component', require('./Pengguna/index.vue').default)
Vue.component('margin-component', require('./Tetapan/margin.vue').default)






Vue.component('apexchart', VueApexCharts)


const app = new Vue({
    router,
    el: '#app',
    store
});