@extends('layouts.main')

@section("content")
    <page-content :context="context"/>
@endsection
@section("components_declarations")
    @include("users.user_activity")
    @include("users.user_form")
    <template id="page-content">
        <v-content>
            <v-container fluid fill-height>
                <v-layout justify-center>
                    <v-flex>
                        <template>
                            <v-layout row>
                                <v-flex xs12 md4 lg3 d-flex mr-2>
                                    <v-card
                                        elevation="1"

                                        d-flex

                                    >
                                        <v-card-text>
                                            <v-layout column>
                                                <v-flex xs12 d-flex>
                                                    <user-info :context="context" :user="user"/>
                                                </v-flex>
                                                <v-divider></v-divider>
                                                <v-flex xs12 d-flex>
                                                    <user-form :context="context" :user="user" :event="eventListner"/>
                                                </v-flex>







                                        </v-card-text>

                                    </v-card>
                                </v-flex>
                                <v-flex xs12 md8 lg9 d-flex >
                                    <v-card
                                        elevation="1"
                                        class="d-flex"


                                    >
                                        <v-card-text>

                                            <v-tabs left>
                                                <v-tab key="activity">
                                                    Activity
                                                </v-tab>
                                                <v-tab key="Engagement">
                                                    Engagement
                                                </v-tab>
                                                <v-tab key="Courses">
                                                    Courses
                                                </v-tab>
                                                <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-tab-item
                                                    key="Engagement"
                                                >
                                                    <v-card flat>
                                                        <v-card-text>

                                                        </v-card-text>
                                                    </v-card>
                                                </v-tab-item>
                                                <v-tab-item
                                                    key="Courses"
                                                >
                                                    <v-card flat>
                                                        <v-card-text>Courses</v-card-text>
                                                    </v-card>
                                                </v-tab-item>
                                            </v-tabs>
                                        </v-card-text>

                                    </v-card>



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

                        </template>

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

                showreport: {
                    type: Function,
                    defualt: function (url) {
                    }
                },

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


                },
                eventListner(event,data){
                    switch (event) {
                        case "toast":
                            this.toast(data.message,data.color);
                            break;
                        default:
                            console.log("unknown event caught");
                            break;
                    }
                }
            },
        }
    </script>
@endsection
@section("components_instances")
    PageContent
@endsection