@extends('layouts.frontend')



@section('content')
<div id="map" class="col-xs-12"></div>
<div class="container">

    <div class="container">

        <div class="row">
            <div class="box">
                <div class="col-lg-12 col-md-12 col-xs-12">

                </div>

                @foreach($stations as $station)
                    <div class="row" hidden>
                        <div class="col-md-12 col-xs-12">
                            <div class="row">
                                <div class="col-md-4 col-xs-4 col-md-offset-4 stations" id="station_{{ $station->id }}">
                                    <input id="name_{{$station->id}}"hidden value="{{ $station->name }}">
                                    <input  id="lat_{{$station->id}}" hidden value="{{ $station->latitude }}">
                                    <input id="lon_{{$station->id}}" hidden value="{{ $station->longitude }}">
                                    <input id="alt_{{$station->id}}" hidden value="{{ $station->altitude }}">
                                    <input id="qta_a_{{$station->id}}" hidden value="{{ $station->lights->qta_a }}">
                                    <input id="qta_e_{{$station->id}}" hidden value="{{ $station->lights->qta_e }}">
                                    <input id="qta_max_a_{{$station->id}}" hidden value="{{ $station->lights->qta_max_a }}">
                                    <input id="qta_max_e_{{$station->id}}" hidden value="{{ $station->lights->qta_max_e }}">
                                    <input id="is_e_{{$station->id}}" hidden value="{{ $station->lights->is_e }}">
                                    <input id="is_a_{{$station->id}}" hidden value="{{ $station->lights->is_a }}">
                                    <input id="is_out_{{$station->id}}" hidden value="{{ $station->lights->is_out }}">
                                    <input id="time_a_{{$station->id}}" hidden value="{{ $station->lights->time_a }}">
                                    <input id="time_e_{{$station->id}}" hidden value="{{ $station->lights->time_e }}">
                                    <input id="d_a_{{$station->id}}" hidden value="{{ $station->lights->days_a }}">
                                    <input id="d_e_{{$station->id}}" hidden value="{{ $station->lights->days_e }}">
                                    @if($station->lights->light == 'green')
                                        <input id="color_{{$station->id}}" hidden value="green-dot.png">
                                    @elseif($station->lights->light == 'yellow')
                                        <input id="color_{{$station->id}}" hidden value="yellow-dot.png">
                                    @elseif($station->lights->light == 'blue')
                                        <input id="color_{{$station->id}}" hidden value="blue-dot.png">
                                    @elseif($station->lights->light == 'red')
                                        <input id="color_{{$station->id}}" hidden value="red-dot.png">
                                    @else
                                        <input id="color_{{$station->id}}" hidden value="grey-dot.png">
                                    @endif
                                    <p>{{$station->name}}
                                        <strong>Altitudine: {{$station->altitude}} m. </strong>
                                    </p>
                                    <p>Regione:
                                        {{$station->region_description}}
                                    </p>
                                </div>


                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="clearfix"></div>
            </div>
        </div>


    </div>

</div>
<div hidden id="map-data">
    <input id="zoom_map"hidden value="">
    <input type="number" id="lat_map" hidden value="{{ $map['lat'] }}">
    <input type="number" id="lon_map" hidden value="{{ $map['lon'] }}">
    <input type="number" id="zoom_map" hidden value="{{ $map['zoom'] }}">
