@extends('layouts.app')

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

@section('content')
<main class="main-content detail-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 align-items-center justify-content-between items-center px-4 py-4">
    <h1 class="text-lg font-semibold">@lang('lang.ride_details')</h1>
      <div class="checkbox-with-content flex align-items-center gap-2 publish-div d-none">
        <span>{{trans('lang.publish')}}</span>
        <label class="switch mb-0"><input type="checkbox" id="{{$id}}" name="isActive"><span class="slider round"></span></label>
      </div>
     </div>
</div>

  <!-- Route Section -->
  <div class="px-4 py-4 bg-gray-900">
    <div class="space-y-4">

      <!-- Pickup Location -->
      <div class="flex items-start ride-loc-root">
        <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" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-1">
              <polygon points="3 11 22 2 13 21 11 13 3 11"/>
            </svg>
            <span>@lang('lang.based_on_selected_pickup')</span>
          </div>
        </div>
        <div class="ride-loc-btn ride-start-btn">
          <a href="#" class="btn ride-action btn-success" data-type="start">{{ __('lang.start') }}</a>
        </div>
      </div>

      <!-- Stop Over Location -->
      <div id="allStops"></div>

      <!-- Drop Location -->
      <div class="flex items-start ride-loc-root last">
        <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" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-1">
              <polygon points="3 11 22 2 13 21 11 13 3 11"/>
            </svg>
            <span>@lang('lang.based_on_selected_drop')</span>
          </div>
        </div>
        <div class="ride-loc-btn ride-end-btn">
          <a href="#" class="btn ride-action btn-success" data-type="end">{{ __('lang.reached') }}</a>
        </div>
      </div>

    </div>
  </div>

  <!-- Seats and 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;

  <!-- Booked Users -->
  <div class="px-4 py-3 bg-gray-800 border-b border-gray-700 cursor-pointer" id="bookedUserInfoToggle">
    <div class="flex justify-between items-center">
      <span class="text-gray-300 font-medium">@lang('lang.booked_user_information')</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="bookedUserInfoChevron" class="w-5 h-5 text-gray-400 transition-transform">
        <polyline points="9 18 15 12 9 6"/>
      </svg>
    </div>
  </div>
  <div class="px-4 py-4 bg-gray-800 border-b border-gray-700 space-y-3 hidden" id="bookedUserInfoDetails">
    <div class="text-sm text-gray-300 space-y-2 border-b border-gray-700 pb-4 mb-4">
      <table class="ride-table w-full text-left text-sm">
        <tr>
          <th>@lang('lang.name')</th>
          <th>@lang('lang.number')</th>
          <th>@lang('lang.booked_seats')</th>
          <th>@lang('lang.payment_type')</th>
          <th>@lang('lang.payment_status')</th>
          <th>@lang('lang.subtotal')</th>
          <th>@lang('lang.from')</th>
          <th>@lang('lang.to')</th>
          <th>@lang('lang.total_distance')</th>
          <th>@lang('lang.rating_reviews')</th>  
          <th>@lang('lang.action')</th>
          <th>@lang('lang.contact')</th>
        </tr>
        <tbody id="bookedUserInfoContent"></tbody>
      </table>
    </div>
  </div>  

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

  <div class="px-4 py-4 bg-gray-800 border-b border-gray-700 space-y-3 hidden" id="driverInfoDetails">
    <div class="flex items-center text-gray-300">
      <div class="px-4 py-4 bg-gray-800 border-y border-gray-700 w-full">
        <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 src="{{ asset('images/default_icon_user.png') }}" id="driverImage" alt="User" class="w-10 h-10 object-cover">
              </div>
              <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-gray-500 rounded-full flex items-center justify-center" id="driverVerifyBadge">
                <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                  <line x1="8" y1="12" x2="16" y2="12"/>
                </svg>
              </div>
            </div>
            <div class="ml-3">
              <!-- CORRECTIF: wrapper + badge -->
              <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">
                <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">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 ml-2 text-white">
                <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">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 ml-2 text-white">
                <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 xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 mr-3 text-gray-400">
            <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>

        <!-- Vehicle Type and Color -->
        <div class="mt-2 flex items-center text-gray-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 mr-3 text-gray-400">
            <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>

        <!-- License Plate -->
        <div class="mt-2 flex items-center text-gray-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 mr-3 text-gray-400">
            <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>

        <!-- Preferences -->
        <div class="mt-4">
          <h4 class="text-gray-400 text-sm mb-2">{{ __('lang.travel_preferences') }}</h4>
            <div class="d-block items-center space-x-6">
              <div class="flex flex-col items-center mb-1" id="chattinessPreference">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <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 mt-1 chattinessPreference"></span>
              </div>
              <div class="flex flex-col items-center mb-1" id="musicPreference">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <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 mt-1 musicPreference"></span>
              </div>
              <div class="flex flex-col items-center mb-1" id="petsPreference">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <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 mt-1 petsPreference"></span>
              </div>
              <div class="flex flex-col items-center mb-1" id="smokingPreference">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <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 mt-1 smokingPreference"></span>
              </div>
            </div>
        </div>
      </div>

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

  &nbsp;

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

  <!-- Trip Info -->
  <div class="px-4 py-4 bg-gray-800 border-b border-gray-700 space-y-3 hidden" id="tripInfoDetails">
    <div class="flex items-center text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5 mr-3 text-gray-400">
        <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 class="text-xs text-gray-400" id="createdAt">@lang('lang.posted_on'): {{ __('lang.loading') }}</div>
      </div>
    </div>
    <div class="flex items-center text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5 mr-3 text-gray-400">
        <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 xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-3 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" 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 xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-3 text-rose-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" 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 xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5 mr-3 text-gray-400">
        <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" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5 mr-3 text-gray-400">
        <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 xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5 mr-3 text-gray-400">
        <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 class="mt-4">
          <h4 class="text-gray-400 text-sm mb-2 travel-title">{{ __('lang.travel_preferences') }}</h4>
            <div class="d-block items-center space-x-6">
              <div class="flex flex-col items-center mb-1" id="chattinessPreference">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <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  chattinessPreference"></span>
              </div>
              <div class="flex flex-col items-center mb-1" id="musicPreference">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <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  musicPreference"></span>
              </div>
              <div class="flex flex-col items-center mb-1" id="petsPreference">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <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  petsPreference"></span>
              </div>
              <div class="flex flex-col items-center mb-1" id="smokingPreference">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                  <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  smokingPreference"></span>
              </div>
            </div>
        </div>
  </div>

  &nbsp;&nbsp;

