{{-- resources/views/livewire/nearby-poi.blade.php --}}
<div class="poi-page d-flex flex-column vh-100">

    {{-- Map + Sidebar --}}
    <div class="d-flex flex-fill overflow-hidden">

        {{-- Map Pane (with logo overlay) --}}
        <div class="position-relative flex-grow-1">
            <div id="map" style="width:100%; height:100%;"></div>
            <img src="{{ asset('storage/assets/img/' . Str::slug($property->PropertyName) . '.png') }}"
                alt="{{ $property->PropertyName }} Logo"
                onerror="this.onerror=null;this.src='{{ asset('storage/assets/img/placeholder.png') }}';"
                class="map-overlay-logo">
        </div>

        {{-- Sidebar --}}
        <div class="poi-sidebar bg-white d-flex flex-column"
            style="width:30%; min-width:250px; border-left:1px solid #ddd;">
            <div class="p-3 border-bottom">
                <div class="btn-group btn-group-sm w-100 mb-2" role="group">
                    <button class="btn btn-outline-primary filter-btn" data-type="restaurant">Food</button>
                    <button class="btn btn-outline-primary filter-btn active" data-type="museum">Sights</button>
                    <button class="btn btn-outline-primary filter-btn" data-type="shopping_mall">Shopping</button>
                    <button class="btn btn-outline-primary filter-btn" data-type="tour_agency">Tours</button>
                    <button class="btn btn-outline-primary filter-btn" data-type="park">Parks</button>
                </div>
                <input id="poi-search" type="text" class="form-control form-control-sm"
                    placeholder="Search attractions…">
            </div>
            <div id="poi-list" class="flex-fill overflow-auto p-3"></div>
        </div>

    </div>
</div>

@push('css')
<style>
    .map-overlay-logo {
        position: absolute;
        bottom: 10px;
        left: 10px;
        max-height: 80px;
        opacity: 0.85;
        pointer-events: none;
    }

    .poi-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: .75rem;
        padding: .5rem;
        border: 1px solid #ddd;
        border-radius: .25rem;
        cursor: pointer;
    }

    .poi-item img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 4px;
        margin-right: .75rem;
    }

    .poi-item .info {
        flex: 1;
    }

    .poi-item .info .name {
        font-weight: bold;
        margin-bottom: 4px;
    }

    .poi-item .info .rating {
        color: #444;
        margin-bottom: 4px;
    }

    .poi-item .info .vicinity {
        font-size: .85rem;
        color: #666;
        margin-bottom: 4px;
    }

    .poi-item .info .snippet {
        font-size: .85rem;
        color: #333;
        font-style: italic;
    }

    .poi-item .chevron {
        font-size: 1rem;
        color: #888;
        margin-left: .5rem;
        align-self: center;
    }
</style>
@endpush

@push('js')
<script async
    src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}&libraries=places&callback=initPoiMap">
</script>
<script>
    let map, service, infowindow, markers = [];

  function initPoiMap(){
    const center = { lat: {{ $lat }}, lng: {{ $lng }} };
    map = new google.maps.Map(document.getElementById('map'), {
      center, zoom:15, gestureHandling:'greedy'
    });
    new google.maps.Marker({ position:center, map });
    infowindow = new google.maps.InfoWindow();

    // wire controls
    document.getElementById('poi-search')
      .addEventListener('input', e=>loadPlaces(e.target.value,getActiveType()));
    document.querySelectorAll('.filter-btn').forEach(btn=>{
      btn.addEventListener('click', ()=>{
        document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));
        btn.classList.add('active');
        loadPlaces(document.getElementById('poi-search').value, btn.dataset.type);
      });
    });

    // initial: Sights
    loadPlaces('', 'museum');
  }

  function getActiveType(){
    const a=document.querySelector('.filter-btn.active');
    return a?a.dataset.type:'';
  }

  function loadPlaces(keyword='', type=''){
    // clear
    markers.forEach(m=>m.setMap(null));
    markers=[];
    document.getElementById('poi-list').innerHTML='';

    const req={ location: map.getCenter(), radius:1000 };
    if(keyword) req.keyword=keyword;
    if(type) req.type=type;

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(req, (results,status)=>{
      if(status!==google.maps.places.PlacesServiceStatus.OK) return;

      // now fetch details for every result
      const detailPromises = results.map(r=>new Promise(res=>{
        service.getDetails({
          placeId: r.place_id,
          fields: [
            'name','rating','vicinity','formatted_address',
            'photos','opening_hours','website','editorial_summary','geometry'
          ]
        }, (d,s)=> res(s===google.maps.places.PlacesServiceStatus.OK?d:null));
      }));

      Promise.all(detailPromises).then(details=>{
        details = details.filter(d=>d);
        // sort by rating desc
        details.sort((a,b)=>(b.rating||0)-(a.rating||0));

        details.forEach(renderPlace);
      });
    });
  }

  function renderPlace(place){
    // marker
    const m = new google.maps.Marker({
      map, position: place.geometry.location, title: place.name
    });
    markers.push(m);
    m.addListener('click', ()=>{
      infowindow.setContent(infoHtml(place));
      infowindow.open(map,m);
    });

    // list item
    const list = document.getElementById('poi-list');
    const item = document.createElement('div');
    item.className='poi-item';
    item.addEventListener('click', ()=>{
      map.panTo(place.geometry.location);
      google.maps.event.trigger(m,'click');
    });

    // thumbnail
    let thumb='{{ asset("storage/assets/img/placeholder.png") }}';
    if(place.photos&&place.photos.length){
      thumb=place.photos[0].getUrl({maxWidth:100});
    }

    // snippet
    let snippet='';
    if(place.editorial_summary&&place.editorial_summary.overview){
      snippet = place.editorial_summary.overview
                 .split('. ')[0] + '.'; // first sentence
    }

    item.innerHTML=`
      <img src="${thumb}" alt="${place.name}">
      <div class="info">
        <div class="name">${place.name}</div>
        <div class="rating">★ ${place.rating||'n/a'}</div>
        <div class="vicinity">${place.vicinity||''}</div>
        ${ snippet ? `<div class="snippet">${snippet}</div>` : '' }
      </div>
      <i class="fa fa-chevron-right chevron"></i>
    `;
    list.appendChild(item);
  }

  function infoHtml(p){
    // big photo
    let photo='';
    if(p.photos&&p.photos.length){
      photo=`<img src="${p.photos[0].getUrl({maxWidth:300})}"
                   style="width:100%;margin-bottom:8px;border-radius:4px;">`;
    }
    // full summary
    let about='';
    if(p.editorial_summary&&p.editorial_summary.overview){
      about=`<div style="margin-bottom:8px;"><em>${p.editorial_summary.overview}</em></div>`;
    }
    // address
    const addr=p.formatted_address||p.vicinity||'';
    // hours
    const hours=p.opening_hours
      ?`<div><strong>Hours:</strong><br>${p.opening_hours.weekday_text.join('<br>')}</div>`
      :'';
    // website
    const web=p.website
      ?`<div><a href="${p.website}" target="_blank">Visit Website</a></div>`
      :'';

    return `
      <div style="max-width:300px;">
        ${photo}
        <div><strong>${p.name}</strong></div>
        <div>${addr}</div>
        ${about}
        <div>★ ${p.rating||'n/a'}</div>
        ${hours}
        ${web}
      </div>
    `;
  }
</script>
@endpush