@extends('operations.layout.mainlayout')

<link rel="stylesheet" href="/warehouse_components/css/dashboard.css">

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: #e35a80!important;">Sales Dashboard </h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row mb-3">
                    <div class="col-8 mb-3">
                        <h2>FIT Test Screening Result Dashboard</h2>
                    </div>
                    <div class="col-4 mb-3">
                        <select name="date_filter" id="date-filter" class="float-right form-control"
                            style="max-width:200px">
                            <option value="30">Last 30 days</option>
                            <option value="60">Last 60 days</option>
                            <option value="90">Last 90 days</option>
                        </select>
                    </div>
                    <div class="col-md-7">
                        <div class="row mb-4">
                            <div id="total-tests" class="card col-4 mr-4">
                                <div class="card-header">
                                    <span>Total Tests</span>
                                    <span class="float-right">+30% <img src="/img/dashboard/ArrowRise.png" alt="arrow-rise" class="dashboard-arrow"></span>
                                </div>
                                <div class="card-body">
                                    <h2>30,000 <span style="color: #dc5d80">/ 100,000</span></h2>
                                </div>
                            </div>
                            <div id="clusters" class="card col-2 mr-4">
                                <div class="card-header">
                                    <span><b>Positive</b></span>
                                </div>
                                <div class="card-body">
                                    <h2>20% <img src="/img/dashboard/ArrowFall.png" alt="arrow-fall" class="dashboard-arrow-result float-right"></h2>
                                </div>
                            </div>
                            <div id="clusters" class="card col-2 mr-4">
                                <div class="card-header">
                                    <span><b>Negative</b></span>
                                </div>
                                <div class="card-body">
                                    <h2>70% <img src="/img/dashboard/ArrowRise.png" alt="arrow-rise" class="dashboard-arrow-result float-right"></h2>
                                </div>
                            </div>
                            <div id="clusters" class="card col-2 mr-4">
                                <div class="card-header">
                                    <span><b>Invalid</b></span>
                                </div>
                                <div class="card-body">
                                    <h2>10% <img src="/img/dashboard/ArrowFall.png" alt="arrow-fall" class="dashboard-arrow-result float-right"></h2>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="card" style="min-height:100%">
                                    <div class="card-header">
                                        <h3>Positive Per Gender</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col">
                                                <div id="tests-per-gender"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card" style="min-height:100%">
                                    <div class="card-header">
                                        <h3>Positive Result per Age Group</h3>
                                    </div>
                                    <div class="card-body">
                                        <div id="positiveResultsPerAgeGroup-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                        <div class="col-md-5">
                        <div class="stretch-card right-card">
                            <div class="card" style="min-height:100%">
                                <div class="card-body">
                                    <div class="card-header mb-3">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <b>Positive Result Per Region</b>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="filter-group float-right">
                                                    <button class="dropdown btn btn-sm">
                                                        <span class=" dropdown-toggle" href="#" id="region_dropDown"
                                                            role="button" data-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <i class="fa fa-filter"></i>
                                                        </span>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <form class="px-3 py-1 form-dropdown-menu">
                                                                <div class="form-group">
                                                                    <label for="tests_per_region_range">Date
                                                                        Range</label>
                                                                    <div id="tests_per_region_range" class="form-control"
                                                                        style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                        <i class="fa fa-calendar"></i>&nbsp;
                                                                        <span></span> <i class="fa fa-caret-down"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="dropdown-divider"></div>
                                                                <div class="form-group">
                                                                    <input type="button" id="tests_per_region_filter_range"
                                                                        class="btn btn-block btn-sm btn-info"
                                                                        value="Apply">
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="wave-loader-map" id="map-loader">
                                                <div class="wave top-wave" style="margin-left: 30%;width: 50%">
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                </div>
                                                <div class="wave bottom-wave" style="margin-left: 30%;width: 50%">
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                    <div></div>
                                                </div>
                                            </div>
                                            <div id="testsPerRegion-container"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-header">
                                <h3>Summary</h3>
                            </div>
                            <div class="card-body">
                                <div id="summary-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

