@extends('telematics.layouts.master')
@section('page_content')

<!-- PAGE TITLE -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">@lang('translation.sf_menus.telematics.positions')</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="#">@lang('translation.sf_menus.telematics.main')</a></li>
                    <li class="breadcrumb-item active">@lang('translation.sf_menus.telematics.positions')</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <div id="map" style="height: 70vh; width: 100%;"></div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom_scripts')
    @if($maps->count() > 0)
        @php
            $mapProvider = $maps->first();
            $providerName = strtolower($mapProvider->name);
            $mapKey = $mapProvider->pivot->key;
        @endphp

        @if($providerName === 'google maps')
            <!-- Load Google Maps API with the API key from the pivot record -->
            <script>
                (g => {
                    var h, a, k, p="The Google Maps JavaScript API", c="google", l="importLibrary", q="__ib__", m=document, b=window;
                    b = b[c]||(b[c]={});
                    var d = b.maps||(b.maps={}), r = new Set, e = new URLSearchParams,
                        u = () => h||(h=new Promise(async (f,n)=>{
                            a = m.createElement("script");
                            e.set("libraries",[...r]+"");
                            for(k in g) e.set(k.replace(/[A-Z]/g, t=>"_"+t[0].toLowerCase()), g[k]);
                            e.set("callback", c+".maps."+q);
                            a.src=`{{ $mapProvider->script_url }}`+e;
                            d[q]=f;
                            a.onerror=()=>h=n(Error(p+" could not load."));
                            a.nonce=m.querySelector("script[nonce]")?.nonce||"";
                            m.head.append(a)
                        }));
                    d[l] ? console.warn(p+" only loads once. Ignoring:", g) : d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))
                })
                ({
                    key: "{{ $mapProvider->pivot->key }}",
                    region: "ma",   // add your custom region here
                    v: "weekly"
                });
            </script>
            <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script> 
            <script src="{{ asset('build/js/apps/telematics/google.js') }}"></script>
        @elseif($providerName === 'mapbox')
            <!-- Include Mapbox CSS and JS from CDN -->
            <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
            <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
            <!-- Include your Mapbox-specific JS file -->
            <script src="{{ asset('build/js/apps/telematics/mapbox.js') }}"></script>
        @else
            <!-- Fallback or additional provider scripts can go here -->
            <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
            <script src="{{ asset('build/js/apps/telematics/leaflet.js') }}"></script>
        @endif

    @else
        <!-- No provider? Fallback to default Leaflet -->
        <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
        <script src="{{ asset('build/js/apps/telematics/leaflet.js') }}"></script>
        
    @endif

    <script>
        // Assuming vehicles is defined and passed from Blade (with external_info).
        // Pass vehicles data from the backend to JavaScript.
        var vehiclesObj = @json($devices);

        // Convert vehicles data to a JS array 
        var vehicles = Object.values(vehiclesObj);

        @if(isset($mapProvider) && strtolower($mapProvider->name) === 'google maps')
            // For Google Maps, call the Google Maps initializer defined in google-maps.js.
            initializeGoogleMap(vehicles, 'map', "{{ $userAccountSettings->mapType->name }}", {{ $userAccountSettings->map_zoom }});
        @elseif(isset($mapProvider) && strtolower($mapProvider->name) === 'mapbox')
            // Call the Mapbox initializer with your vehicles, the map div ID, and your Mapbox access token.
            // Assuming your map provider pivot stores the access token in "key".
            initializeMapboxMap(vehicles, 'map', '{{ $mapProvider->pivot->key }}');
        @else
            // For Leaflet-based providers (or fallback), call the Leaflet initializer.
            initializeLeafletMap(vehicles, 'map');
        @endif
    </script>

@endsection