@extends('Admin.components.layout')
@section('title')
Surgery
@endsection
@section('subtitle')
        Edit Surgery
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row mt-2">
            <div class="col-12">
                <div class="card  p-3">
                    <div class="card-body ">
                        @if ($errors->any())
                        <div class="row">
                            <div class="col-sm-6 col-sm-offset-3">
                                {!! implode('', $errors->all('<div class="alert alert-danger">:message</div>')) !!}
                            </div>
                        </div>
                        @endif
                        <form action="{{ route('admin.surgery.update',$id) }}" method="POST" name="surgery" id="surgery">
                            {{ csrf_field() }}
                            <div class="mb-4">
                                <label class="form-label ">Surgery Name ::</label>
                                <input type="text" class="form-control" id="surgery_name" name="surgery_name"
                                    @if (isset($data)) value="{{ $data->name }}" @endif>
                            </div>
                              <div class="mb-4">
                                <label class="form-label ">Surgery Post Code :</label>
                                <input type="text" class="form-control" id="surgery_postCode" name="surgery_postCode"
                                    @if (isset($data)) value="{{ $data->post_code }}" @endif>
                            </div>
                            <div class="mb-4">
                                <label for="website">Surgery Address:</label>
                                <input id="autocomplete" style="z-index: 0;left:113px;top:10px!important;background: rgb(255, 255, 255);width: 85%;" class="form-control chamankaka" type="text" placeholder="Enter a location"  name="location"  value="{{$data->address}}" >
                            </div>
                            <div class="mb-4">
	                        <div class="map" id="map" style="width: 100%; height: 300px;"></div>
	                    </div>
                        <input type="hidden" value="{{$data->latitude}}" name="hidden_lat" id="hidden_lat">
                        <input type="hidden" value="{{$data->longitude}}" name="hidden_long" id="hidden_long">
                            <x-submitbutton />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    
<script nonce="{{$cspNonce}}" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&amp;libraries=places&key=AIzaSyBo3KpktOeAR6lKN3oWHl5IAw9a7FHGG24"></script>
<script nonce="{{$cspNonce}}">
function initialize() {
	var lati=23.0225;
	var longi=72.5714;
	var latlng = new google.maps.LatLng(lati,longi);
	var map = new google.maps.Map(document.getElementById('map'), {
                center: latlng,
                zoom: 13
            });
    var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      draggable: true,
      anchorPoint: new google.maps.Point(0, -29)
   });
    var input = document.getElementById('autocomplete');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    var geocoder = new google.maps.Geocoder();
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();   
    autocomplete.addListener('place_changed', function() {
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }
  
        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }
       
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);          
    
        bindDataToForm(place.formatted_address,place.geometry.location.lat(),place.geometry.location.lng());
        infowindow.setContent(place.formatted_address);
        infowindow.open(map, marker);
       
    });
    // this function will work on marker move event into map 
    google.maps.event.addListener(marker, 'dragend', function() {
        geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[0]) {        
              bindDataToForm(results[0].formatted_address,marker.getPosition().lat(),marker.getPosition().lng());
              infowindow.setContent(results[0].formatted_address);
              infowindow.open(map, marker);
          }
        }
        });
    });
}
function bindDataToForm(address,lat,lng){
    $("#hidden_lat").val(lat);
    $("#hidden_long").val(lng);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
@endsection