</div>
<script>

    var map;
    var data;

    function initMap() {
        var infowindow = null;
        var lat_map = parseFloat($("#lat_map").val());
        var lon_map = parseFloat($('#lon_map').val());
        var zoom_map = parseInt($('#zoom_map').val());

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: lat_map, lng: lon_map},
            zoom: 9,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
            draggable: true,
        });
        //var data = 'Non sono previste buttate in questa area';


        $('.stations').each(function(){

            var id = $(this).attr('id');

            var idx = id.split('_');

            var latitude = parseFloat($('#lat_'+idx[1]).val());
            var longitude = parseFloat($('#lon_'+idx[1]).val());
            var position = {lat: latitude, lng: longitude};

            var marker = new google.maps.Marker({
                position: position,
                map: map,
                icon : 'http://195.201.120.141/porcini/public/img/'+$('#color_'+idx[1]).val(),
                id : idx[1],
            });
            google.maps.event.addListener(marker, 'click', function() {
                if (infowindow) {
                    infowindow.close();
                }
                openData(map,marker);

            });
        });

        function openData(map,marker) {

            var name = $('#name_'+marker.id).val();
            var alti = $('#alt_'+marker.id).val();
            var qta_a = $('#qta_a_'+marker.id).val();
            var qta_e = $('#qta_e_'+marker.id).val();
            var qta_max_a = $('#qta_max_a_'+marker.id).val();
            var qta_max_e = $('#qta_max_e_'+marker.id).val();
            var time_a = $('#time_a_'+marker.id).val();
            var time_e = $('#time_e_'+marker.id).val();
            var is_a = $('#is_a_'+marker.id).val();
            var is_e = $('#is_e_'+marker.id).val();
            var is_out = $('#is_e_'+marker.id).val();
            var d_a = $('#d_a_'+marker.id).val();
            var d_e = $('#d_e_'+marker.id).val();
            var giudizio_e = '';
            var giudizio_a = '';
            var giudizio_max_e = '';
            var giudizio_max_a = '';
            if (qta_e <= 2) {
		giudizio_e = 'Irrisoria';
	    } else if (qta_e == 3 ) {
                giudizio_e = 'Scarsa';
            } else if (qta_e < 6 && qta_e > 3 ) {
                giudizio_e = 'Sufficiente';
            } else if (qta_e > 5 && qta_e < 8) {
                giudizio_e = 'Discreta';
            } else if (qta_e > 7 && qta_e < 10 ) {
                giudizio_e = 'Buona'
            } else if (qta_e > 9 ) {
                giudizio_e = 'Ottima'
            }
            if (qta_a <= 2) {
		giudizio_a = 'Irrisoria';
            } else if (qta_a === 3 ) {
                giudizio_a = 'Scarsa';
            } else if (qta_a < 6 && qta_a > 3 ) {
                giudizio_a = 'Sufficiente';
            } else if (qta_a > 5 && qta_a < 8) {
                giudizio_a = 'Discreta';
            } else if (qta_a > 7 && qta_a < 10 ) {
                giudizio_a = 'Buona'
            } else if (qta_a > 9 ) {
                giudizio_a = 'Ottima'
            }

            if (qta_max_e <= 3 ) {
                giudizio_max_e = 'Scarsa';
            } else if (qta_max_e < 6 && qta_max_e > 3 ) {
                giudizio_max_e = 'Sufficiente';
            } else if (qta_max_e > 5 && qta_max_e < 8) {
                giudizio_max_e = 'Discreta';
            } else if (qta_max_e > 7 && qta_max_e < 10 ) {
                giudizio_max_e = 'Buona'
            } else if (qta_max_e > 9 ) {
                giudizio_max_e = 'Ottima'
            }

            if (qta_max_a <= 3 ) {
                giudizio_max_a = 'Scarsa';
            } else if (qta_max_a < 6 && qta_max_a > 3 ) {
                giudizio_max_a = 'Sufficiente';
            } else if (qta_max_a > 5 && qta_max_a < 8) {
                giudizio_max_a = 'Discreta';
            } else if (qta_max_a > 7 && qta_max_a < 10 ) {
                giudizio_max_a = 'Buona'
            } else if (qta_max_a > 9 ) {
                giudizio_max_a = 'Ottima'
            }

            var text ='';
            var colour = $('#color_'+marker.id).val();
            data = '<b>'+name+'</b><br>'+
                'Altitudine: '+alti+ ' s.l.m <br><br>';
            if (colour == 'red-dot.png') {
                text = 'non ci sono le condizioni adatte per la buttata';

            } else if (colour == 'yellow-dot.png') {
                text = 'Condizioni favorevoli che preparano la buttata <br><br> ';
                if (is_a ==1) {
                    text += '<b><u>Boletus Aereus/Aestivalis</u></b><br>'+
                        'Giorni mancanti: '+d_a+'<br>'+
                        'Quantità: '+giudizio_a+' / ' + giudizio_max_a+'<br><br>'
                }
                if (is_e ==1) {
                    text += '<b><u>Boletus Edulis / Pinophilus</u></b><br>'+
                        'Giorni mancanti: <b>' +d_e+'</b><br>'+
                        'Quantità: <b>'+giudizio_e+' / '+ giudizio_max_e+'</b><br>'
                }
            } else if (colour == 'green-dot.png') {
                //luce verde
                text = 'Condizioni favorevoli alla produzione <br> ';
                if (is_a ==1) {
                    text += '<b><u>Boletus Aereus/Aestivalis</u></b><br>'+

                        'Quantità: '+giudizio_a+' / ' +giudizio_max_a +'<br><br>'
                }
                if (is_e ==1) {
                    text += '<b><u>Boletus Edulis / Pinophilus</u></b><br>'+

                        'Quantità: <b>'+giudizio_e+' / ' + giudizio_max_e+'</b><br>'
                }
            } else if (colour == 'blue-dot.png') {
                text = 'Buttata in esaurimento <br> ';
            } else {
                text = 'Dati non sufficienti per poter elaborare una previsione <br> ';
            }
            data = data + text;
            infowindow = new google.maps.InfoWindow({
                content: data
            });
            infowindow.open(map,marker);
        }
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmTgtvhnXoOykL3rlCmPbPAKXDCRD52vQ&callback=initMap"
        async defer></script>
@endsection
@section('footer')
    @include('footer')
@endsection