@extends('layoutsV2.public')
<style>
    .chartdiv {
        width: 100%;
        height: 350px;
    }
</style>
@section('_content')
    <section id="hero" style="padding: 3px 0 0 0 !important;">

        <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="0 10 150 28 " preserveAspectRatio="none">
            <defs>
                <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
            </defs>
            <g class="wave1">
                <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
            </g>
            <g class="wave2">
                <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
            </g>
            <g class="wave3">
                <use xlink:href="#wave-path" x="50" y="9" fill="#fff">
            </g>
        </svg>

    </section>

    <section id="faq" class="faq section-bg">
        <div class="container">

            <div class="section-title" data-aos="fade-up">
                <h2>INFORMASI</h2>
                <p>GRAFIK</p>
            </div>

            <div class="faq-list">
                <ul>
                    @php
                        $index = 0;
                    @endphp
                    @foreach($rpjmdSasaran as $key =>$value)
                    <li data-aos="fade-up">
                        <a data-toggle="collapse" class="collapse p-0 text-uppercase" href="#faq-list-{{$key+1}}">{{$key+1}}. {{$value->sasaran}}<i class="bx bx-chevron-down icon-show"></i><i
                                class="bx bx-chevron-up icon-close"></i></a>
                        <div id="faq-list-{{$key+1}}" class="collapse show" data-parent=".faq-list">
                            @foreach($value->rpjmdSasaranIndikator as $indikatorKey => $indiaktorValue)
                                <p>{{$key+1}}.{{$indikatorKey+1}}. {{$indiaktorValue->indikator}}</p>
                                <div class="chartdiv pt-4" id="chartdiv{{$index++}}"></div>
                            @endforeach
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>

@endsection

@push('plugin-scripts')

<script src="{{asset('js/grafik/core.js')}}"></script>
<script src="{{asset('js/grafik/charts.js')}}"></script>
<script src="{{asset('js/grafik/animated.js')}}"></script>
<script src="{{asset('js/axios.min.js')}}"></script>
<script>
    am4core.useTheme(am4themes_animated);
    // Create chart instance
    try {
        axios.get(window.location.origin + '/v2/public/grafik/chart')
            .then((response) => {
                var res = response.data
                //console.log(res)
                var chart = [];
                var categoryAxis = [];
                var valueAxis = [];
                var series = [];
                var bullet = [];
                var label = ['Target', 'Capaian','Rata-rata Provinsi/Wilayah']
                for(var i=0;i<res.length;i++){
                    //let chart = 'chart';
                    //console.log(res[i].trx_rkt)
                    var chart = am4core.create("chartdiv"+[i], am4charts.XYChart);
                    // Add data

                    chart.data = [{
                        "date": new Date(res[i].trx_rkt[0].tahun, 0, 1),
                        "value": res[i].trx_rkt[0].target.replaceAll(',', '.'),
                        "value2": res[i].trx_rkt[0].realisasi.replaceAll(',', '.'),
                        "value3": res[i].trx_rkt[0].rata_rata_provinsi
                    }, {
                        "date": new Date(res[i].trx_rkt[1].tahun, 0, 1),
                        "value": res[i].trx_rkt[1].target,
                        "value2": res[i].trx_rkt[1].realisasi,
                        "value3": res[i].trx_rkt[1].rata_rata_provinsi
                    }, {
                        "date": new Date(res[i].trx_rkt[2].tahun, 0, 1),
                        "value": res[i].trx_rkt[2].target,
                        "value2": res[i].trx_rkt[2].realisasi,
                        "value3": res[i].trx_rkt[2].rata_rata_provinsi
                    }, {
                        "date": new Date(res[i].trx_rkt[3].tahun, 0, 1),
                        "value": res[i].trx_rkt[3].target,
                        "value2": res[i].trx_rkt[3].realisasi,
                        "value3": res[i].trx_rkt[3].rata_rata_provinsi
                    },
                        //     {
                        //     "date": new Date(res[i].trx_rkt[4].tahun, 0, 1),
                        //     "value": res[i].trx_rkt[4].target,
                        //     "value2": res[i].trx_rkt[4].realisasi,
                        //     "value3": res[i].trx_rkt[4].rata_rata_provinsi
                        // }
                    ];
                    chart.colors.list = [
                        am4core.color("#FF8C00"),
                        am4core.color("#006400"),
                        am4core.color("#1E90FF"),
                    ];

                    // Create axes
                    var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
                    categoryAxis.renderer.grid.template.location = 0;
                    //categoryAxis[i].renderer.minGridDistance = 30;

                    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

                    // Create series
                    function createSeries(field, name) {
                        var series= chart.series.push(new am4charts.LineSeries());
                        series.dataFields.valueY = field;
                        series.dataFields.dateX = "date";
                        series.name = name;
                        // series.tooltipText = "{dateX}: [b]{valueY}[/]";
                        series.tooltipText = "[b]{valueY}[/] "+res[i].satuan;
                        series.strokeWidth = 3;

                        var bullet = series.bullets.push(new am4charts.CircleBullet());
                        bullet.events.on("hit", function(ev) {
                            //alert("Clicked on " + ev.target.dataItem.dateX + ": " + ev.target.dataItem.valueY);
                        });
                    }

                    createSeries("value", "Target");
                    createSeries("value2", "Capaian");
                    createSeries("value3", "Rata-rata Provinsi/Wilayah");

                    chart.legend = new am4charts.Legend();
                    chart.cursor = new am4charts.XYCursor();
                }
            })
    }catch (e) {
        console.log(e);
    }

</script>

@endpush