@extends('frontend.layouts.screen')

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

@section('after-styles')
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
@endsection

@section('content')

<div class="container-fluid" style="padding-top: 1%; height: 100%;">
    <div class="row">
        <div class="col-md-4">
            <div class="card card-raised" id='map' style='width: 100%; height: 350px;'></div>
        </div>
        <div class="col-md-8">
            <!-- Carousel Card -->
            <div class="card-carousel" style="height: 100%;">
                <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">
                            <!-- item -->
                            <div class="item active">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card card-raised n_street" id='' style='width: 100%; height: auto;'>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card card-raised dehiwala" id='' style='width: 100%; height: auto;'>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- item -->

                            <!-- item -->
                            <div class="item">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card card-raised salalihini_river" id=''
                                            style='width: 100%; height: auto;'></div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card card-raised ambathale_river" id=''
                                            style='width: 100%; height: auto;'></div>
                                    </div>
                                </div>
                            </div>
                            <!-- item -->

                            <!-- item -->
                            <div class="item">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card card-raised par_lake_side" id=''
                                            style='width: 100%; height: auto;'></div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card card-raised dem_canal" id=''
                                            style='width: 100%; height: auto;'></div>
                                    </div>
                                </div>
                            </div>
                            <!-- item -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Carousel Card -->
    <div class="row">
        <!-- Carousel Card -->
        <div class="card-carousel" style="height: 100%;">
            <div id="carousel-3" 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="row">
                                <div class="container-fluid">
                                    <div class="col-md-4">
                                        {{--<h3 class="h4 text-center">Dematagoda Canal</h3>--}}
                                        <div class="card card-raised kelani_mulla" id=''
                                            style='width: 100%; height: auto;'></div>
                                    </div>
                                    <div class="col-md-4">
                                        {{--<h3 class="h4 text-center">Kittampahuwa Out</h3>--}}
                                        <div class="card card-raised n_street_river" id=''
                                            style='width: 100%; height: auto;'></div>
                                    </div>
                                    <div class="col-md-4">
                                        {{--<h3 class="h4 text-center">Kittampahuwa River</h3>--}}
                                        <div class="card card-raised ambathale_outfull1" id=''
                                            style='width: 100%; height: auto;'></div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="container-fluid">
                                    <div class="col-md-4">
                                        {{--<h3 class="h4 text-center">Madiwela OUT</h3>--}}
                                        <div class="card card-raised kotte_north" id=''
                                            style='width: 100%; height: auto;'></div>
                                    </div>
                                    {{--<div class="col-md-4">--}}
                                    {{--<h3 class="h4 text-center">Madiwela US</h3>--}}
                                    {{--<div class="card card-raised wellawatta_canal" id=''--}}
                                    {{--style='width: 100%; height: auto;'></div>--}}
                                    {{--</div>--}}
                                    <div class="col-md-4">
                                        {{--<h3 class="h4 text-center">Kolonnawa Canal</h3>--}}
                                        <div class="card card-raised slrdc" id='' style='width: 100%; height: auto;'>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            </a>
        </div>
        <!-- End Carousel Card -->
    </div>
</div>

