@include("users.purchases")
<template id="Payments">
    <v-layout justify-center>
        <v-flex>
            <template>
                <v-card flat pa-2>
                    <v-toolbar

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

                    >
                        <v-toolbar-title>{{__("Purchases")}}</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-text-field
                            v-model="search"
                            append-icon="search"
                            label="{{__("Search")}}"
                            single-line

                        ></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 xs10 offset-xs1>
                            <v-card flat :elevation="0" class="card--flex-toolbar">
                                <v-toolbar card prominent dense>


                                    {{--<v-btn @click="newItem()" small outline color="primary"
                                           title="{{__("Add Content")}}">
                                        <span>Add Content</span>

                                    </v-btn>


                                    <v-spacer></v-spacer>


                                    <v-btn :disabled="selected.length==0" icon @click="activateItems()"
                                           title="{{__("Activate")}}">
                                        <v-icon color="success">check</v-icon>
                                    </v-btn>
                                    <v-btn :disabled="selected.length==0" icon @click="suspendItems()"
                                           title="{{__("Deactivate")}}">
                                        <v-icon color="red">close</v-icon>
                                    </v-btn>
                                    <v-btn :disabled="selected.length==0" icon @click="deleteItems()"
                                           title="{{__("components.Delete")}}">
                                        <v-icon color="red">delete</v-icon>
                                    </v-btn>--}}
                                </v-toolbar>

                                <v-divider></v-divider>

                                <purchases :event="eventListener" title="Purchases" url="{{route("users.purchases",Auth::id())}}"></purchases>
                            </v-card>
                        </v-flex>
                    </v-layout>

                </v-card>
            </template>

        </v-flex>


    </v-layout>


</template>
<script>

    const Payments = {
        template: "#lessons",
        components: {Lesson},
        data: () => ({
            total: 0,
            loading: true,
            pagination: {rowsPerPage: 10, page: 1},
            fab: false,
            dialog: false,
            dialog_select_type: false,
            dialog_assessment: false,
            view_dialog: false,
            confirm: false,
            confirmObject: {action: '', text: '', active: false},
            snackbar: {active: false, text: "", color: "primary"},
            search: "",

            table_items: [
                'Validate', 'Suspend', 'Delete'
            ],

            selected: [],
            selectedBills: [],
            headers: [
                {text: '{{__("Name")}}', value: 'name'},
                {text: '{{__("Type")}}', value: 'type'},
                {text: '{{__("Actions")}}', sortable: false},
            ],
            form: {},
            item: {},
            items: [],
            defaultItem: {},
            settings: {pagination: {page: 1}},


            print_date: new Date().toISOString().substr(0, 7),
            print_modal: false,
            month_modal: false,
            step:1,
        }),
        props: {
            source: String,
            module: Object,

            modal: {
                type: Boolean,
                default: false,
            },
            url: {
                type: String,
                default: "",
            },
            store_url: {
                type: String,
                default: "{{route("lessons.store")}}",
            },
            select: {
                type: Boolean,
                default: false,
            },
            event: {
                type: Function,
                default: function (event, data) {
                }
            },
        },
        computed: {
            pages() {
                if (this.pagination.rowsPerPage == null ||
                    this.pagination.totalItems == null
                ) return 0;

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

        },
        watch: {
            params: {
                handler() {
                    this.getData().then(data => {
                        this.items = data.items;
                        this.total = data.total;
                    });
                },
                deep: true
            },
        },
        mounted() {


        },
        methods: {
            selectType(type){
              this.item.type = type;
                this.dialog_select_type = false;
                if(this.item.type === "Assessment"){
                /*    this.item.questions = [];*/
                    this.item.module_id = this.module.id;
                    this.step = 1;
                    this.dialog_assessment = true;
                }else{
                    this.dialog = true;
                }

            },
            eventListener(event, data) {
                switch (event) {
                    case "lesson":
                        this.pushItem(data);
                        this.item = data;
                        break;
                    case "close_assessment":
                        this.dialog_assessment = false;
                        break;
                    default:
                        (this.event)(event, data);
                        break;
                }
            },
            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
                    if (this.url.trim().length < 2) return false;
                    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;
                            resolve({
                                items,
                                total
                            })

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


            },
            dragEnd(){


                let IDS = [];
                for(var i =0; i<this.items.length;i++){
                    IDS.push(this.items[i].id);
                }
                axios.post("{{route("module.order","")}}/"+this.module.id,{lessons:IDS})
                    .then(response => {

                    }).catch( error => {
                    (this.event)("toast", {message:"Unable to sort",color:"red"});
                })
            },

            newItem() {

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

                this.item = item;
                if(this.item.type === "Assessment"){
                    this.step = 1;
                    this.dialog_assessment = true;
                }else{
                    this.dialog = true;
                }

            },
            selectItem(item) {
                this.item = item;
                (this.event)("lesson_selected", item);
                (this.event)("close", true);
            },
            viewItem(item) {

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

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

            },
            deleteItems() {
                if (this.selected.length !== 0) {
                    this.confirmObject.text = "{{__("components.Are you sure to delete")}} " + this.selected.length + " lessons";
                    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('/lessons/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.push(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>