<template>
    <v-sheet tile class="px-2">
        <v-stepper v-model="step">
            <v-stepper-header>
                <v-stepper-step
                    v-for="(item, index) in steps"
                    :key="'step-' + index"
                    :step="1 + index"
                >
                    {{ __(item.caption) }}
                </v-stepper-step>
            </v-stepper-header>

            <v-stepper-items>
                <v-stepper-content step="1">
                    <v-card tile flat>
                        <v-card-text class="px-1">
                            <v-row dense>
                                <v-col cols="3">
                                    <cs-text-box 
                                        ref="First"
                                        :control="controls.number"
                                        :errors="errorsManager.ByField('number')"
                                        v-model="activeRecord.number"
                                        @focus="errorsManager.ResetField('number')"
                                        @blur="errorsManager.Validate('number')"
                                    />
                                </v-col>

                                <v-col cols="4">
                                    <cs-date-box 
                                        :control="controls.date"
                                        :errors="errorsManager.ByField('date')"
                                        v-model="activeRecord.date"
                                        @focus="errorsManager.ResetField('date')"
                                        @blur="errorsManager.Validate('date')"
                                    />
                                </v-col>

                                <v-col cols="5">
                                    <cs-date-interval-box 
                                        ref="Daterange"
                                        :control="controls.completedinterval"
                                        :errors="intervalDatesErrors"
                                        :value="controls.completedinterval.GetRange(activeRecord.date_from, activeRecord.date_to)"
                                        @input="controls.completedinterval.SetRangeValue($event, activeRecord, 'date_from', 'date_to')"
                                        @focus="errorsManager.ResetField('date_from'), errorsManager.ResetField('date_to')"
                                        @blur="errorsManager.Validate('date_from'), errorsManager.Validate('date_to')"
                                    />
                                </v-col>

                            </v-row>

                            <v-row dense>
                                <v-col cols="4">
                                    <v-radio-group 
                                        v-model="activeRecord.tip_curs"
                                        hide-details
                                        dense
                                        class="ml-3 mt-0"
                                    >
                                        <template v-slot:label>
                                            <div
                                                v-html="__('Selectați tipul cursului')"
                                            >
                                            </div>
                                        </template>

                                        <v-radio
                                            v-for="(type, index) in types"
                                            :key="'type-' + index"
                                            :value="type.value"
                                            :label="type.text"
                                        >
                                        </v-radio>
                                    </v-radio-group>
                                </v-col>

                                <v-col cols="8" v-if="activeRecord.tip_curs=='onsite'" class="pt-2">
                                    <v-row dense>
                                        <v-col cols="12">
                                            <cs-text-box 
                                                :control="controls.location"
                                                :errors="errorsManager.ByField('location')"
                                                v-model="activeRecord.location"
                                                @focus="errorsManager.ResetField('location')"
                                                @blur="errorsManager.Validate('location')"
                                            />
                                        </v-col>

                                        <v-col cols="6">
                                            <cs-date-box 
                                                :control="controls.data_curs"
                                                :errors="errorsManager.ByField('data_curs')"
                                                v-model="activeRecord.data_curs"
                                                @focus="errorsManager.ResetField('data_curs')"
                                                @blur="errorsManager.Validate('data_curs')"
                                            />
                                        </v-col>

                                        <v-col cols="3">
                                            <cs-text-box 
                                                :control="controls.ora_curs"
                                                :errors="errorsManager.ByField('ora_curs')"
                                                v-model="activeRecord.ora_curs"
                                                @focus="errorsManager.ResetField('ora_curs')"
                                                @blur="errorsManager.Validate('ora_curs')"
                                            />
                                        </v-col>

                                        <v-col cols="3">
                                            <cs-text-box 
                                                :control="controls.durata_curs"
                                                :errors="errorsManager.ByField('durata_curs')"
                                                v-model="activeRecord.durata_curs"
                                                @focus="errorsManager.ResetField('durata_curs')"
                                                @blur="errorsManager.Validate('durata_curs')"
                                            />
                                        </v-col>

                                    </v-row>
                                </v-col>
                            </v-row>
                        </v-card-text>

                        <v-card-actions>
                            <cs-btn
                                color="primary"
                                small
                                :caption=" __('Continuă')"
                                :disabled="! validStepOne"
                                @click="step = 2"
                            />
                        </v-card-actions>
                    </v-card>
                </v-stepper-content>

                <v-stepper-content step="2">
                    <v-card tile flat>
                        <cursuri-selector 
                            :app="app"
                            :target="target"
                            v-model="activeRecord.materiale_trimise"
                        />

                        <v-card-actions>

                            <cs-btn
                                color="primary"
                                small
                                :caption=" __('Înapoi')"
                                @click="step = 1"
                            />

                            <cs-btn
                                color="primary"
                                small
                                :caption=" __('Continuă')"
                                :disabled="! validStepTwo"
                                @click="step = 3"
                            />
                        </v-card-actions>
                    </v-card>

                </v-stepper-content>

                <v-stepper-content step="3">
                    <v-card tile flat>
                        <v-card-text>
                            <customers-users-tree 
                                :app="app"
                                v-model="activeRecord.customers"
                            />
                        </v-card-text>

                        <v-card-actions>

                            <cs-btn
                                color="primary"
                                small
                                :caption=" __('Înapoi') "
                                @click="step = 2"
                            />
                        </v-card-actions>
                    </v-card>
                </v-stepper-content>
            </v-stepper-items>
        </v-stepper>
    </v-sheet>
</template>

<script>
    export default {

        props: {
            controls: {default: () => ({})},
            activeRecord: {required: true},
            errorsManager: {required: true},
            action: {required: true},
            currentAction: {required: true},
            app: {required: true},
            target: {default: null},
        },

        data: () => ({
            step: 1,

            steps: [
                {
                    caption: 'Trimitere'
                },

                {
                    caption: 'Cursuri'
                },

                {
                    caption: 'Clienți și utilizatori'
                },
            ],            
        }),

        computed: {
            types() {
                return [
                    {
                        text: 'online',
                        value: 'online',
                    },
                    {
                        text: 'onsite',
                        value: 'onsite',
                    }
                ];
            },

            validStepOne() {
                return !! this.activeRecord.number && !! this.activeRecord.date;
            },

            validStepTwo() {
                return this.activeRecord.materiale_trimise.length > 0;
            },

            intervalDatesErrors() {
                if(!! this.errorsManager.ByField('date_from') )
                {
                    return this.errorsManager.ByField('date_from');
                }
                if(!! this.errorsManager.ByField('date_to') )
                {
                    return this.errorsManager.ByField('date_to');
                }
                return null;
            },
        },

        watch: {
            'activeRecord.tip_curs': function(tip_curs) {

                if(tip_curs == 'onsite')
                {

                }
                else
                {
                    this.activeRecord.location = null;
                    this.activeRecord.data_curs = null;
                    this.activeRecord.ora_curs = null;
                    this.activeRecord.durata_curs = null;
                }
            }
        },

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
            CsDateBox: require('@CsVueComp/controls/dates/CsDateBox').default, 
            CsDateIntervalBox: require('@CsVueComp/controls/dates/CsDateIntervalBox').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        created() {
            if(this.target == 'customer-cursuri')
            {
                this.steps[2].caption = 'Utilizatori';

                if(this.action == 'insert')
                {
                    this.currentAction.caption = this.__('Asignare cursuri');
                }
            }
        },
        name: 'TrimitereInput',
    }
</script>