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

{% block title %}{{ campaign.name }} - Self service{% endblock %}

{% block body %}
    <div id="app" class="container-fluid no-padding" v-cloak>
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <!-- Nav tabs -->
                        <ul id="wizard-tabs" class="nav nav-tabs" role="tablist">
                            <li v-for="(rule, i) in rules" role="presentation" :class="{ active: !i}">
                                <a :href="'#' + rule.formatLabel" :aria-controls="rule.formatLabel" role="tab" data-toggle="tab"><% rule.name %></a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div v-for="(rule, i) in rules" role="tabpanel" class="tab-pane fade" :class="[{ in: !i}, { active: !i}]" :id="rule.formatLabel">
                                <br>
                                <form action="" class="form-inline">
                                    <div v-if="rule.formatLabel != 'all'" class="form-group">
                                        <label class="control-label">Status</label>
                                        <input :checked="rules[i].status" v-model="rules[i].status" :data-id="i" name="publisher-status" type="checkbox" data-size="small" data-onstyle="success" data-offstyle="danger">
                                    </div>
                                    <div v-if="rule.formatLabel == 'all'" class="form-group">
                                        <label class="control-label">Use these rules for active publishers ?</label>
                                        <input v-model="all" name="rules-all" type="checkbox" data-size="small" data-onstyle="primary" data-offstyle="default" data-on="Yes" data-off="No">
                                    </div>
                                </form>
                                <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>
                                    <br>
                                    <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>
                            </div>
                        </div>
                        <br>
                        <br>
                        <div class="row">
                            <div class="col-md-2 col-md-offset-4 col-sm-4"><button type="button" class="btn btn-default btn-block" @click="reset()">Reset</button></div>
                            <div class="col-md-2 col-sm-4"><button type="button" class="btn btn-primary btn-block" @click="save()" :disabled="!isValid()">Submit</button></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>
        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'],
            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);
                    app.$forceUpdate();
                }
            }
        });

        var app = new Vue({
            delimiters: ['<%', '%>'],
            el: '#app',
            beforeMount: function () {
                this.rules.forEach(function (rule) {
                    if (rule.rules == null) {
                        var defaultRules = {
                            groups: [
                                {
                                    logic: "",
                                    rules: [
                                        {
                                            logic: "",
                                            type: "eq",
                                            var1: "id",
                                            var2: ""
                                        }
                                    ]
                                }
                            ]
                        };
                        rule.rules = defaultRules;
                    } else {
                        rule.rules = JSON.parse(rule.rules);
                    }
                });
                this.defaultRules = JSON.parse(JSON.stringify(this.rules));
            },
            mounted: function () {
                var self = this;
                $('[name=publisher-status], [name=rules-all]').bootstrapToggle();
                $('#app').on('change', '[name=publisher-status]', function (event) {
                    self.toggleStatus(event.target.dataset.id, event.target.checked);
                });
                $('#app').on('change', '[name=rules-all]', function (event) {
                    self.toggleAll(event.target.checked);
                });
                $('#matching-jobs-wizard').on('hidden.bs.modal', function () {
                    self.jobs = [];
                });

                this.loadPopover()
            },
            updated: function () {
                this.loadPopover()
            },
            data: {
                campaignId: "{{ campaign.id }}",
                advertiserId: "{{ campaign.idAdvertiser }}",
                rules: {{ rules|json_encode|raw }},
                jobCategories: {{ jobCategories|json_encode|raw }},
                all: {{ all }},
                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: "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: "selfapplies", name: "Applies" },
                    { key: "selfmonthlyapplies", name: "Monthly Applies" },
                    { key: "spend", name: "Total Spend" },
                    { key: "todayspend", name: "Daily Spend" },
                    { key: "cpa", name: "CPA" },
                    { key: "salary", name: "Salary" }
                ],
                operators: [
                    { key: "eq", name: "equals", exclude: [] },
                    { key: "neq", name: "does not equal", exclude: [] },
                    { key: "gt", name: "is greater than", exclude: ["category"] },
                    { key: "gte", name: "is greater than or equal to", exclude: ["category"] },
                    { key: "lt", name: "is less than", exclude: ["category"] },
                    { key: "lte", name: "is less than or equal to", exclude: ["category"] },
                    { key: "in", name: "contains", exclude: ["age", "views", "selfapplies", "selfmonthlyapplies", "spend", "todayspend", "cr", "category"] },
                    { key: "nin", name: "does not contain", exclude: ["age", "views", "selfapplies", "selfmonthlyapplies", "spend", "todayspend", "cr", "category"] }
                ],
                jobs: [],
                jobsCount: 0,
                copyRules: {
                    line: "",
                    group: ""
                }
            },
            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));
                },
                numberFormat: function (number, digit) {
                    number = parseFloat(number);
                    return number.toLocaleString('en-GB', { maximumFractionDigits: digit });
                },
                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);
                    }
                },
                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.$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 () {
                    var myForm = document.createElement('form');
                    myForm.name = "rule-form";
                    myForm.method = "post";
                    myForm.action = "{{ path('self_campaign_optimize_update', {'advertiser': advertiser.id, 'campaign': campaign.id}) }}";

                    var hid2 = document.createElement('input');
                    hid2.name = "rules";
                    hid2.value = JSON.stringify(this.rules);
                    myForm.appendChild(hid2);

                    var hid3 = document.createElement('input');
                    hid3.name = "all";
                    hid3.value = this.all;
                    myForm.appendChild(hid3);

                    myForm.style = "display:none;";
                    document.body.appendChild(myForm);

                    myForm.submit();
                },
                isValid: function () {
                    var valid = true;

                    return valid;
                },
                truncate: function (str, length) {
                    return (str.length > length) ? str.substr(0,length-1)+'...' : str;
                },
                toggleStatus: function (i, newStatus) {
                    this.rules[i].status = newStatus;
                },
                toggleAll: function (newStatus) {
                    this.all = newStatus;
                }
            }
        });
    </script>
{% endblock %}