@include("courses.course_view_btn")
<template id="course-card">
    <v-card
        class="mx-auto"
        color="grey lighten-4"
        pa-1
        flat
    >
        <v-card-text>
            <v-layout :row="display==='grid'" :wrap="display==='grid'">
                <v-flex xs12 :class="{shrink:display==='list'}" >
                    <v-avatar v-if="display==='list'" size="100px" tile>
                        <v-img
                            :src="course.thumbnail"
                            aspect-ratio="1"
                            lazy-src="{{asset("images/course.png")}}"
                            alt="Avatar"
                        ></v-img>
                    </v-avatar>
                    <v-img v-else
                        class="mx-auto"
                        :src="course.thumbnail"
                        aspect-ratio="1"
                        lazy-src="{{asset("images/course.png")}}"
                    ></v-img>
                </v-flex>
                <v-flex xs12 :class="{grow:display==='list'}" >


             {{--   <v-divider v-if="display==='list'" vertical></v-divider>--}}
                <v-flex xs12 :class="{'pl-2':display==='list'}">
                    <h3 class="heading">@{{ course.name }}</h3>
                </v-flex>
                {{--<v-divider v-if="display==='list'" vertical></v-divider>--}}
                <v-flex xs12 :class="{'pl-2':display==='list'}">
                    Instructor: <span v-if="course.instructor"><a :href="'{{route("users.show","")}}/'+course.instructor_id">@{{ course.instructor.name }}</a></span>
                </v-flex>
                {{--<v-divider v-if="display==='list'" vertical></v-divider>--}}
                <v-flex xs12 :class="{'pl-2':display==='list'}">
                    Type:
                    <span v-if="mastermind && mastermind.id">Instructor led</span>
                    <span v-else>Self-paced</span>
                </v-flex>
               {{-- <v-divider v-if="display==='list'" vertical></v-divider>--}}
                <v-flex xs12 :class="{'pl-2':display==='list'}">
                    Price: <span v-if="mastermind && mastermind.id">$@{{ mastermind.fee }}</span>
                           <span v-else>Free</span>
                </v-flex>
                </v-flex>
            </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
            <template v-if="course.reading">
                <template v-if="instructor">
                    <v-btn   outline  small flat  color="info"  :href="'{{route("courses.edit_course","")}}/'+course.id">
                        Edit
                    </v-btn>
                </template>
                <template v-else>
                    <v-btn v-if="course.reading.is_complete"  outline  small flat  color="success"  :href="'{{route("learn","")}}/'+course.reading.id">
                        Completed
                    </v-btn>
                    <v-btn v-else color="info"  :href="'{{route("learn","")}}/'+course.reading.id" outline small flat >
                        Resume
                    </v-btn>
                </template>


            </template>
            <template v-else>
                <v-btn  :href="'{{route("masterminds.join","")}}/'+mastermind.id" outline v-if="mastermind && mastermind.id"  color="success" flat small >
                    Join
                </v-btn>
                <v-btn  :href="'{{route("courses.take","")}}/'+course.id" outline v-else color="success"  flat small >
                    Start
                </v-btn>
            </template>
            <v-spacer></v-spacer>
            <course-view-btn :course="course" :event="eventListener" :href="'{{route("courses.show","")}}/'+course.id" ></course-view-btn>
        </v-card-actions>
    </v-card>


</template>
<script>

    const CourseCard = {
        template: "#course-card",
        components: {CourseViewBtn},
        data: () => ({
            loading: true,
            starting: true,
            joining: true,
            dialog: false,
            @if(Auth::user()->role->name=="instructor")
                instructor:true,
            @else
                instructor:false,
            @endif

        }),
        props: {
            source: String,
            context: Object,
            mastermind: Object,
            course: Object,
            modal: {
                type: Boolean,
                default: false,
            },
            display: {
                type: String,
                default: "grid",
            },
            url: {
                type: String,
                default: "{{route("courses.show","")}}",
            },
            select: {
                type: Boolean,
                default: false,
            },
            event: {
                type: Function,
                default: function (event, data) {
                }
            },
        },
        updated() {


        },
        computed: {


        },
        watch: {

        },
        mounted() {



        },
        methods: {
            eventListener(event, data) {
                switch (event) {
                    case "upload":
                        for (var i = 0; i < data.length; i++) {
                            this.pushItem(data[i]);
                        }
                        break;
                    case "schedule":
                        this.pushItem(data);
                        break;
                    default:
                        console.log('hey');
                        (this.event)(event, data);
                        break;
                }
            },
            async 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(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);
                })


            },


            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;
            },
            close() {
                this.dialog = false
                setTimeout(() => {
                    this.item = Object.assign({}, this.defaultItem)

                }, 300)
            },
        },
    }
</script>