@extends('layouts.master')

@section('content')
@php
    $types = config('custom.type');	
@endphp
<div class="content d-flex flex-column flex-column-fluid">
	<!--begin::Container-->
	<div class="col-lg-12  d-flex flex-column flex-xl-row flex-row-fluid gap-10">
		
		<div class="col-lg-10 offset-1">
			<form action="{{route('fuelLocation.store')}}" method="post" enctype="multipart/form-data">
				@csrf

				<div class="card mb-12 mb-xxl-12 tab-content">
					<div class="card-body pb-0 tab-pane fade show active" id="kt_stats_widget_16_tab_1">
						<div class="w-100">
							<div class="">
								<!--begin::Title-->
								<h2 class="fw-bold text-gray-900">Fuel Location Add</h2>

								<!--end::Notice-->
							</div>
							<div class="card-body p-9">							
								<div class="row mb-6">
									<!--begin::Label-->
									<label class="col-lg-4 col-form-label fw-semibold fs-6"> Type <span style="color:red">*</span> </label>
									<!--end::Label-->
									<!--begin::Col-->
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<!--begin::Options-->
										<div class="d-flex align-items-center mt-3">
											<select name="typeid" class="form-select form-select-solid form-select-lg" id="location_typeid" required="">
												<option value="">Please Select</option>
												 @foreach ($types as $type)
														<option value="{{$type}}">{{$type}}</option>
												 @endforeach
												
										</select>
											
										</div>
										
										@error('typeid')
                                                 <p class="text-danger">{{ $message }}</p>
                                         @enderror
										<!--end::Options-->
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
									<!--end::Col-->
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Name <span style="color:red">*</span></label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="NAME" id="NAME" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Name" required>						
										@error('NAME')
                                                 <p class="text-danger">{{ $message }}</p>
                                         @enderror
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>

								</div>
								
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Site </label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="STORE_NUM" id="STORE_NUM" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Site" >						
										@error('NAME')
                                                 <p class="text-danger">{{ $message }}</p>
                                         @enderror
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>

								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Highway</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="HIGHWAY" id="HIGHWAY" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"	placeholder="Highway">
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Address</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="ADDRESS1" id="ADDRESS" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Address">
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">City</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="CITY" id="CITY" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"	placeholder="City">
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>

								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">State</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="STATE" id="STATE" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"	placeholder="State">
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>
								<div class="row mb-6">	
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Zip</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="ZIP" id="ZIP" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"	placeholder="Zip">
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Lat</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="LAT" id="LAT" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"	placeholder="Lat">
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Lng</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="LNG" id="LNG" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"	placeholder="Lng">
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>
								
								
							</div>
						</div>
					</div>					
					<div class="col-lg-12 row p-9 ">					
						<div class="col-lg-6 ">
							<button type="submit"
								class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12">Save</button>
							<a href="{{route('fuelLocation.index')}}"
								class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12">Cancel</a>
						</div>

						
					</div>
				</div>
			</form>
		</div>

	</div>
</div>
@endsection()
@section('script')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5BQa0hFcyKzBa_dA2cbKt3QvdiWhxOvY&libraries=geometry,places" ></script>
<script>

	$("#stepper-next-btn").click(function () {
		$("#stepper-prev-btn").removeClass("d-none");
		
		$("#stepper-prev-btn").show();
		var cntrl = $("#nav-stepper .stepper-item.current");
		$(cntrl).removeClass("current");
		$(cntrl).next().addClass("current");

		var tabContent = $(".tab-content .card-body.tab-pane.active");
		$(tabContent).removeClass("active");
		$(tabContent).next().addClass("active");

		if ($(tabContent).next().next(".card-body.tab-pane").length == 0) {
			$("#stepper-next-btn").hide();
			$(".tab-action").removeClass("d-none");
		}
	});
	$("#stepper-prev-btn").click(function () {
		$(".tab-action").addClass("d-none")
		$("#stepper-next-btn").show();
		
		var cntrl = $("#nav-stepper .stepper-item.current");
		$(cntrl).prev().addClass("current");
		$(cntrl).removeClass("current");

		var tabContent = $(".tab-content .card-body.tab-pane.active");
		$(tabContent).prev().addClass("active");
		$(tabContent).removeClass("active");

		if ($(tabContent).prev().prev(".card-body.tab-pane").length == 0) {
			$("#stepper-prev-btn").hide();
		}
	});


	 function initAutocomplete() {
        var input = document.getElementById('ADDRESS');

        // Check if input element exists
        if (!input) {
            console.error("Input element with id 'ADDRESS' not found.");
            return;
        }

        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();

            if (!place.geometry) {
                console.error("No geometry found for selected place.");
                return;
            }

            var latitude = place.geometry.location.lat();
            var longitude = place.geometry.location.lng();

            var latlng = new google.maps.LatLng(latitude, longitude);
            var geocoder = new google.maps.Geocoder();

            geocoder.geocode({ location: latlng }, function (results, status) {
                if (status === "OK" && results[0]) {
                    var components = results[0].address_components;
                    var streetNumber = "";
                    var route = "";
                    var city = "";
                    var state = "";
                    var country = "";
                    var postalCode = "";

                    components.forEach(function (component) {
                        var types = component.types;
                        if (types.includes("street_number")) {
                            streetNumber = component.long_name;
                        } else if (types.includes("route")) {
                            route = component.long_name;
                        } else if (types.includes("locality")) {
                            city = component.long_name;
                        } else if (types.includes("administrative_area_level_1")) {
                            state = component.short_name;
                        } else if (types.includes("country")) {
                            country = component.long_name;
                        } else if (types.includes("postal_code")) {
                            postalCode = component.long_name;
                        }
                    });

                    var streetAddress = `${streetNumber} ${route}`.trim();

                    document.getElementById("LAT").value = latitude;
                    document.getElementById("LNG").value = longitude;
                    document.getElementById("ADDRESS").value = streetAddress;
                    document.getElementById("CITY").value = city;
                    document.getElementById("STATE").value = state;
                    document.getElementById("ZIP").value = postalCode;
                } else {
                    console.error("Geocoder failed due to: " + status);
                }
            });
        });
    }
	 $(document).ready(function() {	

		initAutocomplete();            
     });
            
	 
</script>
@endsection()