@page
@model IndexModel

@{
    ViewData["Title"] = "Pregled";
    Layout = "~/Pages/Layouts/_Layout.cshtml";
}

<h4 class="d-flex justify-content-between align-items-center w-100 font-weight-bold py-1 mb-4">
    <span>
        <span class="text-muted font-weight-light">EveryThing /</span> Pregled
    </span>
</h4>

<div class="row">
    <div class="col-sm-6 col-xl-3">
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="lnr lnr-exit-up display-4 text-success"></div>
                    <div class="ml-3">
                        <div class="text-muted small">Prodaja zadnjih 30 dni</div>
                        <div id="divLblSales" class="text-large">2362</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="lnr lnr-enter-down display-4 text-info"></div>
                    <div class="ml-3">
                        <div class="text-muted small">Stroški zadnjih 30 dni</div>
                        <div id="divLblExpenses" class="text-large">687,123</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-2">
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="lnr lnr-highlight display-4 text-info"></div>
                    <div class="ml-3">
                        <div class="text-muted small">RVC zadnjih 30 dni</div>
                        <div id="divLblDifferenceInPrice" class="text-large">687,123</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-2">
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="lnr lnr-screen display-4 text-danger"></div>
                    <div class="ml-3">
                        <div class="text-muted small">Aktivni projekti</div>
                        <div id="divLblActiveProjects" class="text-large">985</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-2">
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="lnr lnr-screen display-4 text-danger"></div>
                    <div class="ml-3">
                        <div class="text-muted small">Leto</div>
                        <select asp-for="Year" class="form-control sel-year" asp-items="ViewBag.Years"></select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6 col-xl-6">
        <div class="card mb-4">
            <div class="card-body">
                <canvas id="chartDiferenceInPriceMonth" height="400"></canvas>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="card mb-4">
            <div class="card-body">
                <canvas id="chartDiferenceInPriceYear" height="400"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12 col-xl-12">
        <div class="card mb-4">
            <div class="card-body">
                <canvas id="chartDiferenceInPricePartnersYear" height="500"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12 col-xl-12">
        <div class="card mb-4">
            <div class="card-body">
                <canvas id="chartDiferenceInPriceProjectsYear" height="500"></canvas>
            </div>
        </div>
    </div>
</div>

