<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>KSA</title>
<meta name="robots" content="noindex">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap-datepicker.css" type="text/css" rel="stylesheet">
<link href="//db.onlinewebfonts.com/c/e35b2e7467dec8d9ee2163558012da0b?family=Gill+Sans" rel="stylesheet" type="text/css"/> 
<style>
body,input{
font-family:'Roboto';
}
#main-container{
width:100%;
}
#maps{
overflow:hidden;
width:75%;
float:left;
}
#map-container {
height: 600px;
min-width: 310px;
margin: 0 auto;
width:100%;
border:0px solid #ccc; 
}
#map-container-ethiopia {
height: 600px;
min-width: 310px;
margin: 0 auto;
width:100%;
border:0px solid #ccc; 
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
#sidebar{
width:20%;
float:right;
border:1px solid#ccc;
padding:20px;
border-radius:2px;
}
.centername,.country,.totalreg,.males,.females,.minors{
float:left;
width:40%;
}
.minors{
	color:#0033a1;
	line-height:40px;
}
.mrc-country,.mrc-totalreg,.mrc-males,.mrc-females,.mrc-minors{
float:right;
width:40%;
}
div.clear-float {
clear:both;
font-size:0;
height:0;
border-bottom:1px dotted #ccc;
padding-top:10px;
margin-bottom:10px;
}
.datepickerdiv,
.datepickerdiv input
{
	cursor:pointer;
}
.mrc-center,.mrc-demographic,.ksa-returnees{
background:#0033a1;
padding:2px;
color:#fff;
text-align:center;
margin-bottom:15px;
font-size:20px;
border-radius:2px;
}
.mrc-center{
font-weight:bold;
}
.totalreg{
color:#0033a1;
margin-top:5px;
margin-bottom:5px;
font-size:15px;
}
.mrc-totalreg{
color:#f47527;
font-size:30px;
margin-top:5px;
margin-bottom:5px;
}
.mrc-minors{
	font-size:30px;
}
.mrc-country,.mrc-males,.mrc-females,.mrc-minors{
color:#f47527;
}
.males,.females,.country{
color:#0033a1;
}
.mrc-demographics-males{

float:left;
width:45%;
text-align:center;
}
.mrc-demographics-females{

width:45%;
float:right;
text-align:center;
}
.left-box{
width:70%;
float:right;
font-size:30px;
color:#f47527;
margin-top:15px;
}
.right-box{
width:30%;
float:left;
}
.males-figure,.females-figure{
display:inline;
float:left;
color:#f47527;
padding-left:10px;
}
.males-label,.females-label{
font-size:20px;
color:#0033a1;
}
</style>
<style>
.ajax-loader {
visibility: hidden;
background-color: rgba(255,255,255,0.7);
position: absolute;
z-index: +100 !important;
width: 100%;
height:100%;
}

.ajax-loader img {
position: relative;
top:50%;
left:50%;
}
</style>
<script>
function thousands_separators(num)
  {
    var num_parts = num.toString().split(".");
    num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return num_parts.join(".");
  }
</script>
</head>
<body>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootbox.all.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<!--<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>-->
<script src="https://code.highcharts.com/mapdata/countries/sa/sa-all.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/et/et-all.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
<div id="main-container">

<div id="maps">
<div id="map-container"></div>
<br>
<div id="map-container-ethiopia"></div>
</div><!--end maps-->

<div class="ajax-loader">
<img src="ajax-loader.gif" class="img-responsive" />
</div>

<div id="sidebar">
<div class="datepickerdiv">
<label for="select_date">Select date</label>
<div class="input-group date">
<input type="text" readonly="readonly" class="form-control" value="<?php echo date("M-Y");?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

</div>
<div class="clear-float"></div>
<div class="totalreg">Total Registered:</div> <div class="mrc-totalreg"></div>
<div class="clear-float"></div>
<!--<div class="males">Male: </div><div class="mrc-males"></div>
<div class="clear-float"></div>
<div class="females">Female: </div><div class="mrc-females"></div>
<div class="clear-float"></div>-->
<div class="minors">Total Minors: </div><div class="mrc-minors">27,357</div>
<div class="clear-float"></div>
<!--<div class="ksa-returnees">
Involuntary Returns
</div><!--top three-->

<div class="origin-bar-chart">
<script>
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Roboto'
}
},
lang: {
thousandsSep: ','
}
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'origin_container',
type: 'bar',
},
title: {
text: '',
},
subtitle: {
text: '',
},
credits: {
enabled: false
},
plotOptions: {
	bar: { 
	dataLabels: { 
	enabled: true,
	inside:true,
	align:'center',
	color:'#fff',
	style: {
           textOutline: false 
           },
	}
	}
	},
