@include("components.drag_resize")

<style>
    #left_toolbar .v-text-field {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }
    #left_toolbar .v-input {
        align-items: flex-start;
        display: flex;
        flex: 1 1 auto;
        font-size: 12px !important;
        text-align: left;
    }
    #left_toolbar  .v-label{
        font-size: 12px !important;
    }
    #left_toolbar  input {
        max-height: 18px;
    }
    #left_toolbar  .v-label {
        height: 20px;
        line-height: 12px;
    }
</style>

<template id="certificate-form">


    <v-layout row wrap>

        <v-flex xs12>
            <v-layout >
                <v-flex  grow pr-2>
                    <v-text-field v-model="certificate.name" label="Certificate Name"></v-text-field>
                </v-flex>
                <v-flex shrink pr-2>
                    <v-select
                        v-model="certificate.orientation"
                        :items="['landscape','portrait']"
                        label="Paper Orientation"
                    ></v-select>
                </v-flex>
                <v-flex shrink pr-2>
                    <v-select
                        v-model="certificate.paper"
                        :items="['a4','a5','a3']"
                        label="Paper type"
                    ></v-select>
                </v-flex>
                <v-flex shrink pr-2>
                    <v-text-field v-model="certificate.width" type="number" label="Width"></v-text-field>
                </v-flex>
                <v-flex shrink pr-2>
                    <v-text-field v-model="certificate.height" type="number" label="Height"></v-text-field>
                </v-flex>
            </v-layout>




            <v-layout pa-2 row wrap>
                <v-flex id="certificate_container"
                        style="border: 1px dashed grey"
                         >


                    <div  id="list"
                          class="list"  :style="{width:certificate.width+'px',height:certificate.height+'px',
                            position: 'relative',
                            backgroundColor: 'white',
                            }" >

                        <drag-resize :key="ind"
                                     v-for="(section,ind) in certificate.sections"

                                     :w="section.width"
                                     :h="section.height"
                                     :x="section.left"
                                     :y="section.top"
                                     :parentW="listWidth"
                                     :parentH="listHeight"
                                     :axis="section.axis"
                                     :isActive="section.active"
                                     :minw="section.minw"
                                     :minh="section.minh"
                                     :isDraggable="section.draggable"
                                     :isResizable="section.resizable"
                                     :parentLimitation="section.parentLim"
                                     :snapToGrid="section.snapToGrid"
                                     :aspectRatio="section.aspectRatio"
                                     :z="section.zIndex"
                                     v-on:activated="activateEv(ind)"
                                     v-on:deactivated="deactivateEv(ind)"
                                     v-on:dragging="changePosition($event, ind)"
                                     v-on:resizing="changeSize($event, ind)"

                                     :style="{

                                                        backgroundImage: 'url({{url("/")}}' + section.background_image + ')',
                                                        position: 'absolute',
                                                         boxSizing: 'border-box',
                                                        backgroundSize: '100% 100%',
                                                        fontSize: section.font_size +'px',
                                                        fontFamily: section.font_family,
                                                        fontStyle: section.font_style,
                                                        fontWeight: section.font_weight,
                                                        color: section.font_color,
                                                        textAlign: section.text_align,
                                                        paddingLeft: section.padding_left +'px',
                                                        paddingTop: section.padding_top +'px',
                                                        paddingRight: section.padding_right +'px',
                                                        paddingBottom: section.padding_bottom +'px',

                                                        border: section.border_size + 'px '+ section.border_style +' '+section.border_color,
                                                        backgroundColor:section.background_color,

                                                        }"
                        >



                                <p v-html="section.content"></p>

                        </drag-resize>
                    </div>



                </v-flex>

            </v-layout>


        </v-flex>
        <v-flex xs12  >
            <v-divider></v-divider>
            <strong>Possible inputs: </strong> [learner_name], [course_name], [instructor_name], [date_completed]
            <quill-editor
                v-model="item.content"
                label="Certificate template"
                placeholder="Certificate template"
                rows="3"
                box
            ></quill-editor>
        </v-flex>
        <drag-resize


                     :w="toolbar.width"
                     :h="toolbar.height"
                     :x="toolbar.left"
                     :y="toolbar.top"
                     :parentW="parentWidth"
                     :parentH="parentHeight"
                     :axis="toolbar.axis"
                     :isActive="toolbar.active"
                     :minw="toolbar.minw"
                     :minh="toolbar.minh"
                     :isDraggable="toolbar.draggable"
                     :isResizable="toolbar.resizable"
                     :parentLimitation="toolbar.parentLim"
                     :snapToGrid="toolbar.snapToGrid"
                     :aspectRatio="toolbar.aspectRatio"
                     :z="toolbar.zIndex"



        >

            <v-card >

                <v-toolbar light class="grey lighten-3">
                    <v-toolbar-title>ToolBar</v-toolbar-title>
                    <v-spacer>

                    </v-spacer>
                    <v-layout>
                        <v-flex xs6 pa-1>
                            <v-btn color="primary" small block @click="newSection" :loading="loading">Add Section</v-btn>
                        </v-flex>
                        <v-flex xs6 pa-1>
                            <v-btn block color="primary" small :loading="loading" @click="save">{{__("components.Save")}}</v-btn>
                        </v-flex>
                    </v-layout>
                </v-toolbar>

                <v-card-text>
                    <v-layout  id="left_toolbar" row wrap >


                        <v-flex xs12>

                            <v-layout row wrap >
                                <v-flex xs6>
                                    <v-btn block outline small @click="item.zIndex -=1">Send backward</v-btn>
                                </v-flex>
                                <v-flex xs6>
                                    <v-btn block outline small @click="item.zIndex +=1">Send forward</v-btn>
                                </v-flex>
                                <v-flex mt-2 xs12>
                                    <v-layout row wrap>


                                        <v-flex xs12>
                                            <v-layout row wrap>
                                                <v-flex xs12 sm4 pr-2>
                                                    <v-text-field label="Width" type="number" size="15"
                                                                  v-model="item.width"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12 sm4 pr-2>
                                                    <v-text-field label="Height" type="number" size="15"
                                                                  v-model="item.height"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12 sm4>

                                                    <v-text-field label="Font Size" type="number" size="15"
                                                                  v-model="item.font_size"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-select
                                                        v-model="item.font_family"
                                                        :items="fonts_families"
                                                        label="Default Font"
                                                    ></v-select>

                                                </v-flex>

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

                                        <v-flex xs12>

                                            <v-flex xs12><v-label>Padding Settings</v-label></v-flex>
                                            <v-layout mt-2>
                                                <v-flex xs12 sm6 pr-2>

                                                    <v-text-field label="Left" type="number"
                                                                  v-model="item.padding_left"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12 sm6 pr-2>

                                                    <v-text-field label="Top" type="number"
                                                                  v-model="item.padding_top"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12 sm6 pr-2>

                                                    <v-text-field label="Right" type="number"
                                                                  v-model="item.padding_right"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12 sm6 pr-2>

                                                    <v-text-field label="Bottom" type="number"
                                                                  v-model="item.padding_bottom"></v-text-field>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>



                                        <v-flex xs12>
                                            <v-divider></v-divider>
                                            <v-flex xs12><v-label>Border Settings</v-label></v-flex>

                                            <v-layout mt-2>

                                                <v-flex xs12 sm6 pr-2>
                                                    <v-select
                                                        v-model="item.border_style"
                                                        :items="['dashed','solid']"
                                                        label="Style"
                                                    ></v-select>
                                                </v-flex>
                                                <v-flex xs12 sm6 pr-2>
                                                    <v-text-field label="Size" type="number"
                                                                  v-model="item.border_size"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12 sm6 pr-2>

                                                    <v-label>Color</v-label>
                                                    <input type="color" id="html5colorpicker" v-model="item.border_color"
                                                           value="#ff0000"/>
                                                </v-flex>

                                            </v-layout>
                                        </v-flex>
                                        <v-flex xs12>
                                            <v-divider></v-divider>
                                            <v-flex xs12><v-label>Format</v-label></v-flex>
                                            <v-layout>
                                                <v-flex shrink>

                                                    <v-checkbox
                                                        v-model="item.font_weight"
                                                        value="bold"
                                                        label="Bold"
                                                    ></v-checkbox>
                                                </v-flex>
                                                <v-flex shrink>
                                                    <v-checkbox
                                                        v-model="item.font_style"
                                                        value="italic"
                                                        label="Italic"
                                                    ></v-checkbox>
                                                </v-flex>
                                                <v-flex shrink>
                                                    <v-checkbox
                                                        v-model="item.text_align"
                                                        value="center"
                                                        label="Align Center"
                                                    ></v-checkbox>
                                                </v-flex>
                                                <v-flex shrink>
                                                    <v-label>Color</v-label>
                                                    <br/>
                                                    <input type="color" id="html5colorpicker" v-model="item.font_color"
                                                           value="#ff0000"/>
                                                </v-flex>
                                                <v-flex shrink>
                                                    <v-label>Background</v-label>
                                                    <br/>
                                                    <input type="color" id="html5colorpicker" v-model="item.background_color"
                                                           value="#ff0000"/>
                                                </v-flex>


                                            </v-layout>

                                        </v-flex>
                                        <v-flex xs12>
                                            <v-layout row wrap>
                                                <v-flex xs6>
                                                    <file-upload label="Change background Image" inputname="file" :event="eventListener" folder="certificates/"
                                                                 accept="image/*"></file-upload>
                                                </v-flex>
                                                <v-flex xs6>
                                                    <v-btn flat color="red" @click="item.background_image = '';item.background_image_file = ''">Remove Background</v-btn>
                                                </v-flex>
                                            </v-layout>




                                        </v-flex>


                                        <v-flex xs12>
                                            <v-btn small color="red" dark @click="remove">Remove section</v-btn>
                                        </v-flex>
                                    </v-layout>
                                </v-flex>

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

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

            </v-card>



        </drag-resize>





    </v-layout>


