@extends('admin.layout.app')

@section('title', 'Engineer Search')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card shadow-sm border-0">
    <div class="card-header bg-primary text-white d-flex align-items-center">
      <h5 class="mb-0 text-white">
        <i class="bi bi-geo-alt-fill me-2"></i> Find Nearby Engineers
      </h5>
    </div>
    <br>

    <div class="card-body">
      <form id="searchForm" class="row g-3 align-items-center">
        <div class="col-md-6">
          <input type="text" name="address" id="addressInput" placeholder="Enter an address" required class="form-control shadow-sm">
        </div>

        <div class="col-md-4">
          <label for="radiusSlider" class="form-label fw-semibold mb-1">
            Search Radius: <span id="radiusValue" class="text-primary">50</span> km
          </label>
          <input type="range" id="radiusSlider" name="radius" min="5" max="200" step="5" value="50" class="form-range">
        </div>

        <div class="col-md-2">
          <button type="submit" class="btn btn-primary w-100 shadow-sm">
            <i class="bi bi-search"></i> Search
          </button>
        </div>
      </form>

      <p id="errorMsg" class="text-danger mt-3"></p>
      <div id="results" class="mt-4"></div>
      <div id="map" class="mt-4 shadow-sm" style="height: 600px; border-radius: 12px;"></div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
let map, markers = [], bounds, infoWindow, searchCircle, searchLatLng;

// ✅ Initialize Google Map (default style)
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 48.8566, lng: 2.3522 }, // Default center (Paris)
    zoom: 5,
    mapTypeControl: true,
    streetViewControl: true,
    fullscreenControl: true
  });

  infoWindow = new google.maps.InfoWindow();
  bounds = new google.maps.LatLngBounds();
}

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('searchForm');
  const radiusSlider = document.getElementById('radiusSlider');
  const radiusValue = document.getElementById('radiusValue');

  // 🎚️ Update radius label & circle dynamically
  radiusSlider.addEventListener('input', () => {
    const radiusKm = parseInt(radiusSlider.value);
    radiusValue.textContent = radiusKm;
    if (searchCircle) {
      searchCircle.setRadius(radiusKm * 1000);
      if (searchLatLng) map.fitBounds(searchCircle.getBounds());
    }
  });

  // ✅ Handle form submission
  form.addEventListener('submit', function(e) {
    e.preventDefault();

    const address = form.address.value.trim();
    const radius = parseInt(form.radius.value);
    if (!address) return;

    document.getElementById('results').innerHTML =
      '<p class="text-muted"><i class="bi bi-hourglass-split"></i> Searching nearby engineers...</p>';
    document.getElementById('errorMsg').textContent = '';

    // Clear existing markers & circle
    markers.forEach(marker => marker.setMap(null));
    markers = [];
    bounds = new google.maps.LatLngBounds();
    if (searchCircle) searchCircle.setMap(null);

    // 🛰️ Fetch nearby engineers
    fetch(`{{ route('admin.engineersearch.find') }}?address=${encodeURIComponent(address)}&radius=${radius}`)
      .then(res => res.json())
      .then(data => {
        if (data.error) {
          document.getElementById('results').innerHTML = '';
          document.getElementById('errorMsg').textContent = data.error;
          return;
        }

        let html = `
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="mb-0">Results near "<span class="text-primary">${data.searchedAddress}</span>"</h5>
            <span class="badge bg-info text-dark border">Radius: ${radius} km</span>
          </div>
        `;

        if (data.locations && data.locations.length > 0) {
          html += '<ul class="list-group shadow-sm">';
          data.locations.forEach(loc => {
            const dist = parseFloat(loc.distance);
            const distText = !isNaN(dist) ? dist.toFixed(2) + " km away" : "Distance unavailable";

            html += `
              <li class="list-group-item d-flex justify-content-between align-items-start">
                <div>
                  <strong>
                    <a href="https://innotique.com/user/${loc.user_id}" target="_blank">
                      ${loc.user_name}
                    </a>
                  </strong> — <span class="text-muted">${distText}</span><br>
                  <small>${loc.address_line}, ${loc.city}</small>
                </div>
                <span class="badge bg-secondary rounded-pill">${loc.user_type}</span>
              </li>
            `;

            if (loc.latitude && loc.longitude) {
              const position = { lat: parseFloat(loc.latitude), lng: parseFloat(loc.longitude) };
              const marker = new google.maps.Marker({
                position,
                map,
                title: `${loc.user_name} (${distText})`,
                animation: google.maps.Animation.DROP
              });

              marker.addListener('click', () => {
                infoWindow.setContent(`
                  <div style="min-width:200px">
                    <strong>${loc.user_name}</strong><br>
                    ${loc.address_line}, ${loc.city}<br>
                    ${distText}<br>
                    <span class="badge bg-secondary">${loc.user_type}</span>
                  </div>
                `);
                infoWindow.open(map, marker);
              });

              markers.push(marker);
              bounds.extend(position);
            }
          });
          html += '</ul>';
          if (markers.length > 0) map.fitBounds(bounds);
        } else {
          html += `<p class="text-muted">No engineers found within ${radius} km.</p>`;
          if (data.lat && data.lng) {
            map.setCenter({ lat: data.lat, lng: data.lng });
            map.setZoom(12);
          }
        }

        document.getElementById('results').innerHTML = html;

        // ✅ Add search marker & radius circle
        if (data.lat && data.lng) {
          searchLatLng = { lat: data.lat, lng: data.lng };

          const searchMarker = new google.maps.Marker({
            position: searchLatLng,
            map,
            icon: { url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png' },
            title: 'Search Location'
          });

          searchCircle = new google.maps.Circle({
            strokeColor: '#4285F4',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#4285F4',
            fillOpacity: 0.15,
            map,
            center: searchLatLng,
            radius: radius * 1000
          });

          markers.push(searchMarker);
          bounds.extend(searchLatLng);
          map.fitBounds(searchCircle.getBounds());
        }
      })
      .catch(err => {
        document.getElementById('results').innerHTML = '';
        document.getElementById('errorMsg').textContent = 'Error fetching data.';
        console.error(err);
      });
  });
});
</script>

<!-- ✅ Google Maps JS API -->
<script async
  src="https://maps.googleapis.com/maps/api/js?key={{ config('services.googlemaps.key') }}&callback=initMap">
</script>
@endpush