@extends('layouts.front-end.app')

@section('title',\App\CPU\translate('Where To Find Us'))

@push('css_or_js')
    <meta property="og:image" content="{{asset('storage/app/public/company')}}/{{$web_config['web_logo']->value}}"/>
    <meta property="og:title" content="Contact {{$web_config['name']->value}} "/>
    <meta property="og:url" content="{{env('APP_URL')}}">
    <meta property="og:description" content="{!! substr($web_config['about']->value,0,100) !!}">

    <meta property="twitter:card" content="{{asset('storage/app/public/company')}}/{{$web_config['web_logo']->value}}"/>
    <meta property="twitter:title" content="Contact {{$web_config['name']->value}}"/>
    <meta property="twitter:url" content="{{env('APP_URL')}}">
    <meta property="twitter:description" content="{!! substr($web_config['about']->value,0,100) !!}">
@endpush
@section('content')

<style>
.inner-product-head-title {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-weight: 900;
    font-size: 22px;
    position: relative;
    margin: 1.2rem;
}
.inner-product-info{
    text-align: right;
    font-weight: bold;
    font-size: 27px;
}
    #map_canvas{
        height: 50rem;
        width: 100%;
        margin: 0.6em;
        box-shadow: 1px 9px 8px 20px rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
    }
    .inner-product-title{
        margin-top: 3rem;
    }
</style>
	<div class="all">
		<div class="inner-product">
			<div class="inner-product-head d-flex align-items-center justify-content-center flex-wrap">
				<div class="inner-product-head-title">{{$branch->name}}</div>
			</div>
			</div>
			<!-- End inner-product-head -->

			<!-- Start inner-product-info-gp -->
			<div class="inner-product-info-gp">
				<!-- Start container-fluid -->
				<div class="container-fluid">
					<!-- Start row -->
					<div class="row">
						<!-- Start col -->
						<div class="col-lg-12">
							<!-- Start inner-product-gallery-gp -->
							<div class="inner-product-gallery-gp">
								<!-- Start innerProductGallery -->
								<div id="innerProductGallery" class="owl-carousel">
									<div class="item">
						                <div class="form-group has-success user">
						                    <input type="hidden" name="latitude" class="MapLat" value="{{$branch->latitude}}"  placeholder="Latitude" style="width: 161px;" >
						                    <input type="hidden" name="longitude" class="MapLon" value="{{$branch->longitude}}" placeholder="Longitude" style="width: 161px;" >
						                    <div id="map_canvas"></div>
						                </div>
									</div>
								</div>
								<!-- End innerProductGallery -->

							</div>
							<!-- End inner-product-gallery-gp -->
						</div>
						<!-- End col -->
						<!-- Start col -->
						<div class="col-lg-12">
							<!-- Start inner-product-info -->
							<div class="inner-product-info">
								<div class="section-title-content">
									<span class=" text-hov-text-secondary" style="color: #f57c00;font-weight: 90px"><div class="inner-product-title"><b>{{$branch->name}}</b></div></span>
									<div class="inner-product-desc">{{$branch->address_details}}</div>
									<span class=" text-hov-text-secondary" style="color: #f57c00;font-weight: 90px"><div class="inner-product-title"><b> :  تواصل معنا من خلال</b></div></span>
									<div class="inner-product-desc" style="direction:ltr" >{{$branch->contact_number}}</div>
								</div>
							</div>
							<!-- End inner-product-info -->
						</div>
						<!-- End col -->
					</div>
					<!-- End row -->
				</div>
				<!-- End container-fluid -->
			</div>
			<!-- End inner-product-info-gp -->
		</div>
@endsection


@push('script')
    <!-- map -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
         $(function () {
             var lat = {{$branch->latitude}},
                 lng = {{$branch->longitude}},
                 latlng = new google.maps.LatLng(lat, lng),
                 image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
             //zoomControl: true,
             //zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
             var mapOptions = {
                 center: new google.maps.LatLng(lat, lng),
                 zoom: 13,
                 mapTypeId: google.maps.MapTypeId.ROADMAP,
                 panControl: true,
                 panControlOptions: {
                     position: google.maps.ControlPosition.TOP_RIGHT
                 },
                 zoomControl: true,
                 zoomControlOptions: {
                     style: google.maps.ZoomControlStyle.LARGE,
                     position: google.maps.ControlPosition.TOP_left
                 }
             },
             map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
                 marker = new google.maps.Marker({
                     position: latlng,
                     map: map,
                     icon: image
                 });
             var input = document.getElementById('searchTextField');
             var autocomplete = new google.maps.places.Autocomplete(input, {
                 types: ["geocode"]
             });
             autocomplete.bindTo('bounds', map);
             var infowindow = new google.maps.InfoWindow();
             google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
                 infowindow.close();
                 var place = autocomplete.getPlace();
                 if (place.geometry.viewport) {
                     map.fitBounds(place.geometry.viewport);
                 } else {
                     map.setCenter(place.geometry.location);
                     map.setZoom(17);
                 }
                 moveMarker(place.name, place.geometry.location);
                 $('.MapLat').val(place.geometry.location.lat());
                 $('.MapLon').val(place.geometry.location.lng());
             });
             google.maps.event.addListener(map, 'click', function (event) {
                 $('.MapLat').val(event.latLng.lat());
                 $('.MapLon').val(event.latLng.lng());
                 infowindow.close();
                         var geocoder = new google.maps.Geocoder();
                         geocoder.geocode({
                             "latLng":event.latLng
                         }, function (results, status) {
                             console.log(results, status);
                             if (status == google.maps.GeocoderStatus.OK) {
                                 console.log(results);
                                 var lat = results[0].geometry.location.lat(),
                                     lng = results[0].geometry.location.lng(),
                                     placeName = results[0].address_components[0].long_name,
                                     latlng = new google.maps.LatLng(lat, lng);
                                 moveMarker(placeName, latlng);
                                 $("#searchTextField").val(results[0].formatted_address);
                             }
                         });
             });

             function moveMarker(placeName, latlng) {
                 marker.setIcon(image);
                 marker.setPosition(latlng);
                 infowindow.setContent(placeName);
                 //infowindow.open(map, marker);
             }
         });
    </script>
    <!-- end map -->
@endpush