{{--
    GPS pin widget for property create / edit forms.
    Variables:
      $initialLat (float|null) — pre-fill from existing record
      $initialLng (float|null) — pre-fill from existing record
--}}
@php
    $mapsKey    = config('services.google.maps_key');
    $hasCoords  = ! empty($initialLat) && ! empty($initialLng);
@endphp

@if($mapsKey)
<div class="card border-0 shadow-sm mb-4" id="map-widget-card">
    <div class="card-header bg-white py-3 d-flex align-items-center gap-3">
        <h6 class="mb-0 fw-semibold flex-grow-1">
            <i class="bi bi-pin-map me-1 text-primary"></i>Pin Location on Map
            <small class="text-muted fw-normal ms-1">(optional)</small>
        </h6>
        <div class="input-group" style="max-width:320px">
            <span class="input-group-text bg-white border-end-0 pe-1">
                <i class="bi bi-search text-muted small"></i>
            </span>
            <input type="text" id="map-search-input"
                   class="form-control border-start-0 form-control-sm"
                   placeholder="Search address…" autocomplete="off">
        </div>
        <button type="button" id="map-clear-btn"
                class="btn btn-sm btn-outline-secondary text-nowrap">
            <i class="bi bi-x-circle me-1"></i>Clear Pin
        </button>
    </div>
    <div id="property-map-canvas" style="height:350px; border-radius:0 0 .5rem .5rem"></div>
    <div class="card-footer bg-white py-2 px-3 border-top-0">
        <small class="text-muted" id="map-coord-status">
            @if($hasCoords)
                <i class="bi bi-geo-alt-fill text-success me-1"></i>
                Pinned at {{ number_format((float)$initialLat, 6) }}, {{ number_format((float)$initialLng, 6) }}
            @else
                <i class="bi bi-info-circle me-1"></i>
                Double-click on the map to drop a pin, or drag the pin to reposition it.
            @endif
        </small>
    </div>
</div>

@push('scripts')
<script>
window.initPropertyMap = function () {
    var latInput   = document.getElementById('lat-input');
    var lngInput   = document.getElementById('lng-input');
    var mapCanvas  = document.getElementById('property-map-canvas');
    var statusEl   = document.getElementById('map-coord-status');
    var searchInput = document.getElementById('map-search-input');
    var clearBtn   = document.getElementById('map-clear-btn');

    if (! mapCanvas) return;

    var initialLat = parseFloat(latInput ? latInput.value : '') || 21.1458;
    var initialLng = parseFloat(lngInput ? lngInput.value : '') || 79.0882;
    var hasPin     = !!(latInput && latInput.value && lngInput && lngInput.value);

    var map = new google.maps.Map(mapCanvas, {
        center:            { lat: initialLat, lng: initialLng },
        zoom:              hasPin ? 16 : 12,
        mapTypeControl:    false,
        streetViewControl: false,
        fullscreenControl: true,
    });

    var marker = new google.maps.Marker({
        map:      map,
        position: { lat: initialLat, lng: initialLng },
        draggable: true,
        visible:   hasPin,
        animation: google.maps.Animation.DROP,
    });

    function updateInputs(lat, lng) {
        if (latInput) latInput.value = lat.toFixed(7);
        if (lngInput) lngInput.value = lng.toFixed(7);
        if (statusEl) {
            statusEl.innerHTML = '<i class="bi bi-geo-alt-fill text-success me-1"></i>'
                + 'Pinned at ' + lat.toFixed(6) + ', ' + lng.toFixed(6);
        }
    }

    function clearPin() {
        marker.setVisible(false);
        if (latInput) latInput.value = '';
        if (lngInput) lngInput.value = '';
        if (statusEl) {
            statusEl.innerHTML = '<i class="bi bi-info-circle me-1"></i>'
                + 'Double-click on the map to drop a pin, or drag the pin to reposition it.';
        }
    }

    // Drag
    marker.addListener('dragend', function (e) {
        updateInputs(e.latLng.lat(), e.latLng.lng());
    });

    // Double-click to place/move pin
    map.addListener('dblclick', function (e) {
        e.stop();
        marker.setPosition(e.latLng);
        marker.setVisible(true);
        updateInputs(e.latLng.lat(), e.latLng.lng());
    });

    // Places Autocomplete
    if (searchInput) {
        var autocomplete = new google.maps.places.Autocomplete(searchInput, {
            types: ['geocode', 'establishment'],
        });
        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();
            if (! place.geometry || ! place.geometry.location) return;
            var loc = place.geometry.location;
            map.setCenter(loc);
            map.setZoom(17);
            marker.setPosition(loc);
            marker.setVisible(true);
            updateInputs(loc.lat(), loc.lng());
        });
    }

    // Clear button
    if (clearBtn) {
        clearBtn.addEventListener('click', clearPin);
    }
};
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ $mapsKey }}&libraries=places&callback=initPropertyMap">
</script>
@endpush

@else
<div class="alert alert-secondary border-0 d-flex align-items-center gap-2 mb-4 small">
    <i class="bi bi-info-circle fs-5 text-muted"></i>
    <span>Map widget is disabled. Set <code>GOOGLE_MAPS_API_KEY</code> in <code>.env</code> to enable GPS pinning.</span>
</div>
@endif