@extends('layouts.app')
@section('title', $route->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> {{ $route->ref_no }}</h1>
        <div>
            @can('tms.routes.update')
            <form method="POST" action="{{ action([\Modules\Tms\Http\Controllers\RouteController::class,'optimize'],[$route->id]) }}" style="display:inline">@csrf
                <button type="submit" class="btn btn-warning"><i class="fa fa-magic"></i> @lang('tms::lang.optimize_route')</button>
            </form>
            <a href="{{ action([\Modules\Tms\Http\Controllers\RouteController::class,'edit'],[$route->id]) }}" class="btn btn-primary"><i class="fa fa-edit"></i> @lang('tms::lang.edit')</a>
            @endcan
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="mt-card"><div class="mt-card-body">
                <table class="table table-bordered">
                    <tr><th>@lang('tms::lang.route_date')</th><td>{{ $route->route_date?->format('Y-m-d') }}</td></tr>
                    <tr><th>@lang('tms::lang.driver')</th><td>{{ $route->driver?->name ?? '—' }}</td></tr>
                    <tr><th>@lang('tms::lang.vehicle')</th><td>{{ $route->vehicle?->plate_number ?? '—' }}</td></tr>
                    <tr><th>@lang('tms::lang.status')</th><td>{{ $statuses[$route->status] ?? $route->status }}</td></tr>
                    <tr><th>@lang('tms::lang.total_distance')</th><td>{{ $route->total_distance_km ? $route->total_distance_km.' km' : '—' }}</td></tr>
                </table>
                <h4>@lang('tms::lang.stops')</h4>
                <ol>
                    @foreach($route->stops as $stop)
                    <li>
                        @if($stop->shipment)
                            <a href="{{ action([\Modules\Tms\Http\Controllers\ShipmentController::class,'show'],[$stop->shipment_id]) }}">{{ $stop->shipment->ref_no }}</a>
                        @endif
                        <div class="text-muted small">{{ $stop->address ?? '—' }}</div>
                    </li>
                    @endforeach
                </ol>
            </div></div>
        </div>
        <div class="col-md-7">
            <div class="mt-card"><div class="mt-card-body"><div id="tms-route-map" style="height:480px;border-radius:12px;"></div></div></div>
        </div>
    </div>
</section>
@endsection
@section('javascript')
<script>
var routeStops = @json($mapStops);
var origin = @json($mapOrigin);
$(function(){
    var map = L.map('tms-route-map');
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom:19}).addTo(map);
    var pts = [];
    if(origin.lat && origin.lng){ L.marker([origin.lat,origin.lng]).addTo(map).bindPopup('Origin'); pts.push([origin.lat,origin.lng]); }
    routeStops.forEach(function(s,i){ L.marker([s.lat,s.lng]).addTo(map).bindPopup((i+1)+'. '+s.label); pts.push([s.lat,s.lng]); });
    if(pts.length){ if(pts.length>1) L.polyline(pts,{color:'#3b82f6'}).addTo(map); map.fitBounds(pts,{padding:[30,30]}); }
    else map.setView([35.6892,51.3890],6);
});
</script>
@endsection