@extends('layouts.app')
@section('title', __('tms::lang.live_tracking'))
@section('content')
@include('tms::layouts.nav')
@include('tms::layouts.map_assets')
<section class="content no-print mt-page">
    <div class="mt-page-header">
        <h1><i class="fas fa-map-marked-alt" style="color:#3b82f6;margin-left:8px;"></i> @lang('tms::lang.live_tracking')</h1>
        <button type="button" class="btn btn-default" id="tms_refresh_map"><i class="fa fa-sync"></i> @lang('tms::lang.refresh')</button>
    </div>
    <div class="mt-card"><div class="mt-card-body"><div id="tms-map"></div></div></div>
</section>
@endsection
@section('javascript')
<script>
$(function(){
    var map = L.map('tms-map').setView([35.6892, 51.3890], 6);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap' }).addTo(map);
    var markers = {};
    function loadDrivers(){
        $.get('{{ action([\Modules\Tms\Http\Controllers\TrackingController::class, "liveData"]) }}', function(res){
            if(!res.success) return;
            Object.keys(markers).forEach(function(k){ map.removeLayer(markers[k]); });
            markers = {};
            res.drivers.forEach(function(d, i){
                if(!d.lat || !d.lng) return;
                var m = L.marker([d.lat, d.lng]).addTo(map).bindPopup('<b>'+d.name+'</b><br>'+(d.shipment_ref || '')+'<br><small>'+(d.updated_at||'')+'</small>');
                markers[d.id] = m;
                if(i===0 && res.drivers.length===1) map.setView([d.lat, d.lng], 13);
            });
            if(res.drivers.length > 1){
                var group = L.featureGroup(Object.values(markers));
                if(group.getLayers().length) map.fitBounds(group.getBounds().pad(0.2));
            }
        });
    }
    loadDrivers();
    $('#tms_refresh_map').on('click', loadDrivers);
    setInterval(loadDrivers, 30000);
});
</script>
@endsection