@extends('layouts.app')

@section('content')
<div class='container-fluid main-sec bg-white'>
      <div class='row d-flex'>
      <div class="col-md-6 p-0 py-4">
        <!-- <div class="business-form-col circle-form"> -->
        <div class="business-form-col">  
          <h2 class="mt-3" style='font-weight:bold;'>Draw a circle - Create a circle on a google map using a point and a radius
</h2>  
          <p style='font-size:14px;' class='pb-3'>Search your business on google map and fill the form below.</p>
          @if (Session::has('error'))
                        <div class='alert alert-danger alert-dismissible fade show' role='alert'>
                        {{ Session::get('error') }}
                        </div>
                        @endif
          <form method='post' action='{{ route("business-details-insert")}}'>
            
           @csrf
           
           <input name='client_id' id='client_id' value="{{Auth::User()->id}}" hidden>
           <div class='row'>
           <div class='col-md-12 mb-2'>
          <div class="form-group">
                <input hidden class="form-control" type="text" value='AIO' name='services' required/> 
            </div>
          </div>
           </div>
          <div class='row'>
            <div class='col-md-7'>
            <label for='radius' style='font-weight:bold;'>Address</label>
            @foreach($address as $baddress)
            <input id="search" class="form-control" type="text" name='radius_address' placeholder="Add Your Business Address" required/> 
          @endforeach
          <!-- <small style='color:red;font-weight:bold;'>Please choose location from dropdown after enter</small> -->
          </div>
            <div class='col-md-5'>
            <div class="form-group">
                <label for='radius' style='font-weight:bold;'>Radius</label>
                <input type="number" class="form-control" id="radius" name='radius' placeholder="Enter Radius in miles" required>
            </div>
            </div>
            <div class='form-group'>
            <input type="text" class="form-control" value='' id="radiusimage" name='radius_image' hidden>
            <button type='button' class='btn btn-primary my-3 w-100 primary-btn' onclick="drawCircle()">Draw A Circle</button>
            </div>
          </div>
          <div>
          @foreach($name as $bname)
          <input class='form-control' name='bname' value="{{$bname}}" hidden>
          @endforeach
          @foreach($email as $bemail)
          <input class='form-control' name='bemail' value="{{$bemail}}" hidden>
          @endforeach
          @foreach($phone as $bphone)
          <input class='form-control' name='bphone' value="{{$bphone}}" hidden>
          @endforeach
          @foreach($address as $baddress)
          <input class='form-control' name='baddress' value="{{$baddress}}" hidden>
          @endforeach
          @foreach($description as $bdescription)
          <input class='form-control' name='description' value="{{$bdescription}}" hidden>
          @endforeach
          @foreach($website_url as $website)
          <input class='form-control' name='website_url' value="{{$website}}" hidden>
          @endforeach
           @if(is_array($timezone))
          @foreach($timezone as $time)
          <input class='form-control' name='timezone' value="{{$time}}" hidden>
          @endforeach
          @endif
           @if(is_array($category))
          @foreach($category as $cat)
          <input class='form-control' name='category' value="{{$cat}}" hidden>
          @endforeach
          @endif
          </div>
          
         
          


          <div class='self-fields' id='processing_option'>
          <p>Are you processing the order yourself or one of our rep on the phone?</p>
          
            <input type="radio" id="self" name="closure_id" value='961' onclick="toggleInputField(false)"> 
         
            <label for="self">Self</label><br>
         
            <input type="radio" id="closure" name="closure_id" onclick="toggleInputField(true)">
          
          <label for="closure">Employee</label><br>

          <div class='form-group my-3'>
          <input class='form-control' id='closure_id' style='display:none;' name='closure_id' placeholder='Enter Representative Employee ID' re>
          </div>
          <div class='alert alert-danger alert-dismissible fade show closer-alert' style='display:none;' role='alert'>
                        Employee Not Found
                        </div>
          <div class='alert alert-success alert-dismissible fade show closer-alert-success' style='display:none;' role='alert'>
                  <span id='ename'></span>  Employee Found
                </div>
        </div>
          <button type='submit' style='display:none;' id='select-package-btn' class='btn btn-success w-100 primary-btn'>Select Package</button>
            </form>
        </div>
                
          
          </div> 
      <div class="col-md-6 p-0 map-col" onload="initAutocomplete()">
         <div id="map"></div>
          </div> 
      </div>
    </div>


        <!-- Error Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Location Error</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body py-3">
      <p id='map-error-text'>Please select a place in the United States or Canada.</p>
      </div>
    </div>
  </div>
