@extends('backend.layouts.admin.app')
@php
    use App\Models\MineJob;
    use App\Models\JobTransporter;
    use App\Helpers\JobHelper;
@endphp
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_664_24080)">
      <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
      </g>
      <defs>
      <clipPath id="clip0_664_24080">
      <rect width="18" height="18" fill="white"/>
      </clipPath>
      </defs>
      </svg></a></li>
    <li class=""><a href="{{ $isTransporter ? route('transporter.jobs.index') : route('admin.jobs.index') }}">Jobs</a></li>
    <li class="active">Job#{{$job->id}}</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    @php
        $jobStatus = getJobStatusByRole($job, $currentUser);
    @endphp
    <h1>Job#{{$job->id}} <span class="{{$jobStatus['css_class']}}">{{ucwords($jobStatus['status_label'])}}</span></h1>
    <div class="d-flex justify-content-end align-items-center flex-wrap">
        {{-- <div class="d-flex me-4 justify-content-end align-items-center">
            <label for="roleFilter" class="control-label fs-18 fw-medium me-2">Invoice Status</label>
            <div class="custom-min-width-100">
                <select id="roleFilter" class="form-control max-w-200">
                <option value="">Status</option>
                <option value="pending">Pending</option>
                <option value="overdue">Overdue</option>
                <option value="paid">Paid</option>
                </select>
            </div>
        </div> --}}
        <div class="d-flex justify-content-md-end align-items-center flex-wrap">
          @if($job->status !== MineJob::STATUS_COMPLETED)
          @php
            $hideCompleteForTransporter = false;
            if ($isTransporter) {
                $hideCompleteForTransporter = optional($job->transporters()->wherePivot('transporter_id', $currentUser->id)->first())->pivot?->completed_at !== null;
            }
          @endphp
          @if(!$isTransporter || ($isTransporter && !$hideCompleteForTransporter))
          <button class="btn btn-sm btn-primary btn-green border-green position-relative me-3 mb-2 mb-md-0" id="markComplete">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.00037 1.8335C11.3974 1.83367 14.1664 4.60341 14.1664 8.00049C14.1662 11.3974 11.3973 14.1663 8.00037 14.1665C4.60328 14.1665 1.83355 11.3975 1.83337 8.00049C1.83337 4.6033 4.60317 1.8335 8.00037 1.8335ZM11.5404 5.40674C11.1518 5.01814 10.5149 5.01814 10.1263 5.40674L7.0531 8.47998L5.87341 7.30029L5.79822 7.23193C5.43272 6.93413 4.90108 6.93424 4.53552 7.23193L4.45935 7.30029C4.0713 7.68879 4.07129 8.32488 4.45935 8.71338L6.34607 10.6001C6.53204 10.7861 6.78575 10.893 7.0531 10.8931C7.32055 10.8931 7.5741 10.7861 7.76013 10.6001L11.5404 6.8208L11.5463 6.81396C11.9234 6.42355 11.932 5.79851 11.5404 5.40674Z" fill="white" stroke="white"/>
              </svg>
              Mark as Complete
          </button>
          @endif
          @endif
          <button id="openJobChatBtn" class="btn btn-sm btn-primary position-relative" style="display:none">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M4.66626 1.83325H11.3333C12.8991 1.83325 14.1663 3.09833 14.1663 4.65356V9.30688C14.1661 10.862 12.899 12.1262 11.3333 12.1262H10.3333C10.0136 12.1262 9.70803 12.2603 9.4895 12.4875L9.40161 12.5911L9.40063 12.592L8.40063 13.9192L8.39966 13.9202C8.26041 14.1057 8.11101 14.1603 8.00024 14.1604C7.90325 14.1604 7.77617 14.1185 7.65259 13.9836L7.59985 13.9202L7.59888 13.9192L6.59888 12.592L6.59595 12.5872L6.50317 12.4836C6.4045 12.3869 6.28997 12.3121 6.18188 12.2581C6.03867 12.1864 5.85595 12.1262 5.66626 12.1262H4.66626C3.10069 12.126 1.83341 10.8619 1.83325 9.30688V4.65356L1.8479 4.36548C1.99279 2.94507 3.19839 1.83342 4.66626 1.83325ZM5.33325 6.16626C4.69044 6.16626 4.16626 6.69044 4.16626 7.33325C4.16626 7.97279 4.68052 8.50024 5.33325 8.50024C5.98598 8.50024 6.50024 7.97279 6.50024 7.33325C6.50024 6.69044 5.97606 6.16626 5.33325 6.16626ZM8.00024 6.16626C7.35744 6.16626 6.83325 6.69044 6.83325 7.33325C6.83325 7.97279 7.34751 8.50024 8.00024 8.50024C8.65282 8.50007 9.16626 7.97269 9.16626 7.33325C9.16626 6.69055 8.64291 6.16644 8.00024 6.16626ZM10.6663 6.16626C10.0236 6.16644 9.50024 6.69055 9.50024 7.33325C9.50024 7.97269 10.0137 8.50007 10.6663 8.50024C11.319 8.50024 11.8333 7.97279 11.8333 7.33325C11.8333 6.69044 11.3091 6.16626 10.6663 6.16626Z" fill="white" stroke="white"/>
             </svg>
             Chat
             <span class="notification-value" id="jobChatBadge" style="display:none"></span>
          </button>
        </div>
    </div>
  </div>
</section>
<!-- Main content -->
<section class="content pb-0">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="row">
    <div class="col-md-12">
      <div class="">
          <ul class="nav nav-tabs profile-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active fs-16" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="Details" aria-selected="true">Details</button>
            </li>
            
            {{-- Show Travel History only for in_progress and completed status --}}
            @if(in_array($job->status, [MineJob::STATUS_IN_PROGRESS, MineJob::STATUS_COMPLETED]))
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="travel-tab" data-bs-toggle="tab" data-bs-target="#travelHistory" type="button" role="tab" aria-controls="travel-History" aria-selected="false">Travel History</button>
            </li>
            @endif
            
            {{-- Show Issue Reported only for in_progress and completed status --}}
            @if(in_array($job->status, [MineJob::STATUS_IN_PROGRESS, MineJob::STATUS_COMPLETED]))
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Issue-Reported-tab" data-bs-toggle="tab" data-bs-target="#IssueReported" type="button" role="tab" aria-controls="Issue-Reported" aria-selected="false">Issue Reported @if($issueReportCount)<span class="notification-value position-static">{{ $issueReportCount }}</span>@endif</button>
            </li>
            @endif
            
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Map-View-tab" data-bs-toggle="tab" data-bs-target="#MapView" type="button" role="tab" aria-controls="Map-View" aria-selected="false">Map View</button>
            </li>
            
            @if(!$isTransporter)
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Transporters-tab" data-bs-toggle="tab" data-bs-target="#Transporters" type="button" role="tab" aria-controls="Transporters" aria-selected="false">Transporters</button>
            </li>
            @endif
            {{-- Show Vehicles & Drivers only for in_progress and completed status --}}
            @if(in_array($job->status, [MineJob::STATUS_IN_PROGRESS, MineJob::STATUS_COMPLETED]) || $isTransporter)
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Vehicles-tab" data-bs-toggle="tab" data-bs-target="#Vehicles" type="button" role="tab" aria-controls="Vehicles" aria-selected="false">Vehicles & Drivers</button>
            </li>
            @endif
            
            {{-- Documents tab - visible to all users including transporters --}}
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Documents-tab" data-bs-toggle="tab" data-bs-target="#Documents" type="button" role="tab" aria-controls="Documents" aria-selected="false">Documents</button>
            </li>
            {{-- Show Invoices for in_progress and completed status --}}
            @if((!$isTransporter && in_array($job->status, [MineJob::STATUS_IN_PROGRESS, MineJob::STATUS_COMPLETED])) || ($isTransporter && $transporterJobStatus->completed_at))
            
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="Invoices-tab" data-bs-toggle="tab" data-bs-target="#Invoices" type="button" role="tab" aria-controls="Invoices" aria-selected="false">Invoices</button>
            </li>
            @endif
            
          </ul>
          <div class="tab-content" id="m    yTabContent">
            <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                <form action="" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                    @include('backend.jobs.tabs.details')
                </form>
            </div>
            
            {{-- Show Travel History only for in_progress and completed status --}}
            @if(in_array($job->status, [MineJob::STATUS_IN_PROGRESS, MineJob::STATUS_COMPLETED]))
            <div class="tab-pane fade" id="travelHistory" role="tabpanel" aria-labelledby="travel-tab">
                @include('backend.jobs.tabs.travel_history')
            </div>
            @endif
            
            {{-- Show Issue Reported only for in_progress and completed status --}}
            @if(in_array($job->status, [MineJob::STATUS_IN_PROGRESS, MineJob::STATUS_COMPLETED]))
            <div class="tab-pane fade" id="IssueReported" role="tabpanel" aria-labelledby="travel-tab">
                @include('backend.jobs.tabs.issue_reported')
            </div>
            @endif
            
            <div class="tab-pane fade" id="MapView" role="tabpanel" aria-labelledby="travel-tab">
                @include('backend.jobs.tabs.map_view')
            </div>
            
            @if(!$isTransporter)
            <div class="tab-pane fade" id="Transporters" role="tabpanel" aria-labelledby="travel-tab">
                @include('backend.jobs.tabs.transporters')
            </div>
            @endif
            
            {{-- Show Vehicles & Drivers only for in_progress and completed status --}}
            @if(in_array($job->status, [MineJob::STATUS_IN_PROGRESS, MineJob::STATUS_COMPLETED]) || $isTransporter)
            <div class="tab-pane fade" id="Vehicles" role="tabpanel" aria-labelledby="travel-tab">
                @include('backend.jobs.tabs.vehicles')
            </div>
            @endif
            
            {{-- Show Invoices for in_progress and completed status --}}
            @if((!$isTransporter && in_array($job->status, [MineJob::STATUS_IN_PROGRESS, MineJob::STATUS_COMPLETED])) || ($isTransporter && $transporterJobStatus->completed_at))
            <div class="tab-pane fade" id="Invoices" role="tabpanel" aria-labelledby="travel-tab">
                @include('backend.jobs.tabs.invoices')
            </div>
            @endif
            
            
            {{-- Documents tab content - visible to all users including transporters --}}
            <div class="tab-pane fade" id="Documents" role="tabpanel" aria-labelledby="travel-tab">
                @include('backend.jobs.tabs.documents')
            </div>
          </div>
      </div>
    </div>
  </div>
  <!-- /.box -->
</section>
<!-- /.content -->

