{% 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>

        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#edit" aria-controls="edit" role="tab" data-toggle="tab">Edit job group</a>
            </li>
            <li role="presentation">
                <a href="#overview" aria-controls="overview" role="tab" data-toggle="tab">Overview</a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="edit">
                {% if app.flashes is defined %}
                    {% for message in app.flashes('notice-edit') %}
                        <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 t-margin" v-if="lessThanTen" v-cloak>
                    <div class="alert alert-danger alert-dismissable fade in" role="alert" style="text-align: center">
                        <strong style="text-align: center">You need more than 10 jobs to use this job group!</strong>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <div class="panel-body t-margin">
                            {{ form_start(form, {'attr': {'class': 'form-horizontal', '@submit': 'save'}}) }}
                            <div class="form-group">
                                {{ form_label(form.name, "Name", {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
                                <div class="col-md-9 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-9 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) }}

                            {{ form_start(delete_form, {'attr': {'id': 'delete-form', 'style': 'display:none;'}}) }}
                            {{ form_end(delete_form) }}
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="panel panel-default">
                            <div class="panel-heading">HISTO JOBS OVER 30 DAYS</div>
                            <div class="panel-body">
                                {% if valuesJobJobgroup|length == 0 %}
                                    <h2>NO DATA TO DISPLAY</h2>
                                {% else %}
                                    <canvas height="50" id="jobs30days"></canvas>
                                {% endif %}
                            </div>
                        </div>
                    </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" :disabled="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-default" @click="clone()" title="Clone rules to a new Job Group">Clone</button>#}
{#                            </div>#}
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-primary" @click="save(document.querySelector('form[name=jobgroup]'))">Save</button>
                            </div>
                            <div class="btn-group" role="group">
                                <input class="btn btn-danger" id="btn-delete" type="submit" value="Delete">
                            </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>
            <div role="tabpanel" class="tab-pane fade in" id="overview">
                <div class="row b-margin">
                    <div class="col-sm-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">JOB BY CATEGORIES</div>
                            <div class="panel-body">
                                {% if jobsNumberCat|length == 0 %}
                                    <img class="no-data center-block" src="/Dashboard/img/no-data.png">
                                {% else %}
                                    <canvas id="categoryJob" height="300px"></canvas>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">JOB BY LOCATIONS</div>
                            <div class="panel-body">
                                {% if jobsNumberRegion|length == 0 %}
                                    <img class="no-data center-block" src="/Dashboard/img/no-data.png">
                                {% else %}
                                    <canvas id="regionJob" height="300px"></canvas>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">JOB BY CONTRACTS</div>
                            <div class="panel-body">
                                {% if jobsNumberContract|length == 0 %}
                                    <img class="no-data center-block" src="/Dashboard/img/no-data.png">
                                {% else %}
                                    <canvas id="contractJob" height="300px"></canvas>
                                {% endif %}
                            </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 @input="updateValue">
            <option v-for="category in categories" :value="category.id"><% category.name %></option>
        </select>
    </script>
{% endblock %}

{% block specificJS %}
    <script>
        var chartJobByCats = null;
        var chartJobByRegions = null;
        var chartJobByContracts = null;
        var chartJobs30Days = null;
        var jobsLabelCat = {{ jobsLabelCat|json_encode|raw }};
        var jobsLabelRegion = {{ jobsLabelRegion|json_encode|raw }};
        var jobsLabelContract = {{ jobsLabelContract|json_encode|raw }};
        var jobsNumberCat = {{ jobsNumberCat|json_encode|raw }};
        var jobsNumberRegion = {{ jobsNumberRegion|json_encode|raw }};
        var jobsNumberContract = {{ jobsNumberContract|json_encode|raw }};
        var labelsJobJobgroup = {{ labelsJobJobgroup|json_encode|raw }};
        var valuesJobJobgroup = {{ valuesJobJobgroup|json_encode|raw }};

        $(document).ready(function () {
            animCounter.animate(".counter", 1000);

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

            var jobs30days = document.getElementById("jobs30days");
            if (jobs30days != null) {
                chartJobs30Days = new Chart(document.getElementById("jobs30days").getContext("2d"), {
                    type: "bar",
                    data: {
                        "labels": labelsJobJobgroup,
                        "datasets": [{
                            "borderColor": "#5cb85c",
                            "backgroundColor": "rgba(92, 184, 92, 0.8)",
                            "data": valuesJobJobgroup
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        tooltips: {
                            callbacks: {
                                label: function (tooltipItems, data) {
                                    var label = data.datasets[0].data[tooltipItems.index];
                                    label = parseFloat(label);

                                    var total = 0;
                                    var datasets = data.datasets[0].data;
                                    for (var i in datasets) {
                                        total += datasets[i];
                                    }

                                    label = label.toLocaleString('en-GB', {maximumFractionDigits: 2});
                                    var libelle = data.labels[tooltipItems.index];

                                    return libelle + ': ' + label + ' jobs';
                                }
                            }
                        },
                        scales: {
                            xAxes: [{
                                ticks: {
                                    beginAtZero: false,
                                    fontStyle: "bold",
                                    fontColor: "#5cb85c"
                                },
                                gridLines: {
                                    display: true,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColor: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    fontColor: "#5cb85c",
                                    fontStyle: "bold"
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                    maxTicksLimit: 4,
                                    beginAtZero: true
                                },
                                gridLines: {
                                    display: false
                                }
                            }]
                        },
                        defaultFontFamily: "'Open Sans'"
                    }
                });
            }

            var categoryJob = document.getElementById('categoryJob');
            if (categoryJob != null) {
                chartJobByCats = new Chart(document.getElementById('categoryJob').getContext("2d"), {
                    type: "horizontalBar",
                    data: {
                        "labels": jobsLabelCat,
                        "datasets": [{
                            lineTension: 0,
                            "label": "JobNumber",
                            "fill": true,
                            "borderColor": "rgba(239, 184, 29, 1)",
                            "backgroundColor": "rgba(239, 184, 29, .8)",
                            "pointBorderColor": "#fff",
                            "pointRadius": 5,
                            "pointHoverRadius": 6,
                            "data": jobsNumberCat
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        tooltips: {
                            callbacks: {
                                label: function (tooltipItems, data) {
                                    var label = tooltipItems.xLabel;
                                    label = parseInt(label);
                                    label = label.toLocaleString('en-GB', {maximumFractionDigits: 2});
                                    return data.datasets[tooltipItems.datasetIndex].label + ': ' + label;
                                }
                            }
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    maxTicksLimit: 5
                                },
                                gridLines: {
                                    display: true,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColor: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    fontColor: 'rgba(192, 57, 43, 1)',
                                    fontStyle: "bold"
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display: false
                                }
                            }]
                        },
                        defaultFontFamily: "'Open Sans'"
                    }
                });
            }

            var regionJob = document.getElementById('regionJob');
            if (regionJob != null) {
                chartJobByRegions = new Chart(document.getElementById('regionJob').getContext("2d"), {
                    type: "horizontalBar",
                    data: {
                        "labels": jobsLabelRegion,
                        "datasets": [{
                            lineTension: 0,
                            "label": "JobNumber",
                            "fill": true,
                            "borderColor": "rgba(239, 184, 29, 1)",
                            "backgroundColor": "rgba(239, 184, 29, .8)",
                            "pointBorderColor": "#fff",
                            "pointRadius": 5,
                            "pointHoverRadius": 6,
                            "data": jobsNumberRegion
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        tooltips: {
                            callbacks: {
                                label: function (tooltipItems, data) {
                                    var label = tooltipItems.xLabel;
                                    label = parseInt(label);
                                    label = label.toLocaleString('en-GB', {maximumFractionDigits: 2});
                                    return data.datasets[tooltipItems.datasetIndex].label + ': ' + label;
                                }
                            }
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    maxTicksLimit: 5
                                },
                                gridLines: {
                                    display: true,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColor: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    fontColor: 'rgba(192, 57, 43, 1)',
                                    fontStyle: "bold"
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display: false
                                }
                            }]
                        },
                        defaultFontFamily: "'Open Sans'"
                    }
                });
            }

            var contractJob = document.getElementById('contractJob');
            if (contractJob != null) {
                chartJobByContracts = new Chart(document.getElementById('contractJob').getContext("2d"), {
                    type: "horizontalBar",
                    data: {
                        "labels": jobsLabelContract,
                        "datasets": [{
                            lineTension: 0,
                            "label": "JobNumber",
                            "fill": true,
                            "borderColor": "rgba(239, 184, 29, 1)",
                            "backgroundColor": "rgba(239, 184, 29, .8)",
                            "pointBorderColor": "#fff",
                            "pointRadius": 5,
                            "pointHoverRadius": 6,
                            "data": jobsNumberContract
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        tooltips: {
                            callbacks: {
                                label: function (tooltipItems, data) {
                                    var label = tooltipItems.xLabel;
                                    label = parseInt(label);
                                    label = label.toLocaleString('en-GB', {maximumFractionDigits: 2});
                                    return data.datasets[tooltipItems.datasetIndex].label + ': ' + label;
                                }
                            }
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    maxTicksLimit: 5
                                },
                                gridLines: {
                                    display: true,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColor: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    fontColor: 'rgba(192, 57, 43, 1)',
                                    fontStyle: "bold"
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display: false
                                }
                            }]
                        },
                        defaultFontFamily: "'Open Sans'"
                    }
                });
            }
        });

        Vue.component('multiple-select', {
            delimiters: ['<%', '%>'],
            template: "#multiple-select",
            props: ['value', 'categories'],
            mounted: function () {
                var self = this;
                $(this.$el).find('option').each(function (i, e) {
                    if (self.value.split(',').includes(e.value)) $(e).prop('selected', true);
                });
            },
            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 = [];
                });

                $('#btn-delete').click(function(evt){
                    evt.preventDefault();
                    if(confirm("Are you sure ?") === true)
                        $('#delete-form').submit();
                });

                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.tagsUpdate = true;
                    this.$forceUpdate();
                    this.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;
                        }
                    });
                },
                clone: function () {
                    var myForm = document.createElement('form');
                    myForm.method = "post";
                    myForm.action = "#";

                    var hidden = document.createElement('input');
                    hidden.type = "hidden";
                    hidden.name = "jobgroup-copy";
                    hidden.value = this.jobgroupId;
                    myForm.appendChild(hidden);

                    document.body.appendChild(myForm);
                    myForm.submit();
                },
                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 %}