<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Ethiopia</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">
<style>
body,input{
font-family:'Roboto';
}
#main-container{
width:100%;
}
  #map-container,#map-container-ethiopia {
  height: 600px;
  min-width: 310px;
  margin: 0 auto;
  width:75%;
  float:left;
  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{
float:left;
width:40%;
}
.mrc-country,.mrc-totalreg,.mrc-males,.mrc-females{
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;
}
.mrc-center,.mrc-demographic{
background:#0033a1;
padding:5px;
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;
}
.mrc-totalreg{
color:#f47527;
font-size:30px;
margin-top:5px;
margin-bottom:5px;
}
.mrc-country,.mrc-males,.mrc-females{
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:left;
font-size:30px;
color:#f47527
}
.right-box{
width:30%;
float:right;
}
.males-figure,.females-figure{
display:inline;
float:left;
color:#f47527;
padding-left:10px;
}
.males-label,.females-label{
font-size:20px;
color:#0033a1;
}
  </style>
</head>
<body>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap-datepicker.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/et/et-all.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="map-container">
</div>
<div id="sidebar">
<div class="datepickerdiv">
    <label for="select_date">Select date</label>
    <div class="input-group date">
      <input type="text" class="form-control" value="<?php echo date("d-m-Y");?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>

</div>
<div class="clear-float"></div>
<div class="mrc-center">All Centres</div>
<div class="country">Country: </div><div class="mrc-country">All</div>
<div class="clear-float"></div>
<div class="totalreg">Total Registered:</div> <div class="mrc-totalreg">6500</div>
<div class="clear-float"></div>
<div class="males">Male: </div><div class="mrc-males">150</div>
<div class="clear-float"></div>
<div class="females">Female: </div><div class="mrc-females">34</div>
<div class="clear-float"></div>
<div class="mrc-demographic">Demographic</div>

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

<div class="mrc-demographics-males">
<div class="left-box">
<div class="males-figure">20</div>%
<div class="males-label">MALE</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">20</div>%
<div class="females-label">FEMALE</div>
</div>
<div class="right-box"><img src='images/female-icon.png' alt="Female" title="Female"></div>
</div>
</div>

</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>
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', {
    chart: {
        map: 'countries/et/et-all'
    },

    title: {
        text: 'Region of Intended Destination in Ethiopia'
    },

    subtitle: {
        text: 'Click on map to get further information on sidebar'
    },
	credits: {
	enabled: false
	},
	legend:{
		title: {
                text: "Regions of intended destination in Ethiopia<br/><span style='font-size: 9px; color: #666; font-weight: normal'>(Click to hide)</span>",
		},
		enabled:true,
		valueDecimals: 0,
		symbolRadius: 0,
        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>
  <script>
  $('.input-group.date').datepicker({
    format: 'dd-mm-yyyy',
    //startDate: '-3d'
});
  </script>
</body>
</html>