<h1>Contractors by location</h1>

<div class="ui five column center aligned stackable divided grid segment
contractor-checkbox">
<div class="column">
<div class="ui test toggle checkbox">
<input id = "cb-show-all" type="radio" checked="checked" name="trade_type"
class="trade_type">
<label>Show all</label>
</div>
</div>
<div class="column">
<div class="ui test toggle checkbox">
<input id = "cb-wallcovering" type="radio" name="trade_type"
class="trade_type">
<label>Wallcovering</label>
</div>
</div>
<div class="column">
<div class="ui test toggle checkbox">
<input id = "cb-painting" type="radio" name="trade_type" class="trade_type">
<label>Painting</label>
</div>
</div>
<div class="column">
<div class="ui test toggle checkbox">
<input id = "cb-carp-trades" type="radio" name="trade_type"
class="trade_type">
<label>Carpentry trades</label>
</div>
</div>
<div class="column">
<div class="ui test toggle checkbox">
<input id = "cb-tile" type="radio" name="trade_type" class="trade_type">
<label>Tile</label>
</div>
</div>
</div>
<!--div>
<div id="disable-input-search" class="ui fluid icon input" style="width: 100%;">
<input id="input-search-map" class="controls" type="text" placeholder="Search
by Zip Code or City or State">
<i class="search icon"></i>
</div>
</div-->
<div>

<div class="field">
<div class="fields">
<div class="twelve wide field">
<div id="disable-input-search" class="ui fluid icon input">
<input id="input-search-map" class="controls" type="text"
placeholder="Search by Zip Code or City or State">
<i class="search icon"></i>
</div>
</div>
</br>
<div class="four wide field">
<button id="edit_location" class="ui primary button">
 Edit location
</button>
</div>
</div>
</div>

</div>
<br>
<div id="search-resault-count">
</div>
<div class="ui divider"></div>
<div>
<div id="map" style='height: 800px;'></div>
</div>

<%= render :partial => "admin/admin_project_partials/unmatched_partials", locals: {

resource_name: 'admin_contractors', paginator: @paginator } %>

<script src="//maps.google.com/maps/api/js?
key=AIzaSyAOelPhroDkBL0Av928SeRsyEg8pGdjEsM&libraries=places"></script>
<script
src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.mi
n.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-
only/master/infobox/src/infobox_packed.js' type='text/javascript'></script> <!--
only if you need custom infoboxes -->

<!--link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/zf/jq-

2.2.3/dt-1.10.12/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/jq-2.2.3/dt-

1.10.12/datatables.min.js"></script-->

<script type="text/javascript">

$('#example').DataTable();

var rad = function(x) {

return x * Math.PI / 180;
};

getDistance(1, 2);

function getDistance(p1, p2) {

var R = 6378137; // Earth�s mean radius in meter
var dLat = rad(38.5816 - 39.7392);
var dLong = rad(121.4944 - 104.9903);
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(rad(39.7392)) * Math.cos(rad(38.5816)) *
Math.sin(dLong / 2) * Math.sin(dLong / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
alert(d);
return d; // returns the distance in meter
};

var a = "39.7392";
var b = "104.9903";
var c = "38.5816";
var d = "121.4944";

for(var i=0; i < 200; i++){

getDistanceFromLatLonInKm(a, b, c, d);
a++;
b++;
c++;
d++;
}

function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
var R = 6371; // Radius of the earth in km
var dLat = deg2rad(lat2-lat1); // deg2rad below
var dLon = deg2rad(lon2-lon1);
var a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2)
;
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km

console.log(d);

return d;
}

function deg2rad(deg) {
return deg * (Math.PI/180)
}

var tradeType = '';

var zipCode = '';
var city = '';
var state = '';
var stateShortName = '';
var lat = '';
var lng = '';

$("#disable-input-search").addClass('disabled');

