require('./bootstrap');
const routes = require('./routes');
import Vue from 'vue';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
import 'survey-vue/survey.css';
import 'survey-core/defaultV2.min.css';



// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import moment from 'moment';
import VueRouter from 'vue-router';
import FooterWidget from './components/admin/widgets/FooterWidget';
import NavbarWidget from './components/admin/widgets/NavbarWidget';
import SidebarWidget from './components/admin/widgets/SidebarWidget';
import { DataTables } from 'vue-data-tables'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import lang from 'element-ui/lib/locale/lang/es';
import locale from 'element-ui/lib/locale';
import VueDatePicker from '@mathieustan/vue-datepicker';
import '@mathieustan/vue-datepicker/dist/vue-datepicker.min.css';

const uniqueId = require('lodash/uniqueId');
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

locale.use(lang)
const PluginLaravelPermissions = {
    install(Vue, options) {
        Vue.prototype.LaravelPermission = window.LaravelPermission;
    },
}

const PluginAccessToken = {
    install(Vue, options) {
        Vue.prototype.AccessToken = window.AT;
    },
}

const PluginUserData = {
    install(Vue, options) {
        Vue.prototype.UserData = window.localStorage.getItem('userDataIF') ? JSON.parse(window.localStorage.getItem('userDataIF')) : null;
    },
}

Vue.filter('formatDate', function (value) {
    if (value) {
        return moment(String(value)).format('DD/MM/YYYY hh:mm A')
    }
});

Vue.filter('formatDateSimple', function (value) {
    if (value) {
        return moment(String(value)).format('DD/MM/YYYY')
    }
});

Vue.use(VueDatePicker);
Vue.use(ElementUI);
Vue.use(DataTables);
Vue.use(VueRouter);
Vue.use(PluginLaravelPermissions);
Vue.use(PluginAccessToken);
Vue.use(PluginUserData);
Vue.use(Vuetify)

Vue.prototype.$appName = 'Panel de Administración';

const router = new VueRouter({
    routes: routes.routes,
    mode: 'history',
    history: true,
    linkActiveClass: "active"
});

axios.interceptors.request.use((config) => {

    if (config.headers.Authorization && ['get', 'post', 'put', 'delete'].indexOf(config.method) !== -1) {
        if (config.headers.Authorization != '' && config.url.indexOf(window.location.origin) == -1 && config.url.indexOf("/") !== 0) {
            config.headers.Authorization = config.headers.Authorization.indexOf('Bearer') === 0 ? config.headers.Authorization : 'Bearer ' + config.headers.Authorization;
        }
    }
    jQuery('.preloader').css({ 'height': '100%', 'background-color': 'rgba(0, 0, 0, 0.5)' }).show();
    jQuery('.preloader img').show();
    return config;
}, (error) => {
    jQuery('.preloader').hide().css({ 'height': '0' });
    jQuery('.preloader img').hide();
    return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
    jQuery('.preloader').hide().css({ 'height': '0' });
    jQuery('.preloader img').hide();
    return response;
}, (error) => {
    jQuery('.preloader').hide().css({ 'height': '0' });
    jQuery('.preloader img').hide();
    return Promise.reject(error);
});

const app = new Vue({
    el: '#app',
    router: router,
    vuetify: new Vuetify(),
    data: {},
    components: {
        NavbarWidget,
        FooterWidget,
        SidebarWidget,
        VueDatePicker,
    }
});