@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: var(--blazma-text)!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">
                    <div class="col-8 mb-3">
                        <h2>FIT Test Screening 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-5 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: var(--blazma-primary)">/ 100,000</span></h2>
                                </div>
                            </div>
                            <div id="clusters" class="card col-5">
                                <div class="card-header">
                                    <span>No. of Clusters:</span> 
                                    <span class="float-right">+15.03% <img src="/img/dashboard/ArrowRise.png" alt="arrow-rise" class="dashboard-arrow"></span>
                                </div>
                                <div class="card-body">
                                    <h2>30</h2>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3>Top Regions</h3>
                            </div>
                            <div class="card-body">
                                <div id="topRegions-chart"></div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3>Top Clusters %</h3>
                            </div>
                            <div class="card-body">
                                <div id="topClusters-chart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="stretch-card right-card">
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-header mb-3">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <b>Tests 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 class="card">
                            <div class="card-header">
                                <h3>Test Per Gender</h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5>Total: 30,000 <i class="fa fa-user-circle"></i></h5>
                                        <div id="tests-per-gender"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3>Test Per Age Group</h3>
                            </div>
                            <div class="card-body">
                                <div id="tests-per-age-group"></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() {
            initTopRegionsChart();
            initTopClustersChart();
            initTestsPerRegionMap();
        });

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

                var options = {
                    colors: ['var(--blazma-primary)'],
                    chart: {
                        type: 'bar',
                        height: '550',
                        parentHeightOffset: 0,
                        foreColor: colors.bodyColor,
                        background: colors.cardBg,
                        toolbar: {
                            show: false,
                        },
                    },
                    theme: {
                        mode: 'light'
                    },
                    tooltip: {
                        theme: 'light'
                    },
                    fill: {
                        opacity: 0.9
                    },
                    grid: {
                        padding: {
                            bottom: -4
                        },
                        borderColor: colors.gridBorder,
                        xaxis: {
                            lines: {
                                show: false
                            }
                        },
                        yaxis: {
                            lines: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: 'Percentage',
                        data: [] // Placeholder data to be populated by AJAX
                    }],
                    xaxis: {
                        categories: [], // Placeholder categories to be populated by AJAX
                        axisBorder: {
                            color: 'gray',
                        },
                        axisTicks: {
                            color: 'gray',
                        },
                        labels: {
                            rotate: -45,
                            style: {
                                fontSize: '10px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                            }
                        }
                    },
                    yaxis: {
                        title: {
                            text: '',
                            style: {
                                color: 'gray'
                            }
                        },
                    },
                    legend: {
                        show: true,
                        position: "top",
                        horizontalAlign: 'center',
                        itemMargin: {
                            horizontal: 8,
                            vertical: 0
                        },
                    },
                    stroke: {
                        width: 0
                    },
                    dataLabels: {
                        enabled: false,
                    },
                    plotOptions: {
                        bar: {
                            columnWidth: "50%",
                            borderRadius: 4,
                            dataLabels: {
                                position: 'top',
                                orientation: 'vertical',
                            }
                        },
                    },
                };

                var topRegionsChart = new ApexCharts(document.querySelector("#topRegions-chart"), options);
                topRegionsChart.render();

                // Load data via AJAX and update chart
                loadTopRegionsData();

                function loadTopRegionsData() {
                    $.ajax({
                        url: '/operations/fit-test/top-regions', // Replace with actual API endpoint
                        method: 'GET',
                        success: function(data) {
                            // Update chart data
                            topRegionsChart.updateOptions({
                                series: [{
                                    data: data.series
                                }],
                                xaxis: {
                                    categories: data.labels
                                }
                            });
                        },
                        error: function() {
                            console.error('Failed to load Top Regions data.');
                        }
                    });
                }
            }
        }

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

                var options = {
                    colors: ['#ffc629'],
                    chart: {
                        type: 'bar',
                        height: '550',
                        parentHeightOffset: 0,
                        foreColor: colors.bodyColor,
                        background: colors.cardBg,
                        toolbar: {
                            show: false,
                        }
                    },
                    theme: {
                        mode: 'light'
                    },
                    tooltip: {
                        theme: 'light'
                    },
                    fill: {
                        opacity: 0.9
                    },
                    grid: {
                        padding: {
                            bottom: -4
                        },
                        borderColor: colors.gridBorder,
                        xaxis: {
                            lines: {
                                show: false
                            }
                        },
                        yaxis: {
                            lines: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: 'Clusters %',
                        data: []
                    }],
                    xaxis: {
                        categories: [],
                        axisBorder: {
                            color: 'gray',
                        },
                        axisTicks: {
                            color: 'gray',
                        },
                        labels: {
                            show: true,
                            rotate: -45,
                            style: {
                                fontSize: '10px',
                            },
                        },
                    },
                    yaxis: {
                        title: {
                            text: '',
                            style: {
                                size: 9,
                                color: 'gray'
                            }
                        },
                    },
                    legend: {
                        show: true,
                        position: "top",
                        horizontalAlign: 'center',
                    },
                    stroke: {
                        width: 0
                    },
                    dataLabels: {
                        enabled: false,
                        style: {
                            fontSize: '10px',
                        },
                    },
                    plotOptions: {
                        bar: {
                            columnWidth: "50%",
                            borderRadius: 4,
                        },
                    },
                };

                var apexBarChart = new ApexCharts(document.querySelector("#topClusters-chart"), options);
                apexBarChart.render();

                fetchClusterData();

                function fetchClusterData() {
                    $.ajax({
                        url: '/operations/fit-test/top-clusters',
                        success: function(data) {
                            apexBarChart.updateOptions({
                                series: [{
                                    data: data.series
                                }],
                                xaxis: {
                                    categories: data.labels
                                }
                            });
                        }
                    });
                }
            }
        }

        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: 'var(--blazma-primary)'
                                }
                            },
                            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', 'var(--blazma-primary)');
                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', 'var(--blazma-primary)'] // Custom colors for the segments
        };

        var chartTestsPerGender = new ApexCharts(document.querySelector("#tests-per-gender"), optionsTestsPerGender);
        chartTestsPerGender.render();


        // Tests Per Age Group Horizontal Bar Chart
        var optionsTestsPerAgeGroup = {
            colors: ['#bdecca'],
            series: [{
                data: [100, 200, 148, 400, 652]
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: false,
                }
            },
            plotOptions: {
                bar: {
                    borderRadius: 4,
                    horizontal: true,
                }
            },
            xaxis: {
                categories: ['10-20', '20-30', '30-40', '40-50', '60 above'],
            },
            yaxis: {
                title: {
                    text: ''
                }
            }
        };

        var chartTestsPerAgeGroup = new ApexCharts(document.querySelector("#tests-per-age-group"), optionsTestsPerAgeGroup);
        chartTestsPerAgeGroup.render();
    </script>
@endsection