@extends('layouts.main')

@section("content")
    <page-content :context="context" :event="eventListener"/>
@endsection
@section("components_declarations")
    @include("users.user_activity")
    @include("users.user_form",["profile"=>true])
    @include("catalogs.catalog")
    <template id="page-content">
        <v-content>
            <v-container fluid fill-height>
                <v-layout justify-center>
                    <v-flex>
                        <v-card

                        >
                            <v-card-title class="grey lighten-4 py-4 title">
                                <span class="title font-weight-light">My Account</span>
                            </v-card-title>
                            <v-card-text>

                                <v-tabs left>
                                    <v-tab key="Profile">
                                        Profile
                                    </v-tab>


                                    <v-tab key="Courses">
                                        Courses
                                    </v-tab>
                                    <v-tab key="Achievements">
                                        Achievements
                                    </v-tab>
                                    <v-tab key="Investments">
                                        Investments
                                    </v-tab>
                                    <v-tab key="activity">
                                        My Activity
                                    </v-tab>
                                    <v-tab-item
                                        key="Profile"
                                    >
                                        <v-card flat d-flex>
                                            <v-card-text>
                                                <v-layout row>


                                                    <v-flex xs12 md6 lg6 d-flex>
                                                        <user-form :context="context" :user="user"
                                                                   :event="eventListener"/>
                                                    </v-flex>
                                                    <v-flex xs12 md6 lg6 d-flex>
                                                        <user-info :context="context" :user="user" :editable="true" :event="eventListener"/>
                                                    </v-flex>
                                            </v-card-text>
                                        </v-card>
                                    </v-tab-item>


                                    <v-tab-item
                                        key="Courses"
                                    >
                                        <Catalog :event="eventListener" title="My Courses" url="{{route("users.courses",Auth::id())}}"></Catalog>
                                    </v-tab-item>
                                    <v-tab-item
                                        key="Achievements"
                                    >
                                        <v-card flat>
                                            <v-card-text>
                                                Achievements
                                            </v-card-text>
                                        </v-card>
                                    </v-tab-item>
                                    <v-tab-item
                                        key="Investments"
                                    >
                                        <v-card flat>
                                            <v-card-text>
                                                Investments
                                            </v-card-text>
                                        </v-card>
                                    </v-tab-item>
                                    <v-tab-item
                                        key="activity"
                                    >
                                        <v-card flat>
                                            <v-card-text>
                                                <user-activity :context="context" :user="user"/>
                                            </v-card-text>
                                        </v-card>
                                    </v-tab-item>
                                </v-tabs>
                            </v-card-text>

                        </v-card>

                    </v-flex>
                </v-layout>
                <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: {UserInfo, UserForm, UserActivity,Catalog},
            data: () => ({
                user: {!! $user !!},
                snackbar: {active: false, text: "", color: "primary"},
            }),
            props: {
                source: String,
                context: Object,

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

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


            },
            methods: {

                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("users.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);
                    })


                },


                toast(message, color) {

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


                },
                eventListener(event, data) {
                    switch (event) {
                        case "toast":
                            this.toast(data.message, data.color);
                            break;
                        default:
                            (this.event)(event, data);
                            return false;
                    }
                    return true;
                }
            },
        }
    </script>
@endsection
@section("components_instances")
    PageContent
@endsection