@extends('frontend.layouts.screen')

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

@section('content')

    <div class="container-fluid" style="padding: 1% 2%; height: 100%;">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-raised par_lake" id=''
                     style='width: 100%; height: auto;'></div>
            </div>
        </div>

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

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

@endsection

@section('after-scripts')
    <script src="http://code.highcharts.com/stock/highstock.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({
            global: {
                useUTC: false
            }
        });

        $(function () {
            $('.par_lake').highcharts('StockChart', {
                title: {
                    text: 'Parliment 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: 'Forecast',
                        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'
                    }]
            });
        });

        // ambatale_river
        $(function () {
            {{--            var data_click = {{ $data }};--}}
            $('.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: 'Forecast',
                        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'
                    }]
            });
        });

        $(function () {
            {{--            var data_click = {{ $data }};--}}
            $('.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: 'Forecast',
                        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'
                    }]
            });
        });


        $(function () {
            {{--            var data_click = {{ $data }};--}}
            $('.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: 'Forecast',
                        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'
                    }]
            });
        });

        $(function () {
            {{--            var data_click = {{ $data }};--}}
            $('.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: 'Forecast',
                        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'
                    }]
            });
        });

    </script>
@endsection