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

{% block title %}Job group - Self service{% endblock %}

{% block body %}
    <div id="app" class="container-fluid no-padding">
        {# NAVS #}
        <div class="row b-margin">
            <div class="col-sm-12">
                <ul class="nav nav-pills nav-justified">
                    <li class="active"><a href="{{ path('self_advertiser_jobgroup_list', {'id': advertiser.id}) }}">My job groups</a></li>
                    <li><a href="{{ path('self_advertiser_jobgroup_jobs', {'id': advertiser.id}) }}">My jobs</a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <h3 class="h3">New job group</h3>
                {% if app.flashes is defined %}
                    {% for message in app.flashes('notice-new') %}
                        <div id="flashMessage" class="row b-margin">
                            <div class="flash-notice">
                                <div class="alert alert-danger alert-dismissable fade in" role="alert" style="text-align: center">
                                    <strong style="text-align: center">{{ message }}</strong>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
                <div class="row b-margin" v-if="lessThanTen" v-cloak>
                    <div class="alert alert-danger alert-dismissable fade in" role="alert" style="text-align: center">
                        <strong>You need more than 10 jobs to create this job group!</strong>
                    </div>
                </div>

                {{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }}
                <div class="form-group">
                    {{ form_label(form.name, "Name", {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
                    <div class="col-md-5 col-sm-10">
                        {{ form_widget(form.name, {'attr': {'class': 'form-control input-sm'}}) }}
                    </div>
                    <div class="text-danger">{{ form_errors(form.name) }}</div>
                </div>
                <div class="form-group">
                    {{ form_label(form.description, "Description", {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
                    <div class="col-md-5 col-sm-10">
                        {{ form_widget(form.description, {'attr': {'class': 'form-control input-sm'}}) }}
                    </div>
                    <div class="text-danger">{{ form_errors(form.description) }}</div>
                </div>
                {{ form_rest(form) }}
                {{ form_end(form) }}
            </div>
        </div>
        <div class="row b-margin">
            <div class="col-sm-12">
                <h3 class="h3" v-cloak>Rules (<% jobsCount %> Jobs matches)</h3>

                <div class="well" v-for="(rule, i) in rules" v-cloak>
                    <template v-for="(group, j) in rule.rules.groups">
                        <span v-if="j > 0" class="label label-warning text-uppercase center-block"><% group.logic %></span>
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <button type="button" class="btn btn-default btn-sm" @click="copyRule(i, j, '', 'group', $event)" style="float: right">Copy group</button>
                                <table class="table rules-table">
                                    <tbody>
                                    <template v-for="(groupRule, k) in group.rules">
                                        <tr v-if="k > 0">
                                            <td colspan="9"><span class="label label-default text-uppercase center-block"><% groupRule.logic %></span></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <select v-model="rules[i].rules.groups[j].rules[k].var1" class="form-control input-sm">
                                                    <option v-for="attr in attributes" :value="attr.key"><% attr.name %></option>
                                                </select>
                                            </td>
                                            <td>
                                                <select v-model="rules[i].rules.groups[j].rules[k].type" class="form-control input-sm">
                                                    <option v-for="op in operators" :value="op.key" v-if="op.exclude.indexOf(rules[i].rules.groups[j].rules[k].var1) == -1"><% op.name %></option>
                                                </select>
                                            </td>
                                            <td :id="i + ',' + j + ',' + k" v-if="rules[i].rules.groups[j].rules[k].var1 != 'age' && rules[i].rules.groups[j].rules[k].var1 != 'category'" style="width: 40%;" data-container="body" data-toggle="popover" data-placement="right">
                                                <tags-input v-model="rules[i].rules.groups[j].rules[k].var2" :criteria="rules[i].rules.groups[j].rules[k].var1"></tags-input>
                                            </td>
                                            <td v-if="rules[i].rules.groups[j].rules[k].var1 == 'age'" style="width: 40%;">
                                                <input v-model="rules[i].rules.groups[j].rules[k].var2" type="number" step="any" min="0" class="form-control input-sm" placeholder="in Days">
                                            </td>
                                            <td v-if="rules[i].rules.groups[j].rules[k].var1 == 'category'" style="width: 40%;">
                                                <multiple-select v-model="rules[i].rules.groups[j].rules[k].var2" :categories="jobCategories"></multiple-select>
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <button v-if="k == group.rules.length - 1" type="button" class="btn btn-default btn-sm" @click="addRule(i, j, k, 'or')">or</button>
                                                    <button v-if="k == group.rules.length - 1" type="button" class="btn btn-default btn-sm" @click="addRule(i, j, k, 'and')">and</button>
                                                    <button type="button" class="btn btn-default btn-sm" @click="removeRule(i, j, k)">-</button>
                                                    <button type="button" class="btn btn-default btn-sm" @click="copyRule(i, j, k, 'line', $event)">copy</button>
                                                    <button v-if="copyRules.line !== '' && k === rules[i].rules.groups[j].rules.length - 1" type="button" class="btn btn-default btn-sm" @click="addCopy(i, j, k, 'line', '', $event)" data-container="body" data-toggle="popover" data-placement="top">paste</button>
                                                </div>
                                            </td>
                                        </tr>
                                    </template>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </template>
                    <div class="row">
                        <div class="col-md-2 col-sm-6">
                            <button type="button" class="btn btn-default btn-sm btn-block" @click="addGroup(i, 'or')">+ OR Group</button>
                        </div>
                        <div class="col-md-2 col-sm-6">
                            <button type="button" class="btn btn-default btn-sm btn-block" @click="addGroup(i, 'and')">+ AND Group</button>
                        </div>
                        <div v-if="copyRules.group !== ''" class="col-md-2 col-sm-6">
                            <button type="button" class="btn btn-default btn-sm btn-block" @click="addCopy(i, '', '', 'group', 'or')">+ OR Copied Group</button>
                        </div>
                        <div v-if="copyRules.group !== ''" class="col-md-2 col-sm-6">
                            <button type="button" class="btn btn-default btn-sm btn-block" @click="addCopy(i, '', '', 'group', 'and')">+ AND Copied Group</button>
                        </div>
                        <div class="col-md-2 col-sm-6">
                            <button type="button" class="btn btn-default btn-sm btn-block" @click="reset()">Reset</button>
                        </div>
                        <div class="col-md-2 col-sm-6">
                            <button type="button" class="btn btn-default btn-sm btn-block" @click="showMatch()">Matching Jobs</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="btn-group btn-group-justified" role="group" aria-label="...">
                    <div class="btn-group" role="group">
                        <a href="{{ path('self_advertiser_jobgroup_list', {'id': advertiser.id}) }}" type="button" class="btn btn-default">Back to list</a>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary" @click="save(document.querySelector('form[name=jobgroup]'))">Create</button>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="matching-jobs-wizard" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Matching Jobs (<% jobsCount %> jobs found)</h4>
                        </div>
                        <div class="modal-body">
                            <div v-if="jobsCount > 200" class="alert alert-warning" role="alert">Job visualization is limited to 200 rows.</div>
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped">
                                    <thead>
                                    <th>ID</th><th>Title</th><th>Contract</th><th>Company</th><th>Country</th><th>Zip</th><th>City</th>
                                    <th>State</th><th>Category</th>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(job, i) in jobs">
                                        <td><% job.id_ext %></td>
                                        <td><% job.title %></td>
                                        <td><% job.contract_type %></td>
                                        <td><% job.company %></td>
                                        <td><% job.country %></td>
                                        <td><% job.zip %></td>
                                        <td><% job.city %></td>
                                        <td><% job.state %></td>
                                        <td><% job.category %></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/x-template" id="tags-input">
        <div class="bootstrap-tagsinput" v-bind="value" v-on:click="focusToInput">
            <span v-if="value !== ''"  v-for="(oneValue, k) in buildTag" class="tag label label-default" style="display: inline-block"><% oneValue %><span data-role="remove" v-on:click="removeTag(k)"></span></span>
            <input type="text" placeholder="" v-on:keyup="getValue" @blur="getValue">
        </div>
    </script>
    <script id="multiple-select" type="text/x-template">
        <select class="form-control input-sm" multiple @change="updateValue">
            <option v-for="category in categories" :value="category.id"><% category.name %></option>
        </select>
    </script>
{% endblock %}

{% block specificJS %}
    <script>

        $(document).ready(function() {
            setTimeout(function() {
                $('#flashMessage').fadeOut(250);
            }, 3000);
        });

        Vue.component('multiple-select', {
            delimiters: ['<%', '%>'],
            template: "#multiple-select",
            props: ['value', 'categories'],
            methods: {
                updateValue: function () {
                    this.value = ($(this.$el).val() !== null) ? $(this.$el).val().join(',') : "";
                    this.$emit('input', this.value);
                    app.$forceUpdate();
                }
            }
        });

        Vue.component('tags-input', {
            delimiters: ['<%', '%>'],
            template: "#tags-input",
            props: ['value'],
            mounted: function(){
                if(this.value !== ""){
                    this.$parent.countMatch()
                }
            },
            computed: {
                buildTag: function () {
                    return this.value.split(/\|\||,/g)
                }
            },
            methods: {
                focusToInput: function (e){
                    var el = $(e.target).children('input');
                    el.focus()
                },
                getValue: function (e){
                    var values = this.value.split(/\|\||,/g);

                    if(e.key === "Enter" || e.type === "blur"){
                        var input = e.target.value.trim();

                        if (input.length > 0) {
                            if(input.match(/\|\||,/g) !== null){
                                var values_split = input.split(/\|\||,/g);

                                $(values_split).each(function (indexMatch, value) {
                                    values.push(value)
                                })
                            } else {
                                values.push(input);
                            }

                            values = this.checkDuplicate(values);

                            this.value = values.join(',');
                            e.target.value = '';
                            this.updateValue();
                        }
                    } else if(e.key === "Backspace" && e.target.value === ''){
                        if(values[0] !== ""){
                            values.pop();
                            this.value = values.join(',');
                            this.updateValue();
                        }
                    }
                },
                checkDuplicate: function (a){
                    var seen = {};
                    var out = [];
                    var len = a.length;
                    var j = 0;
                    for(var i = 0; i < len; i++) {
                        var item = a[i];
                        if(seen[item] !== 1) {
                            seen[item] = 1;
                            out[j++] = item;
                        }
                    }
                    if(out[0] === "") out.splice(0, 1);
                    return out;
                },
                removeTag: function(index){
                    var value = this.value.split(/\|\||,/g);
                    value.splice(index, 1);
                    this.value = value.join(',');
                    this.updateValue()
                },
                updateValue: function () {
                    this.$emit('input', this.value);
                    this.$parent.countMatch();
                    app.$forceUpdate();
                }
            }
        });

        var app = new Vue({
            delimiters: ['<%', '%>'],
            el: '#app',
            beforeMount: function () {
                if (this.rules[0].rules == null || JSON.stringify(this.rules[0].rules) === JSON.stringify({})) {
                    var defaultRules = {
                        groups: [
                            {
                                logic: "",
                                rules: [
                                    {
                                        logic: "",
                                        type: "eq",
                                        var1: "id",
                                        var2: ""
                                    }
                                ]
                            }
                        ]
                    };
                    this.rules[0].rules = defaultRules;
                }
                this.defaultRules = JSON.parse(JSON.stringify(this.rules[0].rules));
            },
            mounted: function () {
                var self = this;
                $('#matching-jobs-wizard').on('hidden.bs.modal', function () {
                    self.jobs = [];
                });

                this.countMatch();
                $('table.rules-table').on('change', "td > input, td > select", function () {
                    self.countMatch();
                });
                this.loadPopover()
            },
            updated: function () {
                this.loadPopover()
            },
            data: {
                advertiserId: "{{ jobgroup.idAdvertiser.id }}",
                jobgroupId: "{{ jobgroup.id }}",
                rules: [{rules: {{ jobgroup.rules|raw }}}],
                jobCategories: {{ jobCategories|json_encode|raw }},
                defaultRules: [],
                attributes: [
                    { key: "id", name: "ID" },
                    { key: "company", name: "Company" },
                    { key: "category", name: "GB Category" },
                    { key: "contract", name: "Contract" },
                    { key: "title", name: "Title" },
                    { key: "description", name: "Description" },
                    { key: "link", name: "Link" },
                    { key: "domain", name: "Domain" },
                    { key: "city", name: "City" },
                    { key: "state", name: "State" },
                    { key: "zip", name: "Postal" },
                    { key: "country", name: "Country" },
                    { key: "custom", name: "Custom Data" },
                    { key: "age", name: "Age" },
                    { key: "jobgroup", name: "Job Group ID" },
                    { key: "salary", name: "Salary" }
                ],
                operators: [
                    { key: "eq", name: "equals", exclude: [] },
                    { key: "neq", name: "does not equal", exclude: [] },
                    { key: "gt", name: "is greater than", exclude: ["jobgroup", "category"] },
                    { key: "gte", name: "is greater than or equal to", exclude: ["jobgroup", "category"] },
                    { key: "lt", name: "is less than", exclude: ["jobgroup", "category"] },
                    { key: "lte", name: "is less than or equal to", exclude: ["jobgroup", "category"] },
                    { key: "in", name: "contains", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] },
                    { key: "nin", name: "does not contain", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] },
                    { key: "sw", name: "starts with", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] },
                    { key: "ew", name: "ends with", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] },
                    { key: "win", name: "words contains", exclude: ["age", "views", "selfapplies", "spend", "todayspend", "cr", "jobgroup", "category"] }
                ],
                jobs: [],
                jobsCount: 0,
                loading: false,
                xhrCount: null,
                lessThanTen: false,
                copyRules: {
                    line: "",
                    group: ""
                }
            },
            watch: {
                jobsCount: function(val) {
                    this.lessThanTen = (val < 10);
                }
            },
            methods: {
                loadPopover: function (){
                    $('td[data-toggle="popover"]').each(function () {
                        var id = $(this).attr('id');
                        $(this).popover({
                            trigger: "manual" ,
                            html: true,
                            animation:false,
                            content: '<button type="button" class="btn btn-default btn-sm" onclick="app.copyToClipboard(' + id + ', this)">Copy to clipboard</button>'
                        }).mouseenter(function () {
                            var self = this;
                            $(this).popover("show");
                            $(".popover").on("mouseleave", function () {
                                $(self).popover('hide');
                            });
                        }).mouseleave(function () {
                            var self = this;
                            setTimeout(function () {
                                if (!$(".popover:hover").length) {
                                    $(self).popover("hide");
                                }
                            }, 100);
                        })
                    })
                },
                reset: function () {
                    this.rules[0].rules = JSON.parse(JSON.stringify(this.defaultRules));
                    this.$forceUpdate();
                },
                addRule: function (i, j, k, logic, copyLogic) {
                    if(logic === 'copy'){
                        this.copyRules.line.logic = copyLogic;
                        this.rules[i].rules.groups[j].rules.push(JSON.parse(JSON.stringify(this.copyRules.line)));
                    } else {
                        var defaultRule = {
                            logic: logic,
                            type: "eq",
                            var1: "id",
                            var2: ""
                        };
                        this.rules[i].rules.groups[j].rules.push(defaultRule);
                    }
                    this.countMatch();
                    this.$forceUpdate();
                },
                removeRule: function (i, j, k) {
                    this.rules[i].rules.groups[j].rules.splice(k, 1);

                    if (this.rules[i].rules.groups[j].rules.length > 0) {
                        this.rules[i].rules.groups[j].rules[0].logic = "";
                    } else {
                        this.rules[i].rules.groups.splice(j, 1);
                    }
                    this.$forceUpdate();
                    self.countMatch();
                },
                addGroup: function (i, logic, copy) {
                    logic = (this.rules[i].rules.groups.length === 0)? "" : logic;
                    if(copy !== undefined){
                        this.rules[i].rules.groups.push(JSON.parse(JSON.stringify(this.copyRules.group)));
                    } else {
                        var defaultGroup = {
                            logic: logic,
                            rules: [
                                {
                                    logic: "",
                                    type: "eq",
                                    var1: "id",
                                    var2: ""
                                }
                            ]
                        };
                        this.rules[i].rules.groups.push(defaultGroup);
                    }
                    this.countMatch();
                    this.$forceUpdate();
                },
                copyLinePopover: function(i, j, k, el){
                    $(el.target).popover({
                        trigger: "manual" ,
                        html: true,
                        animation:false,
                        content: '<button type="button" class="btn btn-default btn-sm" onclick="app.addRule(' + i + ',' + j + ',' + k + ', \'copy\' , \'and\')">+ AND</button>' +
                        '<button type="button" class="btn btn-default btn-sm" onclick="app.addRule(' + i + ',' + j + ',' + k + ', \'copy\' , \'or\')">+ OR</button>'
                    }).mouseleave(function () {
                        var self = this;
                        setTimeout(function () {
                            if (!$(".popover:hover").length) {
                                $(self).popover("hide");
                            }
                        }, 100);
                    }).popover("show");

                    $(".popover").on("mouseleave", function () {
                        $(el.target).popover('hide');
                    });
                },
                addCopy: function(i, j, k, what, logic, el){
                    var self = this;
                    switch (what) {
                        case 'line' :
                            this.copyLinePopover(i, j, k, el);
                            break;
                        case 'group' :
                            this.copyRules.group.logic = logic;
                            this.addGroup(i, logic, 'copy');
                            break;
                    }
                },
                copyRule: function(i, j, k, what, el){
                    switch (what) {
                        case 'line':
                            this.copyRules.line = JSON.parse(JSON.stringify(this.rules[i].rules.groups[j].rules[k]));
                            break;
                        case 'group':
                            this.copyRules.group = JSON.parse(JSON.stringify(this.rules[i].rules.groups[j]));
                            break;
                    }
                },
                copyToClipboard: function (i, j ,k, element){
                    var el = document.createElement('textarea');
                    el.value = this.rules[i].rules.groups[j].rules[k].var2;
                    el.setAttribute('readonly', '');
                    el.style.position = 'absolute';
                    el.style.left = '-9999px';
                    document.body.appendChild(el);
                    el.select();
                    document.execCommand('copy');
                    document.body.removeChild(el);
                    $(element).html("Copied !");
                },
                save: function (form) {
                    this.countMatch(function (self) {
                        if (self.jobsCount >= 10) {
                            var hid2 = document.createElement('input');
                            var hid3 = document.createElement('input');
                            hid2.type = "hidden";
                            hid2.name = "rules";
                            hid2.value = JSON.stringify(self.rules[0]);
                            form.appendChild(hid2);
                            hid3.type = "hidden";
                            hid3.name = "jobsCount";
                            hid3.value = self.jobsCount;
                            form.appendChild(hid3);
                            form.submit();
                        } else {
                            self.lessThanTen = true;
                        }
                    });
                },
                showMatch: function () {
                    var self = this;
                    $('.loader-container').fadeIn(150);
                    self.loading = true;
                    // $('td[name="desc-popover"]').popover('destroy');

                    $.ajax({
                        url: "{{ path('ajax_self_advertiser_jobgroup_matching') }}",
                        method: "post",
                        data: {advertiser: self.advertiserId, rules: self.rules[0]}
                    }).done(function (data) {
                        self.jobs = data.jobs;
                        self.jobsCount = data.count;
                    }).always(function () {
                        $('.loader-container').fadeOut(150);
                        self.loading = false;
                        $('#matching-jobs-wizard').modal('show');
                    });
                },
                countMatch: function (callback) {
                    var self = this;
                    if (this.xhrCount !== null) if (typeof this.xhrCount === 'xhr') this.xhrCount.abort();
                    this.xhrCount = $.ajax({
                        url: "{{ path('ajax_self_advertiser_jobgroup_matching') }}",
                        method: "post",
                        data: {advertiser: self.advertiserId, rules: self.rules[0], count: true}
                    }).done(function (data) {
                        self.jobsCount = data;
                        if (typeof callback !== 'undefined') callback(self);
                    });
                }
            }
        });
    </script>
{% endblock %}