@extends('layouts.main')

@section("content")
    <page-content :context="context"/>
@endsection
@section("components_declarations")
    @include("courses.form")
    @include("courses.course_view_btn")

    <template id="page-content">
        <v-content>
            <v-container fluid fill-height>
                <v-layout justify-center>
                    <v-flex>
                        <template>
                            <v-card flat>
                                <v-toolbar

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

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

                                    ></v-text-field>
                                </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>

                                                @if(Auth::user()->role->name == "instructor")
                                                <v-btn href="{{route("courses.create")}}" small outline
                                                       title="{{__("New Course")}}">
                                                    New Course
                                                </v-btn>
                                                @endif
                                                @if(Auth::user()->role->name == "admin")
                                                    <v-btn href="{{route("masterminds.create")}}" small outline
                                                           title="{{__("New Mastermind")}}">
                                                        New Mastermind
                                                    </v-btn>
                                                @endif

                                                <v-spacer></v-spacer>


                                                <v-btn :disabled="selected.length==0" icon @click="duplicateItems()"
                                                       title="{{__("Duplicate")}}">
                                                    <v-icon color="info">content_copy</v-icon>
                                                </v-btn>
                                                <v-btn :disabled="selected.length==0" icon @click="activateItems()"
                                                       title="{{__("Approve")}}">
                                                    <v-icon color="success">check</v-icon>
                                                </v-btn>
                                                <v-btn :disabled="selected.length==0" icon @click="suspendItems()"
                                                       title="{{__("Disapprove")}}">
                                                    <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.category? props.item.category.name:'' }}</td>
                                                    <td>
                                                        @if(Auth::user()->role->name == "admin")
                                                            <v-icon
                                                                v-if="props.item.status >= 2"
                                                                small
                                                                class="mr-2"
                                                                color="success"
                                                                @click="suspendItem(props.item)"
                                                            >
                                                                check
                                                            </v-icon>
                                                            <v-icon
                                                                v-else
                                                                small
                                                                color="red"
                                                                @click="activateItem(props.item)"
                                                            >
                                                                close
                                                            </v-icon>
                                                        @else
                                                            <span
                                                                v-if="props.item.status > 1"
                                                                class="text--success"

                                                            >
                                                                Approved
                                                            </span>
                                                            <span
                                                                v-if="props.item.status == 1"
                                                                class="text--red"
                                                            >
                                                                Pending Approval
                                                            </span>
                                                            <span
                                                                v-if="props.item.status == 0"
                                                                class="text--red"
                                                            >
                                                                Draft
                                                            </span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <v-btn flat outline small
                                                               :href="'{{route("courses.edit_course","")}}/'+props.item.id"
                                                               title="{{__("Edit")}}">
                                                            {{--<v-icon small color="primary">edit</v-icon>--}}
                                                            Edit
                                                        </v-btn>
                                                        <v-btn flat small outline color="info"
                                                               :href="'{{route("courses.show","")}}/'+props.item.id"
                                                               title="{{__("View")}}">
                                                          {{--  <v-icon small color="info">visibility</v-icon>--}}
                                                            View
                                                        </v-btn>
                                                       {{-- <course-view-btn :course="props.item" :icon="false"
                                                                         :href="'{{route("courses.show","")}}/'+props.item.id"></course-view-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-card>
                        </template>

                    </v-flex>
                </v-layout>

                {{--<v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">

                    <v-card>
                        <v-toolbar dark color="primary">

                            <v-toolbar-title v-if="item.id">Edit course</v-toolbar-title>
                            <v-toolbar-title v-else>Add course</v-toolbar-title>
                            <v-spacer></v-spacer>
                            <v-toolbar-items>
                                <v-btn outline small :loading="loading" flat dark @click.native="save">
                                   save
                                </v-btn>
                                <v-btn icon dark @click.native="dialog = false">
                                    <v-icon>close</v-icon>
                                </v-btn>
                            </v-toolbar-items>
                        </v-toolbar>
                        <v-card-text>
                            <course-form :course="item" :event="eventListener"/>
                        </v-card-text>
                    </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-container>

        </v-content>
    </template>
    <script>

        const PageContent = {
            template: "#page-content",
            components: {CourseForm, CourseViewBtn},
            data: () => ({
                total: 0,
                loading: true,
                pagination: {},
                fab: false,
                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: '{{__("Category")}}', value: 'category_id', sortable: false},
                    {text: '{{__("Status")}}', value: 'status'},
                    {text: '{{__("Actions")}}', sortable: false},
                ],
                form: {},
                item: {},
                items: [],
                categories: {!! \App\Role::all() !!},
                defaultItem: {},
                settings: {pagination: {page: 1}},

                payment: {id: null, amount: 0},

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

                showreport: {
                    type: Function,
                    defualt: function (url) {
                    }
                },
                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() {

                if (localStorage.getItem('settings')) this.settings = JSON.parse(localStorage.getItem('settings')) || this.settings;
                this.pagination = {rowsPerPage: 10, page: 1};

            },
            methods: {
                eventListener(event, data) {
                    switch (event) {
                        case "toast":
                            this.toast(data.message, data.color);
                            console.log(data);
                            break;
                        case "item":
                            this.item = data;
                            this.pushItem(data);
                            break;
                        default:
                            (this.event)(event, data);
                            break;
                    }
                },
                totalPaid: function (payments) {
                    var total = 0;
                    for (var i = 0; i < payments.length; i++) {
                        total += payments[i].amount;
                    }
                    return total;
                },
                report(url) {
                    this.context.report_url = "#";
                    this.context.report_dialog = true;
                    this.context.report_url = url;
                    console.log(url);

                },
                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("{{route("courses.index")}}", {
                            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);
                    })


                },


                newItem() {

                    this.item = this.defaultItem;
                    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;
                },
                editPayment(item) {

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

                },
                suspendItems() {
                    if (this.selected.length !== 0) {
                        this.confirmObject.text = "{{__("components.Are you sure you want to disapprove")}} " + this.selected.length + " courses";
                        this.confirmObject.action = "suspend";
                        this.confirm = true;
                    }

                },
                activateItems() {
                    if (this.selected.length !== 0) {
                        this.confirmObject.text = "{{__("components.Are you sure you want to approve")}} " + this.selected.length + " courses";
                        this.confirmObject.action = "activate";
                        this.confirm = true;
                    }

                },
                duplicateItems() {
                    if (this.selected.length !== 0) {
                        this.confirmObject.text = "{{__("Are you sure you want to duplicate")}} " + this.selected.length + " courses";
                        this.confirmObject.action = "duplicate";
                        this.confirm = true;
                    }

                },
                suspendItem(item) {

                    this.selected = [item];
                    this.actionOnMultiple("suspend")

                },
                activateItem(item) {
                    this.selected = [item];
                    this.actionOnMultiple("activate")


                },
                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('/courses/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;
                            }
                        });
                },

                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)
                },


                /*
                    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;
                },

                save() {


                    var _this = this;
                    this.loading = true;
                    axios["post"]('{{route("courses.store")}}', this.item)
                        .then(response => {
                            _this.loading = false;

                            if (response.data.error) {
                                (_this.event)("toast", {message: response.data.message, color: 'red'});
                            } else {
                                _this.pushItem(response.data);

                            }


                        }).catch(error => {

                        // if (typeof error.response.data === 'object') {
                        //     form.errors = _.flatten(_.toArray(error.response.data));
                        // } else {
                        //     form.errors = ['Something went wrong. Please try again.'];
                        // }


                        (_this.event)("error", error);
                        _this.loading = 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>
@endsection
@section("components_instances")
    PageContent
@endsection