@extends('user_dashboard.layouts.app')
@section('content')
    @push('css')
        <style>
            #chartdiv {
                width: 100%;
                height: 300px;
            }

            .progress .progress-bar {
                background-color: var(--bs-warning);
            }

        </style>
    @endpush

    <div class="rbt-breadcrumb-default rbt-breadcrumb-style-3 new-ht">
        <div class="breadcrumb-inner">
            <img src="{{ asset('frontend/images/bg/bg-image-10.jpg') }}">
        </div>
    </div>

    <div class="rbt-dashboard-area rbt-section-overlayping-top mb--50">
        @include('user_dashboard.layouts.top_bar')

        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white mb--10">
                        <div class="content">
                            <div class="row g-5">
                                <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                                    <div class="rbt-counterup variation-01 rbt-hover-03 bg-primary-opacity">
                                        <div class="inner">
                                            <div class="d-flex">
                                                <h3 class="counter without-icon color-white">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M.0022 64C.0022 46.33 14.33 32 32 32H288C305.7 32 320 46.33 320 64C320 81.67 305.7 96 288 96H231.8C241.4 110.4 248.5 126.6 252.4 144H288C305.7 144 320 158.3 320 176C320 193.7 305.7 208 288 208H252.4C239.2 266.3 190.5 311.2 130.3 318.9L274.6 421.1C288.1 432.2 292.3 452.2 282 466.6C271.8 480.1 251.8 484.3 237.4 474L13.4 314C2.083 305.1-2.716 291.5 1.529 278.2C5.774 264.1 18.09 256 32 256H112C144.8 256 173 236.3 185.3 208H32C14.33 208 .0022 193.7 .0022 176C.0022 158.3 14.33 144 32 144H185.3C173 115.7 144.8 96 112 96H32C14.33 96 .0022 81.67 .0022 64V64z" style="fill: #fff;"/></svg>
                                                     <span class="counter-box colored"> <span class="counter" data="{{ $today_earning }}">{{ $today_earning }}</span>
                                                </h3>
                                            </div>
                                            <div class="content">
                                                <span class="text-white d-block">Today's Earning</span>
                                                <div class="progress">
                                                    <div class="progress-bar" style="width: 70%"></div>
                                                </div>
                                                <small class="new-one text-white d-block">Click here to view detail(s)</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                                    <div class="rbt-counterup variation-01 rbt-hover-03 bg-secondary-opacity">
                                        <div class="inner">
                                            <div class="d-flex">
                                                <h3 class="counter without-icon color-white">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M.0022 64C.0022 46.33 14.33 32 32 32H288C305.7 32 320 46.33 320 64C320 81.67 305.7 96 288 96H231.8C241.4 110.4 248.5 126.6 252.4 144H288C305.7 144 320 158.3 320 176C320 193.7 305.7 208 288 208H252.4C239.2 266.3 190.5 311.2 130.3 318.9L274.6 421.1C288.1 432.2 292.3 452.2 282 466.6C271.8 480.1 251.8 484.3 237.4 474L13.4 314C2.083 305.1-2.716 291.5 1.529 278.2C5.774 264.1 18.09 256 32 256H112C144.8 256 173 236.3 185.3 208H32C14.33 208 .0022 193.7 .0022 176C.0022 158.3 14.33 144 32 144H185.3C173 115.7 144.8 96 112 96H32C14.33 96 .0022 81.67 .0022 64V64z" style="fill: #fff;"/></svg>
                                                    <span class="counter-box colored"> <span class="counter" data="{{ $last_week_earning}}">{{ $last_week_earning}}</span>
                                                </h3>
                                            </div>
                                            <div class="content">
                                                <span class="text-white d-block">Last 7 Days Earning</span>
                                                <div class="progress">
                                                    <div class="progress-bar" style="width: 70%; background:#eb9fd4;"></div>
                                                </div>
                                                <a class="new-one text-white d-block" href="#">Click here to view detail(s)</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                                    <div class="rbt-counterup variation-01 rbt-hover-03 bg-violet-opacity">
                                        <div class="inner">
                                            <div class="d-flex">
                                                <h3 class="counter without-icon color-white">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M.0022 64C.0022 46.33 14.33 32 32 32H288C305.7 32 320 46.33 320 64C320 81.67 305.7 96 288 96H231.8C241.4 110.4 248.5 126.6 252.4 144H288C305.7 144 320 158.3 320 176C320 193.7 305.7 208 288 208H252.4C239.2 266.3 190.5 311.2 130.3 318.9L274.6 421.1C288.1 432.2 292.3 452.2 282 466.6C271.8 480.1 251.8 484.3 237.4 474L13.4 314C2.083 305.1-2.716 291.5 1.529 278.2C5.774 264.1 18.09 256 32 256H112C144.8 256 173 236.3 185.3 208H32C14.33 208 .0022 193.7 .0022 176C.0022 158.3 14.33 144 32 144H185.3C173 115.7 144.8 96 112 96H32C14.33 96 .0022 81.67 .0022 64V64z" style="fill: #fff;"/></svg>
                                                    <span class="counter-box colored"> <span class="counter" data="{{ $last_month_earning}}">{{ $last_month_earning}}</span>
                                                </h3>
                                            </div>
                                            <div class="content">
                                                <span class="text-white d-block">Last 30 Days Earning</span>
                                                <div class="progress">
                                                    <div class="progress-bar" style="width: 70%;background:#f2b1b3;"></div>
                                                </div>
                                                <a class="new-one text-white d-block" href="#">Click here to view detail(s)</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                                    <div class="rbt-counterup variation-01 rbt-hover-03 bg-pink-opacity">
                                        <div class="inner">
                                            <div class="d-flex">
                                                <h3 class="counter without-icon color-white">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M.0022 64C.0022 46.33 14.33 32 32 32H288C305.7 32 320 46.33 320 64C320 81.67 305.7 96 288 96H231.8C241.4 110.4 248.5 126.6 252.4 144H288C305.7 144 320 158.3 320 176C320 193.7 305.7 208 288 208H252.4C239.2 266.3 190.5 311.2 130.3 318.9L274.6 421.1C288.1 432.2 292.3 452.2 282 466.6C271.8 480.1 251.8 484.3 237.4 474L13.4 314C2.083 305.1-2.716 291.5 1.529 278.2C5.774 264.1 18.09 256 32 256H112C144.8 256 173 236.3 185.3 208H32C14.33 208 .0022 193.7 .0022 176C.0022 158.3 14.33 144 32 144H185.3C173 115.7 144.8 96 112 96H32C14.33 96 .0022 81.67 .0022 64V64z" style="fill: #fff;"/></svg>
                                                    <span class="counter-box colored"> <span class="counter" data="{{Auth::guard('web')->user()->userDetail->total_commission}}">{{Auth::guard('web')->user()->userDetail->total_commission}}</span>
                                                </h3>
                                            </div>
                                            <div class="content">
                                                <span class="text-white d-block">All Time Earning</span>
                                                <div class="progress">
                                                    <div class="progress-bar" style="width: 70%;background:#a3ddeb;"></div>
                                                </div>
                                                <a class="new-one text-white d-block" href="#">Click here to view detail(s)</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="content">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="section-title">
                                        <h4 class="rbt-title-style-3">Last 7 Day Sales</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="row gy-5">
                                <div class="col-lg-12">
                                    <div class="rbt-dashboard-table table-responsive">
                                        <div dir="ltr">
                                            <div id="chartdiv"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <script>

        // Function to add commas in the Indian numbering system
        function convert(value) {
            let x = value.toString().split(".");
            let lastThree = x[0].slice(-3);
            let otherNumbers = x[0].slice(0, -3);
            if (otherNumbers !== '') {
                lastThree = ',' + lastThree;
            }
            let output = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
            if (x.length > 1) {
                output += "." + x[1];
            }
            return output;
        }

        $('.counter').each(function () {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 1500,
                easing: 'swing',
                step: function (now) {
                    $(this).text(convert(Math.ceil(now))); // Applying Indian currency formatting
                }
            });
        });

        am5.ready(function() {

            // Create root element
            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
            var root = am5.Root.new("chartdiv");

            // Set themes
            // https://www.amcharts.com/docs/v5/concepts/themes/
            root.setThemes([
                am5themes_Animated.new(root)
            ]);

            // Create chart
            // https://www.amcharts.com/docs/v5/charts/xy-chart/
            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: false,
                wheelY: false,
                layout: root.verticalLayout,
                pinchZoomX:false
            }));

            // Add cursor
            // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
            var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
                behavior: "none"
            }));
            cursor.lineY.set("visible", false);

            var colorSet = am5.ColorSet.new(root, {});

            // The data
            var data = [
                @foreach ($dates as $day_key=>$date)
                    {
                        year: '{{ $date }}',
                        value: {{$values[$day_key]}},
                        strokeSettings: {
                            stroke: colorSet.getIndex('{{$day_key}}')
                        },
                        fillSettings: {
                            fill: colorSet.getIndex('{{$day_key}}'),
                        },
                        bulletSettings: {
                            fill: colorSet.getIndex('{{$day_key}}')
                        }
                    },
                @endforeach
            ];

            // Create axes
            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
            var xRenderer = am5xy.AxisRendererX.new(root, {});
            xRenderer.grid.template.set("location", 0.5);
            xRenderer.labels.template.setAll({
                location: 0.5,
                multiLocation: 0.5
            });

            var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
                categoryField: "year",
                renderer: xRenderer,
                tooltip: am5.Tooltip.new(root, {})
            }));

            xAxis.data.setAll(data);

            var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                maxPrecision: 0,
                renderer: am5xy.AxisRendererY.new(root, {})
            }));

            var series = chart.series.push(am5xy.LineSeries.new(root, {
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "value",
                categoryXField: "year",
                tooltip: am5.Tooltip.new(root, {
                    labelText: "{valueY}",
                    dy:-5
                })
            }));

            series.strokes.template.setAll({
            templateField: "strokeSettings",
            strokeWidth: 2
            });

            series.fills.template.setAll({
                visible: true,
                fillOpacity: 0.5,
                templateField: "fillSettings"
            });

            series.bullets.push(function() {
                return am5.Bullet.new(root, {
                    sprite: am5.Circle.new(root, {
                        templateField: "bulletSettings",
                        radius: 5
                    })
                });
            });

            series.data.setAll(data);
            series.appear(1000);

            // Add scrollbar
            // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/


            // Make stuff animate on load
            // https://www.amcharts.com/docs/v5/concepts/animations/
            chart.appear(1000, 100);

        }); // end am5.ready()
    </script>
@endsection