
<script>
    var current_url=window.location.hostname;
    var activated='<?php echo Lang::get('initiatives.activated'); ?>';
    var activate='<?php echo Lang::get('initiatives.activate'); ?>';
    var deactivated='<?php echo Lang::get('initiatives.deactivated'); ?>';
    var deactivate='<?php echo Lang::get('initiatives.deactivate'); ?>';
    var activate_error='<?php echo Lang::get('initiatives.activate_error'); ?>';
    var confirmDeletePost = '<?php echo Lang::get('tree.msg.warning.post_delete'); ?>';

    var getUrl='<?php echo URL::route('getNewInitiative', ['city_id' =>  Session::get('city_id')]); ?>';
    var postUrl='<?php echo URL::route('postNewInitiative'); ?>';

    var initiativesData=JSON.parse('<?php echo $list; ?>');
    var city=JSON.parse('<?php echo $city; ?>');

    console.log('initiativesData', initiativesData);

    var urls={
        editTemplate:"initiatives/get-template",
        deleteTemplate:"<?php echo URL::route('CommunalServiceGetDeleteTemplate'); ?>",
        postAddTemplate:"<?php echo URL::route('CommunalServicePostAddTemplate'); ?>",
        postEditTemplate:"<?php echo URL::route('CommunalServicePostEditTemplate'); ?>",
        getInitiativeComments:"initiative-comments-ajax",
        deleteComment :"<?php echo URL::route('getDeleteComment'); ?>",

    }



</script>

