@include("masterminds.schedules")
<template id="mastermind-form">



    <v-stepper v-model="step">
        <v-stepper-header style="justify-content: left !important;">
            <v-stepper-step :editable="mastermind.id" step="1" >Details</v-stepper-step>
            {{--<v-divider></v-divider>--}}
            <v-stepper-step :editable="mastermind.id"  step="2">Schedules</v-stepper-step>
        </v-stepper-header>

        <v-stepper-items>
            <v-stepper-content step="1">
                    <v-card flat>
                        <v-card-text>
                            <v-layout row wrap >

                                <v-flex xs12 v-if="!course || !course.id">
                                    <v-layout >
                                        <v-autocomplete
                                            v-model="mastermind.course_id"
                                            :items="courses"
                                            item-text="name"
                                            item-value="id"
                                            label="{{__("Course")}}"
                                            placeholder="{{__("Course")}}"
                                            persistent-hint
                                            :auto-grow="true"
                                            :loading="course_loading"
                                            :search-input.sync="search"
                                        >
                                        </v-autocomplete>
                                    </v-layout>
                                </v-flex>
                                <v-flex xs12>
                                    <v-layout columns>
                                        <v-flex xs12 sm6>
                                            <v-dialog
                                                ref="startdate_dialog"
                                                v-model="startdate_modal"
                                                :return-value.sync="mastermind.start_date"
                                                persistent
                                                lazy
                                                full-width
                                                width="290px"
                                            >
                                                <v-text-field
                                                    slot="activator"
                                                    v-model="mastermind.start_date"
                                                    label="Start Date"
                                                    prepend-icon="event"
                                                    readonly
                                                ></v-text-field>
                                                <v-date-picker v-model="mastermind.start_date" scrollable>
                                                    <v-spacer></v-spacer>
                                                    <v-btn flat color="primary" @click="startdate_modal = false">Cancel</v-btn>
                                                    <v-btn flat color="primary" @click="$refs.startdate_dialog.save(mastermind.start_date)">OK
                                                    </v-btn>
                                                </v-date-picker>
                                            </v-dialog>
                                        </v-flex>
                                        <v-flex xs12 sm6>
                                            <v-dialog
                                                ref="enddate_dialog"
                                                v-model="enddate_modal"
                                                :return-value.sync="mastermind.end_date"
                                                persistent
                                                lazy
                                                full-width
                                                width="290px"
                                            >
                                                <v-text-field
                                                    slot="activator"
                                                    v-model="mastermind.end_date"
                                                    label="End Date"
                                                    prepend-icon="event"
                                                    readonly
                                                ></v-text-field>
                                                <v-date-picker v-model="mastermind.end_date" scrollable>
                                                    <v-spacer></v-spacer>
                                                    <v-btn flat color="primary" @click="enddate_modal = false">Cancel</v-btn>
                                                    <v-btn flat color="primary" @click="$refs.enddate_dialog.save(mastermind.end_date)">OK
                                                    </v-btn>
                                                </v-date-picker>
                                            </v-dialog>
                                        </v-flex>

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

                                    <v-layout columns>
                                        <v-flex xs12 sm2 pr-2>
                                            <v-text-field type="number" v-model="mastermind.max_students"
                                                          label="Maximum number of students"></v-text-field>
                                        </v-flex>
                                        <v-flex sx12 sm4>

                                            <v-radio-group  :row="true" v-model="mastermind.free" inline>
                                                <v-radio label="Free" :value="true"></v-radio>
                                                <v-radio label="Admission Commission" :value="false"></v-radio>
                                            </v-radio-group>
                                        </v-flex>
                                        <v-flex xs12 sm6  v-if="!mastermind.free">
                                            <v-text-field type="number" v-model="mastermind.fee"
                                                          label="Fee(leave empty for free)"></v-text-field>
                                        </v-flex>

                                    </v-layout>
                                </v-flex>
                                <v-flex xs12 v-if="!mastermind.free && mastermind.fee >0 ">
                                    <v-label>Instructor Commission</v-label>
                                    <v-layout row>
                                        <v-flex class="pr-3">
                                            <v-slider
                                                v-model="mastermind.instructor_commission"
                                                thumb-label
                                                :min="0"
                                            ></v-slider>
                                        </v-flex>

                                        <v-flex shrink style="width: 60px">
                                            <v-text-field
                                                v-model="mastermind.instructor_commission"
                                                class="mt-0"
                                                hide-details
                                                single-line
                                                min="0"
                                                type="number"
                                            ></v-text-field>
                                        </v-flex>
                                    </v-layout>
                                </v-flex>

                                <v-flex xs12>
                                    <v-switch value v-model="mastermind.gamification" label="Gamification"></v-switch>
                                </v-flex>

                                <v-flex xs12>
                                    <v-switch value v-model="mastermind.notify_learner"
                                              label="Notify mastermind public when badges points are recieved"></v-switch>
                                </v-flex>

                                <v-flex>
                                    <br/>
                                    <v-divider></v-divider>
                                    <v-spacer></v-spacer>
                                    <v-btn flat outline color="primary" :loading="loading" @click="save">{{__("Continue")}}</v-btn>
                                </v-flex>


                            </v-layout>
                        </v-card-text>
                    </v-card>



            </v-stepper-content>
            <v-stepper-content step="2">

                <mastermind-schedules v-if="mastermind.id" :mastermind="mastermind" :event="eventListener"
                                      :url="'{{route("masterminds.schedules","")}}/'+mastermind.id"></mastermind-schedules>
                <v-flex>
                    <br/>
                    <v-divider></v-divider>
                    <v-spacer></v-spacer>
                    <v-btn flat outline color="primary" :loading="loading" @click="save">{{__("Save")}}</v-btn>
                </v-flex>
            </v-stepper-content>
        </v-stepper-items>

    </v-stepper>