</div>

</div>


<script>
  $(document).ready(function(){
    console.log(localStorage.getItem("map-area"));
  });
  </script>

<script>
  $(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });

  document.getElementById("search").value = localStorage.getItem("map-area");

});
</script>

<script>
   function toggleInputField(show) {
            var inputField = document.getElementById("closure_id");
            if (show) {
                inputField.style.display = "block";
                inputField.setAttribute("name", "closure_id");
                $('#select-package-btn').hide();
            } else {
                inputField.style.display = "none";
                inputField.removeAttribute('name');
                $('#select-package-btn').show();
                 $('.closer-alert-success').hide();
                  $('.closer-alert').hide();
            }
        }
</script>


<script type="text/javascript">
    $('#closure_id').on('keyup',function(){
    //   if( this.value.length < 4 ) return;
      $('#select-package-btn').hide();
    $value=$(this).val();
    $.ajax({
    type : 'get',
    url : '{{URL::to('check-closer')}}',
    data:{'search':$value},
    success:function(response){
      if(response == 'closer not found')
      {
         $('.closer-alert-success').hide();
        $('.closer-alert').show();
        $('#select-package-btn').hide();
      }else{
        // var resp = JSON.stringify(data);
        $("#closure").attr('value',response.closerid);
        $('#ename').text(response.name);
        $('.closer-alert').hide();
        $('.closer-alert-success').show();
        $('#select-package-btn').show();
      }
      
    }
    });
    });

</script>


<script>

