<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <div class="container-fluid p-0">
        <!-- Map Section (Full Width) -->
        <div id="ongoing-map" style="height: 300px; width: 100%;"></div>

        <!-- Ride Info Card (Slide-up Panel) -->
        <div class="card border-0 shadow-lg rounded-top-4" style="position: relative; margin-top: -30px; z-index: 1000;">
            <div class="card-header bg-dark text-white border-0 rounded-top-4">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="mb-0 fw-bold">Ongoing Ride</h4>
                    <div id="ride-status-badge" class="badge bg-success rounded-pill px-3 py-2">
                        <?php if($rideRequest->status === 'in_progress'): ?>
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                            </svg>
                            In Progress
                        <?php elseif($rideRequest->status === 'at_pickup'): ?>
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm-3.5-5.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V10.5z"/>
                            </svg>
                            At Pickup
                        <?php elseif($rideRequest->status === 'on_ride'): ?>
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.5-1.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5z"/>
                            </svg>
                            On Ride
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            
            <div class="card-body">
                <!-- Passenger Info -->
                <div class="d-flex align-items-center mb-4">
                    <div class="bg-success rounded-circle p-2 me-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#fff" viewBox="0 0 16 16">
                            <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="small text-muted mb-0">Passenger</p>
                        <h5 class="mb-0"><?php echo e($rideRequest->passenger->name ?? 'N/A'); ?></h5>
                    </div>
                </div>

                <!-- Route Info -->
                <div class="mb-4">
                    <div class="d-flex align-items-start mb-3">
                        <div class="bg-success rounded-circle p-1 me-3 mt-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#fff" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="small text-muted mb-1">Pickup Location</p>
                            <p class="mb-0"><?php echo e($rideRequest->pickup_address); ?></p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-start">
                        <div class="bg-success rounded-circle p-1 me-3 mt-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#fff" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M10 16a6 6 0 0 0 6-6c0-1.667-.61-3.182-1.618-4.314a6 6 0 0 0-2.048-5.303A5.99 5.99 0 0 0 10 4a6 6 0 0 0-6 6 6 6 0 0 0 6 6zM8.5 4.5a.5.5 0 0 1 1 0v1.5H11a.5.5 0 0 1 0 1H9.5V8.5a.5.5 0 0 1-1 0V7H7a.5.5 0 0 1 0-1h1.5V4.5z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="small text-muted mb-1">Drop-off Location</p>
                            <p class="mb-0"><?php echo e($rideRequest->dropoff_address); ?></p>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="mt-4">
                    <?php if($rideRequest->status === 'in_progress'): ?>
                        <form action="<?php echo e(route('ride.reached', $rideRequest->id)); ?>" method="POST">
                            <?php echo csrf_field(); ?>
                            <button type="submit" class="btn btn-success w-100 py-3 fw-bold d-flex align-items-center justify-content-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                                    <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
                                    <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                                </svg>
                                Reached Pickup
                            </button>
                        </form>
                    <?php elseif($rideRequest->status === 'at_pickup'): ?>
                        <form action="<?php echo e(route('ride.start', $rideRequest->id)); ?>" method="POST">
                            <?php echo csrf_field(); ?>
                            <button type="submit" class="btn btn-success w-100 py-3 fw-bold d-flex align-items-center justify-content-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                                    <path d="M6.112 6.095a5.642 5.642 0 0 0-.012.386 5.642 5.642 0 0 0 .012.386l-.375.595.375-.595zm-.792 1.253.375.595a5.642 5.642 0 0 0-.012-.386 5.642 5.642 0 0 0 .012-.386l-.375.595zm1.12-1.253a5.642 5.642 0 0 0-.012.386 5.642 5.642 0 0 0 .012.386l-.375.595.375-.595zm-.792 1.253.375.595a5.642 5.642 0 0 0-.012-.386 5.642 5.642 0 0 0 .012-.386l-.375.595zm1.12-1.253a5.642 5.642 0 0 0-.012.386 5.642 5.642 0 0 0 .012.386l-.375.595.375-.595zm-.792 1.253.375.595a5.642 5.642 0 0 0-.012-.386 5.642 5.642 0 0 0 .012-.386l-.375.595zm1.12-1.253a5.642 5.642 0 0 0-.012.386 5.642 5.642 0 0 0 .012.386l-.375.595.375-.595zm-.792 1.253.375.595a5.642 5.642 0 0 0-.012-.386 5.642 5.642 0 0 0 .012-.386l-.375.595zm1.12-1.253a5.642 5.642 0 0 0-.012.386 5.642 5.642 0 0 0 .012.386l-.375.595.375-.595zm-.792 1.253.375.595a5.642 5.642 0 0 0-.012-.386 5.642 5.642 0 0 0 .012-.386l-.375.595zm1.12-1.253a5.642 5.642 0 0 0-.012.386 5.642 5.642 0 0 0 .012.386l-.375.595.375-.595zm-.792 1.253.375.595a5.642 5.642 0 0 0-.012-.386 5.642 5.642 0 0 0 .012-.386l-.375.595zm1.12-1.253a5.642 5.642 0 0 0-.012.386 5.642 5.642 0 0 0 .012.386l-.375.595.375-.595zm-.792 1.253.375.595a5.642 5.642 0 0 0-.012-.386 5.642 5.642 0 0 0 .012-.386l-.375.595zm1.12-1.253a5.642 5.642 0 0 0-.012.386 5.642 5.642 0 0 0 .012.386l-.375.595.375-.595zm-.792 1.253.375.595a5.642 5.642 0 0 0-.012-.386 5.642 5.642 0 0 0 .012-.386l-.375.595z"/>
                                    <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
                                </svg>
                                Start Ride
                            </button>
                        </form>
                    <?php elseif($rideRequest->status === 'on_ride'): ?>
                        <form action="<?php echo e(route('ride.complete', $rideRequest->id)); ?>" method="POST">
                            <?php echo csrf_field(); ?>
                            <button type="submit" class="btn btn-success w-100 py-3 fw-bold d-flex align-items-center justify-content-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                </svg>
                                Complete Ride
                            </button>
                        </form>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo e(env('GOOGLE_MAPS_API_KEY')); ?>&libraries=places&callback=initOngoingMap"></script>

