@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="padding-bottom: 1%;">

    {{-- <div class="card card-raised card-nav-tabs" style="padding-bottom: 1%;"> --}}
    {{-- <div class="header header-dark-blue"> --}}
    <h5 class="h5 text-center text-uppercase" style="color: #000;">
        <i class="fa fa-area-chart"></i> Canal Water Level Forecasts & Real Time Observations
    </h5>
    {{-- </div> --}}

    <div class="row">
        {{--<h3 class="h3 text-center" style="font-weight: 600;">Water level measurements with the Forecast values</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: 350px;"></div>--}}
                            <img src="{{ asset('img/frontend/10th.png') }}" class="img-fluid">
                        </div>
                        <div class="col-md-4">
                            <div class="card yakbedda" id='yakbedda' style='width: 100%; height: 350px;'></div>
                        </div>
                        <div class="col-md-4">
                            <div class="card igurukade" id='igurukade' style='width: 100%; height: 350px;'></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 janakala" id='janakala' style='width: 100%; height: 350px;'></div>
                        </div>
                        <div class="col-md-4">
                            <div class="card wellampitiya" id='wellampitiya' style='width: 100%; height: 350px;'></div>
                        </div>
                        <div class="col-md-4">
                            <div class="card wellawatta" id='wellawatta' style='width: 100%; height: 350px;'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Carousel Card -->
    </div>
</div>
{{-- </div> --}}

@endsection

@section('after-scripts')
<script>
    // {{--$(document).ready(function(){--}}
    //     {{--    setTimeout(function(){--}}
    //     {{--        window.location.replace('{{ route('frontend.screen.tenth', \Carbon\Carbon::today()->format('Y-m-d'))  }}');--}}
    //     {{--    }, 3600000);--}}
    //     {{--});--}}
</script>

{{-- <script src="//code.highcharts.com/stock/highstock.js"></script> --}}
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js">
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<script type="text/javascript">
    Highcharts.setOptions({
            time: {
            timezone: 'Asia/Colombo'
        }
    });

        @foreach($stations as $key => $station)

        $(function () {
            var station_{!! $key !!} = new Highcharts.Chart({
                title: {
                    text: '{!! $station['name'] !!}'
                },
                chart: {
                    style: {
                        height: "320px"
                    }
                },
                legend: {
                    enabled: true,
                    align: 'center'
                },
                credits: {
                    enabled: false
                },
                rangeSelector: {
                    inputEnabled: false,
                    enabled: 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
                },
                xAxis: {
                    type: 'datetime',
                    // min: {{ strtotime(\Carbon\Carbon::today()->format("Y-m-d H:i:s")) * 1000 }},
                    // max: {{ strtotime(\Carbon\Carbon::today()->addHours(23)->format("Y-m-d H:i:s")) * 1000 }},
                    tickInterval: 3600 * 6000,
                    endOnTick: true,
                    ordinal: true,
                },
                yAxis: {
                    title: {
                        text: 'm MSL'
                    },
                    opposite: false,
                    max: 2.00
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 1
                        }
                    }
                },
                "chart": {
                    height: 350,
                    "renderTo": "{{ str_replace(".", "", $station['class'])  }}"
                },
                series: [
                    {
                        name: 'Observed',
                        data:
                            [
                                    @if($station['obs_values'] !== null)
                                    @foreach($station['obs_values'] as $value_obs)
                                [{{ $value_obs['time'] }},
                                    {{ $value_obs['value'] }}],
                                @endforeach
                                @endif
                            ],
                        tooltip: {
                            valueDecimals: 2
                        },
                        type: 'scatter',
                        tooltip: {
                            crosshairs: true,
                            headerFormat: '<b>{series.name}</b><br>',
                            pointFormat: 'x: <b>{point.x:%d-%b-%y %H:%M}</b><br/>y: <b>{point.y}</b><br/>'
                        },
                    },
                    {
                        name: '250',
                        data:
                            [
                                    @if($station['250_values'] !== null)
                                    @foreach($station['250_values'] as $value_250)
                                [{{ $value_250['time'] }},
                                    {{ $value_250['value'] }}],
                                @endforeach
                                @endif
                            ],
                        tooltip: {
                            valueDecimals: 2
                        },
                        type: 'line'
                    }
                    ,
                    
                    {
                        name: '250 Hourly',
                        data:
                            [
                                    @if($station['250h_values'] !== null)
                                    @foreach($station['250h_values'] as $value_250h)
                                [{{ $value_250h['time'] }},
                                    {{ $value_250h['value'] }}],
                                @endforeach
                                @endif
                            ],
                        tooltip: {
                            valueDecimals: 2
                        },
                        type: 'line'
                    }
                    ,
                    {
                        name: '150',
                        data:
                            [
                                    @if($station['150_values'] !== null)
                                    @foreach($station['150_values'] as $value_150)
                                [{{ $value_150['time'] }},
                                    {{ $value_150['value'] }}],
                                @endforeach
                                @endif
                            ],
                        tooltip: {
                            valueDecimals: 2
                        },
                        type: 'line'
                    }
                    ,
                    {
                        name: 'MIKE',
                        data:
                            [
                                    @if($station['mike_values'] !== null)
                                    @foreach($station['mike_values'] as $mike_value)
                                [{{ $mike_value['time'] }},
                                    {{ $mike_value['value'] }}],
                                @endforeach
                                @endif
                            ],
                        tooltip: {
                            valueDecimals: 2
                        },
                        type: 'line'
                    }
                ]
            });
        });

        @endforeach

</script>

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

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

            var view = new SceneView({
                map: map,
                container: "viewDiv",
                zoom: 12,
                center: [79.90467, 6.90101],
            });

            // var i = 0;

            @foreach($stations as $key => $value)

            // var point = 'point' + i;
            var point = {
                type: "point", // autocasts as new Point()
                longitude: "{{ $value['coordinates']['longitude'] }}",
                latitude: "{{ $value['coordinates']['latitude'] }}"
            };
            // var g = 'g' + i;
            var g = new Graphic({
                geometry: point,
                symbol: {
                    type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                    // style: "circle",
                    color: '#000',
                    size: "24px",  // pixels
                    outline: {  // autocasts as new SimpleLineSymbol()
                        // color: [255, 255, 0],
                        width: 0  // points
                    }
                }
            });

            view.graphics.add(g);
            // i++;

            @endforeach
        });
</script>
@endsection