let map;
    let circle;
    let placesService;
    let geocoder;
    let searchBox;
    let markers = [];

    function initAutocomplete() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 37.0902, lng: -95.7129 }, // Centered at the United States
        zoom: 2,
      });

      const input = document.getElementById("search");
      searchBox = new google.maps.places.SearchBox(input);
      placesService = new google.maps.places.PlacesService(map);
      geocoder = new google.maps.Geocoder();

      map.controls[google.maps.ControlPosition.TOP_LEFT].push();

      map.addListener("bounds_changed", () => {
        searchBox.setBounds(map.getBounds());
      });

      searchBox.addListener("places_changed", async () => {
    let places = searchBox.getPlaces();

    if (places.length === 0) {
      return;
    }

    const selectedPlace = places[0];
    const countryRestrictions = ["US", "CA"];

    if (!selectedPlace || !selectedPlace.address_components) {
      $('#staticBackdrop').modal('show');
      document.getElementById("map-error-text").innerHTML = "Invalid place or address.";
      return;
    }

    const placeCountry = selectedPlace.address_components.find(
      (component) => component.types.includes("country")
    );

    if (placeCountry && countryRestrictions.includes(placeCountry.short_name)) {
      markers.forEach((marker) => {
        marker.setMap(null);
      });
      markers = [];

      const bounds = new google.maps.LatLngBounds();

      places.forEach((place) => {
        if (!place.geometry || !place.geometry.location) {
          console.log("Returned place contains no geometry");
          return;
        }

        const marker = new google.maps.Marker({
          map,
          title: place.name,
          position: place.geometry.location,
        });

        marker.addListener("click", () => {
          const placeDetails = new google.maps.places.PlacesService(map);
          placeDetails.getDetails({ placeId: place.place_id }, async (placeDetail, status) => {
             
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              const infoWindowContent = `
                <strong>${placeDetail.name}</strong>
                <p>${placeDetail.website || 'Not available'}</p>
                <p> ${placeDetail.formatted_address || 'Not available'}</p>
                <p> ${placeDetail.formatted_phone_number || 'Not available'}</p>
              `;

              $('#bname').val(placeDetail.name);
              $('#website').val(placeDetail.website);
              $('#baddress').val(placeDetail.formatted_address);
              $('#bphone').val(placeDetail.formatted_phone_number);

              const infoWindow = new google.maps.InfoWindow({
                content: infoWindowContent,
              });

              infoWindow.open(map, marker);
              setTimeout(() => {
                infoWindow.close();
              }, 3000);
            } else {
              console.log("Error fetching place details:", status);
            }
          });
        });

        markers.push(marker);

        if (place.geometry.viewport) {
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });

      const placeDetails = new google.maps.places.PlacesService(map);
          
      placeDetails.getDetails({ placeId: selectedPlace.place_id }, async (place, status) => {
        const timezoneInfo = await getTimezone(place.geometry.location.lat(), place.geometry.location.lng());
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          if (place.name) {
            $('#bname').val(place.name);
            $('#website').val(place.website);
            $('#baddress').val(place.formatted_address);
            $('#bphone').val(place.formatted_phone_number);
            localStorage.setItem("map-area", document.getElementById('search').value);

            if (place.opening_hours && place.opening_hours.weekday_text) {
              const hoursList = place.opening_hours.weekday_text;
              let hoursHTML = '<ul class="m-0 p-0" style="list-style-type:none;">';
              hoursList.forEach((dayHours) => {
                hoursHTML += `<li>${dayHours}</li>`;
              });
              hoursHTML += '</ul>';
              $('.appending_div').html(hoursHTML);
            } else {
              $('.appending_div').html('<p>Working hours not available.</p>');
            }
            const businessCategory = place.types && place.types.length > 0
          ? place.types[0]
          : 'Unknown';
            
        // console.log('Business Category:', businessCategory);
            const { timezoneId, timezoneName } = timezoneInfo;
                // console.log('Timezone ID:', timezoneId);
                // console.log('Timezone Name:', timezoneName);
                $('#timezone').val(timezoneName);
                $('#category').val(businessCategory);
                // Update your UI or perform any other actions with the timezone information

          } else {
            console.log("Website not available for this place.");
          }
        } else {
          console.log("Error fetching place details:", status);
        }
      });

      map.fitBounds(bounds);
    } else {
      $('#staticBackdrop').modal('show');
      document.getElementById("map-error-text").innerHTML = "Please select a place in the United States or Canada.";
      input.value = null;
    }
  });

      searchBox.addListener("places_changed", () => {
        handlePlaceChange();
      });

      // Trigger search based on the initial value in the search input
      google.maps.event.addListenerOnce(map, 'idle', function(){
        performInitialSearch(input.value);
      });
    }

    function handlePlaceChange() {
      const places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }

      const selectedPlace = places[0];
      const countryRestrictions = ["US", "CA"]; // United States and Canada

      if (!selectedPlace || !selectedPlace.address_components) {
        $('#staticBackdrop').modal('show');
      document.getElementById('search').value = "";
      // alert("Please select a place in the United States or Canada.");
    }
        return;
      }

      const placeCountry = selectedPlace.address_components.find(
        (component) => component.types.includes("country")
      );
      if (placeCountry && countryRestrictions.includes(placeCountry.short_name)) {
        clearMarkers();
        addMarkers(places);
        fetchPlaceDetails(selectedPlace);
      } else {
        $('#staticBackdrop').modal('show');
      document.getElementById('search').value = "";
      // alert("Please select a place in the United States or Canada.");
//     }
        document.getElementById('search').value = "";
      }
    

    function performInitialSearch(address) {
      geocoder.geocode({ address: address }, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          const places = results.map(result => ({
            name: result.formatted_address,
            geometry: {
              location: result.geometry.location,
              viewport: result.geometry.viewport
            },
            place_id: result.place_id,
            address_components: result.address_components
          }));

          const selectedPlace = places[0];
          const countryRestrictions = ["US", "CA"]; // United States and Canada

          const placeCountry = selectedPlace.address_components.find(
            (component) => component.types.includes("country")
          );
          if (placeCountry && countryRestrictions.includes(placeCountry.short_name)) {
            clearMarkers();
            addMarkers(places);
            fetchPlaceDetails(selectedPlace);
          } else {
            $('#staticBackdrop').modal('show');
            document.getElementById('search').value = "";
          }
        } else {
          $('#staticBackdrop').modal('show');
        }
      });
    }

    function clearMarkers() {
      markers.forEach((marker) => {
        marker.setMap(null);
      });
      markers = [];
    }

    function addMarkers(places) {
      const bounds = new google.maps.LatLngBounds();

      places.forEach((place) => {
        if (!place.geometry || !place.geometry.location) {
          console.log("Returned place contains no geometry");
          return;
        }

        const marker = new google.maps.Marker({
          map,
          title: place.name,
          position: place.geometry.location,
        });

        marker.addListener('click', () => {
          fetchPlaceDetails(place);
        });

        markers.push(marker);

        if (place.geometry.viewport) {
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });

      map.fitBounds(bounds);
    }

    function fetchPlaceDetails(place) {
      placesService.getDetails({ placeId: place.place_id }, (placeDetail, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          updatePlaceDetails(placeDetail);
          showInfoWindow(placeDetail, place.geometry.location);
        } else {
          console.log("Error fetching place details:", status);
        }
      });
    }

    function updatePlaceDetails(placeDetail) {
      document.getElementById('name').value = placeDetail.name || '';
      document.getElementById('website').value = placeDetail.website || '';
      document.getElementById('address').value = placeDetail.formatted_address || '';
      document.getElementById('phone').value = placeDetail.formatted_phone_number || '';
    }

    function showInfoWindow(placeDetail, position) {
      const infoWindowContent = `
        <strong>${placeDetail.name}</strong>
        <p>${placeDetail.website || 'Not available'}</p>
        <p>${placeDetail.formatted_address || 'Not available'}</p>
        <p>${placeDetail.formatted_phone_number || 'Not available'}</p>
      `;
      const infoWindow = new google.maps.InfoWindow({
        content: infoWindowContent,
        position: position,
      });

      infoWindow.open(map);
      setTimeout(() => {
        infoWindow.close();
      }, 3000);
    }