{{-- Incomplete Transporters Modal (Admin) --}}
@if(!$isTransporter)
<div class="modal fade" id="incompleteTransportersModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="incompleteTransportersModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="incompleteTransportersModalLabel">Transporters</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <h5 class="mb-3">You can't mark this job as complete because some transporters have not marked it as complete.</h5>
        <ul id="incompleteTransportersList" class="list-unstyled">
          <!-- Transporters will be populated dynamically -->
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
      </div>
    </div>
  </div>
</div>

{{-- Add Transporter Modal --}}
<div class="modal fade" id="addTransporterModal" tabindex="-1" aria-labelledby="addTransporterModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addTransporterModalLabel">Add Transporter</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addTransporterForm">
        <div class="modal-body">
          <div class="mb-3">
            <label for="transporterSelect" class="form-label">Select Transporter</label>
            <select class="form-control" id="transporterSelect" name="transporter_id" required>
              <option value="">Select Transporter</option>
              @foreach($unassignedTransporters ?? [] as $transporter)
                <option value="{{ $transporter->id }}">{{ $transporter->name ?? 'null' }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label for="quantityMetricTons" class="form-label">Quantity (Metric Tons)</label>
            <input type="number" step="0.01" min="0" class="form-control" id="quantityMetricTons" name="quantity_metric_tons" placeholder="e.g. 25.50" required>
            <small class="text-muted">Must be less than or equal to {{ (int)($remainingTons ?? 0) === ($remainingTons ?? 0) ? (int)$remainingTons : $remainingTons }} tons</small>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endif

<script>
    // Suppress Google Maps deprecation warnings
    const originalWarn = console.warn;
    console.warn = function(...args) {
        if (args[0] && typeof args[0] === 'string' && args[0].includes('google.maps.Marker is deprecated')) {
            return; // Suppress deprecation warnings
        }
        originalWarn.apply(console, args);
    };
    
    function initMap() {
    const mapElements = document.querySelectorAll('.map'); // Get all elements with class="map"

    mapElements.forEach(function(el) {
        @php
            $lat = $job->loadingLocation->latitude ?? 0;
            $lng = $job->loadingLocation->longitude ?? 0;
            $polyline = $job->map_polyline ?? '';
            $driverIds = $job->trips->pluck('driver_id')->filter()->unique()->values();
            $driverVehicleMap = $job->trips->pluck('vehicle_id', 'driver_id');
            $vehicleNumbersById = ($job->trips->pluck('vehicle')->filter()->unique('id')->mapWithKeys(function($v){ return [$v->id => $v->registration_number]; }) ?? collect())->toArray();
        @endphp
        
        const map = new google.maps.Map(el, {
            zoom: 7, // default zoom
            center: { lat: {{ $lat }}, lng: {{ $lng }} },
            // Remove map controls
            disableDefaultUI: true,
            zoomControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            rotateControl: false,
            fullscreenControl: true,
            gestureHandling: 'cooperative'
        });

        let routeBounds = null;

        // Draw route polyline if available
        @if($polyline)
        const path = google.maps.geometry.encoding.decodePath(@json($polyline));

        const routeOutline = new google.maps.Polyline({
            path: path,
            geodesic: true,
            strokeColor: "#AAB4FF",
            strokeOpacity: 0.9,
            strokeWeight: 10,
            zIndex: 1
        });
        const routeMain = new google.maps.Polyline({
            path: path,
            geodesic: true,
            strokeColor: "#3D2CF2",
            strokeOpacity: 1.0,
            strokeWeight: 8,
            zIndex: 2
        });

        routeOutline.setMap(map);
        routeMain.setMap(map);

        routeBounds = new google.maps.LatLngBounds();
        path.forEach(function(latlng) {
            routeBounds.extend(latlng);
        });

        map.fitBounds(routeBounds);

        if (path.length > 0) {
            const startDot = {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 6,
                fillColor: '#ffffff',
                fillOpacity: 1,
                strokeColor: '#1A237E',
                strokeWeight: 3
            };
            new google.maps.Marker({
                position: path[0],
                map: map,
                icon: startDot,
                title: 'Loading Location'
            });

            new google.maps.Marker({
                position: path[path.length - 1],
                map: map,
                title: 'Offloading Location'
            });
        }
        @endif

        // Realtime driver locations via Firestore Users collection
        (async function subscribeDriversOnMap(){
            try{
                const isInMapView = (typeof el.closest === 'function') ? el.closest('#MapView') : null;
                if (!isInMapView) { return; }
                const driverIds = @json($driverIds);
                const driverVehicleMap = @json($driverVehicleMap);
                const vehicleNumbersById = @json($vehicleNumbersById);
                if (!Array.isArray(driverIds) || driverIds.length === 0) { return; }
                let FC = window.FirebaseChat;
                const firestoreDbIdLocal = "{{ config('firebase.database') }}";
                if (!FC){
                    try { const mod = await import('{{ asset('js/firebase-chat.js') }}'); FC = mod.FirebaseChat || window.FirebaseChat; }catch(_){ return; }
                }
                if (!FC.db){
                    FC.init(null, firestoreDbIdLocal, { userId: "{{ $currentUser->id ?? '' }}", userName: "{{ $currentUser->name ?? '' }}", role: "{{ $isTransporter ? 'transporter' : 'admin' }}" });
                }
                if (!FC.db) { return; }

                // Truck icon from image; rotate via canvas at the image's natural size
                const TRUCK_ICON_URL = '{{ asset('images/truck.png') }}';
                let TRUCK_W = null, TRUCK_H = null;
                const __truckImg = new Image();
                try { __truckImg.crossOrigin = 'anonymous'; } catch(_) {}
                __truckImg.src = TRUCK_ICON_URL;
                const __iconCanvas = document.createElement('canvas');
                const __iconCtx = __iconCanvas.getContext('2d');

          

                function __refreshAllMarkerIcons(){
                    try{
                        markersByDriver && markersByDriver.forEach((marker)=>{
                            const b = marker && marker.__lastBearingDeg != null ? marker.__lastBearingDeg : 0;
                            marker.setIcon(createVehicleMarkerIcon(b));
                        });
                    }catch(_){}
                }

                __truckImg.onload = function(){
                    TRUCK_W = __truckImg.naturalWidth || 40;
                    TRUCK_H = __truckImg.naturalHeight || 40;
                    
                    __refreshAllMarkerIcons();
                };

                function createVehicleMarkerIcon(bearingDeg){
                    const rot = ((Number(bearingDeg) % 360) + 360) % 360;
                    const w = TRUCK_W || __truckImg.naturalWidth || 40;
                    const h = TRUCK_H || __truckImg.naturalHeight || 40;
                    // Use a square canvas that fits the entire rotated image to prevent clipping
                    const diag = Math.ceil(Math.sqrt(w * w + h * h));
                    const cw = diag;
                    const ch = diag;
                    try {
                        if (__iconCanvas.width !== cw || __iconCanvas.height !== ch){
                            __iconCanvas.width = cw;
                            __iconCanvas.height = ch;
                        }
                        __iconCtx.clearRect(0, 0, cw, ch);
                        __iconCtx.save();
                        __iconCtx.translate(cw / 2, ch / 2);
                        __iconCtx.rotate(rot * Math.PI / 180);
                        __iconCtx.drawImage(__truckImg, -w / 2, -h / 2, w, h);
                        __iconCtx.restore();
                        const url = __iconCanvas.toDataURL('image/png');
                        return {
                            url,
                            anchor: new google.maps.Point(cw / 2, ch / 2)
                        };
                    } catch(_) {
                        return {
                            url: TRUCK_ICON_URL,
                            anchor: new google.maps.Point(cw / 2, ch / 2)
                        };
                    }
                }

                function updateMarkerIconRotation(marker, bearingDeg){
                    try {
                        const b = ((Number(bearingDeg) % 360) + 360) % 360;
                        if (marker.__lastBearingDeg != null) {
                            const diff = Math.abs(b - marker.__lastBearingDeg);
                            if (diff < 2) { return; }
                        }
                        marker.__lastBearingDeg = b;
                        marker.setIcon(createVehicleMarkerIcon(b));
                    } catch(_) {}
                }

                // Badge overlay to render vehicle number like a span above the marker
                function VehicleBadgeOverlay(position, html, map){
                    this.position = position;
                    this.html = html || '';
                    this.div = null;
                    this.visible = true;
                    this.setMap(map);
                }
                VehicleBadgeOverlay.prototype = new google.maps.OverlayView();
                VehicleBadgeOverlay.prototype.onAdd = function(){
                    const div = document.createElement('div');
                    div.style.position = 'absolute';
                    div.style.transform = 'translate(-50%, -62px)';
                    div.style.pointerEvents = 'none';
                    div.style.zIndex = '1000';
                    div.innerHTML = this.html;
                    this.div = div;
                    const panes = this.getPanes();
                    if (panes && panes.floatPane) {
                        panes.floatPane.appendChild(div);
                    } else if (panes && panes.overlayMouseTarget) {
                        panes.overlayMouseTarget.appendChild(div);
                    } else {
                        (panes && panes.overlayLayer ? panes.overlayLayer : this.getMap().getDiv()).appendChild(div);
                    }
                };
                VehicleBadgeOverlay.prototype.draw = function(){
                    if (!this.div) return;
                    const projection = this.getProjection();
                    const pt = projection && this.position ? projection.fromLatLngToDivPixel(this.position) : null;
                    if (!pt) return;
                    this.div.style.left = pt.x + 'px';
                    this.div.style.top = pt.y + 'px';
                    this.div.style.zIndex = String(Math.round(1000 + (pt.y || 0)));
                };
                VehicleBadgeOverlay.prototype.onRemove = function(){
                    if (this.div && this.div.parentNode){ this.div.parentNode.removeChild(this.div); }
                    this.div = null;
                };
                VehicleBadgeOverlay.prototype.setPosition = function(latLng){
                    this.position = latLng;
                    this.draw();
                };
                VehicleBadgeOverlay.prototype.setHtml = function(html){
                    this.html = html;
                    if (this.div){ this.div.innerHTML = html; }
                };
                VehicleBadgeOverlay.prototype.setVisible = function(visible){
                    this.visible = !!visible;
                    if (this.div){ this.div.style.display = this.visible ? '' : 'none'; }
                };


                const markersByDriver = new Map();
                const badgeByDriver = new Map();
                const unsubsByDriver = new Map();
                let pendingCenterDriverId = null;

                // Make these accessible globally
                window.markersByDriver = markersByDriver;
                window.badgeByDriver = badgeByDriver;
                window.pendingCenterDriverId = pendingCenterDriverId;

                function refreshVisibilityByVehicleFilter(){
                    const sel = document.getElementById('vehicleFilter');
                    const selectedVehicleId = sel ? String(sel.value || '') : '';
                    markersByDriver.forEach((marker, driverId) => {
                        const vId = driverVehicleMap && driverVehicleMap[driverId] != null ? String(driverVehicleMap[driverId]) : '';
                        const shouldShow = !selectedVehicleId || (selectedVehicleId === vId);
                        if (marker) marker.setMap(shouldShow ? map : null);
                        const badge = badgeByDriver.get(String(driverId));
                        if (badge) badge.setVisible(shouldShow);
                    });
                }

                function getDriverIdForVehicleId(vehicleId) {
                    if (!vehicleId) return null;
                    const keys = Object.keys(driverVehicleMap || {});
                    for (let i = 0; i < keys.length; i++) {
                        const dId = String(keys[i]);
                        const vId = driverVehicleMap && driverVehicleMap[dId] != null ? String(driverVehicleMap[dId]) : '';
                        if (vId === String(vehicleId)) return dId;
                    }
                    return null;
                }

                // Make the function globally accessible
                window.getDriverIdForVehicleId = getDriverIdForVehicleId;

                function centerToMarkerIfOutOfView(marker){
                    try{
                        if (!marker) return;
                        const pos = marker.getPosition();
                        if (!pos) return;
                        const bounds = map.getBounds();
                        if (bounds && bounds.contains(pos)) return;
                        map.setCenter(pos);
                    }catch(_){}}

                // Make the function globally accessible
                window.centerToMarkerIfOutOfView = centerToMarkerIfOutOfView;

                // Smooth movement function for truck markers
                function smoothMoveMarker(marker, newLatLng, newBearing, duration = 1200, onStep) {
                    if (!marker || typeof marker.setPosition !== 'function') return;

                    const startPosition = marker.getPosition();
                    if (!startPosition) return;

                    // Support both google.maps.LatLng and plain {lat, lng}
                    const targetLat = (newLatLng && typeof newLatLng.lat === 'function') ? newLatLng.lat() : (newLatLng ? newLatLng.lat : undefined);
                    const targetLng = (newLatLng && typeof newLatLng.lng === 'function') ? newLatLng.lng() : (newLatLng ? newLatLng.lng : undefined);
                    if (typeof targetLat !== 'number' || typeof targetLng !== 'number' || isNaN(targetLat) || isNaN(targetLng)) {
                        return;
                    }

                    // Use last applied bearing for continuity
                    let startRotation = (marker && typeof marker.__lastBearingDeg === 'number') ? marker.__lastBearingDeg : 0;
                    if (typeof startRotation !== 'number' || isNaN(startRotation)) startRotation = 0;
                    startRotation = ((startRotation % 360) + 360) % 360;
                    let targetBearing = (newBearing != null && !isNaN(newBearing)) ? Number(newBearing) : startRotation;
                    targetBearing = ((targetBearing % 360) + 360) % 360;
                    const startTime = Date.now();

                    // Cancel previous animation if any
                    const animToken = Symbol('anim');
                    marker.__animToken = animToken;

                    function animate() {
                        if (marker.__animToken !== animToken) { return; }
                        const elapsed = Date.now() - startTime;
                        const progress = Math.min(elapsed / duration, 1);

                        // Easing function for smooth movement
                        const easeProgress = 1 - Math.pow(1 - progress, 3);

                        // Interpolate position
                        const lat = startPosition.lat() + (targetLat - startPosition.lat()) * easeProgress;
                        const lng = startPosition.lng() + (targetLng - startPosition.lng()) * easeProgress;
                        const newPos = new google.maps.LatLng(lat, lng);

                        // Interpolate rotation
                        let rotation = startRotation;
                        if (targetBearing !== undefined && targetBearing !== null) {
                            let bearingDiff = targetBearing - startRotation;
                            if (bearingDiff > 180) bearingDiff -= 360;
                            if (bearingDiff < -180) bearingDiff += 360;
                            rotation = startRotation + bearingDiff * easeProgress;
                        }

                        try { marker.setMap(marker.getMap()); marker.setVisible(true); } catch (_) {}
                        marker.setPosition(newPos);
                        updateMarkerIconRotation(marker, rotation);
                        try { if (typeof onStep === 'function') onStep(newPos, rotation); } catch(_) {}

                        if (progress < 1) {
                            requestAnimationFrame(animate);
                        } else {
                            try { marker.__lastBearingDeg = targetBearing; } catch(_) {}
                        }
                    }

                    requestAnimationFrame(animate);
                }

                // Make the function globally accessible
                window.smoothMoveMarker = smoothMoveMarker;

                // Function to extract bearing from Firestore user data
                function extractBearingFromData(data) {
                    if (!data) return null;
                    
                    // Use the rotating field from Firestore users collection
                    if (data.rotating !== undefined && data.rotating !== null && data.rotating !== '') {
                        const bearing = parseFloat(data.rotating);
                        
                        // Validate bearing value (0-360 degrees)
                        if (!isNaN(bearing) && bearing >= 0 && bearing <= 360) {
                            return bearing;
                        }
                    }
                    
                    return null;
                }

                // Make the function globally accessible
                window.extractBearingFromData = extractBearingFromData;

                driverIds.forEach((driverId) => {
                    try{
                        const unsub = FC.subscribeUserLocation(String(driverId), (loc) => {
                            const { lat, lng, data } = loc || {};
                            // Support multiple field names
                            const latVal = (lat != null) ? Number(lat) : (data && data.userLat != null ? Number(data.userLat) : (data && data.latitude != null ? Number(data.latitude) : null));
                            const lngVal = (lng != null) ? Number(lng) : (data && data.userLng != null ? Number(data.userLng) : (data && data.longitude != null ? Number(data.longitude) : null));
                            let marker = markersByDriver.get(String(driverId));
                            if (latVal != null && !isNaN(latVal) && lngVal != null && !isNaN(lngVal)) {
                                const pos = new google.maps.LatLng(latVal, lngVal);
                                const vId = driverVehicleMap && driverVehicleMap[driverId] != null ? String(driverVehicleMap[driverId]) : '';
                                const vehicleNumber = vId && vehicleNumbersById ? (vehicleNumbersById[vId] || '') : '';
                                if (!marker) {
                                    marker = new google.maps.Marker({
                                        position: pos,
                                        map: map,
                                        title: (data && (data.name || data.userName)) ? String(data.name || data.userName) : ('Driver #' + driverId),
                                        icon: createVehicleMarkerIcon(extractBearingFromData(data) || 0),
                                        animation: google.maps.Animation.DROP,
                                    });
                                    markersByDriver.set(String(driverId), marker);

                                    // Set initial rotation if bearing data is available
                                    const initialBearing = extractBearingFromData(data);
                                    if (initialBearing !== null) { updateMarkerIconRotation(marker, initialBearing); }

                                    // add vehicle number badge overlay above marker
                                    const badgeHtml = `<div style="position:relative;display:inline-block;">
                                                          <span class=\"border fs-14 py-1 px-2 rounded-2 bg-white\" style=\"background:#ffffff;border:1px solid rgba(0,0,0,.18);border-radius:16px;box-shadow:0 6px 14px rgba(0,0,0,.25);display:inline-flex;align-items:center;gap:6px;color:#111;font-weight:700;\">`
                                                        + `<i class=\"iconsax icon-292D32 fs-20\" icon-name=\"truck\"></i> ${vehicleNumber || ''}</span>
                                                          <span style=\"position:absolute;left:50%;transform:translateX(-50%);top:100%;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #ffffff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));\"></span>
                                                        </div>`;
                                    const badge = new VehicleBadgeOverlay(pos, badgeHtml, map);
                                    badgeByDriver.set(String(driverId), badge);

                                    refreshVisibilityByVehicleFilter();
                                    if (pendingCenterDriverId && String(driverId) === pendingCenterDriverId) {
                                        centerToMarkerIfOutOfView(marker);
                                        pendingCenterDriverId = null;
                                    }
                                } else {
                                    if (marker && typeof marker.getPosition === 'function') {
                                        // Smoothly move and rotate on every change
                                        const currentPos = marker.getPosition();
                                        const bearing = extractBearingFromData(data);
                                        let distance = 0;
                                        try { distance = google.maps.geometry.spherical.computeDistanceBetween(currentPos, pos) || 0; } catch(_) {}
                                        // Duration scales with distance, bounded for UX
                                        const duration = Math.min(1800, Math.max(400, distance * 6));
                                        const follow = true;
                                        smoothMoveMarker(marker, pos, bearing, duration, function(stepPos){ if (follow) { try { map.panTo(stepPos); } catch(_) {} } });
                                        try { marker.setMap(map); marker.setVisible(true); } catch(_) {}
                                    }
                                    
                                    const badge = badgeByDriver.get(String(driverId));
                                    if (badge) { badge.setPosition(pos); badge.setHtml(`<div style=\"position:relative;display:inline-block;\"><span class=\"border fs-14 py-1 px-2 rounded-2 bg-white\" style=\"background:#ffffff;border:1px solid rgba(0,0,0,.18);border-radius:16px;box-shadow:0 6px 14px rgba(0,0,0,.25);display:inline-flex;align-items:center;gap:6px;color:#111;font-weight:700;\"><i class=\"iconsax icon-292D32 fs-20\" icon-name=\"truck\"></i> ${vehicleNumber || ''}</span><span style=\"position:absolute;left:50%;transform:translateX(-50%);top:100%;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #ffffff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));\"></span></div>`); badge.setVisible(true); }
                                    refreshVisibilityByVehicleFilter();
                                    if (pendingCenterDriverId && String(driverId) === pendingCenterDriverId) {
                                        centerToMarkerIfOutOfView(marker);
                                        pendingCenterDriverId = null;
                                    }
                                }
                            } else if (marker) {
                                // hide marker if no valid location
                                if (typeof marker.setMap === 'function') {
                                    marker.setMap(null);
                                }
                                const badge = badgeByDriver.get(String(driverId));
                                if (badge) { badge.setVisible(false); }
                                refreshVisibilityByVehicleFilter();
                            }
                        });
                        if (typeof unsub === 'function') unsubsByDriver.set(String(driverId), unsub);
                    } catch (_e) { /* ignore per-driver errors */ }
                });

                    // Filter dropdown handler for Map View table (only active inside Map View tab)
    $(document).on('change', '#vehicleFilter', function(){
      const tabPane = this.closest('#MapView');
      if (!tabPane) { return; }
      refreshVisibilityByVehicleFilter();
      const selVehicleId = String(this.value || '');
      if (!selVehicleId) {
        if (routeBounds) { try { map.fitBounds(routeBounds); } catch(_){} }
        // Clear selected vehicle row when showing all vehicles
        $('.vehicle-row').removeClass('selected-vehicle');
        return;
      }
      const driverId = getDriverIdForVehicleId(selVehicleId);
      if (!driverId) { return; }
      const marker = markersByDriver.get(String(driverId));
      if (marker) {
        centerToMarkerIfOutOfView(marker);
        const badge = badgeByDriver.get(String(driverId));
        if (badge) badge.setVisible(true);
      } else {
        // location may arrive later; remember to center when marker appears
        pendingCenterDriverId = String(driverId);
      }
    });

                // Initial apply based on the pre-selected dropdown value
                refreshVisibilityByVehicleFilter();
            }catch(_){ /* ignore */ }
        })();
    });
}
    window.initMap = initMap;
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{$googleMapKey}}&callback=initMap&libraries=geometry&loading=async&v=weekly">
</script>
<script type="module" src="{{ asset('js/firebase-chat.js') }}"></script>
<style>
+.gm-style img { max-width: none !important; }
+
 .vehicle-row {
   cursor: pointer;
   transition: all 0.2s ease;
   padding: 8px;
   border-radius: 4px;
 }

