<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    @include('layout.header')
    <style>
        .content-wrapper .card {
            border: 0px !important;
        }

    </style>
</head>
<body>
<div class="row" id="x" style="display: none;">
    <div class="col-12">
      <span class="d-flex align-items-center purchase-popup">
        <i class="typcn typcn-delete-outline" id="bannerClose"></i>
      </span>
    </div>
</div>
<div class="container-scroller">
@include('layout.navbar')
<!-- partial -->
    @include('layout.breadscrum')
    <div class="container-fluid page-body-wrapper">

    @include('layout.sidebar')

    <!-- partial -->
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-xl-12 mb-0 grid-margin stretch-card flex-column">
                        <div class="row">

                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card " style="border-left: 5px solid #33db40 !important;" >
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.today_sample') }}</div>
                                                <div class="h5 mb-0 font-weight-bold">{{$todaySamples}}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fa fa-flask fa-2x text-gray"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card" style="border-left: 5px solid #5881dd !important;" >
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.this_month_sample') }}</div>
                                                <div class="h5 mb-0 font-weight-bold">{{$thisMonthSamples}}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fa fa-flask fa-2x text-gray"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card" style="border-left: 5px solid #f39915 !important;" >
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.last_month_sample') }}</div>
                                                <div class="h5 mb-0 font-weight-bold">{{$previousMonthSamples}}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fa fa-flask fa-2x text-gray"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card" style="border-left: 5px solid #555 !important;" >
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.average_sample') }} <span class="small">({{date('Y',strtotime("-1 year"))}})</span></div>
                                                <div class="h5 mb-0 font-weight-bold ">{{$averageSamples}}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fa fa-flask fa-2x text-gray"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row h-100">
                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card" style="border-left: 5px solid #5881dd !important;" >
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.today_income') }}</div>
                                                <div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ?  number_format(ceil($todayIncome / 100) * 100) : number_format($todayIncome,2)}}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fa fa-2x text-gray">
                                                    {{$labSettings->currency==1 ? '៛' : '$'}}
                                                </i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card" style="border-left: 5px solid #33db40 !important;" >
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.this_month_income') }}</div>
                                                <div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ?  number_format(ceil($thisMonthIncome / 100) * 100) : number_format($thisMonthIncome,2)}}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fa fa-2x text-gray">
                                                    {{$labSettings->currency==1 ? '៛' : '$'}}
                                                </i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card" style="border-left: 5px solid #dc3545 !important;" >
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.last_month_income') }}</div>
                                                <div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ?  number_format(ceil($lastMonthIncome / 100) * 100) : number_format($lastMonthIncome,2)}}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fa fa-2x text-gray">
                                                    {{$labSettings->currency==1 ? '៛' : '$'}}
                                                </i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 grid-margin stretch-card">
                                <div class="card" style="border-left: 5px solid #f39915 !important;" >
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col mr-2">
                                                <div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.last_year_income') }}</div>
                                                <div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ?  number_format(ceil($lastYearIncome / 100) * 100) : number_format($lastYearIncome,2)}}</div>
                                            </div>
                                            <div class="col-auto">
                                                <i class="fa fa-2x text-gray">
                                                    {{$labSettings->currency==1 ? '៛' : '$'}}
                                                </i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-xl-6 grid-margin stretch-card">
                        <div class="card bg-inverse-light">
                            <div class="card-body border-bottom">
                                <div class="d-flex justify-content-between align-items-center flex-wrap">
                                    <h6 class="mb-2 mb-md-0 text-uppercase font-weight-medium">{{ __('general.sample_statistic') }}</h6>
                                </div>
                            </div>
                            <div class="card-body">
                                <canvas id="sales-chart-d" height="150"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-6 grid-margin stretch-card">
                        <div class="card bg-inverse-light">
                            <div class="card-body border-bottom">
                                <div class="d-flex justify-content-between align-items-center flex-wrap">
                                    <div class="dropdown">
                                        <button class="btn bg-white p-0 pb-1 text-muted btn-sm dropdown-toggle" type="button" id="dropdownMenuSizeButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Bar Chart
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton4">
                                            <a class="dropdown-item" href="javascript:;">Bar Chart</a>
                                            <a class="dropdown-item" href="javascript:;">Pie Chart</a>
                                        </div>
                                    </div>
                                    <h6 class="mb-2 mb-md-0 text-uppercase font-weight-medium">{{ __('general.sample_source_statistic') }}</h6>
                                    <div class="dropdown">
                                        <button class="btn bg-white p-0 pb-1 text-muted btn-sm dropdown-toggle" type="button" id="dropdownMenuSizeButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            {{__('general.chart_filter_this_month')}}
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton4">
                                            <a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_today')}}</a>
                                            <a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_this_month')}}</a>
                                            <a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_this_year')}}</a>
                                            <a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_last_year')}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <canvas id="sales-chart-b" height="150"></canvas>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
            @include('layout.footer')
        </div>
    </div>
