@extends('layouts.index')

@section('content')

    <div class="content pt-3 pb-5 container-fluid  ">
        {{-- Breadcrumb Section --}}
        @php
            $pages = [] ; $page = [] ;
            $page['title'] = __('lang.home') ; $page['route'] = route('home') ; $page['color'] = 'text_3' ;
            $pages[] = $page ;
            $page['title'] = __('lang.branches') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_1' ;
            $pages[] = $page ;
        @endphp
        @include('components.breadcrumb',$pages)
		<div class="row ">
			<div class="row mb-md-0 mb-2">
				<div class="col-12">
					<h6 class="col-12 fb-700 color-greyish-brown font-24 d-none"> {{ __('lang.branches')}} </h6>

 				</div>
			</div>
        </div>
        <section class="container-fluid  ">
            <div class="row mt-1 branches-list-items ">
                <div class="cities-div">

                    <select name="brnaches_cities" id="brnaches_cities" class="form-control  select-2 ">
                        <option value="0"  id="city-0" >{{__('lang.choosecity')}}</option>
                        @foreach($cities as $city)
                            <option value="{{ $city->cities_id }}"  id="city-{{ $city->cities_id }}"  >{{$city->cities_title}}</option>
                        @endforeach
                    </select>
                    <ul class="p-0 d-md-block d-none">
                        @foreach($branches as $branch)
                        <li class="branch-cities branch-cities-{{ $branch->FK_cities_id }} branchesli-{{ $branch->branches_id }}" onClick="selectBranch({{ $branch->branches_id }})">

                            <div class="row p-3 line-height-2" >
                                <div class="col-1 px-0 text-center">
                                    <i class="fa fa-map-marker-alt color-lipstick fa-2x" aria-hidden="true"></i>
                                </div>
                                <div class="col-11" >
                                        <h6 class="fb-700">{{ $branch->branches_title}}</h6>
                                        <span class="color-brown-grey">{{ $branch->branches_address}}</span>
                                        <div class="  {{$branch->branches_mobile ? '' : 'd-none'}}" > <span class="color-brown-grey"><i class="fa fa-phone-volume  {{ $dir == 'rtl' ? 'fa-flip-horizontal' : '' }}"></i> {{ $branch->branches_mobile}}</span> </div>
                                </div>


                            </div>
                        </li>
                        @endforeach
                    </ul>

                </div>

                <div class="col-md-12 position-relative"> <a aria-label="Nearest Branch" href="#" class="btn main-btn GetNearestBranchBtn  p-3 " onClick="GetNearestBranch();" >
                <i class="fa fa-dot-circle " aria-hidden="true"></i> {{__('lang.NearestBranch')}}
                </a> </div>

                <input id="pac-input" class="controls form-control d-none addproduct-input w-50 mt-2 " placeholder= "{{__('lang.search')}}">
                <div class="col-md-12" id="map" style="width:100%;height:600px;"></div>
            </div>
        </section>
    </div>

@endsection


