@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.ride_details')</h1>
    </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">
        <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 id="pickupDistanceText">@lang('lang.km_from_pickup', ['distance' => number_format($pickupDistance, 2)])</span>
          </div>
        </div>
      </div>

      <!-- Drop Location -->
      <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" 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 id="dropDistanceText">@lang('lang.km_from_drop', ['distance' => number_format($dropDistance, 2)])</span>
          </div>
        </div>
      </div>
      <!-- After the Route Section (after the drop location div) -->
      <div class="px-4 py-3 bg-gray-800 border-b border-gray-700">
        <button id="viewRouteBtn" class="btn btn-primary">
          
          @lang('lang.view_route')
        </button>
      </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_for_one_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.only') <span id="availableSeats">{{ __('lang.loading') }}</span> @lang('lang.seats_left')
        </div>
      </div>
    </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" 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" class="w-5 h-5 text-gray-400 transition-transform" id="driverInfoChevron">
        <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">
      <!-- Driver Section -->
      <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 src="{{ asset('images/default_icon_user.png') }}" id="driverImage" alt="User" class="w-10 h-10 object-cover">
              </div>
              <!-- Corner badge (kept, color updated dynamically) -->
              <div class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center bg-gray-500" id="driverVerifyBadge">
                <svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="8" y1="12" x2="16" y2="12"/>
                </svg>
              </div>
            </div>
            <div class="ml-3">
              <!-- UPDATED WRAPPER -->
              <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> |  
                <!-- Make this clickable -->
                <span class="text-orange-400 underline cursor-pointer hover:text-orange-300 transition-colors" id="viewAllReviews">
                  <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" 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 btn-b-0">
              <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 d-none travel-preferences-div">
          <h4 class="text-gray-400 text-sm mb-2">{{ __('lang.travel_preferences') }}</h4>
          <div class="d-block items-center ">
            <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 ml-2 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 ml-2 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 ml-2 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 ml-2 smokingPreference"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- Vehicle Image -->
      <div class="px-4 py-3 bg-gray-800 border-b border-gray-700 cursor-pointer hover:bg-gray-750 transition-colors 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 class="px-4 py-3 bg-gray-800 border-b border-gray-700 cursor-pointer hover:bg-gray-750 transition-colors" 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" class="w-5 h-5 text-gray-400 transition-transform" id="tripInfoChevron">
        <polyline points="9 18 15 12 9 6"/>
      </svg>
    </div>
  </div>

  <!-- Trip Info Details -->
  <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" 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> 

&nbsp;
  <div class="px-4 py-3 bg-gray-800 border-b border-gray-700 cursor-pointer hover:bg-gray-750 transition-colors" id="checkoutInfoToggle">
    <div class="flex justify-between items-center">
      <span class="text-gray-300 font-medium">{{trans('lang.total_payable')}} :  <span class="totalAmount">00</span></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" class="w-5 h-5 text-gray-400 transition-transform" id="checkoutInfoChevron">
        <polyline points="9 18 15 12 9 6"/>
      </svg>
    </div>
  </div>
  <!-- checkout Info Details -->
  <div class="px-4 py-4 bg-gray-800 border-b border-gray-700 space-y-3 hidden" id="checkoutInfoDetails">
    <div class="flex items-center text-gray-300 justify-between">
      <span>@lang('lang.seats_booked'):</span>
      <span>x{{$seatsNeeded}}</span>
    </div>
    <div class="flex items-center text-gray-300 justify-between">
      <span>@lang('lang.price_per_seat'):</span>
      <span class="pricePerSeat">00</span>
    </div>
    <div class="flex items-center text-gray-300 justify-between font-semibold border-t border-gray-700 pt-2">
      <span>@lang('lang.total'):</span>
      <span class="totalAmount">00</span>
    </div>
  </div>

&nbsp;

<!-- Confirm Button -->
<div class="sticky bottom-0 bg-gray-900 text-center p-4 border-t border-gray-800">
  <button class="confirm-ride w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-xl transition-colors duration-200 text-sm btn-b-0">
    @lang('lang.confirm_ride')
  </button> 
</div>

</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_booking')</button>
    </div>
  </div>
</div>
<div class="modal" id="routeModal">
  <div class="modal-content" style="max-width: 800px; width: 95%;">
    <div class="modal-header">
      <h3>@lang('lang.route_details')</h3>
      <button class="modal-close-btn route-close-btn">&times;</button>
    </div>
    <div class="modal-body" style="max-height: 80vh; overflow-y: auto;">     
      
      <div class="route-stopover-list mt-6" id="routeStopoverList">       
        
        <div class="relative pl-8" id="stopoverCitiesList">
          <!-- Items will be injected here -->
        </div>
      </div>
       <!-- Map Container -->
      <div id="routeMap" style="height: 300px; width: 100%; border-radius: 8px; margin-bottom: 20px;"></div>
    </div>
  </div>
