@extends('layouts.main')

@section("content")
    <page-content :event="eventListener"></page-content>
@endsection
@section("components_declarations")
    @include("projects.project_card")
    <template id="page-content">
        <v-content>
            <v-container fluid fill-height>
                <v-layout justify-center>
                    <v-flex>

                        <template>
                            <v-card flat d-flex>
                                <v-card-text>
                                    <h1>Hi {{{Auth::user()->name}}}, welcome back!</h1>
                                    <v-layout row wrap>
                                        <v-flex xs12 sm6 md4 pa-1>

                                            <v-card color="blue-grey darken-2" class="white--text">
                                                <div class=" pa-2 title">Logins this Month</div>
                                                <div class=" pa-2 display-1">
                                                    <v-icon x-large dark>security</v-icon>
                                                    {{count(Helper::segmentData(\App\Activity::where("user_id",Auth::id())->where("action","login"))["month"]["data"])}}
                                                </div>


                                                <v-btn small outline dark
                                                       href="{{route("profile")}}?activities=true">View
                                                </v-btn>

                                            </v-card>
                                        </v-flex>
                                        <v-flex xs12 sm6 md4 pa-1>
                                            <v-card color="blue darken-2" class="white--text">
                                                <div class=" pa-2 title">Total Lessons Completed</div>
                                                <div class=" pa-2 display-1">
                                                    <v-icon x-large dark>library_books</v-icon>
                                                    {{\App\Complete::where("user_id",Auth::id())->count()}}
                                                </div>


                                                <v-btn small outline dark
                                                       href="{{route("profile")}}?courses=true">View
                                                </v-btn>

                                            </v-card>
                                        </v-flex>
                                        <v-flex xs12 sm6 md4 pa-1>
                                            <v-card color="success darken-2" class="white--text">
                                                <div class=" pa-2 title">Lessons Remaining</div>
                                                <div class=" pa-2 display-1">
                                                    <v-icon x-large dark>library_books</v-icon>
                                                    {{ (Auth::user()->lessons()->count())-(\App\Complete::where("user_id",Auth::id())->count()) }}
                                                </div>


                                                <v-btn small outline dark flat
                                                       href="{{route("profile")}}?courses=true">View
                                                </v-btn>

                                            </v-card>
                                        </v-flex>

                                    </v-layout>
                                    <br/>

                                    <v-layout row wrap>
                                        <v-flex xs12 pa-1>
                                            <v-card class="grey lighten-5 mx-auto text-xs-center v-sheet">
                                                <v-card-title class="grey lighten-3" light>
                                                    <v-toolbar-title class="text-xs-center">My Courses</v-toolbar-title>
                                                </v-card-title>

                                                <v-list two-line>
                                                    <template v-for="(reading, index) in readings">
                                                        <v-list-tile>

                                                            <v-list-tile-avatar tile>
                                                                <v-img :src="reading.course.thumbnail"
                                                                       lazy-src="images/course.png"></v-img>
                                                            </v-list-tile-avatar>

                                                            <v-list-tile-content>
                                                                <v-list-tile-title
                                                                    v-html="reading.course.name"></v-list-tile-title>
                                                                <v-list-tile-sub-title>

                                                                    <v-progress-linear dark style="width: 95%"
                                                                                       height="20px"
                                                                                       :value="reading.percentage">
                                                                        <strong
                                                                            class="font-weight-bold black--text "
                                                                            style="font-size: 11px;float:right;padding:2px">@{{
                                                                            reading.percentage }}%</strong>
                                                                    </v-progress-linear>

                                                                </v-list-tile-sub-title>

                                                            </v-list-tile-content>
                                                            <v-list-tile-action>
                                                                <v-btn v-if="reading.is_complete" outline small flat
                                                                       color="success"
                                                                       :href="'{{route("learn","")}}/'+reading.id">
                                                                    Completed
                                                                </v-btn>
                                                                <v-btn v-else color="info"
                                                                       :href="'{{route("learn","")}}/'+reading.id"
                                                                       outline small flat>
                                                                    Resume
                                                                </v-btn>
                                                            </v-list-tile-action>
                                                        </v-list-tile>
                                                        <v-divider v-if="index<readings.length-1"></v-divider>
                                                    </template>

                                                </v-list>

                                            </v-card>
                                        </v-flex>

                                    </v-layout>
                                    <br/>
                                    <v-layout row wrap>
                                        <v-flex xs12>
                                            <project-card :simple="true" :project="project"></project-card>
                                        </v-flex>
                                    </v-layout>
                                </v-card-text>
                            </v-card>
                        </template>
                    </v-flex>
                </v-layout>
            </v-container>

        </v-content>
    </template>


    <script>


        const PageContent = {
            template: "#page-content",
            components: {ProjectCard},
            data: () => ({

                loading: false,
                readings:{!! \App\Reading::where("user_id",Auth::id())->with(["course"])->take(5)->orderBy("id","DESC")->get() !!},

                @if(!empty($project))
                project:{!! $project !!},
                @else
                project: {},
                @endif
            }),
            props: {
                source: String,
                context: Object,
                item: {},

                event: {
                    type: Function,
                    default: function (event, data) {
                    }
                },

            },
            computed: {},
            watch: {},
            mounted() {


            },
            methods: {
                eventListener(event, data) {
                    switch (event) {
                        case "mastermind":
                            this.pushItem(data);
                            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
                        axios.get("{{route("certificates.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;
                },
                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 + " certificates";
                        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('/certificates/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>
@endsection
@section("components_instances")
    PageContent
@endsection