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

{% block title %}Talent Desk{% endblock %}

{% block pageheader %}Talent Desk{% endblock %}

{% block body %}
    <div id="app" v-cloak>
        <div class="row">
            <div class="col-md-2 col-sm-6">
                <div class="form-group">
                    <select class="selectpicker input-sm form-control" name="channel" id="channel" v-model="selectedChannel">
                        {% for i, channel in channels %}
                            <option value="{{ i }}">{{ channel }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="col-md-2 col-sm-6">
                <select name="period" class="form-control input-sm" v-model="selectedPeriod">
                    {% for i, period in periods %}
                        <option value="{{ i }}">{{ period }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2 col-sm-6 groupDate" style="display: none">
                    <div class="input-group date">
                        <input type="text" id="datepicker-start" name="datepicker-start" class="form-control input-sm"
                               placeholder="Start Date" title="Specific Start Date"><span class="input-group-addon"><i
                                    class="glyphicon glyphicon-calendar"></i></span>
                    </div>
            </div>
            <div class="col-md-2 col-sm-6 groupDate" style="display: none">
                    <div class="input-group date">
                        <input type="text" id="datepicker-end" name="datepicker-end" class="form-control input-sm"
                               placeholder="End Date" title="Specific End Date"><span class="input-group-addon">
                            <i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <select name="category" class="input-sm form-control" v-model="selectedCategory">
                    {% for i, category in categories %}
                        <option value="{{ i }}">{{ category }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2 col-sm-6">
                <select class="input-sm form-control" name="advertiser" id="advertiser" v-model="selectedAdvertiser">
                    {% for i, advertiser in advertisers %}
                        <option value="{{ i }}">{{ advertiser }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2 col-sm-6">
                <button class="btn btn-primary btn-block btn-sm" type="submit" @click="result()">Submit</button>
            </div>
        </div>

        <div class="row t-margin">
            <div class="col-sm-8">
                <div class="panel panel-default" style="height:630px">
                    <div class="panel-heading">CPA OVER TIME</div>
                    <div class="panel-body">
                        <canvas id="cpa-over-time" height="150"></canvas>
                        <div class="loader-container-ajax-timeline-cpa" style="overflow: hidden">
                            <div class="sk-wave content-center">
                                <div class="sk-rect sk-rect1"></div>
                                <div class="sk-rect sk-rect2"></div>
                                <div class="sk-rect sk-rect3"></div>
                                <div class="sk-rect sk-rect4"></div>
                                <div class="sk-rect sk-rect5"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">AVERAGE GLOBAL CPA</div>
                    <div class="panel-body" style="text-align: center">
                        <span class="cpaSingle" style="font-size: 7.5rem;"></span>
                        <div class="loader-container-ajax-glocpacr" style="overflow: hidden">
                            <div class="sk-wave content-center">
                                <div class="sk-rect sk-rect1"></div>
                                <div class="sk-rect sk-rect2"></div>
                                <div class="sk-rect sk-rect3"></div>
                                <div class="sk-rect sk-rect4"></div>
                                <div class="sk-rect sk-rect5"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">AVERAGE GLOBAL CR</div>
                    <div class="panel-body" style="text-align: center">
                        <span class="crSingle" style="font-size: 7.5rem;"></span>
                        <div class="loader-container-ajax-glocpacr" style="overflow: hidden">
                            <div class="sk-wave content-center">
                                <div class="sk-rect sk-rect1"></div>
                                <div class="sk-rect sk-rect2"></div>
                                <div class="sk-rect sk-rect3"></div>
                                <div class="sk-rect sk-rect4"></div>
                                <div class="sk-rect sk-rect5"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">ALL APPLY</div>
                    <div class="panel-body" style="text-align: center">
                        <span class="appliesSingle" style="font-size: 7.5rem;"></span>
                        <div class="loader-container-ajax-apply" style="overflow: hidden">
                            <div class="sk-wave content-center">
                                <div class="sk-rect sk-rect1"></div>
                                <div class="sk-rect sk-rect2"></div>
                                <div class="sk-rect sk-rect3"></div>
                                <div class="sk-rect sk-rect4"></div>
                                <div class="sk-rect sk-rect5"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {#<div class="row t-margin">#}
            {#<div class="col-sm-4">#}
                {#<div class="panel panel-default">#}
                    {#<div class="panel-heading">APPLIES PER LOCATION</div>#}
                    {#<div class="panel-body">#}
                        {#<canvas id="applies-location" height="300"></canvas>#}
                        {#<div class="loader-container-ajax-glocpacr" style="overflow: hidden">#}
                            {#<div class="sk-wave content-center">#}
                                {#<div class="sk-rect sk-rect1"></div>#}
                                {#<div class="sk-rect sk-rect2"></div>#}
                                {#<div class="sk-rect sk-rect3"></div>#}
                                {#<div class="sk-rect sk-rect4"></div>#}
                                {#<div class="sk-rect sk-rect5"></div>#}
                            {#</div>#}
                        {#</div>#}
                    {#</div>#}
                {#</div>#}
            {#</div>#}
            {#<div class="col-sm-4">#}
                {#<div class="panel panel-default">#}
                    {#<div class="panel-heading">CPA PER LOCATION</div>#}
                    {#<div class="panel-body">#}
                        {#<canvas id="cpa-location" height="300"></canvas>#}
                        {#<div class="loader-container-ajax-glocpacr" style="overflow: hidden">#}
                            {#<div class="sk-wave content-center">#}
                                {#<div class="sk-rect sk-rect1"></div>#}
                                {#<div class="sk-rect sk-rect2"></div>#}
                                {#<div class="sk-rect sk-rect3"></div>#}
                                {#<div class="sk-rect sk-rect4"></div>#}
                                {#<div class="sk-rect sk-rect5"></div>#}
                            {#</div>#}
                        {#</div>#}
                    {#</div>#}
                {#</div>#}
            {#</div>#}
            {#<div class="col-sm-4">#}
                {#<div class="panel panel-default">#}
                    {#<div class="panel-heading">CR PER LOCATION</div>#}
                    {#<div class="panel-body">#}
                        {#<canvas id="cr-location" height="300"></canvas>#}
                        {#<div class="loader-container-ajax-glocpacr" style="overflow: hidden">#}
                            {#<div class="sk-wave content-center">#}
                                {#<div class="sk-rect sk-rect1"></div>#}
                                {#<div class="sk-rect sk-rect2"></div>#}
                                {#<div class="sk-rect sk-rect3"></div>#}
                                {#<div class="sk-rect sk-rect4"></div>#}
                                {#<div class="sk-rect sk-rect5"></div>#}
                            {#</div>#}
                        {#</div>#}
                    {#</div>#}
                {#</div>#}
            {#</div>#}
        {#</div>#}
    </div>
{% endblock %}

{% block specificJS %}
    <script>
        $(document).ready(function() {


        });

        var app = new Vue({
            delimiters: ['<%', '%>'],
            el: '#app',
            data: {
                selectedPeriod: "7days",
                selectedByPeriod: "",
                selectedCategory: "all",
                selectedChannel: "all",
                selectedAdvertiser: "all",
                advertisers: [],
                countApply: 0,
                globalCr: 0,
                globalCpa: 0,
                chartTimeLineCpa: null,
                appliesPerLocation: null,
                cpaPerLocation: null,
                crPerLocation: null,
                dateCPA: [],
                timeLineCPA: [],
                dataRegion: [],
                dataApplies: [],
                dataCr: [],
                dataCpa: []
            },
            mounted: function() {
                this.getAllApplies(this.selectedAdvertiser, this.selectedCategory, this.selectedPeriod);
                this.getGloablCpaCr(this.selectedAdvertiser, this.selectedCategory, this.selectedPeriod);
                this.getTimeLineCpa(this.selectedAdvertiser, this.selectedCategory, this.selectedPeriod);

                $('select[name=period]').on('change', function () {
                    var optValue = $(this).val();
                    if (optValue === "specific") {
                        $('div.groupDate').fadeIn(500);
                    } else {
                        $('div.groupDate').fadeOut(500);
                    }
                });

                $('input[name=datepicker-start]').datetimepicker({
                    format: "yyyy-mm-dd",
                    todayBtn: true,
                    pickTime: false,
                    pickSeconds: false,
                    minView: 2,
                    viewMode: 2,
                    autoclose: true,
                    startDate: '2017-01-01'
                });

                $('input[name=datepicker-end]').datetimepicker({
                    format: "yyyy-mm-dd",
                    todayBtn: true,
                    pickTime: false,
                    pickSeconds: false,
                    minView: 2,
                    viewMode: 2,
                    autoclose: true,
                    startDate: '2017-01-01'
                });
            },
            methods: {
                result: function () {
                    this.getAllApplies(this.selectedAdvertiser, this.selectedCategory, this.selectedPeriod);
                    // if (this.appliesPerLocation != null && this.cpaPerLocation != null && this.crPerLocation != null) {
                    //     this.appliesPerLocation.destroy();
                    //     this.cpaPerLocation.destroy();
                    //     this.crPerLocation.destroy();
                        this.getGloablCpaCr(this.selectedAdvertiser, this.selectedCategory, this.selectedPeriod);
                    // }
                    if (this.chartTimeLineCpa != null) {
                        this.chartTimeLineCpa.destroy();
                        this.getTimeLineCpa(this.selectedAdvertiser, this.selectedCategory, this.selectedPeriod);
                    }
                },
                getAllApplies: function(advertiserId, categoryId, period) {
                    var self = this;
                    $('.loader-container-ajax-apply').fadeIn(150);
                    $.ajax({
                        url: "{{ path('ajax_all_applies') }}",
                        method: "POST",
                        data: {advertiserId: advertiserId, categoryId: categoryId, period: period, dateStart: $('#datepicker-start').val(), dateEnd: $('#datepicker-end').val()}
                    }).done(function (data) {
                        self.countApply = data;

                        $({ Counter: 0}).animate({
                            Counter: self.countApply
                        }, {
                            duration: 2000,
                            easing: 'swing',
                            step: function () {
                                $('.appliesSingle').text(Math.ceil(this.Counter).toLocaleString('en'));
                            }
                        });
                    }).always(function(){
                        $('.loader-container-ajax-apply').fadeOut(150);
                    });
                },
                getGloablCpaCr: function(advertiserId, categoryId, period) {
                    var self = this;
                    $('.loader-container-ajax-glocpacr').fadeIn(150);
                    $.ajax({
                        url: "{{ path('ajax_global_cpa_cr') }}",
                        method: "POST",
                        data: {advertiserId: advertiserId, categoryId: categoryId, period: period, dateStart: $('#datepicker-start').val(), dateEnd: $('#datepicker-end').val()}
                    }).done(function (data) {
                        self.globalCpa = data['globalCpa'];
                        self.globalCr = data['globalCr'];
                        // self.dataCpa = data['chartCpa'];
                        // self.dataCr = data['chartCr'];
                        // self.dataApplies = data['chartApplies'];
                        // self.dataRegion = data['chartRegion'];

                        // self.initChartAppliesPerLocation(self.dataApplies, self.dataRegion);
                        // self.initChartCpaPerLocation(self.dataCpa, self.dataRegion);
                        // self.initChartCrPerLocation(self.dataCr, self.dataRegion);

                        $({ Counter: 0}).animate({
                            Counter: self.globalCpa
                        }, {
                            duration: 2000,
                            easing: 'swing',
                            step: function (now) {
                                $('.cpaSingle').text(Math.round(now*10)/10 + "€");
                            }
                        });

                        $({ Counter: 0}).animate({
                            Counter: self.globalCr
                        }, {
                            duration: 2000,
                            easing: 'swing',
                            step: function (now) {
                                $('.crSingle').text(Math.round(now*10)/10 + "%");
                            }
                        });
                    }).always(function(){
                        $('.loader-container-ajax-glocpacr').fadeOut(150);
                    });
                },
                getTimeLineCpa: function(advertiserId, categoryId, period){
                    var self = this;
                    $('.loader-container-ajax-timeline-cpa').fadeIn(150);
                    $.ajax({
                        url: "{{ path('ajax_timeline_cpa') }}",
                        method: "POST",
                        data: {advertiserId: advertiserId, categoryId: categoryId, period: period, dateStart: $('#datepicker-start').val(), dateEnd: $('#datepicker-end').val() }
                    }).done(function(data) {
                        self.dateCPA = data['datesLabels'];
                        self.timeLineCPA = data['chartTimeLineCpa'];
                        self.initChartTimeLineCpa(self.dateCPA, self.timeLineCPA);
                    }).always(function () {
                        $('.loader-container-ajax-timeline-cpa').fadeOut(150);
                    })
                },
                initChartTimeLineCpa: function(datesLabels, chartTimeLineCpa){
                    this.chartTimeLineCpa = new Chart(document.getElementById("cpa-over-time").getContext("2d"), {
                        type: "bar",
                        data: {
                            labels: datesLabels,
                            datasets: [{
                                borderColor: "#EFB81D",
                                backgroundColor: "#EFB81D",
                                data: chartTimeLineCpa
                            }]
                        },
                        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 "CPA" +': ' + label + ' €';
                                    }
                                }
                            },
                            scales: {
                                yAxes: [{
                                    gridLines: {
                                        display: false
                                    }
                                }],
                                xAxes: [{
                                    ticks: {
                                        beginAtZero: true,
                                        fontStyle: "bold",
                                        fontColor: "#EFB81D"
                                    },
                                    gridLines: {
                                        display: true,
                                        color: "rgba(0, 0, 0, 0)",
                                        zeroLineColor: "rgba(0, 0, 0, 0)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: "CPA OVER TIME",
                                        fontColor: "#EFB81D",
                                        fontStyle: "bold"
                                    }
                                }]
                            },
                            defaultFontFamily: "'Open Sans'"
                        }
                    });
                }
                // initChartAppliesPerLocation: function(applies, location){
                //     this.appliesPerLocation = new Chart(document.getElementById("applies-location").getContext("2d"), {
                //         type: "horizontalBar",
                //         data: {
                //             labels: location,
                //             datasets: [{
                //                 borderColor: "#EFB81D",
                //                 backgroundColor: "#EFB81D",
                //                 data: applies
                //             }]
                //         },
                //         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 + ' applies';
                //                     }
                //                 }
                //             },
                //             scales: {
                //                 yAxes: [{
                //                     gridLines: {
                //                         display: false
                //                     }
                //                 }],
                //                 xAxes: [{
                //                     ticks: {
                //                         beginAtZero: true,
                //                         fontStyle: "bold",
                //                         fontColor: "#EFB81D",
                //                         maxTicksLimit: 5
                //                     },
                //                     gridLines: {
                //                         display: true,
                //                         color: "rgba(0, 0, 0, 0)",
                //                         zeroLineColor: "rgba(0, 0, 0, 0)"
                //                     },
                //                     scaleLabel: {
                //                         display: true,
                //                         labelString: "APPLIES PER LOCATION",
                //                         fontColor: "#EFB81D",
                //                         fontStyle: "bold"
                //                     }
                //                 }]
                //             },
                //             defaultFontFamily: "'Open Sans'"
                //         }
                //     });
                // },
                // initChartCpaPerLocation: function(cpa, location){
                //     this.cpaPerLocation = new Chart(document.getElementById("cpa-location").getContext("2d"), {
                //         type: "horizontalBar",
                //         data: {
                //             labels: location,
                //             datasets: [{
                //                 borderColor: "#EFB81D",
                //                 backgroundColor: "#EFB81D",
                //                 data: cpa
                //             }]
                //         },
                //         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 + ' €';
                //                     }
                //                 }
                //             },
                //             scales: {
                //                 yAxes: [{
                //                     gridLines: {
                //                         display: false
                //                     }
                //                 }],
                //                 xAxes: [{
                //                     ticks: {
                //                         beginAtZero: true,
                //                         fontStyle: "bold",
                //                         fontColor: "#EFB81D",
                //                         maxTicksLimit: 5
                //                     },
                //                     gridLines: {
                //                         display: true,
                //                         color: "rgba(0, 0, 0, 0)",
                //                         zeroLineColor: "rgba(0, 0, 0, 0)"
                //                     },
                //                     scaleLabel: {
                //                         display: true,
                //                         labelString: "CPA PER LOCATION",
                //                         fontColor: "#EFB81D",
                //                         fontStyle: "bold"
                //                     }
                //                 }]
                //             },
                //             defaultFontFamily: "'Open Sans'"
                //         }
                //     });
                // },
                // initChartCrPerLocation: function(cr, location){
                //     this.crPerLocation = new Chart(document.getElementById("cr-location").getContext("2d"), {
                //         type: "horizontalBar",
                //         data: {
                //             labels: location,
                //             datasets: [{
                //                 borderColor: "#EFB81D",
                //                 backgroundColor: "#EFB81D",
                //                 data: cr
                //             }]
                //         },
                //         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 + ' %';
                //                     }
                //                 }
                //             },
                //             scales: {
                //                 yAxes: [{
                //                     gridLines: {
                //                         display: false
                //                     }
                //                 }],
                //                 xAxes: [{
                //                     ticks: {
                //                         beginAtZero: true,
                //                         fontStyle: "bold",
                //                         fontColor: "#EFB81D",
                //                         maxTicksLimit: 5
                //                     },
                //                     gridLines: {
                //                         display: true,
                //                         color: "rgba(0, 0, 0, 0)",
                //                         zeroLineColor: "rgba(0, 0, 0, 0)"
                //                     },
                //                     scaleLabel: {
                //                         display: true,
                //                         labelString: "CR PER LOCATION",
                //                         fontColor: "#EFB81D",
                //                         fontStyle: "bold"
                //                     }
                //                 }]
                //             },
                //             defaultFontFamily: "'Open Sans'"
                //         }
                //     });
                // }
            }
        });
    </script>
{% endblock %}