{% extends "layout.html.twig" %}

{% block title %}Daf Admin{% endblock %}

{% block pageheader %}Daf Admin{% endblock %}

{% block body %}
    <div class="row" id ="app" v-cloak>
        <div class="header-daf b-margin">
            <h1 class="b-margin">Edit options:</h1>
        </div>
        <template v-if="lengthInstance > 0">
            <a href="{{ preview }}" target="_blank" class="btn btn-primary b-margin" type="button">Preview</a>
        </template>
        <form action="{{ path('daf_admin_edit_options', { 'advertiser': advertiser.id, 'instance': instance.id }) }}" method="post" enctype="multipart/form-data" name="options">
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="input-group">
                            <div class="input-group-addon labelDaf">Main color</div>
                            <input type="text" class="form-control" id="mainColor" name="mainColor" placeholder="Hexa, rgb or named color" v-model="mainColor">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="input-group">
                            <div class="input-group-addon labelDaf">Text button color</div>
                            <input type="text" class="form-control" id="btnTxtColor" name="btnTxtColor" placeholder="Hexa, rgb or named color" v-model="btnTxtColor">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="input-group">
                            <div class="input-group-addon labelDaf">Text button</div>
                            <input type="text" class="form-control" id="CTA" name="CTA" placeholder="JE POSTULE by default" v-model="CTA">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="input-group">
                            <div class="input-group-addon labelDaf">Language</div>
                            <select class="input-sm form-control" name="language" id="language" v-model="selectedLang">
                                <option value="" selected hidden disabled>Select a language</option>
                                {% for i, lang in languages %}
                                    <option value="{{ i }}">{{ lang }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row t-margin" id="editOption">
                    <div class="col-sm-4">
                        <label for="checkboxDafreco">Job recommendation: </label>
                        <input type="hidden" name="checkboxDafreco" value="false">
                        <input type="checkbox" name="checkboxDafreco" id="checkboxDafreco" data-size="small" data-on="On" data-off="Off" v-model="dafreco" value="true" style="width: 0; height: 0;">
                    </div>
                    <div class="col-sm-4">
                        <label for="checkboxScoring">Relevant scoring: </label>
                        <input type="hidden" name="checkboxScoring" value="false">
                        <input type="checkbox" name="checkboxScoring" id="checkboxScoring" data-size="small" data-on="On" data-off="Off" v-model="scoring" value="true">
                    </div>
                    <div class="col-sm-4">
                        <label for="checkboxGeodistance">Distance scoring: </label>
                        <input type="hidden" name="checkboxGeodistance" value="false">
                        <input type="checkbox" name="checkboxGeodistance" id="checkboxGeodistance" data-size="small" data-on="On" data-off="Off" v-model="geoDistance" value="true">
                    </div>
                </div>
                <div class="row t-margin b-margin">
                    <div class="col-sm-12">
                        <div class="input-group" id="inputAdd">
                            <div class="input-group-addon labelDaf">Additional fields</div>
                            <input type="text" class="form-control" id="fields" placeholder="+ Add new" style="width: 50%;">
                            <select class="form-control" id="typeFields" name="typeFields" v-model="selectedType" style="width: 50%;">
                                <option value="" disabled>Choose a field type</option>
                                <option value="text">Text</option>
                                <option value="date">Date</option>
                                <option value="checkbox">Checkbox</option>
                                <option value="slider">Slider bar</option>
                                <option value="list">List</option>
                                <option value="radio">Radio</option>
                                <option value="multicheckboxes">Multi-Checkboxes</option>
                            </select>
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" id="addFields" @click="addFields"><span class="glyphicon glyphicon-plus"></span></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12" id="modifyFields">
                        <ul id="listFields">
                            <li v-for="field, i in fields" :data-id="i" :id="'field_'+i" class="listSkills b-margin">
                                <template v-if="isEditField !== i">
                                    <span><% field.name %> - <% field.type %></span>
                                    <span style="float: right;">
                                        <button class="btn btn-primary btn-xs" type="button" title="Show List Values" v-if="field.type === 'list' || field.type === 'radio' || field.type === 'multicheckboxes'" @click="modalEditListValues(i)">
                                            <span class="glyphicon glyphicon-option-horizontal"></span>
                                        </button>&nbsp;
                                        <button class="btn btn-primary btn-xs" type="button" @click="isEditField = i" title="Edit">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>&nbsp;
                                        <button class="btn btn-primary btn-xs" type="button" @click="removeField(i)" title="Remove">
                                            <span class="glyphicon glyphicon-remove"></span>
                                        </button>
                                        &nbsp;<span class="is-required">Is required ? <input type="checkbox" v-model="field.required" v-bind="field.required"></span>&nbsp;
                                    </span>
                                </template>
                                <template v-else>
                                    <div class="input-group">
                                        <input type="text" class="form-control" v-model="field.name" style="border-top-left-radius: 8px; border-bottom-left-radius: 5px; width: 50%;">
                                        <select class="form-control" id="typeFields" name="typeFields" v-model="field.type" style="width: 50%;">
                                            <option disabled>Choose a field type</option>
                                            <option value="text">Text</option>
                                            <option value="date">Date</option>
                                            <option value="checkbox">Checkbox</option>
                                            <option value="slider">Slider bar</option>
                                            <option value="list">List</option>
                                            <option value="radio">Radio</option>
                                            <option value="multicheckboxes">Multi-Checkboxes</option>
                                        </select>
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary" type="button" @click="isEditField = null" style="border-top-right-radius: 7px; border-bottom-right-radius: 4px; margin-right: -1px">
                                                <span class="glyphicon glyphicon-ok"></span>
                                            </button>
                                        </span>
                                    </div>
                                </template>
                            </li>
                        </ul>
                    </div>
                </div>
                <hr>
                <div class="row t-margin">
                    <div class="col-sm-12">
                        <div class="input-group">
                            <div class="input-group-addon labelDaf">Message post apply</div>
                            <textarea type="text" class="form-control" name="messagePostApply" id="messagePostApply" v-model="messagePostApply"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row t-margin">
                    <div class="col-sm-12">
                        <h3>Unqualified Mail Message</h3>
                        <div class="input-group">
                            <div class="input-group-addon labelDaf">Subject</div>
                            <input type="text" class="form-control" name="unqualifySubject" id="unqualifySubject" v-model="unqualifySubject">
                        </div>
                        <div class="input-group t-margin">
                            <div class="input-group-addon labelDaf">Message</div>
                            <textarea class="form-control" rows="5" id="unqualifyMessage" name="unqualifyMessage" v-model="unqualifyMessage"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <input type="button" value="Submit" class="btn btn-primary" @click="save(document.querySelector('form[name=options]'))">
                <a href="{{ path('self_advertiser_daf_admin', {'id': advertiser.id}) }}" class="btn btn-default">Back to DAF</a>
            </div>

            <div class="modal fade" id="modalEditListValues" tabindex="-1" role="dialog" aria-labelledby="editListValues" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="editListValues">List name: <% listName %></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body modal-editListValues">
                            <div class="input-group">
                                <input type="text" id="newValue" class="form-control" placeholder="+ Add new value">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button" @click="addNewValue(positionIndex)">
                                        <span class="glyphicon glyphicon-ok"></span>
                                    </button>
                                </span>
                            </div>
                            <hr>
                            <ul v-if="positionIndex != null" style="padding: 0;">
                                <li v-for="value, i in fields[positionIndex].listValues" :data-id="i" class="listSkills b-margin" style="list-style: none; text-align: center;">
                                    <template v-if="isEditValue !== i">
                                        <span><% value.name %></span>
                                        <span style="float: right;">
                                        <button class="btn btn-primary btn-xs" type="button" @click="isEditValue = i" title="Edit">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>&nbsp;
                                        <button class="btn btn-primary btn-xs" type="button" @click="removeValue(i, positionIndex)" title="Remove">
                                            <span class="glyphicon glyphicon-remove"></span>
                                        </button>
                                    </span>
                                    </template>
                                    <template v-else>
                                        <div class="input-group">
                                            <input type="text" class="form-control" v-model="fields[positionIndex].listValues[i]" style="">
                                            <span class="input-group-btn">
                                                <button class="btn btn-primary" type="button" @click="isEditValue = null" style="">
                                                    <span class="glyphicon glyphicon-ok"></span>
                                                </button>
                                            </span>
                                        </div>
                                    </template>
                                </li>
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
{% endblock %}

{% block specificJS %}
    <script>
        var app = new Vue({
            delimiters: ['<%', '%>'],
            el: "#app",
            data: {
                fields: [],
                isEditField: null,
                isEditValue: null,
                instanceOptions: [],
                selectedLang: '',
                btnTxtColor: '',
                mainColor: '',
                lengthInstance: '',
                unqualifyMessage: '',
                unqualifySubject: '',
                selectedType: '',
                CTA: '',
                messagePostApply: '',
                modalListValues: [],
                listName: '',
                positionIndex: null,
                dafreco: true,
                scoring: true,
                geoDistance: true,
                updatedInfo: false
            },
            mounted: function() {
                var self = this;

                this.getInfoInstance();
            },
            updated: function() {
                if (this.updatedInfo) {
                    $('#checkboxDafreco, #checkboxGeodistance, #checkboxScoring').bootstrapToggle();
                }
            },
            methods: {
                getInfoInstance: function() {
                    var self = this;
                    $('.loader-container').fadeIn(150);
                    $.ajax({
                        url: "{{ path('ajax_get_info_instance', {'advertiser': advertiser.id, 'instance':instance.id}) }}",
                        method: "POST"
                    }).done(function (data) {
                        if (Object.keys(data).length > 0) {
                            self.instanceOptions = data;
                            self.instanceOptions = JSON.parse(self.instanceOptions);
                            self.selectedLang = self.instanceOptions.lang;
                            self.mainColor = self.instanceOptions.style.important;
                            self.btnTxtColor = self.instanceOptions.style.textBtn;
                            if (self.instanceOptions.fields) {
                                $.each(self.instanceOptions.fields, function (key, value) {
                                    self.fields.push(value);
                                });
                            }
                            self.lengthInstance = Object.keys(self.instanceOptions).length;
                            if (self.instanceOptions.mail) {
                                self.unqualifyMessage = self.instanceOptions.mail.message;
                                self.unqualifySubject = self.instanceOptions.mail.subject;
                            }
                            if (self.instanceOptions.customText) {
                                self.CTA = self.instanceOptions.customText.CTA;
                                self.messagePostApply = self.instanceOptions.customText.postApply;
                            }
                            self.dafreco = self.instanceOptions.dafreco;
                            self.scoring = self.instanceOptions.scoring;
                            self.geoDistance = self.instanceOptions.geoDistance;

                            self.updatedInfo = true;
                        }
                    }).always(function () {
                        $('.loader-container').fadeOut(150);
                    });
                },
                addFields: function() {
                    var self = this;
                    var input = $('#fields');
                    var type = $('select[name=typeFields]');
                    if (type.val() !== null && input.val() !== "") {
                        if (type.val() === 'list' || type.val() === 'radio' || type.val() === 'multicheckboxes') {
                            self.fields.push({name: input.val(), type: self.selectedType, listValues: [], required:false});
                            self.selectedType = '';
                            type.val('');
                            input.val('');
                        } else {
                            self.fields.push({name: input.val(), type: self.selectedType, required:false});
                            self.selectedType = '';
                            type.val('');
                            input.val('');
                        }
                    } else {
                        if (document.getElementsByClassName('fields-error') !== null) $('.fields-message').remove();
                        $('#inputAdd').after("<p class='alert-danger text-center text-danger fields-message t-margin'>You need to name a field and to select a type for this field.</p>");
                    }
                },
                addNewValue: function(index) {
                    var self = this;
                    var input = $('#newValue');
                    if (input.val() !== "") {
                        self.fields[index].listValues.push({name: input.val(), code: input.val()});
                        input.val('');
                    } else {
                        if (document.getElementsByClassName('newValue-error') !== null) $('.newValue-message').remove();
                        input.after("<p class='alert-danger text-center text-danger newValue-message t-margin'>You can't add an empty value.</p>");
                    }
                },
                removeField: function(id) {
                    var self = this;
                    self.fields.splice(id, 1);
                },
                removeValue: function(i, index) {
                    var self = this;
                    self.fields[index].listValues.splice(i, 1);
                },
                modalEditListValues: function(i) {
                    this.positionIndex = i;
                    this.listName = this.fields[i].name;
                    $('#modalEditListValues').modal('show');
                },
                save: function(form) {
                    var self = this;
                    var hidden = document.createElement('input');
                    hidden.type = "hidden";
                    hidden.name = "fields";
                    hidden.value = JSON.stringify(self.fields);
                    form.appendChild(hidden);
                    form.submit();
                    // }
                }
            }
        });
    </script>
{% endblock %}