</div>
@include('layout.common_script')

<script src="{{url(env("APP_URL").'storage/assets/libs/chart.js/Chart.min.js')}}"></script>

<script>

        $(document).ready(function () {
            // Set interval to reload the page every 2 minutes (120000 milliseconds)
            setInterval(function () {
                location.reload();
            }, 120000);
        });

    function generateColorCodeByYear(year) {
        const seed = parseInt(year.toString().slice(-2));
        const red = (Math.sin(seed * 1) * 127 + 128) | 0;
        const green = (Math.sin(seed * 2) * 127 + 128) | 0;
        const blue = (Math.sin(seed * 3) * 127 + 128) | 0;

        return `#${red.toString(16).padStart(2, '0')}${green.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;
    }
</script>
<script>

    let sampleSourceData = <?php echo json_encode($sampleSourceChart);?>;
    let sampleYearData = Object.values(<?php echo json_encode($sampleYear);?>);

    let preparedSampleChartData = [];
    let maxYear = Math.ceil((parseInt("<?php echo $maxYear?>"))/50) * 50;
    let maxSampleSource = Math.ceil((parseInt("<?php echo $maxSampleSource?>"))/20) * 20;

    let arrLabel = [];
    sampleYearData.map(item=>{

        let years = Object.values(item.year);
        let singleSampleChart = {
            label : years[0],
            data : Object.values(item.data),
            backgroundColor: generateColorCodeByYear(years[0])
        };
        arrLabel = Object.values(item.month);
        preparedSampleChartData.push(singleSampleChart);
    });

    (function($) {
        'use strict';
        $(function() {
            // sales-chart-d start
            if ($("#sales-chart-d").length) {
                var SalesChartDCanvas = $("#sales-chart-d").get(0).getContext("2d");
                var SalesChartD = new Chart(SalesChartDCanvas, {
                    type: 'bar',
                    data: {
                        labels: arrLabel,
                        datasets: preparedSampleChartData
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        layout: {
                            padding: {
                                left: 0,
                                right: 0,
                                top: 0,
                                bottom: 0
                            }
                        },
                        scales: {
                            yAxes: [{
                                display: true,
                                gridLines: {
                                    display: true,
                                    drawBorder: true
                                },
                                ticks: {
                                    display: true,
                                    min: 0,
                                    max: maxYear,
                                    stepSize: 50,
                                    fontSize: 10,
                                    fontColor: "#001737",
                                }
                            }],
                            xAxes: [{
                                stacked: false,
                                ticks: {
                                    beginAtZero: true,
                                    fontColor: "#001737",
                                    fontSize: 10
                                },
                                gridLines: {
                                    color: "rgba(0, 0, 0, 0)",
                                    display: true
                                },
                                barPercentage: .3
                            }]
                        },
                        legend: {
                            display: true
                        },
                        elements: {
                            point: {
                                radius: 0
                            }
                        }
                    },
                });
            }
            // sales-chart-d end

            if ($("#sales-chart-b").length) {
                var SalesChartDCanvas = $("#sales-chart-b").get(0).getContext("2d");
                var SalesChartD = new Chart(SalesChartDCanvas, {
                    type: 'bar',
                    data: {
                        labels: sampleSourceData.sample_source,
                        datasets: [
                            {
                                label: sampleSourceData.period_type[0]+' Samples',
                                data: sampleSourceData.total_samples,
                                backgroundColor: '#3b86d1'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        layout: {
                            padding: {
                                left: 0,
                                right: 0,
                                top: 0,
                                bottom: 0
                            }
                        },
                        scales: {
                            yAxes: [{
                                display: true,
                                gridLines: {
                                    display: true,
                                    drawBorder: true
                                },
                                ticks: {
                                    display: true,
                                    min: 0,
                                    max: maxSampleSource,
                                    stepSize: 20,
                                    fontSize: 10,
                                    fontColor: "#001737",
                                }
                            }],
                            xAxes: [{
                                stacked: false,
                                ticks: {
                                    beginAtZero: true,
                                    fontColor: "#001737",
                                    fontSize: 10
                                },
                                gridLines: {
                                    color: "rgba(0, 0, 0, 0)",
                                    display: false
                                },
                                barPercentage: .3
                            }]
                        },
                        legend: {
                            display: false
                        },
                        elements: {
                            point: {
                                radius: 0
                            }
                        }
                    },
                });
            }
        });
    })(jQuery);

</script>

</body>

</html>

