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

{% block title %}Ads Overview{% endblock %}

{% block pageheader %}Ads Overview{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12">
            <form name="campaign-period" class="right-side" action="{{ path('campaignSummary') }}" method="post">
                <div class="row">
                    <div class="col-md-3">
                        <input type="hidden" name="byPeriod" value="{{ byPeriod }}">
                        <select class="form-control combo-selected" name="campaign">
                            {% for key, value in selectCampaigns %}
                                <option value="{{ key }}" {% if campaignid == key %}selected=selected
                                        class="combo-selected"{% endif %}>{{ value }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2 col-md-offset-2">
                        <div class="specific-period-container">
                            <div class="input-group date">
                                <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>
                    <div class="col-md-2">
                        <div class="specific-period-container">
                            <div class="input-group date">
                                <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>
                    <div class="col-md-3">
                        <select class="form-control combo-selected" id="period" name="period">
                            {% for key, value in selectPeriods %}
                                <option value="{{ key }}" {% if period == key %}selected=selected
                                        class="combo-selected"{% endif %}>{{ value }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <input type="hidden" name="impressionsSession" value="{{ sessionItems['impressionsSession'] }}">
                <input type="hidden" name="clicksSession" value="{{ sessionItems['clicksSession'] }}">
                <input type="hidden" name="actionsSession" value="{{ sessionItems['actionsSession'] }}">
                <input type="hidden" name="spentSession" value="{{ sessionItems['spentSession'] }}">
                <input type="hidden" name="cpmSession" value="{{ sessionItems['cpmSession'] }}">
                <input type="hidden" name="ctrSession" value="{{ sessionItems['ctrSession'] }}">
                <input type="hidden" name="cpcSession" value="{{ sessionItems['cpcSession'] }}">
                <input type="hidden" name="cpaSession" value="{{ sessionItems['cpaSession'] }}">
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="very-lg">
                <div class="row">
                    <div class="col-md-3">
                        <button type="button" id="impressionsButton"
                                class="btn btn-primary btn-lg btn-one {% if sessionItems['impressionsSession'] == 'yes' %}btn-check{% endif %}">{% if totalSumsCampaigns['sumImpressions'] %}{{ totalSumsCampaigns['sumImpressions']|number_format(0, '.', ',') }}{% else %}0{% endif %}
                            <br><span>Impressions</span></button>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="clicksButton"
                                class="btn btn-primary btn-lg btn-two {% if sessionItems['clicksSession'] == 'yes' %}btn-check{% endif %}">{% if totalSumsCampaigns['sumClicks'] %}{{ totalSumsCampaigns['sumClicks']|number_format(0, '.', ',') }}{% else %}0{% endif %}
                            <br><span>Clicks</span></button>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="actionsButton"
                                class="btn btn-primary btn-lg btn-three {% if sessionItems['actionsSession'] == 'yes' %}btn-check{% endif %}">{% if totalSumsCampaigns['sumApplies'] %}{{ totalSumsCampaigns['sumApplies']|number_format(0, '.', ',') }}{% else %}0{% endif %}
                            <br><span>Conversions</span></button>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="spentButton"
                                class="btn btn-primary btn-lg btn-four {% if sessionItems['spentSession'] == 'yes' %}btn-check{% endif %}">{% if totalSumsCampaigns['sumSpentBudget'] %}{{ totalSumsCampaigns['sumSpentBudget']|number_format(2, '.', ',') }}{% else %}
                            0{% endif %}&euro;<br><span>Spend</span></button>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <button type="button" id="cpmButton"
                                class="btn btn-primary btn-lg btn-five {% if sessionItems['cpmSession'] == 'yes' %}btn-check{% endif %}">{% if totalSumsCampaigns['sumImpressions'] > 0 %}{{ ((totalSumsCampaigns['sumSpentBudget'] / totalSumsCampaigns['sumImpressions'])*1000)|number_format(2, '.', ',') }}{% else %}
                            0{% endif %}&euro;<br><span>CPM</span></button>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="ctrButton"
                                class="btn btn-primary btn-lg btn-six {% if sessionItems['ctrSession'] == 'yes' %}btn-check{% endif %}">{% if totalSumsCampaigns['sumImpressions'] > 0 %}{{ ((totalSumsCampaigns['sumClicks'] / totalSumsCampaigns['sumImpressions'])*100)|number_format(2, '.', ',') }}{% else %}0{% endif %}
                            %<br><span>CTR</span></button>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="cpcButton"
                                class="btn btn-primary btn-lg btn-seven {% if sessionItems['cpcSession'] == 'yes' %}btn-check{% endif %}">{% if totalSumsCampaigns['sumClicks'] > 0 %}{{ (totalSumsCampaigns['sumSpentBudget'] / totalSumsCampaigns['sumClicks'])|number_format(2, '.', ',') }}{% else %}
                            0{% endif %}&euro;<br><span>CPC</span></button>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="cpaButton"
                                class="btn btn-primary btn-lg btn-eight {% if sessionItems['cpaSession'] == 'yes' %}btn-check{% endif %}">{% if totalSumsCampaigns['sumApplies'] > 0 %}{{ (totalSumsCampaigns['sumSpentBudget'] / totalSumsCampaigns['sumApplies'])|number_format(2, '.', ',') }}{% else %}
                            - {% endif %}&euro;<br><span>CPA</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default panel-dataTable">
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12 period-buttons">
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default {% if byPeriod == "day" %}active{% endif %}">
                                    <input type="radio" name="day" autocomplete="off"
                                           {% if byPeriod == "day" %}checked{% endif %}> By Day
                                </label>
                                <label class="btn btn-default {% if byPeriod == "week" %}active{% endif %}">
                                    <input type="radio" name="week" autocomplete="off"
                                           {% if byPeriod == "week" %}checked{% endif %}> By Week
                                </label>
                                <label class="btn btn-default {% if byPeriod == "month" %}active{% endif %}">
                                    <input type="radio" name="month" autocomplete="off"
                                           {% if byPeriod == "month" %}checked{% endif %}> By Month
                                </label>
                                <label class="btn btn-default {% if byPeriod == "quarter" %}active{% endif %}">
                                    <input type="radio" name="quarter" autocomplete="off"
                                           {% if byPeriod == "quarter" %}checked{% endif %}> By Quarter
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <canvas id="chart" height="100px"></canvas>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="panel-body">
                    <div class="dataTable_wrapper table-responsive">
                        <table class="table table-striped table-bordered table-hover" id="dataTables2">
                            <thead>
                            <tr>
                                <th>Date</th>
                                <th>Impressions</th>
                                <th>Clicks</th>
                                <th>Conversions</th>
                                <th>Spend</th>
                                <th>CPM</th>
                                <th>CTR</th>
                                <th>CPC</th>
                                <th>CPA</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for key,value in dateslabels %}
                                <tr>
                                    <td {% if datesFullLabels|length > 0 %}data-order="{{ datesFullLabels[key] }}"{% endif %}>{{ value }}</td>
                                    <td>{{ statsTable['impressions'][value]|number_format(0, '.', ',') }}</td>
                                    <td>{{ statsTable['clicks'][value]|number_format(0, '.', ',') }}</td>
                                    <td>{% if statsTable['actions'][value] %}{{ statsTable['actions'][value]|number_format(0, '.', ',') }}{% else %}0{% endif %}</td>
                                    <td>{% if statsTable['spentbudget'][value] %}{{ statsTable['spentbudget'][value]|number_format(2, '.', ',') }}{% else %}
                                        0{% endif %}&euro;
                                    </td>
                                    <td>{% if statsTable['impressions'][value] > 0 %}{{ ((statsTable['spentbudget'][value] / statsTable['impressions'][value])*1000)|number_format(2, '.', ',') }}{% else %}
                                        0{% endif %}&euro;
                                    </td>
                                    <td>{% if statsTable['impressions'][value] > 0 %}{{ ((statsTable['clicks'][value] / statsTable['impressions'][value])*100)|number_format(2, '.', ',') }}{% else %}0{% endif %}%
                                    </td>
                                    <td>{% if statsTable['clicks'][value] > 0 %}{{ (statsTable['spentbudget'][value] / statsTable['clicks'][value])|number_format(2, '.', ',') }}{% else %}
                                        0{% endif %}&euro;
                                    </td>
                                    <td>{% if statsTable['actions'][value] > 0 %}{{ (statsTable['spentbudget'][value] / statsTable['actions'][value])|number_format(2, '.', ',') }}{% else %}
                                        0{% endif %}&euro;
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                            <tfoot>
                            <tr class="dataTable-total">
                                <td>Total</td>
                                <td>{{ totalSumsCampaignGroup['sumImpressions']|number_format(0, '.', ',') }}</td>
                                <td>{{ totalSumsCampaignGroup['sumClicks']|number_format(0, '.', ',') }}</td>
                                <td>{% if totalSumsCampaignGroup['sumApplies'] %}{{ totalSumsCampaignGroup['sumApplies']|number_format(0, '.', ',') }}{% else %}0{% endif %}</td>
                                <td>{% if totalSumsCampaignGroup['sumSpentBudget'] %}{{ totalSumsCampaignGroup['sumSpentBudget']|number_format(2, '.', ',') }}{% else %}
                                    0{% endif %}&euro;
                                </td>
                                <td>{% if totalSumsCampaignGroup['sumImpressions'] > 0 %}{{ ((totalSumsCampaignGroup['sumSpentBudget'] / totalSumsCampaignGroup['sumImpressions'])*1000)|number_format(2, '.', ',') }}{% else %}
                                    0{% endif %}&euro;
                                </td>
                                <td>{% if totalSumsCampaignGroup['sumImpressions'] > 0 %}{{ ((totalSumsCampaignGroup['sumClicks'] / totalSumsCampaignGroup['sumImpressions'])*100)|number_format(2, '.', ',') }}{% else %}0{% endif %}%
                                </td>
                                <td>{% if totalSumsCampaignGroup['sumClicks'] > 0 %}{{ (totalSumsCampaignGroup['sumSpentBudget'] / totalSumsCampaignGroup['sumClicks'])|number_format(2, '.', ',') }}{% else %}
                                    0{% endif %}&euro;
                                </td>
                                <td>{% if totalSumsCampaignGroup['sumApplies'] > 0 %}{{ (totalSumsCampaignGroup['sumSpentBudget'] / totalSumsCampaignGroup['sumApplies'])|number_format(2, '.', ',') }}{% else %}
                                    0{% endif %}&euro;
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.table-responsive -->
                </div>
                <!-- /.panel-body -->
                <hr>
                <div class="panel-body">
                    <div class="dataTable_wrapper table-responsive">
                        <table class="table table-striped table-bordered table-hover" id="dataTables">
                            <thead>
                            <tr>
                                <th>Campaign</th>
                                <th>Impressions</th>
                                <th>Clicks</th>
                                <th>Conversions</th>
                                <th>Spend</th>
                                <th>CPM</th>
                                <th>CTR</th>
                                <th>CPC</th>
                                <th>CPA</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for key,value in sumsCampaignsGroup %}
                                <tr>
                                    <td>{{ value['campaignname'] }}</td>
                                    <td>{{ value['sumImpressions']|number_format(0, '.', ',') }}</td>
                                    <td>{{ value['sumClicks']|number_format(0, '.', ',') }}</td>
                                    <td>{% if value['sumApplies'] %}{{ value['sumApplies']|number_format(0, '.', ',') }}{% else %}0{% endif %}</td>
                                    <td>{% if value['sumSpentBudget'] %}{{ value['sumSpentBudget']|number_format(2, '.', ',') }}{% else %}
                                        0{% endif %}&euro;
                                    </td>
                                    <td>{% if value['sumImpressions'] > 0 %}{{ ((value['sumSpentBudget'] / value['sumImpressions'])*1000)|number_format(2, '.', ',') }}{% else %}
                                        0{% endif %}&euro;
                                    </td>
                                    <td>{% if value['sumImpressions'] > 0 %}{{ ((value['sumClicks'] / value['sumImpressions'])*100)|number_format(2, '.', ',') }}{% else %}0{% endif %}%
                                    </td>
                                    <td>{% if value['sumClicks'] > 0 %}{{ (value['sumSpentBudget'] / value['sumClicks'])|number_format(2, '.', ',') }}{% else %}
                                        0{% endif %}&euro;
                                    </td>
                                    <td>{% if value['sumApplies'] > 0 %}{{ (value['sumSpentBudget'] / value['sumApplies'])|number_format(2, '.', ',') }}{% else %}
                                        0{% endif %}&euro;
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                            <tfoot>
                            <tr class="dataTable-total">
                                <td>Total</td>
                                <td>{{ totalSumsCampaignGroup['sumImpressions']|number_format(0, '.', ',') }}</td>
                                <td>{{ totalSumsCampaignGroup['sumClicks']|number_format(0, '.', ',') }}</td>
                                <td>{% if totalSumsCampaignGroup['sumApplies'] %}{{ totalSumsCampaignGroup['sumApplies']|number_format(0, '.', ',') }}{% else %}0{% endif %}</td>
                                <td>{% if totalSumsCampaignGroup['sumSpentBudget'] %}{{ totalSumsCampaignGroup['sumSpentBudget']|number_format(2, '.', ',') }}{% else %}
                                    0{% endif %}&euro;
                                </td>
                                <td>{% if totalSumsCampaignGroup['sumImpressions'] > 0 %}{{ ((totalSumsCampaignGroup['sumSpentBudget'] / totalSumsCampaignGroup['sumImpressions'])*1000)|number_format(2, '.', ',') }}{% else %}
                                    0{% endif %}&euro;
                                </td>
                                <td>{% if totalSumsCampaignGroup['sumImpressions'] > 0 %}{{ ((totalSumsCampaignGroup['sumClicks'] / totalSumsCampaignGroup['sumImpressions'])*100)|number_format(2, '.', ',') }}{% else %}0{% endif %}%
                                </td>
                                <td>{% if totalSumsCampaignGroup['sumClicks'] > 0 %}{{ (totalSumsCampaignGroup['sumSpentBudget'] / totalSumsCampaignGroup['sumClicks'])|number_format(2, '.', ',') }}{% else %}
                                    0{% endif %}&euro;
                                </td>
                                <td>{% if totalSumsCampaignGroup['sumApplies'] > 0 %}{{ (totalSumsCampaignGroup['sumSpentBudget'] / totalSumsCampaignGroup['sumApplies'])|number_format(2, '.', ',') }}{% else %}
                                    0{% endif %}&euro;
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.table-responsive -->
                </div>
            </div>
        </div>
    </div>

    <a href="#" id="exportData" style="display:none;"></a>

{% endblock %}

{% block specificJS %}
    <script type="text/javascript">
        var myChart = null;
        var ctx = null;
        var labels = {{ dateslabels|json_encode|raw }};
        var dataImpressions = {{ campaignImpressions|json_encode|raw }};
        var dataClicks = {{ campaignClicks|json_encode|raw }};
        var dataCTR = {{ campaignCTR|json_encode|raw }};
        var dataCPC = {{ campaignCPC|json_encode|raw }};
        var dataCPM = {{ campaignCPM|json_encode|raw }};
        var dataActions = {{ campaignActions|json_encode|raw }};
        var dataCPA = {{ campaignCPA|json_encode|raw }};
        var dataSpentBudget = {{ campaignSpentBudget|json_encode|raw }};
        var isSpecificPeriod = {% if isSpecificPeriod %}true{% else %}false{% endif %};
        var campaignid = "{{ campaignid }}";
        var dt = null;
        var dt2 = null;
        $(document).ready(function () {
            var tableFormat = function (table) {
                var formattedTable = table.cloneNode(true);

                formattedTable.querySelectorAll('tbody tr td:nth-child(n+2), tfoot tr td:nth-child(n+2)').forEach(function (td) {
                    td.innerText = td.innerText.replace(/,/g, "").replace(/\./g, ",");
                });

                return formattedTable;
            };
            var tableToExcel = (function () {
                var uri = 'data:application/vnd.ms-excel;base64,'
                    ,
                    template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
                    , base64 = function (s) {
                        return window.btoa(unescape(encodeURIComponent(s)))
                    }
                    , format = function (s, c) {
                        return s.replace(/{(\w+)}/g, function (m, p) {
                            return c[p];
                        })
                    }
                return function (table, name, filename) {
                    if (!table.nodeType) table = document.getElementById(table)
                    var ctx = {worksheet: name || 'Worksheet', table: tableFormat(table).innerHTML.replace(/(<\/*tfoot>)|(<\/*tbody>)/g, '')}
                    document.getElementById("exportData").href = uri + base64(format(template, ctx));
                    document.getElementById("exportData").download = filename + ".xls";
                    document.getElementById("exportData").click();
                }
            })();

            if (isSpecificPeriod)
                $('div.specific-period-container').fadeIn(250);

            // Boutons par période
            $('.period-buttons input').change(function () {
                if ($(this).is(':checked')) {
                    $('input[name=byPeriod]').val($(this).prop('name'));
                    $('form.right-side').submit();
                    displayLoader();
                }
            });

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

            // Soumission du formulaire
            $('form.right-side select[name=period]').change(function () {
                var optValue = $(this).val();
                if (optValue !== "specific") {
                    $('form.right-side').submit();
                    displayLoader();
                }
                else
                    $('div.specific-period-container').fadeIn(500);
            });

            $('form.right-side input[name^=period-], form.right-side select[name=campaign]').change(function () {
                $('form.right-side').submit();
                displayLoader();
            });

            dt = $('#dataTables').DataTable({
                responsive: true,
                paging: false,
                info: false,
                language: {
                    search: "",
                    thousands: ",",
                    decimal: ".",
                    zeroRecords: "No matching records found"
                },
                initComplete: function () {
                    $('#dataTables_filter').prepend('<button style="margin-right: 15px;" type="button" id="excel-button" title="Export as Excel" class="btn btn-default btn-sm">Export <span class="glyphicon glyphicon-share" aria-hidden="true"></span></button>');
                    $('#dataTables_filter .input-sm').wrap("<div class='input-group'></div>");
                    $('#dataTables_filter .input-sm').parent("div.input-group").append("<div class='input-group-addon'><span class='glyphicon glyphicon-search' aria-hidden='true'></span></div>");
                    $('#dataTables_filter .input-sm').prop("placeholder", "Search");
                }
            });
            dt2 = $('#dataTables2').DataTable({
                responsive: true,
                paging: false,
                info: false,
                language: {
                    search: "",
                    thousands: ",",
                    decimal: ".",
                    zeroRecords: "No matching records found"
                },
                initComplete: function () {
                    $('#dataTables2_filter').prepend('<button style="margin-right: 15px;" type="button" id="excel2-button" title="Export as Excel" class="btn btn-default btn-sm">Export <span class="glyphicon glyphicon-share" aria-hidden="true"></span></button>');
                    $('#dataTables2_filter .input-sm').wrap("<div class='input-group'></div>");
                    $('#dataTables2_filter .input-sm').parent("div.input-group").append("<div class='input-group-addon'><span class='glyphicon glyphicon-search' aria-hidden='true'></span></div>");
                    $('#dataTables2_filter .input-sm').prop("placeholder", "Search");
                }
            });

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

            // Checkboxes graphiques
            $('.btn-lg').click(function () {
                $(this).toggleClass('btn-check');
                var item = $(this).prop('id').replace('Button', '') + 'Session';

                if ($(this).hasClass('btn-check'))
                    $('input[name=' + item + ']').val('yes');
                else
                    $('input[name=' + item + ']').val('no');

                updateChart();
            });

            // Export Excel
            $('#excel-button').click(function () {
                tableToExcel("dataTables", "Ads Overview By Campaign", "Ads Overview By Campaign");
            });
            $('#excel2-button').click(function () {
                tableToExcel("dataTables2", "Ads Overview By Date", "Ads Overview By Date");
            });
        });

        function updateChart() {
            if (myChart != null)
                myChart.destroy();
            var ds = [];
            var yAxes = [];
            $('.btn-lg').each(function (k, v) {
                var idCheck = $(v).prop('id');
                if ($(v).hasClass('btn-check')) {
                    switch (idCheck) {
                        case "impressionsButton":
                            ds.push({
                                lineTension: 0,
                                "label": "Impressions",
                                "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-0",
                                "data": dataImpressions
                            });
                            yAxes.push({
                                position: "left",
                                "id": "y-axis-0",
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    fontColor: "rgba(192, 57, 43, 1)",
                                    maxTicksLimit: 7
                                },
                                gridLines: {
                                    display: false,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColorr: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "IMPRESSIONS",
                                    fontColor: "rgba(192, 57, 43, 1)",
                                    fontStyle: "bold"
                                }
                            });
                            break;
                        case "ctrButton":
                            ds.push({
                                lineTension: 0,
                                "label": "CTR",
                                "fill": false,
                                "borderColor": "rgba(34, 49, 63, 1)",
                                "backgroundColor": "rgba(34, 49, 63, 1)",
                                "pointBorderColor": "#fff",
                                "pointBackgroundColor": "rgba(34, 49, 63, 1)",
                                "pointRadius": 5,
                                "pointHoverRadius": 6,
                                yAxisID: "y-axis-1",
                                "data": dataCTR
                            });
                            yAxes.push({
                                position: "right",
                                "id": "y-axis-1",
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    fontColor: "rgba(34, 49, 63, 1)",
                                    maxTicksLimit: 7
                                },
                                gridLines: {
                                    display: false,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColorr: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "CTR",
                                    fontColor: "rgba(34, 49, 63, 1)",
                                    fontStyle: "bold"
                                }
                            });
                            break;
                        case "clicksButton":
                            ds.push({
                                lineTension: 0,
                                "label": "Clicks",
                                "fill": false,
                                "borderColor": "rgba(102, 51, 153, 1)",
                                "backgroundColor": "rgba(102, 51, 153, 1)",
                                "pointBorderColor": "#fff",
                                "pointBackgroundColor": "rgba(102, 51, 153, 1)",
                                "pointRadius": 5,
                                "pointHoverRadius": 6,
                                yAxisID: "y-axis-2",
                                "data": dataClicks
                            });
                            yAxes.push({
                                position: "left",
                                "id": "y-axis-2",
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    fontColor: "rgba(102, 51, 153, 1)",
                                    maxTicksLimit: 7
                                },
                                gridLines: {
                                    display: false,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColorr: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "CLICKS",
                                    fontColor: "rgba(102, 51, 153, 1)",
                                    fontStyle: "bold"
                                }
                            });
                            break;
                        case "cpcButton":
                            ds.push({
                                lineTension: 0,
                                "label": "CPC",
                                "fill": false,
                                "borderColor": "rgba(108, 122, 137, 1)",
                                "backgroundColor": "rgba(108, 122, 137, 1)",
                                "pointBorderColor": "#fff",
                                "pointBackgroundColor": "rgba(108, 122, 137, 1)",
                                "pointRadius": 5,
                                "pointHoverRadius": 6,
                                yAxisID: "y-axis-3",
                                "data": dataCPC
                            });
                            yAxes.push({
                                position: "right",
                                "id": "y-axis-3",
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    fontColor: "rgba(108, 122, 137, 1)",
                                    maxTicksLimit: 7
                                },
                                gridLines: {
                                    display: false,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColorr: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "CPC",
                                    fontColor: "rgba(108, 122, 137, 1)",
                                    fontStyle: "bold"
                                }
                            });
                            break;
                        case "cpmButton":
                            ds.push({
                                lineTension: 0,
                                "label": "CPM",
                                "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-4",
                                "data": dataCPM
                            });
                            yAxes.push({
                                position: "right",
                                "id": "y-axis-4",
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    fontColor: "rgba(247, 202, 24, 1)",
                                    maxTicksLimit: 7
                                },
                                gridLines: {
                                    display: false,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColorr: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "CPM",
                                    fontColor: "rgba(247, 202, 24, 1)",
                                    fontStyle: "bold"
                                }
                            });
                            break;
                        case "actionsButton":
                            ds.push({
                                lineTension: 0,
                                "label": "Conversions",
                                "fill": false,
                                "borderColor": "rgba(38, 166, 91, 1)",
                                "backgroundColor": "rgba(38, 166, 91, 1)",
                                "pointBorderColor": "#fff",
                                "pointBackgroundColor": "rgba(38, 166, 91, 1)",
                                "pointRadius": 5,
                                "pointHoverRadius": 6,
                                yAxisID: "y-axis-5",
                                "data": dataActions
                            });
                            yAxes.push({
                                position: "left",
                                "id": "y-axis-5",
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    fontColor: "rgba(38, 166, 91, 1)",
                                    maxTicksLimit: 7
                                },
                                gridLines: {
                                    display: false,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColorr: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "CONVERSIONS",
                                    fontColor: "rgba(38, 166, 91, 1)",
                                    fontStyle: "bold"
                                }
                            });
                            break;
                        case "cpaButton":
                            ds.push({
                                lineTension: 0,
                                "label": "CPA",
                                "fill": false,
                                "borderColor": "rgba(249, 105, 14, 1)",
                                "backgroundColor": "rgba(249, 105, 14, 1)",
                                "pointBorderColor": "#fff",
                                "pointBackgroundColor": "rgba(249, 105, 14, 1)",
                                "pointRadius": 5,
                                "pointHoverRadius": 6,
                                yAxisID: "y-axis-6",
                                "data": dataCPA
                            });
                            yAxes.push({
                                position: "right",
                                "id": "y-axis-6",
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    fontColor: "rgba(249, 105, 14, 1)",
                                    maxTicksLimit: 7
                                },
                                gridLines: {
                                    display: false,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColorr: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "CPA",
                                    fontColor: "rgba(249, 105, 14, 1)",
                                    fontStyle: "bold"
                                }
                            });
                            break;
                        case "spentButton":
                            ds.push({
                                lineTension: 0,
                                "label": "Spend",
                                "fill": false,
                                "borderColor": "rgba(37, 116, 169, 1)",
                                "backgroundColor": "rgba(37, 116, 169, 1)",
                                "pointBorderColor": "#fff",
                                "pointBackgroundColor": "rgba(37, 116, 169, 1)",
                                "pointRadius": 5,
                                "pointHoverRadius": 6,
                                yAxisID: "y-axis-7",
                                "data": dataSpentBudget
                            });
                            yAxes.push({
                                position: "left",
                                "id": "y-axis-7",
                                ticks: {
                                    beginAtZero: true,
                                    fontStyle: "bold",
                                    fontColor: "rgba(37, 116, 169, 1)",
                                    maxTicksLimit: 7
                                },
                                gridLines: {
                                    display: false,
                                    color: "rgba(0, 0, 0, 0)",
                                    zeroLineColorr: "rgba(0, 0, 0, 0)"
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "SPEND",
                                    fontColor: "rgba(37, 116, 169, 1)",
                                    fontStyle: "bold"
                                }
                            });
                            break;
                    }
                }
            });

            myChart = new Chart(ctx, {
                type: "line",
                data: {
                    "labels": labels,
                    "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":
                                    case "cpm":
                                        return libelle + ': ' + label + ' €';
                                    case "cr":
                                    case "ctr":
                                    case "conversion rate":
                                    case "win rate":
                                        return libelle + ': ' + label + ' %';
                                    default:
                                        return libelle + ': ' + label;
                                }
                            }
                        }
                    },
                    scales: {
                        yAxes: yAxes
                    },
                    defaultFontFamily: "'Open Sans'"
                }
            });
        }
    </script>
{% endblock %}