@extends('master')
@section('title', 'Dashboard')
@section('header-konten')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Halaman - <span class="fw-normal">Dashboard</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="/" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <span class="breadcrumb-item active">Dashboard</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>
@endsection

@section('konten')
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Dashboard</h5>
        </div>
        <div class="card-body">
            @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    {{ $message }}
                </div>
            @else
                <div class="alert alert-success">
                    Selamat Datang <strong>{{ Auth::user()->name }}</strong>!
                </div>
            @endif
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Jumlah Perumahan setiap Desa</h5>
        </div>
        <div class="card-body">
            <div id="kt_amcharts_1" style="height: 500px;"></div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Jumlah RTLH setiap Desa</h5>
        </div>
        <div class="card-body">
            <div id="kt_amcharts_2" style="height: 500px;"></div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        const swalInit = swal.mixin({
            buttonsStyling: false,
            customClass: {
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-light',
                denyButton: 'btn btn-light',
                input: 'form-control'
            }
        });
        @if (Session::has('success'))
            swalInit.fire({
                html: 'Selamat Datang <strong>{{ Auth::user()->name }}</strong>!',
                icon: 'success',
                toast: true,
                showConfirmButton: false,
                position: 'top-end'
            });
        @endif

        @if (Session::has('error'))
            swalInit.fire({
                text: '{{ Session::get('error') }}',
                icon: 'error',
                toast: true,
                showConfirmButton: false,
                position: 'top-end'
            });
        @endif
    </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/percent.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

    <script>
        am5.ready(function() {
            var root = am5.Root.new("kt_amcharts_1");
            root.setThemes([
                am5themes_Animated.new(root)
            ]);
            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: "panX",
                wheelY: "zoomX",
                pinchZoomX: true
            }));
            var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
            cursor.lineY.set("visible", false);

            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
                })
            }));

            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 = [{
            //     country: "USA",
            //     value: 2025
            // }, {
            //     country: "China",
            //     value: 1882
            // }, {
            //     country: "Japan",
            //     value: 1809
            // }, {
            //     country: "Germany",
            //     value: 1322
            // }, {
            //     country: "UK",
            //     value: 1122
            // }, {
            //     country: "France",
            //     value: 1114
            // }, {
            //     country: "India",
            //     value: 984
            // }, {
            //     country: "Spain",
            //     value: 711
            // }, {
            //     country: "Netherlands",
            //     value: 665
            // }, {
            //     country: "South Korea",
            //     value: 443
            // }, {
            //     country: "Canada",
            //     value: 441
            // }];

            var data = @json($data);
            // console.log(data);

            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);

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

    <script>
        am5.ready(function() {
            var root = am5.Root.new("kt_amcharts_2");
            root.setThemes([
                am5themes_Animated.new(root)
            ]);
            var chart = root.container.children.push(am5xy.XYChart.new(root, {
                panX: true,
                panY: true,
                wheelX: "panX",
                wheelY: "zoomX",
                pinchZoomX: true
            }));

            var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
            cursor.lineY.set("visible", false);

            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
                })
            }));

            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 data2 = @json($data2);

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

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

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

    <script>
        am5.ready(function() {
            var rootPSU = am5.Root.new("piePsu");
            rootPSU.setThemes([
                am5themes_Animated.new(rootPSU)
            ]);

            var chartPSU = rootPSU.container.children.push(am5percent.PieChart.new(rootPSU, {
                layout: rootPSU.verticalLayout
            }));

            var seriesPSU = chartPSU.series.push(am5percent.PieSeries.new(rootPSU, {
                alignLabels: true,
                valueField: "value",
                categoryField: "category",
                legendLabelText: "{category}",
                legendValueText: "{value}"
            }));
            seriesPSU.get("colors").set("colors", [
                am5.color("#ff4242"),
                am5.color("#f7c03e"),
                am5.color("#4af73e")
            ]);
            seriesPSU.slices.template.setAll({
                strokeWidth: 3,
                stroke: am5.color(0xffffff)
            });
            seriesPSU.slices.template.set("tooltipText", "{category}: [bold]{value}[/]");
            seriesPSU.labelsContainer.set("paddingTop", 30);
            seriesPSU.slices.template.adapters.add("radius", function(radius, target) {
                var dataItem = target.dataItem;
                var high = seriesPSU.getPrivate("valueHigh");

                if (dataItem) {
                    var value = target.dataItem.get("valueWorking", 0);
                    return radius * value / high
                }
                return radius;
            });

            var pie_psu = @json($pie_psu);
            seriesPSU.data.setAll(pie_psu);

            seriesPSU.labels.template.setAll({
                fontSize: 15,
                // fill: am5.color(0x550000),
                text: "{category}"
            });

            var legendPSU = chartPSU.children.push(am5.Legend.new(rootPSU, {
                centerX: am5.p50,
                x: am5.p50,
                marginTop: 15,
                marginBottom: 15
            }));
            legendPSU.labels.template.set("tooltipText", "{category}: [bold]{value}[/]");
            legendPSU.data.setAll(seriesPSU.dataItems);
            seriesPSU.appear(1000, 100);

        });
    </script>
@endsection