@extends('layout.master')
@section('title', 'COVID-19 Heat Map')
@section('map_test', '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,
}
});
map.addSource('maine', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': 
[
[2.7063876,6.4524621],[2.7101583,6.4561129],[2.7137942,6.4590211],[2.7196114,6.4593849],[2.7228835,6.4586577],[2.7326999,6.4579306],[2.735446,6.4579306],[2.7396071,6.4544444],[2.744411,6.4490752],[2.7479434,6.449358],[2.7526058,6.4511948],[2.7586814,6.4520426],[2.7636267,6.4517598],[2.7687131,6.4513359],[2.7737998,6.4524665],[2.7759191,6.4524665],[2.779169,6.4520426],[2.784114,6.4527488],[2.7863747,6.4550095],[2.7899071,6.4574113],[2.794146,6.4593897],[2.7992324,6.4600959],[2.806297,6.4588246],[2.813079,6.4559984],[2.8183068,6.4545856],[2.823676,6.4514771],[2.8284799,6.4468145],[2.8315884,6.4448366],[2.8330013,6.443141],[2.8421854,6.4439888],[2.8525506,6.4499712],[2.853846,6.4517021],[2.854747,6.453578],[2.8558959,6.457809],[2.8578075,6.4600401],[2.8595861,6.4677472],[2.8664941,6.4713826],[2.8686754,6.4717464],[2.8737654,6.4706554],[2.8799461,6.4699283],[2.8853997,6.4735641],[2.889399,6.476109],[2.8930346,6.4801083],[2.8952664,6.4848509],[2.8966705,6.4877434],[2.8966705,6.4917426],[2.8963069,6.4950147],[2.894489,6.4990144],[2.8922748,6.5019631],[2.8979968,6.5025811],[2.9013795,6.5019121],[2.9035105,6.5014906],[2.906568,6.503921],[2.9094249,6.5043669],[2.9141568,6.5039492],[2.9166039,6.5031738],[2.920191,6.501204],[2.9242739,6.502636],[2.927864,6.502039],[2.9302274,6.5018067],[2.9357768,6.5012622],[2.938553,6.5012546],[2.9415778,6.501246],[2.944457,6.501071],[2.9467129,6.5009341],[2.9486417,6.5002646],[2.9525069,6.5012598],[2.9571589,6.5014091],[2.963525,6.5018239],[2.9693998,6.501585],[2.9741329,6.5011668],[2.976499,6.500958],[2.9804989,6.5015831],[2.9867839,6.5025649],[2.9911069,6.500926],[2.9946159,6.500896],[2.999267,6.5010428],[3.0045709,6.5007148],[3.011099,6.499999],[3.0157498,6.5001459],[3.0204829,6.4997292],[3.0229298,6.4989538],[3.028314,6.4980588],[3.0370459,6.4982662],[3.0416979,6.498414],[3.0440639,6.4982052],[3.047573,6.4981751],[3.0503499,6.499187],[3.0527159,6.4989781],[3.0550009,6.4993348],[3.063162,6.4994531],[3.0655278,6.4992442],[3.0708319,6.4989152],[3.073851,6.49823],[3.0796448,6.4985561],[3.084788,6.4993601],[3.0882968,6.4993291],[3.0906629,6.4991202],[3.0958666,6.4977775],[3.1005379,6.499506],[3.1039461,6.4994593],[3.1091088,6.500845],[3.1113938,6.5012021],[3.1143319,6.5010819],[3.1184119,6.5011411],[3.1216592,6.5001125],[3.123716,6.500813],[3.1301629,6.5006618],[3.1334299,6.5023298],[3.1362058,6.5033431],[3.140777,6.5040569],[3.143634,6.5045028],[3.1475145,6.5029192],[3.1556493,6.5018063],[3.1570178,6.504858],[3.1598748,6.5053048],[3.1632229,6.5064058],[3.1665698,6.5075078],[3.168775,6.508431],[3.1710609,6.5087891],[3.1746131,6.5074902],[3.1770743,6.508471],[3.179516,6.5098491],[3.1824576,6.5138955],[3.1848077,6.5167851],[3.1865715,6.5190969],[3.1893975,6.5214214],[3.19124,6.5229368],[3.1945743,6.5236259],[3.1970724,6.5248599],[3.2000021,6.5277481],[3.2039603,6.5294776],[3.2049669,6.5331841],[3.205135,6.5361028],[3.2052218,6.5395889],[3.2048189,6.542419],[3.2039248,6.5445948],[3.2039288,6.5471926],[3.2017364,6.5521765],[3.2015571,6.5554018],[3.2008404,6.559165],[3.1974355,6.5663333],[3.1963772,6.570621],[3.196181,6.5733223],[3.1968979,6.5761895],[3.1994068,6.5803108],[3.2074708,6.5883751],[3.2160725,6.5950055],[3.2297241,6.6010423],[3.2332827,6.6058512],[3.2353109,6.6098437],[3.237481,6.6141162],[3.2400075,6.6160254],[3.2405909,6.6181021],[3.2411167,6.623126],[3.241439,6.6253266],[3.2414772,6.6286273],[3.2393371,6.6307321],[3.23937,6.6339874],[3.2388512,6.6400094],[3.2392932,6.642241],[3.2400111,6.6458659],[3.2404732,6.6481991],[3.2413773,6.6541829],[3.241841,6.6598663],[3.2443193,6.6643219],[3.24659,6.6675777],[3.2483026,6.670033],[3.2495135,6.6721482],[3.2519843,6.6764641],[3.2543575,6.6816707],[3.2595443,6.6904917],[3.2611343,6.6931162],[3.2628776,6.6966028],[3.2650084,6.6967964],[3.2654372,6.6964534],[3.2666491,6.6954837],[3.2699753,6.6924591],[3.2763609,6.6866522],[3.27817,6.6854515],[3.280486,6.6839147],[3.2844986,6.681294],[3.2875978,6.6800971],[3.2908019,6.6788597],[3.2966136,6.6766152],[3.3041309,6.6737118],[3.3075425,6.6723943],[3.3095585,6.6716156],[3.3127941,6.6697073],[3.3171128,6.6671605],[3.3217615,6.6663861],[3.3267952,6.6668785],[3.3278841,6.666985],[3.3331109,6.6675496],[3.3360175,6.6681204],[3.3382813,6.6668901],[3.3422154,6.6658974],[3.3448733,6.6652269],[3.353651,6.658659],[3.3540427,6.6578242],[3.3546263,6.6571476],[3.3551293,6.656371],[3.3553103,6.6550364],[3.3565771,6.6534775],[3.3578542,6.651873],[3.3617262,6.6498243],[3.3629381,6.6495355],[3.3639061,6.6492213],[3.3657472,6.6472606],[3.366924,6.6460603],[3.3675756,6.6450737],[3.3677398,6.6441383],[3.3677483,6.6433587],[3.3683836,6.6430254],[3.3690099,6.6428832],[3.369086,6.641239],[3.3691369,6.6398861],[3.3699896,6.6395326],[3.3704949,6.6390445],[3.3766951,6.6384935],[3.4343681,6.6373044],[3.4482817,6.640583],[3.4576634,6.6394334],[3.4564089,6.6419148],[3.454292,6.6444769],[3.4525749,6.6522512],[3.4494673,6.6578445],[3.443666,6.6658353],[3.4439797,6.6668511],[3.4448213,6.6682215],[3.4457259,6.6691594],[3.4465786,6.6700098],[3.4475557,6.6704294],[3.4477879,6.6705893],[3.4479761,6.6718328],[3.4483043,6.6726139],[3.4489297,6.6737332],[3.4494003,6.6734318],[3.4499762,6.6722817],[3.4502093,6.6717322],[3.4505521,6.6713961],[3.4513077,6.6709932],[3.4522933,6.6706988],[3.454018,6.6702452],[3.4544865,6.6701234],[3.4547448,6.6700234],[3.4550469,6.6698842],[3.4563517,6.6689622],[3.457435,6.6682847],[3.4584309,6.6679447],[3.4589409,6.6677853],[3.4597632,6.6675282],[3.4613704,6.6674065],[3.4615961,6.6675343],[3.4622772,6.6695824],[3.4623825,6.6697361],[3.4626921,6.6698591],[3.4632184,6.6698715],[3.463689,6.6706782],[3.4632222,6.6719029],[3.4634785,6.6730399],[3.4636103,6.6731832],[3.4641349,6.6737533],[3.4642658,6.6746023],[3.464011,6.6754262],[3.4617199,6.6772835],[3.4610682,6.6793185],[3.4614475,6.681564],[3.4614599,6.6834213],[3.4611874,6.6840363],[3.4633373,6.68396],[3.5964214,6.6823397],[3.60104,6.6823413],[3.699962,6.682375],[3.7078649,6.6830339],[3.8153736,6.6821084],[3.9168366,6.6807041],[3.919335,6.6806612],[3.9694292,6.6797976],[3.9726309,6.6798066],[4.007935,6.6799942],[4.0108246,6.6799774],[4.0335988,6.6799784],[4.0345872,6.6799812],[4.0501803,6.6800251],[4.073162,6.6792526],[4.0785269,6.6791763],[4.0914806,6.6789927],[4.0912961,6.6769614],[4.0924043,6.6751146],[4.0927733,6.6725287],[4.0942511,6.670682],[4.0918502,6.667912],[4.0903725,6.6660652],[4.0914806,6.6623716],[4.0918502,6.6603398],[4.0933274,6.6586776],[4.0925888,6.6564617],[4.095231,6.6515193],[4.0914806,6.6525831],[4.0905575,6.6507363],[4.0896338,6.6483355],[4.0879721,6.6448269],[4.0853862,6.6427951],[4.084463,6.6398401],[4.0815081,6.6376243],[4.0789226,6.6374393],[4.0767063,6.6370702],[4.0745591,6.6356387],[4.0704268,6.6331916],[4.0683955,6.6331916],[4.0666932,6.6348939],[4.0643324,6.6361465],[4.0615624,6.6367006],[4.058792,6.635962],[4.0578689,6.6339302],[4.0586075,6.6298676],[4.0576838,6.6274667],[4.0565757,6.6246963],[4.0538057,6.6210027],[4.0504812,6.6191559],[4.0514049,6.6160164],[4.0538057,6.6143541],[4.0565318,6.6110816],[4.0560225,6.6088762],[4.0559334,6.6056561],[4.0558752,6.6035533],[4.0575742,6.5994935],[4.0574993,6.5964398],[4.0592617,6.594276],[4.0611199,6.5884509],[4.0620793,6.5861592],[4.0632047,6.5826807],[4.0648865,6.5805573],[4.0660976,6.5756927],[4.0662841,6.5715475],[4.0670585,6.56955],[4.0654406,6.5667062],[4.064938,6.562396],[4.068231,6.5635519],[4.0717248,6.5624356],[4.0743693,6.5622997],[4.0763353,6.5616217],[4.0802678,6.5604014],[4.0833868,6.5589776],[4.086099,6.558774],[4.0871886,6.5609107],[4.0886077,6.5626388],[4.0906419,6.5618253],[4.0911674,6.5585094],[4.0896191,6.5559621],[4.0919718,6.5552826],[4.0953669,6.5507331],[4.093583,6.5492892],[4.094737,6.5459814],[4.1000999,6.545557],[4.1030377,6.545908],[4.1063532,6.5464501],[4.1094793,6.5468969],[4.1094793,6.5522566],[4.1105961,6.5556064],[4.1105961,6.5582862],[4.1164025,6.5634227],[4.1199755,6.5649858],[4.122209,6.5663257],[4.1246652,6.5685592],[4.1289085,6.5710154],[4.1323084,6.5712585],[4.1382674,6.5728474],[4.1430029,6.5750866],[4.1460809,6.5776148],[4.150186,6.5803957],[4.1556157,6.5867524],[4.1597208,6.5905929],[4.1622371,6.5921822],[4.1663422,6.5933738],[4.1691503,6.5923529],[4.1715626,6.5915608],[4.1749124,6.5897746],[4.1782621,6.5886579],[4.179602,6.5864248],[4.1867484,6.5848613],[4.1941179,6.5855312],[4.1988076,6.5857549],[4.1995849,6.5884738],[4.2014874,6.5868711],[4.2043909,6.5855312],[4.207517,6.5839682],[4.2117604,6.5817351],[4.2126535,6.5786085],[4.2153334,6.5777149],[4.2174133,6.572403],[4.2180132,6.5696754],[4.2200364,6.5675168],[4.2219833,6.5654397],[4.2231082,6.5619607],[4.2253832,6.5611892],[4.228733,6.5576162],[4.2264995,6.5535965],[4.2276162,6.5515866],[4.2247127,6.5431004],[4.2222566,6.5377407],[4.2144402,6.5319343],[4.2111439,6.5280886],[4.206097,6.5252562],[4.2033209,6.5242429],[4.201116,6.5233202],[4.1983389,6.5223079],[4.1940097,6.5198951],[4.1918048,6.5189719],[4.1850299,6.517334],[4.1811098,6.5161438],[4.1783341,6.515131],[4.176371,6.5125098],[4.174899,6.5105429],[4.1739978,6.508667],[4.1677059,6.503633],[4.165502,6.5027089],[4.1605844,6.5006428],[4.1561536,6.4987845],[4.1550101,6.4966407],[4.1570109,6.4922099],[4.1583828,6.489768],[4.1594409,6.4872079],[4.1600126,6.4817767],[4.1609544,6.476819],[4.1610731,6.47472],[4.1648721,6.4746304],[4.168302,6.4742017],[4.1720184,6.47363],[4.174734,6.4720578],[4.1774496,6.4700565],[4.1828803,6.4684844],[4.186025,6.4670553],[4.189598,6.4664836],[4.1921705,6.4654832],[4.1937427,6.4631963],[4.2004603,6.4631963],[4.2034615,6.4619098],[4.2057485,6.4630532],[4.2077917,6.464179],[4.2133893,6.4644747],[4.2151817,6.4633393],[4.2173256,6.4630532],[4.2187547,6.4597659],[4.2199696,6.4554782],[4.2218279,6.4504757],[4.2237925,6.4486151],[4.2258295,6.4456162],[4.2279734,6.4447589],[4.2306889,6.4454737],[4.2334045,6.4454737],[4.2356914,6.4447589],[4.2374066,6.4419003],[4.2368831,6.4381728],[4.2434095,6.4361835],[4.2452673,6.4344683],[4.2499843,6.4337535],[4.2532716,6.4343252],[4.2539638,6.4362049],[4.2533425,6.4390416],[4.2543434,6.4413285],[4.2591456,6.442461],[4.2638086,6.4435606],[4.265706,6.4429007],[4.2684216,6.442472],[4.2724232,6.4427581],[4.2751388,6.4419003],[4.2762822,6.4396133],[4.2789978,6.4378986],[4.2812847,6.438756],[4.2840003,6.4367552],[4.2875732,6.4360404],[4.2911467,6.4366121],[4.2955769,6.4346113],[4.2987217,6.435183],[4.3019399,6.4387989],[4.3039383,6.4394708],[4.3092264,6.4394708],[4.3166174,6.4380403],[4.3240565,6.4377923],[4.3327354,6.439528],[4.3371991,6.439528],[4.3433985,6.4358082],[4.3446383,6.4338245],[4.3476143,6.431345],[4.3500938,6.4298573],[4.3508377,6.4276252],[4.3508377,6.4216833],[4.3508377,6.415349],[4.3508377,6.4002937],[4.351055,6.3670553],[4.3365281,6.3699875],[4.3225031,6.3721552],[4.2992562,6.3742312],[4.2434877,6.3803727],[4.2425775,6.3805871],[4.2416602,6.3808062],[4.2267292,6.3829957],[4.1940707,6.3870474],[4.1810459,6.3889026],[4.1052788,6.4025287],[4.0850871,6.4070707],[4.0510124,6.4131479],[4.0262931,6.4167728],[3.9971035,6.4206505],[3.9911108,6.4213886],[3.9609116,6.4224874],[3.9566665,6.4227772],[3.8452773,6.4261103],[3.7474999,6.4266663],[3.6941667,6.4197216],[3.6260536,6.4166052],[3.5666666,6.413888],[3.5349998,6.4124994],[3.4447222,6.4094439],[3.4312371,6.4077083],[3.4249169,6.4054665],[3.4028451,6.3944143],[3.4033622,6.3933898],[3.4036987,6.3924726],[3.4039822,6.3919092],[3.4040438,6.3914194],[3.403959,6.3900778],[3.3970742,6.3902085],[3.3934384,6.391299],[3.380292,6.3923371],[3.3676248,6.3945711],[3.3359943,6.398207],[3.3105443,6.4000247],[3.2640071,6.4007518],[3.2331035,6.4007518],[3.2022283,6.400775],[3.2005115,6.400724],[3.1806219,6.4001211],[3.1728033,6.3999479],[3.1649883,6.3997577],[3.1508091,6.3986667],[3.1293583,6.3983034],[3.1137247,6.3986667],[3.0951827,6.3972128],[3.0769048,6.396849],[3.0727308,6.3993716],[3.0689909,6.3966074],[3.062459,6.3961234],[3.0424626,6.3953962],[3.0231934,6.3946691],[3.0053782,6.3953962],[2.9941075,6.3957601],[2.9701118,6.3961234],[2.9512062,6.3953962],[2.9232111,6.3935785],[2.9010334,6.3935785],[2.8781283,6.392488],[2.850497,6.3917608],[2.8359542,6.3888521],[2.8123219,6.3873978],[2.789417,6.3833985],[2.7716019,6.382308],[2.7552414,6.3801265],[2.7352448,6.3761272],[2.7137942,6.3735819],[2.7069844,6.3725793],[2.7068315,6.3753144],[2.7067137,6.3774217],[2.706724,6.3796171],[2.7067232,6.3799893],[2.706657,6.3803919],[2.7066849,6.3819776],[2.7066321,6.3826951],[2.7066116,6.3834237],[2.7065279,6.3853638],[2.7065482,6.3891971],[2.7065089,6.3923692],[2.7066936,6.3934959],[2.7062895,6.3965081],[2.7069035,6.3991395],[2.7063632,6.4029756],[2.7071834,6.4060839],[2.7077389,6.4111353],[2.7081704,6.4138825],[2.7092445,6.416066],[2.7096436,6.4194641],[2.7099989,6.4212458],[2.7107057,6.425995],[2.7108309,6.4290537],[2.7109215,6.4318625],[2.7099521,6.4341216],[2.7098794,6.436261],[2.7085443,6.4394585],[2.7080936,6.4427469],[2.7075203,6.4471189],[2.7063876,6.4524621]
]

}
}
});
map.addLayer({
'id': 'maine',
'type': 'line',
'source': 'maine',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 2
}
});
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