<?php echo HTML::script('js/tree/nestedSortable.js'); ?>

<?php echo HTML::script('js/tree/croppie.js'); ?>

<?php echo HTML::script('js/helper/validationModule.js'); ?>

<script>

    var locale = '<?php echo App::getLocale(); ?>';
    var token = '<?php echo csrf_token(); ?>';
    var cityID = '<?php echo $city_id; ?>';
    var postURL = "<?php echo URL::route('saveCategoryTree'); ?>";
    var templateTypesURL = "<?php echo URL::route("getTemplateTypes"); ?>";
    var imageURL = "<?php echo url('/uploads/core/trees/'); ?>";
    var treeJSON = '<?php echo $tree; ?>';
    var cityTextColor = '<?php echo $textColor; ?>';
    var cityBackgroundColor = '<?php echo $backgroundColor; ?>';

    //firstTemplate=parseInt(firstTemplate);


    try {
        var treeData = JSON.parse(treeJSON);
    } catch (exp) {
        var treeData = [];
        console.log(['Error parsing tree data. ', exp.message]);
    }

    var badCategories = JSON.parse('<?php echo $badCategories; ?>');
    var saveSuccessText = '<?php echo Lang::get('tree.msg.success.save_tree'); ?>';
    var saveErrorText = '<?php echo Lang::get('tree.msg.error.save_tree'); ?>';

    var warningCreate = '<?php echo Lang::get('tree.msg.warning.tree_create'); ?>';
    var warningMove = '<?php echo Lang::get('tree.button.add_new_category'); ?>';
    var warningNoName = '<?php echo Lang::get('tree.msg.warning.no_category_name'); ?>';
    var warningNothingSelected = '<?php echo Lang::get('tree.msg.warning.nothing_selected'); ?>';
    var warningLeaving = '<?php echo Lang::get('tree.msg.warning.leaving'); ?>';

    var addNewCategory = '<?php echo Lang::get('tree.button.add_new_category'); ?>';
    var addNewSubcategory = '<?php echo Lang::get('tree.button.add_new_subcategory'); ?>';
    var getTemplateURL = '<?php echo URL::route('getTemplateAjax'); ?>';
</script>

