@extends('front.layouts.app')

@section('content')

<style>


    .modal {
            height: 338px;

        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        width: 350px;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        text-align: center;
    }

    .modal-content h2 {
        color: #07b0cf;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .modal-content p {
        font-size: 16px;
        margin: 5px 0;
        color: #333;
    }

    .modal-content label {
        display: block;
        font-size: 16px;
        margin: 10px 0;
        color: #333;
    }

    .modal-content input {
        width: 100%;
        padding: 8px;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .modal-buttons {
        margin-top: 20px;
    }

    .send-btn {
        background: #07b0cf;
        font-size: 16px;
        color: white;
        text-transform: capitalize;
        font-weight: bold;
        padding: 12px 20px;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        display: inline-block;
        transition: 0.3s;
    }

    .send-btn:hover {
        background: #0599b5;
    }

    .cancel-btn {
        background: #ccc;
        font-size: 16px;
        color: black;
        text-transform: capitalize;
        font-weight: bold;
        padding: 12px 20px;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        display: inline-block;
        margin-left: 10px;
        transition: 0.3s;
    }

    .cancel-btn:hover {
        background: #bbb;
    }



 .riders-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 10px;
    scroll-behavior: smooth;
    transition: all 0.3s ease-in-out;
}

.riders-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.riders-scroll-container::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}

.rider-card {
    min-width: 319px;
    background: #fff;
    border: 1px solid #07b0cf;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    cursor: pointer;
    flex-shrink: 0;
    height: 180px;
}

.rider-card:hover {
    transform: scale(1.05);
    background-color: #f9f9f9;
}

.rider-info {
    flex: 1;
}

.rider-car-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-left: 10px;
}


    /* Shimmer effect for loading */
/*@keyframes shimmer {*/
/*    0% {*/
/*        background-position: -500px 0;*/
/*    }*/
/*    100% {*/
/*        background-position: 500px 0;*/
/*    }*/
/*}*/

/*.shimmer-effect {*/
/*    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);*/
/*    background-size: 200% 100%;*/
/*    animation: shimmer 1.5s infinite linear;*/
/*}*/

/* Add border and blur effect while shimmer is active */
/*#rideDetails.shimmer-active {*/
    border: 2px solid #07b0cf;  /* Border color */
    border-radius: 8px;  /* Rounded border */
/*    padding: 15px;*/
    backdrop-filter: blur(5px); /* Blur effect */
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
/*}*/

/*.notification-item {*/
/*    padding: 10px;*/
/*    border-bottom: 1px solid #ddd;*/
/*    cursor: pointer;*/
/*}*/

/*.notification-item:hover {*/
/*    background-color: #f5f5f5;*/
/*}*/

/*.notifications-dropdown {*/
/*    display: none;*/
/*    opacity: 0;*/
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in animation */
/*}*/

/* Ride Details Styles */
/*#rideDetails {*/
    display: none; /* Initially hidden */
/*    padding: 15px;*/
/*    background: #f9f9f9;*/
/*    border: 0px solid #ddd;*/
/*    margin-top: 20px;*/
/*}*/

/* Car Icon Styles */
/*#rideDetails .car-icon {*/
/*    position: absolute;*/
/*    top: 10px;*/
/*    right: 10px;*/
/*    width: 50px;*/
/*    height: 50px;*/
    border-radius: 50%; /* Make it circular */
/*    background: url('https://service.demowebsitelinks.com/quickride/public/front/Uber-PNG-Photos.png') no-repeat center center;*/
    background-size: cover; /* Ensure the image covers the circle */
/*    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);*/
/*}*/



/*.start-ride-btn {*/
/*    display: inline-block;*/
/*    padding: 10px 20px;*/
/*    background-color: #07b0cf;*/
/*    color: white;*/
/*    border-radius: 5px;*/
/*    text-decoration: none;*/
/*    margin-top: 15px;*/
/*}*/

/*.start-ride-btn:hover {*/
/*    background-color: #008c9e;*/
/*}*/



/* Shimmer effect for loading */
@keyframes shimmer {
    0% {
        background-position: -500px 0;
    }
    100% {
        background-position: 500px 0;
    }
}

.shimmer-effect {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

/* Add border and blur effect while shimmer is active */
#rideDetails.shimmer-active {
    border: 1px solid #dddddd;  /* Border color */
    border-radius: 8px;  /* Rounded border */
    padding: 15px;
    backdrop-filter: blur(5px); /* Blur effect */
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    position: relative; /* To position the car icon */
}

/* Ride Details Styles */
#rideDetails {
    display: none; /* Initially hidden */
    padding: 15px;
    background: #f9f9f9;
    border: 0px solid #ddd;
    margin-top: 20px;
    position: relative; /* Ensure car icon is positioned inside */
}

/* Car Icon Styles */
#rideDetails .car-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Make it circular */
    background: url('https://service.demowebsitelinks.com/quickride/public/front/Uber-PNG-Photos.png') no-repeat center center;
    background-size: cover;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* Start Ride Button Styles */
.start-ride-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #07b0cf;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
}

.start-ride-btn:hover {
    background-color: #008c9e;
}

/* Notification Item Styles */
.notification-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.notification-item:hover {
    background-color: #f5f5f5;
}

/* Notifications Dropdown Styles */
.notifications-dropdown {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in animation */
    position: absolute;
    top: 55px;
    right: 20px;
    background: #fff;
    border: 1px solid #ddd;
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    z-index: 9999;
}

/* Notification Badge Styles */
#notificationBadge {
    position: absolute;
    top: 5px;
    right: -11px;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 50%;
    background-color: red;
    color: white;
    font-weight: bold;
    display:inline-block;
}




