@extends('admin.layouts.app')
@section('content')

@section('css')

<style>

.map-parent .map_canvas {
    position: relative;
    overflow: hidden;
    height: 500px !important;
    margin-top: 60px;
}
</style>



    
@endsection

<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">{{$section->title}}</h3>
            <div class="nk-block-des text-soft">

            </div>
        </div><!-- .nk-block-head-content -->
        <div class="nk-block-head-content">
            <div class="toggle-wrap nk-block-tools-toggle">
                <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                <div class="toggle-expand-content" data-content="pageMenu">
                    <ul class="nk-block-tools g-3">
                        <li class="nk-block-tools-opt">

                        </li>
                    </ul>
                </div>
            </div><!-- .toggle-wrap -->
        </div><!-- .nk-block-head-content -->
    </div><!-- .nk-block-between -->
</div><!-- .nk-block-head -->


{{-- @include('admin.components.alert') --}}

<div class="components-preview">
    <div class="nk-block nk-block-lg">
        <div class="card card-bordered">
            <div class="card-inner">
                {!! Form::model($geolocation, ['route' => $section->route, 'class' => 'form-validate', 'files' => true, 'enctype' => 'multipart/form-data', 'autocomplete' => 'off']) !!}
                @method($section->method)
                   
                    <div class="row g-4">
                        <!--<div class="col-lg-6">-->
                        <!--    <div class="form-group">-->
                        <!--        <label class="form-label" for="full-name-1">Address</label>-->
                        <!--        <div class="form-control-wrap">-->
                        <!--            {!! Form::text('address', null, ['class' => 'form-control', 'placeholder' => 'Address Name', 'required' => 'required', 'id' => 'address']) !!}-->
                        <!--        </div>-->
                        <!--        @if ($errors->has('category_name'))-->
                        <!--            <p class="error">{{ $errors->first('category_name') }}</p>-->
                        <!--        @endif-->
                        <!--    </div>-->
                        <!--</div>-->
                        
                        <!--<div class="col-lg-6">-->
                        <!--    <div class="form-group">-->
                        <!--        <label class="form-label" for="full-name-1">Latitude</label>-->
                        <!--        <div class="form-control-wrap">-->

                        <!--            {!! Form::text('latitude', null, ['class' => 'form-control latitude', 'placeholder' => 'latitude', 'required' => 'required', 'id' => 'latitude']) !!}-->
                        <!--        </div>-->
                        <!--        @if ($errors->has('latitude'))-->
                        <!--            <p class="error">{{ $errors->first('latitude') }}</p>-->
                        <!--        @endif-->
                        <!--    </div>-->
                        <!--</div>-->

                     
                        <!--<div class="col-lg-6">-->
                        <!--    <div class="form-group">-->
                        <!--        <label class="form-label" for="full-name-1">Longitutde</label>-->
                        <!--        <div class="form-control-wrap">-->

                        <!--            {!! Form::text('longitude', null, ['class' => 'form-control longitude', 'placeholder' => 'longitude', 'required' => 'required', 'id' => 'longitude']) !!}-->
                        <!--        </div>-->
                        <!--        @if ($errors->has('longitude'))-->
                        <!--            <p class="error">{{ $errors->first('longitude') }}</p>-->
                        <!--        @endif-->
                        <!--    </div>-->
                        <!--</div>-->
                        
                       


                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="full-name-1">Zip Code</label>
                                <div class="form-control-wrap">
                                    {!! Form::text('zip_code', null, ['class' => 'form-control zip_code', 'placeholder' => 'Zip', 'required' => 'required', 'id' => 'zip_code']) !!}
                                </div>
                            </div>
                        </div> 
