

<div id="vue">

<!-- tab start -->
<div id="tab-usersubmit"  class="fadeIn">
    <div class="row">
        <div class="col s12">
            <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('formSubmissions')" type="text">
                        <label :class="{active:searchString}" 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('cityForm.header_title'); ?></th>
                                <th><?php echo Lang::get('cityForm.user_email'); ?></th>
                                <th><?php echo Lang::get('cityForm.submited_at'); ?></th>
                                <th><?php echo Lang::get('cityForm.status'); ?></th>
                                <th><?php echo Lang::get('cityForm.table_edit'); ?></th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr v-for="(form, idx) in formSubmissions">
                                <td>{{ form.cityFormTitle }}</td>
                                <td>{{ form.email }}</td>
                                <td>{{ formatDate(form.created_at) }}</td>
                                <td><span v-if="form.approved!=null">{{ form.approved?'Odobreno':'Odbačeno' }}</span></td>
                                <td>

                                    <a v-on:click="getUrl('downloadCityformPdf', form)" class="icon-btn icon-btn-edit" title="<?php echo Lang::get('cityForm.button_pdf_download'); ?>"><i class="material-icons">file_download</i></a>
                                    <a v-on:click="getUrl('reviewForm', form, idx)" class="icon-btn icon-btn-list" title="<?php echo Lang::get('cityForm.button_view_form'); ?>"><i class="material-icons">dvr</i></a>
                                </td>
                            </tr>


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


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

<!-- tab start -->
<div id="tab-active_formlist"  class="fadeIn">
    <div class="row">
        <div class="col s12">
            <div class="widget-holder hoverable fadeIn">
                <div class="widget-heading">

                    <div class="input-field">
                        <i v-if="!searchString" class="material-icons prefix">search</i>
                        <input id="icon_prefix2" v-model="searchString" v-on:keyup="searchfilter('cityForms')" type="text">
                        <label :class="{active:searchString}" for="icon_prefix2"><?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('cityForm.header_id'); ?></th>
                                <th><?php echo Lang::get('cityForm.header_title'); ?></th>
                                <th><?php echo Lang::get('cityForm.created_at'); ?></th>
                                <th><?php echo Lang::get('cityForm.table_edit'); ?></th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr v-for="cform in cityForms">
                                <td>{{ cform.id }}</td>
                                <td>{{ cform.title }}</td>
                                <td>{{ formatDate(cform.created_at) }}</td>
                                <td>
                                    <a v-if="cform.active" v-on:click="getUrl('deactivateForm',cform.id)" class="icon-btn icon-btn-delete" title="<?php echo Lang::get('cityForm.button_pdf_download'); ?>"><i class="material-icons">block</i></a>
                                </td>
                            </tr>


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


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

<!-- tab start -->
<div id="tab-inactive_formlist" class="fadeIn">
    <div class="row">
        <div class="col s12">
            <div class="widget-holder hoverable fadeIn">
                <div class="widget-heading">
                    <div class="input-field">
                        <i class="material-icons prefix">search</i>
                        <input id="icon_prefix3" v-model="searchString" v-on:keyup="searchfilter('deactivatedCityForms')" type="text">
                        <label :class="{active:searchString}" for="icon_prefix3"><?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 class="text-center"><?php echo Lang::get('cityForm.header_id'); ?></th>
                                <th><?php echo Lang::get('cityForm.header_title'); ?></th>
                                <th><?php echo Lang::get('cityForm.created_at'); ?></th>
                                <th><?php echo Lang::get('cityForm.table_edit'); ?></th>

                            </tr>
                            </thead>

                            <tbody>
                            <tr v-for="form in deactivatedCityForms">
                                <td>{{ form.id }}</td>
                                <td>{{ form.title }}</td>
                                <td>{{ formatDate(form.created_at) }}</td>
                                <td>
                                    <a v-if="!form.active" v-on:click="getUrl('activateForm',form.id)" class="icon-btn icon-btn-list" title="<?php echo Lang::get('cityForm.button_view_form'); ?>"><i class="material-icons">done</i></a>
                                    <a v-on:click="getUrl('getEditForm',form.id)" class="icon-btn icon-btn-edit"><i class="material-icons" title="<?php echo Lang::get('cityForm.button_reject_form'); ?>">mode_edit</i></a>
                                    <a v-on:click="getUrl('deleteForm',form.id)" class="icon-btn icon-btn-delete"><i class="material-icons" title="<?php echo Lang::get('cityForm.button_reject_form'); ?>">delete</i></a>
                                </td>
                            </tr>


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


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

