@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content')
    <div class="row">
        <div class="col"><div class="card">
                <div class="card-header">
                    <h3 class="card-title">Jumlah Registrasi</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <div class="col">
                        <div id="chartdiv"></div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card --></div>
        <div class="col"><div class="card">
                <div class="card-header">
                    <h3 class="card-title">Jumlah Transaksi</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <div class="container">
                        <div class="col">
                            <div id="transaksi"></div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card --></div>
    </div>
    <div class="row">
        <div class="col"><div class="card">
                <div class="card-header">
                    <h3 class="card-title">Lokasi Terminal</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <div class="col">
                        <div id="map" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card --></div>
        <div class="col"><div class="card">
                <div class="card-header">
                    <h3 class="card-title">Jumlah Transaksi</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <div class="container">
                        <div class="col">
                            <div id="heatmap"></div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card --></div>
    </div>
@stop
@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <style>
        #chartdiv {
            width	: 100%;
            height	: 300px;
        }
        #transaksi {
            width	: 100%;
            height	: 300px;
        }
        #heatmap {
            width	: 100%;
            height	: 300px;
        }
    </style>
    <!-- Resources -->
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
    <script src="https://www.amcharts.com/lib/3/pie.js"></script>
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
          integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
          crossorigin="">
@stop
@section('js')
    <script src="https://www.amcharts.com/lib/3/ammap.js"></script>
    <script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
    {{--//PACKAGE MAP--}}
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
            integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
            crossorigin=""></script>

    {{--//MAP--}}
    <script>
        var data = [{"latitude":"-6.914864", "longitude":"107.608238"}];
        var map = L.map('map').setView([-6.914864, 107.608238], 12);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; '+' PT Fusi Global Teknologi',
            maxZoom: 18,
        }).addTo(map);
        for (var i = 0; i < data.length; i++) {
            marker = new L.marker([data[i].latitude,data[i].longitude])
                .bindTooltip("Terminal Fusi")
                .bindPopup(
                    "Terminal : Fusi, Kota Bandung"
                )
                .addTo(map);
        }
    </script>
    @include('transaction.script.chart')
    <script>
        var latlong = {};
        latlong["BDG"] = {"latitude":-6.914864, "longitude":107.608238};
        latlong["CRB"] = {"latitude":-6.7096009, "longitude":108.5591865};
        latlong["PGDR"] = {"latitude":-7.6934575, "longitude":108.6070787};

        var mapData = [
            {"code":"BDG" , "name":"Bandung", "value":900, "color":"#1a5276"},
            {"code":"CRB" , "name":"Cirebon", "value":500, "color":"#2471a3"},
            {"code":"PGDR" , "name":"Pangandaran", "value":676, "color":"#1f618d"},
        ];

        // get min and max values
        var minBulletSize = 30;
        var maxBulletSize = 70;
        var min = Infinity;
        var max = -Infinity;
        for ( var i = 0; i < mapData.length; i++ ) {
            var value = mapData[ i ].value;
            if ( value < min ) {
                min = value;
            }
            if ( value > max ) {
                max = value;
            }
        }

        // it's better to use circle square to show difference between values, not a radius
        var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
        var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;

        // create circle for each country
        var images = [];
        for ( var i = 0; i < mapData.length; i++ ) {
            var dataItem = mapData[ i ];
            var value = dataItem.value;
            // calculate size of a bubble
            var square = ( value - min ) / ( max - min ) * ( maxSquare - minSquare ) + minSquare;
            if ( square < minSquare ) {
                square = minSquare;
            }
            var size = Math.sqrt( square / ( Math.PI * 2 ) );
            var id = dataItem.code;

            images.push( {
                "type": "circle",
                "theme": "none",

                "width": size,
                "height": size,
                "color": dataItem.color,
                "longitude": latlong[ id ].longitude,
                "latitude": latlong[ id ].latitude,
                "title": dataItem.name,
                "value": value
            } );
        }

        // build map
        var map = AmCharts.makeChart( "heatmap", {
            "type": "map",
            "theme": "none",
            "color":"#28b463",
            "areasSettings": {
                "autoZoom": true,
                "selectedColor": "#7fb3d5"
            },
            "dataProvider": {
                "images":images,
                "mapURL": "/vendor/amcharts/images/indonesiaHigh.svg",
                "getAreasFromMap": true,
                "zoomLevel": 10,
                "zoomLatitude":-6.914864,
                "zoomLongitude":107.608238,
                "labelBackgroundColor":"#FFFFF",
                "areas": [
                    {
                        "id": "ID",
                        "showAsSelected": true
                    }
                ]
            },
            "export": {
                "enabled": true
            }
        } );
    </script>
    <script>
        var chartData = generateChartData();
        var chart = AmCharts.makeChart("transaksi", {
            "type": "serial",
            "theme": "none",
            "marginRight": 80,
            "autoMarginOffset": 20,
            "marginTop": 7,
            "dataProvider": chartData,
            "valueAxes": [{
                "axisAlpha": 0.2,
                "dashLength": 1,
                "position": "left"
            }],
            "mouseWheelZoomEnabled": true,
            "graphs": [{
                "id": "g1",
                "balloonText": "[[value]]",
                "bullet": "round",
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
                "hideBulletsCount": 50,
                "title": "red line",
                "valueField": "visits",
                "useLineColorForBulletBorder": true,
                "balloon":{
                    "drop":true
                }
            }],
            "chartScrollbar": {
                "autoGridCount": true,
                "graph": "g1",
                "scrollbarHeight": 40
            },
            "chartCursor": {
                "limitToGraph":"g1"
            },
            "categoryField": "date",
            "categoryAxis": {
                "parseDates": true,
                "axisColor": "#DADADA",
                "dashLength": 1,
                "minorGridEnabled": true
            },
            "export": {
                "enabled": true
            }
        });

        chart.addListener("rendered", zoomChart);
        zoomChart();

        // this method is called when chart is first inited as we listen for "rendered" event
        function zoomChart() {
            // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
            chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
        }


        // generate some random data, quite different range

        // generate some random data, quite different range
        function generateChartData() {
            var chartData = [];
            var firstDate = new Date();
            firstDate.setDate(firstDate.getDate() - 5);
            var visits = 900;
            for (var i = 0; i < 700; i++) {
                // we create date objects here. In your data, you can have date strings
                // and then set format of your dates using chart.dataDateFormat property,
                // however when possible, use date objects, as this will speed up chart rendering.
                var newDate = new Date(firstDate);
                newDate.setDate(newDate.getDate() + i);

                visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);

                chartData.push({
                    date: newDate,
                    visits: visits
                });
            }
            return chartData;
        }
    </script>
@stop