@extends('layouts.app')

@section('title', trans('lang.ride_details'))

@section('content')
<main class="main-content">
  <div class="container min-h-screen bg-gray-900 text-white font-sans" id="bookingDetails">

    <!-- Header -->
    <div class="sticky top-0 z-10 bg-gray-900 border-b border-gray-800">
      <div class="flex items-center px-4 py-4">
        <h1 class="text-lg font-semibold">@lang('lang.cancelled_ride_details')</h1>
      </div>
    </div>

    <!-- Route Section -->
    <div class="px-4 py-4 bg-gray-900">
      <div class="space-y-4">
        <!-- Pickup -->
        <div class="flex items-start">
          <div class="w-3 h-3 bg-red-500 rounded-full mt-2 flex-shrink-0"></div>
            <div class="ml-4 flex-1">
              <div class="text-orange-400 font-medium text-lg mb-1" id="pickupCity">{{ __('lang.loading') }}</div>
              <div class="text-gray-400 text-sm mb-2" id="pickupAddress">{{ __('lang.loading') }}</div>
              <div class="flex items-center text-orange-400 text-sm">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="3 11 22 2 13 21 11 13 3 11"/>
                </svg>
                <span>@lang('lang.pickup_location_note')</span>
              </div>
            </div>
        </div>

        <!-- Drop -->
        <div class="flex items-start">
          <div class="w-3 h-3 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
          <div class="ml-4 flex-1">
            <div class="text-green-400 font-medium text-lg mb-1" id="dropCity">{{ __('lang.loading') }}</div>
            <div class="text-gray-400 text-sm mb-2" id="dropAddress">{{ __('lang.loading') }}</div>
            <div class="flex items-center text-green-400 text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="3 11 22 2 13 21 11 13 3 11"/>
              </svg>
              <span>@lang('lang.drop_location_note')</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Seats & Price -->
    <div class="px-4 py-4 bg-gray-800 border-b border-gray-700">
      <div class="flex justify-between items-center">
        <div>
          <div class="text-gray-400 text-sm mb-1">@lang('lang.price_per_seat')</div>
          <div class="text-white text-xl font-bold pricePerSeat">{{ __('lang.loading') }}</div>
        </div>
        <div class="text-right">
          <div class="text-gray-400 text-sm mb-1">@lang('lang.booked_seats'): <span class="availableSeats">{{ __('lang.loading') }}</span></div>
        </div>
      </div>
    </div>

    &nbsp;

    <!-- Driver Info Toggle -->
    <div id="driverInfoToggle" class="px-4 py-3 bg-gray-800 border-b border-gray-700 cursor-pointer hover:bg-gray-750 transition-colors">
      <div class="flex justify-between items-center">
        <span class="text-gray-300 font-medium">@lang('lang.driver_information')</span>
        <svg id="driverInfoChevron" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 transition-transform" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="9 18 15 12 9 6"/>
        </svg>
      </div>
    </div>

    <!-- Driver Info Details -->
    <div id="driverInfoDetails" class="px-4 py-4 bg-gray-800 border-b border-gray-700 space-y-3 hidden">
      <div class="flex items-center text-gray-300 w-full flex-wrap gap-6">
        <!-- Driver Block -->
        <div class="px-4 py-4 bg-gray-800 border-y border-gray-700 w-50">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <div class="relative">
                <div class="w-12 h-12 bg-gray-600 rounded-full overflow-hidden">
                  <img id="driverImage" src="{{ asset('images/default_icon_user.png') }}" alt="User" class="w-10 h-10 object-cover">
                </div>
                <div id="driverVerifyBadge" class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
                  <svg class="w-3 h-3 ml-px text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                  </svg>
                </div>
              </div>
              <div class="ml-3">
                <!-- IMPLEMENTATION (driverNameWrapper) -->
                <div class="text-white font-medium flex items-center gap-2" id="driverNameWrapper">
                  <span id="driverName">{{ __('lang.loading') }}</span>
                  <span id="driverVerificationStatus" class="driver-verify-badge"></span>
                </div>
                <div class="flex items-center text-gray-400 text-sm mt-1">
                  <span class="text-yellow-400 mr-1">★</span>
                  <span class="mr-2" id="totalRating">0</span>
                  <span class="text-orange-400">
                    <span id="reviewCount">0</span> {{ __('lang.ratings') }}
                  </span>
                </div>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <button class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors driver-call-button btn-b-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2 text-white" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                </svg>
              </button>
              <button class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center hover:bg-green-700 transition-colors driver-chat-button btn-b-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2 text-white" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                </svg>
              </button>
            </div>
          </div>

          <!-- Vehicle Info -->
          <div class="mt-4 flex items-center text-gray-300">
            <svg class="w-5 h-5 mr-3 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/>
              <circle cx="7" cy="17" r="2"/>
              <path d="M9 17h6"/>
              <circle cx="17" cy="17" r="2"/>
            </svg>
            <span id="vehicleInfo">{{ __('lang.loading') }}</span>
          </div>

          <div class="mt-2 flex items-center text-gray-300">
            <svg class="w-5 h-5 mr-3 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
              <circle cx="8.5" cy="8.5" r="1.5"/>
              <path d="M21 15l-3.5-3.5L12 18l-3.5-3.5L3 21"/>
            </svg>
            <span id="vehicleTypeColor">{{ __('lang.loading') }}</span>
          </div>

          <div class="mt-2 flex items-center text-gray-300">
            <svg class="w-5 h-5 mr-3 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="4" width="20" height="16" rx="2"/>
              <path d="M2 10h20M7 15h1m4 0h1m4 0h1"/>
            </svg>
            <span id="licensePlate">{{ __('lang.loading') }}</span>
          </div>

          <div class="mt-4">
            <h4 class="text-gray-400 text-sm mb-2">{{ __('lang.travel_preferences') }}</h4>
            <div class="flex items-center space-x-6">
              <div class="flex flex-col items-center" id="chattinessPreference">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                </svg>
                <span class="text-xs text-gray-400 ml-2">{{trans('lang.chat')}}</span>
              </div>
              <div class="flex flex-col items-center" id="musicPreference">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M9 18V5l12-2v13"/>
                  <circle cx="6" cy="18" r="3"/>
                  <circle cx="18" cy="16" r="3"/>
                </svg>
                <span class="text-xs text-gray-400 ml-2">{{trans('lang.music')}}</span>
              </div>
              <div class="flex flex-col items-center" id="petsPreference">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M3.42 7.42a8 8 0 1 0 11.16 11.16l4.29-4.29a2 2 0 0 0-2.83-2.83l-4.29 4.29A8 8 0 0 0 3.42 7.42z"/>
                  <path d="M15 15l4.29 4.29"/>
                  <path d="M9 12h.01"/>
                  <path d="M15 12h.01"/>
                </svg>
                <span class="text-xs text-gray-400 ml-2">{{trans('lang.pets')}}</span>
              </div>
              <div class="flex flex-col items-center" id="smokingPreference">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
                  <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
                  <line x1="6" y1="1" x2="6" y2="4"/>
                  <line x1="10" y1="1" x2="10" y2="4"/>
                  <line x1="14" y1="1" x2="14" y2="4"/>
                </svg>
                <span class="text-xs text-gray-400 ml-2">{{trans('lang.smoking')}}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Vehicle Images -->
        <div class="px-4 py-3 bg-gray-800 border-b border-gray-700 w-50">
          <div class="w-full h-32 bg-gray-700 rounded-lg overflow-hidden">
            <div id="vehicleImageSection" class="mt-6 rides-veh-img"></div>
          </div>
        </div>
      </div>
    </div>

    &nbsp;

    <!-- Trip Info Toggle -->
    <div id="tripInfoToggle" class="px-4 py-3 bg-gray-800 border-b border-gray-700 cursor-pointer hover:bg-gray-750 transition-colors">
      <div class="flex justify-between items-center">
        <span class="text-gray-300 font-medium">@lang('lang.trip_information')</span>
        <svg id="tripInfoChevron" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 transition-transform" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="9 18 15 12 9 6"/>
        </svg>
      </div>
    </div>

    <!-- Trip Info Details -->
    <div id="tripInfoDetails" class="px-4 py-4 bg-gray-800 border-b border-gray-700 space-y-3 hidden">
      <div class="flex items-center text-gray-300">
        <svg class="w-5 h-5 mr-3 text-gray-400" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
          <line x1="16" y1="2" x2="16" y2="6"/>
          <line x1="8" y1="2" x2="8" y2="6"/>
          <line x1="3" y1="10" x2="21" y2="10"/>
        </svg>
        <div>
          <div id="departureDateTime">@lang('lang.trip_starts_on'): {{ __('lang.loading') }}</div>
          <div id="createdAt" class="text-xs text-gray-400">@lang('lang.posted_on'): {{ __('lang.loading') }}</div>
        </div>
      </div>
      <div class="flex items-center text-gray-300">
        <svg class="w-5 h-5 mr-3 text-gray-400" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"/>
          <polyline points="12 6 12 12 16 14"/>
        </svg>
        <span id="estimatedTime">{{ __('lang.loading') }}</span>
      </div>
      <div class="flex items-center text-gray-300">
        <svg class="w-5 h-5 mr-3 text-sky-400" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2l4 20-4-4-4 4 4-20z"/>
        </svg>
        <span id="tripStartFrom">{{ __('lang.loading') }}</span>
      </div>
      <div class="flex items-center text-gray-300">
        <svg class="w-5 h-5 mr-3 text-rose-400" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4 3v18M4 3c5 0 6 3 11 3s6-3 11-3v12c-5 0-6-3-11-3s-6 3-11 3"/>
        </svg>
        <span id="tripEndAt">{{ __('lang.loading') }}</span>
      </div>
      <div class="flex items-center text-gray-300">
        <svg class="w-5 h-5 mr-3 text-gray-400" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="10" r="3"/>
          <path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/>
        </svg>
        <span id="distance">{{ __('lang.loading') }}</span>
      </div>
      <div class="flex items-center text-gray-300">
        <svg class="w-5 h-5 mr-3 text-gray-400" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 12h6m-6 4h6M9 3v18l3-3 3 3V3z"/>
        </svg>
        <span id="luggageAllowed">{{ __('lang.loading') }}</span>
      </div>
      <div class="flex items-center text-gray-300">
        <svg class="w-5 h-5 mr-3 text-gray-400" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
          <circle cx="12" cy="7" r="4"/>
        </svg>
        <span id="passengerSeating">{{ __('lang.loading') }}</span>
      </div>
      <div class="flex items-center text-gray-300">
        <svg class="w-5 h-5 mr-3 text-gray-400" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
        </svg>
        <span id="womenOnly">{{ __('lang.loading') }}</span>
      </div>
    </div>

  </div>