</style>
 <section class="main-slider main-slider--inner p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-slide">
                <div class="slide-inner bg-image" data-background="{{ asset('front_ui/images/mainBnnr.webp') }}">
                    <div class="container">
                        <div class="row aic">
                            <div class="col-lg-6">
                                <div class="slideOne">
                                    <h1>Ride</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

  <div id="rideDetails">
          <p>Waiting for ride confirmation...</p>
      </div>

    <section class="ride-page">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="driverpg-content">
                        <form id="location_form">
                        <h2 class="main-head text-black">Request a ride for now or later</h2>
                        <p>Add your trip details, hop in, and go.</p>

                        <div class="ride-locaion">
                            <div class="rideBar"></div>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="enter-loc">
                                        <!--<input type="text" id="origin-input" name="s_address" placeholder="Enter pickup location" required>-->
                                         <input class="form-control" type="text" id="origin-input" required name="s_address" placeholder="Enter pickup location">
                                        <!--<img src="{{ asset('front_ui/images/ridimg2.png') }}" class="img-fluid arrowImg" alt="">-->
                                        <img src="{{ asset('front_ui/images/locsphere.png') }}" class="img-fluid sphereImg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="enter-destin">
                                        <input class="form-control" type="text" id="destination-input" required name="d_address" placeholder="Enter destination location">
                                          <img src="{{ asset('front_ui/images/locsphere.png') }}" class="img-fluid sphereImg" alt="">
                                    </div>
                                    <button type="button" class="themeBtn" onclick="calculateRoute()">Search</button>
                                </div>
                            </div>


                        </div>
                    </form>


                    <div id="distance"></div>
                <div id="cost"></div>
                <!-- Map Container -->


                    </div>
                </div>



                <div class="col-md-6">
                    <!--<figure class="rideImgs">-->
                    <!--    <img src="{{ asset('front_ui/images/rideimg1.png') }}" class="img-fluid" alt="">-->
                    <!--</figure>-->
                </div>
                <!--<div class="col-md-6">-->
                <!--    <div class="sugesstion-wrap">-->
                <!--        <h2 class="main-head text-black">Suggestions</h2>-->
                <!--        <div class="rideSuggest">-->
                <!--            <div class="row align-items-center">-->
                <!--                <div class="col-md-8">-->
                <!--                    <h6>Ride</h6>-->
                <!--                    <p>Go anywhere with Quick Ride. Request a ride, hope in and go.</p>-->
                <!--                    <a href="#" class="themeBtn">Details</a>-->
                <!--                </div>-->
                <!--                <div class="col-md-4">-->
                <!--                    <figure>-->
                <!--                        <img src="{{ asset('front_ui/images/rideimg3.png') }}" class="img-fluid" alt="">-->
                <!--                    </figure>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->


                               <div id="map" style="width: 100%; height: 400px;"></div>

                               <!--<h3>Available Riders</h3>-->
<div id="riders-list" class="riders-scroll-container"></div>


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



    <section class="get-main rideMain">
        <div class="container">
            <h2 class="main-head text-black">Use the Quick Ride app to help you travel your way</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="get-drive">
                        <figure>
                            <img src="{{ asset('front_ui/images/rideimg4.png') }}" class="w-100" alt="img">
                        </figure>
                        <h4>Ride Options</h4>
                        <p>There’s more than one way to move with Quick Ride, no matter where you are or where you’re
                            headed next.</p>
                        <a href="#" class="themeBtn">Search ride options</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="get-drive">
                        <figure>
                            <img src="{{ asset('front_ui/images/rideimg5.png') }}" class="w-100" alt="img">
                        </figure>
                        <h4>700+ airports</h4>
                        <p>You can request a ride to and from most major airports. Schedule a ride to the airport for
                            one less thing to worry about.</p>
                        <a href="#" class="themeBtn">Search airports</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="get-drive">
                        <figure>
                            <img src="{{ asset('front_ui/images/rideimg6.png') }}" class="w-100" alt="img">
                        </figure>
                        <h4>10,000+ cities</h4>
                        <p>The app is available in thousands of cities worldwide, so you can request a ride even when
                            you’re far from home.</p>
                        <a href="#" class="themeBtn">Search cities</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="businessInner">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="bussWrap">
                        <h2 class="main-head text-black">Looking for business solutions?</h2>
                        <p>Get information about how companies leverage Quick Ride:</p>
                        <ul>
                            <li><a href="#"><u>Business travel</u></a></li>
                            <li><a href="#"><u>Courtesy rides</u></a></li>
                            <li><a href="#"><u>Meal programs</u></a></li>
                            <li><a href="#"><u>Item delivery</u></a></li>
                        </ul>
                        <div class="d-flex align-items-center">
                            <a href="javascript:;" class="themeBtn">get started</a>
                            <span><a href="#"><u>check out our solutions</u></a></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <figure class="rideImgs">
                        <img src="{{ asset('front_ui/images/rideimg7.png') }}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="drive-faq">
        <div class="container">
            <h2 class="main-head text-black">Frequently asked questions</h2>
            <div class="row justify-content-center">

                <div class="col-md-12 " data-aos="fade-right">
                    <div id="accordion">
                        <div class="card bg-yellow">
                            <div id="headingOne ">
                                <h5 class="mb-0 ">
                                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
                                        aria-expanded="true" aria-controls="collapseOne">Can I have a lost item
                                        delivered to me?
                                        <i class="far fa-arrow-down"></i>
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                data-parent="#accordion">
                                <div class="card-body">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                        unknown printer took a galley of type and scrambled it to make a type specimen
                                        book. It has survived not only five centuries, but also the leap into electronic
                                        typesetting, remaining essentially unchanged.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card ">
                            <div id="headingTwo ">
                                <h5 class="mb-0">
                                    <button class="btn btn-link collapsed" data-toggle="collapse"
                                        data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Can I rent a car using Quick Ride?
                                        <i class="far fa-arrow-down"></i>
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                data-parent="#accordion">
                                <div class="card-body">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                        unknown printer took a galley of type and scrambled it to make a type specimen
                                        book. It has survived not only five centuries, but also the leap into electronic
                                        typesetting, remaining essentially unchanged.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div id="headingthre">
                                <h5 class="mb-0">
                                    <button class="btn btn-link collapsed" data-toggle="collapse"
                                        data-target="#collapsethre" aria-expanded="false" aria-controls="collapsethre">
                                        Can I request a ride that picks up friends in different locations?
                                        <i class="far fa-arrow-down"></i>
                                    </button>
                                </h5>
                            </div>
                            <div id="collapsethre" class="collapse" aria-labelledby="headingthre"
                                data-parent="#accordion">
                                <div class="card-body">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                        unknown printer took a galley of type and scrambled it to make a type specimen
                                        book. It has survived not only five centuries, but also the leap into electronic
                                        typesetting, remaining essentially unchanged.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div id="headingfour">
                                <h5 class="mb-0">
                                    <button class="btn btn-link collapsed" data-toggle="collapse"
                                        data-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour">
                                        Can I request a taxi on Quick Ride?
                                        <i class="far fa-arrow-down"></i>
                                    </button>
                                </h5>
                            </div>
                            <div id="collapsefour" class="collapse" aria-labelledby="headingfour"
                                data-parent="#accordion">
                                <div class="card-body">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                        unknown printer took a galley of type and scrambled it to make a type specimen
                                        book. It has survived not only five centuries, but also the leap into electronic
                                        typesetting, remaining essentially unchanged.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div id="headingfive">
                                <h5 class="mb-0">
                                    <button class="btn btn-link collapsed" data-toggle="collapse"
                                        data-target="#collapsefive" aria-expanded="false" aria-controls="collapsefive">
                                        Is there an Quick Ride option for 5 people?
                                        <i class="far fa-arrow-down"></i>
                                    </button>
                                </h5>
                            </div>
                            <div id="collapsefive" class="collapse" aria-labelledby="headingfive"
                                data-parent="#accordion">
                                <div class="card-body">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                        unknown printer took a galley of type and scrambled it to make a type specimen
                                        book. It has survived not only five centuries, but also the leap into electronic
                                        typesetting, remaining essentially unchanged.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ride-way">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="rideway-content">
                        <h2 class="main-head text-black">Do more in the app</h2>
                        <div class="download-qr">
                            <figure>
                                <img src="{{ asset('front_ui/images/qrcode.png') }}" class="img-fluid" alt="img">
                            </figure>
                            <div>
                                <h5>download the Quick Ride app</h5>
                                <span>Scan to download</span>
                            </div>
                            <a href="#"><i class="fal fa-long-arrow-right"></i></a>
                        </div>
                    </div>

                    <div class="signup-ride">
                        <h2 class="main-head text-black">Sign up to Quick Ride</h2>
                        <form>
                            <input type="text" placeholder="enter your email address">
                            <button><i class="fal fa-long-arrow-right"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Ride Request Modal -->
