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



?>
<script type="text/javascript">
    var data = [];
    var menu_types = [];
    console.log(menu_types);
    var postCityOptions = "<?php echo URL::route('PostCityOptions'); ?>";
    var token = "<?php echo csrf_token(); ?>";
    var city = "<?php echo Session::get('city_id'); ?>";
$(document).ready(function()
{
    <?php foreach($data as $key=>$item): ?>
        data['<?php echo $key; ?>'] = '<?php echo $item; ?>';
    <?php endforeach; ?>

    <?php foreach($menu_types as $key=>$option): ?>
        menu_types['<?php echo $key; ?>'] = {text:'<?php echo $option; ?>',value:'<?php echo $option; ?>'};
    <?php endforeach; ?>

    console.log(menu_types);

})



</script>

<div class="row" >
    <div class="col s12" >
        <div class="widget-holder hoverable fadeIn">
            <div class="widget-heading">
                <h2 class="widget-heading-thick"><?php echo Lang::get("cityOptions.page_title"); ?></h2>
            </div>
            <div class="widget-content" style="margin-bottom:20px;">
                <div class="row">
                    <div class="col s12">
                        <div class="row">
                            <div class="col s4" >


                                <div class="input-group text-color-holder" style="width:250px;">
                                    <input type="text" id="catTextColor" >
                                    <label for="catTextColor" > Category text color</label>
                                </div>

                                <div class="input-group bg-color-holder" style="width:250px;">
                                    <input type="text" id="catColor" >
                                    <label for="catColor">Category background color</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="cityOptionsVue" class="widget-content">
                <div class="row">
                    <div class="col s12">
                        <div class="row">
                            <div class="inputs-wrapper">
                            <div class="col s6">
                                <p class="settings-title"><?php echo Lang::get("cityOptions.report_radius"); ?>  </p>
                                <div class="input-field">
                                    <input v-model="optionsData.similar_reports_radius" id="reports-diameter" type="number">
                                </div>
                            </div>
                            <div class="col s6">
                                <p class="settings-title"><?php echo Lang::get("cityOptions.report_deactivate"); ?>  </p>
                                <div class="input-field">
                                    <input v-model="optionsData.deactivate_days" id="deactivate_days" type="number">
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <?php if($hasInitiatives): ?>
                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.enable_initiatives"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.enable_initiatives" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

                                </label>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.enable_anony_reports"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.anonymous_auto_approve_report" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

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

                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.enable_user_reports"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.user_auto_approve_report"  type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

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

                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.show_similar_reports"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.similar_reports_show" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

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

                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.notify_admin_report"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.new_report_mail_notif" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

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

                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.user_info_required"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.user_info_required" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

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

                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.gps_required"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.gps_required" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

                                </label>
                            </div>
                        </div>
                    </div>
                    <?php if($hasCityForms): ?>
                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.enable_city_form"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.city_form" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

                                </label>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                    <?php if($hasVolunteer): ?>
                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.enable_volunteer"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.enable_volunteer" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

                                </label>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                    <?php if($hasFacebookEvents): ?>
                    <div class="col s4">
                        <div class="inputs-wrapper">
                            <p class="settings-title"><?php echo Lang::get("cityOptions.enable_fb_events"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.enable_fb" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

                                </label>
                            </div>
                            <p class="settings-title"><?php echo Lang::get("cityOptions.auto_active_fb_events"); ?></p>
                            <div class="switch mb-20">
                                <label>
                                    <?php echo Lang::get("cityOptions.no"); ?>

                                    <input v-model="optionsData.auto_active_events" type="checkbox">
                                    <span class="lever"></span>
                                    <?php echo Lang::get("cityOptions.yes"); ?>

                                </label>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                        <div class="col s4">
                            <div class="inputs-wrapper">
                                <p class="settings-title"><?php echo Lang::get("cityOptions.menu_type"); ?></p>
                                <div class=" mb-20">
                                    <select v-model="optionsData.menu_type" class="browser-default">
                                        <option v-for="option in optionsData.menu_options" v-bind:value="option.value">
                                            {{option.text}}
                                        </option>
                                    </select>
                                    <div v-if="optionsData.menu_type == 'Lucid'" class="menu-image-container">
                                        <p >Upload image container</p>
                                        <croppa v-model="croppa"
                                                :initial-image="optionsData.initialImage"
                                                :width="400"
                                                :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"
                                                :quality="2"
                                        >
                                        </croppa>
                                        <button v-on:click="removeImage()" class="btn btn-cancel">Remove img</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>

                <div class="row center-align">
                    <div class="col s12">
                     <!--   <a class="waves-effect waves-light btn btn-cancel">Cancel</a>  -->
                        <a class="waves-effect waves-light btn btn-primary" v-on:click="submitOptions()"><?php echo Lang::get("cityOptions.save"); ?></a>
                    </div>
                </div>
                <div id="preloader-bar" class="animated fadeIn progress" v-show="preloader == 'active'">
                    <div class="indeterminate"></div>
                </div>
            </div>
        </div>
    </div>
</div>
