@extends('layouts.app')

@section('content')
<div class='container-fluid main-sec bg-white'>
      <div class='row d-flex'>
      <div class="col-md-6 pt-5">
        <div class="business-form-col">
          <h2 style='font-weight:bold;'>Add Your Business Information</h2>  
          <p style='font-size:14px;'>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
          <input id="search" class="form-control" type="text" placeholder="Search Your Business Here"/> 
           <form method='post' action="{{ route('add-radius')}}">
           @csrf
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group my-3">
                        <input type="text" class="form-control" id="bname" name='bname' placeholder="Enter Business Name" required>
                      </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group my-3">
                        <input type="email" class="form-control" id="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" name='bphone' placeholder="Enter Business Phone" required>
                          </div>
                      </div>
                       <div class="col-md-6">
                          <div class="form-group">   
                        <input name='website_url' id='website' class='form-control' placeholder='Enter website URL' required>
                          </div>
                      </div>
                    </div>
                   
                    <div class="form-group my-3">    
                        <textarea name='baddress' id='baddress' class='form-control' rows='2' placeholder='Enter Business Address' required></textarea>
                    </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' required></textarea>
                    </div>
                    <div id='working-hours'>

                    </div>
                    <input type='hidden' name='timezone' id='timezone' value=''>
                    <input type='hidden' name='category' id='category' value=''>
                    <div class="form-group my-3 text-end">
                       <button type='submit' class='btn btn-success success-btn'>Add Business Detail</button>
                    </div>       
                    </form>
        </div>
                
          
          </div> 
      <div class="col-md-6 p-0 map-col">
         <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">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() {
            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;
  }
}

// Original code for Google Maps integration
function initAutocomplete() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.0902, lng: -95.7129 },
    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;
    }

    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;
    }
  });

}

window.initAutocomplete = initAutocomplete;
    </script>

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

@endsection