<div id="rideRequestModal" class="modal" style="display:none;">
    <!--<div class="modal-content">-->
        <h2>Request Ride</h2>
        <p id="riderDetails"></p>
        <p id="estimatedCost1"></p> <!-- Shows the cost calculation -->
        <label for="rideAmount">Enter Offer Amount ($):</label>
        <input type="number" id="rideAmount" min="1" step="0.5" required>
        <div class="modal-buttons">
            <button class="send-btn" onclick="sendRideRequest()">Send Request</button>
            <button class="cancel-btn" onclick="closeModal()">Cancel</button>
        </div>
    <!--</div>-->
</div>


    <script>
		base_url = "{{ env('APP_URL') }}";
	</script>
    <script src="{{ asset('front_dashboard/js/jquery.min.js') }}"></script>
    <script src="{{ asset('front_dashboard/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('front_dashboard/js/owl.carousel.js') }}"></script>
    <script>
        $("#left_menu_open").click(function(){
            $("#left_menu").addClass("open");
        });
        $(".close").click(function(){
            $("#left_menu").removeClass("open");
        });

        $(".hamburger").click(function(){
            $(".side_menu").toggleClass("open");
			$(this).toggleClass("is-active");
        });
         $(document).click(function(event) {

          //if you click on anything except the modal itself or the "open modal" link, close the modal
          if (!$(event.target).closest(".hamburger,.is-active").length) {
            $("body").find("#left_menu").removeClass("open");
            $("body").find(".hamburger").removeClass("is-active");
          }
        });
		var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};

		var	site_url ="{{url('/')}}";
  <!-- JavaScript to Mark Notification as Read -->


    //  // Function to toggle the visibility of the notifications
    // function toggleNotifications() {
    //     const notificationsList = document.getElementById('notificationsList');
    //     const notificationBadge = document.getElementById('notificationBadge');

    //     // Toggle visibility of the notifications list
    //     if (notificationsList.style.display === "none") {

    //         notificationsList.style.display = "block"; // Show the notifications list
    //         notificationBadge.style.display = "none"; // Hide the badge (assuming it's for unread notifications)
    //     } else {
    //         notificationsList.style.display = "none"; // Hide the notifications list
    //         notificationBadge.style.display = "block"; // Show the badge again (if there are new notifications)
    //     }
    // }

    // // Example function to simulate new notifications
    // function simulateNewNotification() {
    //     const notificationBadge = document.getElementById('notificationBadge');
    //     const notificationsList = document.getElementById('notificationsList');

    //     // Show the notification badge
    //     notificationBadge.style.display = "block";

    //     // Add a new notification to the list (for example purposes)
    //     const newNotification = document.createElement('div');
    //     newNotification.classList.add('notification-item');
    //     newNotification.textContent = "New notification message!";
    //     notificationsList.appendChild(newNotification);
    // }

    // // Simulate new notifications after a delay (for testing purposes)
    // setTimeout(simulateNewNotification, 3000); // Simulate new notification after 3 seconds


    function markAsRead(notificationId, element) {
        fetch(baseUrl + '/mark-notification/' + notificationId, {
            method: 'GET',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(() => {
            element.parentElement.remove();  // Remove notification from dropdown
        }).catch(error => console.error('Error:', error));
    }

</script>



    <script type="text/javascript" src="{{asset('front/js/slick.min.js')}}"></script>
    <script type="text/javascript" src="{{ asset('front/js/map.js') }}"></script>
<script src="https://js.pusher.com/8.4.0/pusher.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAlsWW4P_jWEKbCBfW64LRQq_ZgPX8zA8&libraries=places&callback=initMap" async defer></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        loadNotificationCount();
    });
let BASE_URL =  "{{ env('APP_URL') }}"; // ✅ Change this if needed


// fetch notifications

Pusher.logToConsole = true;

let userId = {{ auth()->user()->id }};
const pusher = new Pusher('bd4b3cd49bc50d7aabfa', {
    cluster: 'ap2'
});

console.log('Subscribing to: user.' + userId);
const channel = pusher.subscribe('user.' + userId);

// Listen for the Pusher event
channel.bind('Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', function (data) {
    console.log('📩 Notification received:', data);

    const badge = document.getElementById('notificationBadge');
    const notificationsList = document.getElementById('notificationsList');

    const notificationItem = document.createElement('div');
    notificationItem.classList.add('notification-item');
    notificationItem.innerHTML = `
        <p>${data.message}</p>
        <a href="/user/rides/${data.ride_id}">View Ride</a>
    `;

    notificationItem.addEventListener('click', function () {
        notificationItem.style.backgroundColor = '#f1f1f1';
    });

    notificationsList.prepend(notificationItem);

    // Update badge count
    badge.innerText = parseInt(badge.innerText || 0) + 1;
    badge.style.display = 'inline-block';
});