</template>
<style>
    /*body {
        height: 100vh;
        width: 100vw;
        background-color: #ECECEC;
    }

    #app {
        margin: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        position: relative;
        font-family: 'Lato', sans-serif;
    }
*/
    .filler {
        width: 100%;
        height: 100%;
        display: inline-block;
        position: absolute;
    }

    .list {
        /*position: relative;
        border:2px solid grey;
        box-shadow: 0 0 2px #AAA;
        background-color: white;*/
    }


</style>
<script src="{{@asset("js/ckeditor.js")}}"></script>
<script>

    const CertificateForm = {
        template: "#certificate-form",
        components: {FileUpload,DragResize},
        props: {
            loading: false,
            source: String,
            context: Object,
            certificate: {
                type: Object,
                default: {default_font_size: 12}
            },
            event: {
                type: Function,
                default: function (event, data) {
                }
            },

        },
        data: () => ({

            fonts_families: ["'Roboto', sans-serif", "Arial,serif", "Helvetica, Arial, sans-serif", "Helvetica Neue, Helvetica, Arial, sans-serif"],
            item: {},
            listWidth: 0,
            listHeight: 0,
            parentWidth: 0,
            parentHeight: 0,
            toolbar:{
                'width': 400,
                'height': 500,
                'top': 150,
                'left': 700,
                'draggable': true,
                'resizable': true,
                'minw': 10,
                'minh': 10,
                'axis': 'both',
                'parentLim': true,
                'snapToGrid': false,
                'aspectRatio': false,
                'zIndex': 1,
                'background_color': '#EF9A9A',
                'active': false,
            }
        }),
        computed: {
            cert: function () {
                return this.certificate.sections[0];
            }
        },
        mounted() {
            let listEl = document.getElementById('list');
            let parent = document.getElementById('page-content');

            this.listWidth = listEl.clientWidth;
            this.listHeight = listEl.clientHeight;

            this.parentWidth = listEl.clientWidth;
            this.parentHeight = listEl.clientHeight;

            window.addEventListener('resize', ()=>{
                this.listWidth = listEl.clientWidth;
                this.listHeight = listEl.clientHeight;
            })
        },
        methods: {
            activateEv(index) {
                this.item = this.certificate.sections[index];
                this.item.index = index;
              /*  this.$store.dispatch('rect/setActive', {id: index});*/
            },

            deactivateEv(index) {
                /*this.$store.dispatch('rect/unsetActive', {id: index});*/
            },

            changePosition(newRect, index) {
                this.item = this.certificate.sections[index];
                this.item.top = newRect.top;
                this.item.left = newRect.left;
                this.item.width = newRect.width;
                this.item.height = newRect.height;
               /* this.$store.dispatch('rect/setTop', {id: index, top: newRect.top});
                this.$store.dispatch('rect/setLeft', {id: index, left: newRect.left});
                this.$store.dispatch('rect/setWidth', {id: index, width: newRect.width});
                this.$store.dispatch('rect/setHeight', {id: index, height: newRect.height});*/
            },

            changeSize(newRect, index) {
                this.item = this.certificate.sections[index];
                this.item.top = newRect.top;
                this.item.left = newRect.left;
                this.item.width = newRect.width;
                this.item.height = newRect.height;
                /*this.$store.dispatch('rect/setTop', {id: index, top: newRect.top});
                this.$store.dispatch('rect/setLeft', {id: index, left: newRect.left});
                this.$store.dispatch('rect/setWidth', {id: index, width: newRect.width});
                this.$store.dispatch('rect/setHeight', {id: index, height: newRect.height});*/
            },
            save: function () {
                this.persist('post', "{{route("certificates.store")}}", this.certificate);
            },
            persist(method, uri, object) {


                this.form = {};
                var errors = false;
                if (!object.name || object.name.trim() === "") {

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

                object.template = $("#certificate_container").html();

                var _this = this;
                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 {

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


                        }


                    }).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
                });


            },
            newSection() {
                if (!this.certificate['sections']) {
                    this.certificate['sections'] = [];
                }

                //this.$nextTick(function () {
                this.certificate['sections'].push({
                    id: null,
                    index: (this.certificate['sections'].length),
                    name: "Section #" + (this.certificate['sections'].length),
                    content: "Enter content here " + (this.certificate['sections'].length),

                    'width': 200,
                    'height': 150,
                    'top': 0,
                    'left': 0,
                    'draggable': true,
                    'resizable': true,
                    'minw': 1,
                    'minh': 1,
                    'axis': 'both',
                    'parentLim': true,
                    'snapToGrid': false,
                    'aspectRatio': false,
                    'zIndex': 1,
                    'background_color': '#EF9A9A',
                    'active': false,

                });
                //});


            },
            remove() {
                if (this.item.index >= 0){


                    this.certificate['sections'].splice(this.item.index, 1);
                    this.item = {};
                }

            },
            eventListener(event, data) {
                switch (event) {
                    case "toast":
                        (this.event)("toast", data);
                        break;
                    case "upload":

                        this.item.background_image = data.url;
                        this.item.background_image_file = data.path;

                        break;
                    default:
                        (this.event)(event, data);
                        break;
                }
            }
        }
    }
</script>