<?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="map" style="height: 300px; width: 100%;"></div>

        <!-- Ride Request 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">Request a Ride</h4>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#E2712F" viewBox="0 0 16 16">
                        <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
                    </svg>
                </div>
            </div>
            
            <div class="card-body">
                <form id="ride-request-form" action="<?php echo e(route('ride.request')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <!-- Pickup Location -->
                    <div class="mb-3">
                        <label for="pickup-location" class="form-label fw-bold small text-muted">Pickup Location</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" 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>
                            </span>
                            <input type="text" class="form-control border-start-0 ps-0" id="pickup-location" placeholder="Current location or enter address" required>
                            <input type="hidden" id="pickup-lat" name="pickup_lat" required>
                            <input type="hidden" id="pickup-lng" name="pickup_lng" required>
                            <input type="hidden" id="pickup-address" name="pickup_address" required>
                        </div>
                    </div>

                    <!-- Dropoff Location -->
                    <div class="mb-3">
                        <label for="dropoff-location" class="form-label fw-bold small text-muted">Drop-off Location</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#E2712F" 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>
                            </span>
                            <input type="text" class="form-control border-start-0 ps-0" id="dropoff-location" placeholder="Where to?" required>
                            <input type="hidden" id="dropoff-lat" name="dropoff_lat" required>
                            <input type="hidden" id="dropoff-lng" name="dropoff_lng" required>
                            <input type="hidden" id="dropoff-address" name="dropoff_address" required>
                        </div>
                    </div>

                    <!-- Vehicle Type Selector -->
                    <div class="mb-3">
                        <label for="vehicle-type" class="form-label fw-bold small text-muted">Vehicle Type</label>
                        <select class="form-select" id="vehicle-type" name="vehicle_type" required>
                            <option value="">Select a vehicle</option>
                            <?php $__currentLoopData = $vehicleTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($type->name); ?>" data-fare="<?php echo e($type->fare_per_km); ?>">
                                    <?php echo e($type->name); ?> • USD <?php echo e(number_format($type->fare_per_km, 2)); ?>/km
                                </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>

                    <!-- Fare Estimate -->
                    <div class="bg-light rounded-3 p-3 mb-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="small text-muted mb-1">Estimated Fare</p>
                                <h4 class="mb-0 fw-bold text-success" id="estimated-fare">USD 0.00</h4>
                            </div>
                            <div class="text-end">
                                <p class="small text-muted mb-1">Distance</p>
                                <p class="mb-0 fw-bold" id="distance-display">0 km</p>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <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 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>
                        Find Captain
                    </button>
                </form>
            </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=initMap">
</script>
<?php echo app('Illuminate\Foundation\Vite')('resources/js/app.js'); ?>