// Function to fetch notifications via AJAX (unchanged from your previous code)
function fetchNotifications() {
    fetch(`${BASE_URL}/user/notifications`)
        .then(response => response.json())
        .then(data => {
            const badge = document.getElementById('notificationBadge');
            const notificationsList = document.getElementById('notificationsList');

            // Clear any previous notifications
            notificationsList.innerHTML = '';

            // Update notification badge
            if (data.notifications.length > 0) {
                badge.style.display = 'inline-block';
                badge.innerText = data.count; // Update with the number of new notifications
            } else {
                badge.style.display = 'none';
                notificationsList.innerHTML = '<p>No new notifications.</p>';
            }

            // Display each notification
            data.notifications.forEach(notification => {
                const notificationItem = document.createElement('div');
                notificationItem.classList.add('notification-item');
                notificationItem.innerHTML = `
                    <p>${notification.data.message}</p>
                    <a href="/user/rides/${notification.data.ride_id}">View Ride</a>
                `;
                // Optionally mark as read when clicked
                notificationItem.addEventListener('click', function () {
                    markNotificationAsRead(notification.id);
                    notificationItem.style.backgroundColor = '#f1f1f1';  // Mark as read visually
                });

                notificationsList.appendChild(notificationItem);
            });
        })
        .catch(error => console.error('Error fetching notifications:', error));
}

// Call the function to fetch notifications on page load
fetchNotifications();
// let BASE_URL = "https://service.demowebsitelinks.com/quickride/public"; // ✅ Change this if needed

         // Function to fetch notifications and display them
        // function fetchNotifications() {
        //     fetch(`${BASE_URL}/user/notifications`)
        //         .then(response => response.json())
        //         .then(data => {
        //             const notificationBadge = document.getElementById('notificationBadge');
        //             const notificationsList = document.getElementById('notificationsList');

        //             // Update the notification count
        //             if (data.length > 0) {
        //                 notificationBadge.style.display = 'inline-block';
        //                 notificationBadge.innerText = data.length;
        //             } else {
        //                 notificationBadge.style.display = 'none';
        //             }

        //             // Display notifications in the dropdown
        //             notificationsList.innerHTML = '';  // Clear the current list
        //             data.forEach(notification => {
        //                 const notificationItem = document.createElement('div');
        //                 notificationItem.classList.add('notification-item');
        //                 notificationItem.innerHTML = `
        //                     <p>${notification.data.message}</p>
        //                     <a href="/user/rides/${notification.data.ride_id}">View Ride</a>
        //                     <button onclick="markNotificationAsRead(${notification.id})">Mark as Read</button>
        //                 `;
        //                 notificationsList.appendChild(notificationItem);
        //             });

        //             // Show notifications list
        //             notificationsList.style.display = 'block';
        //         })
        //         .catch(error => console.error('Error fetching notifications:', error));
        // }

        // // Function to mark a notification as read
        // function markNotificationAsRead(notificationId) {
        //     fetch(`${BASE_URL}/user/notifications/${notificationId}/read`, {
        //         method: 'POST',
        //         headers: {
        //             'Content-Type': 'application/json',
        //             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        //         },
        //     })
        //     .then(response => response.json())
        //     .then(data => {
        //         console.log(data.message);
        //         fetchNotifications();  // Refresh notifications list
        //     })
        //     .catch(error => console.error('Error marking notification as read:', error));
        // }

        // // Poll for new notifications every 10 seconds
        // setInterval(fetchNotifications, 10000);

        // // Fetch notifications when the page loads
        // document.addEventListener('DOMContentLoaded', function() {
        //     fetchNotifications();
        // });

      // Toggle the visibility of the notifications dropdown


        // Function to toggle notifications visibility with animation
        // let notificationCount = 0;  // To keep track of total notifications

        // // Function to toggle notifications visibility with animation
        // function toggleNotifications() {
        //     const notificationsList = document.getElementById('notificationsList');
        //     const notificationBadge = document.getElementById('notificationBadge');

        //     if (notificationsList.style.display === "none") {
        //         // Simulating adding a new notification
        //         notificationCount++;  // Increment notification count
        //         notificationBadge.innerText = notificationCount;  // Update badge text with new count
        //         notificationBadge.style.display = "inline-block";  // Make badge visible

        //         // Add shimmer effect while the list is loading
        //         notificationsList.innerHTML = '<div class="shimmer-effect" style="height: 20px;"></div>'; // Temporary shimmer content

        //         setTimeout(() => {
        //             // Replace shimmer with real notification content after 1 second (simulating load)
        //             notificationsList.innerHTML = `
        //                 <div class="notification-item" onclick="viewRide(23)">
        //                     Your ride #23 has accepted your request.
        //                 </div>
        //             `;
        //             notificationsList.style.display = "block"; // Show the notification list
        //             notificationsList.style.opacity = "1"; // Fade in the list
        //         }, 1000); // Simulate loading delay of 1 second

        //     } else {
        //         notificationsList.style.opacity = "0"; // Fade out the list
        //         setTimeout(() => {
        //             notificationsList.style.display = "none"; // Hide the notification list after the animation
        //         }, 300);
        //     }
        // }

        // Global variable to track unread notifications count

function loadNotificationCount() {
    const notificationBadge = document.getElementById('notificationBadge');

    fetch(`${BASE_URL}/unread-notifications`)
        .then(response => response.json())
        .then(data => {
            if (data && data.status === 'success' && Array.isArray(data.notifications)) {
                const count = data.notifications.length;

                if (count > 0) {
                    notificationBadge.innerText = count;
                    notificationBadge.style.display = "inline-block";
                } else {
                    notificationBadge.style.display = "none";
                }
            }
        })
        .catch(error => {
            console.error('Error loading notification count:', error);
            notificationBadge.style.display = "none";
        });
}
let notificationCount = 0;

