@php
    $pickerId = $pickerId ?? 'map-center-picker';
    $latitudeInputId = $latitudeInputId ?? 'latitude';
    $longitudeInputId = $longitudeInputId ?? 'longitude';
    $zoomInputId = $zoomInputId ?? 'zoom';
    $initialLatitude = $initialLatitude ?? null;
    $initialLongitude = $initialLongitude ?? null;
    $initialZoom = $initialZoom ?? 13;
@endphp

@once
    @push('styles')
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
        <style>
            .map-center-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-3">
    <div class="col-12">
        <div class="form-group">
            <label for="{{ $pickerId }}" class="mb-2">Pré-visualização do mapa</label>
            <p class="mb-2 fs-14">Clique no mapa para definir o centro ou arraste o marcador para ajustar. O zoom reflecte o nível de zoom inicial.</p>
            <div
                id="{{ $pickerId }}"
                class="map-center-picker-map"
                data-latitude-input-id="{{ $latitudeInputId }}"
                data-longitude-input-id="{{ $longitudeInputId }}"
                data-zoom-input-id="{{ $zoomInputId }}"
                data-initial-latitude="{{ $initialLatitude }}"
                data-initial-longitude="{{ $initialLongitude }}"
                data-initial-zoom="{{ $initialZoom }}"></div>
        </div>
    </div>
</div>