@php
    $haveWidgetInCart = Cart::instance('wishlist')->content()->where('options.type_id', \App\Enums\CausesType::Dashboard_widget)->count() > 0 ? true : false;
@endphp
<div class="dash-chart">
    <style>
        .dash-chart {
            background-color: #fff;
            margin-bottom: 25px;
            box-shadow: 0 1px 4px rgba(24, 28, 33, 0.012);
            border: 1px solid rgba(24, 28, 33, 0.06);
            border-radius: 5px;
        }

        .dash-chart .card {
            margin-bottom: 0px !important;
            box-shadow: none;
            border: none;
        }

        .dash-chart .svg-wrapper {
            display: flex;
            align-items: center;
        }
    </style>
    <div class="row">
        @if(isSetupDiagram()->pool_id)
        <div class="col-md-{{isSetupDiagram()->bar_chart_pool_id && isSetupDiagram()->pool_id ? 6 : 12}}">
            <div class="card mb-4">
                <div class="card-body chart-card">
                    <div style="float:right" id="select_btn_widgetredval">
                        @if(!$haveWidgetInCart)
                        <i class="fas fa-plus-circle f-22 text-danger" id="btn_widgetredval" data-toggle="tooltip"
                            data-placement="bottom" data-state="danger" title="{{__('action.add_all_red_values_to_cart')}}"
                            onclick="addRedValuesFromWidget(event)" data-original-title="Add all red values to cart.">
                        </i>
                        @else
                        <i class="fas fa-check-circle f-22 text-danger" id="btn_widgetredval"></i>
                        @endif
                    </div>
                    <div class="dr-circle-preloader"> <img src="{!! asset('images/Fill-4.png') !!}" alt=""></div>
                    <div class="svg-container">
                        <div class="svg-wrapper" >
                            <canvas id="dashboardWidgetChart" data-pool-id="{{ isSetupDiagram()->pool_id }}"
                                data-diagram-type="{{isSetupDiagram()->diagram_type}}"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        @if(isSetupDiagram()->bar_chart_pool_id)
            <div class="col-md-{{isSetupDiagram()->bar_chart_pool_id && isSetupDiagram()->pool_id ? 6 : 12}}">
                <div class="card mb-4">
                    <div class="card-body chart-card">
                        <div class="dr-circle-preloader"> <img src="{!! asset('images/Fill-4.png') !!}" alt=""></div>
                        <div class="svg-container">
                            <div class="svg-wrapper" >
                                <canvas id="dashboardBarChart" data-pool-id="{{ isSetupDiagram()->bar_chart_pool_id }}"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