// Function to toggle notifications visibility with animation
function toggleNotifications() {
    const notificationsList = document.getElementById('notificationsList');
    const notificationBadge = document.getElementById('notificationBadge');

    // Check if the list is already shown or hidden
    if (notificationsList.style.display === "none" || notificationsList.style.display === "") {
        // Make an AJAX call to get the unread notifications
        fetch(`${BASE_URL}/unread-notifications`)
        // fetch('https://service.demowebsitelinks.com/quickride/public/unread-notifications')
            .then(response => response.json())
            .then(data => {
                if (data && data.status === 'success' && Array.isArray(data.notifications)) {
                    const notifications = data.notifications;
                    const notificationCount = notifications.length;  // Get the count of notifications

                    if (notificationCount > 0) {
                        notificationBadge.innerText = notificationCount;  // Update badge text with new count
                        notificationBadge.style.display = "inline-block";  // Show badge if there are unread notifications
                    } else {
                        notificationBadge.style.display = "none";  // Hide badge if no unread notifications
                        notificationsList.innerHTML = '<p>No new notifications</p>';  // Show a message if no notifications
                        notificationsList.style.display = "block"; // Ensure the list shows even when empty
                        return;  // Exit function early if there are no notifications
                    }

                    // Add shimmer effect while the list is loading
                    notificationsList.innerHTML = '<div class="shimmer-effect" style="height: 20px;"></div>'; // Temporary shimmer content

                    // Simulate loading delay
                    setTimeout(() => {
                        // Replace shimmer with real notification content
                        notificationsList.innerHTML = notifications.map(notification => {
                            return `
                                <div class="notification-item" onclick="viewNotification('${notification.id}', this)">
                                    ${notification.data?.message || 'No message available'} <!-- Handle missing messages -->
                                </div>
                            `;
                        }).join('');
                        notificationsList.style.display = "block"; // Show the notification list
                        notificationsList.style.opacity = "1"; // Fade in the list
                    }, 1000); // Simulate loading delay of 1 second
                } else {
                    console.error('No notifications or unexpected data format.');
                    notificationBadge.style.display = "none";  // Hide badge if no notifications or if data is malformed
                    notificationsList.innerHTML = '<p>No new notifications</p>';  // Show message when no notifications
                    notificationsList.style.display = "block"; // Make sure the list shows with a message
                }
            })
            .catch(error => {
                console.error('Error fetching notifications:', error);
                notificationBadge.style.display = "none";  // Hide badge in case of error
                notificationsList.innerHTML = '<p>No new notifications</p>';  // Show message in case of error
                notificationsList.style.display = "block"; // Make sure the list shows with a message
            });
    } else {
        // Fade out and hide the notification list
        notificationsList.style.opacity = "0";
        setTimeout(() => {
            notificationsList.style.display = "none"; // Hide the notification list after animation
        }, 300);
    }
}



// // Function to view the notification and ride details when clicked
// function viewNotification(notificationId, notificationItem) {
//     alert('awd');
//     // Mark notification as read in the backend
//     fetch(`https://service.demowebsitelinks.com/quickride/public/mark-notification-read/${notificationId}`, {
//         method: 'POST',
//         headers: {
//             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
//         }
//     })
//     .then(response => response.json())
//     .then(data => {
//         console.log(data.message);

//         // Remove the notification from the list after it's marked as read
//         notificationItem.remove();  // This will remove the clicked notification from the list

//         // Update the notification count
//         notificationCount--;
//         document.getElementById('notificationBadge').innerText = notificationCount;

//         // If there are no more notifications, hide the badge
//         if (notificationCount === 0) {
//             document.getElementById('notificationBadge').style.display = 'none';
//         }

//         // Now show the ride details
//         viewRide(data.ride_id);  // Assuming the backend sends the ride ID with the notification data
//     })
//     .catch(error => console.error('Error marking notification as read:', error));
// }

// function viewNotification(notificationId, notificationItem) {
//     alert('awd');
//     // Mark notification as read in the backend
//     fetch(`https://service.demowebsitelinks.com/quickride/public/mark-notification-read/${notificationId}`, {
//         method: 'POST',
//         headers: {
//             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
//         }
//     })
//     .then(response => response.json())
//     .then(data => {
//         console.log(data.message);

//         // Remove the notification from the list after it's marked as read
//         notificationItem.remove();  // This will remove the clicked notification from the list

//         // Update the notification count
//         notificationCount--;
//         document.getElementById('notificationBadge').innerText = notificationCount;

//         // If there are no more notifications, hide the badge
//         if (notificationCount === 0) {
//             document.getElementById('notificationBadge').style.display = 'none';
//         }

//         // Now show the ride details
//         viewRide(data.ride_id);  // Assuming the backend sends the ride ID with the notification data
//     })
//     .catch(error => console.error('Error marking notification as read:', error));
// }
function viewNotification(notificationId, notificationItem) {
    // alert('awd');
    // Mark notification as read in the backend
    fetch(`${BASE_URL}/mark-notification-read/${notificationId}`, {
    // fetch(`https://service.demowebsitelinks.com/quickride/public/mark-notification-read/${notificationId}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log(data.message);

        // Remove the notification from the list after it's marked as read
        notificationItem.remove();  // This will remove the clicked notification from the list

        // Update the notification count
        notificationCount--;
        document.getElementById('notificationBadge').innerText = notificationCount;

        // If there are no more notifications, hide the badge
        if (notificationCount === 0) {
            document.getElementById('notificationBadge').style.display = 'none';
        }

        // Now show the ride details and the rider ID
        console.log('Ride ID:', data.ride_id);  // Access the ride_id
        console.log('Rider ID:', data.rider_id);  // Access the rider_id
        viewRide(data.rider_id);  // Pass both IDs to your ride details function
    })
    .catch(error => console.error('Error marking notification as read:', error));
}


// Function to view the ride details when a notification is clicked
function viewRide(rideId) {
    const notificationsList = document.getElementById('notificationsList');
    const rideDetailsDiv = document.getElementById("rideDetails");

    // Close the notifications list when viewing the ride
    notificationsList.style.opacity = "0"; // Fade out the list
    setTimeout(() => {
        notificationsList.style.display = "none"; // Hide the notification list after the animation
    }, 300);

    // Show the ride details div and add shimmer effect
    rideDetailsDiv.style.display = "block";  // Show the ride details div
    rideDetailsDiv.classList.add("shimmer-active");  // Add shimmer and border/blur effect

    // Shimmer effect for ride details before fully loading them
    rideDetailsDiv.innerHTML = `
        <div class="shimmer-effect" style="height: 40px;"></div>
        <div class="shimmer-effect" style="height: 20px; margin-top: 10px;"></div>
    `;

    // Simulate loading of ride details
    setTimeout(() => {
        // Simulating ride data after some time (e.g., fetched from backend)
        const ride = {
            id: rideId,
            rider_name: "John Doe",
            amount: "25.50"
        };

        // After the shimmer effect, display the actual ride details
        rideDetailsDiv.innerHTML = `
            <p>Rider: ${ride.rider_name}</p>
            <p>Amount: $${ride.amount}</p>
            <a href="#" onclick="startRide(${ride.id})" class="start-ride-btn">Start Ride</a>
        `;

        // Add the car icon to the ride details div
        const carIcon = document.createElement('div');
        carIcon.classList.add('car-icon');
        rideDetailsDiv.appendChild(carIcon);

        // Remove shimmer effect once data is loaded
        rideDetailsDiv.classList.remove("shimmer-active");
    }, 2000); // Simulate the loading delay for ride details (2 seconds)
}

