@extends('layouts.admin')
@section('content')
    <h1 class="app-page-title">Přehledy</h1>
    <style>
        .stats-figure {
            font-size: 28px !important;
        }
    </style>
    <div class="row g-4 mb-4">
        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Profit (dnes)</h4>
                                        <div class="stats-figure">
                        {{ number_format($stats->income - $stats->expenses - $stats->orders * 0.27 - (($stats->income - $stats->expenses) / 100) * 1.4, 0, '', '') }}zł
                        ({{ number_format($czk_am, 0, '', '') }} Kč)</div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>
        <!--//col-->

        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Výdaje (dnes)</h4>
                    <div class="stats-figure">zł{{ number_format($stats->expenses, 2) }}</div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>

        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Profit (Předchozí)</h4>
                    <div class="stats-figure">
                        zł{{ number_format($prevMonth['profit'] - $prevMonth['orders'] * 0.27 - ($prevMonth['profit'] / 100) * 1.4, 2) }}
                    </div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>
        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Profit ({{ \Carbon\Carbon::now()->format('F') }})</h4>
                    <div class="stats-figure">
                                                {{ intval($thisMonth['profit'] - $thisMonth['orders'] * 0.27 - ($thisMonth['profit'] / 100) * 1.4) }}zł
                        ({{ intval($czk_am1) }} Kč)
                    </div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>
        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Profit (30 dní)</h4>
                    <div class="stats-figure">
                        zł{{ number_format($month['profit'] - $month['orders'] * 0.27 - ($month['profit'] / 100) * 1.4, 2) }}
                    </div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>
        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Objednávky (dnes)</h4>
                    <div class="stats-figure">{{ $stats->orders }}</div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>
        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Objednávky (celkem)</h4>
                    <div class="stats-figure">{{ $total->orders }}</div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>
        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Zůstatek (JAP)</h4>
                    <div class="stats-figure">{{ number_format($balance, 2) }}$</div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>

        <!--//col-->
        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Přijaté platby (celkem)</h4>
                    <div class="stats-figure">zł{{ $total->income }}</div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>
        <!--//col-->
        <div class="col-6 col-lg-3">
            <div class="app-card app-card-stat shadow-sm h-100">
                <div class="app-card-body p-3 p-lg-4">
                    <h4 class="stats-type mb-1">Výdaje (celkem)</h4>
                    <div class="stats-figure">zł{{ number_format($total->expenses, 2) }}</div>

                </div>
                <!--//app-card-body-->
                <a class="app-card-link-mask" href="#"></a>
            </div>
            <!--//app-card-->
        </div>
    </div>
    <!--//row-->
    <div class="row g-4 mb-4">
        <div class="col-12 col-lg-6">
            <div class="app-card app-card-chart h-100 shadow-sm">
                <div class="app-card-header p-3">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-auto">
                            <h4 class="app-card-title">Profit (7 dní)</h4>
                        </div>
                        <!--//col-->
                        <div class="col-auto">

                            <!--//card-header-actions-->
                        </div>
                        <!--//col-->
                    </div>
                    <!--//row-->
                </div>
                <!--//app-card-header-->
                <div class="app-card-body p-3 p-lg-4">

                    <div class="chart-container">
                        <canvas id="canvas-linechart"></canvas>
                    </div>
                </div>
                <!--//app-card-body-->
            </div>
            <!--//app-card-->
        </div>
        <div class="col-12 col-lg-6">
            <div class="app-card app-card-chart h-100 shadow-sm">
                <div class="app-card-header p-3">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-auto">
                            <h4 class="app-card-title">Profit (30 dní)</h4>
                        </div>
                        <!--//col-->
                        <div class="col-auto">

                            <!--//card-header-actions-->
                        </div>
                        <!--//col-->
                    </div>
                    <!--//row-->
                </div>
                <!--//app-card-header-->
                <div class="app-card-body p-3 p-lg-4">

                    <div class="chart-container">
                        <canvas id="canvas-linechart30"></canvas>
                    </div>
                </div>
                <!--//app-card-body-->
            </div>
            <!--//app-card-->
        </div>
        <!--//col-->
        <div class="col-12 col-lg-6">
            <div class="app-card app-card-chart h-100 shadow-sm">
                <div class="app-card-header p-3">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-auto">
                            <h4 class="app-card-title">Počet objednávek</h4>
                        </div>
                        <!--//col-->
                        <div class="col-auto">

                            <!--//card-header-actions-->
                        </div>
                        <!--//col-->
                    </div>
                    <!--//row-->
                </div>
                <!--//app-card-header-->
                <div class="app-card-body p-3 p-lg-4">

                    <div class="chart-container">
                        <canvas id="canvas-barchart"></canvas>
                    </div>
                </div>
                <!--//app-card-body-->
            </div>
            <!--//app-card-->
        </div>
        <!--//col-->

    </div>
@endsection

