{{--section right --}}
@php
    $global_setting = global_settings(getAuthId());
    
    $redMin = $global_setting->gs_red_min;
    $redMax = $global_setting->gs_red_max;

    $orangeMin = $global_setting->gs_orange_min;
    $orangeMax = $global_setting->gs_orange_max;

    $greenMin = $global_setting->gs_green_min;
    $greenMax = $global_setting->gs_green_max;
@endphp

<style>
    .dashboard-progress-container p {
        width: auto;
        text-align: right;
    }

    .dashboard-progress-bar{
        background-color: #e0e0e0;
        height: 18px;
        width: 100%;
        border-radius: 5px;
    }

    .dashboard-progress-bar .progress-line {
        height: 100%;
        position: relative;
        z-index: 1;
        border-radius: 5px;
        /* transition: all 0.1s ease; */
    }

    .dr-circle-preloader,
    .dr-progress-preloader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: #969696;
        animation: movebg 30s infinite;
        opacity: 1;
        background-size: auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        align-items: center;
    }

    .dr-circle-preloader img,
    .dr-progress-preloader img{
        height: 160px;
        width: 160px;
        animation: rotating 5s linear infinite;
        position: relative;
        top: 0;
    }

    .dr-progress-preloader img{
        height: 120px;
        width: 120px;
    }

    .svg-container {
        width: 100%;
        overflow-x: auto;
    }

    .svg-wrapper {
        margin: 0px auto;
        height: 350px;
    }

    text.progress-text {
        font-size: 11px;
        font-weight: bold;
    }
    .topic-btns .btn {
        min-width: 100px;
        margin: 2px auto;
    }
</style>

<div class="tab-container">
    @include('Frontend.dashboard.partials.right-dropdown-menu')
    {{-- new section strat --}}
    @if(checkDashAccess(getAuthId()) && !$data['isAppPurposeServer'])
    <div class="rightside-bottom-container position-relative">
        
        <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="polarAreaChart"></canvas>
                        @if(request()->isSvgView)
                            <svg id="mySVG" width="360" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                            
                            <g transform="scale(0.99)">
                                <circle cx="0" cy="0" r="50%" fill="#2FAB66" stroke="black" stroke-width="2"></circle>
                                <circle cx="0" cy="0" r="{{ $global_setting->gs_orange_max/2 }}%" fill="#F8B133" stroke="black" stroke-width="2"></circle>
                                <circle cx="0" cy="0" r="{{ $global_setting->gs_red_max/2 }}%" fill="#E84E1B" stroke="black" stroke-width="2"></circle>
                            
                                <!-- Plus Sign -->
                                <line x1="0" y1="-200" x2="0" y2="200" stroke="black" stroke-width="1"></line>
                                <line x1="-200" y1="0" x2="200" y2="0" stroke="black" stroke-width="1"></line>
                            
                                <!-- Text Labels -->
                                <text x="-150" y="-180" text-anchor="middle" fill="#4E5155" font-size="20">{{ trans('action.dash_chart_top_left') }}</text>
                                <text x="150" y="-180" text-anchor="middle" fill="#4E5155" font-size="20">{{ trans('action.dash_chart_top_right') }}</text>
                                <text x="-240" y="180" text-anchor="start" fill="#4E5155" font-size="20">{{ trans('action.dash_chart_bottom_left') }}</text>
                                <text x="200" y="180" text-anchor="end" fill="#4E5155" font-size="20">{{ trans('action.dash_chart_bottom_right') }}</text>
                            </g>
                            
                            </svg>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body position-relative">
                <div class="dr-progress-preloader"> <img src="{!! asset('images/Fill-4.png') !!}" alt=""></div>
                <div class="square-progress-container">
                    <div class="dashboard-progress-container first-progress d-flex justify-content-center align-items-center mb-1">
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <p class="m-0">{{ trans('action.dash_progress_name_one') }}</p>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <svg width="100%" height="18">
                                <!-- Background Rectangle -->
                                <rect x="0" y="0" width="100%" height="18" fill="#e0e0e0" rx="5" ry="5" />
                                
                                <!-- Progress Rectangle -->
                                <rect x="0" y="0" width="0%" height="18" fill="#4CAF50" rx="5" ry="5" />

                                <text x="0%" y="55%" class="progress-text" dominant-baseline="middle" text-anchor="start" fill="#ffffff">
                                </text>
                            </svg>
                        </div>
                    </div>

                    <div class="dashboard-progress-container second-progress d-flex justify-content-center align-items-center mb-1">
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <p class="m-0">{{ trans('action.dash_progress_name_two') }}</p>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <svg width="100%" height="18">
                                <!-- Background Rectangle -->
                                <rect x="0" y="0" width="100%" height="18" fill="#e0e0e0" rx="5" ry="5" />
                                
                                <!-- Progress Rectangle -->
                                <rect x="0" y="0" width="0%" height="18" fill="#4CAF50" rx="5" ry="5" />

                                <text x="0%" y="55%" class="progress-text" dominant-baseline="middle" text-anchor="start" fill="#ffffff">
                                </text>
                            </svg>
                        </div>
                    </div>

                    <div class="dashboard-progress-container third-progress d-flex justify-content-center align-items-center mb-1">
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <p class="m-0">{{ trans('action.dash_progress_name_three') }}</p>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <svg width="100%" height="18">
                                <!-- Background Rectangle -->
                                <rect x="0" y="0" width="100%" height="18" fill="#e0e0e0" rx="5" ry="5" />
                                
                                <!-- Progress Rectangle -->
                                <rect x="0" y="0" width="0%" height="18" fill="#4CAF50" rx="5" ry="5" />

                                <text x="0%" y="55%" class="progress-text" dominant-baseline="middle" text-anchor="start" fill="#ffffff">
                                </text>
                            </svg>
                        </div>
                    </div>

                    <div class="dashboard-progress-container fourth-progress d-flex justify-content-center align-items-center mb-1">
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <p class="m-0">{{ trans('action.dash_progress_name_four') }}</p>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <svg width="100%" height="18">
                                <!-- Background Rectangle -->
                                <rect x="0" y="0" width="100%" height="18" fill="#e0e0e0" rx="5" ry="5" />
                                
                                <!-- Progress Rectangle -->
                                <rect x="0" y="0" width="0%" height="18" fill="#4CAF50" rx="5" ry="5" />

                                <text x="0%" y="55%" class="progress-text" dominant-baseline="middle" text-anchor="start" fill="#ffffff">
                                </text>
                            </svg>
                        </div>
                    </div>

                    <div class="dashboard-progress-container fifth-progress d-flex justify-content-center align-items-center mb-1">
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <p class="m-0">{{ trans('action.dash_progress_name_five') }}</p>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <svg width="100%" height="18">
                                <!-- Background Rectangle -->
                                <rect x="0" y="0" width="100%" height="18" fill="#e0e0e0" rx="5" ry="5" />
                                
                                <!-- Progress Rectangle -->
                                <rect x="0" y="0" width="0%" height="18" fill="#4CAF50" rx="5" ry="5" />

                                <text x="0%" y="55%" class="progress-text" dominant-baseline="middle" text-anchor="start" fill="#ffffff">
                                </text>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
