@extends('layouts.app')
@section('title', __('tms::lang.shipment_tracking').' — '.$track['shipment']['ref_no'])
@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-route" style="color:#3b82f6;margin-left:8px;"></i> {{ $track['shipment']['ref_no'] }}</h1>
        <a href="{{ action([\Modules\Tms\Http\Controllers\ShipmentController::class, 'show'], [$track['shipment']['id']]) }}" class="btn btn-default">@lang('tms::lang.shipments')</a>
    </div>
    <div class="mt-card"><div class="mt-card-body"><div id="tms-map"></div></div></div>
</section>
@endsection
@section('javascript')
<script>
var trackData = @json($track);
$(function(){
    var map = L.map('tms-map');
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
    var latlngs = [];
    (trackData.points || []).forEach(function(p){ latlngs.push([p.lat, p.lng]); });
    if(latlngs.length){
        L.polyline(latlngs, {color:'#3b82f6'}).addTo(map);
        L.circleMarker(latlngs[0], {radius:6, color:'green'}).addTo(map).bindPopup('Start');
        L.circleMarker(latlngs[latlngs.length-1], {radius:6, color:'orange'}).addTo(map).bindPopup('Last');
        map.fitBounds(latlngs, {padding:[30,30]});
    } else if(trackData.destination){
        map.setView([trackData.destination.lat, trackData.destination.lng], 14);
    } else {
        map.setView([35.6892, 51.3890], 6);
    }
    if(trackData.destination){
        L.marker([trackData.destination.lat, trackData.destination.lng]).addTo(map)
            .bindPopup('<b>@lang('tms::lang.destination')</b><br>'+(trackData.destination.address||''));
    }
});
</script>
@endsection