<?php
/**
 * Created by PhpStorm.
 * User: betawaredino
 * Date: 18/10/2017
 * Time: 14:26
 */

?>
<script type="text/javascript">

    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"); ?>';
    //var templatesData = JSON.parse('<?php echo json_encode($templates); ?>');
    var templatesData = JSON.parse('<?php echo $templates; ?>');
    console.log("Hello");
    console.log(templatesData);
    var label = "title";
     var templateTypes =
        {
            "title":'<?php echo Lang::get("template.labels.title"); ?>',
            "location":'<?php echo Lang::get("template.labels.location"); ?>',
            "email":'<?php echo Lang::get("template.labels.email"); ?>',
            "phone":'<?php echo Lang::get("template.labels.phone"); ?>',
            "website":'<?php echo Lang::get("template.labels.website"); ?>',
            "address":'<?php echo Lang::get("template.labels.address"); ?>',
            "text":'<?php echo Lang::get("template.labels.text"); ?>',
            "image":'<?php echo Lang::get("template.labels.image"); ?>',
            "gallery":'<?php echo Lang::get("template.labels.gallery"); ?>',
            "date":'<?php echo Lang::get("template.labels.date"); ?>',
            "date_to":'<?php echo Lang::get("template.labels.date_to"); ?>',
            "garbage": '<?php echo Lang::get("template.labels.garbage"); ?>'
        };





</script>

<style>
    ul.sort {
        list-style: none;
        padding: 0;
        margin: 30px;
    }

    li.sort-item {
        padding: 10px;
        width: 25%;
        float: left;
        margin: 0 10px 10px 0;
        background: #EFEFEF;
        border: solid 1px #CCC;
    }

    .sort-ghost {
        opacity: 0.3;
        transition: all 0.7s ease-out;
    }

</style>
<div id="ci-categories-templates">
    <div class="row" id="category-holder">
        <div class="col s12">
            <div class="widget-holder hoverable fadeIn">
                <div class="widget-heading">
                    <h2 class="widget-heading-thick"><?php echo Lang::get("template.labels.templates"); ?></h2>
                    <a class="btn btn-floating waves-effect waves-light btn-primary new-blog-post"
                       href="#new-category-template-modal"
                       title="<?php echo Lang::get('template.builder.create_template'); ?>" >
                        <i class="material-icons">add</i></a>

                    <div class="row filter-row">
                        <div class="col s12">

                            <div class="input-field right">
                                <i class="material-icons prefix">search</i>
                                <input id="icon_prefix" type="text" class="validate">
                                <label for="icon_prefix"><?php echo ucfirst(Lang::get("core.search")); ?></label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="widget-content">
                    <div class="table-wrapper">
                        <table class="bordered responsive-table">
                            <thead>

                                <th><?php echo Lang::get("template.labels.title"); ?></th>
                                <th><?php echo Lang::get("template.labels.fields"); ?></th>
                                <th><?php echo Lang::get("template.labels.action"); ?></th>

                            </thead>

                            <tbody>

                                <tr v-for="template in templateList">
                                    <td>{{template.name}}</td>
                                    <td>

                                        <span  v-for="widget in template.template_items" class="badge new">{{templateTypeTranslations[widget.type_name]}}</span>

                                   </td>
                                    <td class="clearfix">
                                        <a href="#"
                                           v-on:click="editTemplate(template.id)"
                                           class="icon-btn icon-btn-edit tooltipped"
                                           title="<?php echo Lang::get('template.button.edit_template'); ?>"><i class="material-icons">mode_edit</i></a>
                                        <a id="delete-modal"
                                           v-on:click="getTemplateCategories(template.id)"
                                           class="icon-btn icon-btn-delete delete-modal"
                                           title="<?php echo Lang::get('template.button.delete_template'); ?>"><i class="material-icons">delete</i></a>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

                    <div class="modal" id="delete-template-modal">
                        <div class="modal-content">
                            <h4><?php echo Lang::get('template.button.delete_template'); ?></h4>

                            <div class="row">
                                <div class="col s12">
                                    <div v-if="categories.length > 0" class="template-wrapper inputs-wrapper fadeIn" id="category-holder">
                                        <p><?php echo Lang::get('template.labels.categories_with_template'); ?></p>
                                        <div class="chip" v-for="category in categories">{{category.title}}</div>

                                    </div>
                                    <div v-if="categories.length > 0" class="template-wrapper fadeIn inputs-wrapper">
                                        <p><?php echo Lang::get('template.labels.assign_template'); ?></p>
                                        <select v-model="newTemplate" class="browser-default" name="template-select" id="template-select">
                                            <option v-for="template in templates" :value="template.id">{{template.name}}</option>
                                        </select>
                                    </div>
                                    <div v-if="categories.length == 0" class="template-wrapper fadeIn inputs-wrapper valign-wrapper center-align">
                                        <h4>{{ templateForDelete.title }} : </h4>

                                        <h4> {{ categoryForDelete }}</h4>
                                    </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 class="modal-action modal-close waves-effect waves-light btn-flat modal-save"  v-on:click="deleteTemplate(categoryForDelete)"><?php echo Lang::get('touristInformation.header_action_delete'); ?></a>

                        </div>
                    </div>
                    <div class="modal" id="new-category-template-modal" >
                        <div class="modal-content">
                            <h4><?php echo Lang::get("template.labels.new_template"); ?></h4>

                            <div class="row">
                                <div class="col s12">
                                    <div class="template-wrapper fadeIn" id="template-wrapper">
                                        <div class="input-field">
                                            <input v-model="templateName" id="template-name" type="text">
                                            <label for="template-name" v-bind:class="{'active':templateName != ''}"><?php echo Lang::get("template.labels.template_name"); ?></label>
                                        </div>

                                        <draggable :list="templateItems" class="dragArea" @end="onEnd" style="text-transform: capitalize">
                                        <div class="cat-template-item hoverable" v-for="templateItem in templateItems" :key="templateItem.id"  v-bind:class="{'custom-type' : templateItem.custom}">
                                            <p>{{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'"
                                                   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("template.labels.template_name"); ?></label>
                                                <a v-on:click="saveEditTemplateItem(templateItem)"
                                                   class="btn-floating waves-effect waves-light btn-primary">
                                                    <i class="material-icons">save</i>
                                                </a>

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


                                        <select class="browser-default" v-model="selectedType" v-on:change="typeSelected()">
                                            <option v-for="templateType in templateTypes" :value="templateType">{{templateType.name}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer right-align">
                            <a href="#!" v-on:click="cancelForm()" class="modal-action modal-close waves-effect waves-light btn-flat modal-cancel"><?php echo Lang::get("template.button.cancel"); ?></a>
                            <a href="#!" v-on:click="submitForm()" class="modal-action waves-effect waves-light btn-flat modal-save"><?php echo Lang::get("template.button.save_template"); ?></a>
                        </div>
                        <div id="preloader-bar" class="animated fadeIn progress" v-show="preloader == 'active'">
                            <div class="indeterminate"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
