@props(['model' => null, 'show' => false])


@php
    $uniqueClass = uniqid();
@endphp

@isset($model)
    @if ($model->lat && $model->lng && $model->map_desc)
        <div class="form-group mt-1">
            <label for="address">
                {{ __('admin.map_address') }}
            </label>
            <input type="text" id="address-input" name="map_desc" class="form-control map-input {{ $uniqueClass }}"
                value="{{ $model->map_desc }}">
            <input type="hidden" class="{{ $uniqueClass }}" name="lat" id="address-latitude"
                value="{{ $model->lat }}" />
            <input type="hidden" class="{{ $uniqueClass }}" name="lng" id="address-longitude"
                value="{{ $model->lng }}" />
        </div>
        <div id="address-map-container" style="width:100%;height:400px;">
            <div style="width: 100%; height: 100%" id="address-map"></div>
        </div>
    @else
        <div class="form-group mt-1">
            <label for="address">
                {{ __('admin.map_address') }}
            </label>
            <input type="text" id="address-input" name="map_desc" class="form-control map-input {{ $uniqueClass }}">
            <input type="hidden" class="{{ $uniqueClass }}" name="lat" id="address-latitude" value="0" />
            <input type="hidden" class="{{ $uniqueClass }}" name="lng" id="address-longitude" value="0" />
        </div>
        <div id="address-map-container" style="width:100%;height:400px; ">
            <div style="width: 100%; height: 100%" id="address-map"></div>
        </div>
    @endif
@else
    <div class="form-group mt-1">
        <label for="address">
            {{ __('admin.map_address') }}
        </label>
        <input type="text" id="address-input" name="map_desc" class="form-control map-input {{ $uniqueClass }}">
        <input type="hidden" class="{{ $uniqueClass }}" name="lat" id="address-latitude" value="0" />
        <input type="hidden" class="{{ $uniqueClass }}" name="lng" id="address-longitude" value="0" />
    </div>
    <div id="address-map-container" style="width:100%;height:400px; ">
        <div style="width: 100%; height: 100%" id="address-map"></div>
    </div>
@endisset

@push("css")
    <style>
        .disabled-div {
            opacity: 0.85;
            pointer-events: none;
        }
    </style>
@endpush

@push('js')
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ googleMapKey() }}&libraries=places,marker&callback=initialize"
        async defer></script>

    <script src="{{ asset('js/map.js') }}"></script>
@endpush



@if ($show)
    @push('js')
        <script>
            $("." + @json($uniqueClass)).attr('disabled', true).css('opacity', '1')
            $("#address-map-container").addClass('disabled-div').css('opacity', '1'); // Apply disabled style
        </script>
    @endpush
@endif