</div>
</main>

<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 type="text" id="ridePaymentAmount" class="form-control" placeholder="@lang('lang.enter_amount')">
      </div>
      <div class="form-group">
        <label>@lang('lang.payment_method')</label>
        <div class="payment-methods" id="paymentMethods"></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>

<div class="modal" id="reportModal">
  <div class="modal-content">
    <div class="modal-header">
      <h3 id="reportModalTitle">{{ __('lang.report') }}</h3>
      <button class="modal-close-btn report-close-btn">&times;</button>
    </div>
    <div class="modal-body">
      <div class="form-group mb-4">
        <label for="reportReason" class="form-label">{{ __('lang.select_reason') }}</label>
        <select class="form-control bg-gray-700 border-gray-600" id="reportReason" required>
          <option value="" disabled selected>{{ __('lang.choose_a_reason') }}</option>
        </select>
      </div>

      <div class="form-group mb-4">
        <label for="reportDescription" class="form-label">{{ __('lang.description_or_details') }}</label>
        <textarea class="form-control bg-gray-700 border-gray-600" id="reportDescription" rows="4" 
                  placeholder="{{ __('lang.please_describe_the_issue') }}" required></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary report-close-btn">{{ __('lang.cancel') }}</button>
      <button class="btn btn-primary" id="submitReportBtn">{{ __('lang.submit_report') }}</button>
    </div>
  </div>
</div>

<div class="modal fade" id="review-modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none">
  <div class="modal-content">
      <div class="modal-header">
        <h3 id="paymentModalTitle">{{trans('lang.add_review')}}</h3>
        <button class="modal-close-btn">&times;</button>
      </div>
      <div class="modal-body">
                <div class="modal-body-inner">
                    <div class="review-box">
                        <div class="form-group row" id="default_review">
                            <div class="col-sm-12">
                                <div class="rating-wrap d-flex align-items-center mt-4 mb-3">
                                  <label><h4>{{trans('lang.rate')}}</h4></label>
                                  <fieldset class="rating" id="rating-fieldset">
                                    <!-- Highest rating LEFT, lowest RIGHT -->
                                    <input type="radio" id="star5"   name="rating" value="5"   /><label for="star5"   class="full" title="5 stars"></label>
                                    <input type="radio" id="star4.5" name="rating" value="4.5" /><label for="star4.5" class="half" title="4.5 stars"></label>
                                    <input type="radio" id="star4"   name="rating" value="4"   /><label for="star4"   class="full" title="4 stars"></label>
                                    <input type="radio" id="star3.5" name="rating" value="3.5" /><label for="star3.5" class="half" title="3.5 stars"></label>
                                    <input type="radio" id="star3"   name="rating" value="3"   /><label for="star3"   class="full" title="3 stars"></label>
                                    <input type="radio" id="star2.5" name="rating" value="2.5" /><label for="star2.5" class="half" title="2.5 stars"></label>
                                    <input type="radio" id="star2"   name="rating" value="2"   /><label for="star2"   class="full" title="2 stars"></label>
                                    <input type="radio" id="star1.5" name="rating" value="1.5" /><label for="star1.5" class="half" title="1.5 stars"></label>
                                    <input type="radio" id="star1"   name="rating" value="1"   /><label for="star1"   class="full" title="1 star"></label>
                                    <input type="radio" id="star0.5" name="rating" value="0.5" /><label for="star0.5" class="half" title="0.5 stars"></label>
                                </fieldset>
                              </div>
                            </div>
                        </div>
                        <div class="form-group row text-center">
                            <div class="col-sm-12">
                                <textarea class="form-control review_comment" id="review_comment" name="review_comment"
                                          placeholder="{{trans('lang.comment')}}" value=""></textarea>
                            </div>
                        </div>
                        <div class="review-sub-btn mt-4">
                            <button type="button" class="btn btn-primary add_review_btn text-center"
                                    data-parent="modal-body">{{trans('lang.add_review')}}</button>
                        </div>
                    </div>
                </div>
      </div>
  </div>
