@extends('layouts.app')

@section('title','Add Fixed Route')



@section('content')

<div class="main-content">

                <div class="page-content">
                    <div class="container-fluid">

                        <div class="row accounts_page">
                            <div class="col-12">
                            
                                <div class="row">
                                    <!-- Validation Errors -->
                                    @if ($errors->any())
                                    <div class="alert alert-danger" role="alert">
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                        <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                        </ul>
                                    </div>
                                    @endif
    
                                    @if (session('status'))
                                    <div class="alert alert-success" role="alert">
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                                {{ session('status') }}
                                    </div>
                                    @endif 
                                </div>
                                    
                                <form method="POST" action="{{route('save_fixed_routes')}}">

                                    @csrf
                                <div class="row">
                                         
                                    <div class="col-lg-12 col-md-12">
                                        <div class="card">
                                            <div class="card-header" style="padding: 0.8rem 1.25rem !important;">
                                                <span style="font-weight:bold;">ADD ROUTE</span>
                                            </div>
                                            <div class="card-body">
                                                <div class="row mb-3">
                                                    
                                                  <input type="hidden" name="company_name" value="{{Auth::user()->name}}">

                                                    
                                                </div><!-- inner form row end -->
                                                <div class="row mb-3">
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">ROUTE FROM:</label>
                                                        <input type="text" name="route_from" class="form-control" id="route_from">
                                                    </div>
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">ROUTE TO:</label>
                                                        <input type="text" name="route_to" class="form-control" id="route_to">
                                                    </div>
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">PRICE:</label>
                                                        <input type="text" name="price" class="form-control" id="horizontal-firstname-input">
                                                    </div>
                                                    
                                                </div><!-- inner form row end -->
                                                <div class="row mb-3">
                                                    <div class="col-lg-12 col-md-12" id="routes_map" style="height:260px;">
                                                       
                                                    </div>
                                                    
                                                    
                                                </div><!-- inner form row end -->

                                                
                                               
                                               
                                            </div>  
                                        </div>  <!-- card end -->
    
                                                
                                    </div><!-- first col outer 12 end -->

                                    
                                </div> <!-- outer row end -->

                                
                                

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="card">
                                            <div class="card-body">
                                                <button type="submit" class="btn btn-md btn-primary w-md btn-right distance_form">Save Route</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                </form>
        
                            
                                
                            </div> <!-- end col -->
                        </div> <!-- end row -->
        
                    </div> <!-- container-fluid -->
                </div>
                <!-- End Page-content -->

                
            </div>
            <!-- end main content-->



@endsection

<!-- init js -->
<script src="{{ asset('js/formadvanced.js') }}" defer></script>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDoaKFTxDtwt5P24Y6eB0XFsJppuQS6ICQ&callback=initMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
    
window.onload = function () {
        var myLatlng = new google.maps.LatLng(51.509865,-0.118092);
            var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        var map = new google.maps.Map(document.getElementById("routes_map"), myOptions);

        var postal = document.getElementById('route_from');
        var options = {componentRestrictions: {country: "uk"}
         }
        var autocomplete = new google.maps.places.Autocomplete(postal, options);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var location = autocomplete.getPlace();
            var start_point = location.formatted_address;
            geocoder = new google.maps.Geocoder();
            console.log(location['geometry'])
            lat = location['geometry']['location'].lat();
            lng = location['geometry']['location'].lng();
          
            var latlng = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({
                position: latlng,
                title: 'new marker',
                draggable: true,
                map: map
            });
            map.setCenter(marker.getPosition())
            
        });


        var postal1 = document.getElementById('route_to');
        var options1 = {componentRestrictions: {country: "uk"}
         }
        var autocomplete1 = new google.maps.places.Autocomplete(postal1, options1);
        google.maps.event.addListener(autocomplete1, 'place_changed', function () {
            var location1 = autocomplete1.getPlace();
            var destination = location1.formatted_address;
            geocoder1 = new google.maps.Geocoder();
            console.log(location['geometry'])
            lat1 = location1['geometry']['location'].lat();
            lng1 = location1['geometry']['location'].lng();

            var latlng1 = new google.maps.LatLng(lat1, lng1);
            //var latlng = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({
                position: latlng1,
                title: 'new marker',
                draggable: true,
                map: map
            });
            displayRoute(destination);
            
        });

        function displayRoute(destination){
            var start_point=$("#route_from").val();    
            //alert(start_point + destination);
            var option ={
                zoom : 2
            }; 

           var map = new google.maps.Map(document.getElementById('routes_map'),option); 
           var display = new google.maps.DirectionsRenderer();
           var services = new google.maps.DirectionsService();
           display.setMap(map);
            var request ={
                origin : start_point,
                destination:destination,
                travelMode: 'DRIVING'
            };
            services.route(request,function(result,status){
                if(status =='OK'){
                    display.setDirections(result);
                }
            });
        }
   
} 
  
  
</script>