@extends('layouts.app')

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

@section('content')
    <style>       
    </style>
    <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.booked_ride_details')</h1>
                </div>
            </div>

            <!-- Route Section -->
            <div class="px-4 py-4 bg-gray-900">
                <div class="space-y-0">
                    <!-- 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('lang.loading')</div>
                            <div class="text-gray-400 text-sm mb-2" id="pickupAddress">@lang('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>

                    <!-- 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('lang.loading')</div>
                            <div class="text-gray-400 text-sm mb-2" id="dropAddress">@lang('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>
                </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('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('lang.loading')</span></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 circular badge -->
                                    <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 -->
                                    <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>

                        <!-- Travel 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" stroke-linecap="round" stroke-linejoin="round"
                        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'): <span class="loading">@lang('lang.loading')</span>
                        </div>
                        <div class="text-xs text-gray-400" id="createdAt">@lang('lang.posted_on'): <span
                                class="loading">@lang('lang.loading')</span></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" stroke-linecap="round" stroke-linejoin="round"
                        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" stroke-linecap="round" stroke-linejoin="round"
                        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" stroke-linecap="round" stroke-linejoin="round"
                        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" stroke-linecap="round" stroke-linejoin="round"
                        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="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="1" y="4" width="18" height="16" rx="2"/>
                        <line x1="1" y1="10" x2="19" y2="10"/>
                    </svg>
                    <span id="paymentMethodDetail">{{ __('lang.loading') }}</span>
                </div>
            </div>

            &nbsp; &nbsp;

            <div class="sticky bottom-0 bg-gray-900 text-center p-4 border-t border-gray-800">
                <button
                    class="cancel-ride w-full bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-6 rounded-xl transition-colors duration-200 text-sm btn-b-0"
                    style="display:none">
                    @lang('lang.cancel_ride')
                </button>
                <button
                    class="pay-now-btn 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"
                    style="display:none">
                    @lang('lang.pay_now')
                </button>
                <button
                    class="sos-btn w-full bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-6 rounded-xl transition-colors duration-200 text-sm btn-b-0"
                    style="display:none">
                    @lang('lang.sos')
                </button>
                <button
                    class="report-ride-btn 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"
                    style="display:none">
                    @lang('lang.report_ride')
                </button>
                <button
                    class="add-review w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-6 rounded-xl transition-colors duration-200 text-sm btn-b-0"
                    style="display:none">
                    @lang('lang.add_review')
                </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="paymentAmount">@lang('lang.amount')</label>
                    <input type="hidden" id="paymentAmount" class="form-control " placeholder="@lang('lang.enter_amount')">
                </div>
                <input type="hidden" id="paymentAmountRaw" value="">
                <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>
    <!-- Payment Modal -->
    <div class="modal" id="paymentModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="paymentModalTitle">{{ trans('lang.payment') }}</h3>
                <button class="modal-close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <h3 id="paymentModalPayAmount">@lang('lang.pay'): <span class="paymentModalPayAmountSpan">00</span>
                    </h3>
                    <input type="hidden" id="paymentAmount" class="form-control paymentAmount" min="1"
                        placeholder="{{ __('lang.enter_amount') }}" readonly>
                </div>
                <div class="form-group">
                    <label>{{ __('lang.payment_method') }}</label>
                    <div class="siddhi-card overflow-hidden checkout-payment-options">
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="cod_box">
                            <input type="radio" name="payment_method" id="cod" value="Cash"
                                class="custom-control-input">
                            <label class="custom-control-label"
                                for="cod">{{ trans('lang.cash_on_delivery') }}</label>
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="razorpay_box">
                            <input type="radio" name="payment_method" id="razorpay" value="RazorPay"
                                class="custom-control-input">
                            <label class="custom-control-label" for="razorpay">{{ trans('lang.razorpay') }}</label>
                            <input type="hidden" id="isEnabled">
                            <input type="hidden" id="isSandboxEnabled">
                            <input type="hidden" id="razorpayKey">
                            <input type="hidden" id="razorpaySecret">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="stripe_box">
                            <input type="radio" name="payment_method" id="stripe" value="Stripe"
                                class="custom-control-input">
                            <label class="custom-control-label" for="stripe">{{ trans('lang.stripe') }}</label>
                            <input type="hidden" id="isStripeSandboxEnabled">
                            <input type="hidden" id="stripeKey">
                            <input type="hidden" id="stripeSecret">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="paypal_box">
                            <input type="radio" name="payment_method" id="paypal" value="Paypal"
                                class="custom-control-input">
                            <label class="custom-control-label" for="paypal">{{ trans('lang.pay_pal') }}</label>
                            <input type="hidden" id="ispaypalSandboxEnabled">
                            <input type="hidden" id="paypalKey">
                            <input type="hidden" id="paypalSecret">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="payfast_box">
                            <input type="radio" name="payment_method" id="payfast" value="PayFast"
                                class="custom-control-input">
                            <label class="custom-control-label" for="payfast">{{ trans('lang.pay_fast') }}</label>
                            <input type="hidden" id="payfast_isEnabled">
                            <input type="hidden" id="payfast_isSandbox">
                            <input type="hidden" id="payfast_merchant_key">
                            <input type="hidden" id="payfast_merchant_id">
                            <input type="hidden" id="payfast_notify_url">
                            <input type="hidden" id="payfast_return_url">
                            <input type="hidden" id="payfast_cancel_url">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="paystack_box">
                            <input type="radio" name="payment_method" id="paystack" value="PayStack"
                                class="custom-control-input">
                            <label class="custom-control-label" for="paystack">{{ trans('lang.pay_stack') }}</label>
                            <input type="hidden" id="paystack_isEnabled">
                            <input type="hidden" id="paystack_isSandbox">
                            <input type="hidden" id="paystack_public_key">
                            <input type="hidden" id="paystack_secret_key">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="flutterWave_box">
                            <input type="radio" name="payment_method" id="flutterwave" value="FlutterWave"
                                class="custom-control-input">
                            <label class="custom-control-label"
                                for="flutterwave">{{ trans('lang.flutter_wave') }}</label>
                            <input type="hidden" id="flutterWave_isEnabled">
                            <input type="hidden" id="flutterWave_isSandbox">
                            <input type="hidden" id="flutterWave_encryption_key">
                            <input type="hidden" id="flutterWave_public_key">
                            <input type="hidden" id="flutterWave_secret_key">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="mercadopago_box">
                            <input type="radio" name="payment_method" id="mercadopago" value="MercadoPago"
                                class="custom-control-input">
                            <label class="custom-control-label" for="mercadopago">{{ trans('lang.mercadopago') }}</label>
                            <input type="hidden" id="mercadopago_isEnabled">
                            <input type="hidden" id="mercadopago_isSandbox">
                            <input type="hidden" id="mercadopago_public_key">
                            <input type="hidden" id="mercadopago_access_token">
                            <input type="hidden" id="title">
                            <input type="hidden" id="quantity">
                            <input type="hidden" id="unit_price">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="xendit_box">
                            <input type="radio" name="payment_method" id="xendit" value="Xendit"
                                class="custom-control-input">
                            <label class="custom-control-label" for="xendit">{{ trans('lang.xendit') }}</label>
                            <input type="hidden" id="xendit_enable">
                            <input type="hidden" id="xendit_apiKey">
                            <input type="hidden" id="xendit_image">
                            <input type="hidden" id="xendit_isSandbox">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="midtrans_box">
                            <input type="radio" name="payment_method" id="midtrans" value="MidTrans"
                                class="custom-control-input">
                            <label class="custom-control-label" for="midtrans">{{ trans('lang.midtrans') }}</label>
                            <input type="hidden" id="midtrans_enable">
                            <input type="hidden" id="midtrans_serverKey">
                            <input type="hidden" id="midtrans_image">
                            <input type="hidden" id="midtrans_isSandbox">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="orangepay_box">
                            <input type="radio" name="payment_method" id="orangepay" value="OrangePay"
                                class="custom-control-input">
                            <label class="custom-control-label" for="orangepay">{{ trans('lang.orangepay') }}</label>
                            <input type="hidden" id="orangepay_auth">
                            <input type="hidden" id="orangepay_clientId">
                            <input type="hidden" id="orangepay_clientSecret">
                            <input type="hidden" id="orangepay_image">
                            <input type="hidden" id="orangepay_isSandbox">
                            <input type="hidden" id="orangepay_merchantKey">
                            <input type="hidden" id="orangepay_cancelUrl">
                            <input type="hidden" id="orangepay_notifyUrl">
                            <input type="hidden" id="orangepay_returnUrl">
                            <input type="hidden" id="orangepay_enable">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="phonepe_box">
                            <input type="radio" name="payment_method" id="phonepe" value="phonepe"
                                class="custom-control-input">
                            <label class="custom-control-label" for="phonepe">{{ trans('lang.phonepe') }}</label>
                            <input type="hidden" id="phonepe_enable">
                            <input type="hidden" id="phonepe_isSandbox">
                            <input type="hidden" id="phonepe_clientId">
                            <input type="hidden" id="phonepe_clientSecret">
                            <input type="hidden" id="phonepe_merchantId">
                            <input type="hidden" id="phonepe_flowId">
                            <input type="hidden" id="phonepe_saltKey">
                            <input type="hidden" id="phonepe_saltIndex" value="1">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="cashfree_box">
                            <input type="radio" name="payment_method" id="cashfree" value="cashfree"
                                class="custom-control-input">
                            <label class="custom-control-label" for="cashfree">{{ trans('lang.Cashfree') }}</label>
                            <input type="hidden" id="cashfree_isSandbox">
                            <input type="hidden" id="cashfree_clientId">
                            <input type="hidden" id="cashfree_clientSecret">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="instamojo_box">
                            <input type="radio" name="payment_method" id="instamojo" value="instamojo"
                                class="custom-control-input">
                            <label class="custom-control-label" for="instamojo">{{ trans('lang.Instamojo') }}</label>
                            <input type="hidden" id="instamojo_isEnabled">
                            <input type="hidden" id="instamojo_isSandbox">
                            <input type="hidden" id="instamojo_clientId">
                            <input type="hidden" id="instamojo_clientSecret">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="paymongo_box">
                            <input type="radio" name="payment_method" id="paymongo" value="paymongo"
                                class="custom-control-input">
                            <label class="custom-control-label" for="paymongo">{{ trans('lang.PayMongo') }}</label>
                            <input type="hidden" id="paymongo_enable">
                            <input type="hidden" id="paymongo_isSandbox">
                            <input type="hidden" id="paymongo_secret_key">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="foloosi_box">
                            <input type="radio" name="payment_method" id="foloosi" value="foloosi"
                                class="custom-control-input">
                            <label class="custom-control-label" for="foloosi">{{ trans('lang.Foloosi') }}</label>
                            <input type="hidden" id="foloosi_enable">
                            <input type="hidden" id="foloosi_isSandbox">
                            <input type="hidden" id="foloosi_merchantKey">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="mtnmomo_box">
                            <input type="radio" name="payment_method" id="mtnmomo" value="mtnmomo"
                                class="custom-control-input">
                            <label class="custom-control-label" for="mtnmomo">{{ trans('lang.MTN_MoMo') }}</label>
                            <input type="hidden" id="mtnmomo_enable">
                            <input type="hidden" id="mtnmomo_isSandbox">
                            <input type="hidden" id="mtnmomo_primaryKey">
                            <input type="hidden" id="mtnmomo_callback">
                        </div>
                        <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                            id="wallet_box">
                            <input type="radio" name="payment_method" id="wallet" value="Wallet"
                                class="custom-control-input">
                            <label class="custom-control-label" for="wallet">{{ trans('lang.wallet') }} (
                                {{ trans('lang.you_have') }} <span id="wallet_amount"></span> )</label>
                            <input type="hidden" id="user_wallet_amount">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary modal-close-btn">{{ __('lang.cancel') }}</button>
                <button class="btn btn-primary" id="confirmPaymentWallet"
                    onclick="finalCheckout()">{{ __('lang.proceed_payment') }}</button>
            </div>
        </div>
    </div>
    <!-- Report Ride Modal-->
    <div class="modal" id="reportRideModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="reportModalTitle">{{ __('lang.report_ride') }}</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>
    <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;
            background: #6b7280;
            color: #fff;
            line-height: 1;
        }

        .driver-verify-badge svg {
            width: 14px;
            height: 14px
        }

        .driver-verify-badge.verified {
            background: #059669
        }

        .driver-verify-badge.unverified {
            background: #6b7280
        }

        .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;
            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;
        var codSettings = {};
        var walletSetting = {};
        var paypalSetting = {};
        var payStackSetting = {};
        var stripeSettings = {};
        var razorpaySetting = {};
        var flutterWaveSetting = {};
        var Midtrans_setting = {};
        var OrangePaySetting = {};
        var MercadoPagoSetting = {};
        var XenditSetting = {};
        var payFastSetting = {};
        var PhonePeSetting = {};
        var cashfreeSetting = {};
        var instamojoSetting = {};
        var paymongoSetting = {};
        var foloosiSetting = {};
        var mtnmomoSetting = {};
        var driverId = '';
        var bookingId = '{{ $id }}';
        var currentCurrency = '';
        var currencyAtRight = false;
        var decimal_degits = 0;
        var currencyData;
        var refCurrency = db.collection('currency').where('enable', '==', true);
        refCurrency.get().then(async function(snapshots) {
            currencyData = snapshots.docs[0].data();
            currentCurrency = currencyData.symbol;
            currencyAtRight = currencyData.symbolAtRight;
            if (currencyData.decimal_degits) {
                decimal_degits = currencyData.decimalDigits;
            }
        });

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

        $(document).ready(async function() {
            await fetchDistanceSettings();
            $('#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');
            });
            await db.collection('settings').doc('payment').get().then((doc) => {
                    if (!doc.exists) {
                        console.error('Payment settings not found');
                        return;
                    }

                    const paymentSettings = doc.data();

                    codSettings = paymentSettings.cash;
                    walletSetting = paymentSettings.wallet;
                    paypalSetting = paymentSettings.paypal;
                    payStackSetting = paymentSettings.payStack;
                    stripeSettings = paymentSettings.strip;
                    razorpaySetting = paymentSettings.razorpay;
                    flutterWaveSetting = paymentSettings.flutterWave;
                    Midtrans_setting = paymentSettings.midtrans;
                    OrangePaySetting = paymentSettings.orangePay;
                    MercadoPagoSetting = paymentSettings.mercadoPago;
                    XenditSetting = paymentSettings.xendit;
                    payFastSetting = paymentSettings.payfast;
                    PhonePeSetting = paymentSettings.phonepe;
                    cashfreeSetting = paymentSettings.cashfree;
                    instamojoSetting = paymentSettings.instamojo;
                    payMongoSetting = paymentSettings.paymongo;
                    foloosiSetting = paymentSettings.foloosi;
                    mtnmomoSetting = paymentSettings.mtnmomo;


                })
                .catch((error) => {
                    console.error('Error fetching payment settings:', error);
                });

            if (razorpaySetting.enable) {
                var isEnabled = razorpaySetting.enable;
                $("#isEnabled").val(isEnabled);
                var isSandboxEnabled = razorpaySetting.isSandbox;
                $("#isSandboxEnabled").val(isSandboxEnabled);
                var razorpayKey = razorpaySetting.razorpayKey;
                $("#razorpayKey").val(razorpayKey);
                var razorpaySecret = razorpaySetting.razorpaySecret;
                $("#razorpaySecret").val(razorpaySecret);
                $("#razorpay_box").show();
            }
            if (paypalSetting.enable) {
                var isEnabled = paypalSetting.enable;
                var isLive = paypalSetting.isSandbox;
                if (isLive) {
                    $("#ispaypalSandboxEnabled").val(false);
                } else {
                    $("#ispaypalSandboxEnabled").val(true);
                }
                var paypalAppId = paypalSetting.paypalClient;
                $("#paypalKey").val(paypalAppId);
                var paypalSecret = paypalSetting.paypalSecret;
                $("#paypalSecret").val(paypalSecret);
                $("#paypal_box").show();
            }
            if (payFastSetting.enable) {
                var isEnable = payFastSetting.enable;
                $("#payfast_isEnabled").val(isEnable);
                var isSandboxEnabled = payFastSetting.isSandbox;
                $("#payfast_isSandbox").val(isSandboxEnabled);
                var merchant_id = payFastSetting.merchantId;
                $("#payfast_merchant_id").val(merchant_id);
                var merchant_key = payFastSetting.merchantKey;
                $("#payfast_merchant_key").val(merchant_key);
                var return_url = payFastSetting.return_url;
                $("#payfast_return_url").val(return_url);
                var cancel_url = payFastSetting.cancel_url;
                $("#payfast_cancel_url").val(cancel_url);
                var notify_url = payFastSetting.notify_url;
                $("#payfast_notify_url").val(notify_url);
                $("#payfast_box").show();
            }
            if (payStackSetting.enable) {
                var isEnable = payStackSetting.enable;
                $("#paystack_isEnabled").val(isEnable);
                var isSandboxEnabled = payStackSetting.isSandbox;
                $("#paystack_isSandbox").val(isSandboxEnabled);
                var publicKey = payStackSetting.publicKey;
                $("#paystack_public_key").val(publicKey);
                var secretKey = payStackSetting.secretKey;
                $("#paystack_secret_key").val(secretKey);
                $("#paystack_box").show();
            }
            if (flutterWaveSetting.enable) {
                var isEnable = flutterWaveSetting.enable;
                $("#flutterWave_isEnabled").val(isEnable);
                var isSandboxEnabled = flutterWaveSetting.isSandbox;
                $("#flutterWave_isSandbox").val(isSandboxEnabled);
                var encryptionKey = flutterWaveSetting.encryptionKey;
                $("#flutterWave_encryption_key").val(encryptionKey);
                var secretKey = flutterWaveSetting.secretKey;
                $("#flutterWave_secret_key").val(secretKey);
                var publicKey = flutterWaveSetting.publicKey;
                $("#flutterWave_public_key").val(publicKey);
                $("#flutterWave_box").show();
            }
            if (XenditSetting.enable) {
                $("#xendit_enable").val(XenditSetting.enable);
                $("#xendit_apiKey").val(XenditSetting.apiKey);
                $("#xendit_image").val(XenditSetting.image);
                $("#xendit_isSandbox").val(XenditSetting.isSandbox);
                $("#xendit_box").show();
            }
            if (Midtrans_setting.enable) {
                $("#midtrans_enable").val(Midtrans_setting.enable);
                $("#midtrans_serverKey").val(Midtrans_setting.serverKey);
                $("#midtrans_image").val(Midtrans_setting.image);
                $("#midtrans_isSandbox").val(Midtrans_setting.isSandbox);
                $("#midtrans_box").show();
            }
            if (OrangePaySetting.enable) {
                $("#orangepay_enable").val(OrangePaySetting.enable);
                $("#orangepay_auth").val(OrangePaySetting.auth);
                $("#orangepay_image").val(OrangePaySetting.image);
                $("#orangepay_isSandbox").val(OrangePaySetting.isSandbox);
                $("#orangepay_clientId").val(OrangePaySetting.clientId);
                $("#orangepay_clientSecret").val(OrangePaySetting.clientSecret);
                $("#orangepay_merchantKey").val(OrangePaySetting.merchantKey);
                $("#orangepay_notifyUrl").val(OrangePaySetting.notifyUrl);
                $("#orangepay_returnUrl").val(OrangePaySetting.returnUrl);
                $("#orangepay_cancelUrl").val(OrangePaySetting.cancelUrl);
                $("#orangepay_box").show();
            }
            if (MercadoPagoSetting.enable) {
                var isEnable = MercadoPagoSetting.enable;
                $("#mercadopago_isEnabled").val(isEnable);
                var isSandboxEnabled = MercadoPagoSetting.isSandbox;
                $("#mercadopago_isSandbox").val(isSandboxEnabled);
                var PublicKey = MercadoPagoSetting.publicKey;
                $("#mercadopago_public_key").val(PublicKey);
                var AccessToken = MercadoPagoSetting.accessToken;
                $("#mercadopago_access_token").val(AccessToken);
                var AccessToken = MercadoPagoSetting.AccessToken;
                $("#mercadopago_box").show();
            }
            if (walletSetting.enable) {

                $("#wallet_box").show();
            }
            if (stripeSettings.enable) {
                var isEnabled = stripeSettings.enable;
                if (isEnabled) {
                    var isSandboxEnabled = stripeSettings.isSandbox;
                    $("#isStripeSandboxEnabled").val(isSandboxEnabled);
                    var stripeKey = stripeSettings.clientpublishableKey;
                    $("#stripeKey").val(stripeKey);
                    var stripeSecret = stripeSettings.stripeSecret;
                    $("#stripeSecret").val(stripeSecret);
                    $("#stripe_box").show();
                }
            }
            if (cashfreeSetting.enable) {
                $("#cashfree_isSandbox").val(cashfreeSetting.isSandbox);
                $("#cashfree_clientId").val(cashfreeSetting.clientId);
                $("#cashfree_clientSecret").val(cashfreeSetting.clientSecret);
                $("#cashfree_box").show();
            }
            if (PhonePeSetting.enable) {
                $("#phonepe_enable").val(PhonePeSetting.enable);
                $("#phonepe_isSandbox").val(PhonePeSetting.isSandbox);
                $("#phonepe_clientId").val(PhonePeSetting.clientId);
                $("#phonepe_clientSecret").val(PhonePeSetting.clientSecret);
                $("#phonepe_merchantId").val(PhonePeSetting.merchantId);
                $("#phonepe_flowId").val(PhonePeSetting.flowId);
                $("#phonepe_saltKey").val(PhonePeSetting.saltKey || '');
                $("#phonepe_box").show();
            }
            if (instamojoSetting.enable) {
                $("#instamojo_isSandbox").val(instamojoSetting.isSandbox);
                $("#instamojo_clientId").val(instamojoSetting.clientId);
                $("#instamojo_clientSecret").val(instamojoSetting.clientSecret);
                $("#instamojo_isEnabled").val(instamojoSetting.enable);
                $("#instamojo_box").show();
            }
            if (payMongoSetting.enable) {
                $("#paymongo_enable").val(payMongoSetting.enable);
                $("#paymongo_isSandbox").val(payMongoSetting.isSandbox);
                $("#paymongo_secret_key").val(payMongoSetting.secretKey);
                $("#paymongo_box").show();
            }
            if (foloosiSetting.enable) {
                $("#foloosi_enable").val(foloosiSetting.enable);
                $("#foloosi_isSandbox").val(foloosiSetting.isSandbox);
                $("#foloosi_merchantKey").val(foloosiSetting.merchantKey);
                $("#foloosi_box").show();
            }
            if (mtnmomoSetting.enable) {
                $("#mtnmomo_enable").val(mtnmomoSetting.enable);
                $("#mtnmomo_isSandbox").val(mtnmomoSetting.isSandbox);
                $("#mtnmomo_primaryKey").val(mtnmomoSetting.primaryKey);
                $("#mtnmomo_callback").val(mtnmomoSetting.callbackUrl);
                $("#mtnmomo_box").show();
            }

            if (codSettings.enable) {
                $("#cod_box").show();
            } else {
                $("#cod_box").remove();
            }

            $(document).on('click', '.cancel-ride', function() {
                const bookingDocRef = db.collection('booking').doc("{{ $id }}");

                bookingDocRef.get().then(doc => {
                    if (!doc.exists) {
                        showMessage("@lang('lang.booking_not_found')", 'danger');
                        return;
                    }

                    const bookingData = doc.data();

                    if (!bookingData.bookedUserId || !bookingData.bookedUserId.includes(
                            firebaseUid)) {
                        showMessage("@lang('lang.no_active_booking_found')", 'danger');
                        return;
                    }

                    if (!confirm("@lang('lang.confirm_cancel')")) return;

                    const bookedUserDocRef = bookingDocRef.collection('bookedUser').doc(
                        firebaseUid);

                    bookedUserDocRef.get().then(buDoc => {
                        if (!buDoc.exists) {
                            showMessage("@lang('lang.booking_data_not_found')", 'danger');
                            return;
                        }

                        const bookedUserData = buDoc.data();

                        // Calculate updated seats
                        const totalBooked = parseInt(bookingData.bookedSeat || "0");
                        const userBooked = parseInt(bookedUserData.bookedSeat || "0");
                        const updatedBookedSeat = Math.max(0, totalBooked - userBooked)
                            .toString();

                        // Update arrays
                        let bookedUserId = (bookingData.bookedUserId || []).filter(
                            uid => uid !== firebaseUid);

                        let cancelledUserId = bookingData.cancelledUserId || [];
                        if (!cancelledUserId.includes(firebaseUid)) {
                            cancelledUserId.push(firebaseUid);
                        }

                        const batch = db.batch();

                        batch.set(
                            bookingDocRef.collection('cancelledUser').doc(
                                firebaseUid),
                            bookedUserData
                        );

                        batch.delete(bookedUserDocRef);

                        batch.update(bookingDocRef, {
                            bookedSeat: updatedBookedSeat,
                            bookedUserId: bookedUserId,
                            cancelledUserId: cancelledUserId,
                            updatedAt: firebase.firestore.Timestamp.now()
                        });

                        batch.commit().then(() => {
                            showMessage("@lang('lang.cancel_success')", 'success');
                            window.location.href = "{{ route('ride.index') }}";
                        }).catch(e => {
                            console.error("Batch commit failed:", e);
                            showMessage("@lang('lang.update_failed')", 'danger');
                        });

                    }).catch(e => {
                        console.error("Booked user fetch failed:", e);
                        showMessage("@lang('lang.booking_data_fetch_failed')", 'danger');
                    });

                }).catch(e => {
                    console.error("Booking fetch failed:", e);
                    showMessage("@lang('lang.booking_fetch_failed')", 'danger');
                });
            });

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

            // Main booking fetch
            db.collection('booking').doc("{{ $id }}").get().then(doc => {
                if (!doc.exists) {
                    $('#bookingDetails').html(
                        '<div class="text-center py-8"><h2 class="text-xl font-semibold mb-2">{{ trans('lang.booking_not_found_title') }}</h2></div>'
                        );
                    return;
                }
                const bookingData = doc.data();
                db.collection('booking').doc("{{ $id }}").collection('bookedUser').doc(
                    firebaseUid).get().then(buDoc => {
                    if (!buDoc.exists) return;
                    const bookedUserdata = buDoc.data();
                    $('#pickupCity').text(bookedUserdata.stopOver.start_address);
                    $('#pickupAddress').text(bookedUserdata.stopOver.start_address);
                    $('#dropCity').text(bookedUserdata.stopOver.end_address);
                    $('#dropAddress').text(bookedUserdata.stopOver.end_address);
                    $('.pricePerSeat').text(formatCurrency(bookedUserdata.stopOver.price));
                    $('.availableSeats').text(bookedUserdata.bookedSeat);
                    if (bookingData.status !== "placed" && bookedUserdata.paymentStatus ===
                        false) {
                        $('.pay-now-btn').show();
                    }
                    if (bookingData.status === "onGoing") {
                        $('.sos-btn').show();
                    }
                    if (bookedUserdata.paymentStatus === true) {
                        $('.add-review').show();
                        $('.report-ride-btn').show();
                    }
                    //   1. Pre-fill and lock the amount
                    const subTotal = parseFloat(bookedUserdata.subTotal || 0);
                    $('.paymentAmount')
                        .val(formatCurrency(subTotal))
                        .prop('readonly', true)
                        .addClass('bg-gray-800 text-gray-300 cursor-not-allowed');
                    $('.paymentModalPayAmountSpan')
                        .text(formatCurrency(subTotal));


                    $('#paymentAmountRaw').val(subTotal.toFixed(2));

                    $('#tripStartFrom').text("{{ __('lang.trip_starts_from') }}: " + bookedUserdata.stopOver.start_address);
                    $('#tripEndAt').text("{{ __('lang.trip_ends_at') }}: " + bookedUserdata.stopOver.end_address);
                    $('#paymentMethodDetail').html(
                        bookedUserdata.paymentType + ' ' + 
                        (bookedUserdata.paymentStatus 
                            ? `<span class="badge bg-success ms-2">Paid</span>` 
                            : `<span class="badge bg-warning ms-2">Unpaid</span>`)
                    );
                    $('#departureDateTime').text(
                        `@lang('lang.trip_starts_on'): ${formatDate(bookingData.departureDateTime)}`);
                    $('#createdAt').text(`@lang('lang.posted_on'): ${formatDate(bookingData.createdAt)}`);                    
                    const distanceInKm = parseFloat( bookedUserdata.stopOver.distance.value) / 1000;
                    $('#distance').text(formatDistanceByAdminASettings(distanceInKm));
                    const estimatedTimeText = calculateEstimatedTime(distanceInKm);
                    $('#estimatedTime').text(estimatedTimeText);

                    // 2. Auto-select the matching payment method radio
                    const selectedType = (bookedUserdata.paymentType || '').trim();

                    if (selectedType) {
                        // First uncheck everything (safety)
                        $('input[name="payment_method"]').prop('checked', false);

                        // Find radio with matching value (case-insensitive)
                        const $matchingRadio = $('input[name="payment_method"][value="' +
                            selectedType + '"]');

                        if ($matchingRadio.length === 0) {
                            // Fallback: try case-insensitive match
                            $('input[name="payment_method"]').each(function() {
                                if ($(this).val().toLowerCase() === selectedType
                                    .toLowerCase()) {
                                    $matchingRadio = $(this);
                                    return false; // break .each()
                                }
                            });
                        }

                        if ($matchingRadio.length) {
                            $matchingRadio.prop('checked', true);

                            // Optional: scroll to / highlight the selected option
                            $matchingRadio.closest('.custom-control').addClass('bg-gray-700');
                        } else {
                            console.warn("No matching payment radio found for type:",
                                selectedType);
                        }
                    }

                });

                if (bookingData.status === "placed") {
                    $(".cancel-ride").show();
                }            

                $('#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("Booked"))
                    .removeClass()
                    .addClass('px-2 py-1 text-xs rounded-full')
                    .addClass(getStatusColor("completed"));

                // Driver info
                db.collection('users').doc(bookingData.createdBy).get().then(userDoc => {
                    if (!userDoc.exists) {
                        $('#driverName').text('Unknown');
                        return;
                    }
                    const driverData = userDoc.data();
                    driverId = driverData.id;
                    $('#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');
                    
                    //  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;

                                // Build 5 stars – same visual logic as your review submission modal
                                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;

                                // Final review item layout
                                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 & Rating – Date -->
                  <div class="flex flex-wrap items-center justify-between m1-3">
                    <!-- Ride ID (left) -->
                    <div class="text-sm text-gray-400 mt-2">
                      {{ trans('lang.ride_id') }}: 
                      <span class="text-gray-200">${rideIdDisplay}</span>
                    </div>

                    <!-- Stars + numeric rating (center/right on larger screens) -->
                    <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.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>
            `;
                        }
                    });

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

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

                    // Close when clicking outside content
                    reviewsModal.addEventListener('click', function(e) {
                        if (e.target === reviewsModal) {
                            closeReviewsModal();
                        }
                    });

                    if (driverData.travelPreference) {

                        let hasPreference = false;

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

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

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

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

                        // show main div only if at least one preference exists
                        if (hasPreference) {
                            $('.travel-preferences-div').removeClass('d-none');
                        } else {
                            $('.travel-preferences-div').addClass('d-none');
                        }

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

                    $('.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', function() {
                        const receiverId = driverData.id;
                        // Redirect to inbox page with the driver as the selected conversation
                        window.location.href = `/inbox?conversation=${receiverId}`;
                    });

                    // Correctif vérification
                    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 vehicleImages = v.vehicleImages || [];
                    const section = $('#vehicleImageSection').empty();
                    if (vehicleImages.length) {
                        let html = `<h2 class="text-white text-lg font-semibold mb-3">{{ trans('lang.vehicle_images') }}</h2>
          <div class="flex gap-3 items-center overflow-x-auto bg-gray-800 p-3 rounded-lg border border-gray-700">`;
                        vehicleImages.forEach((url, i) => {
                            html +=
                                `<img src="${url}" alt="Vehicle Image ${i+1}" class="h-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 => {
            
                $('#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>'
                    );
            });

        });

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

        function closeReviewModal() {
            $('#review-modal').removeClass('show').css('display', 'none');
            $('body').removeClass('modal-open').css('overflow', '');
        }
        $('.pay-now-btn').on('click', function() {
            $('#paymentModal').addClass('show').css('display', 'flex');
            $('body').addClass('modal-open').css('overflow', 'hidden');
        });

        // Close button & Cancel button
        $('.modal-close-btn').on('click', function() {
            closePaymentModal();
            closeReviewModal();
        });
        const userDocRef = db.collection('users').doc(firebaseUid);

        userDocRef.get().then(userDoc => {
            if (!userDoc.exists) {
                showMessage("@lang('lang.user_not_found')", 'danger');
                return;
            }

            const userData = userDoc.data();
            const currentWallet = parseFloat(userData.walletAmount || "0");
            const newWallet = currentWallet.toFixed(decimal_degits);

            let formattedWallet = currencyAtRight ?
                newWallet + ' ' + currentCurrency :
                currentCurrency + ' ' + newWallet;

            $('#wallet_amount').text(formattedWallet);

            if (userData.walletAmount != undefined && userData.walletAmount != '' && !isNaN(userData
                .walletAmount)) {
                wallet_amount = parseFloat(userData.walletAmount);
                $("#wallet").attr('disabled', false);
                $("#user_wallet_amount").val(currentWallet.toFixed(decimal_degits));
            }
        });

        async function finalCheckout() {
            payableAmount = $('.paymentAmount').val();
            if (payableAmount == 0 || payableAmount == '' || payableAmount == "0") {
                showMessage('{{ trans('lang.please_enter_amount') }}', 'danger');
                return false;
            }

            var createdDate = firebase.firestore.FieldValue.serverTimestamp();
            const topupAmount = $('#paymentAmountRaw').val() || "0";

            var payment_method = $('input[name="payment_method"]:checked').val();
            var user_id = '{{ auth()->user()->firebase_uid }}';
            var wallet_json = {
                'price': topupAmount,
                'message': 'Payment after ride',
                'userid': user_id,
                'driverId': driverId,
                'bookingId': bookingId
            }
            if (payment_method == "RazorPay") {
                var razorpayKey = $("#razorpayKey").val();
                var razorpaySecret = $("#razorpaySecret").val();

                $.ajax({
                    type: 'POST',
                    url: "