@extends('layouts.app')

@section('title','Settings')



@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_settings')}}">

                                    @csrf
                                <div class="row">
                                    @foreach($settings as $setting)      
                                    <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;">DROP-OFF SETTINGS</span>
                                            </div>
                                            <div class="card-body">
                                                <div class="row mb-3">
                                                  <input type="hidden" name="id" value="{{$setting->id}}">  
                                                  <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">HEATHROW DROP-OFF:</label>
                                                        <input type="text" name="heathrow_drop" class="form-control" id="horizontal-firstname-input" value="{{$setting->heathrow_drop}}">
                                                    </div>
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">LUTON DROP-OFF:</label>
                                                        <input type="text" name="luton_drop" class="form-control" id="horizontal-firstname-input" value="{{$setting->luton_drop}}">
                                                    </div>
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">STANSTED DROP-OFF:</label>
                                                        <input type="text" name="stansted_drop" class="form-control" id="horizontal-firstname-input" value="{{$setting->stansted_drop}}">
                                                    </div>
                                                    
                                                </div><!-- inner form row end -->

                                                <div class="row mb-3">
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">GATWICK DROP-OFF:</label>
                                                        <input type="text" name="gatwick_drop" class="form-control" id="horizontal-firstname-input" value="{{$setting->gatwick_drop}}">
                                                    </div>
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">CITY DROP-OFF:</label>
                                                        <input type="text" name="city_drop" class="form-control" id="horizontal-firstname-input" value="{{$setting->city_drop}}">
                                                    </div>
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">COLOR:</label>
                                                        <input type="color" name="color" class="form-control" id="horizontal-firstname-input" value="{{$setting->color}}" style="height:36px;">
                                                    </div>
                                                    
                                                </div><!-- inner form row end -->
                                                @endforeach
                                               
                                            </div>  
                                        </div>  <!-- card end -->
    
                                                
                                    </div><!-- first col outer 12 end -->

@foreach($settings as $setting)      
                                    <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;">INITIAL FIXED PRICE BY VEHICLE</span>
                                            </div>
                                            <div class="card-body">
                                                
                                                <div class="row mb-3">
                                                    <div class="col-lg-4 col-md-4">
                                                      
                                                       <label class="col-form-label">SALOON:</label>
                                                        <input type="text" name="saloon" class="form-control" id="horizontal-firstname-input" value="{{$setting->saloon}}">
                                                    </div>
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">ESTATE:</label>
                                                        <input type="text" name="estate" class="form-control" id="horizontal-firstname-input" value="{{$setting->estate}}">
                                                    </div>
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">EXECUTIVE:</label>
                                                        <input type="text" name="executive" class="form-control" id="horizontal-firstname-input" value="{{$setting->    executive}}">
                                                    </div>
                                                    
                                                    
                                                </div><!-- inner form row end -->

                                                <div class="row mb-3">
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">MPV:</label>
                                                        <input type="text" name="mpv" class="form-control" id="horizontal-firstname-input" value="{{$setting->mpv}}">
                                                    </div>
                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">MINIBUS:</label>
                                                        <input type="text" name="minibus" class="form-control" id="horizontal-firstname-input" value="{{$setting->minibus}}">
                                                    </div>

                                                    <div class="col-lg-4 col-md-4">
                                                       <label class="col-form-label">EIGHT SEATER:</label>
                                                        <input type="text" name="eight_seater" class="form-control" id="horizontal-firstname-input" value="{{$setting->    eight_seater}}">
                                                    </div>
                                                    
                                                    
                                                </div><!-- inner form row end -->

                                                @endforeach
                                               
                                            </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 Settings</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">
   $(document).ready(function() {
    $('select').selectpicker();
    var options = {
  componentRestrictions: {country: "uk"}
 };
    var autocomplete = new google.maps.places.Autocomplete($("#mapLocation")[0],options);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
           
      $('#data').html('<div>Postal Code: '+place.address_components[0].long_name+'</div><div>Road Name:'+place.address_components[1].long_name+'</div><div>City:'+place.address_components[2].long_name+'</div><div>Country:'+place.address_components[2].long_name+'</div>');
            console.log(place.address_components);
        });
});
window.onload = function () {
        var postal = document.getElementById('txtPostalCode');
        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();
            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);
            geocoder.geocode({ 'latLng': latlng }, function (results) {
                for (i = 0; i < results.length; i++) {
                    for (var j = 0; j < results[i].address_components.length; j++) {
                        for (var k = 0; k < results[i].address_components[j].types.length; k++) {
                            if (results[i].address_components[j].types[k] == "postal_code") {
                                zipcode = results[i].address_components[j].short_name;
                                $('.postal_code').val(zipcode);
                                var uppost=$('.postal_code').val();
                                var dp=uppost;
                                
                            }
                        }
                    }
                }
                var htm='<option value='+dp+'>'+ dp +'</option>';
                                $('.frommulti').append(htm);
                       /* $(".frommulti option[value='" + dp + "']").attr("selected", 1); */

                     //$("#txtPostalCode").val('');           
                                
            });
        });


        var postal1 = document.getElementById('to_zone');
        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();
            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);
            geocoder.geocode({ 'latLng': latlng1 }, function (results) {
                for (i = 0; i < results.length; i++) {
                    for (var j = 0; j < results[i].address_components.length; j++) {
                        for (var k = 0; k < results[i].address_components[j].types.length; k++) {
                            if (results[i].address_components[j].types[k] == "postal_code") {
                                zipcode = results[i].address_components[j].short_name;
                                $('.to_postal_code').val(zipcode);
                                var uppost=$('.to_postal_code').val();
                                var dp=uppost;
                                
                            }
                        }
                    }
                }
                var htm='<option value='+dp+'>'+ dp +'</option>';
                                $('.to_multi').append(htm);
                        /*$(".to_multi option[value='" + dp + "']").attr("selected", 1); */       
                    //$("#to_zone").val('');            
            });
        });
   
} 
  
  
</script>