<template>
    <cs-centered-alert
        v-if="! controller.isBooted"
        :height="controller.height"
        :width="controller.width"
        message="Se încarcă..."
    >
        <v-progress-circular
            indeterminate
            color="orange darken-1"
        >
        </v-progress-circular>
    </cs-centered-alert>

    <v-card 
        v-else 
        tile 
        flat
        :height="app.height"
        :width="app.width"
    >
        <v-card-title class="pa-0 primary--text text--darken-3">
            {{ __(':customer. Acces curs', {
                customer:customer.name,
            }) }}
        </v-card-title>

        <v-card-title class="pa-0">
            <v-breadcrumbs 
                v-if="controller.hasBreadcrumbs"
                :items="controller.breadcrumbs" 
                class="pa-0"
            >
                <template v-slot:divider>
                    <v-icon>mdi-dots-vertical</v-icon>
                </template>
            </v-breadcrumbs>
        </v-card-title>

        <v-card
            tile
            flat
            :height="app.height - 64"
            :width="app.width"
            :disabled="controller.uploadfilemenu.visible || 
                controller.importparticipantsmenu.visible || 
                controller.deleteusermenu.visible ||
                controller.deleteparticipantmenu.visible ||
                controller.deletefilemenu.visible || 
                controller.previewcursmenu.visible"
            class="d-flex"
        >

            <v-sheet
                :width="280"
                :height="app.height - 64"
            >
                <acces-curs-curs-details 
                    :app="app"
                    :width="280"
                    class="mb-3"
                />

                <v-list dense>
                    <v-list-item-group
                        color="primary"
                    >
                        <v-list-item
                            v-for="(item, index) in controller.list"
                            :key="'item-' + index"
                            @click="controller.currentview = item.value"
                        >
                            <v-list-item-icon>
                                <v-icon v-text="item.icon">
                                </v-icon>
                            </v-list-item-icon>
                            <v-list-item-content>
                                <v-list-item-title v-text="__(item.caption)">
                                </v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </v-list-item-group>
                </v-list>

                <v-card class="mt-3" tile flat v-if="app.dataSession.Customercursuriuser.Locatii.length > 0">
                    <v-card-title class="pa-1">
                        <span>{{ __('Locații') }}</span>
                    </v-card-title>

                    <v-card-text class="pa-1">
                        <v-sheet
                            v-for="(item, index) in app.dataSession.Customercursuriuser.Locatii"
                            :key="'item-' + index"
                            class="text-caption d-flex mb-1 justify-space-between"
                        >
                            <div>
                                {{ ToDate(item.data_curs) }}, {{item.location}}
                            </div>

                            <div>
                                {{ __('Ora :h. Durata: :d ore', {h: item.ora_curs, d: item.durata_curs}) }}
                            </div>
                        </v-sheet>
                    </v-card-text>
                </v-card>
            </v-sheet>

            <acces-curs-users 
                v-if="controller.currentview == 'users'"
                :app="app"
                :width="app.width - 280"
                :height="app.height - 64"
            />

            <acces-curs-files 
                v-if="controller.currentview == 'files'"
                :app="app"
                :width="app.width - 280"
                :height="app.height - 64"
            />

            <acces-curs-participants 
                v-if="controller.currentview == 'participants'"
                :app="app"
                :width="app.width - 280"
                :height="app.height - 64"
            />
        </v-card>

        <upload-file-menu 
            :app="app"
            :menu="controller.uploadfilemenu"
        />

        <import-participants-menu 
            :app="app"
            :menu="controller.importparticipantsmenu"
        />

        <delete-user-menu 
            :app="app"
            :menu="controller.deleteusermenu"
        />

        <preview-curs-menu 
            :app="app"
            :menu="controller.previewcursmenu"
        />

        <delete-participant-menu 
            :app="app"
            :menu="controller.deleteparticipantmenu"
        />

        <delete-file-menu 
            :app="app"
            :menu="controller.deletefilemenu"
        />
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {require: true},
        },

        computed: {
            controller() {
                return this.app.classes.Accescurs;
            },

            customer() {
                return this.controller.customer;
            },

            cursatasat() {
                return this.app.dataSession.Cursuriatasate.cursatasat;
            },

            curs() {
                return this.cursatasat.curs;
            }
        },

        methods: {
            LoadResources() {
                this.app.AddClassesByContext(require.context('./../../Classes', true, /\.class.js$/i));
                this.app.AddDataProvidersByContext(require.context('./../../DataSessions', true, /\.dataprovider.js$/i));
                this.app.AddDatatablesByContext(require.context('./../../Datatables', true, /\.datatable.js$/i));
                this.app.AddFormProvidersByContext(require.context('./../../FormProviders', true, /\.formprovider.js$/i));                
                this.app.AddFormsByContext(require.context('./../../Forms', true, /\.form.js$/i));
                this.app.AddFilterFormsByContext(require.context('./../../Filterforms', true, /\.filterform.js$/i));
                this.app.AddMenusByContext(require.context('./../../Toolbars', true, /\.toolbar.js$/i));
                this.app.AddMenusByContext(require.context('./../../Menus', true, /\.menu.js$/i));
                this.app.AddMenusByContext(require.context('./../../Breadcrumbs', true, /\.breadcrumbs.js$/i));
                this.app.AddRequestsByContext(require.context('./../../Requests', true, /\.request.js$/i));
            },

            InitDatatable() {
                this.app.datatables.Cursuriusers.RegisterDataProvider(this.app.dataSession.Customercursuriuser);
                this.app.datatables.Cursurifiles.RegisterDataProvider(this.app.dataSession.Customercursurifiles);
                this.app.datatables.Cursuriparticipants.RegisterDataProvider(this.app.dataSession.Customercursuriparticipants);
            },

            LoadData() {
                this.app.dataSession.Customers.GetById(this.controller.customer_id);
                this.app.dataSession.Cursuriatasate.GetById(this.app.payload.customer_curs_id);
            }
        },

        created() {
            this.LoadResources();
            this.InitDatatable();
            this.LoadData();
        },

        components: {
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },

        name: 'Index',
    }
</script>