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

{% block title %}Job group - Self service{% endblock %}

{% block body %}
    <div class="container-fluid no-padding">
        {# NAVS #}
        <div class="row b-margin">
            <div class="col-sm-12">
                <ul class="nav nav-pills nav-justified">
                    <li><a href="{{ path('self_advertiser_jobgroup_list', {'id': advertiser.id}) }}">My job groups</a></li>
                    <li class="active"><a href="{{ path('self_advertiser_jobgroup_jobs', {'id': advertiser.id}) }}">My jobs</a></li>
                </ul>
            </div>
        </div>

        <div class="row b-margin">
            <div class="col-sm-6">
                <h3><strong>Create a job group</strong> <a href="{{ path('self_advertiser_jobgroup_new', {'id': advertiser.id}) }}" class="btn btn-primary" title="New job group"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></h3>
            </div>
        </div>

        <div class="row b-margin">
            <div class="col-sm-6">
                <h3>Active jobs <span class="label label-default counter" data-counter="{{ jobsActive }}"></span></h3>
            </div>
        </div>
        <div class="row b-margin">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">ACTIVE JOBS OVER 30 DAYS</div>
                    <div class="panel-body">
                        <canvas height="50" id="jobs30days"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">JOB BY CATEGORIES</div>
                    <div class="panel-body">
                        <canvas id="categoryJob" height="300px"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">JOB BY LOCATIONS</div>
                    <div class="panel-body">
                        <canvas id="regionJob" height="300px"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">JOB BY CONTRACTS</div>
                    <div class="panel-body">
                        <canvas id="contractJob" height="300px"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block specificJS %}
    <script>
        var chartJobByCats = null;
        var chartJobByRegions = null;
        var chartJobByContracts = null;
        var chartJobs30Days = null;
        var jobsLabelCat = {{ jobsLabelCat|json_encode|raw }};
        var jobsLabelRegion = {{ jobsLabelRegion|json_encode|raw }};
        var jobsLabelContract = {{ jobsLabelContract|json_encode|raw }};
        var jobsNumberCat = {{ jobsNumberCat|json_encode|raw }};
        var jobsNumberRegion = {{ jobsNumberRegion|json_encode|raw }};
        var jobsNumberContract = {{ jobsNumberContract|json_encode|raw }};
        var labelsJobImport = {{ labelsJobImport|json_encode|raw }};
        var valuesJobImport = {{ valuesJobImport|json_encode|raw }};
        $(document).ready(function () {
            animCounter.animate(".counter", 1000);

            chartJobs30Days = new Chart(document.getElementById("jobs30days").getContext("2d"), {
                type: "bar",
                data: {
                    "labels": labelsJobImport,
                    "datasets": [{
                        "borderColor": "#5cb85c",
                        "backgroundColor": "rgba(92, 184, 92, 0.8)",
                        "data": valuesJobImport
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    tooltips: {
                        callbacks: {
                            label: function (tooltipItems, data) {
                                var label = data.datasets[0].data[tooltipItems.index];
                                label = parseFloat(label);

                                var total = 0;
                                var datasets = data.datasets[0].data;
                                for (var i in datasets) {
                                    total += datasets[i];
                                }

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

                                return libelle +': ' + label + ' jobs';
                            }
                        }
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero: false,
                                fontStyle: "bold",
                                fontColor: "#5cb85c"
                            },
                            gridLines: {
                                display: true,
                                color: "rgba(0, 0, 0, 0)",
                                zeroLineColor: "rgba(0, 0, 0, 0)"
                            },
                            scaleLabel: {
                                display: true,
                                fontColor: "#5cb85c",
                                fontStyle: "bold"
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                maxTicksLimit: 4
                            },
                            gridLines: {
                                display: false
                            }
                        }]
                    },
                    defaultFontFamily: "'Open Sans'"
                }
            });

            chartJobByCats = new Chart(document.getElementById('categoryJob').getContext("2d"), {
                type: "horizontalBar",
                data: {
                    "labels": jobsLabelCat,
                    "datasets": [{
                        lineTension: 0,
                        "label": "JobNumber",
                        "fill": true,
                        "borderColor": "rgba(239, 184, 29, 1)",
                        "backgroundColor": "rgba(239, 184, 29, .8)",
                        "pointBorderColor": "#fff",
                        "pointRadius": 5,
                        "pointHoverRadius": 6,
                        "data": jobsNumberCat
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItems, data) {
                                var label = tooltipItems.xLabel;
                                label = parseInt(label);
                                label = label.toLocaleString('en-GB', { maximumFractionDigits: 2 });
                                return data.datasets[tooltipItems.datasetIndex].label +': '+ label;
                            }
                        }
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                fontStyle: "bold",
                                maxTicksLimit: 5
                            },
                            gridLines: {
                                display: true,
                                color: "rgba(0, 0, 0, 0)",
                                zeroLineColor: "rgba(0, 0, 0, 0)"
                            },
                            scaleLabel: {
                                display: true,
                                fontColor: 'rgba(192, 57, 43, 1)',
                                fontStyle: "bold"
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }]
                    },
                    defaultFontFamily: "'Open Sans'"
                }
            });

            chartJobByRegions = new Chart(document.getElementById('regionJob').getContext("2d"), {
                type: "horizontalBar",
                data: {
                    "labels": jobsLabelRegion,
                    "datasets": [{
                        lineTension: 0,
                        "label": "JobNumber",
                        "fill": true,
                        "borderColor": "rgba(239, 184, 29, 1)",
                        "backgroundColor": "rgba(239, 184, 29, .8)",
                        "pointBorderColor": "#fff",
                        "pointRadius": 5,
                        "pointHoverRadius": 6,
                        "data": jobsNumberRegion
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItems, data) {
                                var label = tooltipItems.xLabel;
                                label = parseInt(label);
                                label = label.toLocaleString('en-GB', { maximumFractionDigits: 2 });
                                return data.datasets[tooltipItems.datasetIndex].label +': '+ label;
                            }
                        }
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                fontStyle: "bold",
                                maxTicksLimit: 5
                            },
                            gridLines: {
                                display: true,
                                color: "rgba(0, 0, 0, 0)",
                                zeroLineColor: "rgba(0, 0, 0, 0)"
                            },
                            scaleLabel: {
                                display: true,
                                fontColor: 'rgba(192, 57, 43, 1)',
                                fontStyle: "bold"
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }]
                    },
                    defaultFontFamily: "'Open Sans'"
                }
            });

            chartJobByContracts = new Chart(document.getElementById('contractJob').getContext("2d"), {
                type: "horizontalBar",
                data: {
                    "labels": jobsLabelContract,
                    "datasets": [{
                        lineTension: 0,
                        "label": "JobNumber",
                        "fill": true,
                        "borderColor": "rgba(239, 184, 29, 1)",
                        "backgroundColor": "rgba(239, 184, 29, .8)",
                        "pointBorderColor": "#fff",
                        "pointRadius": 5,
                        "pointHoverRadius": 6,
                        "data": jobsNumberContract
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItems, data) {
                                var label = tooltipItems.xLabel;
                                label = parseInt(label);
                                label = label.toLocaleString('en-GB', { maximumFractionDigits: 2 });
                                return data.datasets[tooltipItems.datasetIndex].label +': '+ label;
                            }
                        }
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                fontStyle: "bold",
                                maxTicksLimit: 5
                            },
                            gridLines: {
                                display: true,
                                color: "rgba(0, 0, 0, 0)",
                                zeroLineColor: "rgba(0, 0, 0, 0)"
                            },
                            scaleLabel: {
                                display: true,
                                fontColor: 'rgba(192, 57, 43, 1)',
                                fontStyle: "bold"
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }]
                    },
                    defaultFontFamily: "'Open Sans'"
                }
            });
        });
    </script>
{% endblock %}