@*<hr class="container-m-nx mt-0 mb-4">
<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <h6 class="card-header">Prihajajoči dogodki</h6>
            <div style="height: 500px" id="upcomming-events">
                <div class="card-body">
                    <div class="media">
                        <div class="ui-icon ui-activity-icon far fa-sticky-note text-secondary"></div>
                        <div class="media-body ml-3">
                            Zapiski <a href="#">Preveri dobavo materiala</a>
                            <div class="text-muted small"><b>Danes</b> - 3.3.2020 14:30 (sreda) - še 15 minut</div>
                        </div>
                    </div>
                    <hr class=" mt-0 mb-2 mt-2">
                    <div class="media">
                        <div class="ui-icon ui-activity-icon fas fa-exclamation text-secondary"></div>
                        <div class="media-body ml-3">
                            Napaka <a href="#">MAN (SG-AB-123)</a> (Napaka na motorju - Prižiga se lučka za olje)
                            <div class="text-muted small">20.2.2020 (petek) - zamujeno 2 uri</div>
                        </div>
                    </div>
                    <hr class=" mt-0 mb-2 mt-2">
                    <div class="media">
                        <div class="ui-icon ui-activity-icon fas fa-truck text-secondary"></div>
                        <div class="media-body ml-3">
                            Tehnični pregled <a href="#">MAN (SG-CD-234)</a>
                            <div class="text-muted small">8.5.2020 (ponedeljek) - še 30 dni</div>
                        </div>
                    </div>
                    <hr class=" mt-0 mb-2 mt-2">
                    <div class="media">
                        <div class="ui-icon ui-activity-icon fas fa-users text-secondary"></div>
                        <div class="media-body ml-3">
                            Zdravniški pregled <a href="#">Janez Novak</a>
                            <div class="text-muted small">1.4.2020 (torek) - še 10 dni</div>
                        </div>
                    </div>
                    <hr class=" mt-0 mb-2 mt-2">
                    <div class="media">
                        <div class="ui-icon ui-activity-icon far fa-cogs text-secondary"></div>
                        <div class="media-body ml-3">
                            Servis <a href="#">Prikolica Krone (SG-GH-321)</a> (Menjava gum)
                            <div class="text-muted small">8.4.2020 (torek) - še 10 dni</div>
                        </div>
                    </div>
                    <hr class=" mt-0 mb-2 mt-2">
                    <div class="media">
                        <div class="ui-icon ui-activity-icon fas fa-tasks text-secondary"></div>
                        <div class="media-body ml-3">
                            Pregled <a href="#">MAN (SG-EF-789)</a> (Mesečna kontrola nivoja olja)
                            <div class="text-muted small">10.4.2020 (sreda) - še 12 dni</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mb-4">
            <h6 class="card-header">Weather</h6>
            <div class="row no-gutters row-bordered text-center">

                <div class="col-lg-3">
                    <div class="py-2">Sunday</div>
                    <hr class="m-0">
                    <div class="py-4">
                        <div class="ion ion-md-sunny display-3 text-warning mb-3"></div>
                        <div class="text-xlarge mb-3">+20°</div>
                        <div class="text-muted">Sunny day</div>
                    </div>
                    <hr class="m-0">
                    <div class="text-muted py-2">
                        May 21
                    </div>
                </div>

                <div class="col-lg-3">
                    <div class="py-2">Monday</div>
                    <hr class="m-0">
                    <div class="py-4">
                        <div class="ion ion-md-rainy display-3 text-info mb-3"></div>
                        <div class="text-xlarge mb-3">+15°</div>
                        <div class="text-muted">Rainy day</div>
                    </div>
                    <hr class="m-0">
                    <div class="text-muted py-2">
                        May 22
                    </div>
                </div>

                <div class="col-lg-3">
                    <div class="py-2">Tuesday</div>
                    <hr class="m-0">
                    <div class="py-4">
                        <div class="ion ion-md-partly-sunny display-3 text-secondary mb-3"></div>
                        <div class="text-xlarge mb-3">+18°</div>
                        <div class="text-muted">Cloudy day</div>
                    </div>
                    <hr class="m-0">
                    <div class="text-muted py-2">
                        May 23
                    </div>
                </div>

                <div class="col-lg-3">
                    <div class="py-2">Wednesday</div>
                    <hr class="m-0">
                    <div class="py-4">
                        <div class="ion ion-md-rainy display-3 text-info mb-3"></div>
                        <div class="text-xlarge mb-3">+17°</div>
                        <div class="text-muted">Rainy day</div>
                    </div>
                    <hr class="m-0">
                    <div class="text-muted py-2">
                        May 24
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mb-4">
            <h6 class="card-header">Podjetje</h6>
            <ul class="list-group list-group-flush">
                <li class="list-group-item py-3">
                    <div class="media">
                        <div class="far fa-building ui-w-30 text-center text-lighter mt-1"></div>
                        <div class="media-body ml-2">
                            Moje podjetje d.o.o.
                        </div>
                    </div>
                </li>
                <li class="list-group-item py-3">
                    <div class="media">
                        <div class="far fa-map-marker-alt ui-w-30 text-center text-lighter mt-1"></div>
                        <div class="media-body ml-2">
                            Ulica 110, 1234 Pošta v Sloveniji
                        </div>
                    </div>
                </li>
                <li class="list-group-item py-3">
                    <div class="media">
                        <div class="far fa-info-circle ui-w-30 text-center text-lighter mt-1"></div>
                        <div class="media-body ml-2">
                            Davčna številka: SI321654987
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>*@

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="~/vendor/libs/chartjs/chartjs.js" asp-append-version="true"></script>
    <script src="~/vendor/libs/chartjs/chartjs-plugin-colorschemes.min.js" asp-append-version="true"></script>
    <script>
        let graphDifferenceInPriceMonth;
        let graphDifferenceInPriceYear;
        let graphDifferenceInPricePartnersYear;
        let graphDifferenceInPriceProjectsYear;
        //new PerfectScrollbar(document.getElementById('upcomming-events'));

        $(document).ready(function () {
            refreshData();
            $('.sel-year').on('change', function() {
                refreshData();
            });
        });

        function refreshData() {
            let year = parseInt($('.sel-year').val());

            $.blockUI();
            $.ajax({
                type: "GET",
                url: "Index/?handler=Data",
                data: { year },
                success: function (data) {
                    $.unblockUI();
                    if (data.successful) {
                        setData(data.data);
                    } else {
                        Swal.fire('Napaka pri osveževanju grafov!',
                            data.error,
                            'warning');
                    }

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);
                    $.unblockUI();
                }
            });
        }

        function setData(data) {
            //Graf Mesec
            if (graphDifferenceInPriceMonth != null) {
                graphDifferenceInPriceMonth.destroy();
            }

            graphDifferenceInPriceMonth = new Chart($('#chartDiferenceInPriceMonth'), {
                type: 'bar',
                data: {
                    labels: data.month.xAxis,
                    datasets: [
                        {
                            data: data.month.diferenceInPrice,
                            label: "Rvc",
                            type: "line",
                            fill: false,
                            order: 1
                        },
                        {
                            data: data.month.expenses,
                            label: "Stroški",
                            type: "bar",
                            order: 2
                        }, {
                            data: data.month.sales,
                            label: "Prodaja",
                            type: "bar",
                            order: 3
                        },
                    ]
                },

                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        text: 'test123',
                        display: true,
                        position: 'bottom'
                    },
                    title: {
                        display: true,
                        text: 'Odprema pozicij delov projektov po dnevih za preteklih 30 dni'
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                //  min: yMinVal,
                                suggestedMin: 0,
                            },

                        }],
                        xAxis: [{
                            type: 'time',
                        }]
                    },
                    plugins: {

                        colorschemes: {

                            scheme: 'brewer.PastelOne3'
          
                        }
          
                    },
                    tooltips: {
                        callbacks: {
                            title: function(tooltipItems, data) {
                                return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
                            }
                        }
                    }
                }
            });

            //Graf Leto
            if (graphDifferenceInPriceYear!= null) {
                graphDifferenceInPriceYear.destroy();
            }

            graphDifferenceInPriceYear = new Chart($('#chartDiferenceInPriceYear'), {
                type: 'bar',
                data: {
                    labels: data.year.xAxis,
                    datasets: [
                        {
                            data: data.year.diferenceInPrice,
                            label: "Rvc",
                            type: "line",
                            fill: false,
                            order: 1
                        },
                        {
                            data: data.year.expenses,
                            label: "Stroški",
                            type: "bar",
                            order: 2
                        }, {
                            data: data.year.sales,
                            label: "Prodaja",
                            type: "bar",
                            order: 3
                        },
                    ]
                },

                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        text: 'test123',
                        display: true,
                        position: 'bottom'
                    },
                    title: {
                        display: true,
                        text: 'Odprema pozicij delov projektov po dnevih za izbrano leto'
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                //  min: yMinVal,
                                suggestedMin: 0,
                            },

                        }],
                        xAxis: [{
                            type: 'time',
                        }]
                    },
                    plugins: {

                        colorschemes: {

                            scheme: 'brewer.PastelOne3'

                        }

                    },
                    tooltips: {
                        callbacks: {
                            title: function (tooltipItems, data) {
                                return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
                            }
                        }
                    }
                }
            });

            //Napisi - Labels
            $('#divLblActiveProjects').text(data.labels.activeProjects);
            $('#divLblDifferenceInPrice').text(data.labels.diferenceInPrice + ' €');
            $('#divLblExpenses').text(data.labels.expenses + ' €');
            $('#divLblSales').text(data.labels.sales + ' €');

            //Graf partnerji leto 
            if (graphDifferenceInPricePartnersYear != null) {
                graphDifferenceInPricePartnersYear.destroy();
            }

            graphDifferenceInPricePartnersYear = new Chart($('#chartDiferenceInPricePartnersYear'), {
                type: 'bar',
                data: {
                    labels: data.partnersYear.xAxis,
                    datasets: [
                        {
                            data: data.partnersYear.diferenceInPrice,
                            label: "Rvc",
                            type: "line",
                            fill: false,
                            order: 1
                        },
                        {
                            data: data.partnersYear.expenses,
                            label: "Stroški",
                            type: "bar",
                            order: 2
                        }, {
                            data: data.partnersYear.sales,
                            label: "Prodaja",
                            type: "bar",
                            order: 3
                        },
                    ]
                },

                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        text: 'test123',
                        display: true,
                        position: 'bottom'
                    },
                    title: {
                        display: true,
                        text: 'Odprema pozicij delov projektov po partnerjih za izbrano leto'
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                //  min: yMinVal,
                                suggestedMin: 0,
                            },

                        }],
                        xAxis: [{
                            type: 'time',
                        }]
                    },
                    plugins: {

                        colorschemes: {

                            scheme: 'brewer.PastelOne3'

                        }

                    },
                    tooltips: {
                        callbacks: {
                            title: function (tooltipItems, data) {
                                return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
                            }
                        }
                    }
                }
            });

            //Graf projekti leto 
            if (graphDifferenceInPriceProjectsYear != null) {
                graphDifferenceInPriceProjectsYear.destroy();
            }

            graphDifferenceInPriceProjectsYear = new Chart($('#chartDiferenceInPriceProjectsYear'), {
                type: 'bar',
                data: {
                    labels: data.projectsYear.xAxis,
                    datasets: [
                        {
                            data: data.projectsYear.diferenceInPrice,
                            label: "Rvc",
                            type: "line",
                            fill: false,
                            order: 1
                        },
                        {
                            data: data.projectsYear.expenses,
                            label: "Stroški",
                            type: "bar",
                            order: 2
                        }, {
                            data: data.projectsYear.sales,
                            label: "Prodaja",
                            type: "bar",
                            order: 3
                        },
                    ]
                },

                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        text: 'test123',
                        display: true,
                        position: 'bottom'
                    },
                    title: {
                        display: true,
                        text: 'Odprema pozicij delov projektov po projektih za izbrano leto'
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                //  min: yMinVal,
                                suggestedMin: 0,
                            },

                        }],
                        xAxis: [{
                            type: 'time',
                        }]
                    },
                    plugins: {

                        colorschemes: {

                            scheme: 'brewer.PastelOne3'

                        }

                    },
                    tooltips: {
                        callbacks: {
                            title: function (tooltipItems, data) {
                                return data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].x;
                            }
                        }
                    }
                }
            });
        }
    </script>
}