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

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

{% block body %}
    <div id="app" class="container-fluid no-padding" v-cloak>
        <div class="row">
            <div class="col-md-12">
                <form name="tracking-period" class="right-side" action="{{ path('self_advertiser_tracking' ,{'id': advertiser.id}) }}" method="post">
                    <div class="row">
                        <div class="col-md-2">
                            <input type="hidden" name="byPeriod" value="{{ byPeriod }}">
                            <select class="form-control combo-selected" name="campaign" id="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">
                                <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>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">Applies</div>
                    <div class="panel-body">
                        <canvas id="all-apply-adv"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">Applies percentage</div>
                    <div class="panel-body">
                        <canvas id="percent-applies-adv"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block specificJS %}
    <script>
        var allAppliesAdvertiserChart = null;
        var donutAppliesChart = null;
        var isSpecificPeriod = {% if isSpecificPeriod %}true{% else %}false{% endif %};
        var labelsDate = {{ datesLabels|json_encode|raw }};
        var dataAllApplies = {{ chartAllApplies|json_encode|raw }};
        var dataCampaignApplies = {{ chartCampaignApplies|json_encode|raw }};
        var dataPercentApplies = {{ donutApplies|json_encode|raw }};
        var labelsName = {{ labelsName|json_encode|raw }};
        $(document).ready(function () {
            if (isSpecificPeriod)
                $('div.input-group.date').fadeIn(250);

            $('form.right-side').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=tracking-period] .input-group.date').datepicker({
                format: "yyyy-mm-dd",
                maxViewMode: 2,
                language: 'en'
            });

            allAppliesAdvertiserChart = new Chart(document.getElementById("all-apply-adv").getContext("2d"), {
                type: "line",
                data: {
                    "labels": labelsDate,
                    "datasets": [{
                        lineTension: 0,
                        "label": "All applies",
                        "fill": true,
                        "borderColor": "rgba(44, 91, 197, 1)",
                        "backgroundColor": "rgba(44, 91, 197, 0.4)",
                        "pointBorderColor": "#fff",
                        "pointBackgroundColor": "rgba(44, 91, 197, 1)",
                        "pointRadius": 5,
                        "pointHoverRadius": 6,
                        "data": dataAllApplies
                    },
                    {
                        lineTension: 0,
                        "label": "Campaign applies",
                        "fill": true,
                        "borderColor": "rgba(215, 49, 19, 1)",
                        "backgroundColor": "rgba(215, 49, 19, 0.4)",
                        "pointBorderColor": "#fff",
                        "pointBackgroundColor": "rgba(215, 49, 19, 1)",
                        "pointRadius": 5,
                        "pointHoverRadius": 6,
                        "data": dataCampaignApplies
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    tooltips: {
                        "mode": 'label',
                        callbacks: {
                            label: function (tooltipItems, data) {
                                var label = tooltipItems.yLabel;
                                label = parseFloat(label);
                                label = label.toLocaleString('en-GB', {maximumFractionDigits: 2});
                                return data.datasets[tooltipItems.datasetIndex].label + ': ' + label + ' applies';
                            }
                        }
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: false,
                                fontStyle: "bold",
                                fontColor: "rgba(44, 91, 197, 1)",
                                maxTicksLimit: 5
                            },
                            gridLines: {
                                display: true,
                                color: "rgba(0, 0, 0, 0)",
                                zeroLineColor: "rgba(0, 0, 0, 0)"
                            },
                            scaleLabel: {
                                display: true,
                                labelString: "ALL APLLIES",
                                fontColor: "rgba(44, 91, 197, 1)",
                                fontStyle: "bold"
                            }
                        },{
                            position: "right",
                            ticks: {
                                display: false
                            },
                            gridLines: {
                                display: true,
                                color: "rgba(0, 0, 0, 0)",
                                zeroLineColor: "rgba(0, 0, 0, 0)"
                            },
                            scaleLabel: {
                                display: true,
                                labelString: "CAMPAIGN APPLIES",
                                fontColor: "rgba(215, 49, 19, 1)",
                                fontStyle: "bold"
                            }
                        }
                        ],
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }]
                    },
                    defaultFontFamily: "'Open Sans'"
                }
            });

            donutAppliesChart = new Chart(document.getElementById("percent-applies-adv").getContext("2d"), {
                type: "doughnut",
                data: {
                    labels: labelsName,
                    datasets: [{
                        borderColor: [
                            "#2C5BC5",
                            "#D73113"
                        ],
                        backgroundColor: [
                            "rgba(44, 91, 197, 0.6)",
                            "rgba(215, 49, 19, 0.6)"
                        ],
                        data: dataPercentApplies
                    }]
                },
                options: {
                    legend: {
                        display: true,
                        position: "right"
                    },
                    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];
                                }
                                var tooltipPercentage = (label / total) * 100;

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

                                return libelle +': ' + tooltipPercentage +'%';
                            }
                        }
                    },
                    defaultFontFamily: "'Open Sans'"
                }
            });
        });

        var app = new Vue({
            delimiters: ['<%', '%>'],
            el: "#app",
            mounted: function () {},
            data: {},
            methods: {
                numberFormat: function (number, digits) {
                    number = parseFloat(number);
                    digits = digits || 2;
                    return number.toLocaleString('en-GB', { maximumFractionDigits: digits });
                }
            }
        });
    </script>
{% endblock %}