</main>

<!-- Payment Modal (kept for structure completeness) -->
<div class="modal" id="ridePaymentModal">
  <div class="modal-content">
    <div class="modal-header">
      <h3 id="paymentModalTitle">@lang('lang.pay'):<span class="totalAmount">00</span></h3>
      <button class="modal-close-btn">&times;</button>
    </div>
    <div class="modal-body">
      <div class="form-group" style="display:none;">
        <label for="ridePaymentAmount">@lang('lang.amount')</label>
        <input id="ridePaymentAmount" type="text" class="form-control" placeholder="@lang('lang.enter_amount')">
      </div>
      <div class="form-group">
        <label>@lang('lang.payment_method')</label>
        <div id="paymentMethods" class="payment-methods"></div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary modal-close-btn">@lang('lang.cancel')</button>
      <button class="btn btn-primary" id="confirmPayment">@lang('lang.proceed_to_payment')</button>
    </div>
  </div>
</div>

<style>
  .driver-verify-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    border-radius:12px;
    font-size:11px;
    font-weight:600;
    line-height:1;
    background:#4b5563;
    color:#fff;
    white-space:nowrap;
  }
  .driver-verify-badge.verified{background:#059669}
  .driver-verify-badge.unverified{background:#6b7280}
  .driver-verify-badge svg{width:14px;height:14px}
</style>
@endsection

@section('script')
<script>
(function(){
  function formatDate(input){
    let date;
    if(input && typeof input==='object' && input.seconds){
      date = new Date(input.seconds*1000);
    }else{
      date = new Date(input);
    }
    return date.toLocaleDateString('en-US',{
      month:'short',day:'numeric',year:'numeric',
      hour:'numeric',minute:'2-digit',hour12:true
    });
  }

  function formatDistance(m){
    const km = Math.round(parseInt(m)/1000);
    return `${km} km`;
  }

  function getStatusColor(status){
    switch(status.toLowerCase()){
      case 'completed': return 'bg-green-900 text-green-400';
      case 'cancelled': return 'bg-red-900 text-red-400';
      case 'upcoming': return 'bg-blue-900 text-blue-400';
      case 'in-progress': return 'bg-yellow-900 text-yellow-400';
      default: return 'bg-gray-700 text-gray-400';
    }
  }

  function formatCurrency(val){
    try{
      return new Intl.NumberFormat('fr-CA',{style:'currency',currency:'CAD'}).format(parseFloat(val)||0);
    }catch(e){ return '$'+(val||0); }
  }

  $(document).ready(function(){
    $('#tripInfoToggle').on('click',()=>{
      $('#tripInfoDetails').toggleClass('hidden');
      $('#tripInfoChevron').toggleClass('rotate-90');
    });
    $('#driverInfoToggle').on('click',()=>{
      $('#driverInfoDetails').toggleClass('hidden');
      $('#driverInfoChevron').toggleClass('rotate-90');
    });

    const bookingId = "{{$id}}";

    db.collection('booking').doc(bookingId).get()
      .then(doc=>{
        if(!doc.exists){
          $('#bookingDetails').html('<div class="text-center py-8"><h2 class="text-xl font-semibold mb-2">{{trans("lang.booking_not_found_title")}}</h2><p class="text-gray-400">{{trans("lang.booking_not_found_message")}}</p></div>');
          return;
        }
        const bookingData = doc.data();

        // Cancelled user data
        db.collection('booking').doc(bookingId).collection('cancelledUser').doc(firebaseUid).get()
          .then(cancelDoc=>{
            if(!cancelDoc.exists) return;
            const cData = cancelDoc.data();
        

      
            if (cData.stopOver) {
              $('#pickupCity, #pickupAddress').text(cData.stopOver.start_address);
              $('#dropCity, #dropAddress').text(cData.stopOver.end_address);
              $('.pricePerSeat').text(formatCurrency(cData.stopOver.price));
              $('.availableSeats').text(cData.bookedSeat);
            }
          });

        $('#tripStartFrom').text(`@lang('lang.trip_starts_from'): ${bookingData.pickUpAddress}`);
        $('#tripEndAt').text(`@lang('lang.trip_ends_at'): ${bookingData.dropAddress}`);
        $('#departureDateTime').text(`@lang('lang.trip_starts_on'): ${formatDate(bookingData.departureDateTime)}`);
        $('#createdAt').text(`@lang('lang.posted_on'): ${formatDate(bookingData.createdAt)}`);
        $('#estimatedTime').text(bookingData.estimatedTime);
        $('#distance').text(formatDistance(bookingData.distance));

        $('#luggageAllowed').text(
          bookingData.luggageAllowed === "1"
            ? "@lang('lang.1_luggage')"
            : `${bookingData.luggageAllowed} @lang('lang.luggages')`
        );
        $('#passengerSeating').text(
          bookingData.twoPassengerMaxInBack
            ? "@lang('lang.two_passengers_max_in_back')"
            : "@lang('lang.standard_seating')"
        );
        $('#womenOnly').text(
          bookingData.womenOnly
            ? "@lang('lang.women_only')"
            : "@lang('lang.open_to_all_passengers')"
        );

        // Hide legacy round badge if unverified flag absent
        if (!bookingData.driverVerify) {
          $('#driverVerifyBadge').addClass('hidden');
        }

        // Driver info
        db.collection('users').doc(bookingData.createdBy).get()
          .then(uDoc=>{
            if(!uDoc.exists){
              $('#driverName').text('Unknown');
              return;
            }
            const driverData = uDoc.data();
            const first = driverData.firstName || '';
            const last = driverData.lastName || '';
            const fullName = `${first} ${last}`.trim() || driverData.name || '@lang('lang.driver')';
            $('#driverName').text(fullName);
            if(driverData.profilePic){
              $('#driverImage').attr('src', driverData.profilePic);
            }

            const reviewCount = parseInt(driverData.reviewCount)||0;
            const reviewSum = parseFloat(driverData.reviewSum)||0;
            const avg = reviewCount>0 ? (reviewSum/reviewCount).toFixed(1) : '0';
            $('#reviewCount').text(reviewCount);
            $('#totalRating').text(avg);

            if(driverData.travelPreference){
              $('#chattinessPreference').attr('title', driverData.travelPreference.chattiness);
              $('#musicPreference').attr('title', driverData.travelPreference.music);
              $('#petsPreference').attr('title', driverData.travelPreference.pets);
              $('#smokingPreference').attr('title', driverData.travelPreference.smoking);
            }

            $('.driver-call-button').on('click', ()=>{
              const fullNumber = (driverData.countryCode||'') + (driverData.phoneNumber||'');
              if(fullNumber.trim()) window.location.href='tel:'+fullNumber;
            });

            $('.driver-chat-button').on('click', async ()=>{
              const sendmsg = prompt("@lang('lang.enter_message')") || "";
              if(!sendmsg.trim()) return;
              const senderId = firebaseUid;
              const receiverId = driverData.id;
              const messageId = db.collection('messages').doc().id;
              const timestamp = firebase.firestore.FieldValue.serverTimestamp();
              const baseMsg = {
                chatID: messageId,
                message: sendmsg,
                receiverId,
                seen: true,
                senderId,
                timestamp,
                type:'text'
              };
              const inboxObj = {
                archived:false,
                mediaUrl:'',
                receiverId,
                lastMessage:sendmsg,
                seen:true,
                senderId,
                timestamp,
                type:'text'
              };
              const batch = db.batch();
              batch.set(db.collection('chat').doc(senderId).collection(receiverId).doc(messageId), baseMsg);
              batch.set(db.collection('chat').doc(receiverId).collection(senderId).doc(messageId), baseMsg);
              batch.set(db.collection('chat').doc(senderId).collection('inbox').doc(receiverId), inboxObj);
              batch.set(db.collection('chat').doc(receiverId).collection('inbox').doc(senderId), inboxObj);
              try{
                await batch.commit();
                showToast('{{trans("lang.msg_sent_success_msg")}}','success');
              }catch(e){
                console.error(e);
                // alert('{{trans("lang.message_send_failed")}}');
                 showMessage('{{trans("lang.message_send_failed")}}','error');
              }
            });

            // IMPLEMENTATION (verification badge logic)
            const verified = !!driverData.isVerify;
            const vIcon = `<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`;
            const uIcon = `<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>`;
            $('#driverVerificationStatus')
              .removeClass('verified unverified')
              .addClass(verified ? 'verified':'unverified')
              .html((verified ? vIcon : uIcon)+' '+(verified ? `@lang('lang.verified')` : `@lang('lang.unverified')`));
          });

        // Vehicle info
        if(bookingData.vehicleInformation){
          const vi = bookingData.vehicleInformation;
          $('#vehicleInfo').text(`${vi.vehicleBrand.name} ${vi.vehicleModel.name} (${vi.vehicleRegistrationYear})`);
          $('#vehicleTypeColor').text(`${vi.vehicleType.name} • ${vi.vehicleColor}`);
          $('#licensePlate').text(vi.licensePlatNumber);
          const vehicleImages = vi.vehicleImages || [];
          const section = $('#vehicleImageSection').empty();
          if(vehicleImages.length){
            let html = `<h2 class="text-white text-lg font-semibold mb-3">{{trans('lang.vehicle_images')}}</h2>
              <div class="flex gap-3 items-center overflow-x-auto bg-gray-800 p-3 rounded-lg border border-gray-700">`;
            vehicleImages.forEach((url,i)=>{
              html += `<img src="${url}" alt="Vehicle Image ${i+1}" class="h-32 w-32 object-cover rounded-md border border-gray-600 p-1">`;
            });
            html += `</div>`;
            section.html(html);
          }else{
            section.html(`
              <h2 class="text-white text-lg font-semibold mb-3">{{trans('lang.vehicle_images')}}</h2>
              <div class="w-full h-32 flex items-center justify-center bg-gray-700 rounded-lg border border-gray-600">
                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2z"/>
                </svg>
              </div>
            `);
          }
        }
      })
      .catch(err=>{
       
        $('#bookingDetails').html('<div class="text-center py-8"><h2 class="text-xl font-semibold mb-2">{{trans("lang.booking_error_title")}}</h2><p class="text-gray-400">{{trans("lang.booking_error_message")}}</p></div>');
      });
  });
})();
</script>
@endsection