<div class="row">
    <!-- City Info Categories start -->
    <div id="ci-categories">
        <div class="row">
            <div class="col s12">
                <div class="widget-holder transparent fadeIn">
                    <div class="widget-heading" id="headding">
                        <h2 class="widget-heading-thick"><?php echo Lang::get('tree.builder.title'); ?></h2>
                        <p><?php echo Lang::get('tree.builder.description'); ?></p>
                        <a class="btn-floating waves-effect waves-light btn-primary addCat tooltipped"
                           data-position="top" onclick="addCategory()"
                           data-tooltip="<?php echo Lang::get('tree.button.add_category'); ?>"><i
                                    class="material-icons">add</i></a>

                    </div>

                    <div class="widget-content conflicts" id="resolve" >

                        <div v-if="special[0]" class="col s12" >

                            <h2 class="widget-heading-thick"><?php echo Lang::get('tree.conflicts.special'); ?></h2>
                            <p>
                                {{special[0].title}} <?php echo Lang::get('tree.conflicts.contains'); ?>

                            </p>


                            <div class="row">
                                <div v-if="special[0].posts && special[0].posts.length" class="col s12">
                                    <h5><?php echo Lang::get('tree.conflicts.posts_in_category'); ?></h5>
                                    <ul class="posts-in-cat-list">
                                        <li v-for="(post, pidx) in special[0].posts">{{ post.title }}</li>
                                    </ul>
                                    <ul  class="collapsible" data-collapsible="accordion">
                                        <li>
                                            <div class="collapsible-header"><?php echo Lang::get('tree.conflicts.move_to_category'); ?> :</div>
                                            <div class="collapsible-body">
                                                <a>
                                                    <ul class="replace-to-cat">
                                                        <li v-on:click="movePostToCat(spidx, 0)" v-for="(sub, spidx) in cat4posts"><i class="material-icons">arrow_forward</i> {{sub.title }}</li>
                                                    </ul>
                                                </a>
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                                <div v-if="special[0].subList && special[0].subList.length" class="col s12">
                                    <h5><?php echo Lang::get('tree.conflicts.subs_in_category'); ?></h5>
                                    <ul class="posts-in-cat-list">
                                        <li v-for="(sub, sidx) in special[0].subList">{{ sub.title }}</li>
                                    </ul>
                                    <ul   class="collapsible" data-collapsible="accordion">
                                        <li>
                                            <div   class="collapsible-header"><?php echo Lang::get('tree.conflicts.move_to_category'); ?> :</div>
                                            <div class="collapsible-body">

                                                <ul class="replace-to-cat">

                                                    <li><a v-on:click="moveCatToCat(0, 0)"><i class="material-icons">arrow_forward</i> <?php echo Lang::get('tree.conflicts.root'); ?> </a></li>

                                                    <template v-for="(categ, ssidx) in cat4cats">

                                                        <li><a v-on:click="moveCatToCat(ssidx, 0)"><i class="material-icons">arrow_forward</i> {{categ.title }}</a></li>

                                                    </template>
                                                </ul>

                                            </div>
                                        </li>

                                    </ul>
                                </div>
                            </div>



                        </div>

                        <div v-if="deleting.id" class="col s12" >

                            <h2 class="widget-heading-thick"><?php echo Lang::get('tree.conflicts.deleting'); ?></h2>
                            <p>
                                {{deleting.title}} <?php echo Lang::get('tree.conflicts.contains'); ?>

                            </p>
                            <div class="modal-footer right-align">

                            <a v-on:click="cancelMoveCatToCat()" class="modal-action modal-close waves-effect waves-light btn-flat modal-cancel"><?php echo Lang::get('core.cancel'); ?></a>

                            </div>


                                        <div class="row">
                                            <div v-if="deleting.posts && deleting.posts.length" class="col s12">
                                                <h5><?php echo Lang::get('tree.conflicts.posts_in_category'); ?></h5>
                                                <ul class="posts-in-cat-list">
                                                    <li v-for="(post, pidx) in deleting.posts">{{ post.title }}</li>
                                                </ul>
                                                <ul  class="collapsible" data-collapsible="accordion">
                                                    <li>
                                                        <div class="collapsible-header"><?php echo Lang::get('tree.conflicts.move_to_category'); ?> :</div>
                                                        <div class="collapsible-body">
                                                            <a>
                                                                <ul class="replace-to-cat">
                                                                    <li v-on:click="movePostToCat(spidx, deleting.id, true)" v-for="(sub, spidx) in cat4posts"><i class="material-icons">arrow_forward</i> {{sub.title }}</li>
                                                                </ul>
                                                            </a>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>
                                            <div v-if="deleting.categories && deleting.categories.length" class="col s12">
                                                <h5><?php echo Lang::get('tree.conflicts.subs_in_category'); ?></h5>
                                                <ul class="posts-in-cat-list">
                                                    <li v-for="(sub, sidx) in deleting.categories">{{ sub.title }}</li>
                                                </ul>
                                                <ul   class="collapsible" data-collapsible="accordion">
                                                    <li>
                                                        <div   class="collapsible-header"><?php echo Lang::get('tree.conflicts.move_to_category'); ?> :</div>
                                                        <div class="collapsible-body">

                                                                <ul class="replace-to-cat">

                                                                    <li><a v-on:click="moveCatToCat(0, deleting.id, true)"><i class="material-icons">arrow_forward</i> <?php echo Lang::get('tree.conflicts.root'); ?> </a></li>

                                                                    <template v-for="(categ, ssidx) in cat4cats">

                                                                        <li><a v-on:click="moveCatToCat(ssidx, deleting.id, true)"><i class="material-icons">arrow_forward</i> {{categ.title }}</a></li>

                                                                    </template>
                                                                </ul>

                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>



                        </div>
                        <div v-if="bad.length" class="col s12" >

                            <h2 class="widget-heading-thick"><?php echo Lang::get('tree.conflicts.conflict'); ?></h2>
                            <p>
                                <?php echo Lang::get('tree.conflicts.choose_categories_or_posts'); ?>

                            </p>

                            <ul class="collapsible" data-collapsible="accordion">
                                <li class="root" v-for="(cat, idx) in bad">
                                    <div class="collapsible-header hoverable">{{ cat.title }}</div>
                                    <div class="collapsible-body">
                                        <div class="row">
                                            <div class="col s6">
                                                <h5><?php echo Lang::get('tree.conflicts.posts_in_category'); ?></h5>
                                                <ul class="posts-in-cat-list">
                                                    <li v-for="(post, pidx) in cat.postList">{{ post.title }}</li>
                                                </ul>
                                                <ul :id="'move-posts'+idx"  class="collapsible" data-collapsible="accordion">
                                                    <li>
                                                        <div class="collapsible-header"><?php echo Lang::get('tree.conflicts.move_to_category'); ?> :</div>
                                                        <div class="collapsible-body">
                                                            <a>
                                                                <ul class="replace-to-cat">
                                                                    <li v-on:click="movePostToCat(spidx, idx)" v-for="(sub, spidx) in cat4posts"><i class="material-icons">arrow_forward</i> {{sub.title }}</li>
                                                                </ul>
                                                            </a>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>
                                            <div class="col s6">
                                                <h5><?php echo Lang::get('tree.conflicts.subs_in_category'); ?></h5>
                                                <ul class="posts-in-cat-list">
                                                    <li v-for="(sub, sidx) in cat.subList">{{ sub.title }}</li>
                                                </ul>
                                                <ul :id="'move-cat'+idx"  class="collapsible" data-collapsible="accordion">
                                                    <li>
                                                        <div   class="collapsible-header"><?php echo Lang::get('tree.conflicts.move_to_category'); ?> :</div>
                                                        <div class="collapsible-body">

                                                            <ul class="replace-to-cat">
                                                                <li><a v-on:click="moveCatToCat(0, idx)"><i class="material-icons">arrow_forward</i> <?php echo Lang::get('tree.conflicts.root'); ?> </a></li>

                                                                <template v-for="(categ, ssidx) in cat4cats">

                                                                    <li><a v-on:click="moveCatToCat(ssidx, idx)"><i class="material-icons">arrow_forward</i> {{categ.title }}</a></li>

                                                                </template>
                                                            </ul>

                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>

                                    </div>
                                </li>
                            </ul>


                        </div>
                    </div>

                    <div class="widget-content">

                        <div class="col s12" id="newTree">
                            <h3><?php echo Lang::get('tree.builder.tree_display_title'); ?></h3>

                            <?php echo $newTree; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="add-category-modal" class="modal modal-fixed-footer">
    <div class="progress">
        <div class="indeterminate"></div>
    </div>
    <form id="editCat" method="POST" action="/info/categories/saveCategory" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
        <input type="hidden" name="city" id="cityID" value="<?php echo $city_id; ?>">
        <input name="id" type="hidden" id="catID" value="">
        <input name="parent" type="hidden" id="parent" value="0">
        <input type="hidden" id="catImage" name="catImage" value="">
        <input type="hidden" id="special_type_id" name="special_type_id">
        <input type="hidden" id="catImageType" name="catImageType" value="">
        <input type="hidden" id="catImageLink" value="">
        <input type="hidden" id="catImageRemove" value="false">
        <input type="hidden" name="backgroundColor">
        <input type="hidden" name="textColor">
            <div class="modal-content">
                <h4><?php echo Lang::get('tree.builder.edit_category_title'); ?></h4>

                        <ul class="tabs tabs-fixed-width add-category-tabs">
                            <li class="tab"><a class="active"
                                               href="#category-basic-info"><?php echo Lang::get('tree.builder.basic_info'); ?></a>
                            </li>
                            <li id="options-menu" class="tab"><a href="#category-options"><?php echo Lang::get('tree.builder.options'); ?></a></li>
                        </ul>
                    <div id="category-basic-info" class="fadeIn">

                        <div class="inputs-wrapper">
                            <div class="row">
                                <div class="col s12 m12 l6">
                                    <div class="post-img-mobile">
                                        <h5><?php echo Lang::get('template.labels.thumb'); ?></h5>
                                        <div class="post-img-preview">
                                            <div v-show="!(catImageThumb && !thumbUrl)" id="preview"
                                                 :style="previewColor" class="valign-wrapper left-align">
                                                <span :style="previewText" class="truncate">{{ title }}</span>
                                            </div>
                                          <!--  <p v-show="!thumbUrl"
                                               class="invalid"><?php echo Lang::get('validation.required', ['attribute'=>'']); ?></p> -->


                                            <img style="width:100%;" v-show="thumbUrl" id="thumb"
                                                 class="report-thumb-small" :src="thumbUrl" v-on:click="thumb()">
                                            <a v-on:click="thumb()"
                                               class="icon-btn icon-btn-edit edit-image btn-floating"><i
                                                        class="material-icons">image</i></a>
                                        <a v-on:click="thumbDelete()" class="icon-btn  delete-image deep-orange darken-2 btn-floating icon-btn-delete"><i class="material-icons">delete</i></a>

                                        </div>


                                        <div class="input-group text-color-holder">
                                            <input type="color" id="catTextColor" v-model="textColor">
                                            <label for="catColor"><?php echo Lang::get('tree.labels.builder.text_color'); ?></label>
                                            <div class="swatches-wrapper">
                                                <div class="swatch" v-for="(oneswatch, color) in swatches"
                                                     :style="oneswatch" v-on:click="changeTextColor(color)"></div>
                                            </div>
                                        </div>

                                        <div class="input-group bg-color-holder">
                                            <input type="color" id="catColor" v-model="backgroundColor">
                                            <label for="catColor"><?php echo Lang::get('tree.labels.builder.background_color'); ?></label>
                                            <div class="swatches-wrapper">
                                                <div class="swatch" v-for="(oneswatch, color) in swatches"
                                                     :style="oneswatch" v-on:click="changeCategoryColor(color)"></div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col s12 m12 l6">

                                    <div class="input-field col s12" id="titleDiv">
                                        <input id="catTitle" name="title" type="text" v-model="title">
                                        <label for="category-title"><?php echo Lang::get('tree.labels.builder.title'); ?> </label>
                                    </div>
                                    <div class="input-field col s12">
                                        <textarea id="catDescription" name="description" class="materialize-textarea"
                                                  v-model="description"></textarea>
                                        <label for="category-desc"><?php echo Lang::get('tree.labels.builder.description'); ?></label>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div id="category-options" class="fadeIn">


                        <div id="posts-settings">
                            <div class="inputs-wrapper">
                                <div class="row">
                                    <div class="col s12 m6 valign-wrapper">
                                        <div class="row input-field">
                                            <p class=" col s12">
                                                <?php echo Lang::get('tree.labels.builder.has_posts.label'); ?>

                                                <input name="hasPosts" type="radio" checked="checked" id="categoryposts-no"
                                                       value="false"/>
                                                <label for="categoryposts-no"><?php echo Lang::get('tree.labels.builder.has_posts.no'); ?></label>

                                                <input name="hasPosts" type="radio" id="categoryposts-yes" value="true"/>
                                                <label for="categoryposts-yes"><?php echo Lang::get('tree.labels.builder.has_posts.yes'); ?></label>

                                            </p>
                                        </div>
                                    </div>

                                    <div class="col s12 m6 valign-wrapper">
                                        <div id="relationshipSharing" class="form-group input-field">
                                            <p><?php echo Lang::get('tree.labels.builder.has_relationship'); ?>

                                                <input type="radio" name="hasRelationship" id="relationshipSharingTrue"
                                                       value="true">
                                                <label for="relationshipSharingTrue"><?php echo Lang::get('tree.labels.builder.has_posts.yes'); ?></label>

                                                <input type="radio" name="hasRelationship" id="relationshipSharingFalse"
                                                       value="false">
                                                <label for="relationshipSharingFalse"><?php echo Lang::get('tree.labels.builder.has_posts.no'); ?></label>
                                            </p>

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <p class="col s12" id="children-warning">
                                        <?php echo Lang::get('tree.conflicts.if_post_no_cat'); ?>

                                    </p>
                                </div>
                            </div>

                            <div class="inputs-wrapper hidden" id="template-manager">
                                <div class="row">
                                    <div class="input-field col s11 mb-15" id="catTemplateDiv">
                                        <select name="catTemplate" id="catTemplate" class="browser-default"
                                                v-model="selectedTemplate" v-on:change="edit=1">
                                            <?php foreach($templates as $template): ?>
                                                <option  value="<?php echo $template->id; ?>"><?php echo $template->name; ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                        <label v-bind:class="{'active':selectedTemplate != 0}"><?php echo Lang::get('tree.labels.builder.template'); ?></label>

                                    </div>
                                    <div class="col s1 mt-15">
                                        <a class="btn-floating waves-effect waves-light btn-primary"
                                           v-on:click="createNewTemplate()"><i class="material-icons">add</i></a>
                                    </div>
                                    <template v-if="edit || newTemplate">

                                        <div class="input-field col s11 fadeIn">
                                            <input v-model="templateName" id="template-name" type="text">
                                            <label for="template-name"
                                                   v-bind:class="{'active':templateName != ''}"><?php echo Lang::get("tree.labels.builder.title"); ?></label>
                                        </div>
                                        <div class="col s8 offset-s2 fadeIn">
                                            <draggable :list="templateItems" class="dragArea mt-15" @end="onEnd">
                                            <div class="cat-template-item hoverable"
                                                 v-for="templateItem in templateItems" :key="templateItem.id"
                                                 v-bind:class="{'custom-type' : templateItem.custom}">
                                                <p  style="text-transform: capitalize">{{templateItem.name}} {{templateItem.order}}</p>
                                                <div class="icons-holder fadeIn"><a href="#"
                                                                                    class="icon-btn icon-btn-edit"
                                                                                    v-if="templateItem.custom"
                                                                                    v-on:click="editTemplateItem(templateItem)">
                                                        <i class="material-icons">mode_edit</i></a> <a
                                                            class="icon-btn icon-btn-delete"
                                                            v-if="(templateItem.type != 'title' && templateItem.type != 'text' && templateItem.type != 'image') || templateItem.custom"
                                                            v-on:click="removeTemplateItem(templateItem)"> <i
                                                                class="material-icons">delete</i> </a>

                                                </div>
                                                <div v-if="templateItem.editing" class="input-field">
                                                    <input v-model="templateItem.name" type="text">
                                                    <label class="active"
                                                           for="templateItem"><?php echo Lang::get("tree.labels.builder.template_item_name"); ?></label>
                                                    <a v-on:click="saveEditTemplateItem(templateItem)" href="#"
                                                       class="btn-floating waves-effect waves-light btn-primary"><i
                                                                class="material-icons">save</i></a>

                                                </div>
                                            </div>
                                            </draggable>
                                        </div>
                                        <div class="col s8 offset-s2 fadeIn">
                                            <select class="browser-default" v-model="selectedType"
                                                    v-on:change="typeSelected()">
                                                <option value="0"><?php echo Lang::get('tree.labels.choose_field'); ?></option>
                                                <option v-for="templateType in templateTypes"
                                                        :value="templateType">{{templateType.name}}</option>
                                            </select>
                                        </div>
                                        <div class="row fadeIn">
                                            <div class="col s12 center-align mt-15">
                                                <a class="btn-floating waves-effect waves-light btn-cancel"
                                                   v-on:click="closeForm()" id="cancel-template"><i
                                                            class="material-icons">clear</i></a>
                                                <a class="btn-floating waves-effect waves-light btn-primary"
                                                   v-on:click="submitForm()"><i class="material-icons">done</i></a>
                                            </div>
                                        </div>
                                    </template>

                                </div>
                            </div>
                        </div>

                        <div class="inputs-wrapper">
                            <div class="row">
                                <div class="input-field col s12">
                                    <div class="select-companies">
                                        <label><?php echo Lang::get("tree.labels.builder.companies"); ?></label>
                                        <select name="catCompanies[]" id="catCompanies" multiple>
                                            <?php foreach($companies as $key => $company): ?>
                                                <option value="<?php echo $company->id; ?>"><?php echo $company->name; ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="input-field col s12">
                                    <textarea id="catMessage" name="catMessage" class="materialize-textarea"></textarea>
                                    <label for="user-message"><?php echo Lang::get("tree.labels.builder.message"); ?></label>
                                </div>
                            </div>
                        </div>

                    </div>
            </div>
        <div hidden id="bin" class="fadeIn card">
            <div hidden id="hover-up">
                <i class="material-icons">arrow_upward</i>
            </div>
            <div hidden id="hover-down">
                <i class="material-icons">arrow_downward</i>
            </div>
            <i class="material-icons">delete</i>
        </div>
        <div class="modal-footer right-align">

            <a class="modal-action modal-close waves-effect waves-light btn-flat modal-cancel"><?php echo Lang::get('core.cancel'); ?></a>
            <button class="btn btn-success modal-action  waves-effect waves-light btn-flat modal-save" id="saveCategory"
                    disabled="disabled"><?php echo Lang::get('tree.button.save_changes'); ?></button>
            <!--  <a href="#!" class="modal-action modal-close waves-effect waves-light btn-flat modal-save" id="saveCategory">Save</a> -->

        </div>
    </form>