@section('scripts')
    

    <script>
        'use strict';

        /* Chart.js docs: https://www.chartjs.org/ */

        window.chartColors = {
            green: '#ff603c',
            gray: '#a9b5c9',
            text: '#252930',
            border: '#e7e9ed'
        };

        /* Random number generator for demo purpose */
        var randomDataPoint = function() {
            return Math.round(Math.random() * 10000)
        };

        function createDays() {
            const days = ['Den 1'];
            for (var i = 2; i < 31; i++) {
                days.push('Den ' + i);
            }
            return days;
        }

        //Chart.js Line Chart Example

        var lineChartConfig = {
            type: 'line',

            data: {
                labels: ['Den 1', 'Den 2', 'Den 3', 'Den 4', 'Den 5', 'Den 6', 'Den 7'],

                datasets: [{
                    label: 'Tento týden',
                    fill: false,
                    backgroundColor: window.chartColors.green,
                    borderColor: window.chartColors.green,
                    data: [],
                }, {
                    label: 'Minulý týden',
                    borderDash: [3, 5],
                    backgroundColor: window.chartColors.gray,
                    borderColor: window.chartColors.gray,

                    data: [],
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                aspectRatio: 1.5,

                legend: {
                    display: true,
                    position: 'bottom',
                    align: 'end',
                },

                title: {
                    display: true,
                    text: 'Graf za posledních 7 dní',

                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    titleMarginBottom: 10,
                    bodySpacing: 10,
                    xPadding: 16,
                    yPadding: 16,
                    borderColor: window.chartColors.border,
                    borderWidth: 1,
                    backgroundColor: '#fff',
                    bodyFontColor: window.chartColors.text,
                    titleFontColor: window.chartColors.text,

                    callbacks: {
                        //Ref: https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
                        label: function(tooltipItem, data) {
                            if (parseInt(tooltipItem.value) >= 1000) {
                                return "zł" + tooltipItem.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                                return "zł" + tooltipItem.value;
                            }
                        }
                    },

                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        gridLines: {
                            drawBorder: false,
                            color: window.chartColors.border,
                        },
                        scaleLabel: {
                            display: false,

                        }
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            drawBorder: false,
                            color: window.chartColors.border,
                        },
                        scaleLabel: {
                            display: false,
                        },
                        ticks: {
                            beginAtZero: true,
                            userCallback: function(value, index, values) {
                                return "zł" + value
                                    .toLocaleString(); //Ref: https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
                            }
                        },
                    }]
                }
            }
        };

        var lineChart30Config = {
            type: 'line',

            data: {
                labels: createDays(),

                datasets: [{
                    label: 'Tento měsíc',
                    fill: false,
                    backgroundColor: window.chartColors.green,
                    borderColor: window.chartColors.green,
                    data: [],
                }, {
                    label: 'Minulý měsíc',
                    borderDash: [3, 5],
                    backgroundColor: window.chartColors.gray,
                    borderColor: window.chartColors.gray,

                    data: [],
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                aspectRatio: 1.5,

                legend: {
                    display: true,
                    position: 'bottom',
                    align: 'end',
                },

                title: {
                    display: true,
                    text: 'Graf za posledních 30 dní',

                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    titleMarginBottom: 10,
                    bodySpacing: 10,
                    xPadding: 16,
                    yPadding: 16,
                    borderColor: window.chartColors.border,
                    borderWidth: 1,
                    backgroundColor: '#fff',
                    bodyFontColor: window.chartColors.text,
                    titleFontColor: window.chartColors.text,

                    callbacks: {
                        //Ref: https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
                        label: function(tooltipItem, data) {
                            if (parseInt(tooltipItem.value) >= 1000) {
                                return "zł" + tooltipItem.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                                return "zł" + tooltipItem.value;
                            }
                        }
                    },

                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        gridLines: {
                            drawBorder: false,
                            color: window.chartColors.border,
                        },
                        scaleLabel: {
                            display: false,

                        }
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            drawBorder: false,
                            color: window.chartColors.border,
                        },
                        scaleLabel: {
                            display: false,
                        },
                        ticks: {
                            beginAtZero: true,
                            userCallback: function(value, index, values) {
                                return "zł" + value
                                    .toLocaleString(); //Ref: https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
                            }
                        },
                    }]
                }
            }
        };



        // Chart.js Bar Chart Example

        var barChartConfig = {
            type: 'bar',

            data: {
                labels: ['Den 1', 'Den 2', 'Den 3', 'Den 4', 'Den 5', 'Den 6', 'Den 7'],
                datasets: [{
                    label: 'Objednávky',
                    backgroundColor: window.chartColors.green,
                    borderColor: window.chartColors.green,
                    borderWidth: 1,
                    maxBarThickness: 16,

                    data: []                }]
            },
            options: {
                responsive: true,
                aspectRatio: 1.5,
                legend: {
                    position: 'bottom',
                    align: 'end',
                },
                title: {
                    display: true,
                    text: 'Počet objednávek poslední týden'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    titleMarginBottom: 10,
                    bodySpacing: 10,
                    xPadding: 16,
                    yPadding: 16,
                    borderColor: window.chartColors.border,
                    borderWidth: 1,
                    backgroundColor: '#fff',
                    bodyFontColor: window.chartColors.text,
                    titleFontColor: window.chartColors.text,

                },
                scales: {
                    xAxes: [{
                        display: true,
                        gridLines: {
                            drawBorder: false,
                            color: window.chartColors.border,
                        },

                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            drawBorder: false,
                            color: window.chartColors.borders,
                        },


                    }]
                }

            }
        }







        // Generate charts on load
        window.addEventListener('load', function() {

            var lineChart = document.getElementById('canvas-linechart').getContext('2d');
            window.myLine = new Chart(lineChart, lineChartConfig);

            var lineChart30 = document.getElementById('canvas-linechart30').getContext('2d');
            window.myLine = new Chart(lineChart30, lineChart30Config);

            var barChart = document.getElementById('canvas-barchart').getContext('2d');
            window.myBar = new Chart(barChart, barChartConfig);


        });
    </script>
@endsection