<script>
    var redValues = [];
    var chatRedValues = [];

    $(document).ready(function() {
        $.when(loadWidgetChart(), loadBarChart()).then(function() {
        // Code to execute when both functions are completed
        });
    });

    function createDashboardWidgetChart(diagramType, labels, groupedByColor) {
        // Your existing dataset values
        /* revert is disabled
        const invertedValues = groupedByColor.map(value => 100 - value);
         */
            const data = {
                labels: labels,
                datasets: [{
                    data: groupedByColor, // data:invertedValues //revert is disabled
                    fill: true,
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgba(22, 147, 166, 1)',
                    pointBackgroundColor: 'rgb(54, 162, 235)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(54, 162, 235)',
                    pointRadius: 5
                }]
            };
            const config = {
                type: diagramType,
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            beginAtZero: true,
                            min:0,
                            max: 100,
                            ticks: {
                                stepSize: 10,
                                reverse: false // Do not invert the scale
                            },
                            pointLabels: {
                                display: true,

                                font: {
                                    size: 18
                                }
                            }
                        }
                     
                    },
                    plugins: {
                        centerLabel: {
                            text: '', // Your custom label
                                font: {
                                    size: 20,
                                
                                },
                        },
                        legend: {
                            display: false, // Hide the legend
                            position: 'top',
                        },
                        title: {
                            display: false,
                            text: 'Polar Area Chart',
                        },
                        zoom: {
                            pan: {
                                enabled: true,
                                mode: 'xy',
                            },
                            zoom: {
                                enabled: true,
                                mode: 'xy',
                            },
                        },
                    },
                },
                plugins: [{
                    beforeDatasetDraw: function (chart) {
                        var centerLabel = chart.config.options.plugins.centerLabel;
                        var ctx = chart.ctx;
                        var centerX = chart.width / 2;
                        var centerY = chart.height / 2;

                        ctx.save();
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.font = centerLabel.font.size + 'px Arial';
                        ctx.fillStyle = 'black'; // Set your desired color

                        ctx.fillText(centerLabel.text, centerX, centerY);

                        ctx.restore();
                    }
                }]
            };

            const ctx = document.getElementById('dashboardWidgetChart').getContext('2d');
            const chart = new Chart(ctx, config);

    }

    function addRedValuesFromWidget(event) {
      
           Swal.fire({
            title: `{{__('action.Are_you_sure?')}}`,
            text: `{{__('action.all_red_values')}}`,
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#fb0404',
            cancelButtonColor: '#d33',
            confirmButtonText:  `{{__('action.yes')}}`,
            cancelButtonText: `{{__('action.cancel')}}`
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('dashboard.add-red-values-from-widget') }}",
                    data: {
                        redValues:redValues,
                        type:7,
                    },
                    success: function(res) {
                        Swal.close();
                        if(res.status == true) {
                            
                            $('#btn_widgetredval').removeAttr("onclick", "");
                            $('#btn_widgetredval').removeClass('fa-plus-circle').addClass('fa-check-circle')
                            let dataShow = "";
                            res.data.forEach(function(value) {
                            $(".temp_"+value.analysisID).find('a').remove();
                            $(".temp_"+value.analysisID).append(`<i class="fas fa-check-circle primary-color f-18"></i>`);
                            dataShow += `<li class="rem_${value.cart_id}">
                                <div>
                                    <p data-cartprice="${value.price}"><a href="">${value.minute} &nbsp;&nbsp;&nbsp;${value.analysisName}</a></p>
                                </div>
                                <div class="treatment-list-icon">
                                    <a href="javascript:void(0)" onclick="removeCid('${value.cart_id}','${value.type}',${value.analysisID})"> <i
                                            class="fas fa-times-circle danger-color"></i></a>
                            
                                </div>
                            </li>`;
                            });
                            cartCount = res.data.length + parseInt($("#cardValue").text())

                            $(".treatment-list" ).append(dataShow);
                            $('.cartContent').trigger('click');
                            $("#cardValue").text(cartCount);
                            $("#shoppingCart").show();
                            toastr.success(`{{__('action.added_successfully')}}`);
                        } else if(res.success == false){
                            Swal.fire({                        
                                title: res._alert,
                                html: res.message,
                                type: res._alert_type,
                                showCancelButton: false,
                                confirmButtonColor: '#fb0404',
                                cancelButtonColor: '#d33'

                            })
                        } else {
                            toastr.success(res.msg);
                        }
                    }
                });
            }
        })
    }

    async function loadWidgetChart() {
        var canvas = document.getElementById('dashboardWidgetChart');
        if (canvas) {
            var poolId = canvas.dataset.poolId;
            var diagramType = canvas.dataset.diagramType;
            var dashboardWidgetUrl = "{{ route('dashboard.get-dashboard-widget') }}";

            try {
                var data = await $.ajax({
                    url: dashboardWidgetUrl,
                    method: 'GET',
                    data: {
                        pool_id: poolId,
                        diagram_type: diagramType,
                    },
                });

                let labels = data.labels;
                let datasets = data.results;
                redValues = data.redValues;

                createDashboardWidgetChart(diagramType, labels, datasets);
                $('.dr-circle-preloader').hide();
                redValues.length <= 0 ? $('#select_btn_widgetredval').css('display', 'none') : $('#select_btn_widgetredval').css('display', 'block');
            } catch (error) {
                console.error(error);
            }
        }
    }

    async function loadBarChart() {
        var canvas = document.getElementById('dashboardBarChart');
        if (canvas) {
            var poolId = canvas.dataset.poolId;
            var dashboardWidgetUrl = "{{ route('dashboard.get-dashboard-widget') }}";

            try {
                var data = await $.ajax({
                    url: dashboardWidgetUrl,
                    method: 'GET',
                    data: {
                        pool_id: poolId,
                        diagram_type: 'bar',
                    },
                });

                let labels = data.labels;
                let datasets = data.results;
                chatRedValues = data.redValues;

                createDashBoardBarChart(labels, datasets);
                $('.dr-circle-preloader').hide();
                // chatRedValues.length <= 0 ? $('#select_btn_widgetredval').css('display', 'none') : $('#select_btn_widgetredval').css('display', 'block');
            } catch (error) {
                console.error(error);
            }
        }
    }

    function createDashBoardBarChart(labels,datasets) {
        /* revert is disabled
        const invertedValues = datasets.map(value => 100 - value)"
         */
        const data = {
        labels: labels,
        datasets: [{
            // data: invertedValues, //revert is disabled
            data: datasets,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(201, 203, 207, 0.2)'
            ],
            borderColor: [
                'rgb(255, 99, 132)',
                'rgb(255, 159, 64)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(54, 162, 235)',
                'rgb(153, 102, 255)',
                'rgb(201, 203, 207)'
            ],
            borderWidth: 1
        }]
        };
        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        min:0,
                        max: 100,
                        ticks: {
                            stepSize: 10,
                            reverse: false // Do not invert the scale
                        },
                        pointLabels: {
                            display: true,

                            font: {
                                size: 18
                            }
                        }
                    }
                },
                   plugins: {
                        legend: {
                            display: false, // Hide the legend
                            position: 'top',
                        },
                        zoom: {
                            pan: {
                                enabled: true,
                                mode: 'xy',
                            },
                            zoom: {
                                enabled: true,
                                mode: 'xy',
                            },
                        },
                    },
            },
        };
        const ctx = document.getElementById('dashboardBarChart').getContext('2d');
        const chart = new Chart(ctx, config);
    }
</script>