</div>
<!-- Reviews Modal - same structure as other modals -->
<div class="modal" id="reviewsModal">
  <div class="modal-content" style="max-width: 500px; width: 92%;">
    <div class="modal-header">
      <h3>{{ __('lang.reviews') }}</h3>
      <button class="modal-close-btn" id="closeReviewsModal">&times;</button>
    </div>
    
    <div class="modal-body" style="max-height: 65vh; overflow-y: auto; padding: 1.5rem;">
      <div id="reviewsSummary" class="text-center mb-4 text-gray-300 font-medium"></div>
      
      <div id="reviewsList">
        <div class="text-center py-8 text-gray-400" id="reviewsLoading">
          {{ __('lang.loading') }}...
        </div>
      </div>
    </div>
    
    <div class="modal-footer">
      <button class="btn btn-secondary modal-close-btn" id="closeReviewsModalBtn">
        {{ __('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;
  line-height:1;
  background:#6b7280;
  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}
/* Vertical timeline style */
.route-timeline-container {
  position: relative;
}

.route-timeline-container::before {
  content: '';
  position: absolute;
  width: 2px;
  background: #d1d5db;          /* gray-300 */
  top: 12px;
  bottom: 12px;
  left: 11px;
  z-index: 0;
}

.route-stopover-item {
  position: relative;
  padding: 12px 0;
  display: flex;
  align-items: flex-start;
  z-index: 1;
}

.route-stopover-dot {
  position: absolute;
  left: -18px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: 3px solid #9ca3af;    /* gray-400 */
  z-index: 2;
}

.route-stopover-item:first-child .route-stopover-dot {
  background: #ef4444;          /* red-500 */
  border-color: #ef4444;
}

.route-stopover-item:last-child .route-stopover-dot {
  background: #10b981;          /* green-500 */
  border-color: #10b981;
}

.route-stopover-content {
  flex: 1;
}

.route-stopover-city {
  font-weight: 600;
  font-size: 15px;
  color: #111827;               /* gray-900 */
}

.dark .route-stopover-city {
  color: #f3f4f6;
}

.route-stopover-address {
  font-size: 13px;
  color: #6b7280;               /* gray-500 */
  margin-top: 2px;
}

.dark .route-stopover-address {
  color: #9ca3af;
}
.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 distance = 0;
  var duration = 0;
  var recommendedPrice = 0;
  var userLocation = [];
  var finalStopOver = {};
  var finalRecommendedPrice = 0;

  let cachedCurrencySettings = null;
  var adminCommisionRefDoc;
  var adminCommisionRefDocData;
  let routeMap = null;
  let routeMarkers = [];
  let routePolyline = null;
  
    
  $(document).ready(async function() {
    // Function to get URL parameters
    function getUrlParameter(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    // Get all URL parameters at once
    const urlParams = {
        pickupDistance: getUrlParameter('pickupDistance'),
        dropDistance: getUrlParameter('dropDistance'),
        seatsNeeded: getUrlParameter('seatsNeeded'),
        calculatedPrice: getUrlParameter('calculatedPrice'),
        distance: getUrlParameter('distance'),
        pickupIndex: getUrlParameter('pickupIndex'),
        dropIndex: getUrlParameter('dropIndex')
    };

    
    await fetchDistanceSettings();
   adminCommisionRefDoc = await db.collection('settings').doc('adminCommission').get();
   adminCommisionRefDocData = adminCommisionRefDoc.data();

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

  $('.confirm-ride').on('click', function () {    
    $('#ridePaymentModal').addClass('show').css('display', 'flex');
    $('body').addClass('modal-open').css('overflow', 'hidden');
    loadPaymentMethods();

  });

  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(distanceMeters) {
    const km = (parseInt(distanceMeters) / 1000).toFixed(1);
    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 capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); }
  function formatDuration(seconds) {
    const mins = Math.round(seconds / 60);
    const hours = Math.floor(mins / 60);
    const remainingMins = mins % 60;
    return hours > 0 ? `${hours} hr${hours>1?'s':''} ${remainingMins} mins` : `${remainingMins} mins`;
  }

  async function getCurrencySettings() {
    if (cachedCurrencySettings) {
      return cachedCurrencySettings;
    }
    
    try {
      const currencySnapshot = await db.collection('currency')
        .where('enable', '==', true)
        .limit(1)
        .get();
      
      if (!currencySnapshot.empty) {
        cachedCurrencySettings = currencySnapshot.docs[0].data();
      }
    } catch (error) {
      console.error('Error fetching currency settings:', error);
    }
    
    return cachedCurrencySettings;
  }

  function formatCurrencyWithSettings(val, currencySettings) {
    const numValue = parseFloat(val) || 0;
    
    if (currencySettings) {
      const decimalDigits = currencySettings.decimalDigits || 2;
      const symbol = currencySettings.symbol || '$';
      const symbolAtRight = currencySettings.symbolAtRight || false;
      
      // Format number with correct decimal places
      const formattedNumber = numValue.toLocaleString('en-US', {
        minimumFractionDigits: decimalDigits,
        maximumFractionDigits: decimalDigits
      });
      
      // Add symbol based on position
      if (symbolAtRight) {
        return `${formattedNumber}${symbol}`;
      } else {
        return `${symbol}${formattedNumber}`;
      }
    } else {
      // Fallback
      return '$' + numValue.toFixed(2);
    }
  }

  db.collection('booking').doc("{{$id}}").get().then(async (doc) => {
    // Get currency settings once
    const currencySettings = await getCurrencySettings();
    
    if (doc.exists) {
      const bookingData = doc.data();
      const totalSeat = parseInt(bookingData.totalSeat || 0);
      const bookedSeat = parseInt(bookingData.bookedSeat || 0);
      const availableSeats = totalSeat - bookedSeat;
      $('#availableSeats').text(availableSeats);

      // Use URL parameters for indices
      const pickupIndex = urlParams.pickupIndex !== null ? parseInt(urlParams.pickupIndex) : {{$matchedPickupLocationIndex}};
      const dropIndex = urlParams.dropIndex !== null ? parseInt(urlParams.dropIndex) : {{$matchedDropLocationIndex}};

      userLocation['pickup'] = bookingData.stopOverList[pickupIndex].start_location;
      userLocation['pickupInText'] = bookingData.stopOverList[pickupIndex].start_address;
      userLocation['drop'] = bookingData.stopOverList[dropIndex].end_location;
      userLocation['dropInText'] = bookingData.stopOverList[dropIndex].end_address;

      // Get seats needed from URL
      var seatsNeeded = urlParams.seatsNeeded !== null 
          ? parseInt(urlParams.seatsNeeded) 
          : parseInt("{{$seatsNeeded}}");

      // --- PRICE CALCULATION ---
      // Check if calculatedPrice is available from URL
      if (urlParams.calculatedPrice !== null && !isNaN(parseFloat(urlParams.calculatedPrice))) {
        // calculatedPrice from URL is the PRICE PER SEAT
        pricePerSeat = parseFloat(urlParams.calculatedPrice);
        total = pricePerSeat * seatsNeeded;
       
      } else {
        // Calculate from stopOverList (fallback)
        pricePerSeat = 0;
        recommendedPrice = 0;
        distance = 0;
        duration = 0;
        
        bookingData.stopOverList.forEach((data, index) => {
          if (index >= pickupIndex && index <= dropIndex) {
            pricePerSeat += parseFloat(data.price) || 0;
            recommendedPrice += parseFloat(data.recommendedPrice) || 0;
            distance += parseInt(data.distance.value);
            duration += parseInt(data.duration.value);
          }
        });
        
        // Only fallback if sum is zero
        if (pricePerSeat === 0 && bookingData.pricePerSeat) {
          pricePerSeat = parseFloat(bookingData.pricePerSeat) || 0;
        }
        
        total = pricePerSeat * seatsNeeded;
      
      }

      // --- DISTANCE CALCULATION ---
      // Use distance from URL if available
      if (urlParams.distance !== null && !isNaN(parseFloat(urlParams.distance))) {
        distance = parseFloat(urlParams.distance) * 1000; // Convert to meters for consistency
        
      } else if (distance === 0) {
        // If distance wasn't calculated above, get it from bookingData
        distance = Number(bookingData.distance) || 0;
      }

      // Create final stopOver data
      finalStopOver = {
        distance: { text: (distance / 1000).toFixed(1) + " km", value: distance },
        duration: { text: formatDuration(duration), value: duration },
        price: pricePerSeat.toFixed(2),
        recommendedPrice: recommendedPrice.toFixed(2),
        start_address: userLocation.pickupInText,
        start_location: userLocation.pickup,
        end_address: userLocation.dropInText,
        end_location: userLocation.drop
      };
    

      // Display formatted prices
      const formattedPricePerSeat = formatCurrencyWithSettings(pricePerSeat, currencySettings);
      const formattedTotal = formatCurrencyWithSettings(total, currencySettings);

      $('.pricePerSeat').text(formattedPricePerSeat);
      $('.totalAmount').text(formattedTotal);
      $('#paymentAmount').val(total.toFixed(2));     
      

      // --- DISPLAY OTHER INFO ---
      $('#departureDateTime').text(`${lang.trip_starts_on} ${formatDate(bookingData.departureDateTime)}`);
      $('#createdAt').text(`${lang.posted_on} ${formatDate(bookingData.createdAt)}`);

      // $('#estimatedTime').text(bookingData.estimatedTime);   

      
      // Display distance
      const distanceToShow = distance / 1000;
      const estimatedTimeText = calculateEstimatedTime(distanceToShow);
      $('#estimatedTime').text(estimatedTimeText);
      $('#distance').text(formatDistanceByAdminASettings(distanceToShow));
      
      $('#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')"
      );

      $('#rideStatus').text(capitalizeFirstLetter(bookingData.status));
      $('#rideStatus').removeClass().addClass('px-2 py-1 text-xs rounded-full').addClass(getStatusColor(bookingData.status));

      // Display pickup and drop locations
      const pickupCity = extractCitySafely(bookingData.stopOverList[pickupIndex].start_address);
      const dropCity = extractCitySafely(bookingData.stopOverList[dropIndex].end_address);
      $('#pickupCity').text(pickupCity);
      $('#pickupAddress').text(bookingData.stopOverList[pickupIndex].start_address);
      $('#dropCity').text(dropCity);
      $('#dropAddress').text(bookingData.stopOverList[dropIndex].end_address);

      // --- DRIVER INFO (unchanged) ---
      db.collection('users').doc(bookingData.createdBy).get().then((doc) => {
        if (doc.exists) {
          const driverData = doc.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;
          const averageRating = reviewCount > 0 ? (reviewSum / reviewCount).toFixed(1) : "0";
          $('#reviewCount').text(reviewCount);
          $('#totalRating').text(averageRating);

          // Reviews Modal Logic
          const reviewsModal = document.getElementById('reviewsModal');
          const reviewsList = document.getElementById('reviewsList');
          const reviewsLoading = document.getElementById('reviewsLoading');

          $('#viewAllReviews').on('click', async function () {
            $('#reviewsModal').addClass('show').css('display', 'flex');
            $('body').addClass('modal-open').css('overflow', 'hidden');
            
            reviewsList.innerHTML = '';
            $('#reviewsLoading').show();

            try {
              const driverId = bookingData.createdBy;
              const querySnapshot = await db.collection('review')
                .where('receiver_id', '==', driverId)
                .orderBy('date', 'desc')
                .get();

              reviewsLoading.style.display = 'none';

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

              querySnapshot.forEach(doc => {
                const review = doc.data();
                const rating = parseFloat(review.rating || 0);
                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 && 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');
                const rideId = review.booking_id || '—';
                const rideIdDisplay = rideId.length > 30 ? rideId.substring(0, 27) + '...' : rideId;

                const html = `
                  <div class="border-b border-gray-700 pb-6 mb-6 last:border-b-0 last:pb-0 last:mb-0">
                    <div class="flex flex-wrap items-center justify-between m1-3">
                      <div class="text-sm text-gray-400 mt-2">
                        {{trans('lang.ride_id')}}: 
                        <span class="text-gray-200">${rideIdDisplay}</span>
                      </div>
                      <div class="flex items-center gap-2.5 order-3 sm:order-none">
                        ${starsHtml}
                      </div>
                      <div class="text-sm text-gray-500 order-2 sm:order-none">
                        ${dateStr}
                      </div>
                    </div>
                    <p class="text-gray-200">${comment}</p>
                  </div>
                `;
                reviewsList.insertAdjacentHTML('beforeend', html);
              });

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

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

          $('#closeReviewsModal, #closeReviewsModalBtn, .modal-close-btn').on('click', closeReviewsModal);

          reviewsModal.addEventListener('click', function(e) {
            if (e.target === reviewsModal) {
              closeReviewsModal();
            }
          });

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

          $('.driver-chat-button').off('click').on('click', function(){
            const receiverId = driverData.id;
            window.location.href = `/inbox?conversation=${receiverId}`;
          });

          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>');
          }

        } else {
          $('#driverName').text(lang.unknown_driver);
        }
      });

      // --- VEHICLE INFO (unchanged) ---
      const vehicleInfo = `${bookingData.vehicleInformation.vehicleBrand.name} ${bookingData.vehicleInformation.vehicleModel.name} (${bookingData.vehicleInformation.vehicleRegistrationYear})`;
      $('#vehicleInfo').text(vehicleInfo);
      $('#vehicleTypeColor').text(`${bookingData.vehicleInformation.vehicleType.name} • ${bookingData.vehicleInformation.vehicleColor}`);
      $('#licensePlate').text(bookingData.vehicleInformation.licensePlatNumber);

      const vehicleImageSection = $('#vehicleImageSection');
      const vehicleImages = bookingData.vehicleInformation.vehicleImages || [];
      vehicleImageSection.empty();
      if (vehicleImages.length > 0) {
        let html = `
          <h2 class="text-white text-lg font-semibold mb-3">${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((imgUrl, index) => {
          html += `<img src="${imgUrl}" alt="Vehicle Image ${index + 1}" class="h-3 w-32 object-cover rounded-md border border-gray-600 p-1">`;
        });
        html += `</div>`;
        vehicleImageSection.html(html);
      } else {
        vehicleImageSection.html(`
          <h2 class="text-white text-lg font-semibold mb-3">${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>`);
      }

      // --- TRAVEL PREFERENCES (unchanged) ---
      if (bookingData.travelPreference) {
        let hasPreference = false;

        if (bookingData.travelPreference.chattiness) {
          $('#chattinessPreference').show();
          $('.chattinessPreference').text(bookingData.travelPreference.chattiness);
          hasPreference = true;
        } else {
          $('#chattinessPreference').hide();
        }

        if (bookingData.travelPreference.music) {
          $('#musicPreference').show();
          $('.musicPreference').text(bookingData.travelPreference.music);
          hasPreference = true;
        } else {
          $('#musicPreference').hide();
        }

        if (bookingData.travelPreference.pets) {
          $('#petsPreference').show();
          $('.petsPreference').text(bookingData.travelPreference.pets);
          hasPreference = true;
        } else {
          $('#petsPreference').hide();
        }

        if (bookingData.travelPreference.smoking) {
          $('#smokingPreference').show();
          $('.smokingPreference').text(bookingData.travelPreference.smoking);
          hasPreference = true;
        } else {
          $('#smokingPreference').hide();
        }

        if (hasPreference) {
          $('.travel-preferences-div').removeClass('d-none');
        } else {
          $('.travel-preferences-div').addClass('d-none');
        }
      }

    } else {
      $('#bookingDetails').html(`
        <div class="text-center py-8">
          <h2 class="text-xl font-semibold mb-2">${lang.booking_not_found_title}</h2>
          <p class="text-gray-400">${lang.booking_not_found_message}</p>
        </div>`);
    }
  }).catch((error) => {
  
    $('#bookingDetails').html(`
      <div class="text-center py-8">
        <h2 class="text-xl font-semibold mb-2">${lang.booking_error_title}</h2>
        <p class="text-gray-400">${lang.booking_error_message}</p>
      </div>`);
  });
});
function closePaymentModal() {
  $('#ridePaymentModal').removeClass('show').css('display', 'none');
  $('body').removeClass('modal-open').css('overflow', '');
}
$('.modal-close-btn').on('click', function () {
  closePaymentModal();
});
async function loadPaymentMethods() {

    const container = $('#ridePaymentModal #paymentMethods');
    container.html('<div class="text-center py-3">{{trans("lang.loading_payment_methods")}}</div>');

    try {
        const doc = await db.collection('settings').doc('payment').get();

        if (!doc.exists) {
            container.html('<p class="text-muted text-center">{{trans("lang.no_payment_settings_found")}}</p>');
            return;
        }

        const gateways = doc.data();
        container.empty();

        let hasEnabled = false;

        $.each(gateways, function (key, value) {

            if (!value.enable) return;

            hasEnabled = true;
        
            const imageUrl = `{{ asset('/images/payment_method/${key}.png') }}`;

            container.append(`
                <div class="payment-method">
                    <label>
                        <input type="radio" name="paymentMethod" value="${value.name}">
                        <img src="${imageUrl}" alt="${value.name}" width="40"
                             onerror="this.onerror=null;this.src='{{ asset('/images/payment_method/default.png') }}';">
                        <span>${value.name}</span>
                    </label>
                </div>
            `);
        });

        if (!hasEnabled) {
            container.html('<p class="text-muted text-center">{{trans("lang.no_payment_methods_enabled")}}</p>');
        } else {
            container.find('input[type="radio"]').first().prop('checked', true);
        }

    } catch (error) {
        console.error(error);
        container.html('<p class="text-danger text-center">{{trans("lang.failed_to_load_payment_methods")}}</p>');
    }
}
$('#confirmPayment').on('click', async function () {

    const selectedPayment = $('input[name="paymentMethod"]:checked').val();

    if (!selectedPayment) {
         showMessage('{{trans("lang.select_payment_method")}}', 'danger');
        return;
    }

    try {
        const bookingId = "{{ $id }}";
        const firebaseUid = "{{ auth()->user()->firebase_uid }}";
        const seatsNeeded = parseInt("{{ $seatsNeeded }}");

        const paymentStatus = false; 

        const bookingRef = db.collection('booking').doc(bookingId);
        const bookingSnap = await bookingRef.get();

        if (!bookingSnap.exists) {
             showMessage('{{trans("lang.booking_not_found_title")}}', 'danger');
            return;
        }

        const currentBookedSeat = parseInt(bookingSnap.data().bookedSeat || "0");

        await bookingRef.update({
            bookedSeat: (currentBookedSeat + seatsNeeded).toString(),
            bookedUserId: firebase.firestore.FieldValue.arrayUnion(firebaseUid)
        });

        await bookingRef.collection('bookedUser').doc(firebaseUid).set({
            id: firebaseUid,
            bookedSeat: seatsNeeded.toString(),
            createdAt: firebase.firestore.FieldValue.serverTimestamp(),
            paymentType: selectedPayment,   
            paymentStatus: paymentStatus,   
            pickupLocation: userLocation.pickup,
            dropLocation: userLocation.drop,
            subTotal: total.toString(),
            stopOver: finalStopOver,
            adminCommission: adminCommisionRefDocData,
            taxList: [],
            status: 'placed',
        }, { merge: true });
        var bookingData = bookingSnap.data();
        if (bookingData.createdBy) {

            const userDoc = await db.collection('users').doc(bookingData.createdBy).get();

            if (userDoc.exists) {

                const userData = userDoc.data();
               
                const notiSnap = await db.collection('dynamic_notification')
                                          .where('type', '==', 'booking_confirmed') 
                                          .limit(1)
                                          .get();

                let subject = "New Booking Request";
                let message = "New booking request received. Please review and accept or reject.";

                if (!notiSnap.empty) {
                    const notiData = notiSnap.docs[0].data();
                   
                    subject = notiData.subject || subject;
                    message = notiData.message || message;
                   
                    message = message
                        .replace('{seats}', seatsNeeded)
                        .replace('{user}', "{{ auth()->user()->name }}");
                }
                
                if (userData.fcmToken) {
                    sendNotification(subject, message, userData.fcmToken);
                } else {
                    console.warn("FCM token not found for user");
                }
            }
        }
        closePaymentModal();
        window.location.href = '/ride';

    } catch (error) {
        console.error('Booking error:', error);
          showMessage('{{ trans("lang.something_went_wrong") }}', 'danger');
    }
});
function extractCitySafely(fullAddress) {
    if (!fullAddress || typeof fullAddress !== 'string') return '—';

    let addr = fullAddress.trim();

    // Step 1: Aggressive cleanup of trailing parts (country, postal, common suffixes)
    addr = addr
        .replace(/,\s*(India|IND|Republic of India)\s*$/i, '')
        .replace(/,\s*[A-Z]{2,3}\s*$/i, '')                    // ISO country code
        .replace(/\s*-?\s*\d{6}(?:\s*-\s*\d+)?\s*$/, '')       // Indian PIN code
        .replace(/,\s*$/, '');

    const parts = addr.split(',').map(p => p.trim()).filter(Boolean);

    if (parts.length === 0) return '—';
    if (parts.length === 1) return parts[0];

    // Common Indian state names (expand if you serve other states)
    const indianStates = [
        'andhra pradesh', 'arunachal pradesh', 'assam', 'bihar', 'chhattisgarh',
        'goa', 'gujarat', 'haryana', 'himachal pradesh', 'jharkhand', 'karnataka',
        'kerala', 'madhya pradesh', 'maharashtra', 'manipur', 'meghalaya', 'mizoram',
        'nagaland', 'odisha', 'punjab', 'rajasthan', 'sikkim', 'tamil nadu', 'telangana',
        'tripura', 'uttar pradesh', 'uttarakhand', 'west bengal',
        'andaman and nicobar', 'chandigarh', 'dadra and nagar haveli', 'daman and diu',
        'delhi', 'jammu and kashmir', 'ladakh', 'lakshadweep', 'puducherry'
    ];

    const stateRegex = new RegExp(`^(${indianStates.join('|')})$`, 'i');

    // Start from the end and find the first non-state, non-short, non-number part
    let cityCandidate = null;

    // Look backwards from the end
    for (let i = parts.length - 1; i >= 0; i--) {
        let p = parts[i];

        // Skip if it looks like state
        if (stateRegex.test(p)) {
            continue;
        }

        // Skip pure numbers, very short, or starting with number (house/plot)
        if (/^\d+$/.test(p) || p.length <= 3 || /^\d/.test(p)) {
            continue;
        }

        // Prefer longer, letter-containing parts
        if (/[A-Za-z]/.test(p) && p.length > 4) {
            cityCandidate = p;
            break;  // First good one from the end is usually the city
        }
    }

    // If nothing good found → fallback to second-to-last meaningful part
    if (!cityCandidate) {
        const meaningfulParts = parts.filter(p => 
            /[A-Za-z]/.test(p) && p.length > 4 && !/^\d/.test(p)
        );
        cityCandidate = meaningfulParts[meaningfulParts.length - 1] || parts[1] || parts[0];
    }

    // Final cleanup (remove prefixes like "Near ", leading numbers)
    cityCandidate = cityCandidate
        .replace(/^(Near|Opp\.?|Behind|Next to|Beside|Nr\.?|At|In|Nr)\.?\s+/i, '')
        .replace(/^\d+\s*(?:[A-Za-z]\/?-?)?\s*/, '')
        .replace(/\s+[-–—]\s+\d{6}.*$/, '')   // remove any trailing pin if still there
        .trim();

    return cityCandidate || '—';
}
// Function to extract city name from address (improved version)
function extractCityFromAddress(address) {
  if (!address || typeof address !== 'string') return 'Unknown';
  
  const parts = address.split(',').map(p => p.trim());
  
  if (parts.length >= 3) {
    // Usually format: Street, Area, City, State, Country
    // City is often the 3rd from last or 2nd from last
    return parts[parts.length - 3] || parts[parts.length - 2] || parts[0];
  } else if (parts.length === 2) {
    // Format: City, Country
    return parts[0];
  } else {
    return parts[0];
  }
}

// Function to open route modal and display route
async function openRouteModal() {
  const modal = document.getElementById('routeModal');
  if (!modal) return;
  
  modal.style.display = 'flex';
  modal.classList.add('show');
  document.body.style.overflow = 'hidden';
  
  // Load Google Maps if not already loaded
  if (typeof google === 'undefined' || !google.maps) {
    await loadGoogleMapsAPI();
  }
  
  // Get booking data
  const bookingId = "{{ $id }}";
  const bookingDoc = await db.collection('booking').doc(bookingId).get();
  
  if (!bookingDoc.exists) {
    console.error('Booking not found');
    return;
  }
  
  const bookingData = bookingDoc.data();
  const stopOverList = bookingData.stopOverList || [];
  
  // Display stopover cities list (without distance)
  displayStopoverCities(stopOverList);
  
  // Initialize map after a short delay to ensure modal is visible
  setTimeout(() => {
    initRouteMap(stopOverList);
  }, 300);
}

// Function to display stopover cities (without distance)
function displayStopoverCities(stopOverList) {
  const container = document.getElementById('stopoverCitiesList');
  if (!container) return;
  
  container.innerHTML = '';
  
  if (!stopOverList || stopOverList.length === 0) {
    container.innerHTML = '<p class="text-gray-500 dark:text-gray-400 pl-4">Direct route – no intermediate stops</p>';
    return;
  }

  // We want to show EVERY stop point (start of each segment)
  const allStops = [];
  
  stopOverList.forEach((segment, idx) => {
    // Add start point of this segment
    allStops.push({
      address: segment.start_address,
      isStart: idx === 0,
      isEnd: false
    });
    
    // If this is the last segment → also add its end point
    if (idx === stopOverList.length - 1) {
      allStops.push({
        address: segment.end_address,
        isStart: false,
        isEnd: true
      });
    }
  });

  // Remove duplicates if any (very rare case)
  const uniqueStops = [];
  const seen = new Set();
  allStops.forEach(stop => {
    const key = stop.address.trim().toLowerCase();
    if (!seen.has(key)) {
      seen.add(key);
      uniqueStops.push(stop);
    }
  });

  uniqueStops.forEach((stop, index) => {
    const city = extractCitySafely(stop.address);
    const fullAddr = stop.address;

    const item = document.createElement('div');
    item.className = 'route-stopover-item';

    let dotClass = 'route-stopover-dot';
    if (stop.isStart) dotClass += ' start';
    if (stop.isEnd)   dotClass += ' end';

    item.innerHTML = `
      <div class="${dotClass}"></div>
      <div class="route-stopover-content">
        <div class="route-stopover-city">${city}</div>
        <div class="route-stopover-address">${fullAddr}</div>
      </div>
    `;

    container.appendChild(item);
  });
}

// Function to initialize the map with route (with light theme)
function initRouteMap(stopOverList) {
  const mapContainer = document.getElementById('routeMap');
  if (!mapContainer) return;
  
  // Clear previous map elements
  if (routeMarkers.length) {
    routeMarkers.forEach(marker => marker.setMap(null));
    routeMarkers = [];
  }
  if (routePolyline) {
    routePolyline.setMap(null);
  }
  
  // Handle case with no stopovers
  if (!stopOverList || stopOverList.length === 0) {
    mapContainer.innerHTML = '<div class="flex items-center justify-center h-full bg-gray-100 text-gray-500">No route data available</div>';
    return;
  }
  
  // Collect all locations for waypoints
  const waypoints = [];
  const locations = [];
  
  stopOverList.forEach((stop, index) => {
    const startLoc = stop.start_location;
    const endLoc = stop.end_location;
    
    if (startLoc && startLoc.lat && startLoc.lng) {
      if (index === 0) {
        locations.push({ lat: startLoc.lat, lng: startLoc.lng });
      }
    }
    
    if (endLoc && endLoc.lat && endLoc.lng) {
      locations.push({ lat: endLoc.lat, lng: endLoc.lng });
      
      // Add as waypoint for directions (except last)
      if (index < stopOverList.length - 1) {
        waypoints.push({
          location: new google.maps.LatLng(endLoc.lat, endLoc.lng),
          stopover: true
        });
      }
    }
  });
  
  if (locations.length < 2) return;
  
  // Create map with light theme (removed dark styles)
  const map = new google.maps.Map(mapContainer, {
    zoom: 7,
    center: locations[0],
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    // Using default Google Maps styling instead of dark theme
    styles: [] // Empty array = default light theme
  });
  
  routeMap = map;
  
  // Add markers for start, end, and stopovers
  locations.forEach((loc, index) => {
    let icon = null;
    
    if (index === 0) {
      // Start marker
      icon = {
        url: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
        scaledSize: new google.maps.Size(40, 40)
      };
    } else if (index === locations.length - 1) {
      // End marker
      icon = {
        url: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
        scaledSize: new google.maps.Size(40, 40)
      };
    } else {
      // Stopover marker
      icon = {
        url: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
        scaledSize: new google.maps.Size(32, 32)
      };
    }
    
    const marker = new google.maps.Marker({
      position: loc,
      map: map,
      icon: icon,
      title: `Stop ${index + 1}`
    });
    
    routeMarkers.push(marker);
  });
  
  // Draw route using Directions Service
  const directionsService = new google.maps.DirectionsService();
  
  directionsService.route({
    origin: locations[0],
    destination: locations[locations.length - 1],
    waypoints: waypoints,
    travelMode: google.maps.TravelMode.DRIVING
  }, (response, status) => {
    if (status === 'OK') {
      routePolyline = new google.maps.Polyline({
        path: response.routes[0].overview_path,
        geodesic: true,
        strokeColor: '#2d7df6',
        strokeOpacity: 1.0,
        strokeWeight: 4
      });
      
      routePolyline.setMap(map);
      
      // Fit bounds to show entire route
      const bounds = new google.maps.LatLngBounds();
      locations.forEach(loc => bounds.extend(loc));
      map.fitBounds(bounds);
    } else {
      console.error('Directions request failed:', status);
      // Fallback: draw straight lines between points
      const linePath = new google.maps.Polyline({
        path: locations,
        geodesic: true,
        strokeColor: '#2d7df6',
        strokeOpacity: 0.8,
        strokeWeight: 3
      });
      
      linePath.setMap(map);
      routePolyline = linePath;
      
      const bounds = new google.maps.LatLngBounds();
      locations.forEach(loc => bounds.extend(loc));
      map.fitBounds(bounds);
    }
  });
}

// Function to load Google Maps API dynamically
function loadGoogleMapsAPI() {
  return new Promise((resolve, reject) => {
    if (window.google && window.google.maps) {
      resolve();
      return;
    }
    
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&libraries=places`;
    script.async = true;
    script.defer = true;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// Event listeners for route modal
$(document).ready(function() {
  // Open route modal
  $('#viewRouteBtn').on('click', function(e) {
    e.preventDefault();
    openRouteModal();
  });
  
  // Close route modal
  $('.route-close-btn').on('click', function() {
    $('#routeModal').removeClass('show').css('display', 'none');
    document.body.style.overflow = '';
    
    // Clean up map to prevent memory leaks
    if (routeMarkers.length) {
      routeMarkers.forEach(marker => marker.setMap(null));
      routeMarkers = [];
    }
    if (routePolyline) {
      routePolyline.setMap(null);
    }
    routeMap = null;
  });
  
  // Close when clicking outside modal
  $(window).on('click', function(e) {
    const modal = document.getElementById('routeModal');
    if (e.target === modal) {
      $('.route-close-btn').trigger('click');
    }
  });
});
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';
          }
          updateDistanceLabels();
        
    } catch (error) {
        console.error('Error fetching distance settings:', error);
        // Keep default km if error occurs
        distanceUnit = 'km';
        distanceLabel = 'km';
        updateDistanceLabels();
    }
}

// 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}`;
    }
}
function updateDistanceLabels() {
  
   
    const urlPickupDistance = new URLSearchParams(window.location.search).get('pickupDistance');
    const urlDropDistance = new URLSearchParams(window.location.search).get('dropDistance');
    
    const pickupDist = urlPickupDistance !== null 
        ? parseFloat(urlPickupDistance) 
        : parseFloat("{{ number_format($pickupDistance, 2) }}") || 0;
        
    const dropDist = urlDropDistance !== null 
        ? parseFloat(urlDropDistance) 
        : parseFloat("{{ number_format($dropDistance, 2) }}") || 0;

    $('#pickupDistanceText').html(
        `${pickupDist.toFixed(2)} ${distanceLabel} @lang('lang.from_your_pickup_location')`
    );

    $('#dropDistanceText').html(
        `${dropDist.toFixed(2)} ${distanceLabel} @lang('lang.from_your_drop_location')`
    );
}
function calculateEstimatedTime(distanceKm) {    
    const averageSpeedKmh = 60;
    
    const hours = distanceKm / averageSpeedKmh;
    const hoursInt = Math.floor(hours);
    const minutesInt = Math.round((hours - hoursInt) * 60);
    
    if (hoursInt === 0) {
        return `${minutesInt} mins`;
    } else if (minutesInt === 0) {
        return `${hoursInt} hour${hoursInt > 1 ? 's' : ''}`;
    } else {
        return `${hoursInt} hour${hoursInt > 1 ? 's' : ''} ${minutesInt} mins`;
    }
}
</script>
@endsection