@extends('layouts.admin')

@section('title', 'Fleet Live Tracking')
@section('page-title', 'Fleet Live Tracking')
@section('page-subtitle', 'Real-time fleet positions and mission status')

@push('scripts')
@vite(['resources/js/gis/live-tracking.js'])
@endpush

@section('content')
<div class="row g-3 mb-3">
    <div class="col-12">
        <form id="trackingFilterForm" class="d-flex gap-2 flex-wrap">
            <select name="fleet_id" class="form-select form-select-sm" style="width:200px;">
                <option value="">All Fleets</option>
                @foreach ($fleets as $fleet)
                    <option value="{{ $fleet->id }}">{{ $fleet->name }}</option>
                @endforeach
            </select>
            <select name="mission_id" class="form-select form-select-sm" style="width:220px;">
                <option value="">All Active Missions</option>
                @foreach ($missions as $mission)
                    <option value="{{ $mission->id }}">{{ $mission->name }}</option>
                @endforeach
            </select>
            <span class="status-pill status-active ms-auto"><span id="liveFleetCount">0</span> Live Now</span>
        </form>
    </div>
</div>

<div class="gis-workspace">
    <div id="trackingMap" class="gis-map-canvas" data-data-url="{{ route('admin.tracking.data') }}"></div>
</div>
@endsection