@extends('admin.layouts.master')

@section('title')
  <h1 class="page-title">عرض الماكينة</h1>
@stop

@section('content')

<div class="row">
  <div class="col-lg-12 animatedParent animateOnce z-index-50">
    <div class="panel panel-default animated fadeInUp">
      <div class="panel-heading clearfix">
        @if(ACL::can('edit-'.$module))
        <a href="admin/{{$module}}/edit/{{$row->id}}" class="btn btn-primary">
            <i class="fa fa-edit"></i> تعديل
        </a>
        @endif
        <a href="admin/{{$module}}" class="btn btn-danger"><i class="fa fa-backward"></i> {{trans('admin.Go back')}}</a>

        <ul class="panel-tool-options">
          <li><a data-rel="collapse" href="#"><i class="icon-down-open"></i></a></li>
        </ul>
      </div>
      <div class="panel-body">
<div class="table-responsive">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered pull-left">
        <tr>
            <td width="25%" class="align-left">أسم أو كود الماكينة</td>
            <td width="75%" class="align-left">{{$row->title}}</td>
        </tr>
        <tr>
            <td width="25%" class="align-left">المنطقة</td>
            <td width="75%" class="align-left">{{@$row->area->title}}</td>
        </tr>
        <tr>
            <td width="25%" class="align-left">البنك</td>
            <td width="75%" class="align-left">{{@$row->bank->title}}</td>
        </tr>
        <tr>
            <td width="25%" class="align-left">العنوان</td>
            <td width="75%" class="align-left">{{$row->address}}</td>
        </tr>

        <tr>
            <td width="25%" class="align-left">المكان على الخريطة</td>
            <td width="75%" class="align-left">
              <div class="col-md-6">
                  <div style="padding:10px">
          			<div id="map" style="  height: 300px;
          			  width: 500px;height:300px"></div>
          		</div>
              </div>
            </td>
        </tr>

        <tr>
            <td width="25%" class="align-left">تاريخ التسجيل</td>
            <td width="75%" class="align-left">{{$row->created_at}}</td>
        </tr>
        <tr>
            <td width="25%" class="align-left">تاريخ التعديل</td>
            <td width="75%" class="align-left">{{$row->updated_at}}</td>
        </tr>

        <tr>
            <td width="25%" class="align-left">مفعل؟</td>
            <td width="75%" class="align-left">{{($row->published)?trans('admin.Yes'):trans('admin.No')}}</td>
        </tr>



    </table>
</div>
</div>
</div>
</div>

</div>
@stop


@section('javascripts')
        <script type="text/javascript">
		function convertDMS( lat, lng ) {
			var convertLat = Math.abs(lat);
			var LatDeg = Math.floor(convertLat);
			var LatMin = (Math.floor((convertLat - LatDeg) * 60));
			var LatCardinal = ((lat > 0) ? "n" : "s");

			var convertLng = Math.abs(lng);
			var LngDeg = Math.floor(convertLng);
			var LngMin = (Math.floor((convertLng - LngDeg) * 60));
			var LngCardinal = ((lng > 0) ? "e" : "w");

			return LatDeg + LatCardinal + LatMin  + "<br />" + LngDeg + LngCardinal + LngMin;
		}

        var map;

        function initMap() {

		var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);


          var latitude = {{ (double)$row->lat }}; // YOUR LATITUDE VALUE
          var longitude = {{ (double)$row->lng }}; // YOUR LONGITUDE VALUE
          var myLatLng = {lat: latitude, lng: longitude};
        if(!latitude){
          var latitude = 30.0121; // YOUR LATITUDE VALUE
          var longitude = 29.123434; // YOUR LONGITUDE VALUE
        }
            var myLatLng = {lat: latitude, lng: longitude};

            map = new google.maps.Map(document.getElementById('map'), {
              center: myLatLng,
              zoom: 17,
              disableDoubleClickZoom: true, // disable the default map zoom on double click
            });

			map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            marker = new google.maps.Marker({
              position: myLatLng,
              map: map
            });
            //polygon
			google.maps.event.trigger(marker, 'click');

			map.addListener('bounds_changed', function() {
			  searchBox.setBounds(map.getBounds());
			});
			searchBox.addListener('places_changed', function() {
			  var places = searchBox.getPlaces();

			  if (places.length == 0) {
				return;
			  }
			  var bounds = new google.maps.LatLngBounds();
			  places.forEach(function(place) {
				console.log(place);
				console.log(place.geometry.location.lat());
				var lat=place.geometry.location.lat();
				var lng=place.geometry.location.lng();

				console.log(lat + " > > " + lng);

				document.getElementById('lat').value = lat;
                document.getElementById('lng').value = lng;

                 function placeMarker(location) {
                    if ( marker ) {
                      marker.setPosition(location);
                    } else {
                      marker = new google.maps.Marker({
                        position: location,
                        map: map
                      });
                    }

					document.getElementById('lat').value = location.lat();
					document.getElementById('lng').value = location.lng();

					 google.maps.event.removeListener(markerListener);

					  markerListener = marker.addListener('click', function() {
						window.open("https://www.google.com.eg/maps/place/@"+location.lat()+","+location.lng()+",17z", '_blank');
					  });
                 }

                  placeMarker(place.geometry.location);


			  });
			});
			var markerListener = marker.addListener('click', function() {
				window.open("https://www.google.com.eg/maps/place/@"+latitude+","+longitude+",17z", '_blank');
			});
            google.maps.event.addListener(map,'click',function(event) {



                document.getElementById('lat').value = event.latLng.lat();
                document.getElementById('lng').value =  event.latLng.lng();
                  function placeMarker(location) {
                    if ( marker ) {
                      marker.setPosition(location);
                    } else {
                      marker = new google.maps.Marker({
                        position: location,
                        map: map
                      });
                    }
                  }

                  google.maps.event.addListener(map, 'click', function(event) {
                    placeMarker(event.latLng);
                  });

				  google.maps.event.removeListener(markerListener);
				  console.log(event.latLng);
				  markerListener = marker.addListener('click', function() {
					window.open("https://www.google.com.eg/maps/place/@"+event.latLng.lat()+","+event.latLng.lng()+",17z", '_blank');
				  });
            });
        }


        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDstoAu6EmJmishbUCKYj84Zb2M3lx-XjM&libraries=places&callback=initMap&language=ar"
        async defer></script>
@stop