</div>
<!-- Reviews Modal - Driver sees reviews written BY this passenger -->
<div class="modal" id="passengerReviewsModal">
  <div class="modal-content" style="max-width: 500px; width: 92%;">
    <div class="modal-header">
      <h3 id="passengerReviewsTitle">{{ __('lang.reviews_from') }} <span id="passengerName"></span></h3>
      <button class="modal-close-btn" id="closePassengerReviews">&times;</button>
    </div>
   
    <div class="modal-body" style="max-height: 65vh; overflow-y: auto; padding: 1.5rem;">
     
      <div id="passengerReviewsList">
        <div class="text-center py-8 text-gray-400" id="passengerReviewsLoading">
          {{ __('lang.loading') }}...
        </div>
      </div>
    </div>
   
    <div class="modal-footer">
      <button class="btn btn-secondary modal-close-btn" id="closePassengerReviewsBtn">
        {{ __('lang.close') }}
      </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;
  background:#6b7280;
  color:#fff;
  line-height:1;
}
.driver-verify-badge.verified{background:#059669}
.driver-verify-badge.unverified{background:#6b7280}
.driver-verify-badge svg{width:14px;height:14px}
.review-stars-display {
  direction: rtl; /* Important: makes stars fill from right to left */
  font-size: 1.6rem; /* Adjust size as needed */
  unicode-bidi: bidi-override;
  white-space: nowrap;
}

.review-stars-display .star {
  color: #6b7280; /* gray-500 - empty/unselected */
  display: inline-block;
  position: relative;
}

.review-stars-display .star.full {
  color: #f5b301; /* your selected yellow */
}

.review-stars-display .star.half {
  color: #6b7280; /* base gray */
}

.review-stars-display .star.half::after {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: #f5b301;
  width: 50%;
  overflow: hidden;
  direction: ltr; /* force left-to-right for the half fill */
}
</style>
@endsection

@section('script')
<script>
var total = 0;
var pricePerSeat = 0;
var recommendedPrice = 0;
var userLocation = [];
var finalStopOver = [];
var finalRecommendedPrice = 0;

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

$(document).on("change", "input[name='isActive']", async function (e) {
    const checkbox = $(this);
    const isChecked = checkbox.is(':checked');
    const bookingId = "{{$id}}";

    checkbox.prop('disabled', true);

    try {
        const bookingRef = db.collection('booking').doc(bookingId);

        await bookingRef.update({
            publish: isChecked,
        });

        if (!isChecked) {
            await bookingRef.update({
                bookedUserId: [],
                cancelledUserId: [],
                bookedSeat: "0"
            });

            const subSnapshot = await bookingRef.collection('bookedUser').get();

            let batch = db.batch();

            subSnapshot.forEach(doc => {
                batch.delete(doc.ref);
            });

            await batch.commit();
            const cancelledSnapshot = await bookingRef.collection('cancelledUser').get();

            batch = db.batch();
            cancelledSnapshot.forEach(doc => {
                batch.delete(doc.ref);
            });
            await batch.commit();
        }

        checkbox.prop('disabled', false);

        showMessage(
            isChecked ? "Ride is now published" : "Ride is now unpublished",
            isChecked ? "success" : "info"
        );
        setTimeout(() => {
            location.reload();
        }, 100);

    } catch (err) {
        console.error("Failed to update publish status:", err);

        checkbox.prop('checked', !isChecked);
        checkbox.prop('disabled', false);

        showMessage('{{trans("lang.something_went_wrong")}}', 'error');
    }
});

$(document).ready(async function() {
  await fetchDistanceSettings();

  $('#tripInfoToggle').on('click', function(){ $('#tripInfoDetails').toggleClass('hidden'); $('#tripInfoChevron').toggleClass('rotate-90'); });
  $('#driverInfoToggle').on('click', function(){ $('#driverInfoDetails').toggleClass('hidden'); $('#driverInfoChevron').toggleClass('rotate-90'); });
  $('#bookedUserInfoToggle').on('click', function(){ $('#bookedUserInfoDetails').toggleClass('hidden'); $('#bookedUserInfoChevron').toggleClass('rotate-90'); });

  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){ return Math.round(parseInt(m)/1000)+' 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 capitalizeFirstLetter(s){ return s? s.charAt(0).toUpperCase()+s.slice(1):''; }

  db.collection('booking').doc("{{$id}}").get().then(async (docSnap)=>{
    if(!docSnap.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">...</p></div>');
      return;
    }
    const bookingData = docSnap.data();

    if(bookingData.status === 'placed'){
      $('.publish-div').removeClass('d-none');
    }else{
      $('.publish-div').addClass('d-none');
    }    

    const isPublished = bookingData.publish === true;
    $('#' + "{{$id}}").prop('checked', isPublished);

   
    db.collection('booking').doc("{{$id}}").collection('bookedUser').get().then(async (qs)=>{

      if(qs.empty){
        $('#bookedUserInfoContent').html('<tr><td colspan="9" class="text-center text-gray-400 py-3">{{trans("lang.no_data_found")}}</td></tr>');
        return;
      }
      let html='';
      for(const d of qs.docs){
        const bu = d.data();
        const uRef = await db.collection('users').doc(bu.id).get();
        const u = uRef.data();
        const name = `${u.firstName} ${u.lastName}`;
        const phone = `${u.countryCode} ${u.phoneNumber}`;
        const totalDistance = Number(bu.stopOver?.distance?.value) || 0;
        var addReviewBtn = '';
        if(bu.paymentStatus===true){
          addReviewBtn =  `<button class="add-review w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-5 rounded-xl transition-colors duration-200 text-sm btn-b-0" data-user-id="${bu.id}">
                  @lang('lang.add_review')
            </button>`;
        }
       
        const reviewCount = parseInt(u.reviewCount || 0);
        const reviewSum   = parseFloat(u.reviewSum   || 0);
        const totalDistanceDisplay = (Number(bu.stopOver?.distance?.value) || 0) / 1000;
        const distanceDisplay = formatDistanceByAdminASettings(totalDistanceDisplay);
        const avgRating   = reviewCount > 0 ? (reviewSum / reviewCount).toFixed(1) : "0";
        const ratingHtml = reviewCount > 0 
          ? `
            <div class="flex items-center text-sm text-gray-300 whitespace-nowrap">
              <span class="text-yellow-400 mr-1 text-base">★</span>
              <span class="font-medium mr-2">${avgRating}</span>
              <span class="text-orange-400 underline cursor-pointer hover:text-orange-300 transition-colors view-passenger-reviews"
                    data-user-id="${bu.id}"
                    data-name="${name}">
                <span>${reviewCount}</span> {{ __('lang.ratings') }}
              </span>
            </div>
          `
          : `
            <span class="text-gray-500 text-sm">—</span>
          `;
        html += `<tr>
          <td>${name}</td>
          <td>${phone}</td>
          <td>${bu.bookedSeat}</td>
          <td>${bu.paymentType}</td>
          <td>${bu.paymentStatus ? '{{trans("lang.paid")}}':'{{trans("lang.unpaid")}}'}</td>
          <td>${formatCurrency(bu.subTotal)}</td>
          <td>${bu.stopOver?.start_address||'N/A'}</td>
          <td>${bu.stopOver?.end_address||'N/A'}</td>
          <td>${distanceDisplay}</td>
          <td>
            ${ratingHtml}
          </td>
          <td>
            <button 
              class="report-btn w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-5 rounded-xl transition-colors duration-200 text-sm btn-b-0"
              data-user-id="${bu.id}">   
              @lang('lang.report')
            </button>   
            ${addReviewBtn}         
          </td>
          <td>
            <div class="flex items-center justify-center gap-2">
              <!-- Phone / Call button -->
              <button class="passenger-call-btn w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors"
                data-user-id="${bu.id}"
                data-phone="${phone}"
                title="Call passenger">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                  <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>

              <!-- Chat button -->
              <button class="passenger-chat-btn w-8 h-8 bg-green-600 rounded-full flex items-center justify-center hover:bg-green-700 transition-colors"
                data-user-id="${bu.id}"
                title="Chat with passenger">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                  <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>
          </td>
        </tr>`;
      }
      $('#bookedUserInfoContent').html(html);
    });    

    // Stops
    let allStopsHtml='';
    if(Array.isArray(bookingData.stopOver)){
      bookingData.stopOver.forEach((stop,index)=>{
        const isArrived = stop.isArrived === true;
        allStopsHtml += `
          <div class="flex items-start ride-loc-root">
            <div class="w-3 h-3 ${isArrived?'bg-green-500':'bg-yellow-500'} rounded-full mt-2 flex-shrink-0"></div>
            <div class="ml-4 flex-1">
              <div class="text-yellow-400 font-medium text-lg mb-1">${stop.name||'N/A'}</div>
              <div class="text-gray-400 text-sm mb-2">${stop.address||'N/A'}</div>
            </div>
            <div class="ride-loc-btn">
              ${isArrived?'<span class="text-green-400 font-medium text-sm">{{trans("lang.arrived")}}</span>':`<a href="#" class="btn ride-action btn-success" data-index="${index}" data-type="stop">{{trans("lang.arrived")}}</a>`}
            </div>
          </div>`;
      });
    }
    $('#allStops').html(allStopsHtml);

    if(bookingData.status!=='placed'){
      $('.ride-start-btn').html('<span class="text-green-400 font-medium text-sm">{{trans("lang.started")}}</span>');
    }
    if(bookingData.status==='completed'){
      $('.ride-end-btn').html('<span class="text-green-400 font-medium text-sm">{{trans("lang.completed")}}</span>');
    }

    $('#pickupCity').text(bookingData.pickUpAddress);
    $('#pickupAddress').text(bookingData.pickUpAddress);
    $('#dropCity').text(bookingData.dropAddress);
    $('#dropAddress').text(bookingData.dropAddress);

    $('.pricePerSeat').text(formatCurrency(bookingData.pricePerSeat));
    $('.availableSeats').text(bookingData.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);
    const distanceInKm = parseFloat(bookingData.distance) / 1000;
    $('#distance').text(formatDistanceByAdminASettings(distanceInKm));

    $('#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')"
    );

    // Driver info
    db.collection('users').doc(bookingData.createdBy).get().then(userDoc=>{
      if(!userDoc.exists){
        $('#driverName').text('Unknown');
        return;
      }
      const driverData = userDoc.data();
      $('#driverName').text(`${driverData.firstName||''} ${driverData.lastName||''}`.trim());
      if(driverData.profilePic) $('#driverImage').attr('src', driverData.profilePic);
      const reviewCount = parseInt(driverData.reviewCount)||0;
      const reviewSum = parseFloat(driverData.reviewSum)||0;
      $('#reviewCount').text(reviewCount);
      $('#totalRating').text(reviewCount>0 ? (reviewSum/reviewCount).toFixed(1) : '0');

      if(driverData.travelPreference){
        $('.travel-title').show();        
        if (!driverData.travelPreference.chattiness){
          $('#chattinessPreference').hide();
        } else {
          $('#chattinessPreference').show();
          $('.chattinessPreference').text(driverData.travelPreference.chattiness);
        }
          if (!driverData.travelPreference.music){
            $('#musicPreference').hide();
          } else {
            $('#musicPreference').show();
            $('.musicPreference').text(driverData.travelPreference.music);
          }
  
          if (!driverData.travelPreference.pets){
            $('#petsPreference').hide();
          } else {
            $('#petsPreference').show();
            $('.petsPreference').text(driverData.travelPreference.pets);
          }
  
          if (!driverData.travelPreference.smoking){
            $('#smokingPreference').hide();
          } else {
            $('#smokingPreference').show();
            $('.smokingPreference').text(driverData.travelPreference.smoking);
          }
      }
      else{
        $('.travel-title').hide();
        $('#chattinessPreference, #musicPreference, #petsPreference, #smokingPreference').hide();
      }

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

      $('.driver-chat-button').off('click').on('click', async function(){
        const sendmsg = prompt("@lang('lang.enter_message')");
        if(!sendmsg) return;
        const senderId = firebaseUid;
        const receiverId = driverData.id;
        const messageId = db.collection('messages').doc().id;
        const timestamp = firebase.firestore.FieldValue.serverTimestamp();
        const msg = {
          chatID: messageId,
          message: sendmsg,
          receiverId,
          seen: true,
          senderId,
          timestamp,
          type: "text"
        };
        const inbox = {
          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), msg);
        batch.set(db.collection('chat').doc(receiverId).collection(senderId).doc(messageId), msg);
        batch.set(db.collection('chat').doc(senderId).collection('inbox').doc(receiverId), inbox);
        batch.set(db.collection('chat').doc(receiverId).collection('inbox').doc(senderId), inbox);
        try{
          await batch.commit();
          showToast('{{trans("lang.message_sent_success")}}','success');
        }catch(e){
          console.error(e);
            showMessage('{{trans("lang.message_send_failed")}}', 'error');
        }
      });

      // CORRECTIF: vérification / badge
      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')`));
      if(verified){
        $('#driverVerifyBadge')
          .removeClass('bg-gray-500').addClass('bg-green-500')
          .html('<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg>');
      }else{
        $('#driverVerifyBadge')
          .removeClass('bg-green-500').addClass('bg-gray-500')
          .html('<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="8" y1="12" x2="16" y2="12"/></svg>');
      }
    });

    // Vehicle info
    if(bookingData.vehicleInformation){
      const v = bookingData.vehicleInformation;
      $('#vehicleInfo').text(`${v.vehicleBrand.name} ${v.vehicleModel.name} (${v.vehicleRegistrationYear})`);
      $('#vehicleTypeColor').text(`${v.vehicleType.name} • ${v.vehicleColor}`);
      $('#licensePlate').text(v.licensePlatNumber);
      const imgs = v.vehicleImages || [];
      const section = $('#vehicleImageSection').empty();
      if(imgs.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" style="height:132px;">`;
        imgs.forEach((u,i)=>{
          html += `<img src="${u}" alt="Vehicle ${i+1}" class="h-3 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-2 1.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 2v12a2 2 0 002 2z"/>
            </svg>
          </div>
        `);
      }
    }

  }).catch(err=>{
    console.error(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>');
  });
});

// Ride actions
$(document).on('click', '.ride-action', async function(e){
  e.preventDefault();
  const type = $(this).data('type');
  const index = $(this).data('index');
  const bookingRef = db.collection('booking').doc("{{$id}}");

  if(type==='start'){
    if(confirm('{{trans("lang.start_this_ride")}}')){
      try{
        await bookingRef.update({status:'onGoing', 'pickupLocation.isArrived': true});       
       
        await sendNextStopNotification("{{$id}}", null);
       showMessage('{{trans("lang.ride_marked_as_ongoing")}}', 'success');
        location.reload();
      }catch(err){ console.error(err); showMessage('{{trans("lang.something_went_wrong")}}', 'error'); }
    }
  }
    else if(type === 'end') {
      if(!confirm('{{trans("lang.end_this_ride")}}')) return;
  
      try {
          const bookingRef = db.collection('booking').doc("{{$id}}");
          const bookedSnap = await bookingRef.collection('bookedUser').get();
          
          // Check for any unpaid users
          let hasUnpaid = false;
          bookedSnap.forEach(d => {
              if (!d.data().paymentStatus) hasUnpaid = true;
          });
          
          if (hasUnpaid) {
              if (!confirm('{{trans("lang.some_users_havenot_paid_continue_anyway")}}')) {
                  return;
              }
          }
          
          // Process each cash payment individually with user names
          for (const d of bookedSnap.docs) {
              const data = d.data();
              
              // Only process CASH payments here
              if (data.paymentType === 'Cash' && !data.paymentStatus) {
                  
                  // Get user details for the booked user
                  const userSnap = await db.collection('users').doc(data.id).get();
                  let userName = 'Unknown User';
                  
                  if (userSnap.exists) {
                      const userData = userSnap.data();
                      userName = `${userData.firstName || ''} ${userData.lastName || ''}`.trim() || 'Unknown User';
                  }
                  
                  const payableAmount = parseFloat(data.subTotal || 0);
                  let adminCommission = 0;
                  
                  // Calculate commission for this specific user
                  if (data.adminCommission && data.adminCommission.enable) {
                      adminCommission = data.adminCommission.type === 'percentage'
                          ? (parseFloat(data.adminCommission.amount) * payableAmount) / 100
                          : parseFloat(data.adminCommission.amount);
                  }
                  
                  if (payableAmount > 0) {
                      const [userDoc, bDoc] = await Promise.all([
                          db.collection('users').doc(firebaseUid).get(),
                          bookingRef.get()
                      ]);
                      
                      if (!userDoc.exists || !bDoc.exists) {
                          showMessage('{{trans("lang.user_or_booking_not_found")}}', 'error');
                          continue;
                      }
                      
                      const userData = userDoc.data();
                      const bookingData = bDoc.data();
                      const currentWallet = parseFloat(userData.walletAmount || 0);
                      
                      // Driver credit transaction with user name
                      const pubTxnRef = db.collection('wallet_transaction').doc();
                      await pubTxnRef.set({
                          id: pubTxnRef.id,
                          userId: firebaseUid,
                          type: 'publisher',
                          isCredit: true,
                          amount: payableAmount.toFixed(2),
                          paymentType: 'Cash',
                          note: `Amount credited for ${userName}`,
                          transactionId: pubTxnRef.id,
                          createdDate: firebase.firestore.Timestamp.now()
                      });
                      
                      // Update wallet with full amount first
                      let updatedWallet = currentWallet + payableAmount;
                      
                      // Admin commission debit if applicable (with user name)
                      if (adminCommission > 0) {
                          const adminTxnRef = db.collection('wallet_transaction').doc();
                          await adminTxnRef.set({
                              id: adminTxnRef.id,
                              userId: firebaseUid,
                              type: 'publisher',
                              isCredit: false,
                              amount: '-' + adminCommission.toFixed(2),
                              paymentType: 'Cash',
                              note: `Admin commission deducted for ${userName}`,
                              transactionId: adminTxnRef.id,
                              createdDate: firebase.firestore.Timestamp.now()
                          });
                          
                          updatedWallet = updatedWallet - adminCommission;
                      }
                      
                      // Update wallet with net amount
                      await db.collection('users').doc(firebaseUid).update({
                          walletAmount: updatedWallet.toFixed(2)
                      });
                      
                      // Mark this specific cash payment as paid
                      await bookingRef.collection('bookedUser').doc(data.id).update({
                          paymentStatus: true,
                          paidAt: firebase.firestore.Timestamp.now()
                      });
                  }
              }
          }
          
          // Mark ride as completed
          await bookingRef.update({ status: 'completed', 'dropLocation.isArrived': true });
          
          showMessage('{{trans("lang.ride_marked_as_completed")}}', 'success');
          location.reload();
          
      } catch(err) { 
          console.error(err); 
          showMessage('{{trans("lang.something_went_wrong")}}', 'error'); 
      }
    }
    else if(type==='stop'){
    if(typeof index==='undefined'){ showMessage('{{trans("lang.invalid_stop_index")}}', 'error'); return; }
    if(confirm(`{{trans('lang.mark_stop')}} ${index+1} {{trans('lang.as_arrived')}}`)){
      try{
        const snap = await bookingRef.get();
        if(!snap.exists){ showMessage('{{trans("lang.ride_not_found")}}', 'error'); return; }
        const data = snap.data();
        let stopOver = data.stopOver || [];
        if(!Array.isArray(stopOver) || index >= stopOver.length){ showMessage('{{trans("lang.invalid_stop_index")}}', 'error'); return; }
        stopOver[index].isArrived = true;
        await bookingRef.update({stopOver});
        await sendNextStopNotification("{{$id}}", index);
        showMessage(`{{trans('lang.stop')}} ${index+1} {{trans('lang.marked_as_arrived')}}`, 'success');
        location.reload();
      }catch(err){ console.error(err); showMessage('{{trans("lang.something_went_wrong")}}', 'error'); }
    }
  }else{
    showMessage('{{trans("lang.something_went_wrong")}}', 'error');
  }
});

function loadReportReasons() {
    const reasonSelect = $('#reportReason');
    reasonSelect.html('<option value="" disabled selected>Loading reasons...</option>');

    db.collection('settings').doc('reasons').get()
        .then((doc) => {
            if (doc.exists) {
                const data = doc.data();
                const publisherReasons = data.publisher || [];

                reasonSelect.html('<option value="" disabled selected>{{ __('lang.choose_a_reason') }}</option>');

                if (publisherReasons.length === 0) {
                    reasonSelect.append('<option disabled>{{trans("lang.no_reasons_available")}}</option>');
                    showMessage("{{trans('lang.no_reasons_found_in_database')}}", "warning");
                } else {
                    publisherReasons.forEach(reason => {
                        reasonSelect.append(`<option value="${reason}">${reason}</option>`);
                    });
                }
            } else {
                showMessage("{{trans('lang.settings_reasons_document_does_not_exist')}}", "danger");
            }
        })
        .catch((error) => {
            console.error("Error fetching reasons:", error);
            showMessage("{{trans('lang.failed_to_load_reasons')}} " + error.message, "danger");
        });
}

let currentReportedUserId = null;
$(document).on('click', '#bookedUserInfoContent .report-btn', function () {   
    
    const row = $(this).closest('tr');   
    currentReportedUserId = $(this).data('user-id');

    if (!currentReportedUserId) {
      showMessage("{{trans('lang.cannot_identify_user_to_report_please_try_again')}}", "error");
      return;
    }
    // Open modal
    $('#reportModal').addClass('show').css('display', 'flex');
    $('body').addClass('modal-open').css('overflow', 'hidden');
    $('#reportModalTitle').text(`{{ __('lang.report_user') }}`);

    loadReportReasons();
});

// Close modal 
$('.report-close-btn').on('click', function () {
    $('#reportModal').removeClass('show').css('display', 'none');
    $('body').removeClass('modal-open').css('overflow', '');
    $('#reportReason').val('');
    $('#reportDescription').val('');
    currentReportedUserId = null;   
});

// Submit report 
$('#submitReportBtn').on('click', async function () {
    const reason = $('#reportReason').val();
    const description = $('#reportDescription').val().trim();

    if (!reason) return showMessage("{{trans('lang.please_select_a_reason')}}", "warning");
    if (!description) return showMessage("{{trans('lang.please_enter_description')}}", "warning");
    if (!currentReportedUserId) {
        showMessage("No user selected for reporting.", "warning");
        return;
    }

    $(this).prop('disabled', true).text("{{trans('lang.submitting')}}");

    try {
        const reportRef = db.collection('reports_help').doc();

        await reportRef.set({
            id: reportRef.id,
            title: reason,
            description: description,
            reportedFrom: firebaseUid,               
            reportedTo: currentReportedUserId,        
            status: "Pending",
            bookingId: "{{$id}}",                    
        });

        showMessage("{{trans('lang.report_placed_successfully')}}", "success");
        $('.report-close-btn').trigger('click');
    } catch (error) {
        console.error("Report submission failed:", error);
        showMessage("{{trans('lang.failed_to_submit_report_please_try_again')}}", "danger");
    } finally {
        $(this).prop('disabled', false).text('{{ __('lang.submit_report') }}');
    }
});

let currentReviewTargetId = null;    
let existingReviewId = null;          
var bookingId =  "{{$id}}";

// Reusable function to load existing review
async function loadExistingReview(targetUserId) {
    if (!firebaseUid || !bookingId || !targetUserId) return;

    try {
        const snap = await db.collection('review')
            .where('sender_id', '==', firebaseUid)
            .where('booking_id', '==', bookingId)
            .where('receiver_id', '==', targetUserId)
            .limit(1)
            .get();

        if (!snap.empty) {
            const doc = snap.docs[0];
            const data = doc.data();
            existingReviewId = doc.id;

            // Normalize rating
            let rating = data.rating;
            if (typeof rating === 'number') {
                rating = rating.toFixed(1);
            } else if (typeof rating === 'string') {
                rating = parseFloat(rating).toFixed(1);
            } else {
                rating = "0";
            }
            if (rating.endsWith('.0')) {
                rating = rating.replace('.0', '');
            }

            const $radio = $(`input[name="rating"][value="${rating}"]`);
            if ($radio.length) {
                $radio.prop('checked', true);
            } else {
                console.warn(`No radio found for rating: ${rating}`);
            }

            $('#review_comment').val(data.comment || '');

            $('.add_review_btn')
                .text("{{trans('lang.update_review')}}");
                
        } else {
            existingReviewId = null;
            $('input[name="rating"]').prop('checked', false);
            $('#review_comment').val('');
            $('.add_review_btn')
                .text("{{trans('lang.add_review')}}")
                .removeClass('btn-success')
                .addClass('btn-primary');
        }
    } catch (err) {
        console.error("Failed to load review:", err);
    }
}

// Open review modal – now dynamic target
$(document).on('click', '.add-review', async function () {
    currentReviewTargetId = $(this).data('user-id');

    if (!currentReviewTargetId) {
        showMessage("{{trans('lang.cannot_identify_user_to_review')}}", "error");
        return;
    }

    $('#review-modal')
        .css({ display: 'flex' })
        .addClass('show');
    $('body').addClass('modal-open').css('overflow', 'hidden');

    // Reset & load existing review for this specific user
    await loadExistingReview(currentReviewTargetId);
});

// Submit / Update review
$('.add_review_btn').on('click', async function() {
    const ratingInput = $('input[name="rating"]:checked');
    const ratingNum = ratingInput.length ? parseFloat(ratingInput.val()) : 0;
    const comment = $('#review_comment').val().trim();

    if (ratingNum < 0.5) {
        showMessage("{{trans('lang.please_select_rating')}}", "danger");
        return;
    }
    if (!comment) {
        showMessage("{{trans('lang.please_write_comment')}}", "danger");
        return;
    }
    if (!currentReviewTargetId) {
        showMessage("{{trans('lang.no_user_selected_for_review')}}", "danger");
        return;
    }

    $(this).prop('disabled', true)
           .text(existingReviewId ? "{{trans('lang.updating')}}" : "{{trans('lang.saving')}}");

    try {
        const timestamp = firebase.firestore.FieldValue.serverTimestamp();
        const ratingString = ratingNum.toFixed(1);

        const reviewData = {
            booking_id: bookingId,
            comment: comment,
            date: timestamp,
            rating: ratingString,
            receiver_id: currentReviewTargetId,   
            sender_id: firebaseUid,
        };

        if (existingReviewId) {
            await db.collection('review').doc(existingReviewId).update(reviewData);
        } else {
            const newRef = db.collection('review').doc();
            await newRef.set({
                id: newRef.id,
                ...reviewData
            });
        }

        // Update receiver's stats (the person being reviewed)
        const receiverRef = db.collection('users').doc(currentReviewTargetId);

        await db.runTransaction(async (t) => {
            const receiverSnap = await t.get(receiverRef);
            if (!receiverSnap.exists) throw "User not found";

            let count = parseFloat(receiverSnap.data().reviewCount || "0");
            let sum   = parseFloat(receiverSnap.data().reviewSum   || "0");

            if (existingReviewId) {
                // For update → recalculate from all reviews (safest)
                const allReviews = await db.collection('review')
                    .where('receiver_id', '==', currentReviewTargetId)
                    .get();
                let newSum = 0;
                allReviews.forEach(r => {
                    if (r.id !== existingReviewId) {
                        newSum += parseFloat(r.data().rating || "0");
                    }
                });
                newSum += ratingNum;
                count = allReviews.size;
                sum = newSum;
            } else {
                count += 1;
                sum += ratingNum;
            }

            t.update(receiverRef, {
                reviewCount: count.toFixed(1),
                reviewSum:   sum.toFixed(1)
            });
        });

        showMessage(existingReviewId ? "{{trans('lang.review_updated_successfully')}}" : "{{trans('lang.review_submitted_successfully')}}", "success");
        closeReviewModal();
        location.reload(); // to refresh average rating if shown
    } catch (err) {
        console.error("Review error:", err);
        showMessage("{{trans('lang.failed_to_submit_review_please_try_again')}}", "error");
    } finally {
        $(this).prop('disabled', false)
               .text(existingReviewId ? "{{trans('lang.update_review')}}" : "{{trans('lang.add_review')}}");
    }
});

// Close review modal
function closeReviewModal() {
    $('#review-modal').removeClass('show').css('display', 'none');
    $('body').removeClass('modal-open').css('overflow', '');
    currentReviewTargetId = null;
    existingReviewId = null;
}

$('.modal-close-btn').on('click', function () {
    if ($(this).closest('#review-modal').length) {
        closeReviewModal();
    }
});
$(document).on('click', '.passenger-call-btn', function() {
  const phone = $(this).data('phone');
  if (phone && phone !== '—' && phone.trim().length > 3) {
    window.location.href = 'tel:' + phone;
  } else {
    showMessage('{{trans("lang.no_phone_number_available")}}', 'warning');
  }
});

$(document).on('click', '.passenger-chat-btn', function() {
  const receiverId = $(this).data('user-id');
  if (!receiverId) {
    showMessage('{{trans("lang.cannot_start_chat")}}', 'error');
    return;
  }

  window.location.href = `/inbox?conversation=${receiverId}`;

});
$(document).on('click', '.view-passenger-reviews', async function () {
  const passengerId = $(this).data('user-id');
  const passengerName = $(this).data('name') || 'Passenger';

  if (!passengerId) return;

  // Set title like show.blade (but personalized)
  $('#passengerReviewsTitle').html(`{{ __('lang.reviews') }} <strong>${passengerName}</strong>`);

  $('#passengerReviewsModal').addClass('show').css('display', 'flex');
  $('body').addClass('modal-open').css('overflow', 'hidden');

  const reviewsList   = $('#passengerReviewsList');
  const loading       = $('#passengerReviewsLoading');

  reviewsList.html('');
  loading.show();

  try {
    // Correct query: reviews WRITTEN BY this passenger ABOUT you (the driver)
    const querySnapshot = await db.collection('review')
      .where('receiver_id',   '==', passengerId)      
      .orderBy('date', 'desc')
      .get();

    loading.hide();

    if (querySnapshot.empty) {
      reviewsList.html(`
        <div class="text-center py-10 text-gray-400">
          <p class="text-lg">{{ __('lang.no_reviews_yet') }}</p>
        </div>
      `);     
      return;
    }

    let totalRating = 0;
    let count = 0;

    querySnapshot.forEach(doc => {
      const review = doc.data();
      const rating = parseFloat(review.rating || 0);
      totalRating += rating;
      count++;

      const full = Math.floor(rating);
      const hasHalf = (rating % 1) >= 0.5;

      let starsHtml = '<div class="review-stars-display inline-flex">';
      for (let i = 5; i >= 1; i--) {
        let className = 'star text-2xl leading-none';
        if (i <= full)      className += ' full';
        else if (i === full + 1 && hasHalf) className += ' half';
        starsHtml += `<span class="${className}">★</span>`;
      }
      starsHtml += '</div>';

      const dateStr = review.date?.seconds
        ? new Date(review.date.seconds * 1000).toLocaleDateString('en-US', {
            month: 'short', day: 'numeric', year: 'numeric'
          })
        : '—';

      const comment = (review.comment || '').trim() || '{{ __('lang.no_comment') }}';

      // Most important: show ride ID like in show.blade
      const rideId = review.booking_id || '—';
      const rideIdDisplay = rideId.length > 30 ? rideId.substring(0, 27) + '...' : rideId;

      // Exact same layout as show.blade
      const html = `
        <div class="border-b border-gray-700 pb-6 mb-6 last:border-b-0 last:pb-0 last:mb-0">
          <!-- Top row: Ride ID – Stars – Date -->
          <div class="flex flex-wrap items-center justify-between mb-3">
            <!-- Ride ID (left) -->
            <div class="text-sm text-gray-400 mt-2">
              {{ __('lang.ride_id') }}: 
              <span class="text-gray-200">${rideIdDisplay}</span>
            </div>
            <!-- Stars (center/right) -->
            <div class="flex items-center gap-2.5 order-3 sm:order-none">
              ${starsHtml}
            </div>
            <!-- Date (right) -->
            <div class="text-sm text-gray-500 order-2 sm:order-none">
              ${dateStr}
            </div>
          </div>
          <!-- Comment -->
          <p class="text-gray-200">${comment}</p>
        </div>
      `;
      reviewsList.append(html);
    });

    const avg = count > 0 ? (totalRating / count).toFixed(1) : '0';

  } catch (err) {
    console.error("Error loading passenger reviews:", err);
    loading.hide();
    reviewsList.html(`
      <div class="text-center py-10 text-red-400">
        <p>{{ __('lang.failed_to_load_reviews') }}</p>
      </div>
    `);
  }
});

function closePassengerReviewsModal() {
  $('#passengerReviewsModal').removeClass('show').css('display', 'none');
  $('body').removeClass('modal-open').css('overflow', '');
}

$('#closePassengerReviews, #closePassengerReviewsBtn, #passengerReviewsModal').on('click', function(e) {
  if (e.target === this || $(this).hasClass('modal-close-btn') || $(this).attr('id') === 'closePassengerReviewsBtn') {
    closePassengerReviewsModal();
  }
});
let distanceUnit = 'km';
let distanceLabel = 'km';

// Function to fetch distance settings from Firestore
async function fetchDistanceSettings() {
    try {
        const settingsDoc = await db.collection('settings').doc('globalKey').get();
        if (settingsDoc.exists) {
            const settings = settingsDoc.data();
          
            if (settings.distanceType === 'miles') {
                distanceUnit = 'miles';
                distanceLabel = 'miles';
            } else {
                distanceUnit = 'km';
                distanceLabel = 'km';
            }
        } else {
          
            distanceUnit = 'km';
            distanceLabel = 'km';
        }
     
    } catch (error) {
        console.error('Error fetching distance settings:', error);
        // Keep default km if error occurs
        distanceUnit = 'km';
        distanceLabel = 'km';
    }
}

// Function to convert km to miles if needed
function formatDistanceByAdminASettings(km) {
    if (!km && km !== 0) return 'N/A';
    
    if (distanceUnit === 'miles') {
        // Convert km to miles (1 km = 0.621371 miles)
        const miles = km * 0.621371;
        return `${Math.round(miles)} ${distanceLabel}`;
    } else {
        return `${Math.round(km)} ${distanceLabel}`;
    }
}
/**
 * Send "Your stop is next" notification to users whose pickup is the NEXT station
 */
async function sendNextStopNotification(bookingId, arrivedStopIndex = null) {
    try {
        const bookingRef = db.collection('booking').doc(bookingId);
        const bookingSnap = await bookingRef.get();
        if (!bookingSnap.exists) return;

        const bookingData = bookingSnap.data();
        const stopOver = bookingData.stopOver || [];

        let nextStopName = "";
        let nextStopLatLng = null;
        let isStartAction = (arrivedStopIndex === null);

        // Helper: Compare lat/long with tolerance
        function isSameLocation(loc1, loc2) {
            if (!loc1 || !loc2 || typeof loc1.lat !== 'number' || typeof loc2.lat !== 'number') 
                return false;
            const latDiff = Math.abs(loc1.lat - loc2.lat);
            const lngDiff = Math.abs(loc1.lng - loc2.lng);
            return latDiff < 0.003 && lngDiff < 0.003;   // ~300 meter tolerance
        }

        // Determine Next Stop's Lat/Lng
        if (isStartAction) {
            // Ride started → next is first stop or main pickup
            if (stopOver.length > 0 && stopOver[0].geometry?.location) {
                nextStopName = stopOver[0].name || stopOver[0].address;
                nextStopLatLng = stopOver[0].geometry.location;
            } else {
                nextStopName = bookingData.pickUpAddress;
                nextStopLatLng = bookingData.pickupLocation?.geometry?.location || bookingData.pickupLocation;
            }
          
        } 
        else {
            const nextIndex = arrivedStopIndex + 1;
            if (nextIndex < stopOver.length && stopOver[nextIndex].geometry?.location) {
                nextStopName = stopOver[nextIndex].name || stopOver[nextIndex].address;
                nextStopLatLng = stopOver[nextIndex].geometry.location;
            } else {
                nextStopName = bookingData.dropAddress;
                nextStopLatLng = bookingData.dropLocation?.geometry?.location || bookingData.dropLocation;
            }
          
        }

        // Get notification message
        const notiSnap = await db.collection('dynamic_notification')
            .where('type', '==', 'ride_arrive')
            .limit(1)
            .get();

        let subject = "Driver Arrived at Previous Station";
        let message = "Your stop is next! Please be ready at your pickup location.";

        if (!notiSnap.empty) {
            const noti = notiSnap.docs[0].data();
            subject = noti.subject || subject;
            message = noti.message || message;
        }

        // Check booked users
        const bookedSnap = await bookingRef.collection('bookedUser').get();
        if (bookedSnap.empty) return;

        for (const doc of bookedSnap.docs) {
            const bu = doc.data();
            if (!bu.id) continue;

            // Get user pickup lat/lng (handles both structures you have)
            let userLatLng = null;
            if (bu.pickupLocation) {
                userLatLng = bu.pickupLocation;                    // flat {lat, lng}
            } else if (bu.stopOver?.start_location) {
                userLatLng = bu.stopOver.start_location;           // nested
            }

            let shouldNotify = false;

            if (isStartAction) {
                const mainPickupLoc = bookingData.pickupLocation?.geometry?.location || bookingData.pickupLocation;
                const firstStopLoc = stopOver[0]?.geometry?.location;

                if (isSameLocation(userLatLng, mainPickupLoc) || 
                    isSameLocation(userLatLng, firstStopLoc)) {
                    shouldNotify = true;
                }
            } else {
                if (isSameLocation(userLatLng, nextStopLatLng)) {
                    shouldNotify = true;
                }
            }

          

            if (shouldNotify) {
                const userSnap = await db.collection('users').doc(bu.id).get();
                if (userSnap.exists) {
                    const userData = userSnap.data();
                    if (userData.fcmToken) {
                        const finalMessage = message.replace('{stopName}', nextStopName || 'your stop');

                        sendNotification(subject, finalMessage, userData.fcmToken, {
                            type: "ride_arrive",
                            bookingId: bookingId
                        });

                      
                    }
                }
            }
        }

    } catch (error) {
        console.error("❌ Error in sendNextStopNotification:", error);
    }
}
</script>
@endsection