.vehicle-row:hover {
  background-color: #f8f9fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.vehicle-row.selected-vehicle {
  background-color: #e3f2fd;
  border-left: 3px solid #2196f3;
  padding-left: 5px;
}

.vehicle-row.selected-vehicle strong {
  color: #1976d2;
}
</style>

<style>
.expandable-text-wrapper {
    position: relative;
}

.expandable-text {
    word-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
    transition: max-height 0.3s ease;
    line-height: 1.5em;
}

.expandable-text.collapsed {
    max-height: 4.5em; /* Approximately 3 lines (1.5em * 3) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.expandable-text.expanded {
    max-height: none;
    display: block;
}

.view-more-link {
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    margin-top: 5px;
    display: inline-block;
    color: #007bff;
}

.view-more-link:hover {
    text-decoration: underline;
    color: #0056b3;
}
</style>

<script type="text/javascript">

$(document).ready(function() {
    // Function to check if text exceeds 3 lines
    function checkTextHeight() {
        $('.expandable-text').each(function() {
            const $text = $(this);
            const $wrapper = $text.closest('.expandable-text-wrapper');
            const $viewMoreLink = $wrapper.find('.view-more-link');
            
            // Skip if already processed
            if ($text.hasClass('processed')) {
                return;
            }
            
            // Get the original text content
            const fullText = $text.attr('data-full-text') || $text.text().trim();
            
            // Skip if text is empty or N/A
            if (!fullText || fullText === 'N/A' || fullText.length < 10) {
                $viewMoreLink.hide();
                $text.addClass('expanded processed');
                return;
            }
            
            // First, let it expand fully to get true height
            $text.removeClass('collapsed').addClass('expanded');
            const fullHeight = $text[0].scrollHeight;
            
            // Now collapse it
            $text.removeClass('expanded').addClass('collapsed');
            
            // Wait a tick for CSS to apply, then check
            setTimeout(function() {
                const collapsedHeight = $text[0].clientHeight;
                const isOverflowing = $text[0].scrollHeight > collapsedHeight;
                
                console.log('Text check:', {
                    text: fullText.substring(0, 50) + '...',
                    fullHeight: fullHeight,
                    collapsedHeight: collapsedHeight,
                    scrollHeight: $text[0].scrollHeight,
                    isOverflowing: isOverflowing
                });
                
                // If content overflows, show "View More"
                if (isOverflowing) {
                    $viewMoreLink.show();
                } else {
                    $viewMoreLink.hide();
                    $text.removeClass('collapsed').addClass('expanded');
                }
                
                $text.addClass('processed');
            }, 50);
        });
    }
    
    // Check on page load and after a short delay to ensure DOM is ready
    setTimeout(checkTextHeight, 300);
    
    // Also check when the details tab becomes active
    $('#details-tab').on('shown.bs.tab', function () {
        setTimeout(checkTextHeight, 100);
    });
    
    // Re-check on window resize
    $(window).on('resize', function() {
        clearTimeout(window.resizeTimer);
        window.resizeTimer = setTimeout(checkTextHeight, 100);
    });
    
    // Handle View More / View Less click
    $(document).on('click', '.view-more-link', function(e) {
        e.preventDefault();
        const $link = $(this);
        const $wrapper = $link.closest('.expandable-text-wrapper');
        const $text = $wrapper.find('.expandable-text');
        
        if ($text.hasClass('collapsed')) {
            // Expand
            $text.removeClass('collapsed').addClass('expanded');
            $link.text('View Less');
        } else {
            // Collapse
            $text.removeClass('expanded').addClass('collapsed');
            $link.text('View More');
            
            // Scroll to the field if it's below viewport
            $wrapper[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
    });

    // Initialize FirebaseChat for chat button visibility and unread badge
    const firestoreDbId = "{{ config('firebase.database') }}";
    (async function initChatUI(){
      try{
        let FC = window.FirebaseChat;
        if (!FC){
          try { const mod = await import('{{ asset('js/firebase-chat.js') }}'); FC = mod.FirebaseChat || window.FirebaseChat; }catch(_){ return; }
        }
        if (!FC.db){
          FC.init(null, firestoreDbId, { userId: "{{ $currentUser->id ?? '' }}", userName: "{{ $currentUser->name ?? '' }}", role: "{{ $isTransporter ? 'transporter' : 'admin' }}" });
        }
        const jobId = '{{ $job->id }}';
        const chatId = 'group_job' + jobId;
        const badgeEl = document.getElementById('jobChatBadge');
        const chatBtn = document.getElementById('openJobChatBtn');
        if (!chatBtn) return;

        // Check if chat group exists; if not, keep button hidden
                    const chatDoc = await FC.getGroupChat(chatId);
            if (!chatDoc){
              chatBtn.style.display = 'none';
              return;
            }
            // Show the button if group exists
            chatBtn.style.display = '';

            // Ensure each user in chat has userType populated at least from context if missing
            // try{
            //   if (Array.isArray(chatDoc.users)){
            //     const ensureUsers = chatDoc.users.map(uid => ({ id: uid, role: ("{{ $isTransporter ? 'transporter' : 'admin' }}") }));
            //     await FC.addUsersToGroupChatByJobId(String(jobId), ensureUsers);
            //   }
            // }catch(_){/* ignore */}

        if (badgeEl){
          // Subscribe to UserChatStatus to get authoritative unread count
          FC.subscribeUserChatStatus(String(jobId), String("{{ $currentUser->id ?? '' }}"), (status)=>{
            const unread = (status && typeof status.unreadCount === 'number') ? status.unreadCount : 0;
            if (unread > 0){
              badgeEl.textContent = String(unread);
              badgeEl.style.display = '';
            } else {
              badgeEl.textContent = '';
              badgeEl.style.display = 'none';
            }
          });
        }
      }catch(_){ /* ignore */ }
    })();
    /*
     * Tab Visibility Based on Job Status:
     * 
     * PENDING: Details, Map View, Transporters, Documents (4 tabs)
     * IN_PROGRESS: Details, Travel History, Issue Reported, Map View, Transporters, Vehicles & Drivers, Documents (7 tabs)
     * COMPLETED: Details, Travel History, Issue Reported, Map View, Transporters, Vehicles & Drivers, Documents, Invoices (8 tabs)
     * 
     * Current Job Status: {{ $job->status }}
     */
    
    
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable-error-message")}}');

    // Initialize Travel History table only if it exists (in_progress or completed status)
    if ($('#tbl-users').length > 0) {
        var table = $('#tbl-users').DataTable({
          //info: true,
          searching: true,
          ordering: false, // disables default sorting
          //ajax: '../server_side/scripts/server_processing.php',
          //paging: false, // disables pagination
          dom: 'frt<"bottom"ipl><"clear">'
        });
        $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');
        $('#tbl-users_filter').append(`
            <div class="d-flex justify-content-end jobs-right-filter flex-wrap">
                <div class="custom-width-200">
                    <select id="vehicleFilter" class="form-control w-100">
                    <option value="">All Vehicles</option>
                    @foreach($job->trips->pluck('vehicle')->unique('id') ?? [] as $vehicle)
                        <option value="{{ $vehicle->id }}">{{ $vehicle->registration_number ?? 'null' }}</option>
                    @endforeach
                    </select>
                </div>
                <div class="custom-width-200 position-relative">
                    <input type="text" class="form-control date-picker" id="travel-history-calendar" placeholder="Date Range">
                    <span class="position-absolute date-picker-icon">
                        <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                    </span>
                </div>
            </div>
        `);

        // Initialize Travel History filters
        let travelHistoryStartDate = null;
        let travelHistoryEndDate = null;

        // Initialize daterangepicker for travel history
        $('#travel-history-calendar').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear',
                format: 'DD/MM/YYYY'
            }
        });

        $('#travel-history-calendar').on('apply.daterangepicker', function (ev, picker) {
            travelHistoryStartDate = picker.startDate;
            travelHistoryEndDate = picker.endDate;
            $(this).val(travelHistoryStartDate.format('DD/MM/YYYY') + ' - ' + travelHistoryEndDate.format('DD/MM/YYYY'));
            $('#tbl-users').DataTable().draw();
        });

        $('#travel-history-calendar').on('cancel.daterangepicker', function () {
            $(this).val('');
            travelHistoryStartDate = null;
            travelHistoryEndDate = null;
            $('#tbl-users').DataTable().draw();
        });

        // Vehicle filter for travel history
        $('#vehicleFilter').on('change', function () {
            $('#tbl-users').DataTable().draw();
        });

        // Custom filtering for travel history table
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            if (settings.nTable.id !== 'tbl-users') return true;

            const selectedVehicle = $('#vehicleFilter').val();
            const travelHistoryMessage = data[0]; // Documents column contains the message

            // Vehicle filter
            let vehicleMatch = true;
            if (selectedVehicle) {
                // Check if the travel history message contains the vehicle registration number
                const vehicleReg = vehiclesList.find(v => v.vehicle_id == selectedVehicle)?.vehicle_reg;
                if (vehicleReg) {
                    vehicleMatch = travelHistoryMessage.includes(vehicleReg);
                } else {
                    vehicleMatch = false;
                }
            }

            // Date filter
            let dateMatch = true;
            if (travelHistoryStartDate && travelHistoryEndDate) {
                // Extract date from the formatted time in the message
                const timeText = $(settings.nTable).find('tbody tr').eq(dataIndex).find('.fs-14.text-gray').text().trim();
                if (timeText && timeText !== 'Unknown time' && timeText !== 'Now') {
                    // Parse the date from the formatted time (format: "Dec 15 | 2:30 PM")
                    const parsedDate = moment(timeText, ['MMM D | h:mm A', 'MMM DD | h:mm A'], true);
                    if (parsedDate.isValid()) {
                        dateMatch = parsedDate.isSameOrAfter(travelHistoryStartDate, 'day') &&
                                  parsedDate.isSameOrBefore(travelHistoryEndDate, 'day');
                    } else {
                        dateMatch = false;
                    }
                } else {
                    dateMatch = false;
                }
            }

            return vehicleMatch && dateMatch;
        });
    }

    // Initialize Issue Reported table only if it exists (in_progress or completed status)
    if ($('#tbl-issue-reported').length > 0) {
        var table = $('#tbl-issue-reported').DataTable({
           info: true,
           searching: true,
           ordering: false, // disables default sorting
           //ajax: '../server_side/scripts/server_processing.php',
           //paging: false, // disables pagination
           dom: 'frt<"bottom"ipl><"clear">'
         });
        $('#tbl-issue-reported_filter input[type="search"]').attr('placeholder', 'Search');
        $('#tbl-issue-reported_filter').append(`
            <div class="d-flex justify-content-end jobs-right-filter flex-wrap">
                <div class="custom-width-200 position-relative">
                    <input type="text" class="form-control date-picker" id="issue-reported-calendar" placeholder="Date Range">
                    <span class="position-absolute date-picker-icon">
                        <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                    </span>
                </div>
            </div>
        `);

        // Initialize Issue Reported filters
        let issueReportedStartDate = null;
        let issueReportedEndDate = null;

        // Initialize daterangepicker for issue reported
        $('#issue-reported-calendar').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear',
                format: 'DD/MM/YYYY'
            }
        });

        $('#issue-reported-calendar').on('apply.daterangepicker', function (ev, picker) {
            issueReportedStartDate = picker.startDate;
            issueReportedEndDate = picker.endDate;
            $(this).val(issueReportedStartDate.format('DD/MM/YYYY') + ' - ' + issueReportedEndDate.format('DD/MM/YYYY'));
            $('#tbl-issue-reported').DataTable().draw();
        });

        $('#issue-reported-calendar').on('cancel.daterangepicker', function () {
            $(this).val('');
            issueReportedStartDate = null;
            issueReportedEndDate = null;
            $('#tbl-issue-reported').DataTable().draw();
        });

        // Custom filtering for issue reported table
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            if (settings.nTable.id !== 'tbl-issue-reported') return true;

            // Date filter
            let dateMatch = true;
            if (issueReportedStartDate && issueReportedEndDate) {
                // Extract date from the formatted time in the message
                const timeText = $(settings.nTable).find('tbody tr').eq(dataIndex).find('.fs-14.text-gray').text().trim();
                if (timeText && timeText !== 'Unknown time' && timeText !== 'Now') {
                    // Parse the date from the formatted time (format: "2 hours ago", "1 day ago", etc.)
                    // Since it's diffForHumans(), we need to parse it differently
                    const now = moment();
                    let parsedDate = null;
                    
                    // Handle different diffForHumans formats
                    if (timeText.includes('ago')) {
                        // Extract the time difference
                        const timeDiff = timeText.replace(' ago', '');
                        if (timeDiff.includes('second')) {
                            parsedDate = now.subtract(parseInt(timeDiff), 'seconds');
                        } else if (timeDiff.includes('minute')) {
                            parsedDate = now.subtract(parseInt(timeDiff), 'minutes');
                        } else if (timeDiff.includes('hour')) {
                            parsedDate = now.subtract(parseInt(timeDiff), 'hours');
                        } else if (timeDiff.includes('day')) {
                            parsedDate = now.subtract(parseInt(timeDiff), 'days');
                        } else if (timeDiff.includes('week')) {
                            parsedDate = now.subtract(parseInt(timeDiff), 'weeks');
                        } else if (timeDiff.includes('month')) {
                            parsedDate = now.subtract(parseInt(timeDiff), 'months');
                        } else if (timeDiff.includes('year')) {
                            parsedDate = now.subtract(parseInt(timeDiff), 'years');
                        }
                    } else if (timeText.includes('from now')) {
                        // Future dates
                        const timeDiff = timeText.replace(' from now', '');
                        if (timeDiff.includes('second')) {
                            parsedDate = now.add(parseInt(timeDiff), 'seconds');
                        } else if (timeDiff.includes('minute')) {
                            parsedDate = now.add(parseInt(timeDiff), 'minutes');
                        } else if (timeDiff.includes('hour')) {
                            parsedDate = now.add(parseInt(timeDiff), 'hours');
                        } else if (timeDiff.includes('day')) {
                            parsedDate = now.add(parseInt(timeDiff), 'days');
                        } else if (timeDiff.includes('week')) {
                            parsedDate = now.add(parseInt(timeDiff), 'weeks');
                        } else if (timeDiff.includes('month')) {
                            parsedDate = now.add(parseInt(timeDiff), 'months');
                        } else if (timeDiff.includes('year')) {
                            parsedDate = now.add(parseInt(timeDiff), 'years');
                        }
                    }
                    
                    if (parsedDate && parsedDate.isValid()) {
                        dateMatch = parsedDate.isSameOrAfter(issueReportedStartDate, 'day') &&
                                  parsedDate.isSameOrBefore(issueReportedEndDate, 'day');
                    } else {
                        dateMatch = false;
                    }
                } else {
                    dateMatch = false;
                }
            }

            return dateMatch;
        });
    }
    
     var table = $('#tbl-map-view').DataTable({
       info: true,
       searching: true,
       ordering: false, // disables default sorting
       //ajax: '../server_side/scripts/server_processing.php',
       paging: false, // disables pagination
       dom: 'frt<"bottom"ipl><"clear">'
     });
     $('#tbl-map-view_filter').append(`
        <div class="d-flex justify-content-end  w-100 flex-wrap">
            <div class="w-100 text-start">
                <label class="fs-18 fw-semibold text-black ">Vehicles</label>
                <select id="vehicleFilter" class="form-control w-100 mt-1">
                <option value="">All</option>
                @foreach($job->trips->pluck('vehicle')->unique('id') ?? [] as $vehicle)
                    <option value="{{ $vehicle->id }}">{{ $vehicle->registration_number ?? 'null' }}</option>
                @endforeach
                </select>
            </div>
            
        </div>
    `);

    @php
        $vehiclesList = ($job->trips ?? collect())
            ->sortByDesc('id')
            ->map(function($t){
                return [
                    'vehicle_id' => $t->vehicle->id ?? null,
                    'vehicle_reg' => $t->vehicle->registration_number ?? null,
                    'driver_name' => $t->driver->name ?? null,
                ];
            })
            ->filter(function($x){ return !is_null($x['vehicle_id']); })
            ->unique('vehicle_id')
            ->values();
    @endphp
    const vehiclesList = @json($vehiclesList);

    function escapeHtml(str){
      return String(str == null ? '' : str).replace(/[&<>"']/g, function(c){
        return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'}[c]);
      });
    }

    function renderVehiclesListForMapTable(){
      try{
        const dt = $('#tbl-map-view').DataTable();
        const sel = document.getElementById('vehicleFilter');
        const selectedVehicleId = sel ? String(sel.value || '') : '';
        const items = (Array.isArray(vehiclesList) ? vehiclesList : []).filter(v => !selectedVehicleId || String(v.vehicle_id) === selectedVehicleId);
        dt.clear();
        if (items.length === 0){
          dt.row.add(['<div class="text-start text-muted">No vehicles found</div>']);
        } else {
          items.forEach((v, index) => {
            const html = `<div class="fs-16 text-start cursor-pointer vehicle-row" data-vehicle-id="${v.vehicle_id}" style="cursor: pointer;"><strong>${escapeHtml(v.vehicle_reg || '')}</strong><span class="border fs-14 py-1 px-2 rounded-2 ms-1">Truck</span></div>` +
                         `<div class="fs-14 text-gray text-start"><span class=\"fw-semibold\">Driver:</span> ${escapeHtml(v.driver_name || '')}</div>`;
            dt.row.add([html]);
          });
        }
        dt.draw(false);
      }catch(_){ }
    }

    renderVehiclesListForMapTable();
    $(document).on('change', '#vehicleFilter', function(){
      const tabPane = this.closest('#MapView');
      if (!tabPane) return;
      renderVehiclesListForMapTable();
    });

    // Handle vehicle row clicks to center map on vehicle marker
    $(document).on('click', '.vehicle-row', function(){
      const tabPane = this.closest('#MapView');
      if (!tabPane) return;
      
      const vehicleId = $(this).data('vehicle-id');
      if (!vehicleId) return;
      
      // Get the driver ID for this vehicle
      const driverId = window.getDriverIdForVehicleId ? window.getDriverIdForVehicleId(vehicleId) : null;
      if (!driverId) {
        console.log('No driver found for vehicle:', vehicleId);
        return;
      }
      
      // Get the marker for this driver
      const marker = window.markersByDriver ? window.markersByDriver.get(String(driverId)) : null;
      if (marker) {
        // Center the map on the marker
        if (window.centerToMarkerIfOutOfView) {
          window.centerToMarkerIfOutOfView(marker);
        }
        
        // Highlight the selected row
        $('.vehicle-row').removeClass('selected-vehicle');
        $(this).addClass('selected-vehicle');
      } else {
        console.log('Marker not found for driver:', driverId);
        // If marker doesn't exist yet, remember to center when it appears
        if (window.pendingCenterDriverId !== undefined) {
          window.pendingCenterDriverId = String(driverId);
        }

      }
    });

    var table = $('#tbl-transporters').DataTable({
      //info: true,
      searching: true,
      ordering: false, // disables default sorting
      //ajax: '../server_side/scripts/server_processing.php',
      //paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-transporters_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-transporters_filter').append(`
        <div class="d-flex justify-content-end flex-wrap">
            
            <div class=" position-relative me-2">
                <input type="text" class="form-control date-picker" placeholder="Date Range" id="transporter-picker">
                <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                </span>
            </div>
            <button class="btn  btn-primary" id="addTransporterBtn"><em class="fa fa-plus-circle"></em> Add Transporter</button>
        </div>
    `);

    // Initialize Vehicles table only if it exists (in_progress or completed status)
    if ($('#tbl-vehicles').length > 0) {
        var table = $('#tbl-vehicles').DataTable({
          //info: true,
          searching: true,
          ordering: false, // disables default sorting
          //ajax: '../server_side/scripts/server_processing.php',
          //paging: false, // disables pagination
          dom: 'frt<"bottom"ipl><"clear">',
          order: []
        });
        $('#tbl-vehicles_filter input[type="search"]').attr('placeholder', 'Search');
        $('#tbl-vehicles_filter').append(`
            <div class="d-flex justify-content-end flex-wrap jobs-right-filter">
                @if(!$isTransporter)
                    <div class="max-w-200">
                        <select id="roleFilter" class="form-control custom-width-200">
                            <option value="">Transporters</option>
                            @foreach($job->trips->pluck('transport')->unique('id') ?? [] as $transporter)
                                <option value="{{ $transporter->id ?? null }}">{{ $transporter->name ?? 'null' }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                <div class="max-w-200 position-relative me-2">
                    <input type="text" class="form-control date-picker" placeholder="Date Range" id="vehicle-calendar">
                    <span class="position-absolute date-picker-icon">
                        <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                    </span>
                </div>
                @if($isTransporter)
                <a href="#" id="allocateVehicleBtn" >
                    <button class="btn  btn-primary"><em class="fa fa-plus-circle"></em> Allocate Vehicle</button>
                </a>
                @endif
                
                <a href="{{ $isTransporter ? route('transporter.jobs.vehicles-and-drivers.export', ['job' => $job->id]) :  route('admin.jobs.vehicles-and-drivers.export', ['job' => $job->id]) }}" target="_blank">
                    <button class="btn  btn-primary ms-2"><em class="iconsax text-white fs-20" icon-name="download-2"></em> Download</button>
                </a>
            </div>
        `);
    }

    // Initialize vehicle calendar date range only if vehicle table exists
    if ($('#tbl-vehicles').length > 0) {
        $(function () {
            let startDate = null;
            let endDate = null;

            // Initialize daterangepicker
            $('#vehicle-calendar').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'DD/MM/YYYY'
                }
            });

            $('#vehicle-calendar').on('apply.daterangepicker', function (ev, picker) {
                startDate = picker.startDate;
                endDate = picker.endDate;
                $(this).val(startDate.format('DD/MM/YYYY') + ' - ' + endDate.format('DD/MM/YYYY'));
                $('#tbl-vehicles').DataTable().draw();
            });

            $('#vehicle-calendar').on('cancel.daterangepicker', function () {
                $(this).val('');
                startDate = null;
                endDate = null;
                $('#tbl-vehicles').DataTable().draw();
            });

            // Extend DataTables search
            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                if (!startDate || !endDate) return true;

                const creationDate = data[7]; // Column index for "Creation Date"
                const parsedDate = moment(creationDate, ['YYYY-MM-DD', 'DD/MM/YYYY', 'D/M/YYYY', 'D/M/YY h:mm A'], true);

                if (!parsedDate.isValid()) return true;

                return parsedDate.isSameOrAfter(startDate) && parsedDate.isSameOrBefore(endDate);
            });
        });
    }

    var table = $('#tbl-documents').DataTable({
      //info: true,
      searching: true,
      ordering: true, // disables default sorting
      //ajax: '../server_side/scripts/server_processing.php',
      //paging: false, // disables pagination
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-documents_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-documents_filter').append(`
        <div class="d-flex justify-content-end flex-wrap jobs-right-filter flex-wrap">
        @if(!$isTransporter)
            <div class="max-w-200">
                <select id="transporter-filter" class="form-control custom-width-200 ">
                <option value="">All Transporters</option>
                @foreach($job->transporters ?? [] as $transporter)
                  <option value="{{ $transporter->id }}">{{ $transporter->name ?? 'null' }}</option>
                @endforeach
                </select>
            </div>
        @endif
            <div class="max-w-200">
                <select id="document-type-filter" class="form-control custom-width-200 ">
                <option value="">All Types</option>
                @foreach($documentTypes ?? [] as $documentType)
                  <option value="{{ $documentType->id }}">{{ $documentType->name ?? 'null' }}</option>
                @endforeach
                </select>
            </div>
            <div class="max-w-200 position-relative me-2">
                <input type="text" class="form-control date-picker" placeholder="Date Range" id="calendar-range">
                <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                </span>
            </div>
            
            <a href="{{  $isTransporter ? route('transporter.jobs.documents.create', ['job' => $job->id]) : route('admin.jobs.documents.create', ['job' => $job->id]) }}" class="btn btn-primary" id="uploadDocumentBtnLink">
                <em class="iconsax text-white fs-20" icon-name="upload-2"></em> Upload Document
            </a>
            

        </div>
    `);

    // Initialize Invoices table only if it exists (completed status)
    if ($('#tbl-invoices').length > 0) {
        var table = $('#tbl-invoices').DataTable({
          //info: true,
          searching: true,
          ordering: false, // disables default sorting
          //ajax: '../server_side/scripts/server_processing.php',
          //paging: false, // disables pagination
          dom: 'frt<"bottom"ipl><"clear">'
        });
        $('#tbl-invoices_filter input[type="search"]').attr('placeholder', 'Search');
        $('#tbl-invoices_filter').append(`
            <div class="d-flex justify-content-end flex-wrap">
                
                
                <a class="btn  btn-primary" href="{{ $isTransporter ? route('transporter.jobs.invoice.create', ['job' => $job->id]) : route('admin.jobs.invoice.create', ['job' => $job->id]) }}"><em class="iconsax text-white fs-20" icon-name="upload-2"></em> Upload Invoice</a>
            </div>
        `);
    }

  // Filter on change
  $('#roleFilter').on('change', function () {
    let selected = $(this).val();
    table.column(1).search(selected).draw(); // column index 1 = "Role"
  });
  $('#calendar').datepicker({ dateFormat: 'dd/mm/yy' });

  $(document).on('click', '#addTransporterBtn', function () {
    $('#addTransporterModal').modal('show');
  });

  var isAssigningTransporter = false;
  $('#addTransporterForm').on('submit', async function (e) {
    e.preventDefault();
    const transporterId = $('#transporterSelect').val();
    const submitBtn = $(this).find('button[type="submit"]');

    if (isAssigningTransporter) {
      return;
    }

    if (!transporterId) {
      toastr.error('Please select a transporter');
      return;
    }

    // Show loader
    const originalText = submitBtn.html();
    isAssigningTransporter = true;
    submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Saving...');

    // Submit via AJAX or form post
    $.ajax({
      url: '{{ route("admin.jobs.assign-transporter", ["job" => $job->id]) }}',
      type: 'POST',
      data: {
        transporter_id: transporterId,
        quantity_metric_tons: $('#quantityMetricTons').val(),
        _token: '{{ csrf_token() }}'
      },
      success: async function (response) {
        try {
          // Ensure Firebase is initialized and add transporter to chat group for this job
          const currentUserId = "{{ $currentUser->id ?? '' }}";
          const currentUserName = "{{ $currentUser->name ?? '' }}";
          let FC = window.FirebaseChat;
          if (!FC){
            try {
              const mod = await import('{{ asset('js/firebase-chat.js') }}');
              FC = mod.FirebaseChat || window.FirebaseChat;
            } catch (e) {
              console.warn('Failed to dynamically import FirebaseChat module', e);
            }
          }
              if (FC){
              if (!FC.db){
                FC.init(null, firestoreDbId, { userId: currentUserId, userName: currentUserName, role });
              }
              if (FC.db){
                const tUserId = (response && response.transporter_id) || '';
                const tName = (response && response.transporter_name) || '';
                const tEmail = (response && response.transporter_email) || '';
                const tUserType = (response && response.userType) || '';
                if (tUserId){
                  await FC.addUsersToGroupChatByJobId("{{ $job->id }}", [{ id: tUserId, user_id: tUserId, name: tName, email: tEmail, userType: tUserType }]);
                } else if (transporterId) {
                  await FC.addUsersToGroupChatByJobId("{{ $job->id }}", [{ id: transporterId, user_id: transporterId, name: tName, email: tEmail, userType: tUserType }]);
                }
                console.log('Added transporter to chat group');
              }
          } else {
            console.warn('FirebaseChat not available on window or module import failed');
          }
        } catch (err) {
          console.error('Failed to add transporter to chat group:', err);
        }
        toastr.success('Transporter added successfully');
        $('#addTransporterModal').modal('hide');
        window.location.reload();
      },
      error: function (xhr) {
        // Hide loader on error
        submitBtn.prop('disabled', false).html(originalText);
        try {
          if (xhr && xhr.status === 422) {
            var msg = 'Validation failed';
            if (xhr.responseJSON) {
              if (xhr.responseJSON.message) { msg = xhr.responseJSON.message; }
              else if (xhr.responseJSON.errors) {
                var errs = xhr.responseJSON.errors;
                var firstKey = Object.keys(errs)[0];
                if (firstKey && Array.isArray(errs[firstKey]) && errs[firstKey][0]) { msg = errs[firstKey][0]; }
              }
            }
            toastr.error(msg);
            return;
          }
        } catch (_) {}
        toastr.error('Failed to add transporter');
      }
    });
  });


    // Initialize transporter date range only if transporter table exists
    if ($('#tbl-transporters').length > 0) {
        $(function () {
            let startDate = null;
            let endDate = null;

            // Initialize the date range picker
            $('#transporter-picker').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'DD/MM/YYYY'
                }
            });

            // Apply date range filter
            $('#transporter-picker').on('apply.daterangepicker', function (ev, picker) {
                startDate = picker.startDate;
                endDate = picker.endDate;
                $(this).val(startDate.format('DD/MM/YYYY') + ' - ' + endDate.format('DD/MM/YYYY'));
                $('#tbl-transporters').DataTable().draw();
            });

            // Clear date range filter
            $('#transporter-picker').on('cancel.daterangepicker', function (ev, picker) {
                $(this).val('');
                startDate = null;
                endDate = null;
                $('#tbl-transporters').DataTable().draw();
            });

            // Custom filter for DataTables
            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                if (settings.nTable.id !== 'tbl-transporters') return true;

                const createdAt = data[2]; // column 2 = Creation Date
                const rowDate = moment(createdAt, 'DD/MM/YYYY hh:mm A');

                if (!startDate || !endDate || !rowDate.isValid()) {
                    return true;
                }

                return rowDate.isSameOrAfter(startDate) && rowDate.isSameOrBefore(endDate);
            });
        });
    }

  


    var form = $('#uploadTransporterDocumentForm');

    if (form.length) {
        form.validate({
            ignore: ":hidden",
            errorClass: 'help-block text-danger',
            errorElement: "span",
            onkeyup: false,
            onfocusout: false,
            onclick: false,

            rules: {
                document_type: {
                    required: true
                },
                transporter_id: {
                    required: true
                },
                document_front: {
                    required: true
                },
                document_back: {
                    required: false // This will be dynamically added if needed
                }
            },
            messages: {
                document_type: {
                    required: "Please select the type of document"
                },
                transporter_id: {
                    required: "Please select a transporter"
                },
                document_front: {
                    required: "Please upload the document"
                },
                document_back: {
                    required: "Please upload the back side of the document"
                }
            },

            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorPlacement: function (error, element) {
                if (element.attr("type") === "file") {
                    element.closest('.form-group').append(error);
                } else {
                    error.insertAfter(element);
                }
            }
        });
    }
    $('#uploadTransporterDocumentForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);

        if (!form.valid()) return;

        const formData = new FormData(this);

        $.ajax({
            url: '{{  $isTransporter ? route('transporter.jobs.documents.store', ["job" => $job->id]) : route('admin.jobs.documents.store', ["job" => $job->id]) }}', // update route as per your web.php
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                // Optional: disable submit button, show loader
            },
            success: function (response) {
                toastr.success('Document uploaded successfully');
                $('#uploadDocumentModal').modal('hide');
                form[0].reset();
                window.location.reload();

                
            },
            error: function (xhr) {
                toastr.error('Failed to upload document');
            }
        });
    });

    $('#job_type_of_document').on('change', function () {
        var typeId = $(this).val();

        if (typeId) {
            $.ajax({
                url: '{{  $isTransporter ? route('transporter.jobs.document-types') : route('admin.jobs.document-types') }}',
                type: 'GET',
                data: { id: typeId },
                success: function (response) {
                    response = response.document;

                    let fileType = response.type;
                    let extensions = fileType === 'image' ? 'jpg|jpeg|png' : 'pdf';
                    let readableExtensions = extensions.replace(/\|/g, ", ").toUpperCase();

                    // Set allowed extensions
                    $('input[name="document_front"], input[name="document_back"]').rules("remove");
                    $('input[name="document_front"], input[name="document_back"]').rules("add", {
                        extension: extensions,
                        messages: {
                            extension: `Only ${readableExtensions} files are allowed.`
                        }
                    });

                    $('.allowed-extensions').text(`Allowed: ${readableExtensions}`);

                    if (response.front && response.back) {
                        $('#front_back').show();
                        $('#single_file').hide();

                        $('input[name="document_front"]').rules("add", {
                            required: true,
                            messages: { required: "Please upload the front side of document" }
                        });
                        $('input[name="document_back"]').rules("add", {
                            required: true,
                            messages: { required: "Please upload the back side of document" }
                        });

                    } else {
                        $('#front_back').hide();
                        $('#single_file').show();

                        $('input[name="document_front"]').rules("add", {
                            required: true,
                            messages: { required: "Please upload the document" }
                        });
                        $('input[name="document_back"]').rules("remove", "required");
                    }

                    // Handle expiry
                    if (response.expiry) {
                        $('input[name="expiry"]').closest('.col-md-12').show();
                        $('input[name="expiry"]').rules("add", {
                            required: true,
                            date: true,
                            futureDate: true
                        });
                    } else {
                        $('input[name="expiry"]').closest('.col-md-12').hide();
                        $('input[name="expiry"]').rules("remove");
                    }
                },
                error: function () {
                    console.error('Error fetching document details');
                }
            });
        } else {
            $('#front_back, #single_file').hide();
            $('input[name="expiry"]').closest('.col-md-12').hide();
            $('input[type="file"]').val('');
            $('.preview-img, .filename-overlay').remove();
            $('input[name="document_front"], input[name="document_back"]').rules("remove");
            $('input[name="expiry"]').rules("remove");
        }
    });

    // Invoice Document

    $('#uploadInvoiceForm').validate({
        ignore: ":hidden:not(.file-input-overlay)", // Don't ignore hidden file inputs
        errorClass: 'help-block text-danger',
        errorElement: "span",
        onkeyup: false,
        onfocusout: function(element) {
            if (!$(element).is('select')) {
                $(element).valid();
            }
        },

        rules: {
            invoice: {
                required: true,
                minlength: 3,
                maxlength: 255
            },
            transporter_id: {
                required: true
            },
            quantity: {
                required: true,
                number: true,
                min: 1
            },
            amount: {
                required: true,
                number: true,
                min: 0
            },
            invoice_document_type: {
                required: true
            },
            invoice_document_front: {
                required: true,
                extension: "jpg|jpeg|png|pdf"
            },
            invoice_document_back: {
                extension: "jpg|jpeg|png|pdf"
            }
        },
        messages: {
            invoice: {
                required: "Please enter invoice number",
                minlength: "Invoice number must be at least 3 characters long",
                maxlength: "Invoice number cannot exceed 255 characters"
            },
            transporter_id: {
                required: "Please select a transporter"
            },
            quantity: {
                required: "Please enter quantity",
                number: "Please enter a valid number",
                min: "Quantity must be at least 1"
            },
            amount: {
                required: "Please enter amount",
                number: "Please enter a valid amount",
                min: "Amount cannot be negative"
            },
            invoice_document_type: {
                required: "Please select document type"
            },
            invoice_document_front: {
                required: "Please upload front side document",
                extension: "Only JPG, JPEG, PNG, or PDF files are allowed"
            },
            invoice_document_back: {
                extension: "Only JPG, JPEG, PNG, or PDF files are allowed"
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group, .col-md-6, .col-md-12').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group, .col-md-6, .col-md-12').removeClass('has-error');
        },
        errorPlacement: function(error, element) {
            if (element.attr("type") === "file") {
                // For file inputs, place error after the parent card div
                element.closest('.card').after(error);
            } else if (element.is("select")) {
                // For select elements, place error after the select
                element.after(error);
            } else {
                // For other inputs, place error after the input
                error.insertAfter(element);
            }
        }
    });

    $('#uploadInvoiceForm').on('submit', function (e) {
        e.preventDefault();
        
        alert('ss')

        let form = $(this)[0];
        let formData = new FormData(form);
        let jobId = "{{ $job->id }}"; // Make sure this is available

        $.ajax({
            url: `{{ route("admin.jobs.invoice.store", ["job" => $job->id]) }}`,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                $('#uploadInvoiceForm button[type="submit"]').prop('disabled', true).text('Uploading...');
            },
            success: function (response) {
                $('#uploadInvoiceModal').modal('hide');
                $('#uploadInvoiceForm')[0].reset();
                $('#uploadInvoiceForm button[type="submit"]').prop('disabled', false).text('Upload');
                toastr.success(response.message);
                // Optionally refresh invoice table here
            },
            error: function (xhr) {
                $('#uploadInvoiceForm button[type="submit"]').prop('disabled', false).text('Upload');
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    $.each(errors, function (field, messages) {
                        toastr.error(messages[0]);
                    });
                } else {
                    toastr.error('Something went wrong. Please try again.');
                }
            }
        });
    });


    $('#invoice_document_type').on('change', function () {
        var typeId = $(this).val();

        if (typeId) {
            $.ajax({
                url: '{{ route("admin.jobs.invoice.document-types") }}', // adjust if you have a separate route for invoice types
                type: 'GET',
                data: { id: typeId },
                success: function (response) {
                    response = response.document;
                    console.log(response);

                    let fileType = response.type;
                    let extensions = fileType === 'image' ? 'jpg|jpeg|png' : 'pdf';
                    let readableExtensions = extensions.replace(/\|/g, ", ").toUpperCase();

                    // Clear previous rules
                    $('input[name="invoice_document_front"], input[name="invoice_document_back"]').rules("remove");

                    // Add new validation rules
                    $('input[name="invoice_document_front"], input[name="invoice_document_back"]').rules("add", {
                        extension: extensions,
                        messages: {
                            extension: `Only ${readableExtensions} files are allowed.`
                        }
                    });

                    // Toggle between front/back and single file upload
                    if (response.front && response.back) {
                        $('#invoice_front_back').show();
                        $('#invoice_single_file').hide();

                        $('input[name="invoice_document_front"]').rules("add", {
                            required: true,
                            messages: { required: "Please upload the front side of invoice" }
                        });
                        $('input[name="invoice_document_back"]').rules("add", {
                            required: true,
                            messages: { required: "Please upload the back side of invoice" }
                        });
                    } else {
                        $('#invoice_front_back').hide();
                        $('#invoice_single_file').show();

                        $('input[name="invoice_document_front"]').rules("add", {
                            required: true,
                            messages: { required: "Please upload the invoice document" }
                        });
                        $('input[name="invoice_document_back"]').rules("remove", "required");
                    }
                },
                error: function () {
                    console.error('Error fetching invoice document details');
                }
            });
        } else {
            $('#invoice_front_back, #invoice_single_file').hide();
            $('input[type="file"]').val('');
            $('.preview-img, .filename-overlay').remove();
            $('input[name="invoice_document_front"], input[name="invoice_document_back"]').rules("remove");
        }
    });

    $('.delete-invoice').on('click', function(e) {
        e.preventDefault();
        
        const invoiceId = $(this).data('invoice-id');
        const jobId = $(this).data('job-id');
        
        if (!invoiceId || !jobId) {
        toastr.error('Invoice information not found');
        return;
        }

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ $isTransporter ? route('transporter.jobs.invoice.destroy', [':job', ':invoice']) : route('admin.jobs.invoice.destroy', [':job', ':invoice']) }}"
                    .replace(':job', jobId)
                    .replace(':invoice', invoiceId),
                    type: 'DELETE',
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                    if (response.status === 'success') {
                        toastr.success(response.message);
                        // Reload the page to refresh the document list
                        setTimeout(function() {
                        window.location.reload();
                        }, 1000);
                    } else {
                        toastr.error(response.message);
                    }
                    },
                    error: function(xhr) {
                    toastr.error('Failed to delete invoice');
                    }
                });
            }
        });
        
    });


    // Invoice Document Type change end

    // Initialize document table filters only if document table exists
    if ($('#tbl-documents').length > 0) {
        // Document Table filter
        $(function () {
            let startDate = null;
            let endDate = null;

            // Initialize date range picker
            $('#calendar-range').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'DD/MM/YYYY'
                }
            });

            $('#calendar-range').on('apply.daterangepicker', function (ev, picker) {
                startDate = picker.startDate;
                endDate = picker.endDate;
                $(this).val(startDate.format('DD/MM/YYYY') + ' - ' + endDate.format('DD/MM/YYYY'));
                $('#tbl-documents').DataTable().draw();
            });

            $('#calendar-range').on('cancel.daterangepicker', function () {
                $(this).val('');
                startDate = null;
                endDate = null;
                $('#tbl-documents').DataTable().draw();
            });

            // Document type filter
            $('#document-type-filter').on('change', function () {
                $('#tbl-documents').DataTable().draw();
            });

            // Transporter filter
            $('#transporter-filter').on('change', function () {
                $('#tbl-documents').DataTable().draw();
            });

            // Custom filtering
            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                if (settings.nTable.id !== 'tbl-documents') return true;

                const transporter = $('#transporter-filter').val();
                const docType = $('#document-type-filter').val();
                const docTypeColumn = data[0]; // Document name
                const transporterColumn = data[1]; // Transporter name
                const createdAt = data[3]; // Date column

                // Filter by document type (text match)
                if (docType && !docTypeColumn.includes($('#document-type-filter option:selected').text())) {
                    return false;
                }

                // Filter by transporter (text match)
                if (transporter && !transporterColumn.includes($('#transporter-filter option:selected').text())) {
                    return false;
                }

                // Filter by date range
                if (startDate && endDate) {
                    const momentDate = moment(createdAt, 'DD/MM/YYYY, h:mm A');
                    if (!momentDate.isBetween(startDate, endDate, 'day', '[]')) {
                        return false;
                    }
                }

                return true;
            });
        });
    }

    $('.delete-document').on('click', function(e) {
        e.preventDefault();
        
        const documentId = $(this).data('document-id');
        const jobId = $(this).data('job-id');
        
        if (!documentId || !jobId) {
            toastr.error('Document information not found');
            return;
        }
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ $isTransporter ? route('transporter.jobs.documents.destroy', [':job', ':document']) : route('admin.jobs.documents.destroy', [':job', ':document']) }}"
                    .replace(':job', jobId)
                    .replace(':document', documentId),
                    type: 'DELETE',
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                    if (response.status === 'success') {
                        toastr.success(response.message);
                        // Reload the page to refresh the document list
                        setTimeout(function() {
                        window.location.reload();
                        }, 1000);
                    } else {
                        toastr.error(response.message);
                    }
                    },
                    error: function(xhr) {
                    toastr.error('Failed to delete document');
                    }
                });
            }
        });
    });

  function activateTabFromUrl() {
    const urlParams = new URLSearchParams(window.location.search);
    const tab = urlParams.get('tab');
    let tabId = null;
    if (tab === 'travelHistory') tabId = '#travel-tab';
    else if (tab === 'IssueReported') tabId = '#Issue-Reported-tab';
    else if (tab === 'MapView') tabId = '#Map-View-tab';
    else if (tab === 'Transporters') tabId = '#Transporters-tab';
    else if (tab === 'Vehicles') tabId = '#Vehicles-tab';
    else if (tab === 'Documents') tabId = '#Documents-tab';
    else if (tab === 'Invoices') tabId = '#Invoices-tab';
    else tabId = '#details-tab';
    if ($(tabId).length && $(tabId).is(':visible')) {
      $(tabId).click();
    } else {
      $('.nav-link:visible').first().click();
    }
  }

  function updateTabUrl(tab) {
    const url = new URL(window.location);
    url.searchParams.set('tab', tab);
    window.history.replaceState({}, '', url);
  }

  $('#details-tab').on('click', function () { updateTabUrl('details'); });
  $('#travel-tab').on('click', function () { updateTabUrl('travelHistory'); });
  $('#Issue-Reported-tab').on('click', function () { updateTabUrl('IssueReported'); });
  $('#Map-View-tab').on('click', function () { updateTabUrl('MapView'); });
  $('#Transporters-tab').on('click', function () { updateTabUrl('Transporters'); });
  $('#Vehicles-tab').on('click', function () { updateTabUrl('Vehicles'); });
  $('#Documents-tab').on('click', function () { updateTabUrl('Documents'); });
  $('#Invoices-tab').on('click', function () { updateTabUrl('Invoices'); });

  activateTabFromUrl();

  // Open chat for this job
  $(document).on('click', '#openJobChatBtn', function(){
    const jobId = '{{ $job->id }}';
    const chatUrl = '{{ route($isTransporter ? 'transporter.chats.index' : 'admin.chats.index') }}' + '?job=' + encodeURIComponent(jobId);
    window.location.href = chatUrl;
  });

  // Mark as Complete button handler with confirmation
  $(document).on('click', '#markComplete', function(e){
    e.preventDefault();
    const jobId = '{{ $job->id }}';
    const url = '{{ route($isTransporter ? 'transporter.jobs.mark-complete' : 'admin.jobs.mark-complete', ['job' => $job->id]) }}';

    // First check for incomplete transporters and pending trips
    $.ajax({
      url: url,
      type: 'POST',
      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
      success: function(resp){
        // If we get here, it means the check passed and we can show confirmation
        Swal.fire({
          icon: 'question',
          title: 'Are you sure?',
          text: 'Do you want to complete this job?',
          showCancelButton: true,
          confirmButtonText: 'Yes, complete',
          cancelButtonText: 'Cancel',
          confirmButtonColor: '#0d6efd',
          cancelButtonColor: '#6c757d'
        }).then(function(result){
          if (!result.isConfirmed) { return; }
          // Proceed with actual completion
          completeJob(url);
        });
      },
      error: function(xhr){
        // Handle validation errors (422 status) - incomplete transporters or pending trips
        if (xhr && xhr.responseJSON && xhr.responseJSON.code === 'INCOMPLETE_TRANSPORTERS'){
          showIncompleteTransportersModal(xhr.responseJSON.transporters);
        } else if (xhr && xhr.responseJSON && xhr.responseJSON.code === 'TRIPS_PENDING_OR_IN_PROGRESS'){
          const resp = xhr.responseJSON;
          Swal.fire({
            icon: 'warning',
            confirmButtonColor: '#0d6efd',
            text: (resp && resp.message) ? resp.message : "You can't mark this job as complete because trips are pending or in progress."
          });
        } else {
          let msg = "Can't mark job as complete";
          if (xhr && xhr.responseJSON && xhr.responseJSON.message){
            msg = xhr.responseJSON.message;
          }
          toastr.error(msg);
        }
      }
    });
  });

  // Separate function to handle the actual completion
  function completeJob(url) {
    $.ajax({
      url: url,
      type: 'POST',
      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
      data: { 'confirm': true }, // Add a flag to indicate this is the actual completion
      success: function(resp){
        if (resp && resp.status === 'success'){
          Swal.fire({
            icon: 'success',
            title: 'Success!',
            text: resp.message || 'Job completed successfully',
            confirmButtonColor: '#0d6efd'
          }).then(function(){
            // Reload the page to show updated status
            location.reload();
          });
        } else {
          toastr.error(resp.message || 'Failed to complete job');
        }
      },
      error: function(xhr){
        let msg = "Failed to complete job";
        if (xhr && xhr.responseJSON && xhr.responseJSON.message){
          msg = xhr.responseJSON.message;
        }
        toastr.error(msg);
      }
    });
  }

  // Function to show incomplete transporters modal
  function showIncompleteTransportersModal(transporters) {
    var listEl = document.getElementById('incompleteTransportersList');
    if (listEl){
      if (transporters && transporters.length){
        listEl.innerHTML = transporters.map(function(t){ return '<li class="list-unstyled">' + (t.name || ('Transporter #' + t.id)) + '</li>'; }).join('');
      } else {
        listEl.innerHTML = '';
      }
      var modal = new bootstrap.Modal(document.getElementById('incompleteTransportersModal'));
      modal.show();
    }
  }

  @if($isTransporter)
  $(document).on('click', '#allocateVehicleBtn', function(e){
    e.preventDefault();
    $('#allocateVehicleModal').modal('show');
  });

  $('#allocateVehicleForm').off('submit').on('submit', function(e){
    e.preventDefault();
    var $submitBtn = $('#allocateVehicleForm button[type="submit"]');
    if ($submitBtn.prop('disabled')) { return; }
    const vehicleId = $('#vehicleSelect').val();
    if (!vehicleId){ toastr.error('Please select a vehicle'); return; }
    $submitBtn.prop('disabled', true).html('<em class="fa fa-spinner fa-spin"></em> Saving...');
    $.ajax({
      url: '{{ route("transporter.jobs.allocate-vehicle", ["job" => $job->id]) }}',
      type: 'POST',
      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
      data: { vehicle_id: vehicleId },
      success: async function(resp){
        try {
          let FC = window.FirebaseChat;
          if (!FC){
            try {
              const mod = await import('{{ asset('js/firebase-chat.js') }}');
              FC = mod.FirebaseChat || window.FirebaseChat;
            } catch (e) {
              console.warn('Failed to dynamically import FirebaseChat module', e);
            }
          }
          if (FC){
            if (!FC.db){
              FC.init(null, firestoreDbId, { userId: "{{ $currentUser->id ?? '' }}", userName: "{{ $currentUser->name ?? '' }}", role: "{{ $isTransporter ? 'transporter' : 'admin' }}" });
            }
            if (FC.db){
              const driverId = (resp && resp.driver_id) ||  '';
              const driverName = (resp && resp.driver_name) || '';
              const driverEmail = (resp && resp.driver_email) || '';
              const driverUserType = (resp && resp.userType) || '';
              if (driverId){
                await FC.addUsersToGroupChatByJobId("{{ $job->id }}", [{ id: driverId, name: driverName, email: driverEmail, userType: driverUserType }]);

              } else {
                console.warn('No driver_id found in allocate-vehicle response; skipping chat add');
              }
            }
          } else {
            console.warn('FirebaseChat not available on window or module import failed');
          }
        } catch (e) {
          console.error('Failed to add driver to chat group:', e);
        }
        toastr.success(resp.message || 'Vehicle allocated successfully');
        $('#allocateVehicleModal').modal('hide');
        setTimeout(()=> window.location.reload(), 800);
      },
      error: function(xhr){
        let msg = 'Failed to allocate vehicle';
        if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
        toastr.error(msg);
      }
    });
  });
  @endif

});
</script>

@if($isTransporter)
<!-- Allocate Vehicle Modal -->
<div class="modal fade" id="allocateVehicleModal" tabindex="-1" aria-labelledby="allocateVehicleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="allocateVehicleModalLabel">Add Vehicle</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="allocateVehicleForm">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label for="vehicleSelect" class="form-label">Select Vehicle</label>
            <select class="form-control" id="vehicleSelect" name="vehicle_id" required>
              <option value="">Select Vehicle</option>
              @foreach(($vehicles ?? []) as $vehicle)
                <option value="{{ $vehicle->id }}">{{ $vehicle->registration_number ?? ('Vehicle #' . $vehicle->id) }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endif
@endsection