@include('courses.course_card')
<template id="catalog">
    <v-layout justify-center>
        <v-flex>

            <template>
                <v-card flat>
                    <v-toolbar

                        color="grey"
                        class="lighten-2"
                        light
                        flat

                    >
                        <v-toolbar-title class="hidden-sm-and-down">@{{ title }}</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-text-field
                            v-model="search"
                            append-icon="search"
                            label="{{__("Search")}}"
                            single-line
                            :loading="loading"
                            clearable
                            clear-icon="close"
                            :clear-icon-cb="clearSearch"
                        ></v-text-field>
                        <v-btn v-if="modal" small icon @click="event('close',true)">
                            <v-icon small>close</v-icon>
                        </v-btn>
                    </v-toolbar>

                    <v-layout row pb-2>
                        <v-flex xs12 shrink v-if="filter">
                            <v-card flat :elevation="0">
                                <v-toolbar card prominent dense>
                                    <v-btn icon @click="filter = !filter"
                                           title="{{__("Activate")}}">
                                        <v-icon>arrow_left</v-icon>
                                    </v-btn>
                                    <span v-if="filter">Hide Filter</span>

                                </v-toolbar>

                                <v-divider></v-divider>

                                <v-layout v-if="filter" pa-2 wrap>
                                    <v-flex xs12>
                                        <v-radio-group label="Course Type:" v-model="type" inline>
                                            <v-radio label="All" style="word-break: keep-all" :value=null></v-radio>
                                            <v-radio label="Self-directed" style="word-break: keep-all"
                                                     value="self"></v-radio>
                                            <v-radio label="Instructor led" style="word-break: keep-all"
                                                     value="instructor"></v-radio>
                                        </v-radio-group>
                                    </v-flex>

                                </v-layout>
                            </v-card>
                        </v-flex>
                        <v-divider v-if="filter" vertical="true"></v-divider>
                        <v-flex :class="{xs10:filter,xs12:!filter}" grow>
                            <v-card flat :elevation="0">

                                <v-toolbar card prominent dense>
                                    <v-btn small v-if="!filter" icon @click="filter = !filter"
                                           title="{{__("Filter")}}">
                                        <v-icon>arrow_right</v-icon>
                                    </v-btn>
                                    <span v-if="!filter">Filter</span>
                                    <v-spacer></v-spacer>
                                    <v-btn icon small @click="display = 'grid'">
                                        <v-icon :color="display==='grid'?'primary':'grey'">dashboard</v-icon>
                                    </v-btn>
                                    <v-btn icon small @click="display = 'list'">
                                        <v-icon :color="display==='list'?'primary':'grey'">list</v-icon>
                                    </v-btn>
                                </v-toolbar>

                                <v-divider></v-divider>

                                <v-layout row wrap :loading="loading" justify-center class="center-align">
                                    <template v-for="(course,index) in items">
                                        <v-flex my-1
                                                mx-1
                                                xs12
                                                md4
                                                class="mx-auto"
                                                :class="{sm5:display==='grid'}"
                                                v-if="type === null || type === 'self'"
                                        >
                                            {{--Insert Course Card Here --}}
                                            <course-card :course="course" :display="display"></course-card>
                                        </v-flex>
                                        <v-flex my-1
                                                mx-1
                                                xs12
                                                md4
                                                class="mx-auto"
                                                :class="{sm5:display==='grid', md3:display==='grid'}"
                                                v-for="mastermind in course.masterminds"
                                                v-if="mastermind.fee > 0 && (type === null || type === 'instructor')"
                                        >
                                            <course-card :course="course" :mastermind="mastermind" :display="display"/>
                                        </v-flex>
                                    </template>

                                    <template>
                                        <v-flex xs12 class="text-xs-center">
                                            <v-pagination
                                                v-model="pagination.page"
                                                :length="pages"
                                                lighth
                                                total-visible="3"
                                            >

                                            </v-pagination>

                                        </v-flex>
                                        <v-flex xs12 style="display: none;">

                                            <v-data-table :hideHeaders="true" :items="items"
                                                          :pagination.sync="pagination"
                                                          :total-items="total">

                                            </v-data-table>
                                        </v-flex>
                                    </template>
                                </v-layout>


                            </v-card>
                        </v-flex>
                    </v-layout>
                </v-card>
            </template>
        </v-flex>


        <v-dialog v-model="confirm" width="300px">
            <v-card>
                <v-card-title
                    class="grey lighten-4 py-4 title"
                >
                    {{__("components.Confirm")}}
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                    <v-layout row wrap>
                        <v-flex xs12 align-center justify-space-between>
                            <v-layout align-center>
                                @{{confirmObject.text}}
                            </v-layout>
                        </v-flex>

                    </v-layout>
                </v-container>
                <v-card-actions>


                    <v-btn flat @click="confirm = !confirm">{{__("components.Cancel")}}</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn flat color="primary" :loading="loading"
                           @click="actionOnMultiple(confirmObject.action)">{{__("components.Continue")}}
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-snackbar
            v-model="snackbar.active"
            :color="snackbar.color"
        >
            @{{ snackbar.text }}
            <v-btn

                flat
                @click="snackbar.active = false"
            >
                Close
            </v-btn>
        </v-snackbar>
    </v-layout>


