@extends('layouts.main')

@section("content")
    <page-content :event="eventListener"></page-content>
@endsection
@section("components_declarations")
    @include("certificates.certificate_form_drag")
    <template id="page-content">
        <v-content>
            <v-container fluid fill-height>
                <v-layout justify-center>
                    <v-flex>

                        <template>
                            <v-card flat>
                                <v-toolbar
                                    color="grey"
                                    class="lighten-2"
                                    light
                                    flat
                                >
                                    <v-toolbar-title v-if="item.id">@{{ item.name }}</v-toolbar-title>
                                    <v-toolbar-title v-else>New Certificate</v-toolbar-title>
                                    <v-spacer></v-spacer>
                                    <v-btn flat href="{{route("certificates.index")}}">Certificates</v-btn>
                                </v-toolbar>
                                <v-card-text>
                                    <certificate-form :context="context" :certificate="item"
                                                      :event="eventListener"></certificate-form>
                                </v-card-text>

                            </v-card>
                        </template>
                    </v-flex>
                </v-layout>
            </v-container>

        </v-content>
    </template>
    <script>

        const PageContent = {
            template: "#page-content",
            components: {CertificateForm},
            data: () => ({

                loading: true,
                @if(isset($certificate))
                item:{!! $certificate !!},
                @else
                item: {
                    sections: [
                       /* {

                            width: 700,
                            name: "Certificate Configuration",
                            font_size: 18,
                            font_style: '',
                            font_family: '',
                            font_weight: '',
                            text_align: true,
                            padding_left: 5,
                            padding_top: 5,
                            padding_right: 5,
                            padding_bottom: 5,
                            margin_left: 0,
                            margin_top: 0,
                            margin_right: 0,
                            margin_bottom: 0,
                            background_image: '',
                            background: '',
                            border_size:2,
                            border_style:'dashed',
                            border_color: "#c5c4b8",
                        }, {
                            index:1,
                            name: "Learner Info",
                            content: "Learner Info",
                            font_size: 18,
                            font_family: '',
                            font_style: '',
                            font_weight: '',
                            text_align: "center",
                            width: null,
                            padding_left:0,
                            padding_top:1,
                            padding_right:0,
                            padding_bottom:1,
                            margin_left:0,
                            margin_top:1,
                            margin_right:0,
                            margin_bottom:1,
                            background_image: '',
                            background: '',
                            border_size:1,
                            border_style:'dashed',
                            border_color: "#c5c4b8",
                        }, {
                            index:2,
                            name: "Course Info",
                            content: "Course Info",

                            font_size: 18,
                            font_style: '',
                            font_weight: '',
                            font_family: '',
                            text_align: "center",
                            width: null,
                            padding_left:0,
                            padding_top:1,
                            padding_right:0,
                            padding_bottom:1,
                            margin_left:0,
                            margin_top:1,
                            margin_right:0,
                            margin_bottom:1,
                            background_image: '',
                            background: '',
                            border_size:1,
                            border_style:'dashed',
                            border_color: "#c5c4b8",
                        },{
                            index:3,
                            name: "Footer",
                            content: "Footer",
                            font_size: 18,
                            font_style: '',
                            font_weight: '',
                            font_family: '',
                            text_align: "center",
                            width: null,
                            padding_left:0,
                            padding_top:1,
                            padding_right:0,
                            padding_bottom:1,
                            margin_left:0,
                            margin_top:1,
                            margin_right:0,
                            margin_bottom:1,
                            background_image: '',
                            background: '',
                            border_size:1,
                            border_style:'dashed',
                            border_color: "#c5c4b8",
                        },*/
                    ]
                },
                @endif
            }),
            props: {
                source: String,
                context: Object,


                event: {
                    type: Function,
                    default: function (event, data) {
                    }
                },

            },
            computed: {},
            watch: {},
            mounted() {

                if (localStorage.getItem('settings')) this.settings = JSON.parse(localStorage.getItem('settings')) || this.settings;
                this.pagination = {rowsPerPage: 10, page: 1};

            },
            methods: {
                eventListener(event, data) {
                    switch (event) {
                        default:
                            (this.event)(event, data);

                            break;
                    }
                },

            },
        }
    </script>
@endsection
@section("components_instances")
    PageContent
@endsection