<script>
    let map;
    let pickupAutocomplete;
    let dropoffAutocomplete;
    let directionsService;
    let directionsRenderer;
    let currentDistanceInKm = null;
    let isMapInitialized = false;
    let currentLocationMarker;

    function initMap() {
        const defaultLocation = { lat: 24.8607, lng: 67.0011 };
        map = new google.maps.Map(document.getElementById('map'), {
            center: defaultLocation,
            zoom: 12,
            styles: [
                {
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#000000"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                }
            ]
        });

        directionsService = new google.maps.DirectionsService();
        directionsRenderer = new google.maps.DirectionsRenderer({
            polylineOptions: {
                strokeColor: "#E2712F",
                strokeOpacity: 0.8,
                strokeWeight: 5
            }
        });
        directionsRenderer.setMap(map);

        // Initialize autocomplete for pickup and dropoff
        const pickupInput = document.getElementById('pickup-location');
        const dropoffInput = document.getElementById('dropoff-location');

        pickupAutocomplete = new google.maps.places.Autocomplete(pickupInput);
        dropoffAutocomplete = new google.maps.places.Autocomplete(dropoffInput);

        pickupAutocomplete.addListener('place_changed', updateRouteAndFare);
        dropoffAutocomplete.addListener('place_changed', updateRouteAndFare);

        // Set current location if available
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    
                    // Set map center to current location
                    map.setCenter(pos);
                    
                    // Add marker for current location
                    if (currentLocationMarker) {
                        currentLocationMarker.setMap(null);
                    }
                    
                    currentLocationMarker = new google.maps.Marker({
                        position: pos,
                        map: map,
                        title: "Your Location",
                        icon: {
                            path: google.maps.SymbolPath.CIRCLE,
                            scale: 8,
                            fillColor: "#E2712F",
                            fillOpacity: 1,
                            strokeColor: "#fff",
                            strokeWeight: 2
                        }
                    });
                    
                    // Set pickup location to current position
                    const geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ location: pos }, (results, status) => {
                        if (status === "OK" && results[0]) {
                            document.getElementById('pickup-location').value = results[0].formatted_address;
                            document.getElementById('pickup-address').value = results[0].formatted_address;
                            document.getElementById('pickup-lat').value = pos.lat;
                            document.getElementById('pickup-lng').value = pos.lng;
                        }
                    });
                },
                () => {
                    console.log("Geolocation service failed or was denied.");
                }
            );
        }

        document.getElementById('vehicle-type').addEventListener('change', updateFareDisplay);
        document.getElementById('ride-request-form').addEventListener('submit', handleRideRequest);

        isMapInitialized = true;
    }

    function updateRouteAndFare() {
        if (!isMapInitialized) return;

        const pickupPlace = pickupAutocomplete.getPlace();
        const dropoffPlace = dropoffAutocomplete.getPlace();

        if (!pickupPlace || !pickupPlace.geometry || !dropoffPlace || !dropoffPlace.geometry) {
            currentDistanceInKm = null;
            updateFareDisplay();
            directionsRenderer.setDirections({ routes: [] });
            document.getElementById('distance-display').textContent = '0 km';
            return;
        }

        const origin = {
            lat: pickupPlace.geometry.location.lat(),
            lng: pickupPlace.geometry.location.lng()
        };
        const destination = {
            lat: dropoffPlace.geometry.location.lat(),
            lng: dropoffPlace.geometry.location.lng()
        };

        document.getElementById('pickup-address').value = pickupPlace.formatted_address;
        document.getElementById('dropoff-address').value = dropoffPlace.formatted_address;

        document.getElementById('pickup-lat').value = origin.lat;
        document.getElementById('pickup-lng').value = origin.lng;
        document.getElementById('dropoff-lat').value = destination.lat;
        document.getElementById('dropoff-lng').value = destination.lng;

        directionsService.route({
            origin: origin,
            destination: destination,
            travelMode: 'DRIVING',
            provideRouteAlternatives: false
        }, (response, status) => {
            if (status === 'OK') {
                directionsRenderer.setDirections(response);
                const route = response.routes[0].legs[0];
                currentDistanceInKm = route.distance.value / 1000;
                document.getElementById('distance-display').textContent = route.distance.text;
                updateFareDisplay();
            } else {
                console.error('Directions request failed due to ' + status);
                currentDistanceInKm = null;
                updateFareDisplay();
                directionsRenderer.setDirections({ routes: [] });
                document.getElementById('distance-display').textContent = '0 km';
            }
        });
    }

    function updateFareDisplay() {
        const vehicleSelect = document.getElementById('vehicle-type');
        const estimatedFareElement = document.getElementById('estimated-fare');
        
        const selectedOption = vehicleSelect.options[vehicleSelect.selectedIndex];
        const farePerKm = parseFloat(selectedOption.dataset.fare);

        if (currentDistanceInKm !== null && !isNaN(farePerKm)) {
            const estimatedFare = currentDistanceInKm * farePerKm;
            estimatedFareElement.textContent = `USD ${estimatedFare.toFixed(2)}`;
        } else {
            estimatedFareElement.textContent = 'USD 0.00';
        }
    }

    async function handleRideRequest(event) {
        event.preventDefault();

        const form = document.getElementById('ride-request-form');
        const formData = new FormData(form);
        const submitButton = form.querySelector('button[type="submit"]');
        
        // Validate required fields
        if (!formData.get('pickup_lat') || !formData.get('dropoff_lat') || !formData.get('vehicle_type')) {
            window.alert('Please select a pickup, drop-off location and vehicle type.');
            return;
        }

        // Disable button and show loading state
        submitButton.disabled = true;
        submitButton.innerHTML = `
            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
            Finding Captain...
        `;

        try {
            const response = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: formData,
                credentials: 'include'
            });

            const data = await response.json();

            if (response.ok && data.redirectUrl) {
                window.location.href = data.redirectUrl;
            } else {
                window.alert(data.message || 'Failed to request ride');
                // Reset button state
                submitButton.disabled = false;
                submitButton.innerHTML = `
                    <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 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>
                    Find Captain
                `;
            }
        } catch (error) {
            console.error('Error:', error);
            window.alert('An error occurred while processing your request');
            // Reset button state
            submitButton.disabled = false;
            submitButton.innerHTML = `
                <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 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>
                Find Captain
            `;
        }
    }
</script><?php /**PATH D:\xampp\htdocs\ridek\resources\views/dashboards/passenger-dashboard.blade.php ENDPATH**/ ?>