{% extends "Includes/layout_ats.html.twig" %}

{% block title %}Daf ATS{% endblock %}

{% block pageheader %}Jobs ATS{% endblock %}

{% block body %}
 <div id="settingDaf">
     <main class="row main mx-0 min-vw-100">
         {{ include('Includes/aside_ats.html.twig') }}
         <section class="content-area p-r-l-6">
             <div class="title-page text-left pb-4 mb-2 pl-0 d-flex">
                 <div class="d-flex w-50">
                     <span class="lead font-300 mr-2">
                         Form :
                     </span>
                     <span class="lead font-600">
                         {{ dafInstance.nameInstance }}
                     </span>
                     {% if  dafInstance.active == 0 %}
                         <span class="chips status-form ml-5 chips_red ">
                            inactive
                        </span>
                     {% endif %}

                 </div>
                 <div class="d-block text-right w-50">
                     {% if is_granted('ROLE_BACKEND') %}
                         <button class="btn btn-primary rounded-30 px-3  {{ dafInstance.active == 0 ? 'disabled' : '' }}  ">
                             <i class="fal fa-cog"></i>
                             Save
                         </button>
                     {% endif %}
                 </div>
             </div>
             {% if (preview | length > 0) %}
                 <div class="content">
                     <div class="px-0 row mb-5">
                         <div class="col-md-4 sidepart-left">
                             <div class="px-4 bg-white pb-5 rounded-2 setting-content">
                                 <form action="" method="post" enctype="multipart/form-data" name="options" style="{{ dafInstance.active == 0 ? 'pointer-events: none;' : '' }}">
                                     <div class="form-group">
                                         <div class="row mx-0">
                                             <div class="d-flex justify-content-between col-12 px-0">
                                                 <div class="align-items-baseline d-flex pt-3 pb-5">
                                                     <i class="fal fa-cog"></i>
                                                     <h5 class="ml-4">
                                                         <b>Daf options</b>
                                                     </h5>
                                                 </div>
                                                 {% if  dafInstance.active == 0 %}
                                                     <div class="align-items-baseline d-flex my-0 py-0">
                                                         <span class="chips status-form my-4 mx-0 btn-secondary disabled">
                                                            DISABLED
                                                        </span>
                                                     </div>
                                                 {% endif %}

                                             </div>
                                             <div class="col-sm-12 px-0 d-flex mb-4">
                                                 <div class="input-group w-75">
                                                     <div class="input-group-addon labelDaf mt-auto w-50">Main color</div>
                                                     <input type="text" class="form-control border-top-0 border-left-0 border-right-0" id="mainColor" name="mainColor" placeholder="Hexa, rgb or named color" v-model="mainColor">
                                                 </div>
                                                 <div class="w-25 mt-auto">
                                                     <span class="text-right ml-auto d-block" style="width: 30px; height: 30px; border-radius: 50%;" v-bind:style="{ backgroundColor: mainColor }"></span>
                                                 </div>
                                             </div>
                                             <div class="col-sm-12 px-0 d-flex mb-4">
                                                 <div class="input-group w-75">
                                                     <div class="input-group-addon labelDaf mt-auto w-50">Text button color</div>
                                                     <input type="text" class="form-control  border-top-0 border-left-0 border-right-0" id="btnTxtColor" name="btnTxtColor" placeholder="Hexa, rgb or named color" v-model="btnTxtColor">
                                                 </div>
                                                 <div class="w-25 mt-auto">
                                                     <span class="text-right ml-auto d-block" style="width: 30px; height: 30px; border-radius: 50%;" v-bind:style="{ backgroundColor: btnTxtColor }"></span>
                                                 </div>
                                             </div>
                                             <div class="col-sm-12 px-0 d-flex mb-4">
                                                 <div class="input-group w-75">
                                                     <div class="input-group-addon labelDaf mt-auto w-50">Text button</div>
                                                     <input type="text" class="form-control border-top-0 border-left-0 border-right-0" id="CTA" name="CTA" placeholder="JE POSTULE" v-model="CTA">
                                                 </div>
                                                 <div class="w-25 mt-auto" v-if="CTA.length == 0">
                                                     <span class="ml-auto small d-block ">by default</span>
                                                 </div>
                                             </div>
                                             <div class="col-sm-12 px-0">
                                                 <div class="input-group">

                                                     {% if dafInstance.idJobgroup %}
                                                         <div class="input-group-addon labelDaf w-100 d-flex justify-content-between">
                                                             <span>Language</span>
                                                             <div class="d-flex flex-row" v-if="selectedLang">
                                                                 <div v-if="selectedLang == 'fr'" style="width: 30px;">
                                                                     <img src="{{ asset('Dashboard/img/france.png') }}" alt="" class="img-fluid">
                                                                 </div>
                                                                 <div v-if="selectedLang == 'esp'" style="width: 30px;">
                                                                     <img src="{{ asset('Dashboard/img/espagne.png') }}" alt="" class="img-fluid">
                                                                 </div>
                                                                 <div v-if="selectedLang == 'por'" style="width: 30px;">
                                                                     <img src="{{ asset('Dashboard/img/portugal.png') }}" alt="" class="img-fluid">
                                                                 </div>
                                                                 <div v-if="selectedLang == 'eng'" style="width: 30px;">
                                                                     <img src="{{ asset('Dashboard/img/uk.png') }}" alt="" class="img-fluid">
                                                                 </div>
                                                                 <span class="font-600 ml-2"><% selectedLang %></span>
                                                             </div>
                                                             <div v-else>
                                                                 <span>no language</span>
                                                             </div>
                                                         </div>
                                                     {% endif %}

                                                     <div class="small my-3 w-100 text-underline">change the language</div>
                                                     <select class="input-sm form-control rounded-2" name="language" id="language" v-model="selectedLang">
                                                         <option value="">Select a language</option>
                                                         <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 mt-4" id="editOption">
                                             <div class="col-sm-12 d-flex justify-content-between py-3">
                                                 <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-12 d-flex justify-content-between pb-3">
                                                 <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" :checked="scoring" v-on:change="scoringChange">
                                             </div>
                                             <div class="col-sm-12 d-flex justify-content-between pb-3">
                                                 <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" :checked="geoDistance" v-on:change="geoDistanceChange">
                                             </div>
                                         </div>
                                         <div class="row">
                                             <div class="col-sm-12 py-4">
                                                 <hr>
                                                 <div class="d-flex justify-content-between pt-3 pb-5 align-items-baseline">
                                                     <div class="align-items-baseline d-flex">
                                                         <i class="fal fa-list-alt"></i>
                                                         <h5 class="ml-4">
                                                             <b>Daf fields</b>
                                                         </h5>
                                                     </div>
                                                     <i class="fal fa-angle-down text-center cursor-pointer" style="width: 20px; height: 15px;" v-on:click="expandDiv('collapsed_1')"></i>
                                                 </div>
                                                 <div class="div-collapsed-setting" id="collapsed_1" style="display: none;">
                                                     <div class="col-sm-12 mb-2 px-0" id="modifyFields">
                                                         <ul id="listFields" class="pl-0">
                                                             <li class="mb-2 d-flex flex-row justify-content-between mb-4">
                                                                 <span class="font-600">Fields</span>
                                                                 <span class="font-600">Type</span>
                                                             </li>
                                                             <li v-for="field, i in fields" :data-id="i" :id="'field_'+i" class="listSkills mb-2 d-flex flex-column">
                                                                 <template v-if="isEditField !== i">
                                                                     <div class="d-flex justify-content-between flex-row">
                                                                         <div class="d-flex justify-content-between flex-column">
                                                                            <span> <% field.name %></span>
                                                                             <span class="d-block">
                                                                                <button class="btn btn-xs" type="button" title="Show List Values" data-tippy-content="Show List Values" v-if="field.type === 'list' || field.type === 'radio' || field.type === 'multicheckboxes'" @click="modalEditListValues(i)">
                                                                                     <i class="fal fa-ellipsis-v"></i>
                                                                                </button>
                                                                                <button class="btn btn-xs" type="button" @click="isEditField = i" title="Edit" data-tippy-content="Edit">
                                                                                      <i class="far fa-pencil"></i>
                                                                                </button>
                                                                                <button class="btn btn-xs" type="button" @click="removeField(i)" title="Remove" data-tippy-content="Remove">
                                                                                     <i class="fa fa-times-circle"></i>
                                                                                </button>
                                                                             </span>
                                                                         </div>
                                                                         <div class="">
                                                                             <span class="d-block text-right"> <% field.type %></span>
                                                                            <span class="checkbox my-auto">
                                                                            <span class="is-required">Is required ?</span>
                                                                            <input class="inp-cbx" type="checkbox"
                                                                                   style="display: none;" v-model="field.required" v-bind="field.required"/>
                                                                            <label class="cbx" :for="i">
                                                                              <span>
                                                                                   <svg width="10px" height="10px" viewbox="0 0 10 10">
                                                                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                                                                   </svg>
                                                                              </span>
                                                                            </label>
                                                                        </span>
{#                                                            <span class="is-required">Is required ? <input type="checkbox" v-model="field.required" v-bind="field.required"></span>#}
                                                                            </span>
                                                                         </div>
                                                                     </div>

                                                                 </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>add</span>
                                                                              </button>
                                                                          </span>
                                                                     </div>
                                                                 </template>
                                                             </li>
                                                         </ul>
                                                     </div>
                                                     <div class="input-group mt-4" id="inputAdd">
                                                         <div class="input-group-addon labelDaf mb-3 w-100"><b>Additional fields</b></div>
                                                         <input type="text" class="form-control" id="fields" placeholder="field's name " style="width: 50%;">
                                                         <select class="form-control" id="typeFields" name="typeFields" 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>
                                                     </div>
                                                     <span class="input-group-btn">
                                                    <button class="btn btn-primary px-3 mt-4 rounded-30 d-block ml-auto" type="button" id="addFields" @click="addFields">
                                                        <i class="far fa-plus mr-1"></i> add new field
                                                    </button>
                                             </span>
                                                 </div>
                                             </div>
                                         </div>
                                         <div class="row">
                                             <div class="col-sm-12">
                                                 <hr>
                                                 <div class="d-flex justify-content-between pt-3 pb-5 align-items-baseline">
                                                     <div class="d-flex align-items-baseline pt-3 pb-5">
                                                         <i class="far fa-envelope"></i>
                                                         <h5 class="ml-4">
                                                             <b>Mails & messages</b>
                                                         </h5>
                                                     </div>
                                                     <i class="fal fa-angle-down text-center cursor-pointer" style="width: 20px; height: 15px;" v-on:click="expandDiv('collapsed_2')"></i>
                                                 </div>
                                                <div class="div-collapsed-setting" id="collapsed_2" style="display: none;">
                                                    <div class="input-group mb-4">
                                                        <label class="labelDaf w-100 font-500">Message send when an apply is posted</label>
                                                        <textarea type="text" class="form-control rounded-2 text-secondary px-2 py-3" name="messagePostApply" id="messagePostApply" v-model="messagePostApply" style="min-height: 150px"></textarea>
                                                    </div>

                                                    <div class="">
                                                        <div class="col-sm-12 px-0">
                                                            <p class="font-500">Mail for Unqualified apply </p>
                                                            <div class="input-group">
                                                                <label class="abelDaf w-100">Subject</label>
                                                                <input type="text" class="form-control rounded-2" name="unqualifySubject" id="unqualifySubject" v-model="unqualifySubject">
                                                            </div>
                                                            <div class="input-group t-margin">
                                                                <label class="labelDaf w-100">Message</label>
                                                                <textarea class="form-control rounded-2 text-secondary px-2 py-3" rows="5" id="unqualifyMessage" name="unqualifyMessage" v-model="unqualifyMessage" style="min-height: 150px"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                             </div>
                                         </div>

                                         {% if is_granted('ROLE_BACKEND') %}
                                             <div class="row my-3 text-right">
                                                 <div class="col-sm-12 text-right">
                                                     <button class="btn btn-primary mt-4 px-4 rounded-30 {{ dafInstance.active == 0 ? 'disabled' : '' }}">
                                                         <i class="fal fa-cog mr-2"></i>Save</button>
                                                 </div>
                                             </div>
                                         {% endif %}
                                     </div>
                                 </form>
                             </div>
                         </div>
                         <div class="col-md-8 pl-0 sidepart-right rounded-2" >
                             <div class="h-100 p-3 bg-white daf-content">
                                 <iframe id="settingIframe" frameBorder="0" marginwidth="0" marginheight="0" align="top" hspace="0" vspace="0" src="{{ preview }}"  style="width: 100%; height: 100%; border: none; pointer-events: all;"></iframe>
                             </div>
                         </div>
                     </div>
                 </div>
              {% else %}
                  <div class="alert alert-danger text-center">
                      There is no Form availaible
                  </div>
             {% endif %}

         </section>
     </main>

{#     Modal #}
     <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>Add</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">
                                <div class="d-flex justify-content-between">
                                    <span><% value.name %></span>
                                    <span>
                                        <button class="btn btn-xs" type="button" @click="isEditValue = i" title="Edit">
                                            <i class="far fa-pencil"></i>
                                        </button>&nbsp;
                                        <button class="btn btn-xs" type="button" @click="removeValue(i, positionIndex)" title="Remove">
                                            <i class="fa fa-times-circle"></i>
                                        </button>
                                 </span>
                                </div>
                             </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>Add</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>
 </div>
    <script type="text/javascript">
        chargeUrl();
        function chargeUrl() {
            $.ajax({
                method: "POST",
                url: "{{ path('ajax_get_link_preview') }}",
                dataType: 'json',
                data: {
                    token: '{{ dafInstance.token }}',
                    idJg: {% if dafInstance.idJobgroup is not null %} {{ dafInstance.idJobgroup }} {% else %} null {% endif %},
                    idAdv: {{ advertiser.id }}
                }
            }).done(function (data) {
                $('#settingIframe').attr('src', data);
            });
        }

        var vmt = new Vue({
            el: '#settingDaf',
            delimiters: ['<%', '%>'],
            data: {
                token: '{{ dafInstance.token }}',
                idJg: {% if dafInstance.idJobgroup is not null %} {{ dafInstance.idJobgroup }} {% else %} null {% endif %},
                idAdv: {{ advertiser.id }},
                instances: [],
                iframeUrl: "",
                idAdvertiser: {{ advertiser.id  }},
                fields: [],
                franceLang: false,
                ukLang: false,
                espagneLang: false,
                portugalLang: false,
                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 () {
                this.getInfoInstance();
            },
            updated: function() {
                if (this.updatedInfo) {
                    //$('#checkboxDafreco, #checkboxGeodistance, #checkboxScoring').bootstrapToggle();
                }
            },
            beforeCreate: function() {
            },
            beforeMount: function(){
            },
            methods: {
                scoringChange: function() {
                  this.scoring = !this.scoring;
                },
                geoDistanceChange: function() {
                    this.geoDistance = !this.geoDistance;
                },
                getInfoInstance: function() {
                    var self = this;

                    $('.loader-container').fadeIn(150);
                    $.ajax({
                        url: "{{ path('ajax_get_info_instance', {'advertiser': advertiser.id, 'instance': dafInstance.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 mt-3 py-1 rounded-2'>You need to name a field and to select a type for this field.</p>");
                    }
                },
                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();
                    // }
                },
                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);
                },
                expandDiv: function (div) {
                     $('#' + div).slideToggle(400);
                }

            }
        });
    </script>
{% endblock %}
{% block specificJS %}

{% endblock %}