@extends('frontend.layouts.screen')

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

@section('after-styles')

<style>
    .card-raised {
        -webkit-box-shadow: 0px 1px 10px 1px rgba(204, 204, 204, 0.83);
        -moz-box-shadow: 0px 1px 10px 1px rgba(204, 204, 204, 0.83);
        box-shadow: 0px 1px 10px 1px rgba(204, 204, 204, 0.83);
    }
</style>

@endsection

@section('content')

<div class="container-fluid" style="padding: 1% 2%; height: 100%;">
    <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" style="padding: 5px 0px;"> --}}
        {{-- @if(count($stations) <= 6) --}}
        {{-- <div class="item active"> --}}
        <div class="col-md-4">
            <img class="card card-raised img-fluid" src="{{ asset("img/frontend/ws-keymap.jpg") }}"
                style='width: 100%; height: 350px;' />
        </div>

        @foreach($stations as $key => $station)
        @if($station['values'] !== null)
        @if($station['name'] !== 'Kohuwala')
        @if($station['name'] !== 'Orugodawatta')
        <div class="col-md-4" style="margin-bottom: 10px;">
            <div class="card card-raised mahapallegama" id="{{ strtolower($station['name'])  }}"
                style='width: 100%; height: 350px;'></div>
        </div>
        @endif
        @endif
        @endif
        @endforeach
        {{--</div>
                            @else
                                @php

                                    $first_stations = array_slice($stations, 0, 6);
                                    //dd($stations, $first_stations);
                                    $second_stations = array_slice($stations, 6);
                                //dd($stations, $second_stations);
                                @endphp

                                <div class="item active">
                                    @foreach($first_stations as $key => $f_station)
                                        @if($f_station['values'] !== null)
                                            <div class="col-md-4" style="margin-bottom: 10px;">
                                                <div class="card card-raised"
                                                     id="{{ strtolower($f_station['name'])  }}"
        style='width: 100%; height: 350px;'></div>
</div>
@endif
@endforeach

</div>

<div class="item">
    @foreach($second_stations as $key => $s_station)
    @if($s_station['values'] !== null)
    <div class="col-md-4" style="margin-bottom: 10px;">
        <div class="card card-raised" id="{{ strtolower($s_station['name'])  }}" style='width: 100%; height: 350px;'>
        </div>
    </div>
    @endif
    @endforeach
</div>

@endif
</div>
</div>
</div> --}}
</div>
<!--/ Carousel Card -->
</div>
</div>

{{-- <div class="container-fluid">
        <div class="col-md-6">
            <a href="#carousel-1" class="btn btn-block 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-block carousel-control-next"
                    role="button" data-slide="next"><i class="fa fa-arrow-right"></i></button>
        </div>
    </div> --}}

@endsection

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

        @foreach($stations as $key => $station)
                @if($station['values'] !== null)
                @if($station['name'] !== 'Kohuwala')
        @if($station['name'] !== 'Orugodawatta')
            chart_{{ $station['name'] }} = new Highcharts.Chart({
            "title": {
                "text": "{{ $station['name']  }} Rain Gauge",
                style: {
                    color: '#595959',
                    fontWeight: 'bold',
                    fontSize: '15px'
                }
            },
            "rangeSelector": {
                allButtonsEnabled: true,
                "buttons": [
                    {
                        "type": 'minute',
                        "count": 900,
                        "text": '15 Min',
                        "dataGrouping": {
                            forced: true,
                            "units": [['minute', [15]]]
                        }
                    },
                    {
                        "type": 'minute',
                        "count": 300,
                        "text": 'Hour',
                        "dataGrouping": {
                            forced: true,
                            "units": [['minute', [60]]]
                        }
                    },
                    {
                        "type": 'day',
                        "count": 1,
                        "text": 'Day'
                    },
                    {
                        "type": 'all',
                        "text": 'All'
                    }
                ],
                "buttonTheme": {
                    "width": 60
                },
                "selected": 3
            },
            "legend": {
                "layout": "horizontal",
                "style": {
                    'align': 'center'
                },
                enabled: true
            },
            "xAxis": [
                {
                    opposite: true,
                    "type": "datetime",
                    crosshair: true
                },
                {
                    categories: [
                        'Last 3 Hour',
                        'Last 6 Hour',
                        'Last 12 Hour',
                        'Last 24 Hour'
                    ],
                    crosshair: true
                }
            ],
            "yAxis": [
                {
                    reversed: true,
                    opposite: true,
                    title: {
                        text: 'mm',
                        style: {
                            fontSize: '14px',
                            fontWeight: '600'
                        }
                    },
                    height: '50%',
                    min: 0
                },
                {
                    reversed: false,
                    opposite: false,
                    title: {
                        text: 'mm',
                        style: {
                            fontSize: '14px',
                            fontWeight: '600'
                        }
                    },
                    height: '50%',
                    top: '50%',
                    min: 0
                    
                }
            ],
            "plotOptions": {
                "column": {
                    "minPointLength": 2
                }
            },
            "chart": {
                "defaultSeriesType": "column",
                "renderTo": "{{ strtolower($station['name'])  }}"
            },
            "credits": {
                enabled: false
            },
            "series": [
                {
                    "name": 'Rainfall - Last 7 Days (Hourly)',
                    "data":
                        [
                                @foreach($station['values'] as $value)
                            [{{ $value['time'] }},
                                {{ $value['value'] }}],
                            @endforeach
                        ],
                    tooltip: {
                        valueDecimals: 2
                    },
                    yAxis: 0,
                    xAxis: 0,
                    type: 'column'
                },
                {
                    "name": 'Total Rainfall',
                    "data":
                        [
                            @foreach($station['hours'] as $hour)
                            {{ $hour . ',' }}
                            @endforeach
                        ],
                    tooltip: {
                        valueDecimals: 2
                    },
                    yAxis: 1,
                    xAxis: 1,
                    type: 'column'
                }
                ]
        });
        @endif
        @endif
        @endif
        @endforeach

</script>
@endsection