@push('js')
    <script src="{{ asset('vendors/jquery/dist/jquery.min.js') }}"  crossorigin="anonymous"></script>
	<script>
        var activeInfoWindow;
        var map   ;
        var markers = [];

		function initMap() {
            // get current location
           var markerArray = [];
            var directionsService = new google.maps.DirectionsService;

            lat = parseFloat("{{ env('default_lat','29.967176910157654') }}")
            lng = parseFloat("{{ env('default_lng','31.21215951392594') }}")

 		    map = new google.maps.Map(document.getElementById('map'), {
		        center: {lat: lat, lng: lng},
		        zoom: 11,
		        mapTypeId: 'terrain'
		    });
		    // var marker = new google.maps.Marker({
		    //     position: {lat: lat, lng: lng},
		    //     map: map
		    // });
		    var infoWindow = new google.maps.InfoWindow({map: map});
            drawMarkers() ;
            // setMarkers(beaches);
            // document.getElementByClassName('reloadMarkers').addEventListener('click', drawMarkers);
		}
        function setMarkers(locations) {

            for (var i = 0; i < locations.length; i++) {
                var beach = locations[i];
                var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title: beach[0],
                    zIndex: beach[3]
                });

                // Push marker to markers array
                markers.push(marker);
            }
        }
        $('#brnaches_cities').on('change',function(){
            city_id = $('#brnaches_cities').val();
            reloadMarkers(city_id)
        })
        function reloadMarkers(city_id) {

            // Loop through markers and set map to null for each
            for (var i=0; i<markers.length; i++) {

                markers[i].setMap(null);
            }

            // Reset the markers array
            markers = [];
            if(city_id == 0){
                $('.branch-cities').removeClass('d-none');
            }else{
                $('.branch-cities').addClass('d-none');
                $('.branch-cities-'+city_id).removeClass('d-none');
            }
            // Call set markers to re-add markers
            drawMarkers(city_id);
        }
		function handleLocationError(browserHasGeolocation, infoWindow, pos) {
			infoWindow.setPosition(pos);
			infoWindow.setContent(browserHasGeolocation ?
		        'The Geolocation service failed.  ' :
		        'Your browser doesnt support geolocation. ');
		}

        function drawMarkers(city_id = 0){
            $('.branch-cities').removeClass('active');
            @foreach($branches as $branch)
                cities_id = "{{ $branch->FK_cities_id }}" ;
                if(city_id == 0 || city_id == cities_id){
                                        @if(is_array($branches_gps) && sizeof($branches_gps) >=2)
                    lat =  "{{ $branches_gps[0] }}"
                    lng =  "{{ $branches_gps[1] }}"
                    name =  "{{ $branch->branches_title }}"
                    address =  "{{ $branch->branches_address }}"
                    content = `
                            @include('branches.branch-marker',['branch'=>$branch])
                            `

                    lat = parseFloat(lat)
                    lng = parseFloat(lng)
                    icon = `{{asset('front/images/marker.png')}}`

                    var marker = new google.maps.Marker({
                        position: {lat: lat, lng: lng},
                        map: map,
                        animation: google.maps.Animation.DROP,
                        title: name,
                        zIndex: 1
                    });


                    markers.push(marker);
                    // Push marker to markers array
                    map.setZoom(11);
                    if(city_id == 0){
                        if(cities_id == "{{ $city_id }}"){
                            map.setCenter({lat: lat, lng: lng});
                        }
                    }else{
                        map.setCenter({lat: lat, lng: lng});
                    }
                    var infowindow = new google.maps.InfoWindow({
                        content: content
                    });
                    myFunctinForListener(marker, infowindow,lat,lng);
                    @endif
                }

            @endforeach
            // var geocoder = new google.maps.Geocoder();
            // geocoder.geocode({'address': "{{ $activeCity ? $activeCity->cities_title : ''}}"}, function(results, status) {
            //     if (status === 'OK') {
            //         map.setCenter(results[0].geometry.location);
            //     }
            // });
        }


        var myFunctinForListener = function(aMarker, aInfoWindow,lat,lng) {
            google.maps.event.addListener(aMarker, 'click', function() {
                if (activeInfoWindow) { activeInfoWindow.close();}
                aInfoWindow.open(map, aMarker);
                activeInfoWindow = aInfoWindow;
            });
            google.maps.event.addListener(aMarker, 'dblclick', function() {
                map.setCenter({lat:lat , lng:lng});
                map.setZoom(18)
            });
        }

        function GetNearestBranch() {
            // HTML5/W3C Geolocation
            if (navigator.geolocation) {
                var options = {
                    enableHighAccuracy: true,
                    timeout: 5000,
                    maximumAge: 0
                };
                navigator.geolocation.getCurrentPosition(success, error, options);
            }else{
                var infoWindow = new google.maps.InfoWindow({map: map});
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }
        function success(position) {
            var crd = position.coords;
            var latitude = position.coords.latitude ;
            var longitude = position.coords.longitude ;
            NearestBranch(latitude, longitude)
            // console.log('Your current position is:');
            // console.log('Latitude : ' + crd.latitude);
            // console.log('Longitude: ' + crd.longitude);
            // console.log('More or less ' + crd.accuracy + ' meters.');
        };
        function error(err) {
            alert('ERROR(' + err.code + '): ' + err.message);
        };

        // Callback function for asynchronous call to HTML5 geolocation
        function UserLocation(position) {
            NearestBranch(position.coords.latitude, position.coords.longitude);
        }

        // Convert Degress to Radians
        function Deg2Rad(deg) {
            return deg * Math.PI / 180;
        }

        function PythagorasEquirectangular(lat1, lon1, lat2, lon2) {
            lat1 = Deg2Rad(lat1);
            lat2 = Deg2Rad(lat2);
            lon1 = Deg2Rad(lon1);
            lon2 = Deg2Rad(lon2);
            var R = 6371; // km
            var x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2);
            var y = (lat2 - lat1);
            var d = Math.sqrt(x * x + y * y) * R;
            return d;
        }

        function NearestBranch(latitude, longitude) {
            @if(sizeof($branches) > 0)
                var minDif = 99999;
                var closest;
                var newcontent;
                var newlat = latitude ;
                var newlng = longitude ;
                var activeCity = "{{ $activeCity ? $activeCity->cities_id : '' }}" ;
                console.log('city-'+activeCity)
                @foreach($branches as $branch)
                                        @if(is_array($branches_gps) && sizeof($branches_gps) >=2)
                    lat =  "{{ $branches_gps[0] }}"
                    lng =  "{{ $branches_gps[1] }}"
                    name =  "{{ $branch->branches_title }}"
                    cities_id =  "{{ $branch->FK_cities_id }}"
                    content = `
                            @include('branches.branch-marker',['branch'=>$branch])
                            `
                    lat = parseFloat(lat)
                    lng = parseFloat(lng)
                    var dif = PythagorasEquirectangular(latitude, longitude, lat, lng);
                    // alert('dif:' +dif + 'name : ' + name);
                    if (dif < minDif) {
                        closest = name;
                        newcontent = content;
                        newlat = lat;
                        newlng = lng;
                        minDif = dif;
                        activeCity = cities_id ;
                    }
                    @endif
                @endforeach

                $('.nav-link').removeClass('active');
                $('#city-'+activeCity).addClass('active');

                map.setCenter({lat:newlat , lng:newlng});
                map.setZoom(18);
                var marker = new google.maps.Marker({
                    position: {lat: newlat, lng: newlng},
                    map: map
                });
                var infowindow = new google.maps.InfoWindow({
                    content: newcontent
                });
                $('.branch-cities').removeClass('active');
                if (activeInfoWindow) { activeInfoWindow.close();}
                infowindow.open(map, marker);
                activeInfoWindow = infowindow;
                myFunctinForListener(marker, infowindow);
            @endif

        }


        function selectBranch(branches_id) {
            @if(sizeof($branches) > 0)
                var minDif = 99999;
                var closest;
                var newcontent;
                var newlat  ;
                var newlng ;
                @foreach($branches as $branch)
                    if(branches_id == "{{ $branch->branches_id }}"){
                        var activeCity = "{{ $branch->FK_cities_id }}" ;
                                                @if(is_array($branches_gps) && sizeof($branches_gps) >=2)
                        lat =  "{{ $branches_gps[0] }}"
                        lng =  "{{ $branches_gps[1] }}"
                        name =  "{{ $branch->branches_title }}"
                        cities_id =  "{{ $branch->FK_cities_id }}"
                        content = `
                            @include('branches.branch-marker',['branch'=>$branch])
                            `
                        lat = parseFloat(lat)
                        lng = parseFloat(lng)

                        closest = name;
                        newcontent = content;
                        newlat = lat;
                        newlng = lng;
                        activeCity = cities_id ;
                        @endif
                    }

                @endforeach

                $('.branch-cities').removeClass('active');
                $('.branchesli-'+branches_id).addClass('active');

                map.setCenter({lat:newlat , lng:newlng});
                map.setZoom(18);
                var marker = new google.maps.Marker({
                    position: {lat: newlat, lng: newlng},
                    map: map
                });
                var infowindow = new google.maps.InfoWindow({
                    content: newcontent
                });
                if (activeInfoWindow) { activeInfoWindow.close();}
                infowindow.open(map, marker);
                activeInfoWindow = infowindow;
                myFunctinForListener(marker, infowindow);
            @endif

        }

    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{isset($account) && isset($account->accounts_google_map_key)&& $account->accounts_google_map_key  ? $account->accounts_google_map_key : env('map_key','')}}&libraries=places&callback=initMap"></script>

@endpush