<!-- tab start -->
<div id="tab-archive" class="fadeIn">
    <div class="row">
        <div class="col s12">
            <div class="widget-holder hoverable fadeIn">
                <div class="widget-heading">
                    <div class="input-field">
                        <i class="material-icons prefix">search</i>
                        <input id="icon_prefix4" v-model="searchString" v-on:keyup="searchfilter('archivePdfs', this)" type="text">
                        <label :class="{active:searchString}" for="icon_prefix4"><?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 class="text-center"><?php echo Lang::get('cityForm.pdf_name'); ?></th>
                                <th class="text-center"><?php echo Lang::get('cityForm.created_at'); ?></th>
                                <th class="text-center"><?php echo Lang::get('cityForm.table_edit'); ?></th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr v-for="form in archivePdfs">
                                <td>{{ form.pdf_name }}</td>
                                <td>{{ formatDate(form.created_at) }}</td>
                                <td>
                                    <a v-on:click="openPdf(form.pdf_name)" class="icon-btn icon-btn-edit"><i class="material-icons" title="<?php echo Lang::get('cityForm.button_pdf_download'); ?>">file_download</i></a>
                                    <a v-on:click="getUrl('deleteArchivePdf',form.id)" class="icon-btn icon-btn-delete" title="<?php echo Lang::get('cityForm.button_pdf_download'); ?>"><i class="material-icons">block</i></a>
                                </td>
                            </tr>


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


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

<div id="admin-reply-modal" class="modal">
    <div class="modal-content">
        <div id="report-delegate" class="fadeIn">
            <div class="inputs-wrapper">
                <div class="row">
                    <div class="col s12">
                        <div class="edit-holder hoverable">
                            <div class="input-field col s12">
                                <textarea id="admin-reply-txt" ></textarea>
                                <label for="admin-reply-txt"><?php echo Lang::get('cityForm.admin_reply'); ?></label>
                            </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="sendReply()" class="modal-action waves-effect waves-light btn-flat modal-save"><?php echo Lang::get('cityForm.admin_reply'); ?></a>

    </div>
</div>

<div id="review-form-modal" class="modal modal-fixed-footer">
    <div class="modal-content"  v-if="review.user!=null">
        <div class="row">
            <div class="col s10">
                <h4><?php echo Lang::get('cityForm.label_form_review'); ?> </h4>
            </div>

        </div>
                <div class="card  blue-grey darken-1">
                    <div class="card-content grey-text text-lighten-5">
                        <span class="card-title">{{review.formData.title}}</span>
                        <p>{{review.user.first_name}} {{review.user.last_name}}</p>
                        <p>{{review.user.email}}</p>
                    </div>
                </div>

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

                <div v-for="(question, key) in review.questions">
                    <div class="row hoverable">
                        <div class="col s12 m8 l9">
                            <blockquote>{{question[0].title}}</blockquote>




                            <template
                                    v-if="question[0].type!= 3 && question.givenAnswers!=null"
                                    v-for="(gAnswer, key2) in question.givenAnswers">

                                <p v-if="question.userAnswer[key2]!= null && (question.userAnswer[key2].city_form_answer_id == gAnswer.id && question.userAnswer[key2].value != '' && question.userAnswer[key2].value != false)"
                                        class="blue-grey-text text-darken-1">

                                    <?php /* svi odgovori sa checkboxovima
                                    <input type="checkbox" :id="'chk'+key2" :checked="question.userAnswer[key2]!= null && (question.userAnswer[key2].city_form_answer_id == gAnswer.id && question.userAnswer[key2].value != '' && question.userAnswer[key2].value != false)" disabled/>
                                    <label class="blue-grey-text text-darken-1" :for="'chk'+key2"> {{gAnswer.value}}</label>*/ ?>

                                    {{gAnswer.value}}

                                </p>

                            </template>

                            <template v-else>
                                <template v-if="question.givenAnswers!=null"
                                        v-for="(gAnswer, key2) in question.givenAnswers">

                                    <p v-if="question.userAnswer[key2]!= null && (question.userAnswer[key2].city_form_answer_id == gAnswer.id && question.userAnswer[key2].value != '')"
                                    class="blue-grey-text text-darken-1">

                                        {{question.userAnswer[key2].value}}


                                    </p>
                                </template>
                            </template>

                        </div>
                    </div>
                </div>
        </div>
    </div>
        <div v-if="review.approved!=null" class="card  blue-grey lighten-2">
            <div class="card-content grey-text text-lighten-5">
                <span class="card-title">{{review.approved?'Form was approved with explanation:':'Form was rejected with explanation:'}}</span>

                <p>{{review.reply}}</p>
            </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-if="review.approved==null" v-on:click="aprove()" class="modal-action waves-effect waves-light btn-flat modal-save">Odobri</a>
        <a v-if="review.approved==null" v-on:click="reject()" class="modal-action waves-effect waves-light btn-flat red-text">Odbaci</a>

    </div>
