{% 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-md-12">
            <div class="row">
                <form name="report-campaign-period" class="right-side" action="{{ path('self_campaign_report', {'advertiser': campaign.idAdvertiser, 'campaign': campaign.id }) }}" method="post">
                    <div class="col-md-2">
                        <input type="hidden" name="byPeriod" value="{{ byPeriod }}">
                        <select class="form-control combo-selected" name="publisher" id="publisher" v-model="selectedPublisher">
                            {% for key, value in selectAgregators %}
                                <option value="{{ key }}">{{ value }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <div class="input-group date" style="display: none;">
                            <input type="text" id="period-start" name="period-start" class="form-control" placeholder="Start Date" title="Specific Start Date" value="{{ formStartPeriod }}"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="input-group date" style="display: none;">
                            <input type="text" id="period-end" name="period-end" class="form-control"
                                   placeholder="End Date" title="Specific End Date"
                                   value="{{ formEndPeriod }}"><span class="input-group-addon"><i
                                        class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <select class="form-control combo-selected" name="period" id="period">
                            {% for key, value in selectPeriods %}
                                <option value="{{ key }}" {% if period == key %}selected=selected class="combo-selected"{% endif %}>{{ value }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary btn-block">Submit</button>
                    </div>
                </form>
                <div class="col-md-2">
                    <form name="export-campaign-period" class="right-side" action="{{ path('self_campaign_report_export') }}" method="post">
                        <div class="btn-group" role="group">
                            <button type="submit" class="btn btn-primary">Export</button>
                            <button v-if="selectedPublisher == 'all'" type="button" class="btn btn-default"
                                    @click="toggleSource" :disabled="loading"
                                    :title="(publisherSource) ? 'With publishers' : 'Without publishers'">
                                <span v-if="!publisherSource" class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
                                <span v-if="publisherSource" class="glyphicon glyphicon-th" aria-hidden="true"></span>
                            </button>
                        </div>
                        <input type="hidden" name="publisherExport" id="publisherExport">
                        <input type="hidden" name="periodExport" id="periodExport">
                        <input type="hidden" name="startDateExport" id="startDateExport">
                        <input type="hidden" name="endDateExport" id="endDateExport">
                        <input type="hidden" name="campaignIdExport" id="campaignIdExport" value="{{ campaign.id }}">
                        <input type="hidden" name="exportWithSource" id="exportWithSource" :value="publisherSource">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <hr style="border: none">
    <div class="row">
        <div class="col-md-12">
            <div class="row b-margin">
                <div class="col-md-4" style="text-align: center; font-size: 25px;">
                    <div id="clicksHead" class="col-md-12 fake-btn-not-active">
                        {{ sumClicks|number_format(0, '.', ',') }}<br><span style="font-size: 15px">Clicks</span>
                            {% if percentClicks > 0 %}
                                <i class="glyphicon glyphicon-arrow-up green-arrow"><span class="arrow-number">+{{ percentClicks|number_format(1, '.', ',') }}%</span></i>
                            {% elseif percentClicks < 0 %}
                                <i class="glyphicon glyphicon-arrow-down red-arrow"><span class="arrow-number">{{ percentClicks|number_format(1, '.', ',') }}%</span></i>
                            {% endif %}
                    </div>
                </div>
                <div class="col-md-4" style="text-align: center; font-size: 25px;">
                    <div id="appliesHead" class="col-md-12 fake-btn-active-yellow">
                        {{ sumApplies|number_format(0, '.', ',') }}<br><span style="font-size: 15px">Applies</span>
                            {% if percentApplies > 0 %}
                                <i class="glyphicon glyphicon-arrow-up green-arrow"><span class="arrow-number">+{{ percentApplies|number_format(1, '.', ',') }}%</span></i>
                            {% elseif percentApplies < 0 %}
                                <i class="glyphicon glyphicon-arrow-down red-arrow"><span class="arrow-number">{{ percentApplies|number_format(1, '.', ',') }}%</span></i>
                            {% endif %}
                    </div>
                </div>
                <div class="col-md-4" style="text-align: center; font-size: 25px;">
                    <div id="spendHead" class="col-md-12 fake-btn-not-active">
                        {{ sumSpend|number_format(2, '.', ',') }} &euro;<br><span style="font-size: 15px">Spend</span>
                            {% if percentSpend > 0 %}
                                <i class="glyphicon glyphicon-arrow-up green-arrow"><span class="arrow-number">+{{ percentSpend|number_format(1, '.', ',') }}%</span></i>
                            {% elseif percentSpend < 0 %}
                                <i class="glyphicon glyphicon-arrow-down red-arrow"><span class="arrow-number">{{ percentSpend|number_format(1, '.', ',') }}%</span></i>
                            {% endif %}
                    </div>
                </div>
            </div>
            <div class="row b-margin">
                <div class="col-md-4" style="text-align: center; font-size: 25px;">
                    <div id="cpaHead" class="col-md-12 fake-btn-active-red">
                        {{ cpa|number_format(2, '.', ',') }} &euro;<br><span style="font-size: 15px">CPA</span>
                            {% if percentCpa < 0 %}
                                <i class="glyphicon glyphicon-arrow-down green-arrow"><span class="arrow-number">{{ percentCpa|number_format(1, '.', ',') }}%</span></i>
                            {% elseif percentCpa > 0 %}
                                <i class="glyphicon glyphicon-arrow-up red-arrow"><span class="arrow-number">+{{ percentCpa|number_format(1, '.', ',') }}%</span></i>
                            {% endif %}
                    </div>
                </div>
                <div class="col-md-4" style="text-align: center; font-size: 25px;">
                    <div id="cpcHead" class="col-md-12 fake-btn-not-active">
                        {{ cpc|number_format(2, '.', ',') }} &euro;<br><span style="font-size: 15px">CPC</span>
                            {% if percentCpc < 0 %}
                                <i class="glyphicon glyphicon-arrow-down green-arrow"><span class="arrow-number">{{ percentCpc|number_format(1, '.', ',') }}%</span></i>
                            {% elseif percentCpc > 0 %}
                                <i class="glyphicon glyphicon-arrow-up red-arrow"><span class="arrow-number">+{{ percentCpc|number_format(1, '.', ',') }}%</span></i>
                            {% endif %}
                    </div>
                </div>
                <div class="col-md-4" style="text-align: center; font-size: 25px;">
                    <div id="crHead" class="col-md-12 fake-btn-not-active">
                        {{ cr|number_format(2, '.', ',') }} %<br><span style="font-size: 15px">CR</span>
                            {% if percentCr > 0 %}
                                <i class="glyphicon glyphicon-arrow-up green-arrow"><span class="arrow-number">+{{ percentCr|number_format(1, '.', ',') }}%</span></i>
                            {% elseif percentCr < 0 %}
                                <i class="glyphicon glyphicon-arrow-down red-arrow"><span class="arrow-number">{{ percentCr|number_format(1, '.', ',') }}%</span></i>
                            {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default panel-dataTable">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12 period-buttons">
                            <div class="btn-group" data-toggle="buttons">
                                <label id="appliesCpaButton" class="btn btn-default btn-check active">
                                    <input type="radio" name="appliesCpa" autocomplete="off" checked> Applies & CPA
                                </label>
                                <label id="cpcCrButton" class="btn btn-default">
                                    <input type="radio" name="cpcCr" autocomplete="off"> CPC & CR
                                </label>
                                <label id="clicksAppliesButton" class="btn btn-default">
                                    <input type="radio" name="clicksApplies" autocomplete="off"> Clicks & Applies
                                </label>
                                <label id="spendAppliesButton" class="btn btn-default">
                                    <input type="radio" name="spendApplies" autocomplete="off"> Spend & Applies
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <canvas id="chart" height="100px"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped">
                    <thead style="background-color: #32363F; color: white">
                        <th>Categories</th>
                        <th>Number of jobs</th>
                        <th>Applies</th>
                        <th>CPA</th>
                        <th>Average apply per job</th>
                    </thead>
                    <tbody>
                        <tr v-for="cat in consoCat">
                            <td><% cat.domain %></td>
                            <td><% cat.nbJob %></td>
                            <td><% cat.applies %></td>
                            <td><% numberFormat(cat.cpa, 2) %>&euro;</td>
                            <td><% numberFormat(cat.moy, 2) %></td>
                        </tr>
                    </tbody>
                </table>
                <div class="loader-container-ajax-cat" 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 class="col-sm-6">
            <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped">
                    <thead style="background-color: #32363F; color: white">
                        <th>Regions</th>
                        <th>Number of jobs</th>
                        <th>Applies</th>
                        <th>CPA</th>
                        <th>Average apply per job</th>
                    </thead>
                    <tbody>
                        <tr v-for="region in consoRegion">
                            <td><% region.region %></td>
                            <td><% region.nbJob %></td>
                            <td><% region.applies %></td>
                            <td><% numberFormat(region.cpa, 2) %>&euro;</td>
                            <td><% numberFormat(region.moy, 2) %></td>
                        </tr>
                    </tbody>
                </table>
                <div class="loader-container-ajax-region" 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>
{% endblock %}

{% block specificJS %}
    <script>
        var myChart = null;
        var ctx = null;
        var isSpecificPeriod = {% if isSpecificPeriod %}true{% else %}false{% endif %};
        var labelsDate = {{ datesLabels|json_encode|raw }};
        var dataClicks = {{ chartClicks|json_encode|raw }};
        var dataApplies = {{ chartApplies|json_encode|raw }};
        var dataSpend = {{ chartSpend|json_encode|raw }};
        var dataCPC = {{ chartCPC|json_encode|raw }};
        var dataCR = {{ chartCR|json_encode|raw }};
        var dataCPA = {{ chartCPA|json_encode|raw }};

        var app = new Vue({
            delimiters: ['<%', '%>'],
            el: '#app',
            data: {
                consoCat: [],
                consoRegion: [],
                period: {{ period|json_encode|raw }},
                periodStart: {{ formStartPeriod|json_encode|raw }},
                periodEnd: {{ formEndPeriod|json_encode|raw }},
                specific: isSpecificPeriod,
                selectedPublisher: "{{ agregatorid }}",
                publisherSource: false,
                loading: false
            },
            mounted: function() {
                var self = this;
                this.ajaxConsoCat();
                this.ajaxConsoRegion();
            },
            methods: {
                toggleSource: function () {
                    this.publisherSource = !this.publisherSource;
                },
                ajaxConsoCat: function() {
                    var self = this;
                    $('.loader-container-ajax-cat').fadeIn(150);
                    $.ajax({
                        method: "POST",
                        url: "{{ path('ajax_conso_cat', {'id': campaign.id}) }}",
                        dataType: 'json',
                        data: {period: self.period, periodStart: self.periodStart, periodEnd: self.periodEnd, specific: self.specific}
                    }).done(function(data) {
                        self.consoCat = data;
                    }).always(function() {
                        $('.loader-container-ajax-cat').fadeOut(250);
                    });
                },
                ajaxConsoRegion: function() {
                    var self = this;
                    $('.loader-container-ajax-region').fadeIn(150);
                    $.ajax({
                        method: "POST",
                        url: "{{ path('ajax_conso_region', {'id': campaign.id}) }}",
                        dataType: 'json',
                        data: {period: self.period, periodStart: self.periodStart, periodEnd: self.periodEnd, specific: self.specific}
                    }).done(function(data) {
                        self.consoRegion = data;
                    }).always(function() {
                        $('.loader-container-ajax-region').fadeOut(250);
                    });
                },
                numberFormat: function (number, digit) {
                    number = parseFloat(number);
                    return number.toLocaleString('en-GB', { maximumFractionDigits: digit });
                },
            }
        });

        $(document).ready(function () {
            if (isSpecificPeriod)
                $('div.input-group.date').fadeIn(250);

            $('form[name=report-campaign-period]').submit(function () {
                displayLoader();
            });

            $('form.right-side select[name=period]').change(function () {
                var optValue = $(this).val();
                if (optValue === "specific") {
                    $('div.input-group.date').fadeIn(500);
                } else {
                    $('div.input-group.date').fadeOut(500);
                }
            });

            $('form[name=report-campaign-period] .input-group.date').datepicker({
                format: "yyyy-mm-dd",
                maxViewMode: 2,
                language: 'en'
            });

            var publisherExport = $('#publisher');
            var periodExport = $('#period');
            var startExport = $('#period-start');
            var endExport = $('#period-end');
            $('#publisherExport').val(publisherExport.val());
            $('#periodExport').val(periodExport.val());
            $('#startDateExport').val(startExport.val());
            $('#endDateExport').val(endExport.val());
            publisherExport.on('change', function() {
                $('#publisherExport').val(publisherExport.val());
            });
            periodExport.on('change', function() {
                $('#periodExport').val(periodExport.val());
            });
            startExport.on('change', function() {
                $('#startDateExport').val(startExport.val());
            });
            endExport.on('change', function() {
                $('#endDateExport').val(endExport.val());
            });

            ctx = document.getElementById("chart").getContext("2d");
            updateChart();

            $('#appliesCpaButton').click(function (){
                $('#appliesHead').addClass('fake-btn-active-yellow').removeClass('fake-btn-not-active');
                $('#cpaHead').addClass('fake-btn-active-red').removeClass('fake-btn-not-active');
                $('#crHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#clicksHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#spendHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#cpcHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $(this).addClass('btn-check');
                $('#cpcCrButton').removeClass('btn-check');
                $('#clicksAppliesButton').removeClass('btn-check');
                $('#spendAppliesButton').removeClass('btn-check');
                $('input[name=appliesCpa]').attr('checked', true);
                $('input[name=cpcCr]').attr('checked', false);
                $('input[name=clicksApplies]').attr('checked', false);
                $('input[name=spendApplies]').attr('checked', false);
                updateChart();
            });
            $('#cpcCrButton').click(function (){
                $('#cpcHead').addClass('fake-btn-active-yellow').removeClass('fake-btn-not-active');
                $('#crHead').addClass('fake-btn-active-red').removeClass('fake-btn-not-active');
                $('#cpaHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#clicksHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#spendHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#appliesHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $(this).addClass('btn-check');
                $('#appliesCpaButton').removeClass('btn-check');
                $('#clicksAppliesButton').removeClass('btn-check');
                $('#spendAppliesButton').removeClass('btn-check');
                $('input[name=cpcCr]').attr('checked', true);
                $('input[name=appliesCpa]').attr('checked', false);
                $('input[name=clicksApplies]').attr('checked', false);
                $('input[name=spendApplies]').attr('checked', false);
                updateChart();
            });
            $('#clicksAppliesButton').click(function (){
                $('#clicksHead').addClass('fake-btn-active-red').removeClass('fake-btn-not-active');
                $('#appliesHead').addClass('fake-btn-active-yellow').removeClass('fake-btn-not-active');
                $('#cpaHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#crHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#spendHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#cpcHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $(this).addClass('btn-check');
                $('#appliesCpaButton').removeClass('btn-check');
                $('#cpcCrButton').removeClass('btn-check');
                $('#spendAppliesButton').removeClass('btn-check');
                $('input[name=clicksApplies]').attr('checked', true);
                $('input[name=appliesCpa]').attr('checked', false);
                $('input[name=cpcCr]').attr('checked', false);
                $('input[name=spendApplies]').attr('checked', false);
                updateChart();
            });
            $('#spendAppliesButton').click(function (){
                $('#spendHead').addClass('fake-btn-active-red').removeClass('fake-btn-not-active');
                $('#appliesHead').addClass('fake-btn-active-yellow').removeClass('fake-btn-not-active');
                $('#cpaHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#crHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#clicksHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $('#cpcHead').addClass('fake-btn-not-active').removeClass('fake-btn-active-red fake-btn-active-yellow');
                $(this).addClass('btn-check');
                $('#appliesCpaButton').removeClass('btn-check');
                $('#cpcCrButton').removeClass('btn-check');
                $('#clicksAppliesButton').removeClass('btn-check');
                $('input[name=spendApplies]').attr('checked', true);
                $('input[name=appliesCpa]').attr('checked', false);
                $('input[name=cpcCr]').attr('checked', false);
                $('input[name=clicksApplies]').attr('checked', false);
                updateChart();
            });

            function updateChart() {
                if (myChart != null)
                    myChart.destroy();
                var ds = [];
                var yAxes = [];
                $('.btn-default').each(function (k, v) {
                    var idCheck = $(v).prop('id');
                    if ($(v).hasClass('btn-check')) {
                        switch (idCheck) {
                            case "appliesCpaButton":
                                ds.push({
                                    lineTension: 0,
                                    "label": "Applies",
                                    "fill": false,
                                    "borderColor": "rgba(247, 202, 24, 1)",
                                    "backgroundColor": "rgba(247, 202, 24, 1)",
                                    "pointBorderColor": "#fff",
                                    "pointBackgroundColor": "rgba(247, 202, 24, 1)",
                                    "pointRadius": 5,
                                    "pointHoverRadius": 6,
                                    yAxisID: "y-axis-0",
                                    "data": dataApplies
                                }, {
                                    lineTension: 0,
                                    "label": "CPA",
                                    "fill": false,
                                    "borderColor": "rgba(192, 57, 43, 1)",
                                    "backgroundColor": "rgba(192, 57, 43, 1)",
                                    "pointBorderColor": "#fff",
                                    "pointBackgroundColor": "rgba(192, 57, 43, 1)",
                                    "pointRadius": 5,
                                    "pointHoverRadius": 6,
                                    yAxisID: "y-axis-1",
                                    "data": dataCPA
                                });
                                yAxes.push({
                                    position: "left",
                                    "id": "y-axis-0",
                                    ticks: {
                                        beginAtZero: true,
                                        fontStyle: "bold",
                                        fontColor: "rgba(247, 202, 24, 1)",
                                        maxTicksLimit: 7
                                    },
                                    gridLines: {
                                        display: false,
                                        color: "rgba(0, 0, 0, 0)",
                                        zeroLineColor: "rgba(0, 0, 0, 0)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: "APPLIES",
                                        fontColor: "rgba(247, 202, 24, 1)",
                                        fontStyle: "bold"
                                    }
                                }, {
                                    position: "right",
                                    "id": "y-axis-1",
                                    ticks: {
                                        beginAtZero: true,
                                        fontStyle: "bold",
                                        fontColor: "rgba(192, 57, 43, 1)",
                                        maxTicksLimit: 7
                                    },
                                    gridLines: {
                                        display: false,
                                        color: "rgba(0, 0, 0, 0)",
                                        zeroLineColor: "rgba(0, 0, 0, 0)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: "CPA",
                                        fontColor: "rgba(192, 57, 43, 1)",
                                        fontStyle: "bold"
                                    }
                                });
                                break;
                            case "cpcCrButton":
                                ds.push({
                                    lineTension: 0,
                                    "label": "Cpc",
                                    "fill": false,
                                    "borderColor": "rgba(247, 202, 24, 1)",
                                    "backgroundColor": "rgba(247, 202, 24, 1)",
                                    "pointBorderColor": "#fff",
                                    "pointBackgroundColor": "rgba(247, 202, 24, 1)",
                                    "pointRadius": 5,
                                    "pointHoverRadius": 6,
                                    yAxisID: "y-axis-0",
                                    "data": dataCPC
                                }, {
                                    lineTension: 0,
                                    "label": "CR",
                                    "fill": false,
                                    "borderColor": "rgba(192, 57, 43, 1)",
                                    "backgroundColor": "rgba(192, 57, 43, 1)",
                                    "pointBorderColor": "#fff",
                                    "pointBackgroundColor": "rgba(192, 57, 43, 1)",
                                    "pointRadius": 5,
                                    "pointHoverRadius": 6,
                                    yAxisID: "y-axis-1",
                                    "data": dataCR
                                });
                                yAxes.push({
                                    position: "left",
                                    "id": "y-axis-0",
                                    ticks: {
                                        beginAtZero: true,
                                        fontStyle: "bold",
                                        fontColor: "rgba(247, 202, 24, 1)",
                                        maxTicksLimit: 7
                                    },
                                    gridLines: {
                                        display: false,
                                        color: "rgba(0, 0, 0, 0)",
                                        zeroLineColor: "rgba(0, 0, 0, 0)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: "CPC",
                                        fontColor: "rgba(247, 202, 24, 1)",
                                        fontStyle: "bold"
                                    }
                                }, {
                                    position: "right",
                                    "id": "y-axis-1",
                                    ticks: {
                                        beginAtZero: true,
                                        fontStyle: "bold",
                                        fontColor: "rgba(192, 57, 43, 1)",
                                        maxTicksLimit: 7
                                    },
                                    gridLines: {
                                        display: false,
                                        color: "rgba(0, 0, 0, 0)",
                                        zeroLineColor: "rgba(0, 0, 0, 0)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: "CR",
                                        fontColor: "rgba(192, 57, 43, 1)",
                                        fontStyle: "bold"
                                    }
                                });
                                break;
                            case "clicksAppliesButton":
                                ds.push({
                                    lineTension: 0,
                                    "label": "Applies",
                                    "fill": false,
                                    "borderColor": "rgba(247, 202, 24, 1)",
                                    "backgroundColor": "rgba(247, 202, 24, 1)",
                                    "pointBorderColor": "#fff",
                                    "pointBackgroundColor": "rgba(247, 202, 24, 1)",
                                    "pointRadius": 5,
                                    "pointHoverRadius": 6,
                                    yAxisID: "y-axis-0",
                                    "data": dataApplies
                                }, {
                                    lineTension: 0,
                                    "label": "Clicks",
                                    "fill": false,
                                    "borderColor": "rgba(192, 57, 43, 1)",
                                    "backgroundColor": "rgba(192, 57, 43, 1)",
                                    "pointBorderColor": "#fff",
                                    "pointBackgroundColor": "rgba(192, 57, 43, 1)",
                                    "pointRadius": 5,
                                    "pointHoverRadius": 6,
                                    yAxisID: "y-axis-1",
                                    "data": dataClicks
                                });
                                yAxes.push({
                                    position: "left",
                                    "id": "y-axis-0",
                                    ticks: {
                                        beginAtZero: true,
                                        fontStyle: "bold",
                                        fontColor: "rgba(247, 202, 24, 1)",
                                        maxTicksLimit: 7
                                    },
                                    gridLines: {
                                        display: false,
                                        color: "rgba(0, 0, 0, 0)",
                                        zeroLineColor: "rgba(0, 0, 0, 0)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: "APPLIES",
                                        fontColor: "rgba(247, 202, 24, 1)",
                                        fontStyle: "bold"
                                    }
                                }, {
                                    position: "right",
                                    "id": "y-axis-1",
                                    ticks: {
                                        beginAtZero: true,
                                        fontStyle: "bold",
                                        fontColor: "rgba(192, 57, 43, 1)",
                                        maxTicksLimit: 7
                                    },
                                    gridLines: {
                                        display: false,
                                        color: "rgba(0, 0, 0, 0)",
                                        zeroLineColor: "rgba(0, 0, 0, 0)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: "CLICKS",
                                        fontColor: "rgba(192, 57, 43, 1)",
                                        fontStyle: "bold"
                                    }
                                });
                                break;
                            case "spendAppliesButton":
                                ds.push({
                                    lineTension: 0,
                                    "label": "Applies",
                                    "fill": false,
                                    "borderColor": "rgba(247, 202, 24, 1)",
                                    "backgroundColor": "rgba(247, 202, 24, 1)",
                                    "pointBorderColor": "#fff",
                                    "pointBackgroundColor": "rgba(247, 202, 24, 1)",
                                    "pointRadius": 5,
                                    "pointHoverRadius": 6,
                                    yAxisID: "y-axis-0",
                                    "data": dataApplies
                                }, {
                                    lineTension: 0,
                                    "label": "Spend",
                                    "fill": false,
                                    "borderColor": "rgba(192, 57, 43, 1)",
                                    "backgroundColor": "rgba(192, 57, 43, 1)",
                                    "pointBorderColor": "#fff",
                                    "pointBackgroundColor": "rgba(192, 57, 43, 1)",
                                    "pointRadius": 5,
                                    "pointHoverRadius": 6,
                                    yAxisID: "y-axis-1",
                                    "data": dataSpend
                                });
                                yAxes.push({
                                    position: "left",
                                    "id": "y-axis-0",
                                    ticks: {
                                        beginAtZero: true,
                                        fontStyle: "bold",
                                        fontColor: "rgba(247, 202, 24, 1)",
                                        maxTicksLimit: 7
                                    },
                                    gridLines: {
                                        display: false,
                                        color: "rgba(0, 0, 0, 0)",
                                        zeroLineColor: "rgba(0, 0, 0, 0)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: "APPLIES",
                                        fontColor: "rgba(247, 202, 24, 1)",
                                        fontStyle: "bold"
                                    }
                                }, {
                                    position: "right",
                                    "id": "y-axis-1",
                                    ticks: {
                                        beginAtZero: true,
                                        fontStyle: "bold",
                                        fontColor: "rgba(192, 57, 43, 1)",
                                        maxTicksLimit: 7
                                    },
                                    gridLines: {
                                        display: false,
                                        color: "rgba(0, 0, 0, 0)",
                                        zeroLineColor: "rgba(0, 0, 0, 0)"
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: "SPEND",
                                        fontColor: "rgba(192, 57, 43, 1)",
                                        fontStyle: "bold"
                                    }
                                });
                                break;
                        }
                    }
                });

                myChart = new Chart(ctx, {
                    type: "line",
                    data: {
                        "labels": labelsDate,
                        "datasets": ds
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        animation: false,
                        tooltips: {
                            "mode": 'label',
                            callbacks: {
                                label: function (tooltipItems, data) {
                                    var label = tooltipItems.yLabel;
                                    label = parseFloat(label);
                                    label = label.toLocaleString('en-GB', {maximumFractionDigits: 2});
                                    var libelle = data.datasets[tooltipItems.datasetIndex].label;

                                    switch (libelle.toLowerCase()) {
                                        case "spend":
                                        case "cpa":
                                        case "cpc":
                                            return libelle + ': ' + label + ' €';
                                        case "cr":
                                        case "conversion rate":
                                            return libelle + ': ' + label + ' %';
                                        default:
                                            return libelle + ': ' + label;
                                    }
                                }
                            }
                        },
                        scales: {
                            yAxes: yAxes
                        },
                        defaultFontFamily: "'Open Sans'"
                    }
                });
            }
        });
    </script>
{% endblock %}