@include("lessons.form",["simple"=>true])
<template id="lessons">
    <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>{{__("Topics")}}</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>

                                <v-data-table
                                    :elevation="0"
                                    v-model="selected"
                                    :headers="headers"
                                    :items="items"
                                    item-key="id"
                                    select-all="primary"
                                    :pagination.sync="pagination"
                                    :total-items="total"
                                    :loading="loading"

                                >

                                    <template slot="items" slot-scope="props">
                                        <td>
                                            <v-checkbox
                                                v-model="props.selected"
                                                color="primary lighten-2"
                                                hide-details
                                            ></v-checkbox>
                                        </td>

                                        <td>@{{ props.item.name }}</td>
                                        <td>@{{ props.item.type }}</td>

                                        <td>
                                            <v-btn icon @click="editItem(props.item)"
                                                   title="{{__("Edit")}}">
                                                <v-icon small color="primary">edit</v-icon>
                                            </v-btn>
                                            <v-btn icon :href="'{{route("lessons.show","")}}/'+props.item.id"
                                                   title="{{__("View")}}">
                                                <v-icon small color="info">visibility</v-icon>
                                            </v-btn>

                                        </td>
                                    </template>

                                    <template slot="no-data">
                                        <v-alert :value="true" color="error" icon="warning">
                                            {{__("components.Sorry, nothing to display here")}} 😞
                                        </v-alert>

                                    </template>
                                    <v-alert slot="no-results" :value="true" color="error" icon="warning">
                                        @{{ search }} {{__('components.not found')}} 😥
                                    </v-alert>
                                </v-data-table>
                            </v-card>
                        </v-flex>
                    </v-layout>
                    {{--<v-layout row wrap pa-2>
                        <v-flex xs12>

                            <draggable v-model="items"
                                       @end="dragEnd" draggable=".draggable" handle=".handle">


                                    <v-card v-for="(item,index) in items" :key="item.id" elevation="1" class="grey lighten-3 draggable" >
                                        <v-layout row wrap>
                                            <v-flex shrink pl-2 pr-2>@{{ index + 1 }}
                                            </v-flex>
                                            <v-divider vertical></v-divider>
                                            <v-flex grow><v-icon class="handle" style="cursor: move">drag_indicator</v-icon> @{{ item.name }}</v-flex>
                                            <v-flex shrink>
                                                <v-icon small hover @click="editItem(item)">edit</v-icon>
                                               <v-icon small hover  @click="deleteItem(item)">delete</v-icon>
                                            </v-flex>
                                        </v-layout>
                                    </v-card>




                            </draggable>

                        </v-flex>
                        --}}{{--<v-flex xs12>
                            <v-btn color="primary" small block @click="newItem()">Add Learning Object</v-btn>
                        </v-flex>--}}{{--
                    </v-layout>--}}
                </v-card>
            </template>

        </v-flex>
        <v-dialog v-model="dialog" persistent >
            <v-card>
                <v-card-title
                    class="grey lighten-4  title"
                >
                    <span v-if="item.id">@{{ item.name }}</span>
                    <span v-else>{{__("Add Content")}}</span>
                    <v-spacer></v-spacer>
                    <v-btn small icon @click="dialog=false">
                        <v-icon >close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                    <lesson :module="module" :lesson="item" :event="eventListener"/>
                </v-container>

            </v-card>
        </v-dialog>



        <v-dialog v-model="dialog_select_type" >
            <v-card>
                <v-card-title
                    class="grey lighten-4  title"
                >

                    <span>{{__("Add Content")}}</span>
                    <v-spacer></v-spacer>
                    <v-btn small icon @click="dialog_select_type=false">
                        <v-icon >close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                   <v-layout row wrap>
                       <v-flex xs12>
                           <h4 class="mx-auto text-center text-xs-center align-center">Please select a content type</h4>
                       </v-flex>

                       <v-flex xs12 class="mx-auto text-center text-xs-center align-center">
                           <v-btn flat outline small color="primary" @click="selectType('Video')">Video</v-btn>
                           <v-btn flat outline small color="primary" @click="selectType('File')">File</v-btn>
                           <v-btn flat outline small color="primary" @click="selectType('Text')">Content</v-btn>
                       </v-flex>
                   </v-layout>
                </v-container>

            </v-card>
        </v-dialog>
        <v-dialog v-model="view_dialog">
            <v-card>
                <v-card-title
                    class="grey lighten-4 py-4 title"
                >
                    <span>@{{ item.name }}</span>
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                    <lesson-info :lesson="item" :event="eventListener"/>
                </v-container>

            </v-card>
        </v-dialog>

        <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 Lessons = {
        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>