@php
    $mapProvider = old('listing_map_provider', $general_setting->listing_map_provider ?? 'google_embed');
@endphp
<div class="crancy__item-form--group">
    <div class="row">
        <div class="col-12">
            <div class="alert alert-secondary" role="alert">
                {{ __('translate.Listing map settings help') }}
            </div>
        </div>

        <div class="col-12">
            <div class="crancy__item-form--group mg-top-form-20">
                <label class="crancy__item-label">{{ __('translate.Listing map provider') }}</label>
                <select class="form-select crancy__item-input js-listing-map-provider" name="listing_map_provider">
                    <option value="google_embed" {{ $mapProvider === 'google_embed' ? 'selected' : '' }}>{{ __('translate.Google Maps embed') }}</option>
                    <option value="locationiq" {{ $mapProvider === 'locationiq' ? 'selected' : '' }}>{{ __('translate.LocationIQ') }}</option>
                </select>
            </div>
        </div>

        <div class="col-12 js-locationiq-token-field">
            <div class="crancy__item-form--group mg-top-form-20">
                <label class="crancy__item-label">{{ __('translate.LocationIQ Access Token') }}</label>
                <input class="crancy__item-input" type="password" name="locationiq_access_token" value="" placeholder="{{ __('translate.Leave blank to keep current') }}" autocomplete="off">
                <small class="text-muted">{{ __('translate.LocationIQ token help') }}</small>
            </div>
        </div>
    </div>
</div>

@push('js_section')
<script>
    (function () {
        function toggleMapFields() {
            var provider = document.querySelector('.js-listing-map-provider');
            var block = document.querySelector('.js-locationiq-token-field');
            if (!provider || !block) return;
            block.style.display = provider.value === 'locationiq' ? '' : 'none';
        }
        document.addEventListener('DOMContentLoaded', function () {
            var provider = document.querySelector('.js-listing-map-provider');
            if (provider) {
                provider.addEventListener('change', toggleMapFields);
                toggleMapFields();
            }
        });
    })();
</script>
@endpush