// Function to start the ride
function startRide(rideId) {
    console.log(rideId);

    alert(`Starting ride #${rideId}`);
    // Implement your ride-starting logic here
}







    /*    // Fetch notifications from the server
        function fetchNotifications() {
            fetch(`${BASE_URL}/user/notifications`)  // Make sure this URL is correct and routes to your controller
                .then(response => response.json())
                .then(data => {
                    const badge = document.getElementById('notificationBadge');
                    const notificationsList = document.getElementById('notificationsList');

                    // Clear any previous notifications
                    notificationsList.innerHTML = '';

                    // Update notification badge
                    if (data.notifications.length > 0) {
                        badge.style.display = 'inline-block';
                        badge.innerText = data.count; // Update with the number of new notifications
                    } else {
                        badge.style.display = 'none';
                        notificationsList.innerHTML = '<p>No new notifications.</p>'; // Show a message if no notifications
                    }

                    // Display each notification
                    data.notifications.forEach(notification => {
                        const notificationItem = document.createElement('div');
                        notificationItem.classList.add('notification-item');
                        notificationItem.innerHTML = `
                            <p>${notification.data.message}</p>
                            <a href="/user/rides/${notification.data.ride_id}">View Ride</a>
                        `;
                        // Optionally mark as read when clicked
                        notificationItem.addEventListener('click', function() {
                            markNotificationAsRead(notification.id);
                            notificationItem.style.backgroundColor = '#f1f1f1';  // Mark as read visually
                        });

                        notificationsList.appendChild(notificationItem);
                    });
                })
                .catch(error => console.error('Error fetching notifications:', error));
        }
*/

        // Mark notification as read
        function markNotificationAsRead(notificationId) {
            fetch(`${BASE_URL}/user/notifications/${notificationId}/read`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
            })
            .then(response => response.json())
            .then(data => {
                console.log('Notification marked as read:', data);
            })
            .catch(error => console.error('Error marking notification as read:', error));
        }




     let map, directionsService, directionsRenderer, riderMarkers = [];
        let baseFare = 2; // Base fare in $
        let perKmFare = 1.5; // Cost per km in $
        let selectedRider = null;

        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 37.7749, lng: -122.4194 },
                zoom: 12
            });

            directionsService = new google.maps.DirectionsService();
            directionsRenderer = new google.maps.DirectionsRenderer();
            directionsRenderer.setMap(map);



            new google.maps.places.Autocomplete(document.getElementById("origin-input"));
            new google.maps.places.Autocomplete(document.getElementById("destination-input"));
        }

        // window.calculateRoute = function () {
        //     const origin = document.getElementById("origin-input").value;
        //     const destination = document.getElementById("destination-input").value;

        //     if (!origin || !destination) {
        //         alert("Please enter both source and destination");
        //         return;
        //     }

        //     const request = {
        //         origin: origin,
        //         destination: destination,
        //         travelMode: google.maps.TravelMode.DRIVING
        //     };

        //     directionsService.route(request, function (result, status) {
        //         if (status === google.maps.DirectionsStatus.OK) {
        //             directionsRenderer.setDirections(result);

        //             let startLocation = result.routes[0].legs[0].start_location;
        //             let endLocation = result.routes[0].legs[0].end_location;

        //             let requestData = {
        //                 s_address: origin,
        //                 s_latitude: startLocation.lat(),
        //                 s_longitude: startLocation.lng(),
        //                 d_address: destination,
        //                 d_latitude: endLocation.lat(),
        //                 d_longitude: endLocation.lng()
        //             };

        //             fetch(`${BASE_URL}/store-user-ride`, {
        //                 method: "POST",
        //                 headers: {
        //                     "Content-Type": "application/json",
        //                     "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')

        //                 },
        //                 body: JSON.stringify(requestData)
        //             })
        //             .then(response => response.json())
        //             .then(data => {
        //                 if (data.success) {
        //                     alert("Ride saved successfully!");
        //                 } else {
        //                     alert("Failed to save ride: " + data.message);
        //                 }
        //                 fetchAvailableRiders(startLocation.lat(), startLocation.lng());

        //                 console.log("Ride saved:", data);
        //             })
        //             .catch(error => console.error("Error saving ride:", error));
        //         } else {
        //             alert("Could not find route.");
        //         }
        //     });
        // };

          let startLocation, endLocation;

          window.calculateRoute = function () {
                const origin = document.getElementById("origin-input").value;
                const destination = document.getElementById("destination-input").value;

                if (!origin || !destination) {
                    alert("Please enter both source and destination");
                    return;
                }

                const request = {
                    origin: origin,
                    destination: destination,
                    travelMode: google.maps.TravelMode.DRIVING
                };

                directionsService.route(request, function (result, status) {
                    if (status === google.maps.DirectionsStatus.OK) {
                        directionsRenderer.setDirections(result);

                        startLocation = result.routes[0].legs[0].start_location;
                        endLocation = result.routes[0].legs[0].end_location;

                        // Get the duration (in minutes) and distance (in kilometers) from the route
                        let durationInMinutes = result.routes[0].legs[0].duration.value / 60; // Convert seconds to minutes
                        let distanceInKm = result.routes[0].legs[0].distance.value / 1000; // Convert meters to kilometers

                        // Calculate the estimated cost and show it in the modal
                        let estimatedCost = calculateEstimatedCost(distanceInKm, durationInMinutes);
                        document.getElementById("estimatedCost1").innerText = `Estimated Cost: $${estimatedCost.toFixed(2)}`;

                        // Send both start and end locations for fetching riders
                        fetchAvailableRiders(startLocation.lat(), startLocation.lng(), endLocation.lat(), endLocation.lng(), durationInMinutes, distanceInKm);
                    } else {
                        alert("Could not find route.");
                    }
                });
            };





