@extends('frontend.layouts.screen')

@section('meta')
<meta http-equiv="refresh" content="3600">
@endsection

@section('after-styles')


<link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">

<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<style>
    .highcharts-title {
        fill: #434348;
        font-weight: bold;
        font-size: 3.5em;
    }

    .highcharts-legend {
        fill: #434348;
        font-weight: bold;
        font-size: 2em;
    }

    #viewDiv {
        height: 100%;
    }
</style>

@endsection

@section('content')

<div class="container-fluid" style="height: 100%;">

    <div class="row">
        <h3 class="h3 text-center" style="font-weight: 600;">Kelani Basin Rainfall and Discharge</h3>
        <!-- Carousel Card -->
        <div class="card-carousel">
            <div id="carousel-1" class="carousel slide" data-ride="carousel">
                <div class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="col-md-4">
                            <div id="viewDiv" style=" height: 330px;"></div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-raised kub" id='kub' style='width: 100%; height: 330px;'></div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-raised klb" id='klb' style='width: 100%; height: 330px;'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Carousel Card -->
    </div>

    <div class="row">
        <!-- Carousel Card -->
        <div class="card-carousel">
            <div id="carousel-1" class="carousel slide" data-ride="carousel">
                <div class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="col-md-4">
                            <div class="card card-raised hingurana" id='hingurana' style='width: 100%; height: 330px;'>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-raised mahapallegama" id='mahapallegama'
                                style='width: 100%; height: 330px;'></div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-raised hanwella_p" id='hanwella_p'
                                style='width: 100%; height: 330px;'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Carousel Card -->
    </div>

    <div class="row">
        <!-- Carousel Card -->
        <div class="card-carousel">
            <div id="carousel-2" class="carousel slide" data-ride="carousel">
                <div class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="col-md-4">
                                <div class="card card-raised hatton" id='hatton' style='width: 100%; height: 330px;'>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card card-raised glencourse" id='glencourse'
                                    style='width: 100%; height: 330px;'></div>
                            </div>
                            <div class="col-md-4">
                                <div class="card card-raised hanwella_d" id='hanwella_d'
                                    style='width: 100%; height: 330px;'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Carousel Card -->
    </div>
</div>

@endsection

@section('after-scripts')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript">
    Highcharts.setOptions({
                        time: {
                            timezone: 'Asia/Colombo'
                        }
                    });

        $(function () {
            $(document).ready(function () {
                // klb mean
                klb = new Highcharts.Chart({
                    "title": {
                        "text": 'KLB Mean - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "klb"
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'Forecast',
                            "data":
                                [
                                        @foreach($data['klb']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // kub mean
                kub = new Highcharts.Chart({
                    "title": {
                        "text": 'KUB Mean - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "kub"
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'Forecast',
                            "data":
                                [
                                        @foreach($data['kub']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                hingurana = new Highcharts.Chart({
                    "title": {
                        "text": 'Hingurana Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hingurana"
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'Forecast',
                            "data":
                                [
                                        @foreach($data['hingurana']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                mahapallegama = new Highcharts.Chart({
                    "title": {
                        "text": 'Mahapallegama Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "mahapallegama"
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'Forecast',
                            "data":
                                [
                                        @foreach($data['mahapallegama']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                hanwella = new Highcharts.Chart({
                    "title": {
                        "text": 'Hanwella Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hanwella_p"
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'Forecast',
                            "data":
                                [
                                        @foreach($data['hanwella_p']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                hatton = new Highcharts.Chart({
                    "title": {
                        "text": 'Hatton Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hatton"
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'Forecast',
                            "data":
                                [
                                        @foreach($data['hatton']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                hanwella_d = new Highcharts.Chart({
                    "title": {
                        "text": 'Hanwella - Discharge'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'm3/s'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "line",
                        "renderTo": "hanwella_d"
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'Forecast',
                            "data":
                                [
                                        @foreach($data['hanwella_d']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                glencourse = new Highcharts.Chart({
                    "title": {
                        "text": 'Glencourse Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "glencourse"
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'Forecast',
                            "data":
                                [
                                        @foreach($data['glencourse']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

            });
        });
</script>

<script src="https://js.arcgis.com/4.7/"></script>
<script>
    require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/Layer",
            "dojo/domReady!"
        ], function(
            Map, SceneView, Layer
        ) {

            var map = new Map({
                basemap: "streets"
            });

            var view = new SceneView({
                map: map,
                container: "viewDiv",
                center: [80.20305556, 6.978055556],
                zoom: 9
            });

            /************************************************
             *
             * Create a layer from an existing Portal item hosted
             * in ArcGIS Online using the ID of the item.
             *
             *************************************************/
            Layer.fromPortalItem({
                portalItem: { // autocasts as new PortalItem()
                    id: "73c8c0e6c2694e559d3ddb21005d4684"
                }
            }).then(addLayer)
                .catch(rejection);

            // Adds the layer to the map once it loads
            function addLayer(layer) {
                map.add(layer);
            }

            function rejection(error) {
                console.log("Layer failed to load: ", error);
            }
        });
</script>
@endsection