{{ HTML::script('js/tree/nestedSortable.js') }}
{{ HTML::script('js/tree/croppie.js') }}
{{ HTML::script('js/helper/validationModule.js') }}
<script>

    var locale = '{{App::getLocale()}}';
    var token = '{{ csrf_token() }}';
    var cityID = '{{ $city_id }}';
    var postURL = "{{ URL::route('saveCategoryTree') }}";
    var templateTypesURL = "{{URL::route("getTemplateTypes")}}";
    var imageURL = "{{ url('/uploads/core/trees/') }}";
    var treeJSON = '{{ $tree }}';
    var cityTextColor = '{{$textColor}}';
    var cityBackgroundColor = '{{$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('{{ $badCategories }}');
    var saveSuccessText = '{{ Lang::get('tree.msg.success.save_tree') }}';
    var saveErrorText = '{{ Lang::get('tree.msg.error.save_tree') }}';

    var warningCreate = '{{ Lang::get('tree.msg.warning.tree_create') }}';
    var warningMove = '{{ Lang::get('tree.button.add_new_category') }}';
    var warningNoName = '{{ Lang::get('tree.msg.warning.no_category_name') }}';
    var warningNothingSelected = '{{ Lang::get('tree.msg.warning.nothing_selected') }}';
    var warningLeaving = '{{ Lang::get('tree.msg.warning.leaving') }}';

    var addNewCategory = '{{ Lang::get('tree.button.add_new_category') }}';
    var addNewSubcategory = '{{ Lang::get('tree.button.add_new_subcategory') }}';
    var getTemplateURL = '{{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">{{Lang::get('tree.builder.title')}}</h2>
                        <p>{{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="{{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">{{Lang::get('tree.conflicts.special')}}</h2>
                            <p>
                                @{{special[0].title}} {{Lang::get('tree.conflicts.contains')}}
                            </p>


                            <div class="row">
                                <div v-if="special[0].posts && special[0].posts.length" class="col s12">
                                    <h5>{{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">{{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>{{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">{{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> {{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">{{Lang::get('tree.conflicts.deleting')}}</h2>
                            <p>
                                @{{deleting.title}} {{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">{{ Lang::get('core.cancel') }}</a>

                            </div>


                                        <div class="row">
                                            <div v-if="deleting.posts && deleting.posts.length" class="col s12">
                                                <h5>{{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">{{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>{{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">{{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> {{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">{{Lang::get('tree.conflicts.conflict')}}</h2>
                            <p>
                                {{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>{{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">{{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>{{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">{{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> {{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>{{ Lang::get('tree.builder.tree_display_title') }}</h3>

                            {{$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="{{ csrf_token() }}">
        <input type="hidden" name="city" id="cityID" value="{{ $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>{{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">{{ Lang::get('tree.builder.basic_info') }}</a>
                            </li>
                            <li id="options-menu" class="tab"><a href="#category-options">{{ 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>{{ 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">{{ 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">{{ 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">{{  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">{{ 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">{{ 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">
                                                {{Lang::get('tree.labels.builder.has_posts.label')}}
                                                <input name="hasPosts" type="radio" checked="checked" id="categoryposts-no"
                                                       value="false"/>
                                                <label for="categoryposts-no">{{Lang::get('tree.labels.builder.has_posts.no')}}</label>

                                                <input name="hasPosts" type="radio" id="categoryposts-yes" value="true"/>
                                                <label for="categoryposts-yes">{{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>{{ Lang::get('tree.labels.builder.has_relationship') }}
                                                <input type="radio" name="hasRelationship" id="relationshipSharingTrue"
                                                       value="true">
                                                <label for="relationshipSharingTrue">{{ Lang::get('tree.labels.builder.has_posts.yes') }}</label>

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

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <p class="col s12" id="children-warning">
                                        {{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">
                                            @foreach ($templates as $template)
                                                <option  value="{{ $template->id }}">{{  $template->name }}</option>
                                            @endforeach
                                        </select>
                                        <label v-bind:class="{'active':selectedTemplate != 0}">{{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 != ''}">{{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">{{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">{{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>{{Lang::get("tree.labels.builder.companies")}}</label>
                                        <select name="catCompanies[]" id="catCompanies" multiple>
                                            @foreach($companies as $key => $company)
                                                <option value="{{ $company->id }}">{{ $company->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="input-field col s12">
                                    <textarea id="catMessage" name="catMessage" class="materialize-textarea"></textarea>
                                    <label for="user-message">{{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">{{ Lang::get('core.cancel') }}</a>
            <button class="btn btn-success modal-action  waves-effect waves-light btn-flat modal-save" id="saveCategory"
                    disabled="disabled">{{ 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="{{ 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">{{ Lang::get('core.cancel') }}</a>
        <a v-on:click="saveThumb()"
           class="modal-action modal-close waves-effect waves-light btn-flat modal-save">{{Lang::get('core.save')}}</a>


    </div>
</div>



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

    var deleteLang = '{{ Lang::get('tree.button.delete_category') }}';
</script>

{{ HTML::script('js/cityinfo/templateManager.js') }}
{{ HTML::script('js/cityinfo/categoryTree.js') }}
{{-- HTML::script('js/tree/template.js') --}}


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

</script>