<!-- 

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="full-name-1">State</label>
                                <div class="form-control-wrap">
                                    {!! Form::text('state', null, ['class' => 'form-control', 'placeholder' => 'state', 'required' => 'required', 'id' => 'city']) !!}
                                </div>

                            </div>
                        </div> -->
                    
                     
                      
                    
                        
                        @if($section->method == "PUT")
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label">Status</label>
                                <div class="form-control-wrap">
                                    {!! Form::select('status', ['1' => 'Active', '0' => 'Inactive'], null, ['class' => 'form-control form-select select2']); !!}
                                </div>
                            </div>
                        </div>
                        @endif
                            
                        
                        <div class="col-12">
                            <div class="form-group">
                                {!! Form::button('Save', ['type' => 'submit', 'class' => 'btn btn-outline-primary']) !!}

                            </div>
                        </div>
                    </div>
                    
                    
                    {!! Form::close() !!}
                    
                   
                     <div class="map-parent"> <div id="map_canvas" class="map_canvas"></div></div>
                 
            </div>
        </div>
    </div><!-- .nk-block -->
</div><!-- .components-preview -->

    




@section('scripts')
    <!--<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDONshsHU_XpNmLpcMKCBPPrxe_XIx3vYo&libraries=places&callback=initialize"></script>-->

//     <script>
//         function initialize() {

// 	var mapOptions, map, marker, searchBox, city,
// 		infoWindow = '',
// 		addressEl = document.querySelector( '#address' ),
// 		latEl = document.querySelector( '.latitude' ),
// 		longEl = document.querySelector( '.longitude' ),
// 	    ZipCodeEl = document.querySelector( '.zip_code' ),
// 		element = document.getElementById( 'map_canvas' );
//  	    city = document.querySelector( '.reg-input-city' );

// 	mapOptions = {
// 		// How far the maps zooms in.
// 		zoom: 15,
// 		// Current Lat and Long position of the pin/
// 		center: new google.maps.LatLng( 34.1678385, -118.5946153 ),
// 		// center : {
// 		// 	lat: -34.397,
// 		// 	lng: 150.644
// 		// },
// 		disableDefaultUI: false, // Disables the controls like zoom control on the map if set to true
// 		scrollWheel: true, // If set to false disables the scrolling on the map.
// 		draggable: true, // If set to false , you cannot move the map around.
// 		// mapTypeId: google.maps.MapTypeId.HYBRID, // If set to HYBRID its between sat and ROADMAP, Can be set to SATELLITE as well.
// 		// maxZoom: 11, // Wont allow you to zoom more than this
// 		// minZoom: 9  // Wont allow you to go more up.

// 	};

// 	/**
// 	 * Creates the map using google function google.maps.Map() by passing the id of canvas and
// 	 * mapOptions object that we just created above as its parameters.
// 	 *
// 	 */
// 	// Create an object map with the constructor function Map()
// 	map = new google.maps.Map( element, mapOptions ); // Till this like of code it loads up the map.

// 	/**
// 	 * Creates the marker on the map
// 	 *
// 	 */
// 	marker = new google.maps.Marker({
// 		position: mapOptions.center,
// 		map: map,
// 		// icon: 'locat-icon.png',
// 		draggable: true
// 	});

// 	/**
// 	 * Creates a search box
// 	 */
// 	searchBox = new google.maps.places.SearchBox( addressEl );

// 	/**
// 	 * When the place is changed on search box, it takes the marker to the searched location.
// 	 */
// 	google.maps.event.addListener( searchBox, 'places_changed', function () {
// 		var places = searchBox.getPlaces(),
// 			bounds = new google.maps.LatLngBounds(),
// 			i, place, lat, long, resultArray,
// 			addresss = places[0].formatted_address;

// 		for( i = 0; place = places[i]; i++ ) {
// 			bounds.extend( place.geometry.location );
// 			marker.setPosition( place.geometry.location );  // Set marker position new.
// 		}

// 		map.fitBounds( bounds );  // Fit to the bound
// 		map.setZoom( 15 ); // This function sets the zoom to 15, meaning zooms to level 15.
// 		// console.log( map.getZoom() );

// 		lat = marker.getPosition().lat();
// 		long = marker.getPosition().lng();
// 		latEl.value = lat;
// 		longEl.value = long;

// 		resultArray =  places[0].address_components;

// 		// Get the city and set the city input value to the one selected
// 		for( var i = 0; i < resultArray.length; i++ ) {
// 			if ( resultArray[ i ].types[0] && 'postal_code' === resultArray[ i ].types[0] ) {
// 				citi = resultArray[ i ].long_name;
			