<div class="container-fluid">
    <div class="col-md-6">
        <a href="#carousel-1" class="btn btn-info btn-block left carousel-control-prev" role="button"
            data-slide="prev"><i class="fa fa-arrow-left"></i></a>
    </div>
    <div class="col-md-6">
        <button href="#carousel-1" class="btn btn-info btn-block right carousel-control-next" role="button"
            data-slide="next"><i class="fa fa-arrow-right"></i></button>
    </div>
    <hr>
    <div class="col-md-6">
        <a href="#carousel-3" class="btn btn-info btn-block left carousel-control-prev" role="button"
            data-slide="prev"><i class="fa fa-arrow-left"></i></a>
    </div>
    <div class="col-md-6">
        <button href="#carousel-3" class="btn btn-info btn-block right carousel-control-next" role="button"
            data-slide="next"><i class="fa fa-arrow-right"></i></button>
    </div>

    @endsection

    @section('after-scripts')



    {{--<script src="https://code.highcharts.com/highcharts.js"></script>--}}
    <script src="//code.highcharts.com/stock/highstock.js"></script>
    {{--<script src="//code.highcharts.com/stock/modules/exporting.js"></script>--}}
    {{--<script src="https://code.highcharts.com/modules/export-data.js"></script>--}}
    <script type="text/javascript">
        $(document).ready(function () {
                    Highcharts.setOptions({
                        time: {
                            timezone: 'Asia/Colombo'
                        }
                    });

                    // ambatale_river
                    $(function () {
                        {{--            var data_click = {{ $data }};--}}
                            ambathale_river = $('.ambathale_river').highcharts('StockChart', {
                            chart: {
                                height: 350
                            },
                            title: {
                                text: 'Ambathale River - Water Level'
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['ambathale_river']['values'] !== null)
                                                @foreach($data['ambathale_river']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['ambathale_river']['m_values'] !== null)
                                                @foreach($data['ambathale_river']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        par_lake_side = $('.par_lake_side').highcharts('StockChart', {
                            title: {
                                text: 'parliament Lake Side - Water Level'
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['par_lake_side']['values'] !== null)
                                                @foreach($data['par_lake_side']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['par_lake_side']['m_values'] !== null)
                                                @foreach($data['par_lake_side']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            dehiwala = $('.dehiwala').highcharts('StockChart', {
                            title: {
                                text: 'Dehiwala Canal- Water Level'
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['dehiwala']['values'] !== null)
                                                @foreach($data['dehiwala']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['dehiwala']['m_values'] !== null)
                                                @foreach($data['dehiwala']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            ambathale_outfull1 = $('.ambathale_outfull1').highcharts('StockChart', {
                            title: {
                                text: 'Ambathale Outfall - Water Level'
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['ambathale_outfull1']['values'] !== null)
                                                @foreach($data['ambathale_outfull1']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['ambathale_outfull1']['m_values'] !== null)
                                                @foreach($data['ambathale_outfull1']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            slrdc = $('.slrdc').highcharts('StockChart', {
                            title: {
                                text: 'Near SLRDC - Water Level'
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['slrdc']['values'] !== null)
                                                @foreach($data['slrdc']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['slrdc']['m_values'] !== null)
                                                @foreach($data['slrdc']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            salalihini_river = $('.salalihini_river').highcharts('StockChart', {
                            title: {
                                text: 'Salalihini River - Water Level'
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['salalihini_river']['values'] !== null)
                                                @foreach($data['salalihini_river']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['salalihini_river']['m_values'] !== null)
                                                @foreach($data['salalihini_river']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            kelani_mulla = $('.kelani_mulla').highcharts('StockChart', {
                            title: {
                                text: 'Kelani Mulla Outfall - Water Level'
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['kelani_mulla']['values'] !== null)
                                                @foreach($data['kelani_mulla']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['kelani_mulla']['m_values'] !== null)
                                                @foreach($data['kelani_mulla']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            n_street_river = $('.n_street_river').highcharts('StockChart', {
                            title: {
                                text: "Nagalagam Street River - Water Level"
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D',
                                    data:
                                        [
                                                @if($data['n_street_river']['values'] !== null)
                                                @foreach($data['n_street_river']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['n_street_river']['m_values'] !== null)
                                                @foreach($data['n_street_river']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            n_street = $('.n_street').highcharts('StockChart', {
                            title: {
                                text: "Nagalagam Street - Water Level"
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['n_street']['values'] !== null)
                                                @foreach($data['n_street']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['n_street']['m_values'] !== null)
                                                @foreach($data['n_street']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            kotte_north = $('.kotte_north').highcharts('StockChart', {
                            title: {
                                text: 'Kotte North Canal - Water Level'
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['kotte_north']['values'] !== null)
                                                @foreach($data['kotte_north']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['kotte_north']['m_values'] !== null)
                                                @foreach($data['kotte_north']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            dem_canal = $('.dem_canal').highcharts('StockChart', {
                            title: {
                                text: 'Dematagoda Canal-Orugodawatta - Water Level'
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                title: {
                                    text: 'm MSL'
                                },
                                opposite: false
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['dem_canal']['values'] !== null)
                                                @foreach($data['dem_canal']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['dem_canal']['m_values'] !== null)
                                                @foreach($data['dem_canal']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });


                    $(function () {
                        {{--var data_click = {{ $data }};--}}
                            wellawatta_canal = $('.wellawatta_canal').highcharts('StockChart', {
                            title: {
                                text: 'Wellawatta Canal-St Peters College - Water Level'
                            },
                            chart: {
                                height: 350
                            },
                            legend: {
                                enabled: true,
                                align: 'center'
                            },
                            credits: {
                                enabled: false
                            },
                            rangeSelector: {
                                inputEnabled: false,
                                buttons: [
                                    {
                                        type: 'minute',
                                        count: 900,
                                        text: '15 Min',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [15]]]
                                        }
                                    },
                                    {
                                        type: 'minute',
                                        count: 320,
                                        text: 'Hour',
                                        dataGrouping: {
                                            forced: true,
                                            units: [['minute', [60]]]
                                        }
                                    },
                                    {
                                        type: 'day',
                                        count: 1,
                                        text: 'Day'
                                    },
                                    {
                                        type: 'all',
                                        text: 'All'
                                    }
                                ],
                                buttonTheme: {
                                    width: 60
                                },
                                selected: 3
                            },
                            yAxis: {
                                opposite: false,
                                title: {
                                    text: 'm MSL'
                                }
                            },
                            series: [
                                {
                                    name: 'FLO2D 250',
                                    data:
                                        [
                                                @if($data['wellawatta_canal']['values'] !== null)
                                                @foreach($data['wellawatta_canal']['values'] as $value)
                                            [{{ $value['time'] }},
                                                {{ $value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                },
                                {
                                    name: 'MIKE11',
                                    data:
                                        [
                                                @if($data['wellawatta_canal']['m_values'] !== null)
                                                @foreach($data['wellawatta_canal']['m_values'] as $m_value)
                                            [{{ $m_value['time'] }},
                                                {{ $m_value['value'] }}],
                                            @endforeach
                                            @endif
                                        ],
                                    tooltip: {
                                        valueDecimals: 2
                                    },
                                    type: 'line'
                                }]
                        });
                    });
                });

    </script>

    <script>
        $('.carousel').carousel({
                    interval: 120000
                })


    </script>
    {{--Key map--}}
    <script src="https://js.arcgis.com/4.7/"></script>
    <script>
        var map;

                require([
                    "esri/Map",
                    "esri/views/MapView",
                    "esri/Graphic",
                    "esri/geometry/Point",
                    "esri/geometry/Polyline",
                    "esri/geometry/Polygon",
                    "esri/PopupTemplate",
                    "esri/symbols/PictureMarkerSymbol",
                    "esri/symbols/SimpleMarkerSymbol",
                    "esri/layers/Layer",
                    "dojo/domReady!"
                ], function (Map,
                             MapView,
                             Graphic,
                             Point,
                             Polyline,
                             Polygon,
                             PopupTemplate,
                             PictureMarkerSymbol,
                             SimpleMarkerSymbol,
                             Layer) {
                    var map = new Map({
                        basemap: "streets"
                    });

                    var view = new MapView({
                        container: "map",
                        map: map,
                        center: [79.8789361111, 6.9434861111],
                        zoom: 10,
                        // Since there are many elements, it is best to dock the popup so
                        // the elements display better rather than have to scroll through them all.
                        popup: {
                            dockEnabled: true,
                            dockOptions: {
                                buttonEnabled: false,
                                breakpoint: false
                            }
                        }
                    });

                    var s = new SimpleMarkerSymbol({
                        color: [0, 0, 0, 255],
                        size: "13px",
                        style: "circle"
                    });

                    //Ambatale
                    var point_ar = new Point({
                        longitude: {{ $coordinates['ambatale_river']->longitude }},
                        latitude: {{ $coordinates['ambatale_river']->latitude }}
                    });
                    var pop_template_ar = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Ambatale River Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Ambatale River Station" + "</b></div>"
                    });
                    var pointGraphic_ar = new Graphic({
                        geometry: point_ar,
                        symbol: s,
                        popupTemplate: pop_template_ar
                    });

                    //Parliment lake side
                    var point_pl = new Point({
                        longitude: {{ $coordinates['par_lake_side']->latitude }},
                        latitude: {{ $coordinates['par_lake_side']->longitude }}
                    });
                    var pop_template_pl = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Parliment Lake Side Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Parliment Lake Side Station" + "</b></div>"
                    });
                    var pointGraphic_pl = new Graphic({
                        geometry: point_pl,
                        symbol: s,
                        popupTemplate: pop_template_pl
                    });

                    //Dehiwala
                    var point_d = new Point({
                        longitude: {{ $coordinates['dehiwala']->longitude }},
                        latitude: {{ $coordinates['dehiwala']->latitude }}
                    });
                    var pop_template_d = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Dehiwala Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Dehiwala Station" + "</b></div>"
                    });
                    var pointGraphic_d = new Graphic({
                        geometry: point_d,
                        symbol: s,
                        popupTemplate: pop_template_d
                    });

                    //ambathale_outfull1
                    var point_ao = new Point({
                        longitude: {{ $coordinates['ambathale_outfull1']->longitude }},
                        latitude: {{ $coordinates['ambathale_outfull1']->latitude }}
                    });
                    var pop_template_ao = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Ambathale_Outfall Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Ambathale_Outfall Station" + "</b></div>"
                    });
                    var pointGraphic_ao = new Graphic({
                        geometry: point_ao,
                        symbol: s,
                        popupTemplate: pop_template_ao
                    });

                    //slrdc
                    var point_slrdc = new Point({
                        longitude: {{ $coordinates['slrdc']->longitude }},
                        latitude: {{ $coordinates['slrdc']->latitude }}
                    });
                    var pop_template_slrdc = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "SLRDC Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "SLRDC Station" + "</b></div>"
                    });
                    var pointGraphic_slrdc = new Graphic({
                        geometry: point_slrdc,
                        symbol: s,
                        popupTemplate: pop_template_slrdc
                    });

                    //salalihini_river
                    var point_sr = new Point({
                        longitude: {{ $coordinates['salalihini_river']->longitude }},
                        latitude: {{ $coordinates['salalihini_river']->latitude }}
                    });
                    var pop_template_sr = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Salalihini River Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Salalihini River Station" + "</b></div>"
                    });
                    var pointGraphic_sr = new Graphic({
                        geometry: point_sr,
                        symbol: s,
                        popupTemplate: pop_template_sr
                    });

                    //kelani_mulla
                    var point_km = new Point({
                        longitude: {{ $coordinates['kelani_mulla']->longitude }},
                        latitude: {{ $coordinates['kelani_mulla']->latitude }}
                    });
                    var pop_template_km = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Kelani Mulla Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Kelani Mulla Station" + "</b></div>"
                    });
                    var pointGraphic_km = new Graphic({
                        geometry: point_km,
                        symbol: s,
                        popupTemplate: pop_template_km
                    });

                    //n_street_river
                    var point_nsr = new Point({
                        longitude: {{ $coordinates['n_street_river']->longitude }},
                        latitude: {{ $coordinates['n_street_river']->latitude }}
                    });
                    var pop_template_nsr = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Nagalagam Street River Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Nagalagam Street River Station" + "</b></div>"
                    });
                    var pointGraphic_nsr = new Graphic({
                        geometry: point_nsr,
                        symbol: s,
                        popupTemplate: pop_template_nsr
                    });

                    //n_street
                    var point_ns = new Point({
                        longitude: {{ $coordinates['n_street']->longitude }},
                        latitude: {{ $coordinates['n_street']->latitude }}
                    });
                    var pop_template_ns = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Nagalagam Street Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Nagalagam Street Station" + "</b></div>"
                    });
                    var pointGraphic_ns = new Graphic({
                        geometry: point_ns,
                        symbol: s,
                        popupTemplate: pop_template_ns
                    });

                    //kotte_north
                    var point_kn = new Point({
                        longitude: {{ $coordinates['kotte_north']->longitude }},
                        latitude: {{ $coordinates['kotte_north']->latitude }}
                    });
                    var pop_template_kn = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Kotte North Canal Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Kotte North Canal Station" + "</b></div>"
                    });
                    var pointGraphic_kn = new Graphic({
                        geometry: point_kn,
                        symbol: s,
                        popupTemplate: pop_template_kn
                    });

                    //wellawatta_canal
                    var point_wc = new Point({
                        longitude: {{ $coordinates['wellawatta_canal']->longitude }},
                        latitude: {{ $coordinates['wellawatta_canal']->latitude }}
                    });
                    var pop_template_wc = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Wellawatta Canal St Peters College Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Wellawatta Canal St Peters College Station" + "</b></div>"
                    });
                    var pointGraphic_wc = new Graphic({
                        geometry: point_wc,
                        symbol: s,
                        popupTemplate: pop_template_wc
                    });

                    //dem_canal
                    var point_dc = new Point({
                        longitude: {{ $coordinates['dem_canal']->longitude }},
                        latitude: {{ $coordinates['dem_canal']->latitude }}
                    });
                    var pop_template_dc = new PopupTemplate({
                        title: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>" + "Dematagoda Canal Station" + "</b></div>",
                        content: "<div class='text-center' style='font-size: 18px; font-weight: 900;'><b>\" + \"Dematagoda Canal Station\" + \"</b></div>"
                    });
                    var pointGraphic_dc = new Graphic({
                        geometry: point_dc,
                        symbol: s,
                        popupTemplate: pop_template_dc
                    });

                    // Add the graphics to the view's graphics layer
                    view.graphics.addMany([pointGraphic_ar, pointGraphic_pl, pointGraphic_d, pointGraphic_ao, pointGraphic_slrdc, pointGraphic_sr, pointGraphic_km, pointGraphic_nsr, pointGraphic_ns, pointGraphic_kn, pointGraphic_wc, pointGraphic_dc]);

                    /************************************************
                     *
                     * 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: "a8b2845ce34c4d5b81eccdcbd154d7a2"
                        }
                    }).then(addLayer)
                        .catch(rejection);

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

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