</div>



<div id="edit-thumb-modal" class="modal modal-fixed-footer">
    <div class="modal-content">
        <div class="fadeIn">
            <div class="inputs-wrapper valign-wrapper">
                <div class="row">
                    <div class="col s12 m12 l12">
                        <div class="cropper-holder hoverable">
                            <div class="croppa-overlay" :style="previewColor">

                            </div>
                            <croppa v-model="croppa"
                                    :initial-image="thumb"
                                    :width="600"
                                    :height="188"
                                    placeholder="<?php echo Lang::get('initiatives.croppa'); ?>"
                                    placeholder-color="#000"
                                    :placeholder-font-size="16"
                                    canvas-color="transparent"
                                    :show-remove-button="true"
                                    remove-button-color="#ff9800"
                                    :prevent-white-space="true"
                            >
                            </croppa>

                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>


    <div class="modal-footer right-align">
        <a class="modal-action modal-close waves-effect waves-light btn-flat modal-cancel"><?php echo Lang::get('core.cancel'); ?></a>
        <a v-on:click="saveThumb()"
           class="modal-action modal-close waves-effect waves-light btn-flat modal-save"><?php echo Lang::get('core.save'); ?></a>


    </div>
</div>



<script type="text/javascript">
    var titleLang = '<?php echo Lang::get('template.labels.title'); ?>';
    var textLang = '<?php echo Lang::get('template.labels.text'); ?>';
    var imageLang = '<?php echo Lang::get('template.labels.image'); ?>';
    var locationLang = '<?php echo Lang::get('template.labels.location'); ?>';
    var emailLang = '<?php echo Lang::get('template.labels.email'); ?>';
    var phoneLang = '<?php echo Lang::get('template.labels.phone'); ?>';
    var websiteLang = '<?php echo Lang::get('template.labels.website'); ?>';
    var addressLang = '<?php echo Lang::get('template.labels.address'); ?>';
    var excerptLang = '<?php echo Lang::get('template.labels.excerpt'); ?>';
    var galleryLang = '<?php echo Lang::get('template.labels.gallery'); ?>';
    var dateLang = '<?php echo Lang::get('template.labels.date'); ?>';
    var date_toLang = '<?php echo Lang::get('template.labels.date_to'); ?>';
    var garbageLang = '<?php echo Lang::get('template.labels.garbage'); ?>';

    var deleteLang = '<?php echo Lang::get('tree.button.delete_category'); ?>';
</script>

<?php echo HTML::script('js/cityinfo/templateManager.js'); ?>

<?php echo HTML::script('js/cityinfo/categoryTree.js'); ?>

<?php /* HTML::script('js/tree/template.js') */ ?>


<script type="text/javascript">
    var templatesData = [];
    <?php foreach($templates as $template): ?>
        templatesData.push(<?php echo json_encode($template); ?>);
    <?php endforeach; ?>
        console.log(templatesData);
    var token = '<?php echo csrf_token(); ?>';
    var getDeleteTemplateURL = '<?php echo URL::route("getDeleteTemplate"); ?>';
    var deleteTemplateURL = '<?php echo URL::route("deleteTemplate"); ?>';
    var saveTemplateURL = '<?php echo URL::route("saveTemplateNew"); ?>';
    var getTemplateURL = '<?php echo URL::route("getTemplateAjax"); ?>';
    var city = '<?php echo Session::get("city_id"); ?>';
    Vue.directive('sortable', {
        inserted: function (el, binding) {
            new Sortable(el, binding.value || {})
        }
    })
    var nextItemID = 12;
    // var templateID = 0;

</script>