</template>
<script>

    const Catalog = {
        template: "#catalog",
        components: {CourseCard},
        data: () => ({
            filter: false,
            display: SETTING.catalog_display,
            type: null,
            search: "",
            total: 0,
            loading: false,
            pagination: {},


            fab: false,
            dialog: false,
            view_dialog: false,
            schedules_dialog: false,
            confirm: false,
            confirmObject: {action: '', text: '', active: false},
            snackbar: {active: false, text: "", color: "primary"},
            old_course: "-111111111111111",
            table_items: [
                'Validate', 'Suspend', 'Delete'
            ],

            selected: [],
            selectedBills: [],
            headers: [
                {text: '{{__("Course")}}', value: 'course_id'},
                {text: '{{__("Start date")}}', value: 'start_date'},
                {text: '{{__("End date")}}', value: 'end_date'},
                {text: '{{__("No students")}}', value: 'max_update'},
                {text: '{{__("Actions")}}', sortable: false},
            ],
            form: {},
            item: {},
            items: [],
            defaultItem: {},
            settings: {pagination: {page: 1}},
            current_page: null,

            print_date: new Date().toISOString().substr(0, 7),
            print_modal: false,
            month_modal: false
        }),
        props: {
            source: String,
            context: Object,
            course: Object,
            modal: {
                type: Boolean,
                default: false,
            },
            url: {
                type: String,
                default: "{{route("catalog")}}",
            },
            title: {
                type: String,
                default: "Course Catalog",
            },
            select: {
                type: Boolean,
                default: false,
            },
            event: {
                type: Function,
                default: function (event, data) {
                }
            },
        },
        updated() {
            if (this.course && this.course.id != null && this.course.id !== this.old_course) {
                this.$nextTick(function () {
                    this.getData().then(data => {
                        this.items = data.items;
                        this.total = data.total;
                    });
                    this.old_course = this.course.id;
                });

            }

        },
        computed: {
            pages() {
                if (this.pagination.rowsPerPage == null ||
                    this.total == null
                ) return 0;

                return Math.ceil(this.total / this.pagination.rowsPerPage)
            },
            params(nv) {
                return {
                    ...this.pagination,
                    query: this.search
                };
            },

        },
        watch: {
            params: {
                handler() {
                    if(this.search.trim().length > 2){
                        this.getData().then(data => {
                            this.items = data.items;
                            this.total = data.total;
                        });
                    }

                },
                deep: true
            },
        },
        mounted() {

            if (localStorage.getItem('settings')) this.settings = JSON.parse(localStorage.getItem('settings')) || this.settings;

            this.pagination = {rowsPerPage: 12, page: 1};
            this.getData().then(data => {
                this.items = data.items;
                this.total = data.total;
            });
        },
        methods: {
            eventListener(event, data) {
                switch (event) {
                    case "mastermind":
                        this.pushItem(data);
                        break;
                    case "close_schedules":
                        this.schedules_dialog = false;
                        break;
                    default:
                        (this.event)(event, data);
                        break;
                }
            },
            clearSearch(){
                this.search="";
                this.getData().then(data => {
                    this.items = data.items;
                    this.total = data.total;
                });
            },
            async getData() {

                this.loading = true;


                return new Promise((resolve, reject) => {
                    var _this = this;
                    const rowsPerPage = this.pagination.rowsPerPage;
                    const page = this.pagination.page;
                    // get by search keyword
                    axios.get(this.url, {
                        params: {
                            term: this.search,
                            orderBy: this.pagination.sortBy,
                            page: this.pagination.page,
                            direction: this.pagination.descending ? "DESC" : "ASC",
                            per_page: this.pagination.rowsPerPage
                        }
                    })
                        .then(res => {
                            let items = res.data.data;


                            const total = res.data.total;
                            this.loading = false;
                            var pagination = {
                                page: res.data.current_page,
                                rowsPerPage:
                                res.data.per_page,
                                totalItems:
                                total
                            };

                            resolve({
                                items,
                                total,
                                pagination
                            })

                        })
                        .catch(err => console.log(err))
                        .finally(() => _this.loading = false);
                })


            },


            newItem() {

                this.$nextTick(function () {
                    this.item = {};
                    this.dialog = true;
                })

            },
            updateItems() {
                if (this.selected.length == 0) {
                    this.toast("{{__("components.Select items")}}", "red");
                    return false;
                }
                this.update_dialog = true;
            },
            editItem(item) {

                this.item = item;
                this.dialog = true;
            },
            manageItem(item) {
                this.item = item;
                this.schedules_dialog = true;
            },
            viewItem(item) {

                this.item = item;
                this.view_dialog = true;
            },
            editPayment(item) {

                this.payment = item;
            },
            deleteItems() {
                if (this.selected.length !== 0) {
                    this.confirmObject.text = "{{__("components.Are you sure to delete")}} " + this.selected.length + " masterminds";
                    this.confirmObject.action = "delete";
                    this.confirm = true;
                }

            },


            actionOnMultiple(action) {
                if (this.selected.length === 0) {
                    this.snackbar.text = "{{__("components.Select items")}}";
                    this.snackbar.color = "dark";
                    this.snackbar.active = true;
                    return false;
                }

                let _this = this;
                let IDS = [];
                for (let i = 0; i < this.selected.length; i++) {
                    IDS.push(this.selected[i].id);
                }

                this.loading = true;

                axios.post('/masterminds/action/' + action, {ids: IDS})
                    .then(response => {

                        if (response.data) {
                            let data = response.data;

                            if (action == "delete") {
                                for (let i = 0; i < IDS.length; i++) {
                                    _this.items.splice(_this.getIndex(_this.items, "id", IDS[i]), 1);
                                }
                            } else {
                                for (let i = 0; i < data.length; i++) {
                                    let object = data[i];
                                    let index = _this.getIndex(_this.items, "id", object.id);

                                    if (index > -1) {
                                        Vue.set(_this.items, index, object);
                                    } else {
                                        _this.items.unshift(object);
                                    }
                                }
                            }
                            _this.confirm = false;
                            _this.selected = [];
                            this.loading = false;
                        } else {
                            this.snackbar.text = "{{__("components.An error occurred")}}";
                            this.snackbar.color = "red";
                            this.snackbar.active = true;
                            _this.confirm = false;
                            this.loading = false;
                        }
                    });
            },


            /*
                format tweet created_at date to a nice string date
                 */
            formatDate(date_string) {
                var REFERENCE = moment(date_string);
                var TODAY = moment();
                var YESTERDAY = moment().subtract(1, 'day');
                /*
                if the time is creater than a day show the month and day
                 */
                if (moment(date_string).isSame(TODAY, 'd') || moment(date_string).isSame(YESTERDAY, 'd')) {
                    return moment(date_string).fromNow()
                } else {
                    return REFERENCE.format("MMM DD")
                }

                return
            },
            /*
                method to get index of an item in an array
                using a field and a value of comparison
                 */
            getIndex(items, field, value) {
                for (var i = 0; i < items.length; i++) {
                    if (items[i][field] == value) {
                        return i;
                    }
                }
                return -1;
            },
            /*
               method to get an item in an array
               using a field and a value of comparison
                */
            getItem(items, field, value) {
                for (var i = 0; i < items.length; i++) {
                    if (items[i][field] == value) {
                        return items[i];
                    }
                }
                return false;
            },
            pushItem(item) {


                for (var i = 0; i < this.items.length; i++) {
                    if (item.id === this.items[i].id) {
                        Vue.set(this.items, i, item);
                        return true;
                    }
                }
                this.items.unshift(item)

                this.dialog = false;
            },
            toast(message, color) {

                this.snackbar.text = message;
                this.snackbar.color = color;
                this.snackbar.active = true;


            },
            close() {
                this.dialog = false
                setTimeout(() => {
                    this.item = Object.assign({}, this.defaultItem)

                }, 300)
            },
        },
    }
</script>