// function fetchAvailableRiders(lat, lng) {
//     fetch(`${BASE_URL}/get-available-riders?lat=${lat}&lng=${lng}`)
//         .then(response => response.json())
//         .then(data => {
//             document.getElementById("riders-list").innerHTML = "";
//             riderMarkers.forEach(marker => marker.setMap(null));
//             riderMarkers = [];

//             data.forEach(rider => {
//                 let li = document.createElement("li");
//                 li.innerText = `${rider.name} - ${rider.vehicle} - $${rider.fare}`;
//                 document.getElementById("riders-list").appendChild(li);

//                 let carIcon = {
//                     url: "https://service.demowebsitelinks.com/quickride/public/front/Uber-PNG-Photos.png",
//                     scaledSize: new google.maps.Size(60, 60)
//                 };

//                 let marker = new google.maps.Marker({
//                     position: { lat: parseFloat(rider.lat), lng: parseFloat(rider.lng) },
//                     map: map,
//                     icon: carIcon,
//                     title: `${rider.name} - ${rider.vehicle}`
//                 });

//                 // 📌 Show modal with estimated cost when clicking on the car
//                 marker.addListener("click", () => {
//                     openModal(rider);
//                 });

//                 riderMarkers.push(marker);
//             });
//         })
//         .catch(error => console.error("Error fetching riders:", error));
// }

function fetchAvailableRiders(lat, lng, endLat, endLng, durationInMinutes, distanceInKm) {
    fetch(`${BASE_URL}/get-available-riders?lat=${lat}&lng=${lng}`)
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById("riders-list");
            container.innerHTML = "";

            riderMarkers.forEach(marker => marker.setMap(null));
            riderMarkers = [];

            data.forEach(rider => {
                // Calculate the estimated cost based on the route's distance and duration
                let estimatedCost = calculateEstimatedCost(distanceInKm, durationInMinutes);

                const card = document.createElement("div");
                card.className = "rider-card";
                card.innerHTML = `
                    <div class="rider-info">
                        <h4 style="margin: 0 0 4px 0;">${rider.name}</h4>
                        <p style="margin: 0;">${rider.vehicle}</p>

                        <p style="margin: 4px 0 0;"><strong>Fare: $${estimatedCost.toFixed(2)}</strong></p>

                    </div>
                    <img class="rider-car-icon" src="https://service.demowebsitelinks.com/quickride/public/front/Uber-PNG-Photos.png" alt="Car">
                `;
                card.onclick = () => openModal(rider, durationInMinutes, distanceInKm);
                container.appendChild(card);

                const carIcon = {
                    url: `${BASE_URL}/front/Uber-PNG-Photos.png`,
                    // url: "https://service.demowebsitelinks.com/quickride/public/front/Uber-PNG-Photos.png",
                    scaledSize: new google.maps.Size(60, 60)
                };

                const marker = new google.maps.Marker({
                    position: { lat: parseFloat(rider.lat), lng: parseFloat(rider.lng) },
                    map: map,
                    icon: carIcon,
                    title: `${rider.name} - ${rider.vehicle}`
                });

                marker.addListener("click", () => openModal(rider, durationInMinutes, distanceInKm));
                riderMarkers.push(marker);
            });

            // Optional: auto show modal if you want
            document.getElementById("rideRequestModal").style.display = "none";
        })
        .catch(error => console.error("Error fetching riders:", error));
}


// function fetchAvailableRiders(lat, lng, endLat, endLng, durationInMinutes, distanceInKm) {
//     fetch(`${BASE_URL}/get-available-riders?lat=${lat}&lng=${lng}`)
//         .then(response => response.json())
//         .then(data => {
//             const container = document.getElementById("riders-list");
//             container.innerHTML = "";

//             riderMarkers.forEach(marker => marker.setMap(null));
//             riderMarkers = [];

//             data.forEach(rider => {
//                 const card = document.createElement("div");
//                 card.className = "rider-card";
//                 card.innerHTML = `
//                     <div class="rider-info">
//                         <h4 style="margin: 0 0 4px 0;">${rider.name}</h4>
//                         <p style="margin: 0;">${rider.vehicle}</p>
//                         <p style="margin: 4px 0 0;"><strong>$${rider.fare}</strong></p>
//                     </div>
//                     <img class="rider-car-icon" src="https://service.demowebsitelinks.com/quickride/public/front/Uber-PNG-Photos.png" alt="Car">
//                 `;
//                 card.onclick = () => openModal(rider, durationInMinutes, distanceInKm);
//                 container.appendChild(card);

//                 const carIcon = {
//                     url: "https://service.demowebsitelinks.com/quickride/public/front/Uber-PNG-Photos.png",
//                     scaledSize: new google.maps.Size(60, 60)
//                 };

//                 const marker = new google.maps.Marker({
//                     position: { lat: parseFloat(rider.lat), lng: parseFloat(rider.lng) },
//                     map: map,
//                     icon: carIcon,
//                     title: `${rider.name} - ${rider.vehicle}`
//                 });

//                 marker.addListener("click", () => openModal(rider, durationInMinutes, distanceInKm));
//                 riderMarkers.push(marker);
//             });

//             // Optional: auto show modal if you want
//             document.getElementById("rideRequestModal").style.display = "none";
//         })
//         .catch(error => console.error("Error fetching riders:", error));
// }



function openModal(rider, durationInMinutes, distanceInKm) {
    selectedRider = rider;

    // Calculate estimated cost based on the route details
    let estimatedCost = calculateEstimatedCost(distanceInKm, durationInMinutes);

    document.getElementById("riderDetails").innerText = `Rider: ${rider.name} - ${rider.vehicle} ($${rider.fare})`;
    document.getElementById("estimatedCost1").innerText = `Estimated Cost: $${estimatedCost.toFixed(2)}`;
    document.getElementById("rideAmount").value = rider.fare;

    document.getElementById("rideRequestModal").style.display = "block";
}


function closeModal() {
    document.getElementById("rideRequestModal").style.display = "none";
}


// function sendRideRequest() {
//     let amount = document.getElementById("rideAmount").value;

//     if (!amount || amount <= 0) {
//         alert("Please enter a valid amount.");
//         return;
//     }