<script>
    
    function display (seconds) {
        const format = val => `0${Math.floor(val)}`.slice(-2)
        const hours = seconds / 3600
        const minutes = (seconds % 3600) / 60

        return [minutes, seconds % 60].map(format).join(':')
    }
    $("#select-box_change_view").click(function() {
        $("#topic_button").removeClass("dashActive_btn");
        $("#select-box_change_view").addClass("dashSelectActive_btn");
    });

    $('#select-box_change_view').change(function () {
        $("#topic_button").removeClass("dashActive_btn");
        dropdown = $('#select-box_change_view').val();
        $('#topicTab').hide();
        $('.tab-content').hide();
        $('#' + "tab-" + dropdown).show();
        $( "#select-box_change_view option[value='0']" ).hide();
    });

    $('#topic_button').click(function () {
        $("#select-box_change_view").removeClass("dashSelectActive_btn");
        $( "#select-box_change_view option[value='0']" ).show();
        $('.tab-content').hide();
        $("#select-box_change_view").find('option:selected').prop("selected", false);
        $("#topic_button").addClass("dashActive_btn");
        $('#topicTab').show();
    });

</script>

@if(checkDashAccess(getAuthId()) && !$data['isAppPurposeServer'])
    <script>
        $(document).ready(function() {
            const user_id = "{{($data['userDetails']!=null) ? $data['userDetails']->id : getUserDetails()->id}}"
            const topic = $('#own_topic').text() || '';
            const calForMonth = $('#changeYearMonth').is(':checked');
            const url = `${window.location.origin}/api/get_analysis_with_sorting_calculations?user=${user_id}&topic=${topic}&cal_for_month=${calForMonth}`;
            const urlForProgressbar = url; // because we need the same data for the progress bar

            setTimeout(function() {

                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function(data) {
                        let labels = [];
                        let chartData = [];
                        let backgroundColor = [];
                        const colors = {
                            '#F8B133': "rgba(248, 177, 51, 0.75)",
                            '#2FAB66': "rgba(47, 171, 102, 0.73)",
                            '#E84E1B': "rgba(232, 78, 27, 0.75)",
                        };
                        let textsArray = data.labels;
                        data.results.forEach(function(ana,index) {
                            labels.push(textsArray[index]);
                            chartData.push(ana.val);
                            backgroundColor.push(colors[ana.color]);
                        });

                        // Create the chart after fetching the data
                        createPolarAreaChart(labels, chartData, backgroundColor);

                        $('.dr-circle-preloader').hide();
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });

                $.ajax({
                    url: urlForProgressbar,
                    headers: { 'Progressbar': '1' },
                    method: 'GET',
                    success: function(data) {
                        const redMax = {{ $redMax }};
                        const orangeMax = {{ $orangeMax }};
                        let analyses_value = {};

                        data.results.forEach(function(ana) {
                            analyses_value[ana.name] = ana.val;
                        });

                        $('.first-progress svg rect:eq(1)').attr({
                            width: `${analyses_value['Geist-Ebene']}%`,
                            fill: (analyses_value['Geist-Ebene'] <= redMax) ? "#E84E1B" : (analyses_value['Geist-Ebene'] <= orangeMax) ? "#F8B133" : "#2FAB66"
                        });

                        $('.first-progress svg .progress-text').text(`${analyses_value['Geist-Ebene']}%`);
                        $('.first-progress svg .progress-text').attr("x", `${analyses_value['Geist-Ebene'] / 2}%`);

                        $('.second-progress svg rect:eq(1)').attr({
                            width: `${analyses_value['Emotional-Ebene']}%`,
                            fill: (analyses_value['Emotional-Ebene'] <= redMax) ? "#E84E1B" : (analyses_value['Emotional-Ebene'] <= orangeMax) ? "#F8B133" : "#2FAB66"
                        });

                        $('.second-progress svg .progress-text').text(`${analyses_value['Emotional-Ebene']}%`);
                        $('.second-progress svg .progress-text').attr("x", `${analyses_value['Emotional-Ebene'] / 2}%`);

                        $('.third-progress svg rect:eq(1)').attr({
                            width: `${analyses_value['Mental-Ebene']}%`,
                            fill: (analyses_value['Mental-Ebene'] <= redMax) ? "#E84E1B" : (analyses_value['Mental-Ebene'] <= orangeMax) ? "#F8B133" : "#2FAB66"
                        });

                        $('.third-progress svg .progress-text').text(`${analyses_value['Mental-Ebene']}%`);
                        $('.third-progress svg .progress-text').attr("x", `${analyses_value['Mental-Ebene'] / 2}%`);

                        $('.fourth-progress svg rect:eq(1)').attr({
                            width: `${analyses_value['Biochemie-Ebene']}%`,
                            fill: (analyses_value['Biochemie-Ebene'] <= redMax) ? "#E84E1B" : (analyses_value['Biochemie-Ebene'] <= orangeMax) ? "#F8B133" : "#2FAB66"
                        });

                        $('.fourth-progress svg .progress-text').text(`${analyses_value['Biochemie-Ebene']}%`);
                        $('.fourth-progress svg .progress-text').attr("x", `${analyses_value['Biochemie-Ebene'] / 2}%`);

                        $('.fifth-progress svg rect:eq(1)').attr({
                            width: `${analyses_value['Körper-Ebene']}%`,
                            fill: (analyses_value['Körper-Ebene'] <= redMax) ? "#E84E1B" : (analyses_value['Körper-Ebene'] <= orangeMax) ? "#F8B133" : "#2FAB66"
                        });

                        $('.fifth-progress svg .progress-text').text(`${analyses_value['Körper-Ebene']}%`);
                        $('.fifth-progress svg .progress-text').attr("x", `${analyses_value['Körper-Ebene'] / 2}%`);
                        
                        $('.dr-progress-preloader').hide();
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });

            }, 15);
        });

        function createPolarAreaChart(labels, chartData, backgroundColor) {
            const labelsWithValue = labels.map((label, index) => `${label}: ${chartData[index]}`);
            const data = {
                labels: labelsWithValue,
                datasets: [
                    {
                        data: chartData,
                        backgroundColor: backgroundColor,
                    },
                ],
            };

            const config = {
                type: 'polarArea',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false, // Disable aspect ratio                    
                    scales: {
                        r: {
                            pointLabels: {
                                display: true,
                                centerPointLabels: true,
                                font: {
                                    size: 18
                                }
                            }
                        }
                    },
                    
                    plugins: {
                        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',
                            },
                        },
                    },
                },
            };

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

    </script>
@endif