xAxis: {
categories: []
},
yAxis: {
title: {
text: ''
},
labels: {
     enabled:false
    },
	gridLineWidth: 0,
plotLines: [{
value: 0,
width: 1,
color: '#0033a1'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ thousands_separators(this.y);
}
},
legend: {
enabled:false,
},
series: [],
}

$.getJSON("fetchreturnees.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
//options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<div id="origin_container_hidden"></div>
<div class="totalreg">Involuntary returns: </div><div class="mrc-minors">35%</div>
</div><!--end origin bar chart-->


<div class="clear-float"></div>

<div class="mrc-demographic">Demographics</div>

<div class="mrc-demographics-container">

<div class="mrc-demographics-males">
<div class="left-box">
<div class="males-figure"></div>%
</div>
<div class="right-box"><img src='images/male-icon.png' alt="Male" title="Male"></div>
</div>
<div class="mrc-demographics-females">
<div class="left-box">
<div class="females-figure"></div>%
</div>
<div class="right-box"><img src='images/female-icon.png' alt="Female" title="Female"></div>
</div>
</div>

<div class="clear-float"></div>

<div class="ksa-returnees">
Duration of stay in KSA
</div><!--top three-->

<div class="origin-bar-chart">
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'duration_container',
type: 'bar',
events: {
      load: function() {
        const chart = this,
          points = chart.series[0].data,
          options = {
            dataLabels: {
              inside: false,
              style: {
                color: '#0033a1'
              }
            }
          };

        points.forEach(function(point) {
          if (point.shapeArgs.height < 30) {
            point.update(options, false);
          }
        });

        chart.redraw();
      }
    }
},
title: {
text: '',
},
subtitle: {
text: '',
},
credits: {
enabled: false
},
plotOptions: {
	bar: { 
	dataLabels: { 
	enabled: true,
	inside:false,
	align:'right',
	format: '{point.y}%',
	style: {
           textOutline: false,
		    color: '#fff',
           },
	}
	}
	},
xAxis: {
categories: []
},
yAxis: {
title: {
text: ''
},
labels: {
     enabled:false
    },
gridLineWidth: 0,
plotLines: [{
value: 0,
width: 1,
color: '#0033a1'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y+'%';
}
},
legend: {
enabled:false,
},
series: [],
}

