@include('../partials.header')

{{--
    Improved Google Maps Blade View (Dynamic Loading & Server-Side Clustering)

    Changes Made:
    - Uses map_dynamic.js for fetching/rendering markers based on map bounds.
    - Requires a backend API endpoint (defined in mapData.apiEndpoint) to serve marker/cluster data.
    - The external @googlemaps/markerclusterer library is NO LONGER needed or included.
    - API key loading remains a security concern - load securely from backend.
--}}

{{-- Include necessary map styling --}}
@include('../partials.mapStyle')

<section id="ts-hero" class="mb-0 flex-wrap">
    {{-- The map container --}}
    <div id="map_canvas" style="width: 100%; height: 90vh;">
        {{-- Optional: Add a loading indicator --}}
        <p style="text-align: center; padding-top: 50px;">Loading map...</p>
    </div>
</section>

{{--
    IMPORTANT: Secure API Key Loading
    Replace YOUR_SECURELY_LOADED_API_KEY with your key, loaded securely from the backend.
    The 'callback=initMap' triggers the initialization function in map_dynamic.js.
    Ensure the 'marker' library is included.
--}}
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_OXU8m9x06roE94gEbKVUcNjYvbT3Qfg&libraries=marker&v=weekly&callback=initMap"
    async defer></script>

{{--
    REMOVE or comment out the external marker clusterer library if it was previously included.
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
--}}

{{-- Pass data from PHP (Laravel) to JavaScript --}}
<script>
    // Define the mapData object for map_dynamic.js
    const mapData = {
        // API endpoint for fetching markers (corresponds to the route for MapController@getMarkers)
        apiEndpoint: "{{ route('map.markers.get') }}", // Assumes route name 'map.markers.get'

        // Base paths for assets used in map_dynamic.js
        assetPaths: {
            iconBase: "{{ asset('img/icon') }}",
            coverBase: "{{ asset('auction_cover') }}", // Adjust path as needed
            auctionBase: "{{ url('/auctionData') }}" // Base URL for auction details
        },

        // Optional: Pass map configuration from backend
        center: {
            lat: 24.726384,
            lng: 46.677442
        }, // Example default
        zoom: 5, // Example default
        mapId: "YOUR_MAP_ID" // Replace with your actual Map ID or pass from backend
    };
</script>

{{-- Include the dynamic JavaScript file AFTER mapData is defined --}}
{{-- Adjust the path based on your public directory structure --}}
<script src="{{ asset('js/map_dynamic.js') }}" defer></script>

{{-- Assuming partials.footer handles closing tags --}}
{{-- @include("partials.footer") --}}