@extends('template.layouts.template-base')
@section('title', 'Order Management- Details')

@section('styles')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
  <style>
    .page-content {
      background-color: #F1F5F9 !important;
      padding: 80px 10px;
    }
  </style>
@endsection

@section('content')
  <div class="order-detail-page">
    <div class="header">
      <div class="container">
        <div class="row align-items-center">
            <div class="col">
                <div class="page-title">
                <a href="{{ route('backend.order-management.index') }}"> Orders/ <span class="breadcrumb-link">Orders
                    Detail</span></a>
                </div>
            </div>
            <div class="col-md-6 text-end d-flex justify-content-end gap-2">
                <div class="lang-wrapper">

                <button class="lang-trigger" id="langBtn">
                    <span id="langSelected">English</span>
                    <i class="ri-arrow-down-s-fill"></i>
                </button>

                <ul class="lang-list" id="langMenu">
                    <li class="current">English</li>
                    <li>Tamil</li>
                </ul>

                </div>
                <a href="{{ route('backend.order-management.pdf', $order->id) }}" 
                class="btn download-button" target="_blank">
                    <img src="{{ asset('assets/template/images/file-pdf-2.png') }}" alt="PDF" class="file-pdf-img" />
                    Download Invoice
                </a>
                <a href="{{ route('backend.order-management.print', $order->id) }}" 
                class="btn print-btn" target="_blank">
                    <img src="{{ asset('assets/template/images/printer-1.png') }}" alt="Print" class="printer-img" />
                    Print Invoice
                </a>
            </div>
        </div>
      </div>
    </div>

    <div class="container mt-4">
      <div class="row">
        <div class="col-md-8">
          <div class="customer-card">
            <div class="d-flex justify-content-between heading align-items-center mb-3">
              <h5>Order ID : {{ $order->order_number ?? '' }}</h5>
              <div class="d-flex gap-2 align-items-center">
                <span class="payment-badge bg-warning text-dark me-2">{{ $order->payment_method ?? ''}}</span>
                <div class="custom-dropdown">
                  @php
                    $statusColors = [
                        'pending'          => '#ff8a00',
                        'confirmed'        => '#2196f3',
                        'shipped'          => '#9c27b0',
                        'delivered'        => '#2e7d32',
                        'cancelled'        => '#dc3545',
                        'refund_initiated' => '#ff5722',
                        'refunded'         => '#607d8b',
                        'failed'           => '#b71c1c',
                    ];

                    $currentColor = $statusColors[$order->order_status] ?? '#ff8a00';
                  @endphp

                  <button class="dropdown-btn" type="button" 
                      style="background-color: {{ $currentColor }}; color: #fff; border-color: {{ $currentColor }}">
                      {{ ucfirst(str_replace('_', ' ', $order->order_status)) }}
                      <span class="caret"><i class="ri-arrow-down-s-fill"></i></span>
                  </button>
                </div>
              </div>
            </div>

            <!-- Products -->
            @foreach($order->items as $item)
              <div class="product-item">
                  <img 
                      src="{{ $item->packSize?->ProductPackImages->first()?->image_path 
                              ? asset($item->packSize->ProductPackImages->first()->image_path) 
                              : asset('assets/template/images/cate-img.png') }}" 
                      alt="{{ $item->product_name }}" 
                      class="product-img" 
                  />
                  <div class="flex-grow-1">
                      <h6>{{ $item->product_name }}</h6>
                      <p class="mb-0 small-text">{{ $item->pack_size_name }}</p>
                  </div>
                  <div class="text-end">
                      <p>
                          <span class="disc-text">₹{{ number_format($item->price - $item->discount_amount, 2) }}</span>
                          <span class="blue-text">₹{{ number_format($item->price, 2) }}</span>
                      </p>
                      <p class="mb-0">Qty - {{ $item->quantity }}</p>
                  </div>
              </div>
            @endforeach
          </div>
          <!-- Payment Summary -->
          <div class="mt-4 p-3 customer-card">
            <div class="d-flex justify-content-between heading mb-2">
              <h5>Payment Summary</h5>
              <div class="pay-wrap">
                <button class="pay-toggle" 
                    style="background: {{ $order->payment_status === 'paid' ? '#009207' : '#dc3545' }}">
                    {{ ucfirst($order->payment_status) }}
                    <i class="ri-arrow-down-s-fill fs-5"></i>
                </button>
               
              </div>
            </div>
            <div class="d-flex justify-content-between mb-4">
              <span>Subtotal</span>
              <span>{{ number_format($order->subtotal, 2) }}</span>
            </div>
            <div class="d-flex justify-content-between mb-4">
              <span>Discount </span>
              <span>{{ number_format($order->discount_amount, 2) }}</span>
            </div>
            <div class="d-flex justify-content-between mb-4">
              <span>Shipping Cost</span>
              <span>{{ number_format($order->delivery_charge, 2) }}</span>
            </div>
            <div class="d-flex justify-content-between mb-4">
              <span>Tax (GST)</span>
              <span>{{ number_format($order->gst_amount, 2) }}</span>
            </div>
            <div class="d-flex justify-content-between mt-3 pt-3 border-top">
              <strong>Total</strong>
              <strong style="color: #0d47a1">{{ number_format($order->total_amount, 2) }}</strong>
            </div>
          </div>
        </div>

       <div class="col-md-4 customer-card-item">

          {{-- Customer Details --}}
          <div class="customer-card">
              <div class="d-flex justify-content-between align-items-center mb-3 heading">
                  <h5>Customer Details</h5>
                  @if($order->user?->mobile)
                      <a href="tel:{{ $order->user->mobile }}" class="btn btn-primary btn-call">
                          <i class="bx bxs-phone"></i> Call
                      </a>
                  @endif
              </div>

              @if($order->user)
                  @php $user = $order->user; @endphp
                  <div class="d-flex align-items-center justify-content-between">
                      <div class="d-flex align-items-center">
                          @if($user->image)
                              <img src="{{ asset('uploads/' . $user->image) }}"
                                  alt="{{ $user->first_name }}"
                                  class="me-3 user-img-item" />
                          @else
                              <img src="{{ asset('assets/template/images/user-img.png') }}"
                                  alt="{{ $user->name }}"
                                  class="me-3 user-img-item" />
                          @endif

                          <div class="d-flex flex-column">
                              <h6 class="mb-0">
                                  {{ $user->name }}
                              </h6>
                              <small class="text-muted">
                                  +91 {{ $user->mobile }}
                              </small>
                          </div>
                      </div>

                      <div class="play-wrapper">
                          <a href="{{ route('backend.customers.details', $user->customer->id) }}">
                              <span class="play-circle">
                                  <i class="bx bxs-right-arrow"></i>
                              </span>
                          </a>
                      </div>
                  </div>
              @else
                  <p class="text-muted">Customer details not available.</p>
              @endif
          </div>

          {{-- Delivery Address --}}
          <div class="customer-card">
              <h5 class="my-2">Delivery Address</h5>
              @if($order->shippingAddress)
                  <p class="d-flex gap-2 loca-sec">
                      <i class="bx bxs-map fs-5 m-2"></i>
                      <span>
                          {{ $order->shippingAddress->address_line1 }},<br/>
                          @if($order->shippingAddress->address_line2)
                              {{ $order->shippingAddress->address_line2 }},<br/>
                          @endif
                          @if($order->shippingAddress->district)
                              {{ $order->shippingAddress->district }},
                          @endif
                          {{ $order->shippingAddress->pincode }}<br/>
                          @if($order->shippingAddress->state)
                              {{ $order->shippingAddress->state }},
                          @endif
                          {{ $order->shippingAddress->country ?? 'India' }}.
                      </span>
                  </p>
                  @if($order->shippingAddress->latitude && $order->shippingAddress->longitude)
                      <div class="d-flex align-items-center map-sec">
                          <span>
                              <img src="{{ asset('assets/template/images/map.png') }}"
                                  alt="Map" class="mx-3 map-item" />
                          </span>
                          <a href="https://maps.google.com/?q={{ $order->shippingAddress->latitude }},{{ $order->shippingAddress->longitude }}"
                            target="_blank" class="text-primary d-flex">
                              View Map
                          </a>
                      </div>
                  @endif
              @else
                  <p class="text-muted">No delivery address available.</p>
              @endif
          </div>

          {{-- Billing Address --}}
          <div class="customer-card">
              <h5 class="my-2">Billing Address</h5>
              @if($order->billingAddress) 
                  <p class="d-flex gap-2 loca-sec">
                      <i class="bx bxs-map fs-5 m-2"></i>
                      <span> {{-- Fix #5 — fixed unclosed span --}}
                          {{ $order->billingAddress->address_line1 }},<br/>
                          @if($order->billingAddress->address_line2)
                              {{ $order->billingAddress->address_line2 }},<br/>
                          @endif
                          @if($order->billingAddress->district)
                              {{ $order->billingAddress->district }},
                          @endif
                          {{ $order->billingAddress->pincode }}<br/>
                          @if($order->billingAddress->state)
                              {{ $order->billingAddress->state }},
                          @endif
                          {{ $order->billingAddress->country ?? 'India' }}.
                      </span>
                  </p>
                  <div class="d-flex align-items-center map-sec">
                      <span>
                          <img src="{{ asset('assets/template/images/map.png') }}"
                              alt="Map" class="mx-3 map-item" />
                      </span>
                      <a href="#" class="text-primary d-flex">View Map</a>
                  </div>
              @else
                  <p class="text-muted">Same as delivery address.</p>
              @endif
          </div>

          {{-- Delivery Vehicle --}}
          <div class="customer-card no-border">
              <div class="d-flex justify-content-between align-items-center mb-3 heading">
                  <h5>Delivery Vehicle</h5>
              </div>
              <div class="d-flex align-items-center justify-content-between">
                  <div class="d-flex align-items-center">
                      <img src="{{ asset('assets/template/images/user-img.png') }}"
                          alt="Driver" class="me-3 user-img-item" />
                      <div class="d-flex flex-column">

                          @if($order->vehicle_id && $order->primaryDriver)
                              {{-- Company vehicle with driver --}}
                              <h6 class="mb-0" id="assignedDriverName">
                                  {{ $order->primaryDriver->name }}
                              </h6>
                              <small class="text-muted" id="assignedDriverMobile">
                                  +91 {{ $order->primaryDriver->phone }}
                              </small>
                              <small class="text-muted" id="assignedVehicleNumber">
                                  {{ $order->vehicle?->vehicle_number }}
                              </small>

                          @elseif($order->vehicle_id && $order->vehicle?->ownership_type === 'third_party')
                              {{-- Third party vehicle --}}
                              <h6 class="mb-0" id="assignedDriverName">
                                  {{ $order->vehicle->transporter?->name ?? 'Third Party' }}
                              </h6>
                              <small class="text-muted" id="assignedDriverMobile">
                                  {{ $order->vehicle->transporter?->phone ?? '—' }}
                              </small>
                              <small class="text-muted" id="assignedVehicleNumber">
                                  {{ $order->vehicle->vehicle_number }}
                              </small>

                          @else
                              {{-- Nothing assigned yet --}}
                              <h6 class="mb-0 text-muted" id="assignedDriverName">
                                  No vehicle assigned
                              </h6>
                              <small class="text-muted" id="assignedDriverMobile"></small>
                              <small class="text-muted" id="assignedVehicleNumber"></small>
                          @endif

                      </div>
                  </div>

                  <a href="javascript:void(0);"
                      data-bs-toggle="modal"
                      data-bs-target=".add-company-vehicle-screen">
                      <div class="play-wrapper">
                          <span class="play-circle">
                              <i class="bx bxs-right-arrow"></i>
                          </span>
                      </div>
                  </a>
              </div>
          </div>

        </div>
      </div>

      @php
          $steps = [
              'pending'          => 0,
              'confirmed'        => 1,
              'packed'           => 2,   
              'shipped'          => 3,  
              'out_for_delivery' => 4,  
              'delivered'        => 5,  
          ];

          $currentStep = $steps[$order->order_status] ?? 0;
      @endphp

      <div class="order-card order-timeline border-0">
          <div class="section-title">Tracking Status</div>

          <ul class="bs4-order-tracking">

              {{-- Step 1: Order Confirmed --}}
              <li class="step step-1 timeline-item {{ $currentStep >= 1 ? 'active completed' : '' }}">
                  <div class="timeline-icon">
                      <i class="bx bx-box"></i>
                  </div>
                  <span class="order-content">
                      <h4>Order Confirmed</h4>
                      <p class="order-desc-content">
                          @if($currentStep >= 1)
                              Your order has been confirmed on
                              {{ $order->created_at->format('d M, Y - h:iA') }}
                          @else
                              Waiting for confirmation
                          @endif
                      </p>
                  </span>
              </li>

              {{-- Step 2: Packed --}}
              <li class="step step-2 timeline-item {{ $currentStep >= 2 ? 'active confirmed' : '' }}">
                  <div class="timeline-icon">
                      <i class="bx bxs-package"></i>
                  </div>
                  <span class="order-content">
                      <h4>Packed</h4>
                      <p class="order-desc-content">
                          @if($currentStep >= 2)
                              Your order has been packed
                          @else
                              Pending
                          @endif
                      </p>
                  </span>
              </li>

              {{-- Step 3: Shipped --}}
              <li class="step step-3 timeline-item {{ $currentStep >= 3 ? 'active processed' : '' }}">
                  <div class="timeline-icon">
                      <i class="bx bxs-cog"></i>
                  </div>
                  <span class="order-content">
                      <h4>Shipped</h4>
                      <p class="order-desc-content">
                          @if($currentStep >= 3)
                              Your order has been shipped
                          @else
                              Pending
                          @endif
                      </p>
                  </span>
              </li>

              {{-- Step 4: Out for Delivery --}}
              <li class="step step-4 timeline-item {{ $currentStep >= 4 ? 'active shipped' : '' }}">
                  <div class="timeline-icon">
                      <i class="bx bxs-truck"></i>
                  </div>
                  <span class="order-content">
                      <h4>Out For Delivery</h4>
                      <p class="order-desc-content">
                          @if($currentStep >= 4)
                              Your order is out for delivery
                          @else
                              Pending
                          @endif
                      </p>
                  </span>
              </li>

              {{-- Step 5: Delivered --}}
              <li class="step step-5 timeline-item {{ $currentStep >= 5 ? 'active delivered' : '' }}">
                  <div class="timeline-icon">
                      <i class="bx bxs-home"></i>
                  </div>
                  <span class="order-content">
                      <h4>Delivered</h4>
                      <p class="order-desc-content">
                          @if($currentStep >= 5)
                              Your order has been delivered
                          @else
                              Pending
                          @endif
                      </p>
                  </span>
              </li>

          </ul>

          {{-- Cancelled / Failed / Refund statuses --}}
          @if(in_array($order->order_status, ['cancelled', 'failed', 'refund_initiated', 'refunded']))
              <div class="alert alert-danger mt-3 mb-0">
                  <i class="bx bx-x-circle me-2"></i>
                  @if($order->order_status === 'cancelled')
                      Order has been Cancelled
                  @elseif($order->order_status === 'failed')
                      Order has Failed
                  @elseif($order->order_status === 'refund_initiated')
                      Refund Initiated — Refund is being processed
                  @elseif($order->order_status === 'refunded')
                      Refunded — Refund has been completed
                  @endif
              </div>
          @endif

      </div>

    </div>
  </div>
  
  <div class="modal fade add-company-vehicle-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content rounded-4">
            <div class="modal-header">
                <h5>Add Delivery Vehicle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body inquiry-preview-modal">
                <div class="container mt-4">
                    <div class="vehicle-card">
                        <div class="row g-3">

                            {{-- Vehicle Select --}}
                            <div class="col-md-6">
                                <label class="form-label">
                                    Select Vehicle <span class="text-danger">*</span>
                                </label>
                                <select class="form-control custom-input select-arrow"
                                        id="vehicleSelect">
                                    <option value="">-- Select Vehicle --</option>
                                    @foreach($vehicles as $vehicle)
                                        <option value="{{ $vehicle->id }}"
                                            data-ownership="{{ $vehicle->ownership_type }}"
                                            data-number="{{ $vehicle->vehicle_number }}"
                                            data-driver="{{ $vehicle->primary_driver_id }}"
                                            data-secondary="{{ json_encode($vehicle->secondary_driver_id ?? []) }}"
                                            data-transporter="{{ $vehicle->transporter?->name ?? '' }}"
                                            {{ $order->vehicle_id == $vehicle->id ? 'selected' : '' }}>
                                            {{ $vehicle->vehicle_number }}
                                            ({{ $vehicle->vehicleType?->name ?? 'N/A' }})
                                            — {{ ucfirst(str_replace('_', ' ', $vehicle->ownership_type)) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Vehicle Number (readonly) --}}
                            <div class="col-md-6">
                                <label class="form-label">Vehicle Number</label>
                                <input type="text"
                                       class="form-control custom-input"
                                       id="vehicleNumberDisplay"
                                       placeholder="Auto-filled on selection"
                                       readonly />
                            </div>

                            {{-- Ownership Type (readonly info badge) --}}
                            <div class="col-md-12">
                                <div id="ownershipBadge" style="display:none">
                                    <span class="badge" id="ownershipLabel"
                                          style="font-size:13px; padding:6px 14px;"></span>
                                </div>
                            </div>

                            {{-- COMPANY FIELDS — primary + secondary driver --}}
                            <div id="companyDriverSection" style="display:none" class="col-md-12">
                                <div class="row g-3">

                                    {{-- Primary Driver --}}
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Primary Driver <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control custom-input select-arrow"
                                                id="primaryDriverSelect">
                                            <option value="">-- Select Driver --</option>
                                            @foreach($drivers as $driver)
                                                <option value="{{ $driver->id }}">
                                                    {{ $driver->name }}
                                                    @if($driver->mobile)
                                                        (+91 {{ $driver->mobile }})
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Secondary Driver --}}
                                    <div class="col-md-6" id="secondaryDriverWrapper">
                                        <label class="form-label">Additional Driver
                                            <small class="text-muted">(Optional)</small>
                                        </label>
                                        <select class="form-control custom-input select-arrow"
                                                id="secondaryDriverSelect"
                                                multiple>
                                            @foreach($drivers as $driver)
                                                <option value="{{ $driver->id }}">
                                                    {{ $driver->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-muted">Hold Ctrl to select multiple</small>
                                    </div>
                                </div>
                            </div>

                            {{-- THIRD PARTY FIELDS — transporter info only --}}
                            <div id="thirdPartySection" style="display:none" class="col-md-12">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Transporter Name</label>
                                        <input type="text"
                                               class="form-control custom-input"
                                               id="transporterDisplay"
                                               placeholder="—"
                                               readonly />
                                    </div>
                                    <div class="col-md-6 d-flex align-items-end">
                                        <div class="alert alert-info py-2 px-3 mb-0 w-100" style="font-size:13px;">
                                            <i class="bx bx-info-circle me-1"></i>
                                            Third party vehicle — no driver assignment needed.
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        {{-- Error --}}
                        <div id="vehicleFormError"
                             class="text-danger mt-2"
                             style="display:none"></div>

                        {{-- Buttons --}}
                        <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                            <button type="button"
                                    data-bs-dismiss="modal"
                                    class="btn cancel-btn">
                                Cancel
                            </button>
                            <button type="button"
                                    class="btn delete-btn"
                                    id="assignVehicleBtn">
                                Assign Vehicle
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>

 

  <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
    <div id="statusUpdatedToast" class="toast login-success-toast" role="alert" aria-live="assertive" aria-atomic="true">

      <div class="toast-body d-flex align-items-center gap-3">
        <div class="toast-left">
          <div class="check-circle">
            ✓
          </div>
        </div>
        <div class="toast-right">
          <h6>Status updated successfully</h6>

        </div>

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

  <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
    <div id="sentSuccessToast" class="toast login-success-toast" role="alert" aria-live="assertive" aria-atomic="true">

      <div class="toast-body d-flex align-items-center gap-3">
        <div class="toast-left">
          <div class="check-circle">
            ✓
          </div>
        </div>
        <div class="toast-right">
          <h6>Sent Successful</h6>
          <p>Invoice has been sent successfully</p>
        </div>

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

  <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
    <div id="downloadSuccessToast" class="toast login-success-toast" role="alert" aria-live="assertive"
      aria-atomic="true">

      <div class="toast-body d-flex align-items-center gap-3">
        <div class="toast-left">
          <div class="check-circle">
            ✓
          </div>
        </div>
        <div class="toast-right">
          <h6>Download Successful</h6>
          <p>The invoice has been downloaded successfully</p>
        </div>

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

  <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
    <div id="vehicleSuccessToast" class="toast login-success-toast" role="alert" aria-live="assertive" aria-atomic="true">

      <div class="toast-body d-flex align-items-center gap-3">
        <div class="toast-left">
          <div class="check-circle">
            ✓
          </div>
        </div>
        <div class="toast-right">
          <h6>Added Successful</h6>
          <p>Delivery Vehicle has been added successfully</p>
        </div>

      </div>
    </div>
  </div>
@endsection

@section('scripts')
  <script>
    document.querySelectorAll('.dropdown-menu-custom li').forEach(item => {

      item.addEventListener('click', function () {

        const dropdown = this.closest('.custom-dropdown');
        const btn = dropdown.querySelector('.dropdown-btn');

        // Remove active from all options
        dropdown.querySelectorAll('li').forEach(li => {
          li.classList.remove('active');
          li.style.background = '';
        });

        // Apply selected
        this.classList.add('active');

        const color = this.dataset.color;

        this.style.background = color;
        btn.style.background = color;

        btn.childNodes[0].textContent = this.textContent;

      });

    });

  </script>
  <script>
    const wrapper = document.querySelector('.lang-wrapper');
    const btn = document.getElementById('langBtn');
    const menu = document.getElementById('langMenu');
    const selected = document.getElementById('langSelected');

    btn.addEventListener('click', () => {
      wrapper.classList.toggle('open');
    });

    menu.querySelectorAll('li').forEach(item => {
      item.addEventListener('click', () => {
        selected.textContent = item.textContent;

        menu.querySelectorAll('li').forEach(li => li.classList.remove('current'));
        item.classList.add('current');

        wrapper.classList.remove('open');
      });
    });

    // Close outside
    document.addEventListener('click', e => {
      if (!wrapper.contains(e.target)) {
        wrapper.classList.remove('open');
      }
    });
  </script>
  <script>

    const box = document.querySelector(".pay-wrap");
    const button = box.querySelector(".pay-toggle");
    const options = box.querySelectorAll("li");

    // open close
    button.onclick = () => {
      box.classList.toggle("opened");
    };

    // select
    options.forEach(item => {

      item.onclick = () => {

        const color = item.dataset.bg;

        // text
        button.childNodes[0].nodeValue = item.textContent + " ";

        // background
        button.style.background = color;

        // active
        options.forEach(o => o.classList.remove("current"));
        item.classList.add("current");

        box.classList.remove("opened");
      };

    });

    // outside click
    document.addEventListener("click", e => {
      if (!box.contains(e.target)) {
        box.classList.remove("opened");
      }
    });
  </script>
  <script>

  // ── Vehicle select change ─────────────────────────────────────────
  document.getElementById('vehicleSelect')?.addEventListener('change', function () {
      const selected      = this.options[this.selectedIndex];
      const ownership     = selected.dataset.ownership;   // 'company' or 'third_party'
      const number        = selected.dataset.number       ?? '';
      const driverId      = selected.dataset.driver       ?? '';
      const secondaryIds  = JSON.parse(selected.dataset.secondary ?? '[]');
      const transporter   = selected.dataset.transporter  ?? '';

      // Fill vehicle number
      document.getElementById('vehicleNumberDisplay').value = number;

      // Hide both sections first
      document.getElementById('companyDriverSection').style.display = 'none';
      document.getElementById('thirdPartySection').style.display    = 'none';
      document.getElementById('ownershipBadge').style.display       = 'none';

      if (!ownership) return;

      // Show ownership badge
      const badge = document.getElementById('ownershipLabel');
      if (ownership === 'company') {
          badge.textContent        = '🏢 Company Vehicle';
          badge.style.background   = '#2563eb';
          badge.style.color        = '#fff';
      } else {
          badge.textContent        = '🚛 Third Party Vehicle';
          badge.style.background   = '#f59e0b';
          badge.style.color        = '#fff';
      }
      document.getElementById('ownershipBadge').style.display = '';

      if (ownership === 'company') {
          // Show driver fields
          document.getElementById('companyDriverSection').style.display = '';

          // Auto-select primary driver
          const primarySelect = document.getElementById('primaryDriverSelect');
          if (primarySelect && driverId) {
              primarySelect.value = driverId;
          }

          // Auto-select secondary drivers
          const secondarySelect = document.getElementById('secondaryDriverSelect');
          if (secondarySelect && secondaryIds.length) {
              [...secondarySelect.options].forEach(opt => {
                  opt.selected = secondaryIds.includes(parseInt(opt.value));
              });
          }

      } else if (ownership === 'third_party') {
          // Show transporter info, hide drivers
          document.getElementById('thirdPartySection').style.display = '';
          document.getElementById('transporterDisplay').value = transporter || 'N/A';
      }

      // Clear error
      document.getElementById('vehicleFormError').style.display = 'none';
  });

  // ── Assign Vehicle submit ─────────────────────────────────────────
  document.getElementById('assignVehicleBtn')?.addEventListener('click', function () {
      const vehicleSelect = document.getElementById('vehicleSelect');
      const vehicleId     = vehicleSelect.value;
      const ownership     = vehicleSelect.options[vehicleSelect.selectedIndex]?.dataset.ownership;
      const errorEl       = document.getElementById('vehicleFormError');

      // Validate vehicle
      if (!vehicleId) {
          errorEl.textContent   = 'Please select a vehicle.';
          errorEl.style.display = '';
          return;
      }

      // Validate primary driver only for company vehicles
      let primaryDriverId  = null;
      let secondaryIds     = [];

      if (ownership === 'company') {
          primaryDriverId = document.getElementById('primaryDriverSelect').value;
          if (!primaryDriverId) {
              errorEl.textContent   = 'Please select a primary driver.';
              errorEl.style.display = '';
              return;
          }

          // Secondary drivers (optional)
          const secondarySelect = document.getElementById('secondaryDriverSelect');
          secondaryIds = secondarySelect
              ? [...secondarySelect.selectedOptions].map(o => o.value)
              : [];
      }

      errorEl.style.display = 'none';

      const btn = this;
      btn.disabled    = true;
      btn.textContent = 'Assigning...';

      $.ajax({
          url:  '{{ route("backend.order-management.assign-vehicle", $order->id) }}',
          type: 'POST',
          data: {
              _token:               '{{ csrf_token() }}',
              vehicle_id:           vehicleId,
              ownership_type:       ownership,
              primary_driver_id:    primaryDriverId,
              secondary_driver_ids: secondaryIds,
          },
          success: function (res) {
              if (res.status) {

                  // Safe update — only set if element exists
                  const nameEl    = document.getElementById('assignedDriverName');
                  const mobileEl  = document.getElementById('assignedDriverMobile');
                  const vehicleEl = document.getElementById('assignedVehicleNumber');

                  if (nameEl) {
                      nameEl.textContent = res.data.driver_name ?? 
                          res.data.transporter ?? 'Third Party';
                  }

                  if (mobileEl) {
                      mobileEl.textContent = res.data.driver_mobile
                          ? '+91 ' + res.data.driver_mobile
                          : res.data.transporter ?? '—';
                  }

                  if (vehicleEl) {
                      vehicleEl.textContent = res.data.vehicle_number ?? '—';
                  }

                  // Close modal
                  bootstrap.Modal.getInstance(
                      document.querySelector('.add-company-vehicle-screen')
                  ).hide();

                  // Toast
                  new bootstrap.Toast(
                      document.getElementById('vehicleSuccessToast')
                  ).show();
              }
          },
          error: function (xhr) {
              const res             = xhr.responseJSON;
              errorEl.textContent   = res?.message ?? 'Failed to assign. Please try again.';
              errorEl.style.display = '';
          },
          complete: function () {
              btn.disabled    = false;
              btn.textContent = 'Assign Vehicle';
          }
      });
  });
</script>
@endsection