// draw circle code

function drawCircle() {

  var radiuss = document.getElementById('radius').value;
  if(radiuss >= 10 && radiuss <= 100)
  {
    if (circle) {
    circle.setMap(null);
  }
    
     document.getElementById('processing_option').style.display = "block";
     
  const radiusInMiles = parseFloat(document.getElementById("radius").value);
  const center = map.getCenter();
  const radiusInMeters = radiusInMiles * 1609.34; // Convert miles to meters

 

  circle = new google.maps.Circle({
    map: map,
    center: center,
    radius: radiusInMeters,
    draggable: true,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  map.fitBounds(circle.getBounds());
  const numPoints = 100; // Adjust as needed
  const circlePath = [];

  setTimeout(() => {
    

  for (let i = 0; i < numPoints; i++) {
    const theta = (i / numPoints) * 360;
    const point = google.maps.geometry.spherical.computeOffset(center, radiusInMeters, theta);
    circlePath.push(point);
  }

  

  // Encode the circle path using the geometry library
  const encodedCirclePath = google.maps.geometry.encoding.encodePath(circlePath);

  // Create a URL for the map with the drawn circle
  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat()},${center.lng()}&zoom=9.5&size=900x800&maptype=roadmap&markers=color:red%7C${center.lat()},${center.lng()}&path=color:red%7Cfillcolor:red%7Cweight:2%7Cenc:${encodedCirclePath}&key=AIzaSyDtMhPtoqeZSt-5Qyh6E4FcO0Q_jqH2oLw&libraries=geometry&callback=initMap`;

  // Set the map URL in the input field
  document.getElementById("radiusimage").value = mapUrl;
  console.log(mapUrl);
  }, 1000);

  // Add a listener to update the circle's position when dragged
  circle.addListener("dragend", function () {
    map.fitBounds(circle.getBounds());

    // Update the map URL when the circle is dragged
    const updatedCirclePath = google.maps.geometry.encoding.encodePath(circlePath);
    const updatedMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${circle.getCenter().lat()},${circle.getCenter().lng()}&zoom=9.5&size=900x800&maptype=roadmap&markers=color:red%7C${circle.getCenter().lat()},${circle.getCenter().lng()}&path=color:red%7Cfillcolor:red%7Cweight:2%7Cenc:${updatedCirclePath}&key=AIzaSyDtMhPtoqeZSt-5Qyh6E4FcO0Q_jqH2oLw&libraries=geometry&callback=initMap`;

    // Set the updated map URL in the input field
    document.getElementById("radiusimage").value = updatedMapUrl;
    console.log(updatedMapUrl);
  });
  } else{
    alert('Radius will be in between 10 - 100 miles');
  }
  
}

        
    window.initAutocomplete = initAutocomplete;
    </script>


@endsection