@extends('backend.layouts.admin.app')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
    /* Fix Select2 dropdown sizing to match other form fields */
    input[disabled], input:disabled {
        background-color: #e9ecef !important;
        cursor: not-allowed;
        opacity: 1;
    }
    select[disabled], select:disabled {
        background-color: #e9ecef !important;
        cursor: not-allowed;
        opacity: 1;
    }
    .select2-container--default .select2-selection--single {
        height: 38px !important;
        line-height: 38px !important;
        border: 1px solid #ced4da !important;
        border-radius: 0.375rem !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        padding-left: 12px !important;
        padding-right: 20px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__clear {
        height: 36px !important;
        line-height: 36px !important;
    }

    .select2-container--default .select2-selection--single:focus {
        border-color: #86b7fe !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    }

    .select2-dropdown {
        border: 1px solid #ced4da !important;
        border-radius: 0.375rem !important;
    }

    /* Fix Select2 width shrinking issue only */
    .tab-pane.active .select2-container {
        width: 100% !important;
    }

    /* Ensure Select2 maintains proper width after tab switching */
    .tab-pane:not(.active) .select2-container {
        width: 100% !important;
    }

    .email-tags-container {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        background: #fff;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        overflow: hidden;
        padding: 8px 12px 4px 12px;
    }
    .email-tags-container:focus-within {
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
        border-color: #86b7fe;
    }
    .email-tags-wrapper {
        /* padding: 8px 12px 4px 12px; */
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .email-tag {
        background: #e7f1ff;
        color: #0d6efd;
        border: 1px solid #bcdcff;
        border-radius: 16px;
        padding: 4px 10px;
        display: inline-flex;
        align-items: center;
        font-size: 12px;
        font-weight: 500;
    }
    .email-tag .remove-tag {
        margin-left: 8px;
        cursor: pointer;
        color: #0d6efd;
        font-weight: bold;
        font-size: 14px;
        line-height: 1;
    }
    .email-input-inline {
        border: none!important;
        outline: none;
        box-shadow: none;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        padding: 6px 0;
        font-size: 14px;
        color: #495057;
    }
    .email-input-inline::placeholder {
        color: #6c757d;
        font-style: italic;
    }

    /* Tighten error message spacing for Select2 and inputs */
    .col-field-wrapper .help-block { margin-top: 4px; margin-bottom: 0; display: block; }
    .select2-container + .help-block, .col-field-wrapper .select2 + .help-block { margin-top: -6px; }
    .col-field-wrapper .select2-container--default { margin-bottom: 0; }
</style>
@section('content')
    @php($lockFields = false) @endphp
    <!-- 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="{{ route('admin.jobs.index') }}">Jobs</a></li>
            <li class="active">{{$title}}</li>
        </ol>
        <div class="d-flex justify-content-between align-items-center flex-wrap">
            <h1>{{ $title }}</h1>
        </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="">
                    @php
                        if (isset($job)) {
                            $lockFields = method_exists($job, 'isInProgress') ? $job->isInProgress() : (($job->status ?? null) === \App\Models\MineJob::STATUS_IN_PROGRESS);
                        }
                    @endphp
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                            <form action="{{ $save }}" method="POST" class="form-horizontal form-validate"
                                enctype="multipart/form-data">
                                @csrf
                                @if(isset($job))
                                    @method('PUT')
                                @endif

                                {{-- Always set status to pending for new jobs --}}
                                @if(!isset($job))
                                    <input type="hidden" name="status" value="pending">
                                @endif

                                <input type="hidden" name="polyline" id="polyline" value="{{ isset($job) ? $job->map_polyline : ''  }}">
                                <input type="hidden" name="loading_latitude" id="loading_latitude" value="{{ isset($job) ? $job->loadingLocation->latitude : ''  }}">
                                <input type="hidden" name="loading_longitude" id="loading_longitude" value="{{ isset($job) ? $job->loadingLocation->longitude : ''  }}">
                                <input type="hidden" name="offloading_latitude" id="offloading_latitude" value="{{ isset($job) ? $job->offloadingLocation->latitude : ''  }}">
                                <input type="hidden" name="offloading_longitude" id="offloading_longitude" value="{{ isset($job) ? $job->offloadingLocation->longitude : ''  }}">
                                <div class="box-body px-0">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="Job-map">
                                                <div class="rounded-4 job-preview-map" style="width: 100%; height: 450px;"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="mine_name" class="control-label">Route Identification</label>
                                                        <div class="col-field-wrapper">
                                                            <input type="text" name="mine_name" class="form-control disabled"
                                                                id="mine_name" placeholder="Enter Route Identification" {{ !empty($lockFields) ? 'disabled' : '' }}
                                                                value="{{ old('mine_name', $job->mine_name ?? '') }}">
                                                            @if ($errors->has('mine_name'))
                                                                <span
                                                                    class="help-block">{{ $errors->first('mine_name') }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="po" class="control-label">PO #</label>
                                                        <div class="col-field-wrapper">
                                                            <input type="hidden" name="purchase_order_id" id="po_id" value="{{ isset($job) ? $job->purchase_order_id : '' }}">
                                                            <select name="po" class="form-control" id="po" {{ !empty($lockFields) ? 'disabled' : '' }}>
                                                                <option value="">Select Purchase Order</option>
                                                                @foreach($purchaseOrders as $purchaseOrder)
                                                                    <option value="{{ $purchaseOrder->id }}" {{ isset($job) && $job->purchaseOrder->id == $purchaseOrder->id ? 'selected' : '' }}>{{ $purchaseOrder->po_number }}</option>
                                                                @endforeach
                                                          </select>
                                                            @if ($errors->has('po'))
                                                                <span class="help-block">{{ $errors->first('po') }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="loading_emails" class="control-label">Loading Point Fleet List Recipient Emails</label>
                                                        <div class="col-field-wrapper">
                                                            <div id="emailTagsLoading" class="email-tags-container">
                                                            <div class="email-tags-wrapper"></div>
                                                            <div class="email-input-wrapper">
                                                                    <input type="text" id="emailInputLoading" class="email-input-inline" placeholder="Type email and press Enter" />
                                                            </div>
                                                        </div>
                                                            @php
                                                                $loadingEmailInit = [];
                                                                if (isset($job) && !empty($job->loading_recipient_emails)) {
                                                                    if (is_array($job->loading_recipient_emails)) {
                                                                        $loadingEmailInit = $job->loading_recipient_emails;
                                                                    } else {
                                                                        $decoded = json_decode($job->loading_recipient_emails, true);
                                                                        if (is_array($decoded)) {
                                                                            $loadingEmailInit = $decoded;
                                                                        } else {
                                                                            $loadingEmailInit = [ (string) $job->loading_recipient_emails ];
                                                                        }
                                                                    }
                                                                }
                                                            @endphp
                                                            <input type="hidden" name="loading_recipient_emails" id="emailHiddenLoading" value='@json($loadingEmailInit ?? [])'>
                                                            @if ($errors->has('loading_recipient_emails'))
                                                                <span class="help-block">{{ $errors->first('loading_recipient_emails') }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="offloading_emails" class="control-label">Offloading Point Fleet List Recipient Emails</label>
                                                        <div class="col-field-wrapper">
                                                            <div id="emailTagsOffloading" class="email-tags-container">
                                                                <div class="email-tags-wrapper"></div>
                                                                <div class="email-input-wrapper">
                                                                    <input type="text" id="emailInputOffloading" class="email-input-inline" placeholder="Type email and press Enter" />
                                                                </div>
                                                            </div>
                                                            @php
                                                                $offloadingEmailInit = [];
                                                                if (isset($job) && !empty($job->offloading_recipient_emails)) {
                                                                    if (is_array($job->offloading_recipient_emails)) {
                                                                        $offloadingEmailInit = $job->offloading_recipient_emails;
                                                                    } else {
                                                                        $decoded = json_decode($job->offloading_recipient_emails, true);
                                                                        if (is_array($decoded)) {
                                                                            $offloadingEmailInit = $decoded;
                                                                        } else {
                                                                            $offloadingEmailInit = [ (string) $job->offloading_recipient_emails ];
                                                                        }
                                                                    }
                                                                }
                                                            @endphp
                                                            <input type="hidden" name="offloading_recipient_emails" id="emailHiddenOffloading" value='@json($offloadingEmailInit ?? [])'>
                                                            @if ($errors->has('offloading_recipient_emails'))
                                                                <span class="help-block">{{ $errors->first('offloading_recipient_emails') }}</span>
                                                             @endif
                                                         </div>
                                                     </div>
                                                 </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        {{-- <input type="hidden" name="loading_location_id" id="loading_location_id" value="{{ $job->loading_location_id ?? '' }}"> --}}
                                                        <label for="loading_location" class="control-label">Loading
                                                            Location</label>
                                                        <div class="col-field-wrapper">
                                                            <select name="loading_location_id" class="form-control" id="loading_location" {{ !empty($lockFields) ? 'disabled' : '' }}>
                                                                <option value="">Select Loading Location</option>
                                                                @if(isset($job) && $job->loadingLocation)
                                                                    <option value="{{ $job->loadingLocation->id ?? null }}" selected>{{ $job->loadingLocation->name ?? null }}</option>
                                                                @endif
                                                            </select>
                                                            @if ($errors->has('loading_location_id'))
                                                                <span class="help-block">{{ $errors->first('loading_location_id') }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="load_date" class="control-label">Load
                                                                    Date</label>
                                                                <div class="position-relative">
                                                                    <input type="text" class="form-control date-picker"
                                                                        name="load_date" id="load_date" {{ !empty($lockFields) ? 'disabled' : '' }}
                                                                        value="{{ old('load_date', isset($job) && $job->load_date ? $job->load_date->format('d/m/Y') : '') }}">
                                                                    <span class="position-absolute date-picker-icon">
                                                                        <em class="iconsax icon-292D32 fs-20"
                                                                            icon-name="calendar-1"></em>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="load_time" class="control-label">Load Time</label>
                                                                <select id="load_time" name="load_time" class="form-control w-100" {{ !empty($lockFields) ? 'disabled' : '' }}>
                                                                    @if (isset($job) && $job->load_time)
                                                                        <option value="{{$job->load_time}}">{{$job->load_time == '24_7' ? '24/7' :  $job->load_time}}</option>
                                                                    @else
                                                                        <option value="">Select</option>
                                                                    @endif
                                                                </select>
                                                                @if ($errors->has('load_time'))
                                                                        <span
                                                                            class="help-block">{{ $errors->first('load_time') }}</span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        {{-- <input type="hidden" name="offloading_location_id" id="offloading_location_id" value="{{ $job->offloading_location_id ?? '' }}"> --}}
                                                        <label for="offloading_location" class="control-label">Offloading
                                                            Location</label>
                                                        <div class="col-field-wrapper">
                                                            <select name="offloading_location_id" class="form-control" id="offloading_location" {{ !empty($lockFields) ? 'disabled' : '' }}>
                                                                <option value="">Select Offloading Location</option>
                                                                @if(isset($job) && $job->offloadingLocation)
                                                                    <option value="{{ $job->offloadingLocation->id }}" selected>{{ $job->offloadingLocation->name }}</option>
                                                                @endif
                                                            </select>
                                                            @if ($errors->has('offloading_location_id'))
                                                                <span
                                                                    class="help-block">{{ $errors->first('offloading_location_id') }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="offload_date" class="control-label">Offload
                                                                    Date</label>
                                                                <div class="position-relative">
                                                                    <input type="text" class="form-control date-picker"
                                                                        name="offload_date" id="offload_date" {{ !empty($lockFields) ? 'disabled' : '' }}
                                                                        value="{{ old('offload_date', isset($job) && $job->offload_date ? $job->offload_date->format('d/m/Y') : '') }}">
                                                                    <span class="position-absolute date-picker-icon">
                                                                        <em class="iconsax icon-292D32 fs-20"
                                                                            icon-name="calendar-1"></em>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="offload_time" class="control-label">Offload Time</label>
                                                                <select id="offload_time" name="offload_time" class="form-control w-100" {{ !empty($lockFields) ? 'disabled' : '' }}>
                                                                    @if (isset($job) && $job->offload_time)
                                                                    <option value="{{$job->offload_time}}">{{$job->offload_time == '24_7' ? '24/7' :  $job->offload_time}}</option>
                                                                    @else
                                                                    <option value="">Select</option>
                                                                    @endif
                                                                </select>
                                                                @if ($errors->has('offload_time'))
                                                                    <span
                                                                    class="help-block">{{ $errors->first('offload_time') }}</span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="distance_km" class="control-label">Distance in
                                                            Km</label>
                                                        <div class="col-field-wrapper">
                                                            <input type="text" name="distance_km" class="form-control"
                                                                id="distance_km" placeholder="Enter distance" readonly {{ !empty($lockFields) ? 'disabled' : '' }}
                                                                value="{{ old('distance_km', isset($job) ? (int)$job->distance_km : '') }}">
                                                            @if ($errors->has('distance_km'))
                                                                <span
                                                                    class="help-block">{{ $errors->first('distance_km') }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="load_weight" class="control-label">Load Weight
                                                            (Metric Tons)</label>
                                                        <div class="col-field-wrapper">
                                                            <input type="text" name="load_weight" class="form-control"
                                                                id="load_weight" placeholder="Load Weight (Metric Tons)" {{ !empty($lockFields) ? 'disabled' : '' }}
                                                                value="{{ old('load_weight', isset($job) ? (int)$job->load_weight : '') }}">
                                                            @if ($errors->has('load_weight'))
                                                                <span
                                                                    class="help-block">{{ $errors->first('load_weight') }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="box-footer px-0">
                                                <div class="col-sm-12 text-end">
                                                    <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">Cancel</a>
                                                    <button type="submit" class="btn btn-primary">{{$saveBtn}}</button>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <!-- /.box-footer -->
                            </form>
                        </div>

                        {{-- <div class="tab-pane fade" id="MapView" role="tabpanel" aria-labelledby="travel-tab">
                            <div class="box-body px-0 travel-history-table">
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="Job-map">
                                            <div class="rounded-4 job-preview-map" style="width: 100%; height: 450px;"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <table aria-describedby="tbl-map-view-desc" class="table table-bordered table-hover " id="tbl-map-view">
                                            <thead>
                                                <th scope="col">Documents</th>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td data-type='text' class="text-start">
                                                        <div class="fs-16"><strong>WX-TRK-5421</strong><span
                                                                class="border fs-14 py-1 px-2 rounded-2 ms-1">Truck</span>
                                                        </div>
                                                        <div class="fs-14 text-gray"><span
                                                                class="fw-semibold">Driver:</span> John Duo</div>
                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="Transporters" role="tabpanel" aria-labelledby="travel-tab">
                            <div class="box-body px-0 ">
                                <table aria-describedby="tbl-transporters-desc" class="table table-bordered table-hover" id="tbl-transporters">
                                    <thead>

                                        <th scope="col">Transporter</th>
                                        <th scope="col">Vehicles</th>
                                        <th scope="col" class="min-width-158">Creation Date</th>
                                        <th scope="col">Job Status</th>
                                        <th scope="col">Action</th>
                                    </thead>
                                    <tbody>
                                        @if(isset($job) && $job->transporters->count() > 0)
                                            @foreach($job->transporters as $transporter)
                                                <tr>
                                                    <td data-type="text">{{ $transporter->name ?? null }}</td>
                                                    <td data-type='text'>
                                                        <a href="">{{ $job->trips->where('transport_id', $transporter->id)->count() }}</a>
                                                    </td>
                                                    <td data-type='none'>
                                                        {{$transporter->created_at?->format('d/m/Y, h:i A') ?? null}}
                                                    </td>
                                                    <td data-type='none'>
                                                        @if($job->status)
                                                            <span class="{{ $job->status_label }}-tag">{{ ucfirst($job->status_label) }}</span>
                                                        @else
                                                            <span class="pending-tag">Pending</span>
                                                        @endif
                                                    </td>
                                                    <td data-type='none'>
                                                        <a href="tel:{{ $transporter->phone ?? '' }}" class="me-3">
                                                            <em class="iconsax icon-292D32 fs-20" icon-name="phone"></em>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else

                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="Documents" role="tabpanel" aria-labelledby="travel-tab">
                            <div class="box-body px-0 ">
                                <table aria-describedby="tbl-documents-desc" class="table table-bordered table-hover" id="tbl-documents">
                                    <thead>

                                        <th scope="col">Documents</th>
                                        <th scope="col">Transporter</th>
                                        <th scope="col">Uploaded By</th>
                                        <th scope="col" class="min-width-158">Date & Time</th>
                                        <th scope="col">Action</th>
                                    </thead>
                                    <tbody>
                                        @if(isset($job) && $job->documents && $job->documents->count() > 0)
                                            @foreach($job->documents as $document)
                                                <tr>
                                                    <td data-type='text'><a href="{{ $document->file_path }}">{{ $document->mandatoryDocument->name }}</a></td>
                                                    <td data-type='none'>{{ $document->transporter->name ?? null }}</td>
                                                    <td data-type='none'>{{ $document->uploadedBy->name ?? null }}</td>
                                                    <td data-type='none'>{{ $document->uploaded_date_time?->format('d/m/Y, h:i A') ?? null }}</td>
                                                    <td data-type='none'>
                                                        <a href="{{ route('admin.jobs.documents.show', ['job' => $job->id, 'document' => $document->id]) }}" target="_blank" class="view-docs-btn me-3">
                                                            <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                                                        </a>
                                                        <a href="javascript:void(0)" class="delete-document" data-document-id="{{ $document->id }}" data-job-id="{{ $job->id }}">
                                                            <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else

                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
        <!-- /.box -->
    </section>
    <!-- /.content -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <script>
    function loadGoogleMapsAPI() {
        const script = document.createElement('script');
        script.src = "https://maps.googleapis.com/maps/api/js?key={{ $googleMapKey }}&libraries=geometry&callback=initJobMapPreview&loading=async&v=weekly";
        script.async = true;
        script.defer = true;
        document.head.appendChild(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);
    };

    // Load Google Maps API when document is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadGoogleMapsAPI);
    } else {
        loadGoogleMapsAPI();
    }
</script>

    <script>
        // Email tags helpers
        function isValidEmail(email){
            const re = /^\s*[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\s*$/i;
            return re.test(String(email).trim());
        }
        function renderEmailTags(container, tags){
            const wrapper = container.find('.email-tags-wrapper');
            wrapper.empty();
            tags.forEach(function(t){
                const tagEl = $(`<span class="email-tag" data-email="${t}">${t}<span class="remove-tag" aria-label="Remove">×</span></span>`);
                wrapper.append(tagEl);
            });
        }
        function pushUniqueEmail(tags, email){
            const v = String(email).trim();
            if(!v) return tags;
            if(!isValidEmail(v)) return tags;
            if(tags.indexOf(v) === -1){ tags.push(v); }
            return tags;
        }

        // Tab persistence + URL param (?tab=details|map|transporters|documents)
    function initTabPersistence() {
        const tabMap = {
            details: '#details',
            map: '#MapView',
            transporter: '#Transporters',
            transporters: '#Transporters',
            document: '#Documents',
            documents: '#Documents'
        };
        const reverseMap = {
            '#details': 'details',
            '#MapView': 'map',
            '#Transporters': 'transporters',
            '#Documents': 'documents'
        };

        function activateTabBySelector(selector) {
            if (!selector) return;
            $('.nav-link').removeClass('active');
            $('.tab-pane').removeClass('show active');
            $(`button[data-bs-target="${selector}"]`).addClass('active');
            $(selector).addClass('show active');
        }

        const url = new URL(window.location.href);
        const tabParam = (url.searchParams.get('tab') || '').toLowerCase();
        const selectorFromParam = tabMap[tabParam] || null;
        activateTabBySelector(selectorFromParam || '#details');

        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
            const selector = $(e.target).attr('data-bs-target');
            const val = reverseMap[selector] || 'details';
            const newUrl = new URL(window.location.href);
            newUrl.searchParams.set('tab', val);
            history.replaceState(null, '', newUrl.toString());
        });
    }

    // Initialize tab persistence
    initTabPersistence();

        let polylineDrawnOnce = false;

        function initJobMapPreview() {
            const storedPolyline = $('#polyline').val();
            const lat1 = $('#loading_latitude').val();
            const lng1 = $('#loading_longitude').val();
            const lat2 = $('#offloading_latitude').val();
            const lng2 = $('#offloading_longitude').val();

            const mapElements = document.querySelectorAll('.job-preview-map');

            mapElements.forEach((el) => {
                const map = new google.maps.Map(el, {
                    zoom: 7,
                    center: { lat: 26.9124, lng: 75.7873 }
                });

                el.__map = map; // store map instance on the DOM element

                if (storedPolyline && !polylineDrawnOnce) {
                    drawPolylineOnMap(map, storedPolyline);
                    polylineDrawnOnce = true;
                } else if (lat1 && lng1 && lat2 && lng2) {
                    fetchPolylineAndRender();
                }
            });
        }

        function drawPolylineOnMap(map, polyline) {
            const path = google.maps.geometry.encoding.decodePath(polyline);

            // Clear old paths/markers by storing them on the map object
            if (map.__routePath) map.__routePath.setMap(null);
            if (map.__startMarker) map.__startMarker.setMap(null);
            if (map.__endMarker) map.__endMarker.setMap(null);

            // Draw polyline
            const routePath = new google.maps.Polyline({
                path: path,
                geodesic: true,
                strokeColor: "#4285F4",
                strokeOpacity: 1.0,
                strokeWeight: 4,
                map: map
            });

            const bounds = new google.maps.LatLngBounds();
            path.forEach(latlng => bounds.extend(latlng));
            map.fitBounds(bounds);

            const startMarker = new google.maps.Marker({ position: path[0], map: map, label: "A" });
            const endMarker = new google.maps.Marker({ position: path[path.length - 1], map: map, label: "B" });

            // Store on map for cleanup later
            map.__routePath = routePath;
            map.__startMarker = startMarker;
            map.__endMarker = endMarker;
        }

        function fetchPolylineAndRender() {
            const originLat = $('#loading_latitude').val();
            const originLng = $('#loading_longitude').val();
            const destLat = $('#offloading_latitude').val();
            const destLng = $('#offloading_longitude').val();

            if (!originLat || !originLng || !destLat || !destLng) {
                console.log('Missing coordinates for polyline generation');
                return;
            }

            $.ajax({
                url: "{{ route('admin.jobs.generate-polyline') }}",
                method: "GET",
                data: {
                    origin_lat: originLat,
                    origin_lng: originLng,
                    dest_lat: destLat,
                    dest_lng: destLng
                },
                success: function(response) {
                    if (response.status === 'success' && response.polyline) {
                        const maps = document.querySelectorAll('.job-preview-map');
                        maps.forEach(el => {
                            const map = el.__map;
                            if (map) {
                                drawPolylineOnMap(map, response.polyline);
                            }
                        });

                        // Update polyline input
                        $('#polyline').val(response.polyline);
                    } else {
                        console.log('No polyline returned from server');
                    }
                },
                error: function(err) {
                    if (err.status === 400) {
                        // This is a valid error (no route found), just log it
                        toastr.error('No driving route found between selected locations');
                    } else {
                        console.log('Polyline generation failed (this is optional):', err.status);
                    }
                    // Don't show error to user as polyline is optional for job creation
                }
            });
        }

        // Make init callable globally (required by Google Maps callback)
        window.initJobMapPreview = initJobMapPreview;

        // Also make the function available as initMap for compatibility
        window.initMap = initJobMapPreview;
        </script>


    <script type="text/javascript">
        $(document).ready(function() {
            /*
             * Tab Visibility Logic:
             *
             * JOB CREATION (New Job): Always shows 4 tabs with pending status
             * - Details (Basic Details)
             * - Map View
             * - Transporters
             * - Documents
             *
             * JOB EDITING: Shows tabs based on job status
             * - PENDING: Details, Map View, Transporters, Documents (4 tabs)
             * - IN_PROGRESS: Details, Map View, Transporters, Documents, Vehicles & Drivers (5 tabs)
             * - COMPLETED: Details, Map View, Transporters, Documents, Vehicles & Drivers, Invoices (6 tabs)
             *
             * @if(isset($job))
             * Current Job Status: {{ $job->status }}
             * @else
             * Creating New Job: Status will be set to 'pending'
             * @endif
             */

            // Disable DataTable error alerts for cleaner UX
            $.fn.dataTable.ext.errMode = 'none';

            // Track initialized tables to prevent duplicate initialization
            let initializedTables = [];

            // Function to safely initialize DataTable for visible tabs only
            function initializeDataTable(tableSelector, options = {}) {
                const $table = $(tableSelector);

                // Check if table exists
                if ($table.length === 0) {
                    console.log(`Table ${tableSelector} not found`);
                    return null;
                }

                // Check if already initialized
                if (initializedTables.includes(tableSelector)) {
                    console.log(`Table ${tableSelector} already initialized`);
                    return;
                }

                // Check if table is visible (in active tab)
                const $tabPane = $table.closest('.tab-pane');
                if ($tabPane.length > 0 && !$tabPane.hasClass('active')) {
                    console.log(`Table ${tableSelector} not in active tab - skipping`);
                    return null;
                }

                try {
                    // Initialize DataTable
                    const table = $table.DataTable(options);
                    initializedTables.push(tableSelector);
                    console.log(`Successfully initialized ${tableSelector}`);
                    return table;
                } catch (error) {
                    console.error(`Error initializing ${tableSelector}:`, error);
                    return null;
                }
            }

            // Function to add table filters
            function addTableFilters(tableSelector, config = {}) {
                if (config.searchPlaceholder) {
                    $(`${tableSelector}_filter input[type="search"]`).attr('placeholder', config.searchPlaceholder);
                }

                if (config.customFilters) {
                    $(`${tableSelector}_filter`).append(config.customFilters);
                }
            }

            // Handle tab switching and initialize tables when tabs become active
            $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                const targetTab = $(e.target).attr('data-bs-target');

                // Fix Select2 width issues when switching to Details tab
                if (targetTab === '#details') {
                    setTimeout(() => {
                        // Trigger Select2 to recalculate width without destroying/recreating
                        $('#po, #loading_location, #offloading_location').each(function() {
                            const $select = $(this);
                            if ($select.hasClass('select2-hidden-accessible')) {
                                // Force width recalculation by triggering a resize event
                                $select.trigger('select2:open');
                                setTimeout(() => {
                                    $select.trigger('select2:close');
                                }, 10);
                            }
                        });
                    }, 100);
                }

                // Initialize appropriate table based on active tab
                setTimeout(() => {
                    if (targetTab === '#MapView') {
                        const mapTable = initializeDataTable('#tbl-map-view', {
                            info: true,
                            searching: true,
                            ordering: false,
                            paging: false,
                            dom: 'frt<"bottom"ipl><"clear">'
                        });

                        if (mapTable) {
                            addTableFilters('#tbl-map-view', {
                                customFilters: `
                                    <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="mapViewFilter" class="form-control w-100 mt-1">
                                                <option value="">All Vehicles</option>
                                                <option value="Truck">Truck</option>
                                                <option value="Trailer">Trailer</option>
                                            </select>
                                        </div>
                                    </div>
                                `
                            });
                        }
                    } else if (targetTab === '#Transporters') {
                        const transporterTable = initializeDataTable('#tbl-transporters', {
                            searching: true,
                            ordering: false,
                            dom: 'frt<"bottom"ipl><"clear">'
                        });

                        if (transporterTable) {
                            addTableFilters('#tbl-transporters', {
                                searchPlaceholder: 'Search',
                                customFilters: `
                                    <div class="d-flex justify-content-md-end flex-wrap">
                                        <div class="position-relative me-2 mobile-w-100">
                                            <input type="text" class="form-control date-picker" placeholder="Date Range" id="transporter-calendar">
                                            <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>
                                `
                            });
                        }
                    } else if (targetTab === '#Documents') {
                        const documentsTable = initializeDataTable('#tbl-documents', {
                            searching: true,
                            ordering: false,
                            dom: 'frt<"bottom"ipl><"clear">'
                        });

                        if (documentsTable) {
                            addTableFilters('#tbl-documents', {
                                searchPlaceholder: 'Search',
                                customFilters: `
                                    <div class="d-flex justify-content-end flex-wrap">
                                        <div class="max-w-200">
                                            <select id="transporterFilter" class="form-control custom-width-200">
                                                <option value="">All Transporters</option>
                                            </select>
                                        </div>
                                        <div class="max-w-200 ms-2">
                                            <select id="typeFilter" class="form-control custom-width-200">
                                                <option value="">All Types</option>
                                                <option value="Contract">Contract</option>
                                                <option value="Invoice">Invoice</option>
                                                <option value="Receipt">Receipt</option>
                                            </select>
                                        </div>
                                        <div class="position-relative me-2">
                                            <input type="text" class="form-control date-picker" placeholder="Date Range" id="document-calendar">
                                            <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="uploadDocumentBtn"><em class="iconsax text-white fs-20" icon-name="upload-2"></em> Upload Document</button>
                                    </div>
                                `
                            });
                        }
                    }
                }, 100); // Small delay to ensure tab is fully shown
            });

            // Initialize tables for the active tab on page load
            $(document).ready(function() {
                // Check which tab is active (could be restored from localStorage)
                const activeTab = $('.tab-pane.active').attr('id');

                if (activeTab === 'MapView') {
                    $('button[data-bs-target="#MapView"]').trigger('shown.bs.tab');
                } else if (activeTab === 'Transporters') {
                    $('button[data-bs-target="#Transporters"]').trigger('shown.bs.tab');
                } else if (activeTab === 'Documents') {
                    $('button[data-bs-target="#Documents"]').trigger('shown.bs.tab');
                }
            });

                $(function () {
                    $('#load_date').datepicker({
                        minDate: 0,
                        dateFormat: 'dd/mm/yy',
                        onSelect: function () {
                            const loadDate = $(this).datepicker('getDate');
                            $('#offload_date').datepicker('option', 'minDate', new Date(loadDate.getTime()));
                        }
                    });

                    $('#offload_date').datepicker({
                        minDate: 0,
                        dateFormat: 'dd/mm/yy'
                    });
                });

            $('.timepicker').timepicker({
                timeFormat: 'H:mm',        // 24-hour format like 13:00, 22:30
                interval: 30,
                minTime: '00:00',
                maxTime: '23:59',
                defaultTime: '',
                startTime: '00:00',
                dynamic: false,
                dropdown: true,
                scrollbar: true
            });

            // Initialize email tags from hidden value
            function initEmailTagWidget(containerSelector, inputSelector, hiddenSelector){
                const $container = $(containerSelector);
                const $hidden = $(hiddenSelector);
                const $input = $(inputSelector);
                let initial;
                try { initial = JSON.parse($hidden.val() || '[]') } catch(e){ initial = [] }
                if (!Array.isArray(initial)) { initial = String($hidden.val() || '').trim() ? [String($hidden.val())] : [] }
                let emailTags = initial.filter(isValidEmail);
                renderEmailTags($container, emailTags);

                // Focus container focuses input
                $container.on('click', function(){ $input.focus(); });

                // Handle key events to add tags on Enter or comma
                $input.on('keydown', function(e){
                    if (e.key === 'Enter' || e.key === ',' ){
                        e.preventDefault();
                        const raw = $input.val();
                        raw.split(',').forEach(function(p){ emailTags = pushUniqueEmail(emailTags, p); });
                        renderEmailTags($container, emailTags);
                        $input.val('');
                        $hidden.val(JSON.stringify(emailTags));
                    } else if (e.key === 'Backspace' && !$input.val() && emailTags.length){
                        emailTags.pop();
                        renderEmailTags($container, emailTags);
                        $hidden.val(JSON.stringify(emailTags));
                    }
                });

                // Remove tag
                $container.on('click', '.remove-tag', function(){
                    const email = $(this).parent('.email-tag').data('email');
                    emailTags = emailTags.filter(function(t){ return t !== email; });
                    renderEmailTags($container, emailTags);
                    $hidden.val(JSON.stringify(emailTags));
                });

                return function getJson(){ return JSON.stringify(emailTags); };
            }

            const getLoadingEmailsJson = initEmailTagWidget('#emailTagsLoading', '#emailInputLoading', '#emailHiddenLoading');
            const getOffloadingEmailsJson = initEmailTagWidget('#emailTagsOffloading', '#emailInputOffloading', '#emailHiddenOffloading');

            $.validator.addMethod("afterLoad", function (value, element) {
                const loadDateStr = $('input[name="load_date"]').val();
                const loadDate = moment(loadDateStr, 'DD/MM/YYYY', true);
                const offloadDate = moment(value, 'DD/MM/YYYY', true);
                if (!loadDate.isValid() || !offloadDate.isValid()) {
                    return false;
                }
                return offloadDate.isSameOrAfter(loadDate, 'day');
            }, "Offload date must be after or equal to load date.");

            $.validator.addMethod("validDMY", function(value, element) {
                if (!value) return true;
                return moment(value, 'DD/MM/YYYY', true).isValid();
            }, "Please enter a valid date in DD/MM/YYYY format.");

            $.validator.addMethod("validEmailTags", function(value, element){
                let arr = [];
                try { arr = JSON.parse(value || '[]'); } catch(e){ return false; }
                if (!Array.isArray(arr) || arr.length === 0) return false;
                for (let i=0;i<arr.length;i++){ if(!isValidEmail(arr[i])) return false; }
                return true;
            }, "Please enter at least one valid email.");

            $.validator.addMethod("notPastDate", function(value, element) {
                if (!value) return true;
                const inputDate = moment(value, 'DD/MM/YYYY', true);
                if (!inputDate.isValid()) return false;
                const today = moment().startOf('day');
                return inputDate.isSameOrAfter(today, 'day');
            }, "Date cannot be in the past.");

            $('.form-validate').validate({
                errorClass: 'help-block',
                errorElement: 'span',
                ignore: [],
                highlight: function(element) {
                    $(element).closest('.col-field-wrapper').addClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).closest('.col-field-wrapper').removeClass('has-error');
                },
                errorPlacement: function(error, element) {
                    var $wrapper = $(element).closest('.col-field-wrapper');
                    if ($wrapper.length) {
                        // Remove any previous help-block to avoid stacking
                        $wrapper.find('span.help-block').remove();
                        error.appendTo($wrapper);
                    } else if ($(element).hasClass('select2-hidden-accessible')) {
                        error.insertAfter($(element).next('.select2'));
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    mine_name: {
                        required: true
                    },
                    po: {
                        required: true
                    },
                    loading_recipient_emails: {
                        required: true,
                        validEmailTags: true
                    },
                    offloading_recipient_emails: {
                        required: true,
                        validEmailTags: true
                    },
                    loading_location_id: {
                        required: true
                    },
                    load_date: {
                        required: true,
                        validDMY: true,
                        notPastDate: true
                    },
                    load_time: {
                        required: true
                    },
                    offloading_location_id: {
                        required: true
                    },
                    offload_date: {
                        required: true,
                        validDMY: true,
                        notPastDate: true,
                        afterLoad: true
                    },
                    offload_time: {
                        required: true
                    },
                    distance_km: {
                        required: true,
                        number: true
                    },
                    load_weight: {
                        required: true,
                        number: true
                    }
                },
                messages: {
                    mine_name: {
                        required: "Please enter the route identification"
                    },
                    po: {
                        required: "Please select the PO number"
                    },
                    loading_recipient_emails: {
                        required: "Please enter the loading fleet recipient emails"
                    },
                    offloading_recipient_emails: {
                        required: "Please enter the offloading fleet recipient emails"
                    },
                    loading_location_id: {
                        required: "Please select the loading location"
                    },
                    load_date: {
                        required: "Please select the load date"
                    },
                    load_time: {
                        required: "Please select the load time"
                    },
                    offloading_location_id: {
                        required: "Please select the offloading location"
                    },
                    offload_date: {
                        required: "Please select the offload date"
                    },
                    offload_time: {
                        required: "Please select the offload time"
                    },
                    distance_km: {
                        required: "Please enter the distance in kilometers",
                        number: "Distance must be a number"
                    },
                    load_weight: {
                        required: "Please enter the load weight",
                        number: "Load weight must be a number"
                    }
                }
            });


            var isSavingJob = false;
            $('.form-validate').submit(function (e) {
                e.preventDefault();

                var form = this;

                if (isSavingJob) {
                    return;
                }
                var $submitBtn = $('button[type="submit"]');
                isSavingJob = true;
                $submitBtn.prop('disabled', true).html('<em class="fa fa-spinner fa-spin"></em> Saving...');

                // Sync recipient emails JSON into hidden fields before validation
                try {
                    const loadingEmailsJson = (getLoadingEmailsJson && getLoadingEmailsJson()) || $('#emailHiddenLoading').val() || '[]';
                    $('#emailHiddenLoading').val(loadingEmailsJson);
                } catch(_) {}
                try {
                    const offloadingEmailsJson = (getOffloadingEmailsJson && getOffloadingEmailsJson()) || $('#emailHiddenOffloading').val() || '[]';
                    $('#emailHiddenOffloading').val(offloadingEmailsJson);
                } catch(_) {}

                // Prevent submit if invalid
                if (!$(form).valid()) {
                    isSavingJob = false;
                    $submitBtn.prop('disabled', false).html('{{$saveBtn}}');
                    return;
                }

                var formData = new FormData(form);
                // Ensure recipient emails JSON is set
                try { formData.set('loading_recipient_emails', $('#emailHiddenLoading').val() || '[]'); } catch(_) {}
                try { formData.set('offloading_recipient_emails', $('#emailHiddenOffloading').val() || '[]'); } catch(_) {}

                // Ensure purchase_order_id is set correctly
                const poValue = $('#po').val();
                if (poValue) {
                    formData.set('purchase_order_id', poValue);
                }

                // Ensure location IDs are set
                const loadingLocationId = $('#loading_location').val();
                const offloadingLocationId = $('#offloading_location').val();
                const firestoreDbId = "{{ config('firebase.database') }}";

                if (loadingLocationId) {
                    formData.set('loading_location_id', loadingLocationId);
                }
                if (offloadingLocationId) {
                    formData.set('offloading_location_id', offloadingLocationId);
                }

                $.ajax({
                    url: $(form).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        $('button[type="submit"]').prop('disabled', true).html('<em class="fa fa-spinner fa-spin"></em> Saving...');
                    },
                    success: function (response) {
                        if (response.status === 'success') {
                            toastr.success('Job details saved successfully!');

                            // Set the current job ID for transporter functionality
                            if (response.job_id) {
                                currentJobId = response.job_id;
                                try {
                                    if (window.FirebaseChat) {
                                        FirebaseChat.init(window.FIREBASE_CONFIG, firestoreDbId, { userId: "{{ Auth::id() }}", userName: "{{ Auth::user()->name }}", role: "admin" });

                                        // Build job users from currently known parties (addedBy + selected transporter if any)
                                        const jobUsers = [];
                                        const addedBy = { id: {{ Auth::id() }}, name: "{{ Auth::user()->name }}", email: "{{ Auth::user()->email }}", role: "admin" };
                                        jobUsers.push(addedBy);
                                        const selectedTransporterId = $('#transporterSelect').val();
                                        if (selectedTransporterId) {
                                            const selectedTransporterName = $('#transporterSelect option:selected').text();
                                            jobUsers.push({ id: selectedTransporterId, name: selectedTransporterName, email: '', role: 'transporter' });
                                        }

                                        FirebaseChat.createChatIfNotExists(response.job_id, jobUsers, 'Job created')
                                            .then(chatId => {
                                                // Redirect only after chat creation is successful
                                                window.location.href = response.redirect_url;
                                            })
                                            .catch(chatErr => {
                                                console.error('Chat creation failed:', chatErr);
                                                // Redirect even if chat creation fails (optional)
                                                window.location.href = response.redirect_url;
                                            });
                                    } else {
                                        // Redirect if FirebaseChat is not available
                                        window.location.href = response.redirect_url;
                                    }
                                } catch (err) {
                                    console.error('Error in chat creation:', err);
                                    // Redirect even if there's an error
                                    window.location.href = response.redirect_url;
                                }
                            } else {
                                // Redirect if no job_id (shouldn't happen but just in case)
                                window.location.href = response.redirect_url;
                            }
                        } else {
                            // Non-success response: allow retry
                            isSavingJob = false;
                            $submitBtn.prop('disabled', false).html('{{$saveBtn}}');
                        }
                    },
                    error: function (xhr) {
                        if (xhr.responseJSON) {
                            if (xhr.responseJSON.errors) {
                                // $.each(xhr.responseJSON.errors, function (key, val) {
                                //     if (Array.isArray(val)) {
                                //         toastr.error(val[0]);
                                //     } else {
                                //         toastr.error(val);
                                //     }
                                // });
                            } else if (xhr.responseJSON.message) {
                                toastr.error(xhr.responseJSON.message);
                            } else {
                                toastr.error('Validation failed. Please check your input.');
                            }
                        } else if (xhr.status === 500) {
                            toastr.error('Server error occurred. Please try again.');
                        } else if (xhr.status === 422) {
                            toastr.error('Please check all required fields are filled correctly.');
                        } else {
                            toastr.error('Something went wrong. Please try again.');
                        }
                        // On error, re-enable to allow retry
                        isSavingJob = false;
                        $submitBtn.prop('disabled', false).html('{{$saveBtn}}');
                    },
                    complete: function () {}
                });
            });

            $(function () {
                console.log('Initializing Select2 dropdowns...');

                // Setup CSRF token for AJAX calls
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                // Initialize Loading Location Select
                $('#loading_location').select2({
                    placeholder: 'Select Loading Location',
                    allowClear: true,
                    ajax: {
                        url: "{{ route('admin.jobs.loading-locations') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            console.log('Loading location search params:', params);
                            return {
                                search: params.term || ''
                            };
                        },
                        processResults: function (data) {
                            console.log('Loading location results:', data);
                            return {
                                results: data
                            };
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error('Loading location AJAX error:', textStatus, errorThrown);
                            console.error('Response:', jqXHR.responseText);
                            console.error('Status:', jqXHR.status);
                        },
                        cache: true
                    }
                }).on('select2:open', function() {
                    console.log('Loading location dropdown opened');
                }).on('select2:select', function(e) {
                    console.log('Loading location selected:', e.params.data);
                });

                // Handle Loading Location Change
                $('#loading_location').on('change', function() {
                    const locationId = $(this).val();

                    if (locationId) {
                        try {
                            // Get location data from the selected option
                            const locationData = $(this).select2('data')[0];

                            if (locationData) {
                                // Update hidden fields
                                $('#loading_location_id').val(locationId);
                                $('#loading_latitude').val(locationData.latitude || '');
                                $('#loading_longitude').val(locationData.longitude || '');

                                // Update load time options
                                updateLoadTimeOptions(locationData);

                                // Fetch polyline (optional)
                                fetchPolylineAndRender();
                            }
                        } catch (error) {
                            console.log('Error processing loading location data:', error);
                        }
                    } else {
                        // Clear fields if no selection
                        $('#loading_location_id').val('');
                        $('#loading_latitude').val('');
                        $('#loading_longitude').val('');
                        $('#load_time').empty().append('<option value="">Select</option>');
                    }
                });

                // Initialize Offloading Location Select
                $('#offloading_location').select2({
                    placeholder: 'Select Offloading Location',
                    allowClear: true,
                    ajax: {
                        url: "{{ route('admin.jobs.offloading-locations') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            console.log('Offloading location search params:', params);
                            return {
                                search: params.term || ''
                            };
                        },
                        processResults: function (data) {
                            console.log('Offloading location results:', data);
                            return {
                                results: data
                            };
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error('Offloading location AJAX error:', textStatus, errorThrown);
                            console.error('Response:', jqXHR.responseText);
                            console.error('Status:', jqXHR.status);
                        },
                        cache: true
                    }
                }).on('select2:open', function() {
                    console.log('Offloading location dropdown opened');
                }).on('select2:select', function(e) {
                    console.log('Offloading location selected:', e.params.data);
                });

                // Handle Offloading Location Change
                $('#offloading_location').on('change', function() {
                    const locationId = $(this).val();

                    if (locationId) {
                        try {
                            const locationData = $(this).select2('data')[0];

                            if (locationData) {
                                // Update hidden fields
                                $('#offloading_location_id').val(locationId);
                                $('#offloading_latitude').val(locationData.latitude || '');
                                $('#offloading_longitude').val(locationData.longitude || '');

                                // Update offload time options
                                updateOffloadTimeOptions(locationData);

                                // Fetch polyline (optional)
                                fetchPolylineAndRender();
                            }
                        } catch (error) {
                            console.log('Error processing offloading location data:', error);
                        }
                    } else {
                        // Clear fields if no selection
                        $('#offloading_location_id').val('');
                        $('#offloading_latitude').val('');
                        $('#offloading_longitude').val('');
                        $('#offload_time').empty().append('<option value="">Select</option>');
                    }
                });

                // Initialize Purchase Order Select
                $('#po').select2({
                    placeholder: 'Select Purchase Order',
                    allowClear: true,
                    // ajax: {
                    //     url: "{{ route('admin.jobs.purchase-orders') }}",
                    //     dataType: 'json',
                    //     delay: 250,
                    //     data: function (params) {
                    //         console.log('Purchase order search params:', params);
                    //         return {
                    //             search: params.term || ''
                    //         };
                    //     },
                    //     processResults: function (data) {
                    //         console.log('Purchase order results:', data);
                    //         return {
                    //             results: data
                    //         };
                    //     },
                    //     error: function(jqXHR, textStatus, errorThrown) {
                    //         console.error('Purchase order AJAX error:', textStatus, errorThrown);
                    //         console.error('Response:', jqXHR.responseText);
                    //         console.error('Status:', jqXHR.status);
                    //     },
                    //     cache: true
                    // }
                }).on('select2:open', function() {
                    console.log('Purchase order dropdown opened');
                }).on('select2:select', function(e) {
                    console.log('Purchase order selected:', e.params.data);
                });

                // Handle Purchase Order Change
                $('#po').on('change', function() {
                    const poId = $(this).val();
                    $('#po_id').val(poId);

                    // Also set the purchase_order_id for form submission
                    $('input[name="purchase_order_id"]').val(poId);
                });

                // Function to update load time options
                function updateLoadTimeOptions(locationData) {
                    $('#load_time').empty();

                    if (locationData.duration_type === 'range' && locationData.range) {
                        $('#load_time').append(`<option value="${locationData.range}">${locationData.range}</option>`);
                    } else {
                        $('#load_time').append('<option value="24_7">24/7</option>');
                    }
                }

                // Function to update offload time options
                function updateOffloadTimeOptions(locationData) {
                    $('#offload_time').empty();

                    if (locationData.duration_type === 'range' && locationData.range) {
                        $('#offload_time').append(`<option value="${locationData.range}">${locationData.range}</option>`);
                    } else {
                        $('#offload_time').append('<option value="24_7">24/7</option>');
                    }
                }

                // Function to calculate distance using Google Maps Distance Matrix API
                function calculateDistanceWithGoogleMaps(lat1, lon1, lat2, lon2, callback) {
                    var origin = new google.maps.LatLng(lat1, lon1);
                    var destination = new google.maps.LatLng(lat2, lon2);

                    var service = new google.maps.DistanceMatrixService();
                    service.getDistanceMatrix({
                        origins: [origin],
                        destinations: [destination],
                        travelMode: google.maps.TravelMode.DRIVING,
                        unitSystem: google.maps.UnitSystem.METRIC,
                        avoidHighways: false,
                        avoidTolls: false
                    }, function(response, status) {
                        if (status === 'OK') {
                            var element = response.rows[0].elements[0];
                            if (element.status === 'OK') {
                                var distanceInMeters = element.distance.value;
                                var distanceInKm = distanceInMeters / 1000;
                                callback(distanceInKm);
                            } else {
                                console.error('Distance calculation failed:', element.status);
                                callback(null);
                            }
                        } else {
                            console.error('Distance Matrix API failed:', status);
                            callback(null);
                        }
                    });
                }

                // Function to update distance field
                function updateDistanceField() {
                    var lat1 = parseFloat($('#loading_latitude').val());
                    var lon1 = parseFloat($('#loading_longitude').val());
                    var lat2 = parseFloat($('#offloading_latitude').val());
                    var lon2 = parseFloat($('#offloading_longitude').val());

                    if (!isNaN(lat1) && !isNaN(lon1) && !isNaN(lat2) && !isNaN(lon2)) {
                        // Show loading indicator
                        $('#distance_km').val('Calculating...');

                        calculateDistanceWithGoogleMaps(lat1, lon1, lat2, lon2, function(distance) {
                            if (distance !== null) {
                                // Round to 1 decimal place to match Google Maps display format
                                var roundedDistance = Math.round(distance * 10) / 10;
                                $('#distance_km').val(roundedDistance);
                            } else {
                                // Fallback to Haversine formula if Google API fails
                                var fallbackDistance = calculateHaversineDistance(lat1, lon1, lat2, lon2);
                                var roundedFallbackDistance = Math.round(fallbackDistance * 10) / 10;
                                $('#distance_km').val(roundedFallbackDistance);
                            }
                        });
                    }
                }

                // Fallback Haversine formula function
                function calculateHaversineDistance(lat1, lon1, lat2, lon2) {
                    function toRad(x) { return x * Math.PI / 180; }
                    var R = 6371; // Radius of the earth in km
                    var dLat = toRad(lat2 - lat1);
                    var dLon = toRad(lon2 - lon1);
                    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                            Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
                            Math.sin(dLon/2) * Math.sin(dLon/2);
                    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
                    var d = R * c;
                    return d;
                }

                // Call updateDistanceField when either location changes
                $('#loading_location, #offloading_location').on('change', function() {
                    updateDistanceField();
                });
            });

            // Add Transporter functionality
            let currentJobId = @if(isset($job)) {{ $job->id }} @else null @endif; // Set if editing existing job
            // Fallback: read ?id= from URL after first save to stay on create page
            (function hydrateJobIdFromUrl(){
                const params = new URLSearchParams(window.location.search);
                const idParam = params.get('id');
                if (!currentJobId && idParam && /^\d+$/.test(idParam)) {
                    currentJobId = parseInt(idParam, 10);
                }
            })();

            // Handle Add Transporter button click
            $(document).on('click', '#addTransporterBtn', function() {
                if (!currentJobId) {
                    toastr.error('Please save the job details first before adding transporters');
                    return;
                }
                $('#addTransporterModal').modal('show');
            });

            // Ensure tab param activates the tab, but do not auto-open modal
            (function ensureTransportersTabFromUrl() {
                const url = new URL(window.location.href);
                const tab = (url.searchParams.get('tab') || '').toLowerCase();
                if (tab === 'transporters') {
                    $('button[data-bs-target="#Transporters"]').addClass('active');
                    $('#Transporters').addClass('show active');
                }
            })();

            // Handle Add Transporter form submission
            $('#addTransporterForm').on('submit', function(e) {
                e.preventDefault();
                const firestoreDbId = "{{ config('firebase.database') }}";
                const transporterId = $('#transporterSelect').val();

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

                if (!currentJobId) {
                    toastr.error('Job ID not found');
                    return;
                }

                // Build URL from named route with placeholder
                const assignTransporterUrl = "{{ route('admin.jobs.assign-transporter', ['job' => 'JOB_ID']) }}".replace('JOB_ID', currentJobId);

                $.ajax({
                    url: assignTransporterUrl,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        transporter_id: transporterId
                    },
                    beforeSend: function() {
                        $('#addTransporterForm button[type="submit"]').prop('disabled', true).html('<em class="fa fa-spinner fa-spin"></em> Saving...');
                    },
                    success: async function(response) {
                        try {
                            // Add transporter to job chat group in Firestore
                            const FC = window.FirebaseChat;
                            if (!FC){
                                console.warn('FirebaseChat not loaded on this page');
                            } else {
                                if (!FC.db){
                                    FC.init(null, firestoreDbId, { userId: "{{ Auth::id() }}", userName: "{{ Auth::user()->name }}", role: "admin" });
                                }
                                if (FC.db && currentJobId && transporterId){
                                    const tUserId = (response && (response.user_id || response.transporter_id || (response.transporter && (response.transporter.user_id || response.transporter.id)) || (response.data && (response.data.user_id || response.data.transporter_id)))) || '';
                                    const tName = (response && (response.name || response.transporter_name || (response.transporter && response.transporter.name) || (response.data && (response.data.name || response.data.transporter_name)))) || '';
                                    const tEmail = (response && (response.email || response.transporter_email || (response.transporter && response.transporter.email) || (response.data && (response.data.email || response.data.transporter_email)))) || '';
                                    const tUserType = (response && (response.userType || (response.transporter && response.transporter.userType) || (response.data && response.data.userType))) || '';
                                    const finalId = tUserId || transporterId;
                                    await FC.addUsersToGroupChatByJobId(String(currentJobId), [{ id: finalId, user_id: finalId, name: tName, email: tEmail, userType: tUserType }]);
                                }
                            }
                        } catch (e) {
                            console.error('Failed to add transporter to chat group:', e);
                        }

                        if (response.status === 'success') {
                            toastr.success('Transporter assigned successfully');
                            $('#addTransporterModal').modal('hide');
                            $('#addTransporterForm')[0].reset();

                            // Reload to render updated transporters via server (keeps id and tab)
                            (function reloadForUpdatedTransporters(){
                                const url = new URL(window.location.href);
                                url.searchParams.set('tab', 'transporters');
                                history.replaceState(null, '', url.toString());
                                window.location.reload();
                            })();
                        } else {
                            toastr.error(response.message || 'Failed to assign transporter');
                        }
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function(key, val) {
                                toastr.error(val[0]);
                            });
                        } else {
                            toastr.error('Failed to assign transporter');
                        }
                    },
                    complete: function() {
                        $('#addTransporterForm button[type="submit"]').prop('disabled', false).html('Save');
                    }
                });
            });



            // Document deletion functionality
            $(document).on('click', '.delete-document', function(e) {
                e.preventDefault();
                const jobId = $(this).data('job-id');
                const documentId = $(this).data('document-id');
                const row = $(this).closest('tr');

                if (!jobId || !documentId) {
                    toastr.error('Missing required information for deletion');
                    return;
                }

                // SweetAlert confirmation dialog
                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: `/admin/jobs/${jobId}/documents/${documentId}`,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                if (response.status === 'success') {
                                    row.remove();
                                    toastr.success(response.message || 'Document deleted successfully');
                                    setTimeout(function() {
                                        // Optionally reload or update UI here if needed
                                    }, 1000);
                                } else {
                                    toastr.error(response.message || 'Failed to delete document');
                                }
                            },
                            error: function(xhr) {
                                console.error('Delete error:', xhr);
                                let errorMessage = 'Failed to delete document';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    errorMessage = xhr.responseJSON.message;
                                }
                                toastr.error(errorMessage);
                            }
                        });
                    }
                });
            });

            // Upload document functionality
            $(document).on('click', '#uploadDocumentBtn', function(e) {
                e.preventDefault();
                if (!currentJobId) {
                    toastr.error('Please save the job details first before uploading documents');
                    return;
                }
                $('#uploadDocumentModal').modal('show');
            });

            // Handle upload document form submission
            $('#uploadDocumentForm').on('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                const $submitBtn = $(this).find('button[type="submit"]');
                const originalText = $submitBtn.html();

                // Show loading state
                $submitBtn.prop('disabled', true).html('<em class="fa fa-spinner fa-spin"></em> Uploading...');

                $.ajax({
                    url: `/admin/jobs/${currentJobId}/documents`,
                    type: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message || 'Document uploaded successfully');
                            $('#uploadDocumentModal').modal('hide');
                            $('#uploadDocumentForm')[0].reset();
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.message || 'Failed to upload document');
                        }
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function(key, val) {
                                toastr.error(val[0]);
                            });
                        } else {
                            toastr.error('Failed to upload document');
                        }
                    },
                    complete: function() {
                        $submitBtn.prop('disabled', false).html(originalText);
                    }
                });
            });
        });
    </script>
    <script type="module" src="{{ asset('js/firebase-chat.js') }}"></script>
    <script>
        // Set Firebase configuration globally
        window.FIREBASE_CONFIG = {
            apiKey: "{{ $firebaseCredentials['apiKey'] ?? '' }}",
            authDomain: "{{ $firebaseCredentials['authDomain'] ?? 'capable-door-463909-v9.firebaseapp.com' }}",
            projectId: "{{ $firebaseCredentials['projectId'] ?? 'capable-door-463909-v9' }}",
            storageBucket: "{{ $firebaseCredentials['storageBucket'] ?? 'capable-door-463909-v9.firebasestorage.app' }}",
            messagingSenderId: "{{ $firebaseCredentials['messagingSenderId'] ?? '811049235028' }}",
            appId: "{{ $firebaseCredentials['appId'] ?? '1:811049235028:web:63c7dca47bd9e819cc73c1' }}"
        };
        console.log('Firebase config loaded:', window.FIREBASE_CONFIG);
    </script>
