/**
 * 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';


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)


Alpine.start()

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

Vue.prototype.$api1 = 'http://api.arrahn'

let initial = 'KB2';
let initialhostname = 'http://api.arrahn';

const store = new Vuex.Store({
    state: { 
        $kodcaw: 'KB2',
        $hostname: 'http://api.arrahn' 
    },
    plugins: [createPersistedState()],
    mutations: { 
        update$kodcaw: function(state, newKodcaw) {
             state.$kodcaw = newKodcaw; 
        },
        update$hostname: function(state, newHostname) {
            state.$hostname = newHostname; 
        },
        reset (state) {
            state.$kodcaw = initial;
            state.$hostname = initialhostname;
        }

    }
  });

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


//Chart
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('sidebar', require('./components/Sidebar.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('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('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)

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


Vue.component('apexchart', VueApexCharts)


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