<script>
    let ongoingMap;
    let directionsServiceOngoing;
    let directionsRendererOngoing;
    let captainMarker;
    let passengerMarker;
    let destinationMarker;
    
    const rideStatus = '<?php echo e($rideRequest->status); ?>';
    const pickupLocation = { lat: <?php echo e($rideRequest->pickup_lat); ?>, lng: <?php echo e($rideRequest->pickup_lng); ?> };
    const dropoffLocation = { lat: <?php echo e($rideRequest->dropoff_lat); ?>, lng: <?php echo e($rideRequest->dropoff_lng); ?> };

    function initOngoingMap() {
        ongoingMap = new google.maps.Map(document.getElementById('ongoing-map'), {
            zoom: 14,
            center: pickupLocation,
            styles: [
                {
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#000000"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                }
            ]
        });

        directionsServiceOngoing = new google.maps.DirectionsService();
        directionsRendererOngoing = new google.maps.DirectionsRenderer({
            polylineOptions: {
                strokeColor: "#6F8D3B",
                strokeOpacity: 0.8,
                strokeWeight: 5
            },
            suppressMarkers: true
        });
        directionsRendererOngoing.setMap(ongoingMap);

        // Passenger pickup marker
        passengerMarker = new google.maps.Marker({
            position: pickupLocation,
            map: ongoingMap,
            title: "Passenger Pickup",
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 8,
                fillColor: "#6F8D3B",
                fillOpacity: 1,
                strokeColor: "#fff",
                strokeWeight: 2
            }
        });

        // Destination marker
        destinationMarker = new google.maps.Marker({
            position: dropoffLocation,
            map: ongoingMap,
            title: "Destination",
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 8,
                fillColor: "#FF0000",
                fillOpacity: 1,
                strokeColor: "#fff",
                strokeWeight: 2
            }
        });

        // Initial location fetch
        updateCaptainLocation();
        setInterval(updateCaptainLocation, 10000);
    }

    function updateCaptainLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const captainLocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                        accuracy: position.coords.accuracy
                    };
                    
                    sendLocationToServer(captainLocation);
                    updateMap(captainLocation);
                },
                (error) => {
                    console.error('Error getting location:', error);
                }
            );
        }
    }

    function updateMap(captainLocation) {
        if (captainMarker) {
            captainMarker.setMap(null);
        }
        
        captainMarker = new google.maps.Marker({
            position: captainLocation,
            map: ongoingMap,
            title: "Your Location",
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 8,
                fillColor: "#1E90FF",
                fillOpacity: 1,
                strokeColor: "#fff",
                strokeWeight: 2
            }
        });

        let destination = (rideStatus === 'on_ride') ? dropoffLocation : pickupLocation;

        directionsServiceOngoing.route({
            origin: captainLocation,
            destination: destination,
            travelMode: 'DRIVING',
            provideRouteAlternatives: false
        }, (response, status) => {
            if (status === 'OK') {
                directionsRendererOngoing.setDirections(response);
                
                // Adjust viewport to show both markers and route
                const bounds = new google.maps.LatLngBounds();
                bounds.extend(captainLocation);
                bounds.extend(destination);
                ongoingMap.fitBounds(bounds);
            }
        });
    }
    
    async function sendLocationToServer(location) {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        
        try {
            const response = await fetch('<?php echo e(route('captain.location.update')); ?>', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    ride_request_id: <?php echo e($rideRequest->id); ?>,
                    lat: location.lat,
                    lng: location.lng,
                    accuracy: location.accuracy
                })
            });
            
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.message || 'Failed to update location');
            }
            
            return await response.json();
        } catch (error) {
            console.error('Network error:', error);
            throw error;
        }
    }
</script><?php /**PATH D:\xampp\htdocs\ridek\resources\views/ride/ongoing.blade.php ENDPATH**/ ?>