@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>
                <div 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',
                            }">
                        <template :key="ind"
                                  v-for="(section,ind) in certificate.sections">
                            <drag-resize
                                v-if="section.background_image"
                                :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 + ')',*/
                                                        backgroundImage: 'url(' + section.background_image + ')',
                                                        position: 'absolute',
                                                         boxSizing: 'border-box',
                                                        backgroundSize: '100% 100%',
                                                        fontSize: section.font_size +'px',
                                                        fontFamily: section.font_family + ' !important',
                                                        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>
                            <drag-resize
                                v-else
                                :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="{


                                                        position: 'absolute',
                                                         boxSizing: 'border-box',
                                                        backgroundSize: '100% 100%',
                                                        fontSize: section.font_size +'px',
                                                        fontFamily: section.font_family + ' !important',
                                                        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>
                        </template>

                    </div>


                </div>

            </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-layout>
                        <v-flex xs4 pa-1>
                            <v-btn color="primary" small block @click="duplicate" :loading="loading">Duplicate</v-btn>
                        </v-flex>
                        <v-flex xs4 pa-1>
                            <v-btn color="primary" small block @click="newSection" :loading="loading">Add Section
                            </v-btn>
                        </v-flex>
                        <v-flex xs4 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 data-drag-cancel="stop_here">
                    <v-layout data-drag-cancel="stop_here" id="left_toolbar" row wrap>
                        <v-flex xs12 data-drag-cancel="stop_here">
                            <strong>Possible inputs: </strong> [learner_name], [course_name], [instructor_name],
                            [date_completed]
                            <v-textarea

                                data-drag-cancel="stop_here"
                                v-model="item.content"
                                label="Content"
                                placeholder="Type Content here"
                                rows="3"
                                box
                            ></v-textarea>
                        </v-flex>

                        <v-flex xs12 data-drag-cancel="stop_here">

                            <v-layout row wrap data-drag-cancel="stop_here">
                                <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 data-drag-cancel="stop_here" label="X" type="number"
                                                                  size="15"
                                                                  v-model="item.left"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12 sm4 pr-2>
                                                    <v-text-field data-drag-cancel="stop_here" label="Y" type="number"
                                                                  size="15"
                                                                  v-model="item.top"></v-text-field>
                                                </v-flex>


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

                                                    <v-text-field data-drag-cancel="stop_here" label="Font Size"
                                                                  type="number" size="15"
                                                                  v-model="item.font_size"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12>
                                                    <v-select data-drag-cancel="stop_here"
                                                              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 data-drag-cancel="stop_here" label="Left"
                                                                  type="number"
                                                                  v-model="item.padding_left"></v-text-field>
                                                </v-flex>
                                                <v-flex xs12 sm6 pr-2>

                                                    <v-text-field data-drag-cancel="stop_here" 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 data-drag-cancel="stop_here" 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 data-drag-cancel="stop_here" 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>--}}
                                                   <label>Choose Background</label> <input type="file" @change="encodeImageFileAsURL" />
                                                </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: ["'Raleway', sans-serif", "'Roboto', sans-serif", "Arial,serif", "Helvetica, Arial, sans-serif", "Helvetica Neue, Helvetica, Arial, sans-serif"],
            item: {},
            listWidth: 0,
            listHeight: 0,
            parentWidth: 0,
            parentHeight: 0,
            selectedIndex: -1,
            toolbar: {
                'width': 400,
                'height': 500,
                'top': 150,
                'left': 700,
                'draggable': true,
                'resizable': true,
                'minw': 10,
                'minh': 10,
                'axis': 'both',
                'parentLim': true,
                'snapToGrid': false,
                'aspectRatio': true,
                '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.selectedIndex = 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.index = 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.index = 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() {
                this.certificate['sections'].splice(this.selectedIndex, 1);
                this.item = {};

            },
            duplicate() {
                var newItem = JSON.parse(JSON.stringify(this.item));
                newItem.left += 5;
                newItem.top += 5;
                newItem.index = this.certificate['sections'].length + 1;
                this.certificate['sections'].push(newItem);
                //this.item = newItem;

            },
            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;
                }
            },
            encodeImageFileAsURL(event) {
                var file = event.target.files[0];
                var reader = new FileReader();
                var _this = this;
                reader.onloadend = function () {
                   // console.log('RESULT', reader.result);
                    _this.item.background_image = reader.result;
                };
                reader.readAsDataURL(file);
            }

        }
    }
</script>