@extends('frontend.layouts.app') 
@push('metas')
<title>Corona Details</title>

@endpush 
@section('body')

<section class="corona">
    <div class="container">
        <div class="row w-100 mx-0 margin-sm-device1">
            <div class="col-lg-4">
                <div class="total-detail">
                    <p class="total-head" >Total Confirmed</p>
                    <h4 class="total-number" id="confirmed"></h4>
                </div>
                <div class="by-country">
                    <p class="text-center">Confirmed Cases  by <br>
                    Country/Region
                    </p>
                    <div id="byregion">



                    </div>
                    
           
                   
                    </div>


        

              
                   
            </div>
            <div class="col-lg-4">
                <div class="total-detail">
                    <p class="total-head" >Total Recovered</p>
                    <h4 class="total-number" id="recovered"  style="color:green;"></h4>
                </div>
          


                    <div class="by-country">
                        <p class="text-center">Total Recovered Cases  by <br>
                        Country/Region
                        </p>
                        <div id="byrecovery">
    
    
    
                        </div>
                        
               
                       
                        </div>

                 
                   
            </div>
            <div class="col-lg-4">
                <div class="total-detail">
                    <p class="total-head" >Reported Deaths</p>
                    <h4 class="total-number" id="deaths"></h4>
                </div>
          


               

                        <div class="by-country">
                            <p class="text-center">Total Death Cases  by <br>
                            Country/Region
                            </p>
                            <div id="bydeaths">
        
        
        
                            </div>
                            
                   
                           
                            </div>
                   
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>
var add = function(arr) {
	return arr.reduce((a, b) => a + b, 0);
};

function getdata()
{
  axios.get('https://services1.arcgis.com/0MSEUqKaxRlEPj5g/arcgis/rest/services/Coronavirus_2019_nCoV_Cases/FeatureServer/1/query?where=1%3D1&outFields=*&orderByFields=Confirmed%20DESC&outSR=4326&f=json').then((res)=>{
var confirmed=[];
var recovered=[];
var deaths=[];
var bycountriesandregions=[];

getsumofconfirmed(res.data.features)
getsumofrecovered(res.data.features)
getsumofdeaths(res.data.features)
for(var i=0;i<res.data.features.length;i++)
{
    // console.log(res.data.features[i].attributes)
    confirmed.push(res.data.features[i].attributes.Confirmed)
    recovered.push(res.data.features[i].attributes.Recovered)
    deaths.push(res.data.features[i].attributes.Deaths)
  
}
var sum=add(confirmed)
var recov=add(recovered)
var deat=add(deaths)
$('#confirmed').text(sum.toLocaleString())
$('#deaths').text(deat.toLocaleString())
$('#recovered').text(recov.toLocaleString())

  }).catch((err)=>{
      console.log(err)
  })
}


function getsumofconfirmed(obj)
{
    var holder = {};

obj.forEach(function(d) {
  if (holder.hasOwnProperty(d.attributes.Country_Region)) {
    holder[d.attributes.Country_Region] = holder[d.attributes.Country_Region] + d.attributes.Confirmed;
  } else {
    holder[d.attributes.Country_Region] =  d.attributes.Confirmed;
  }
});

var bycountriesandregions = [];

for (var prop in holder) {
    bycountriesandregions.push('<div class="border-bottom1"> <p class="mb-0 p-design1"> <span class="number-death">'+ holder[prop].toLocaleString()+'</span> <span class="country-list">'+prop+'</span>  </p></div>');
}


$('#byregion').html(bycountriesandregions)
}



function getsumofrecovered(obj)
{
    var holder = {};

obj.forEach(function(d) {
  if (holder.hasOwnProperty(d.attributes.Country_Region)) {
    holder[d.attributes.Country_Region] = holder[d.attributes.Country_Region] + d.attributes.Recovered;
  } else {
    holder[d.attributes.Country_Region] =  d.attributes.Recovered;
  }
});

var bycountriesandregions = [];

for (var prop in holder) {
    bycountriesandregions.push('<div class="border-bottom1"> <p class="mb-0 p-design1"> <span class="number-death">'+ holder[prop].toLocaleString()+'</span> <span class="country-list">'+prop+'</span>  </p></div>');
}
$('#byrecovery').html(bycountriesandregions)
}


function getsumofdeaths(obj)
{
    var holder = {};

obj.forEach(function(d) {
  if (holder.hasOwnProperty(d.attributes.Country_Region)) {
    holder[d.attributes.Country_Region] = holder[d.attributes.Country_Region] + d.attributes.Deaths;
  } else {
    holder[d.attributes.Country_Region] =  d.attributes.Deaths;
  }
});

var bycountriesandregions = [];

for (var prop in holder) {
    bycountriesandregions.push('<div class="border-bottom1"> <p class="mb-0 p-design1"> <span class="number-death">'+ holder[prop].toLocaleString()+'</span> <span class="country-list">'+prop+'</span>  </p></div>');
}
$('#bydeaths').html(bycountriesandregions)
}
$(document).ready(function() {
 
setInterval(() => {
    var date = new Date();
   
       if ((date.getMinutes() % 5) == 0) {

        getdata(); // your method
       }
}, 60000);
getdata();

});
</script>
@endsection