$.getJSON("fetchduration.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
//options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<div id="duration_container" style="height:150px;"></div>
</div><!--end duration bar chart-->

</div>
</div>

<!--MRC centres lat long
Bosaso--11.276353,49.186671
Hargeisa--9.5683,44.0538
Togochale--9.522937,43.176310
Dire Dawa--9.601315,41.850144
Metema--12.961757, 36.151510
Semera--11.793658,41.007714
Obock-11.964900,43.288144
-->


<script>
$(document).ready(function(){
$.ajax({
type:'POST',
url:'fetchallksa.php',
dataType: "json",
data:{},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){

$('.mrc-totalreg').html(thousands_separators(data.result.total));
$('.mrc-males').html(data.result.male);
$('.mrc-females').html(data.result.female);
$('.males-figure').html(data.result.malepercentage);
$('.females-figure').html(data.result.femalepercentage);
}else{
alert("No recorded migrants from this region...");
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
});

</script>
<script>
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
{"name":'sa-4293',"r-name":"", value:0},
{"name":'sa-tb', "r-name":"Tabuk",value:0},//Tabuk
{"name":'sa-jz', "r-name":"Jizan", value:14501},//Jizan
{"name":'sa-nj', "r-name":"Najran", value:804},//Najran
{"name":'sa-ri', "r-name":"Ar Riyad", value:70765},//Al Riyadh
{"name":'sa-md', "r-name":"Madinah", value:8646},//Madinah
{"name":'sa-ha', "r-name":"Ha'il", value:531},//Ha'il
{"name":'sa-qs', "r-name":"Al Quassim", value:19},//Al Qassim
{"name":'sa-hs', "r-name":"Al Hudud", value:0},//Al Hudud
{"name":'sa-jf', "r-name":"Al Jawf", value:0},//Al Jawf
{"name":'sa-sh', "r-name":"Ash Sharqiyah", value:3109},//Ash Sharqiyah
{"name":'sa-ba', "r-name":"Al Bahah", value:0},//Al Bahah
{"name":'sa-as', "r-name":"`Asir", value:5064},//Asir
{"name":'sa-mk', "r-name":"Makkah", value:101068}//Makkah
];

// Create the chart
Highcharts.mapChart('map-container', {
chart: {
map: 'countries/sa/sa-all'
},

title: {
text: '<span style="font-family:Gill Sans;font-size:20px;color:#0033a0;">Number of Migrants Returning from KSA to Ethiopia by Region of Residence<br></span><span style="font-family:Gill Sans;font-size:20px;color:#0033a0;">in KSA and Region of Intended Destination in Ethiopia</span>'
},

subtitle: {
text: ''
},
credits: {
enabled: false
},
legend:{
title: {
text: "Regions of residence in KSA<br/><span style='font-size: 9px; color: #666; font-weight: normal'>(Click to hide)</span>",
},
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemMarginTop: 5,
itemMarginBottom: 5,
enabled:true,
valueDecimals: 0,
symbolRadius: 2,
symbolHeight: 14
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},

colorAxis: {
dataClasses: [
{  
to: 0,
color:'#f7f7f7',
},
{  
from: 1,
to: 2500,
color:'#fad399',
}, {
from: 2500,
to: 10000,
color:'#f9bd4c',
}, {
from: 10000,
to: 50000,
color:'#fca91d',
}, {
from: 50000,
to: 100000,
color:'#f18522',
}, 
{
from:100000,
color:'#e84624',
}
]
},

series: [{
cursor: 'pointer',
point:{
events:{
click: function(){				
var region = this.name;
$.ajax({
type:'POST',
url:'fetchoneksa.php',
dataType: "json",
data:{region:region},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){

$('.mrc-totalreg').html(data.result.total);
$('.mrc-males').html(data.result.male);
$('.mrc-females').html(data.result.female);
$('.males-figure').html(data.result.malepercentage);
$('.females-figure').html(data.result.femalepercentage);
}else{
bootbox.alert("No recorded migrants from this region!", function(){ 
});
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//$('.mrc-center').html(this.name);
$('.mrc-country').html(this.country);
//$('.mrc-totalreg').html(this.totalreg);
//$('.mrc-males').html(this.males);
//$('.mrc-females').html(this.females);
}
}
},
joinBy: ['hc-key', 'name'],
data: data,
name: 'No. of Migrants',
states: {
hover: {
color: '#f56547'
},
select: {
color: '#f7f7f7',
},
},
allowPointSelect: true,
dataLabels: {
enabled: true,
format: '{point.properties.name}'
}
}]
});
</script>
<script>
$('.input-group.date').datepicker({
format: 'M-yyyy',
startView: "months", 
minViewMode: "months",
autoclose: true
//startDate: '-3d'
});

$('.input-group.date').datepicker().on('changeDate', function(e) {
    //$('#other-input').val(e.format(0,"dd/mm/yyyy"));
    //alert(e.date);
    //alert(e.format(0,"dd/mm/yyyy"));
    //console.log(e.date); 
});
</script>
<script>
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Roboto'
}
},
lang: {
thousandsSep: ','
}
});
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['et-be', 496],//Benshangul-Gumaz
['et-2837', 5034],//Addis Ababba
['et-ha', 538],//Harari
['et-sn', 10234],//Southern Nations
['et-ga', 63],//Gambela
['et-aa', 106704],//Oromiya
['et-so', 744],//Somali
['et-dd', 1375],//Dire Dawa
['et-ti', 104541],//Tigray
['et-af', 5903],//Afar
['et-am', 106613]//Amhara
];

// Create the chart
Highcharts.mapChart('map-container-ethiopia', {
chart: {
map: 'countries/et/et-all'
},

title: {
text: ''
},

subtitle: {
text: ''
},
credits: {
enabled: false
},
legend:{
title: {
text: "Regions of intended destination <br> in Ethiopia<br/><span style='font-size: 9px; color: #666; font-weight: normal'>(Click to hide)</span>",
},
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemMarginTop: 5,
itemMarginBottom: 5,
enabled:true,
valueDecimals: 0,
symbolRadius: 2,
symbolHeight: 14
},
mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'top'
}
},

colorAxis: {
dataClasses: [
{  
to: 0,
color:'#fff',
},
{  
from: 1,
to: 2500,
color:'#e8f5f5',
}, {
from: 2501,
to: 10000,
color:'#bcd9d8',
}, {
from: 10001,
to: 50000,
color:'#94bbba',
}, {
from: 50001,
to: 100000,
color:'#69a19f',
}, 
{
from:100001,
color:'#388481',
}
]
},

series: [{
data: data,
name: 'No. of Migrants',
states: {
hover: {
color: '#13aaa4'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
</script>
</body>
</html>