<!-- tab start -->
<div id="tab-usersubmit">
    <div class="row">
        <div class="col s12" id="vue">
            <div class="widget-holder hoverable fadeIn">
                <div class="widget-heading">
                    <div class="input-field">
                        <i class="material-icons prefix">search</i>
                        <input id="icon_prefix" v-model="searchString" v-on:keyup="searchfilter()" type="text">
                        <label for="icon_prefix"><?php echo ucfirst(Lang::get('core.search')); ?></label>
                    </div>
                    <a class="btn-floating waves-effect waves-light btn-primary new-blog-post" id="add-initiative-button" v-on:click="add()"><i class="material-icons">add</i></a>
                </div>
                <div class="widget-content">
                    <div class="table-wrapper">
                        <table class="bordered responsive-table">
                            <thead>
                            <tr>
                                <th><?php echo Lang::get('communalService.header_template_name'); ?></th>
                                <th><?php echo Lang::get('communalService.header_template_content'); ?></th>
                                <th><?php echo Lang::get('communalService.label_report_votes'); ?></th>

                                <th><?php echo Lang::get('communalService.header_action'); ?></th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr v-for="(initiative, index) in initiatives">
                                <td>{{ initiative.title }}</td>
                                <td v-html="initiative.text"> </td>
                                <td>
                                    <div class="col s6">
                                        <i class="tiny material-icons">thumb_up</i>{{ initiative.votes_for }}
                                    </div>
                                    <div class="col s6">
                                        <i class="tiny material-icons">thumb_down</i>{{ initiative.votes_against }}
                                    </div>


                                </td>

                                <td>

                                    <a v-on:click=" activatePost(initiative.id, index)" class="icon-btn icon-btn-delete"><i class="material-icons">{{initiative.active?'block':'done'}}</i></a>
                                    <a v-on:click="get(initiative.id)" class="icon-btn icon-btn-edit"><i class="material-icons">mode_edit</i></a>
                                    <a v-on:click="getComments(initiative.id)" class="icon-btn icon-btn-edit"><i class="material-icons">comment</i></a>
                                    <a v-on:click="deletePost(initiative.id, index)" class="icon-btn icon-btn-delete" title="<?php echo Lang::get('communalService.tooltip_button_delete_initiative'); ?>" :data-name="initiative.name"><i class="material-icons">delete</i></a>
                                </td>
                            </tr>


                            </tbody>
                        </table>
                    </div>
                    <div id="edit-image-modal" class="modal modal-fixed-footer">
                        <div class="modal-content">
                            <div id="report-delegate" class="fadeIn">
                                <div class="inputs-wrapper">
                                    <div class="row">
                                        <div class="col s12 m12 l12">
                                            <div class="cropper-holder hoverable">
                                                <croppa v-model="croppa"
                                                        :initial-image="response.imageUrl"
                                                        :width="600"
                                                        :height="600"
                                                        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">Cancel</a>
                            <a v-on:click="saveImage()" class="modal-action modal-close waves-effect waves-light btn-flat modal-save">Save</a>

                        </div>
                    </div>
                    <div id="add-initiative-modal" class="modal modal-fixed-footer">
                        <div class="modal-content">
                            <div id="report-delegate" class="fadeIn">
                                <div class="inputs-wrapper">
                                    <div class="row">
                                        <div class="col s12 m4 l4">

                                            <div class="post-img-desk-wrapper mt-20 ">
                                                <h5><?php echo Lang::get('template.labels.image'); ?></h5>
                                                <div class="post-img-desk">

                                                    <img v-show="response.imageUrl" class="report-image-small" :src="response.imageUrl" v-on:click="image()">
                                                    <div class="report-image-fader">
                                                        <a v-on:click="image()" class="icon-btn icon-btn-edit edit-image btn-floating"><i class="material-icons">image</i></a>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="post-img-gallery-wrapper mt-20 ">
                                                <h5><?php echo Lang::get('post.labels.gallery'); ?></h5>
                                                <div class="post-img-gallery"  >
                                                    <div class="row">
                                                        <div class="col s4" v-for="(picture , index) in response.gallery">
                                                            <div class="gallery-img-single">
                                                                <div class="btns-holder">
                                                                    <a v-on:click="imageGalleryEdit(index)" class="icon-btn icon-btn-edit"><i class="material-icons">mode_edit</i></a>
                                                                    <a v-on:click="imageGalleryDelete(index)" class="icon-btn icon-btn-delete" title="<?php echo Lang::get('post.labels.remove_image_from_gallery'); ?>"><i class="material-icons">delete</i></a>
                                                                </div>
                                                                <img class="report-image-small" :src="'data:image/'+picture.type+';base64,'+picture.image" v-on:click="imageGallery()">
                                                            </div>


                                                        </div>
                                                    </div>

                                                    <div class="report-image-fader">
                                                        <a v-on:click="imageGallery()" class="icon-btn icon-btn-edit edit-image btn-floating"><i class="material-icons">photo_library</i></a>
                                                    </div>
                                                </div>
                                            </div>

                                            <div>

                                                <div class="report-image-fader">

                                                    <div id="minimap" style="margin-top:20px;height: 500px; width: 100%; display: block;">
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                        <div class="col s12 m m8 l8">
                                            <div class="edit-holder hoverable">
                                                <div class="input-field col s12">
                                                    <input id="title" v-model="response.title" type="text" class="validate" v-bind:class="invalidCheck">
                                                    <label v-bind:class="activeCheck" v-bind:data-error="validator.title" for="name"><?php echo Lang::get('template.labels.title'); ?>*</label>
                                                </div>
                                                <div class="input-field col s12">
                                                    <input id="posted_by" v-model="response.posted_by" type="text" >
                                                    <label v-bind:class="activeCheck" v-bind:data-error="validator.posted_by" for="posted_by"><?php echo Lang::get('initiatives.posted_by'); ?></label>
                                                </div>
                                                <div class="input-field col s12">
                                                    <input id="link" v-model="response.link" type="text" >
                                                    <label v-bind:class="activeCheck" v-bind:data-error="validator.link" for="link"><?php echo Lang::get('touristInformation.label_entry_link'); ?>*</label>
                                                </div>

                                            </div>
                                            <div class="input-field col s12">
                                                <textarea id="new-repot-desc" class="validate" v-bind:class="invalidCheck"></textarea>
                                                <label for="new-repot-desc"><?php echo Lang::get('template.labels.text'); ?></label>
                                                <div v-show="validator.text && !response.text" class="invalid">{{ validator.text }}</div>
                                            </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">Cancel</a>
                            <a v-on:click="submit()" class="modal-action waves-effect waves-light btn-flat modal-save">Save</a>

                        </div>
                        <div id="preloader-bar" class="animated fadeIn progress" v-show="preloader == 'active'">
                            <div class="indeterminate"></div>
                        </div>
                    </div>
                    <div id="edit-gallery-modal" class="modal modal-fixed-footer">
                        <div class="modal-content">
                            <div class="fadeIn">
                                <div class="inputs-wrapper">
                                    <div class="row">
                                        <div class="col s12 m12 l12">
                                            <div class="cropper-holder hoverable">
                                                <croppa v-model="croppaGallery"
                                                        :initial-image="galleryImage"
                                                        :width="600"
                                                        :height="600"
                                                        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="saveGallery()" class="modal-action modal-close waves-effect waves-light btn-flat modal-save"><?php echo Lang::get('core.save'); ?></a>

                        </div>
                    </div>
                    <div id="show-comments" class="modal modal-fixed-footer">
                        <div class="modal-content">
                            <div id="report-delegate" class="fadeIn">
                                <div class="inputs-wrapper">
                                    <div class="row">
                                        <div class="comments-wrapper" >
                                                <comment-list  :children="comments"></comment-list>
                                        </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">Cancel</a>
                            <a v-on:click="submit()" class="modal-action waves-effect waves-light btn-flat modal-save">Save</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- tab end -->

<script type="text/x-template" id="commrow">

    <ul>
        <template  v-for="comment in children">
        <li>
            <div class="comment-single">
                <a v-on:click="comment.show=!comment.show" v-if="comment.children" class="btn-floating waves-effect waves-light btn collapse-comments"><i class="material-icons">{{comment.show?'expand_less':'expand_more'}}</i></a>
                <div class="row">
                    <div v-if="comment.thumb" class="col s4">
                        <div class="comment-image-holder" :style="categoryThumbPath+comment.thumb+categoryThumbEnd">
                        </div>
                    </div>
                    <div class="col s8">
                        <h5>{{ comment.name }}</h5>
                        <p>{{ comment.text }}</p>
                    </div>
                </div>
            </div>
        </li>
        <li v-bind:class="{hide:!comment.show}" v-if="comment.children">

            <comment-list :children="comment.children"></comment-list>

        </li>
        </template>

    </ul>

</script>



<?php /* CityHub - Communal service - Templates (admin) */ ?>