</div>

    <div id="create-form-modal" class="modal modal-fixed-footer">
        <div class="modal-content">
            <div class="row">
                <div class="col s10">
                    <h4><?php echo Lang::get('cityForm.label_form_review'); ?> </h4>
                </div>

            </div>
            <div class="card  blue-grey darken-1">
                <div class="card-content grey-text text-lighten-5">
                    <input type="text" v-model="formTitle" >
                </div>
            </div>

            <div class="row">
                            <div v-for="question in questions" class="template-wrapper question-wrapper hoverable">
                                <div class="question-title-wrapper">
                                    <div class="col s7">
                                        <div class="input-field">
                                            <input id="question-title"  v-model="question.title"  type="text" >
                                            <label for="question-title" class="active"><?php echo Lang::get('cityForm.question_title'); ?></label>
                                        </div>
                                    </div>
                                    <div class="col s5 mt-20">
                                        <div class="switch">
                                            <label><?php echo Lang::get('cityForm.required'); ?> - </label>
                                            <label>
                                                <?php echo Lang::get('cityForm.yes'); ?>

                                                <input v-model="question.required" type="checkbox">
                                                <span class="lever"></span>
                                                <?php echo Lang::get('cityForm.no'); ?>

                                            </label>
                                        </div>
                                        <a class="waves-effect waves-light btn right delete-question" v-on:click="deleteQuestion(question.id)" ><?php echo Lang::get('cityForm.delete_question'); ?></a>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="input-field col s11" v-for="answer in question.answers" v-if="question.type != 'text' && question.type != 3">
                                        <input :id="answer.id"  v-model="answer.title"  type="text">
                                        <label :for=" answer.id" class="active"><?php echo Lang::get('cityForm.answer_title'); ?></label>
                                        <a class="btn-floating waves-effect waves-light btn-primary delete-answer " title="<?php echo Lang::get('cityForm.delete_answer'); ?>"  v-on:click="deleteAnswer(answer.id)"><i class="material-icons">clear</i></a>

                                    </div>
                                    <div class="col s12">
                                        <a class="waves-effect btn-flat  waves-light add-answer" title="Add answer" v-if="question.type != 'text' && question.type != 3" v-on:click="addAnswer(question.id)"><?php echo Lang::get('cityForm.add_answer'); ?></a>
                                    </div>

                                </div>
                            </div>
                        <select class="browser-default" v-model="selectedType">
                            <option  v-for="type in questionTypes"> {{type}} </option>
                        </select>
                        <a v-on:click="addQuestion()" class="waves-effect waves-light btn-flat add-answer"><?php echo Lang::get('cityForm.add_question'); ?></a>
            </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('cityForm.cancel'); ?></a>
            <a v-on:click="submitForm()" class="modal-action waves-effect waves-light btn-flat modal-save"><?php echo Lang::get('cityForm.save'); ?></a>
           <!-- <a v-on:click="aprove()" class="modal-action waves-effect waves-light btn-flat modal-save">Odobri</a>
            <a v-on:click="reject()" class="modal-action waves-effect waves-light btn-flat red-text">Odbaci</a> -->

        </div>
        <div id="preloader-bar" class="animated fadeIn progress" v-show="preloader == 'active'">
            <div class="indeterminate"></div>
        </div>
    </div>