<!-- 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">
                @csrf
                <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 ($transporters ?? [] as $transporter)
                                <option value="{{ $transporter->id }}">{{ $transporter->name }}</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>

<!-- Document View Modal -->
<div class="modal fade" id="docsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">View Documents</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="docsCarousel" class="carousel slide" data-bs-interval="false">
                    <div class="carousel-inner">
                        <div class="carousel-item active doc-item"></div>
                        <div class="carousel-item doc-item"></div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#docsCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#docsCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Upload Document Modal -->
<div class="modal fade" id="uploadDocumentModal" tabindex="-1" aria-labelledby="uploadDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadDocumentModalLabel">Upload Document</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="uploadDocumentForm">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="documentType" class="form-label">Document Type</label>
                                <select class="form-control" id="documentType" name="document_type" required>
                                    <option value="">Select Document Type</option>
                                    @foreach($documentTypes ?? [] as $docType)
                                        <option value="{{ $docType->id }}">{{ $docType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="transporterSelect" class="form-label">Transporter</label>
                                <select class="form-control" id="transporterSelect" name="transporter_id" required>
                                    <option value="">Select Transporter</option>
                                    @if(isset($job) && $job->transporters)
                                        @foreach($job->transporters as $transporter)
                                            <option value="{{ $transporter->id }}">{{ $transporter->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="documentFront" class="form-label">Front Side</label>
                                <input type="file" class="form-control" id="documentFront" name="document_front" accept=".jpg,.jpeg,.png,.pdf" required>
                                <small class="form-text text-muted">Accepted formats: JPG, JPEG, PNG, PDF</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="documentBack" class="form-label">Back Side (Optional)</label>
                                <input type="file" class="form-control" id="documentBack" name="document_back" accept=".jpg,.jpeg,.png,.pdf">
                                <small class="form-text text-muted">Accepted formats: JPG, JPEG, PNG, PDF</small>
                            </div>
                        </div>
                    </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">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection