@php
    $pickerId = $pickerId ?? 'store-location-picker';
    $latitudeInputId = $latitudeInputId ?? 'latitude';
    $longitudeInputId = $longitudeInputId ?? 'longitude';
    $initialLatitude = $initialLatitude ?? null;
    $initialLongitude = $initialLongitude ?? null;
@endphp

@once
    @push('styles')
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
        <style>
            .store-location-picker-map {
                height: 360px;
                width: 100%;
                border-radius: 0.5rem;
                z-index: 1;
            }
        </style>
    @endpush

    @push('scripts')
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    @endpush
@endonce

<div class="row mb-4">
    <div class="col-12">
        <div class="form-group">
            <label for="{{ $pickerId }}" class="mb-2">Localização no mapa</label>
            <p class="mb-2 fs-14">Clique no mapa para definir a localização da loja ou arraste o marcador para ajustar.</p>
            <div
                id="{{ $pickerId }}"
                class="store-location-picker-map"
                data-latitude-input-id="{{ $latitudeInputId }}"
                data-longitude-input-id="{{ $longitudeInputId }}"
                data-initial-latitude="{{ $initialLatitude }}"
                data-initial-longitude="{{ $initialLongitude }}"></div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const mapElement = document.getElementById('{{ $pickerId }}');

            if (!mapElement || typeof L === 'undefined') {
                return;
            }

            const latitudeInput = document.getElementById(mapElement.dataset.latitudeInputId);
            const longitudeInput = document.getElementById(mapElement.dataset.longitudeInputId);

            if (!latitudeInput || !longitudeInput) {
                return;
            }

            const parseCoordinate = (value) => {
                if (value === undefined || value === null || value === '') {
                    return null;
                }

                const parsedValue = Number.parseFloat(value);

                return Number.isFinite(parsedValue) ? parsedValue : null;
            };

            const hasValidCoordinates = (latitude, longitude) => latitude !== null && longitude !== null;

            const initialLatitude = parseCoordinate(mapElement.dataset.initialLatitude);
            const initialLongitude = parseCoordinate(mapElement.dataset.initialLongitude);
            const inputLatitude = parseCoordinate(latitudeInput.value);
            const inputLongitude = parseCoordinate(longitudeInput.value);

            const currentLatitude = inputLatitude ?? initialLatitude;
            const currentLongitude = inputLongitude ?? initialLongitude;
            const defaultCenter = [38.7369, -9.1395];
            const defaultZoom = hasValidCoordinates(currentLatitude, currentLongitude) ? 16 : 6;

            const map = L.map(mapElement).setView(
                hasValidCoordinates(currentLatitude, currentLongitude) ? [currentLatitude, currentLongitude] : defaultCenter,
                defaultZoom
            );

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            let marker = null;

            const syncInputs = (latitude, longitude) => {
                latitudeInput.value = latitude.toFixed(8);
                longitudeInput.value = longitude.toFixed(8);
            };

            const setMarker = (latitude, longitude, shouldCenterMap = false) => {
                if (!hasValidCoordinates(latitude, longitude)) {
                    return;
                }

                if (!marker) {
                    marker = L.marker([latitude, longitude], { draggable: true }).addTo(map);
                    marker.on('dragend', () => {
                        const position = marker.getLatLng();
                        syncInputs(position.lat, position.lng);
                    });
                } else {
                    marker.setLatLng([latitude, longitude]);
                }

                syncInputs(latitude, longitude);

                if (shouldCenterMap) {
                    map.setView([latitude, longitude], Math.max(map.getZoom(), 16));
                }
            };

            const removeMarkerIfInputsAreEmpty = () => {
                const latitude = parseCoordinate(latitudeInput.value);
                const longitude = parseCoordinate(longitudeInput.value);

                if (hasValidCoordinates(latitude, longitude)) {
                    setMarker(latitude, longitude);
                    return;
                }

                if (marker) {
                    map.removeLayer(marker);
                    marker = null;
                }
            };

            if (hasValidCoordinates(currentLatitude, currentLongitude)) {
                setMarker(currentLatitude, currentLongitude);
            }

            map.on('click', (event) => {
                setMarker(event.latlng.lat, event.latlng.lng, true);
            });

            latitudeInput.addEventListener('input', removeMarkerIfInputsAreEmpty);
            longitudeInput.addEventListener('input', removeMarkerIfInputsAreEmpty);

            window.setTimeout(() => {
                map.invalidateSize();
            }, 0);
        });
    </script>
@endpush