@extends('app')

@section('content')

    <div class="col-sm-12">
        <span>Εξαγωγή κινητών τηλεφώνων σε .txt αρχείο</span>&nbsp;&nbsp;&nbsp;
        <a href="{{ route('mobiles.index') }}" target="downloadMobiles_frame" id="downloadMobiles" class="btn btn-info">
            <span class="glyphicon glyphicon-export" aria-hidden="true"></span> Εξαγωγή
        </a>
        <iframe id="downloadMobiles_frame" style="display:none;"></iframe>
    </div>

    <div class="col-sm-12" style="margin-top: 1rem;">
        <span>Εξαγωγή ονομάτων και κινητών τηλεφώνων σε .txt αρχείο</span>&nbsp;&nbsp;&nbsp;
        <a href="{{ route('namesmobiles.index') }}" target="dlNamesMobiles_frame" id="dlNamesMobiles" class="btn btn-info">
            <span class="glyphicon glyphicon-export" aria-hidden="true"></span> Εξαγωγή
        </a>
        <iframe id="dlNamesMobiles_frame" style="display:none;"></iframe>
    </div>

    <div class="col-sm-12">
        <hr style="width: 100%;">
    </div>

    <div class="row">
        <div class="col-sm-6">
            <canvas height="600" width="600" id="netPerMonth"></canvas>
        </div>
        <div class="col-sm-6">
            <canvas height="600" width="600" id="incomePerMonth"></canvas>
        </div>
    </div>

    <div class="col-sm-12">
        <hr style="width: 100%;">
    </div>

    <div class="row">
        <div class="col-sm-6">
            <canvas height="600" width="600" id="totalOrdersPerCategory"></canvas>
        </div>
        <div class="col-sm-6">
            <canvas height="600" width="600" id="totalOrdersPerYear"></canvas>
        </div>
    </div>
@stop

@section('scripts')
    <script>
        $(function () {
            Chart.defaults.global.legend.display = false;

            // Total orders per category
            var totalOrdersPerCategory = {!! $totalOrdersPerCategory !!};
            var canvasCategory = document.getElementById('totalOrdersPerCategory');
            var ctxCategory = canvasCategory.getContext('2d');
            var dataCategory = {
                labels: totalOrdersPerCategory.map(function(item) { return item.name; }),
                datasets: [{
                    backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'],
                    borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'],
                    borderWidth: 1,
                    data: totalOrdersPerCategory.map(function(item) { return item.orders; })
                }]
            };
            var categoryBarChart = new Chart(ctxCategory, {
                type: 'bar',
                data: dataCategory,
                options: {
                    title: {
                        text: "Συνολικές παραγγελίες ανά κατηγορία",
                        display: true,
                        fontSize: 14
                    }
                },
                responsive: true,
                barValueSpacing: 2,
                legend: {
                    display: false
                }
            });

            // Total orders per year
            var totalOrdersPerYear = {!! $totalOrdersPerYear !!};
            var canvasYear = document.getElementById('totalOrdersPerYear');
            var ctxYear = canvasYear.getContext('2d');
            var dataYear = {
                labels: totalOrdersPerYear.map(function(item) { return item.year; }),
                datasets: [
                    {
                        backgroundColor: "rgba(48,151,209,0.4)",
                        borderColor: "rgba(48,151,209,1)",
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: "rgba(48,151,209,1)",
                        pointBackgroundColor: "#f5f5f5",
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: "rgba(48,151,209,1)",
                        pointHoverBorderColor: "rgba(220,220,220,1)",
                        pointHoverBorderWidth: 2,
                        pointRadius: 5,
                        pointHitRadius: 10,
                        data: totalOrdersPerYear.map(function(item) { return item.orders; }),
                        spanGaps: false
                    }
                ]
            };
            var yearLineChart = new Chart(ctxYear, {
                type: 'line',
                data: dataYear,
                options: {
                    title: {
                        text: "Παραγγελίες ανά έτος",
                        display: true,
                        fontSize: 14
                    },
                    tooltips: {
                        enabled: true
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: "Χρόνος"
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: "Παραγγελίες"
                            }
                        }]
                    }
                }
            });


            var netPerMonth = {!! $netPerMonth !!};
            var canvasNetPerMonth = document.getElementById('netPerMonth');
            var ctxNetPerMonth = canvasNetPerMonth.getContext('2d');
            var chartNetPerMonth = new Chart(ctxNetPerMonth, {
                type: 'line',
                data: {
                    labels: netPerMonth.map(item => item.date).reverse(),
                    datasets: [
                        {
                            label: 'Τζίρος ανά μήνα',
                            backgroundColor: "rgba(255, 99, 132, 0.5)",
                            borderColor : "rgb(255, 99, 132)",
                            fill: false,
                            data: netPerMonth.map(item => item.net).reverse()
                        }
                    ]
                },
                options: {
                    title: {
                        text: "Τζίρος ανά μήνα",
                        display: true,
                        fontSize: 14
                    },
                    tooltips: {
                        enabled: true
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: "Μήνας"
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: "Ευρώ"
                            }
                        }]
                    }
                }
            });


//#529214

            var incomePerMonth = {!! $incomePerMonth !!};
            var canvasIncomePerMonth = document.getElementById('incomePerMonth');
            var ctxIncomePerMonth = canvasIncomePerMonth.getContext('2d');
            var chartIncomePerMonth = new Chart(ctxIncomePerMonth, {
                type: 'line',
                data: {
                    labels: incomePerMonth.map(item => item.date).reverse(),
                    datasets: [
                        {
                            label: 'Λεφτά που εισπράχθησαν ανά μήνα',
                            backgroundColor: "rgba(82, 146, 20, 0.5)",
                            borderColor : "rgb(82, 146, 20)",
                            fill: false,
                            data: incomePerMonth.map(item => item.income).reverse()
                        }
                    ]
                },
                options: {
                    title: {
                        text: "Λεφτά που εισπράχθησαν ανά μήνα",
                        display: true,
                        fontSize: 14
                    },
                    tooltips: {
                        enabled: true
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: "Μήνας"
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: "Ευρώ"
                            }
                        }]
                    }
                }
            });
        });
    </script>
@stop