@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">
          <h2 class="mt-3" style='font-weight:bold;'>Update Business Information</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
        @foreach($data as $info)
          <input id="search" class="form-control" type="text" placeholder="Search Your Business Here"/> 
           <form method='post' action="{{ route('edit-radius')}}">
           @csrf
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group my-3">
                        <input type="text" class="form-control" id="bname" value='{{$info->bname}}' name='bname' placeholder="Enter Business Name">
                      </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group my-3">
                        <input type="email" class="form-control" id="bemail" value='{{$info->bemail}}' name='bemail' placeholder="Enter Business Email" required>
                        </div>
                      </div>
                    </div>
                    
                    <div class="row">
                      <div class="col-md-6">
                         <div class="form-group">   
                        <input type="text" class="form-control" id="bphone" value='{{$info->bphone}}'  name='bphone' placeholder="Enter Business Phone" required>
                          </div>
                      </div>
                       <div class="col-md-6">
                          <div class="form-group">   
                        <input name='website_url' id='website' value='{{$info->website_url}}'  class='form-control' placeholder='Enter website URL'>
                          </div>
                      </div>
                    </div>
                   
                    <div class="form-group my-3">    
                        <textarea name='baddress' id='baddress'  class='form-control' rows='2' placeholder='Enter Business Address'>{{$info->baddress}}</textarea>
                        <input type='hidden' name='radiusaddress' value='{{$info->radius_address}}'>
                        <input type='hidden' name='radius' value='{{$info->radius}}'>
                    </div>
                    <div class="form-group my-3">
                    <small style='font-weight:bold;'>Working Hours</small>  <span class="fa fa-plus add"></span>
                    <span>(Optional)</span>
                        <div class='appending_div'>
                            <!-- <div class='row'>
                        <div class='col-md-4'>
                            <input name='working_days[]' class='form-control' placeholder='Days'>
                        </div>
                        <div class='col-md-4'>
                            <input name='working_hours[]' class='form-control' placeholder='Hours'>
                        </div>
                        <div class='col-md-4'>
                            <button class='btn btn-danger btn-rounded btn-sm'><i class='fa fa-minus'></i></button>
                        </div>
                        </div> -->
                    </div>

                    </div>
                    <div class="form-group my-3">
                        
                        <textarea name='description' id='description'  class='form-control' placeholder='Enter Description'>{{$info->description}}
                        </textarea>
                    </div>
                    <div id='working-hours'>

                    </div>
                    <input type='hidden' name='timezone' id='timezone' value='{{$info->timezone}}'>
                    <input type='hidden' name='category' id='category' value='{{$info->category}}'>
                    <input type='hidden' name='closerid' id='closerid' value='{{$info->closerid}}'>
                    <input type='hidden' name='radius_image' id='radius_image' value='{{$info->radius_image}}'>
                    <div class="form-group my-3">
                       <button type='submit' class='btn btn-success w-100 success-btn'>Update Business Detail</button>
                    </div>       
                    </form>
                    @endforeach
        </div>
                
          
          </div> 
      <div class="col-md-6 p-0 map-col">
         <div id="map"></div>
          </div> 
      </div>
    </div>
</div>

<script>
        $(document).ready(function() {
            var i = 1;
            $('.add').on('click', function() {
                var field = '<div class="row my-3"><div class="col-md-4"><input name="working_days[]" class="form-control" placeholder="Days"></div><div class="col-md-4"><input name="working_hours[]" class="form-control" placeholder="Hours"></div><div class="col-md-4"><span class="del-option"><i class="fa fa-minus"></i></span></div></div>';
                $('.appending_div').append(field);
                i = i+1;
            })
            $('.appending_div').on('click', '.del-option', function(e) {
                e.preventDefault();
                $(this).parent().parent().remove();
            });
            })
          
    </script>

    <script>

           // Function to fetch timezone
async function getTimezone(latitude, longitude) {
  const timestamp = Math.floor(Date.now() / 1000);
  const apiKey = 'AIzaSyDtMhPtoqeZSt-5Qyh6E4FcO0Q_jqH2oLw'; // Replace with your API key

  const timezoneUrl = `https://maps.googleapis.com/maps/api/timezone/json?location=${latitude},${longitude}&timestamp=${timestamp}&key=${apiKey}`;

  try {
    const response = await fetch(timezoneUrl);
    const timezoneData = await response.json();

    if (timezoneData.status === 'OK') {
      const timezoneId = timezoneData.timeZoneId;
      const timezoneName = timezoneData.timeZoneName;
      return { timezoneId, timezoneName };
    } else {
      console.error('Error fetching timezone:', timezoneData.status);
      return null;
    }
  } catch (error) {
    console.error('Error fetching timezone:', error);
    return null;
  }
}

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

  const input = document.getElementById("search");
  const searchBox = new google.maps.places.SearchBox(input);

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

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

  let markers = [];

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

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

    // Check if the selected place is in the United States or Canada
    const selectedPlace = places[0];
    const countryRestrictions = ["US", "CA"]; // United States and Canada

    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)) {
      // Clear out the old markers.
      markers.forEach((marker) => {
        marker.setMap(null);
      });
      markers = [];

      // Display the place on the map
      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,
        });

        // Add a click event listener to the marker
        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);
        }
      });

       // Fetch place details to get website
    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);

          // Display working hours if available
          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);

        } 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;
    //   alert("Please select a place in the United States or Canada.");
    }
  });
}

window.initAutocomplete = initAutocomplete;


    </script>

<script>
  $(document).ready(function(){
     $('#search').on('keydown',function(){
      $('.alert').hide('slow');
     })
  })
</script>


@endsection