$("#edit_location").on("click", function(){
$("#disable-input-search").removeClass('disabled');
$("#input-search-map").val('');
$("#input-search-map").focus();

zipCode = '';
city = '';
state = '';
stateShortName = '';
});

google.maps.event.addDomListener(window, 'load', initAutocomplete);

handler = Gmaps.build('Google');
// markers = null;
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
 initializeMap();
});

function initializeMap(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
$("#search-resault-count").html("<h3>There are <b style='color:red;'>" +
markers.length + "</b> contractors on map.</h3>");
}

function updateMapAfterSearch(tradeType, zipCode, city, state,

stateShortName, lat, lng){

$('.contractor-checkbox').addClass('loading');
$('.contractor-checkbox').addClass('disabled');
$("#disable-input-search").addClass('disabled');
$("#edit_location").addClass('disabled');

$(function () {
$.ajax({
type:"GET",
url:"/admin/contractors/search_contractors",
dataType:"json",
data: {tradeType: tradeType, zipCode: zipCode, city: city, state:
state, stateShortName: stateShortName, lat: lat, lng: lng},
success:function(result){
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
handler.removeMarkers(markers);
}

for(var i = 0; i < result.length - 1 ; i++ ){

for (var j = i+1; j < result.length; j++) {
if (result[i].lat == result[j].lat && result[i].lng ==
result[j].lng) {
result[j].infowindow += '<br>' + result[i].infowindow;
}
}
}

markers = [];
markers = handler.addMarkers(result);
handler.bounds.extendWith(markers);

if (markers.length == 1) {
handler.map.centerOn([result[0].lat, result[0].lng]);
handler.getMap().setZoom(12);
}
else {
if (lat != 0) {
handler.map.centerOn([lat, lng]);
handler.getMap().setZoom(6);
} else {
handler.map.centerOn([37.0902, -95.7129]);
handler.getMap().setZoom(4);
handler.fitMapToBounds();
}
 }

$('.contractor-checkbox').removeClass('loading');
$('.contractor-checkbox').removeClass('disabled');
$("#edit_location").removeClass('disabled');
if (markers.length == 0) {
$("#search-resault-count").text('No contractors.');
$("#search-resault-count").css('color', 'red');
} else {
$("#search-resault-count").html("<h3>There are <b
style='color:red;'>" + markers.length + "</b> contractors on map.</h3>");
$("#search-resault-count").css('color', 'black');
}
}
})
});
}

//switch click
$(".trade_type").bind('click', function() {

tradeType = $(this).attr('id');
updateMapAfterSearch(tradeType, zipCode, city, state, stateShortName,
lat, lng);
});

function initAutocomplete() {
// Create the search box and link it to the UI element.
var input = document.getElementById('input-search-map');
var options = {
types: ['geocode'], // (regions)
componentRestrictions: {country: "us"}
};

var autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
var addrs = place.address_components;
var types = [];

zipCode = '';
city = '';
state = '';
stateShortName = '';
lat = '';
lng = '';

if (addrs != null) {
for(var i = 0; i < addrs.length; i++) {
if(addrs[i].types.indexOf('postal_code') > -1) {
zipCode = addrs[i].long_name;
}
else if(addrs[i].types.indexOf('locality') > -1) {
city = addrs[i].long_name;
}
else if(addrs[i].types.indexOf('administrative_area_level_1') > -1)
{
state = addrs[i].long_name;
stateShortName = addrs[i].short_name;
 }
}
}
if (zipCode != '' || city != '' || state != '') {
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
}

if (zipCode == '' && city == '' && state == '') {

$("#search-resault-count").text('You have entered wrong search
value.');
$("#search-resault-count").css('color', 'red');
$("#disable-input-search").addClass('disabled');
} else {
updateMapAfterSearch(tradeType, zipCode, city, state, stateShortName,
lat, lng);
}
});
}
</script>

<!--link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/zf/jq-

2.2.3/dt-1.10.12/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/jq-2.2.3/dt-

1.10.12/datatables.min.js"></script-->