<script src="/warehouse_components/js/apexcharts.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/highmaps.js"></script>
<script src="/js/exporting.js"></script>
@section('warehouse_scripts')
    <script src="/warehouse_components/js/jquery.easypiechart.min.js"></script>
    <script>
        $(document).ready(function() {
            initSummaryChart();
            initTestsPerRegionMap();
            initPositiveResultsPerAgeGroupChart();
        });

        function initPositiveResultsPerAgeGroupChart() {
            if ($('#positiveResultsPerAgeGroup-chart').length) {
                const colors = {
                    bodyColor: '#333333',
                    cardBg: '#ffffff'
                };

                var options = {
                    series: [34, 123, 120, 45, 78], // Data values for each age group
                    chart: {
                        type: 'donut',
                        height: 350,
                        parentHeightOffset: 0,
                        foreColor: colors.bodyColor,
                        background: colors.cardBg,
                    },
                    labels: ['10-20', '20-30', '30-40', '40-50', '60 above'], // Age group labels
                    colors: ['#95a4fc', '#dc5d80', '#ffc629', '#ade7bc', '#b1e3ff'], // Colors for each segment
                    dataLabels: {
                        enabled: true,
                        formatter: function (val, opts) {
                            // Display actual count next to the age group label
                            return opts.w.globals.series[opts.seriesIndex];
                        },
                        style: {
                            fontSize: '14px',
                            fontWeight: 'bold',
                        }
                    },
                    legend: {
                        position: 'right',
                        horizontalAlign: 'center',
                        fontSize: '12px',
                        markers: {
                            radius: 12
                        }
                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                                return val;
                            }
                        }
                    },
                    stroke: {
                        show: false
                    }
                };

                var positiveResultsPerAgeGroupChart = new ApexCharts(document.querySelector("#positiveResultsPerAgeGroup-chart"), options);
                positiveResultsPerAgeGroupChart.render();
            }
        }

        function initSummaryChart() {
            if ($('#summary-chart').length) {
                const colors = {
                    bodyColor: '#333333',
                    cardBg: '#ffffff',
                    gridBorder: '#e5e5e5'
                };

                var options = {
                    colors: ['#dc6767', '#bdecca', '#c1e9ff'], // Colors for Target Tests and Actual Tests
                    chart: {
                        type: 'bar',
                        height: '550',
                        parentHeightOffset: 0,
                        foreColor: colors.bodyColor,
                        background: colors.cardBg,
                        toolbar: {
                            show: false,
                        },
                    },
                    theme: {
                        mode: 'light'
                    },
                    tooltip: {
                        theme: 'light'
                    },
                    fill: {
                        opacity: 1
                    },
                    grid: {
                        padding: {
                            bottom: -4
                        },
                        borderColor: colors.gridBorder,
                        xaxis: {
                            lines: {
                                show: false
                            }
                        },
                        yaxis: {
                            lines: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: 'Negative',
                        data: [75, 50, 45, 60, 70]
                    }, {
                        name: 'Positive',
                        data: [20, 35, 50, 20, 20]
                    }, {
                        name: 'Invalid',
                        data: [5, 15, 5, 20, 10]
                    }],
                    xaxis: {
                        categories: ['Middle Region', 'West Region', 'South Region', 'North Region', 'East Region'],
                        axisBorder: {
                            color: 'gray',
                        },
                        axisTicks: {
                            color: 'gray',
                        },
                        labels: {
                            rotate: -45,
                            style: {
                                fontSize: '10px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                            }
                        }
                    },
                    yaxis: {
                        title: {
                            text: 'Tests',
                            style: {
                                color: 'gray'
                            }
                        },
                    },
                    legend: {
                        show: true,
                        position: "top",
                        horizontalAlign: 'center',
                        itemMargin: {
                            horizontal: 8,
                            vertical: 0
                        },
                    },
                    stroke: {
                        width: 2,
                        colors: ['transparent']
                    },
                    dataLabels: {
                        enabled: true,
                        formatter: function(val, opts) {
                            let target = opts.w.config.series[0].data[opts.dataPointIndex];
                            return val + '%';
                        },
                        offsetY: -20,
                        style: {
                            fontSize: '12px',
                            colors: ["#000"]
                        }
                    },
                    plotOptions: {
                        bar: {
                            columnWidth: "55%",
                            borderRadius: 4,
                            dataLabels: {
                                position: 'top',
                                orientation: 'vertical',
                            }
                        },
                    },
                };

                var summaryChart = new ApexCharts(document.querySelector("#summary-chart"),
                    options);
                summaryChart.render();
            }
        }

        function initTestsPerRegionMap() {
            var start = moment().subtract(29, 'days'); // Default to the last 30 days
            var end = moment();

            function testsPerRegionMap(data) {
                Highcharts.getJSON('/json/sa-regions.json', function(geojson) {

                    // Initialize the chart
                    Highcharts.mapChart('testsPerRegion-container', {
                        maintainAspectRatio: false,
                        responsive: true,
                        chart: {
                            map: geojson,
                            toolbar: {
                                show: false,
                            }
                        },
                        title: {
                            text: ''
                        },
                        mapNavigation: {
                            enabled: true,
                            buttonOptions: {
                                verticalAlign: 'bottom'
                            }
                        },
                        colorAxis: {
                            min: 0,
                        },
                        series: [{
                            data: data,
                            name: 'Total Tests',
                            states: {
                                hover: {
                                    color: '#e35a80'
                                }
                            },
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}'
                            },
                            point: {
                                events: {
                                    click: function() {
                                        // When a city (point) is clicked, call the filter function with city info
                                        const cityData = {
                                            name: this.name,
                                            cityId: this['hc-key']  // Or use another unique identifier
                                        };

                                        // Call the filter function with city data
                                        filterTestsPerRegionMap(cityData);
                                    }
                                }
                            }
                        }]
                    });
                });
            }

            function cb(start, end) {
                $('#tests_per_region_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $(document).on('click', '#tests_per_region_filter_range', function(e) {
                e.preventDefault();
                let rangePicker = $('#tests_per_region_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let parent = $('#tests_per_region_filter_range').closest('.show');
                $('#region_dropDown').css('color', '#e35a80');
                parent.removeClass('show');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                };
                filterTestsPerRegionMap(rangeDates);
            });

            filterTestsPerRegionMap(); // Initial load without date range filter
            $('#map-loader').show();

            function filterTestsPerRegionMap(filterData = {}) {
                const { date = null, cityId = null } = filterData;
                $.ajax({
                    url: '/operations/fit-test/test-per-region-map',
                    data: {
                        date: date,
                        cityId: cityId
                    },
                    type: 'GET',
                    async: true,
                    dataType: "json",
                    success: function(data) {
                        testsPerRegionMap(data);
                        $('.wave-loader').hide();
                        $('#map-loader').hide();
                    }
                });
            }

            // Initialize date range picker
            $('#tests_per_region_range').daterangepicker({
                startDate: start,
                endDate: end,
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month')
                        .endOf('month')
                    ],
                    'Last 3 Months': [moment().subtract(3, 'months').startOf('month'), moment().subtract(1, 'month')
                        .endOf('month')
                    ],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf(
                        'year')],
                }
            }, cb);

            cb(start, end);
            $(".daterangepicker").click(function(e) {
                e.stopPropagation();
            });
        }

        // Tests Per Gender Donut Chart
        var optionsTestsPerGender = {
            series: [61.4, 38.6],
            chart: {
                type: 'donut',
                height: 350,
            },
            labels: ['Male', 'Female'],
            colors: ['#95a4fc', '#dc5d80'] // Custom colors for the segments
        };

        var chartTestsPerGender = new ApexCharts(document.querySelector("#tests-per-gender"), optionsTestsPerGender);
        chartTestsPerGender.render();
    </script>
@endsection