// 				// city.value = citi;
				
// 				ZipCodeEl.value = citi;
// 				console.log("ZIP OR POSTAL ==>", citi );
// 			}
// 		}
        
//         //             console.log(resultArray)
//         // 		for( var i = 0; i <	 resultArray.length; i++ ) {
//         // 			if ( resultArray[ i ].types[0] && 'postal_code' === resultArray[i].types[0] ) {
//         // 				citi = resultArray[ i ].long_name;
//         // 				city.value = citi;
//         // 				console.log("ZIP OR POSTAL ==>", citi )
//         // 		}
    
    
        
// 		// Closes the previous info window if it already exists
// 		if ( infoWindow ) {
// 			infoWindow.close();
// 		}
// 		/**
// 		 * Creates the info Window at the top of the marker
// 		 */
// 		infoWindow = new google.maps.InfoWindow({
// 			content: addresss
// 		});

// 		infoWindow.open( map, marker );
// 	} );


// 	/**
// 	 * Finds the new position of the marker when the marker is dragged.
// 	 */
// // 	google.maps.event.addListener( marker, "dragend", function ( event ) {
// // 		var lat, long, address, resultArray, citi;

// // 		console.log( 'i am dragged' );
// // 		lat = marker.getPosition().lat();
// // 		long = marker.getPosition().lng();

// // 		var geocoder = new google.maps.Geocoder();
// // 		geocoder.geocode( { latLng: marker.getPosition() }, function ( result, status ) {
// // 			if ( 'OK' === status ) {  // This line can also be written like if ( status == google.maps.GeocoderStatus.OK ) {
// // 				address = result[0].formatted_address;
// // 				resultArray =  result[0].address_components;

// // 				// Get the city and set the city input value to the one selected
// // 				for( var i = 0; i < resultArray.length; i++ ) {
// // 					if ( resultArray[ i ].types[0] && 'administrative_area_level_2' === resultArray[ i ].types[0] ) {
// // 						citi = resultArray[ i ].long_name;
// // 						console.log( citi );
// // 						city.value = citi;
// // 					}
// // 				}
// // 				addressEl.value = address;
// // 				latEl.value = lat;
// // 				longEl.value = long;

// // 			} else {
// // 				console.log( 'Geocode was not successful for the following reason: ' + status );
// // 			}

// // 			// Closes the previous info window if it already exists
// // 			if ( infoWindow ) {
// // 				infoWindow.close();
// // 			}

// // 			/**
// // 			 * Creates the info Window at the top of the marker
// // 			 */
// // 			infoWindow = new google.maps.InfoWindow({
// // 				content: address
// // 			});

// // 			infoWindow.open( map, marker );
// // 		} );
// // 	});


// }

// </script>

    // <script>
    //     $(function(){
    //         $('#form').on("submit",function(e){
    //             e.preventDefault();
    //             var action = $(this).attr('action');
    //             var method = $(this).attr('method');
    //             var form_data = new FormData($(this)[0]);
    //             var form = $(this);
    //             $.ajax({
    //                 url:action,
    //                 dataType: 'json',
    //                 cache: false,
    //                 contentType: false,
    //                 processData: false,
    //                 data: form_data,
    //                 type: method,
    //                 success:function(response){
    //                   if(response.status){
    //                         form.trigger("reset");
    //                         NioApp.Toast(response.msg,'success',{
    //                             position:'top-right'
    //                         });
    //                   }
    //                 },
    //                 error:function(response){//handle the error
    //                     $(".alert-danger").remove();
    //                     try{
    //                     var erroJson = JSON.parse(response.responseText);
    //                     for (var err in erroJson){
    //                         for (var errstr of erroJson[err])
    //                             $("[name='" + err + "']").after("<p class='alert alert-danger'>" + errstr + "</div>");
    //                     }
    //                     if(options.error) {
    //                         options.error(response);
    //                     }
    //                     } catch (err) {
    //                         console.log(err);
    //                     }
    //                 },
    //             })
    //         });
    //     });

    // </script>

@endsection


@endsection