@php
    $pickerId = $pickerId ?? 'store-location-picker';
    $latitudeInputId = $latitudeInputId ?? 'latitude';
    $longitudeInputId = $longitudeInputId ?? 'longitude';
    $initialLatitude = $initialLatitude ?? null;
    $initialLongitude = $initialLongitude ?? null;
    $initialZoom = $initialZoom ?? null;
    $defaultCenterLat = $defaultCenterLat ?? null;
    $defaultCenterLng = $defaultCenterLng ?? 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 }}"
                data-initial-zoom="{{ $initialZoom }}"
                data-default-center-lat="{{ $defaultCenterLat }}"
                data-default-center-lng="{{ $defaultCenterLng }}"></div>
        </div>
    </div>
</div>