</div>

<script>
    var current_url=window.location.hostname;
    var base_url='https://'+window.location.hostname+'/';

    var admin_aprove='<?php echo Lang::get('cityForm.admin_aprove'); ?>';
    var admin_reject='<?php echo Lang::get('cityForm.admin_reject'); ?>';

    var city='<?php echo Session::get('city_id'); ?>';
    var cityFormsData=JSON.parse('<?php echo $cityForms; ?>');
    var archivePdfsData=JSON.parse('<?php echo $archive_pdfs; ?>');
    var deactivatedCityFormsData=JSON.parse('<?php echo $deactivatedCityForms; ?>');
    var formSubmissionsData=JSON.parse('<?php echo $formSubmissions; ?>');

    console.log('archivePdfsData', archivePdfsData);

    var urls={
        downloadCityformPdf:"downloadCityformPdf",
        reviewForm:"<?php echo URL::route('reviewForm'); ?>",
        rejectForm:"<?php echo URL::route('rejectForm'); ?>",
        activateForm:"<?php echo URL::route('activateForm'); ?>",
        deactivateForm:"<?php echo URL::route('deactivateForm'); ?>",
        getEditForm:"<?php echo URL::route('getEditForm'); ?>",
        deleteForm:"<?php echo URL::route('deleteForm'); ?>",
        downloadArchivePdf:"/uploads/cityform/pdfarchive/",
        deleteArchivePdf:"<?php echo URL::route('deleteArchivePdf'); ?>",
        postEditCityForm:"<?php echo URL::route('postEditCityForm'); ?>",
        reply:"<?php echo URL::route('postReplyCityForm'); ?>",
    }


    function deletePost(id) {


        var confirmMsg = confirmDeletePost.replace('***', id);
        if (window.confirm(confirmMsg)) {

            $.get("https://"+current_url + '/info/initiatives/delete/'+id).then(function(data){
                if(data.status==1){
                    $('#'+id).remove();

                }else{
                    noty({
                        text: 'Greška kod brisanja',
                        type: 'error',
                        theme: 'cityhub',
                        layout: 'bottomRight',
                        animation: {
                            open: 'animated bounceInUp',
                            close: 'animated bounceOutDown',
                        },
                        timeout: 5000
                    });
                }
            });
        } else {
            return;
        }
    }

    function activatePost(id, ovo) {

        console.log(ovo);
        console.log($(ovo));
        console.log($(ovo)[0]);
        //console.log($(ovo)[0].find('span'));
        console.log($($(ovo)[0]).find('span'));

            $.get("https://"+current_url + '/info/initiatives/activate/'+id).then(function(data){
                //data=JSON.parse(data);

            if(data.status==1){
                if(data.data){
                    $icon=$($(ovo)[0]).find('span');


                    $($icon[0]).attr('class', 'icon-highlight-remove');
                    $($(ovo)[0]).attr('class', 'btn btn-danger');
                    $($(ovo)[0]).attr('title', deactivate);
                    noty({
                        text: activated,
                        type: 'success',
                        theme: 'cityhub',
                        layout: 'bottomRight',
                        animation: {
                            open: 'animated bounceInUp',
                            close: 'animated bounceOutDown',
                        },
                        timeout: 5000
                    });
                }else{

                    $icon=$($(ovo)[0]).find('span');
                    $($icon[0]).attr('class', 'icon-done-all');
                    $($(ovo)[0]).attr('class', 'btn btn-success');
                    $($(ovo)[0]).attr('title', activate);
                    noty({
                        text: deactivated,
                        type: 'success',
                        theme: 'cityhub',
                        layout: 'bottomRight',
                        animation: {
                            open: 'animated bounceInUp',
                            close: 'animated bounceOutDown',
                        },
                        timeout: 5000
                    });
                }


            }else{
                noty({
                    text: activate_error,
                    type: 'error',
                    theme: 'cityhub',
                    layout: 'bottomRight',
                    animation: {
                        open: 'animated bounceInUp',
                        close: 'animated bounceOutDown',
                    },
                    timeout: 5000
                });
            }
        });

    }
</script>

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

