@extends('layouts.app')

@section('title', 'Properties Map')
@section('page-title', 'Properties Map')

@push('styles')
<style>
    #properties-map-canvas { height: calc(100vh - 200px); min-height: 500px; border-radius: .5rem; }
    .map-legend { font-size: 0.78rem; }
</style>
@endpush

@section('content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <p class="text-muted mb-0 small">
            {{ count($mapProperties) }} published {{ Str::plural('property', count($mapProperties)) }} with GPS coordinates
        </p>
    </div>
    <a href="{{ route('admin.property.index') }}" class="btn btn-sm btn-light">
        <i class="bi bi-list-ul me-1"></i>List View
    </a>
</div>

@if(! config('services.google.maps_key'))
<div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle me-2"></i>
    <strong>Google Maps API key not configured.</strong>
    Set <code>GOOGLE_MAPS_API_KEY</code> in your <code>.env</code> file and clear the config cache.
</div>
@elseif(count($mapProperties) === 0)
<div class="card border-0 shadow-sm">
    <div class="card-body text-center py-5 text-muted">
        <i class="bi bi-pin-map d-block fs-1 mb-3 opacity-25"></i>
        <p class="mb-1">No published properties have GPS coordinates yet.</p>
        <p class="small">Edit a property and pin it on the map to see it here.</p>
    </div>
</div>
@else
<div class="card border-0 shadow-sm overflow-hidden">
    <div id="properties-map-canvas"></div>
</div>
@endif

@endsection

@push('scripts')
@if(config('services.google.maps_key') && count($mapProperties) > 0)
<script>
window.initPropertiesMap = function () {
    var properties = @json($mapProperties);

    var map = new google.maps.Map(document.getElementById('properties-map-canvas'), {
        center:            { lat: 21.1458, lng: 79.0882 },
        zoom:              10,
        mapTypeControl:    true,
        streetViewControl: false,
        fullscreenControl: true,
    });

    var bounds   = new google.maps.LatLngBounds();
    var openInfo = null;

    properties.forEach(function (p) {
        var position = { lat: p.lat, lng: p.lng };

        var marker = new google.maps.Marker({
            map:      map,
            position: position,
            title:    p.title,
            animation: google.maps.Animation.DROP,
        });

        var purposeColor = p.listing_purpose === 'for_rent' ? '#0dcaf0' : '#198754';
        var purposeLabel = p.listing_purpose === 'for_rent' ? 'For Rent' : 'For Sale';

        var infoContent =
            '<div style="max-width:240px;font-family:\'Segoe UI\',Arial,sans-serif;font-size:13px;line-height:1.5">' +
            '<div style="font-weight:700;margin-bottom:5px;font-size:14px">' + escHtml(p.title) + '</div>' +
            '<div style="margin-bottom:6px">' +
                '<span style="background:#343a40;color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;margin-right:3px">' +
                    escHtml(p.type_label) +
                '</span>' +
                '<span style="background:' + purposeColor + ';color:#fff;font-size:10px;padding:2px 6px;border-radius:4px">' +
                    purposeLabel +
                '</span>' +
            '</div>' +
            '<table style="width:100%;font-size:12px;color:#555;margin-bottom:8px">' +
                '<tr><td style="color:#888;padding-right:6px">Area</td><td>' + escHtml(p.area) + '</td></tr>' +
                '<tr><td style="color:#888;padding-right:6px">Price</td><td style="font-weight:600;color:#0d6efd">' + escHtml(p.price) + '</td></tr>' +
                (p.city ? '<tr><td style="color:#888;padding-right:6px">City</td><td>' + escHtml(p.city) + '</td></tr>' : '') +
            '</table>' +
            '<a href="' + p.url + '" target="_blank" ' +
               'style="display:inline-block;background:#0d6efd;color:#fff;font-size:11px;font-weight:600;' +
                      'padding:4px 10px;border-radius:4px;text-decoration:none">' +
                'View Property →' +
            '</a>' +
            '</div>';

        var infoWindow = new google.maps.InfoWindow({ content: infoContent });

        marker.addListener('click', function () {
            if (openInfo) { openInfo.close(); }
            infoWindow.open(map, marker);
            openInfo = infoWindow;
        });

        bounds.extend(position);
    });

    map.fitBounds(bounds);

    // Close open InfoWindow when clicking blank map area
    map.addListener('click', function () {
        if (openInfo) { openInfo.close(); openInfo = null; }
    });

    function escHtml(str) {
        if (! str) return '—';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }
};
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_key') }}&callback=initPropertiesMap">
</script>
@endif
@endpush