</template>
<script>

    const MastermindForm = {
        template: "#mastermind-form",
        components: {MastermindSchedules},
        props: {
            loading: false,
            source: String,
            context: Object,
            course: Object,
            mastermind: Object,
            search:null,
            event: {
                type: Function,
                default: function (event, data) {
                }
            },

        },
        data: () => ({
            loading:false,
            course_loading:false,
            startdate_modal: false,
            enddate_modal: false,
            courses:[],
            search:'',
            step:1,


        }),
        computed: {
            params(nv) {
                return {
                    query:this.search,
                };
            },
        },
        watch: {

            params: {
                handler() {
                    this.getData().then(data => {
                        this.courses = data.items;
                        this.total = data.total;
                    });
                },
                deep: true
            },
        },
        methods: {
            search_course(v){
              console.log(v)
            },
            eventListener(event, data) {
                switch (event) {
                    case "mastermind":
                        this.pushItem(data);
                        break;
                    case "close_schedules":
                        this.schedules_dialog = false;
                        break;
                    default:
                        (this.event)(event, data);
                        break;
                }
            },
            async getData() {
                this.course_loading = true;
                return new Promise((resolve, reject) => {


                    // get by search keyword
                    axios.get("{{route("courses.index")}}", {
                        params: {
                            term: this.search,
                        }
                    })
                        .then(res => {
                            let items = res.data.data;


                            const total = res.data.total;
                            this.course_loading = false;
                            resolve({
                                items,
                                total
                            })

                        })
                        .catch(err => console.log(err))
                        .finally(() => this.course_loading = false);
                })
            },
            save: function () {
                this.persist('post', "{{route("masterminds.store")}}", this.mastermind);
            },
            persist(method, uri, object) {

                if(this.course && this.course.id){
                    object.course_id = this.course.id;
                }else{
                    if (!object.course_id ) {

                        (this.event)("toast", {message: "Please enter the name field", color: 'red'});
                        return false;
                    }
                }

                this.form = {};
                var errors = false;




                this.loading = true;
                axios[method](uri, object)
                    .then(response => {
                        this.loading = false;

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

                            var mastermind = response.data;
                            //notification of mastermind object
                            (this.event)("mastermind", mastermind);
                            (this.event)("toast", {message: "Success", color: 'success'});
                            this.step=2;

                        }


                    }).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)("toast", {message: "Something happened", color: 'red'});
                    this.loading = false
                });


            },
        }
    }
</script>