@extends('front.layouts.app')

@section('content')

<style>
    .modal {
        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;
    }
    
    
    
    
    /* 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">
                                          <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>-->
                                <ul id="riders-list"></ul>
                
                
            </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">
    <!--<div class="modal-content">-->
        <h2>Request Ride</h2>
        <p id="riderDetails"></p>
        <p id="estimatedCost"></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('asset/front/js/map.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">
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
        
        
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('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 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(6)" 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) {
    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.");
                }
            });
        };


  
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 openModal(rider) {
    selectedRider = rider;

    let estimatedCost = calculateEstimatedCost(rider.fare);
    
    document.getElementById("riderDetails").innerText = `Rider: ${rider.name} - ${rider.vehicle} ($${rider.fare})`;
    document.getElementById("estimatedCost").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;
    }

    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 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 checkRideStatus(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: "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">Start 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(`https://service.demowebsitelinks.com/quickride/public/start-ride/6`, {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ ride_id: 6 })
        })
        .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 = `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 = 6; // Store ride ID when requesting a ride
    if (rideId) {
        checkRideStatus(rideId);
    }
}, 5000);

  
    </script>

@endsection