<div
    x-data="{
        map: null,
        marker: null,
        display: null,

        init() {
            this.$nextTick(() => this.bootMap());
        },

        bootMap() {
            if (window.L) { this.startMap(); return; }

            const css = document.createElement('link');
            css.rel = 'stylesheet';
            css.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
            document.head.appendChild(css);

            const js = document.createElement('script');
            js.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
            js.onload = () => this.startMap();
            document.head.appendChild(js);
        },

        startMap() {
            const existLat = parseFloat($wire.get('data.pickup_lat'));
            const existLng = parseFloat($wire.get('data.pickup_lng'));
            const hasPin   = existLat && existLng;

            const centerLat = hasPin ? existLat : -6.3153;
            const centerLng = hasPin ? existLng : 34.9591;
            const zoom      = hasPin ? 15 : 6;

            this.map = L.map(this.$refs.mapEl).setView([centerLat, centerLng], zoom);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© <a href=\'https://www.openstreetmap.org\'>OpenStreetMap</a>'
            }).addTo(this.map);

            if (hasPin) {
                this.marker  = L.marker([existLat, existLng]).addTo(this.map);
                this.display = existLat.toFixed(6) + ', ' + existLng.toFixed(6);
            }

            this.map.on('click', (e) => {
                if (this.marker) this.marker.remove();
                this.marker  = L.marker([e.latlng.lat, e.latlng.lng]).addTo(this.map);
                this.display = e.latlng.lat.toFixed(6) + ', ' + e.latlng.lng.toFixed(6);
                $wire.set('data.pickup_lat', parseFloat(e.latlng.lat.toFixed(6)));
                $wire.set('data.pickup_lng', parseFloat(e.latlng.lng.toFixed(6)));
            });
        },

        clearPin() {
            if (this.marker) { this.marker.remove(); this.marker = null; }
            this.display = null;
            $wire.set('data.pickup_lat', null);
            $wire.set('data.pickup_lng', null);
        }
    }"
    class="space-y-2"
>
    
    <div wire:ignore>
        <div x-ref="mapEl" style="height:380px; border-radius:8px; border:1px solid #d1d5db; z-index:1;"></div>
    </div>

    
    <div class="flex items-center justify-between rounded-lg bg-gray-50 px-4 py-2 text-sm ring-1 ring-gray-200">
        <div class="flex items-center gap-2">
            <svg class="w-4 h-4 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
            <span class="text-gray-700 font-medium" x-text="display ?? 'Click the map to drop a pickup pin'"></span>
        </div>
        <button
            type="button"
            x-show="display"
            @click="clearPin()"
            class="text-xs text-red-500 hover:text-red-700 font-medium"
        >
            Clear pin
        </button>
    </div>

    <p class="text-xs text-gray-400">
        The map is centred on Tanzania. Scroll to zoom, then click to place the driver's pickup point.
    </p>
</div>
<?php /**PATH C:\xampp\htdocs\NjiaPanda\resources\views/filament/forms/map-picker.blade.php ENDPATH**/ ?>