@include('layouts.components.section-marker', ['section_name' => $mapCenter->description])

<div class="card py-4 px-4">
    <p class="text-muted small mb-4">Estas coordenadas e o nível de zoom definem o mapa utilizado para marcar a localização das lojas, tanto no backend como no frontend pelos comerciantes.</p>

    <div class="row mb-3">
        <div class="col-md-6">
            <label class="mb-2" for="map_center_lat">Latitude do centro</label>
            <input
                type="number"
                step="any"
                name="map_center[lat]"
                id="map_center_lat"
                class="form-control"
                value="{{ old('map_center.lat', $mapCenter->value['lat'] ?? '') }}">

            @if ($errors->has('map_center.lat'))
                <div class="error handle-error">{{ $errors->first('map_center.lat') }}</div>
            @endif
        </div>
        <div class="col-md-6">
            <label class="mb-2" for="map_center_lng">Longitude do centro</label>
            <input
                type="number"
                step="any"
                name="map_center[lng]"
                id="map_center_lng"
                class="form-control"
                value="{{ old('map_center.lng', $mapCenter->value['lng'] ?? '') }}">

            @if ($errors->has('map_center.lng'))
                <div class="error handle-error">{{ $errors->first('map_center.lng') }}</div>
            @endif
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-6">
            <label class="mb-2" for="map_center_zoom">Nível de zoom <small>(Pré-definido: 13)</small></label>
            <input
                type="number"
                min="0"
                name="map_center[zoom]"
                id="map_center_zoom"
                class="form-control"
                value="{{ old('map_center.zoom', $mapCenter->value['zoom'] ?? 13) }}">

            @if ($errors->has('map_center.zoom'))
                <div class="error handle-error">{{ $errors->first('map_center.zoom') }}</div>
            @endif
        </div>
    </div>

    @include('cfg_system_settings.partials.map-center-picker', [
        'pickerId' => 'map-center-picker',
        'latitudeInputId' => 'map_center_lat',
        'longitudeInputId' => 'map_center_lng',
        'zoomInputId' => 'map_center_zoom',
        'initialLatitude' => $mapCenter->value['lat'],
        'initialLongitude' => $mapCenter->value['lng'],
        'initialZoom' => $mapCenter->value['zoom'],
    ])
</div>