//     console.log( selectedRider.id, )
//     fetch("https://service.demowebsitelinks.com/quickride/public/request-ride", {
//         method: "POST",
//         headers: {
//             "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
//             "Content-Type": "application/json",
//             "Accept": "application/json",
//         },
//         body: JSON.stringify({
//             rider_id: selectedRider.id,
//             amount: amount
//         })
//     })
//     .then(response => response.json())
//     .then(data => {
//         alert(data.message);
//         closeModal();
//     })
//     .catch(error => {
//         console.error("Error:", error);
//         alert("Failed to send ride request.");
//     });
// }

function sendRideRequest() {
    let amount = document.getElementById("rideAmount").value;

    if (!amount || amount <= 0) {
        alert("Please enter a valid amount.");
        return;
    }

    // Assuming startLocation and endLocation are populated when the user calculates the route
    if (!startLocation || !endLocation) {
        alert("Please calculate the route first.");
        return;
    }

    // Get address values
    const sAddress = document.getElementById("origin-input").value;
    const dAddress = document.getElementById("destination-input").value;
    console.log(sAddress, dAddress);
    // Now, fetch the source and destination coordinates
    const originLat = startLocation.lat();
    const originLng = startLocation.lng();
    const destinationLat = endLocation.lat();
    const destinationLng = endLocation.lng();

    // Sending the ride request with coordinates and rider details
    fetch(`${BASE_URL}/store-user-ride`, {
    // fetch("https://service.demowebsitelinks.com/quickride/public/store-user-ride", {
        method: "POST",
        headers: {
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
            "Content-Type": "application/json",
            "Accept": "application/json",
        },
        body: JSON.stringify({
            rider_id: selectedRider.id, // Rider ID from selectedRider
            amount: amount,
            s_address: sAddress,
            d_address: dAddress,
            s_latitude: originLat,  // Source latitude
            s_longitude: originLng, // Source longitude
            d_latitude: destinationLat, // Destination latitude
            d_longitude: destinationLng // Destination longitude
        })
    })
    .then(response => response.json())
    .then(data => {
        alert(data.message);
        closeModal(); // Close the modal after sending the request
    })
    .catch(error => {
        console.error("Error:", error);
        alert("Failed to send ride request.");
    });
}



// 🔥 Function to calculate cost dynamically
// function calculateEstimatedCost(riderFare) {
//     let distanceText = document.getElementById("distance").innerText;
//     let distanceKm = parseFloat(distanceText.replace("Distance: ", "").replace(" km", "").replace(",", ""));

//     let estimatedCost = baseFare + (perKmFare * distanceKm) + parseFloat(riderFare);
//     return estimatedCost;
// }

function calculateEstimatedCost(distanceInKm, durationInMinutes) {
    const baseFare = 2; // Base fare in $
    const perKmFare = 1.5; // Cost per kilometer in $
    const perMinFare = 1.13; // Cost per minute in $

    // Calculate cost based on distance and time
    let distanceCost = perKmFare * distanceInKm;  // Distance-based cost
    let timeCost = perMinFare * durationInMinutes; // Time-based cost

    // Total fare is the sum of base fare, distance cost, and time cost
    let totalFare = baseFare + distanceCost + timeCost;
    return totalFare;
}




function checkRideStatus(rideId) {
        fetch(`${BASE_URL}/ride-status/${rideId}`)
        // fetch(`https://service.demowebsitelinks.com/quickride/public/ride-status/${rideId}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'accepted') {
                    showAcceptedRideOnMap(data.ride);
                    console.log(data.ride);
                    showNotification("Your ride has been accepted!");
                }
            })
            .catch(error => console.error("Error checking ride status:", error));
    }




function showAcceptedRideOnMap(ride) {
    let riderLocation = { lat: parseFloat(ride.rider_lat), lng: parseFloat(ride.rider_lng) };
    let userLocation = { lat: parseFloat(ride.user_lat), lng: parseFloat(ride.user_lng) };
    console.log(ride);
    // Clear previous markers
    riderMarkers.forEach(marker => marker.setMap(null));
    riderMarkers = [];

    // Rider Marker
    let riderMarker = new google.maps.Marker({
        position: riderLocation,
        map: map,
        icon: {
            url: `${BASE_URL}/front/Uber-PNG-Photos.png`,
            // url: "https://service.demowebsitelinks.com/quickride/public/front/Uber-PNG-Photos.png",
            scaledSize: new google.maps.Size(60, 60)
        },
        title: "Rider Location"
    });

    // User Marker
    let userMarker = new google.maps.Marker({
        position: userLocation,
        map: map,
        icon: {
            url: "https://maps.google.com/mapfiles/kml/shapes/man.png",
            scaledSize: new google.maps.Size(40, 40)
        },
        title: "Your Location"
    });

    // Store markers
    riderMarkers.push(riderMarker, userMarker);

    // Adjust map to fit both locations
    let bounds = new google.maps.LatLngBounds();
    bounds.extend(riderLocation);
    bounds.extend(userLocation);
    map.fitBounds(bounds);

    // Show ride details and "Start Ride" button
    document.getElementById("rideDetails").innerHTML = `
        <p>Rider: ${ride.rider_name}</p>
        <p>Amount: $${ride.amount}</p>
        <a href="#" onclick="startRide(${ride.id})" class="start-ride-btn">Go For A Ride</a>
    `;

    // Draw the route from rider to user
    drawRoute(riderLocation, userLocation);
}

function drawRoute(origin, destination) {
    let request = {
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
    };

    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsRenderer.setDirections(result);
            directionsRenderer.setMap(map);
        } else {
            console.error("Error fetching directions: " + status);
        }
    });
}


    function showNotification(message) {
        let notificationBox = document.createElement("div");
        notificationBox.className = "notification";
        notificationBox.innerHTML = `<p>${message}</p>`;
        document.body.appendChild(notificationBox);

        setTimeout(() => {
            notificationBox.remove();
        }, 3000);
    }


    function startRide(rideId) {

        fetch(`${BASE_URL}/start-ride/${rideId}`, {
        // fetch(`https://service.demowebsitelinks.com/quickride/public/start-ride/${rideId}`, {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ ride_id: rideId })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                alert("Ride started successfully!");
                // Redirect to tracking page if needed
                window.location.href = `${BASE_URL}/track-ride/${rideId}`;
                // window.location.href = `https://service.demowebsitelinks.com/quickride/public/track-ride/${rideId}`;
            } else {
                alert(data.error || "Failed to start ride.");
            }
        })
        .catch(error => console.error("Error starting ride:", error));
    }

setTimeout(() => {
    let rideId = rideId;
    if (rideId) {
        checkRideStatus(rideId);
    }
}, 5000);


    </script>

@endsection