@extends('admin.layouts.app')
@section('content')
    <style>
        .bg-info {
            background: linear-gradient(45deg,#4099ff,#73b4ff);
        }
        .bg-success {
            background: linear-gradient(45deg,#2ed8b6,#59e0c5);
        }
        .bg-warning {
            background: linear-gradient(45deg,#FFB64D,#ffcb80);
        }
        .bg-danger {
            background: linear-gradient(45deg,#FF5370,#ff869a);
        }
        .bg-secondary {
            background: linear-gradient(45deg,#6c757d ,#887777);
        }
        #chartdiv {
            width: 100%;
            height: 400px;
        }
        #chartdiv1 {
            width: 100%;
            height: 400px;
        }
        #chartdiv2 {
            width: 100%;
            height: 400px;
        }
        #chartdiv3 {
            width: 100%;
            height: 400px;
        }
        #chartdiv4 {
            width: 100%;
            height: 400px;
        }
    </style>
    <div class="preloader flex-column justify-content-center align-items-center">
        {{-- <img class="animation__shake" src="{{ asset('backend/img/logo.png') }}" alt="{{env('APP_NAME')}} Logo"> --}}
    </div>

    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">
                                @isset($page_title)
                                    {{ $page_title }}
                                @endisset
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    @can('dashboard-total-customer-count')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{$customers}}</h3>
                                    <p>Customers</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-users"></i>
                                </div>
                                <a href="{{route('admin.customers')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('dashboard-total-associate-count')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{$associates}}</h3>
                                    <p>Associates</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <a href="{{route('admin.associates')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('dashboard-total-property-count')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>{{$properties}}</h3>
                                    <p>Properties</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-building"></i>
                                </div>
                                <a href="{{route('admin.property.index')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('dashboard-total-payment-collection')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    <h3>{{$installments}}</h3>
                                    <p>Payment Collection</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-money-bill-alt"></i>
                                </div>
                                <a href="{{route('admin.property.index')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endcan
                    @can('dashboard-total-commission-distributed')
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-secondary">
                                <div class="inner">
                                    <h3>{{$commissions}}</h3>
                                    <p>Commission Distributed</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-handshake"></i>
                                </div>
                                <a href="{{route('admin.property.index')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endcan
                </div>
                <div class="row">
                    @can('dashboard-property-status-graph')
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header text-center"><h3>Property Status</h3></div>
                                <div class="card-body">
                                    <div id="chartdiv"></div>
                                </div>
                            </div>
                        </div>
                    @endcan
                    @can('dashboard-6-month-payment-collection-graph')
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header text-center"><h3>Last 6 Month Payment Collection</h3></div>
                                <div class="card-body">
                                    <div id="chartdiv1"></div>
                                </div>
                            </div>
                        </div>
                    @endcan
                    @can('dashboard-6-month-commission-distributed-graph')
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header text-center"><h3>Last 6 Month Commission Distributed</h3></div>
                                <div class="card-body">
                                    <div id="chartdiv2"></div>
                                </div>
                            </div>
                        </div>
                    @endcan
                    @can('dashboard-6-month-customer/assocaite')
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header text-center"><h3>Last 6 Month Customer/Associate</h3></div>
                                <div class="card-body">
                                    <div id="chartdiv3"></div>
                                </div>
                            </div>
                        </div>
                    @endcan
                    @can('dashboard-level-wise-assocaite')
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header text-center"><h3>Level Wise Associate</h3></div>
                                <div class="card-body">
                                    <div id="chartdiv4"></div>
                                </div>
                            </div>
                        </div>
                    @endcan
                </div>
            </div>
        </section>
    </div>

    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/percent.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>
        am5.ready(function() {

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

            // Create custom theme
            // https://www.amcharts.com/docs/v5/concepts/themes/#Quick_custom_theme
            var myTheme = am5.Theme.new(root);
            myTheme.rule("Label").set("fontSize", "0.8em");

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

            // Create wrapper container
            var container = root.container.children.push(am5.Container.new(root, {
                width: am5.p100,
                height: am5.p100,
                layout: root.horizontalLayout
            }));

            // Create first chart
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
            var chart0 = container.children.push(am5percent.PieChart.new(root, {
                innerRadius: am5.p50,
                tooltip: am5.Tooltip.new(root, {})
            }));

            // Create series
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
            var series0 = chart0.series.push(am5percent.PieSeries.new(root, {
                valueField: "value",
                categoryField: "category",
                alignLabels: false
            }));

            series0.labels.template.setAll({
                textType: "circular",
                templateField: "dummyLabelSettings"
            });

            series0.ticks.template.set("forceHidden", true);

            var sliceTemplate0 = series0.slices.template;
            sliceTemplate0.setAll({
                draggable: true,
                templateField: "settings",
                cornerRadius: 5
            });

            // Separator line
            container.children.push(am5.Line.new(root, {
                layer: 1,
                height: am5.percent(60),
                y: am5.p50,
                centerY: am5.p50,
                strokeDasharray: [4, 4],
                stroke: root.interfaceColors.get("alternativeBackground"),
                strokeOpacity: 0.5
            }));

            // Label
            container.children.push(am5.Label.new(root, {
                layer: 1,
                text: "Drag slices over the line",
                y: am5.p50,
                textAlign: "center",
                rotation: -90,
                isMeasured: false
            }));

            // Create second chart
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
            var chart1 = container.children.push(am5percent.PieChart.new(root, {
                innerRadius: am5.p50,
                tooltip: am5.Tooltip.new(root, {})
            }));

            // Create series
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
            var series1 = chart1.series.push(am5percent.PieSeries.new(root, {
                valueField: "value",
                categoryField: "category",
                alignLabels: false
            }));

            series1.labels.template.setAll({
                textType: "circular",
                radius: 20,
                templateField: "dummyLabelSettings"
            });

            series1.ticks.template.set("forceHidden", true);

            var sliceTemplate1 = series1.slices.template;
            sliceTemplate1.setAll({
                draggable: true,
                templateField: "settings",
                cornerRadius: 5
            });

            var previousDownSlice;

            // change layers when down
            sliceTemplate0.events.on("pointerdown", function (e) {
                if (previousDownSlice) {
                    //  previousDownSlice.set("layer", 0);
                }
                e.target.set("layer", 1);
                previousDownSlice = e.target;
            });

            sliceTemplate1.events.on("pointerdown", function (e) {
                if (previousDownSlice) {
                    // previousDownSlice.set("layer", 0);
                }
                e.target.set("layer", 1);
                previousDownSlice = e.target;
            });

            // when released, do all the magic
            sliceTemplate0.events.on("pointerup", function (e) {
                series0.hideTooltip();
                series1.hideTooltip();

                var slice = e.target;
                if (slice.x() > container.width() / 4) {
                    var index = series0.slices.indexOf(slice);
                    slice.dataItem.hide();

                    var series1DataItem = series1.dataItems[index];
                    series1DataItem.show();
                    series1DataItem.get("slice").setAll({ x: 0, y: 0 });

                    handleDummy(series0);
                    handleDummy(series1);
                } else {
                    slice.animate({
                    key: "x",
                    to: 0,
                    duration: 500,
                    easing: am5.ease.out(am5.ease.cubic)
                    });
                    slice.animate({
                    key: "y",
                    to: 0,
                    duration: 500,
                    easing: am5.ease.out(am5.ease.cubic)
                    });
                }
            });

            sliceTemplate1.events.on("pointerup", function (e) {
                var slice = e.target;

                series0.hideTooltip();
                series1.hideTooltip();

                if (slice.x() < container.width() / 4) {
                    var index = series1.slices.indexOf(slice);
                    slice.dataItem.hide();

                    var series0DataItem = series0.dataItems[index];
                    series0DataItem.show();
                    series0DataItem.get("slice").setAll({ x: 0, y: 0 });

                    handleDummy(series0);
                    handleDummy(series1);
                } else {
                    slice.animate({
                    key: "x",
                    to: 0,
                    duration: 500,
                    easing: am5.ease.out(am5.ease.cubic)
                    });
                    slice.animate({
                    key: "y",
                    to: 0,
                    duration: 500,
                    easing: am5.ease.out(am5.ease.cubic)
                    });
                }
            });

            // data
            var data = [
                {
                    category: "Dummy",
                    value: 1000,
                    settings: {
                    fill: am5.color(0xdadada),
                    stroke: am5.color(0xdadada),
                    fillOpacity: 0.3,
                    strokeDasharray: [4, 4],
                    tooltipText: null,
                    draggable: false
                    },
                    dummyLabelSettings: {
                    forceHidden: true
                    }
                },
                {
                    category: "Hold",
                    value: {{$hold_properties}}
                },
                {
                    category: "Reserved",
                    value: {{$reserved_properties}}
                },
                {
                    category: "Booked",
                    value: {{$booked_properties}}
                },
                {
                    category: "Available",
                    value: {{$available_properties}}
                }
            ];

            // show/hide dummy slice depending if there are other visible slices
            function handleDummy(series) {
                // count visible data items
                var visibleCount = 0;
                am5.array.each(series.dataItems, function (dataItem) {
                    if (!dataItem.isHidden()) {
                    visibleCount++;
                    }
                });
                // if all hidden, show dummy
                if (visibleCount == 0) {
                    series.dataItems[0].show();
                } else {
                    series.dataItems[0].hide();
                }
            }

            // set data
            series0.data.setAll(data);
            series1.data.setAll(data);

            // hide all except dummy
            am5.array.each(series1.dataItems, function (dataItem) {
                if (dataItem.get("category") != "Dummy") {
                    dataItem.hide(0);
                }
            });

            // hide dummy
            series0.dataItems[0].hide(0);

            // reveal container
            container.appear(1000, 100);






            var root = am5.Root.new("chartdiv1");


            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: "panX",
                wheelY: "zoomX",
                pinchZoomX: true
            }));

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


            // Create axes
            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
            var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
                xRenderer.labels.template.setAll({
                rotation: -90,
                centerY: am5.p50,
                centerX: am5.p100,
                paddingRight: 15
            });

            xRenderer.grid.template.setAll({
                location: 1
            })

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

            var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                maxDeviation: 0.3,
                renderer: am5xy.AxisRendererY.new(root, {
                    strokeOpacity: 0.1
                })
            }));


            // Create series
            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
            var series = chart.series.push(am5xy.ColumnSeries.new(root, {
                name: "Series 1",
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "value",
                sequencedInterpolation: true,
                categoryXField: "country",
                tooltip: am5.Tooltip.new(root, {
                    labelText: "{valueY}"
                })
            }));

            series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
                series.columns.template.adapters.add("fill", function(fill, target) {
                return chart.get("colors").getIndex(series.columns.indexOf(target));
            });

            series.columns.template.adapters.add("stroke", function(stroke, target) {
                return chart.get("colors").getIndex(series.columns.indexOf(target));
            });


            // Set data
            var data = [
                @foreach ($month_names as $m_key=>$month_name)
                    {
                        country: "{{$month_name}}",
                        value: {{$month_payments[$m_key]}}
                    },
                @endforeach
            ];

            xAxis.data.setAll(data);
            series.data.setAll(data);


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










            var root = am5.Root.new("chartdiv2");


            var chart2 = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: "panX",
                wheelY: "zoomX",
                pinchZoomX: true
            }));

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


            // Create axes
            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
            var xRenderer1 = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
                xRenderer1.labels.template.setAll({
                rotation: -90,
                centerY: am5.p50,
                centerX: am5.p100,
                paddingRight: 15
            });

            xRenderer1.grid.template.setAll({
                location: 1
            })

            var xAxis = chart2.xAxes.push(am5xy.CategoryAxis.new(root, {
                maxDeviation: 0.3,
                categoryField: "country",
                renderer: xRenderer1,
                tooltip: am5.Tooltip.new(root, {})
            }));

            var yAxis = chart2.yAxes.push(am5xy.ValueAxis.new(root, {
                maxDeviation: 0.3,
                renderer: am5xy.AxisRendererY.new(root, {
                    strokeOpacity: 0.1
                })
            }));


            // Create series
            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
            var series2 = chart2.series.push(am5xy.ColumnSeries.new(root, {
                name: "Series 2",
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "value",
                sequencedInterpolation: true,
                categoryXField: "country",
                tooltip: am5.Tooltip.new(root, {
                    labelText: "{valueY}"
                })
            }));

            series2.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
                series2.columns.template.adapters.add("fill", function(fill, target) {
                return chart2.get("colors").getIndex(series2.columns.indexOf(target));
            });

            series2.columns.template.adapters.add("stroke", function(stroke, target) {
                return chart2.get("colors").getIndex(series2.columns.indexOf(target));
            });


            // Set data
            var data = [
                @foreach ($month_names as $m_key=>$month_name)
                    {
                        country: "{{$month_name}}",
                        value: {{$month_commissions[$m_key]}}
                    },
                @endforeach
            ];

            xAxis.data.setAll(data);
            series2.data.setAll(data);


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











            var root = am5.Root.new("chartdiv3");

            // 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 chart3 = root.container.children.push(am5xy.XYChart.new(root, {
                panX: false,
                panY: false,
                wheelX: "panX",
                wheelY: "zoomX",
                layout: root.verticalLayout
            }));

            // Add legend
            // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
            var legend = chart3.children.push(
                am5.Legend.new(root, {
                    centerX: am5.p50,
                    x: am5.p50
                })
            );

            var data = [
                @foreach ($month_names as $m_key=>$month_name)
                    {
                        "year": "{{$month_name}}",
                        "customer": {{$month_customers[$m_key]}},
                        "associate": {{$month_associates[$m_key]}}
                    },
                @endforeach
            ]

            // Create axes
            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
            var xRenderer = am5xy.AxisRendererX.new(root, {
                cellStartLocation: 0.1,
                cellEndLocation: 0.9
            })

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

            xRenderer.grid.template.setAll({
                location: 1
            })

            xAxis.data.setAll(data);

            var yAxis = chart3.yAxes.push(am5xy.ValueAxis.new(root, {
                renderer: am5xy.AxisRendererY.new(root, {
                    strokeOpacity: 0.1
                })
            }));

            // Add series
            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
            function makeSeries(name, fieldName) {
                var series3 = chart3.series.push(am5xy.ColumnSeries.new(root, {
                    name: name,
                    xAxis: xAxis,
                    yAxis: yAxis,
                    valueYField: fieldName,
                    categoryXField: "year"
                }));

                series3.columns.template.setAll({
                    tooltipText: "{name}, {categoryX}:{valueY}",
                    width: am5.percent(90),
                    tooltipY: 0,
                    strokeOpacity: 0
                });

                series3.data.setAll(data);

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

                series3.bullets.push(function() {
                    return am5.Bullet.new(root, {
                        locationY: 0,
                        sprite: am5.Label.new(root, {
                            text: "{valueY}",
                            fill: root.interfaceColors.get("alternativeText"),
                            centerY: 0,
                            centerX: am5.p50,
                            populateText: true
                        })
                    });
                });

                legend.data.push(series3);
            }

            makeSeries("Customer", "customer");
            makeSeries("Associate", "associate");

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











            var root = am5.Root.new("chartdiv4");


            var chart4 = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: "panX",
                wheelY: "zoomX",
                pinchZoomX: true
            }));

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


            // Create axes
            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
            var xRenderer4 = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
                xRenderer4.labels.template.setAll({
                rotation: -90,
                centerY: am5.p50,
                centerX: am5.p100,
                paddingRight: 15
            });

            xRenderer4.grid.template.setAll({
                location: 1
            })

            var xAxis = chart4.xAxes.push(am5xy.CategoryAxis.new(root, {
                maxDeviation: 0.3,
                categoryField: "country",
                renderer: xRenderer4,
                tooltip: am5.Tooltip.new(root, {})
            }));

            var yAxis = chart4.yAxes.push(am5xy.ValueAxis.new(root, {
                maxDeviation: 0.3,
                renderer: am5xy.AxisRendererY.new(root, {
                    strokeOpacity: 0.1
                })
            }));


            // Create series
            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
            var series4 = chart4.series.push(am5xy.ColumnSeries.new(root, {
                name: "Series 4",
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "value",
                sequencedInterpolation: true,
                categoryXField: "country",
                tooltip: am5.Tooltip.new(root, {
                    labelText: "{valueY}"
                })
            }));

            series4.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
                series4.columns.template.adapters.add("fill", function(fill, target) {
                return chart4.get("colors").getIndex(series4.columns.indexOf(target));
            });

            series4.columns.template.adapters.add("stroke", function(stroke, target) {
                return chart4.get("colors").getIndex(series4.columns.indexOf(target));
            });


            // Set data
            var data = [
                @foreach ($level_associates as $m_key=>$level_associate)
                    {
                        country: "{{$m_key}}",
                        value: {{$level_associate}}
                    },
                @endforeach
            ];

            xAxis.data.setAll(data);
            series4.data.setAll(data);


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

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

@endsection