@extends('layout.master')
@section('title', 'COVID-19 Heat Map')
@section('map_index', 'active')
@section('view_maps', 'active')
@section('levelCSS')
<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map {  width: 100%;height: 65vh }
</style>
@endsection

@section('body')
<style>
    .mapboxgl-popup {
        max-width: 400px;
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }
</style>
<div class="col-md-12">
    <div class="tab-content tab-transparent-content pb-0">
        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
            <div class="row">

                <div class="col-lg-12 stretch-card grid-margin grid-margin-lg-0">
                    <div class="card">
                        <div class="card-body">
                            <div class="container">
                                <div  class="mapcontainer map">
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label for="someID">State</label>
                                            <select name="state" onchange="changeMap(this)" id="state_id" required class="form-control">
                                                @if (count($states) > 1)
                                                <option value="" selected="selected" >Nigeria</option>
                                                @endif
                                                @foreach($states as $state)
                                                <option data-name="{{$state->state_name}}" value="{{$state->state_id}}"
                                                    {{$default_state_id == $state->state_id  ? 'selected' : ''}}>{{$state->state_name}}</option>
                                                    @endforeach
                                                </select>
                                                <div id="loading" class="text-success">loading...</div>
                                            </div>
                                        </div>
                                        <div id="map"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    @endsection

    @section('levelJS')
    <script>
        mapboxgl.accessToken = 'pk.eyJ1Ijoic2hvd2JveSIsImEiOiJjazhqdTBjMmEwYzJlM21xcWVjeHN6MzR3In0.BnoJXMzAewAu3-SqFOy4Yw';
        var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
        center: [8.6753,9.0820], // starting position [lng, lat] lagos
        boxZoom: false,
        zoom: 5 // starting zoom
    });
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl());
        var resp = {{str_replace('"', "", $arrayLga)}};
        var lgaArray = resp;
        console.log(lgaArray);
        function changeMap(arg) {
            var statename = $("#state_id").children(":selected").text();
            var stateid = $("#state_id").val();
            statename = statename.toLowerCase();
            console.log(statename)
            console.log(stateid);
            if (statename == "Nigeria" || statename == "" || statename == "-select state-" ) {
                statename = "nigeria";
                map.flyTo({
                    center: [8.6753,9.0820],
                    zoom: 5,
                    bearing: 0,
                    speed: 0.2,
                    curve: 1, 
                    easing: function(t) {
                        return t;
                    },
                    essential: true
                });
            }else{
                var lat = lgaArray[2*(stateid-1)];
                var long = lgaArray[2*(stateid-1) +1];
                map.flyTo({
                    center: [long,lat],
                    zoom: 8,
                    bearing: 0,
                    speed: 0.2, 
                    curve: 1, 
                    easing: function(t) {
                        return t;
                    },
                    essential: true
                });
            }
        } 
        function escapeHtml(text) {
  return text
      .replace("","'")
      .replace("&#039;",/'/g);
}
        var feat = [@php echo($statLga);@endphp]
        map.on('load', function() {
            map.addSource('places', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': feat
            }
        });

// Add a layer showing the places.
map.addLayer({
'id': 'places',
'type': 'circle',
'source': 'places',
'layout': {},
'paint': {
'circle-color': '#f08',
'circle-opacity': 0.4,
}
});
console.log(map.getCanvas().style)
$("#loading").css("display","none");
map.on('click', 'places', function(e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
 
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'places', function() {
    map.getCanvas().style.cursor = 'pointer';
});

// Change it back to a pointer when it leaves.
map.on('mouseleave', 'places', function() {
    map.getCanvas().style.cursor = '';
});

});
        $("select#state_id").trigger("change");

    </script>
    @endsection