@extends('admin.layouts.layout')
@section('content')
    <div class="container-fluid">

        <h4 class="h3 mb-2 text-gray-800">{{ trans('admin_lang.view') }} </h4>
        <div class="card shadow mb-4">
            <div class="card-header py-3">

                <div class="col-md-6 pull-left" style=" float: left;">
                    <a href="{{ routeUser('user.index',['type'=>'rider']) }}">
                         <h4 class="page-title"> Rider</h4>
                    </a>
                    <a href="{{ routeUser($pagePath . '.index') }}">
                        <i style="font-size:24px" class="fa">&#xf060;</i>
                    </a>
                </div>
            </div>
            <div class="card-body">

                <div class="table-responsive">

                    <div class="card">
                        <div class="card-body">
                            <div class="row mt-4 mb-4 ml-5">
                                @if (isset($sdata->ride_snapshot) && $sdata->ride_snapshot != null)
                                    <a href="{{ asset($sdata->ride_snapshot) }}" data-fancybox="group">
                                        <img src="{{ asset($sdata->ride_snapshot) }}"
                                            style=" margin-top:20px; height: 209px;"></a><br>
                                @endif
                            </div>
                            <div class="row">

                                <div class="col-md-12">
                                    <table class="table table-striped table-bordered" style="table-layout:fixed;">
                                        <tbody>
                                            <tr>
                                                <th style="width:40%">{{ trans('admin_lang.ride_id') }}</th>
                                                <td style="width:60%">#{{ $sdata->ride_id }}</td>
                                                <th style="width:40%">Booking type</th>
                                                <td style="width:60%">{{ $sdata->booking_type }}</td>
                                            </tr>
                                            @if ($sdata->booking_type == 'Scheduled')
                                                <tr>
                                                    <th >Booking made date</th>
                                                    <td >{{ date('M d, Y', strtotime($sdata->created_at)) }}
                                                    </td>
                                                    <th >Ride date</th>
                                                    <td >{{ date('M d, Y', strtotime($sdata->ride_time)) }}
                                                    </td>
                                                </tr>
                                                @if ($sdata->ride_cancellation_reason)
                                                    <tr>
                                                        <th>Cancelled date and time</th>
                                                        <td>{{ date('M d, Y h:i a', strtotime($sdata->ride_cancellation_reason->created_at)) }}
                                                        </td>
                                                    </tr>
                                                @endif
                                            @endif
                                            <tr>
                                                <th>Ride Status</th>
                                                <td>{{ getRideStatusTitle($sdata->status)}}</td>
                                            </tr>
                                            @if ($sdata->status == '2' && $sdata->driver_id != null)
                                            <tr>
                                                <th >Trip cancellation charges</th>
                                                <td >$0.00</td>
                                                <th >Payment mode</th>
                                                <td >Online</td>
                                            </tr>
                                            @if($sdata->ride_cancellation_reason)
                                            
                                            <tr>
                                                <th >Cancelled BY</th>
                                                <td >{{ ($sdata->ride_cancellation_reason->user_id == $sdata->user_id) ? 'Rider' : 'Driver' }}</td>
                                                <th >Cancelled Reason</th>
                                                <td >{{ ($sdata->ride_cancellation_reason->reason)}}</td>
                                            </tr>
                                            @endif
                                            @endif
                                         
                                            <tr>
                                                <td colspan="4"> 
                                                    <div id="map" style="height: 400px; width: 100%;"></div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th >Pickup location</th>
                                                <td >{{ $sdata->from_address }}
                                                </td>
                                                <th >Drop off location</th>
                                                <td >{{ $sdata->to_address }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th >Ride date</th>
                                                <td >{{ date('M d, Y', strtotime($sdata->ride_time)) }}
                                                </td>
                                                <th >Ride start and end time</th>
                                                <td >{{ date('h:i a', strtotime($sdata->start_time)) }} - {{ date('h:i a', strtotime($sdata->end_time)) }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th >Service type</th>
                                                <td >{{ $sdata->ride_type == 'Door' ? 'Door to door' : 'Curb to Curb' }}
                                                </td>
                                                <th >Ride type</th>
                                                <td >{{ $sdata->vehicles_suggestion_type ?? '-' }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th >Driver Name</th>
                                                <td >{{ $sdata->driver->full_name ?? "-" }}
                                                </td>
                                                <th >Driver profile picture</th>
                                                <td ><img width="200px" height="150px" src="{{ url($sdata->driver->profile_image ?? "img/no-image.jpeg") }}">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th >Vehicle Number</th>
                                                <td >{{ $sdata->driver->vehicle->fleet_number ?? "-" }}
                                                </td>
                                                <th >Vehicle type with car type</th>
                                                <td >{{ $sdata->driver->vehicle->vehicle_types ?? '-' }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th >Mobility equipment</th>
                                                <td >{{ $sdata->ride_mobility_equipments ?? '-' }}
                                                </td>
                                                <th >Transfer level</th>
                                                <td >{{ $sdata->ride_transfer_levels->transfer_level->title ?? '-' }}
                                                </td>
                                            </tr>
                                            @if($sdata->mobile_number)
                                            <tr>
                                                <th >Other person contact number</th>
                                                <td >{{ $sdata->country_code }} {{ $sdata->mobile_number }}</td>
                                                
                                            </tr>
                                            @endif
                                            
                                        </tbody>
                                    </table>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdl1VEKKmhrOfwgA8yZ6LMZV8rXtie__s"></script>
    <script type="text/javascript">
        @if($sdata->driver_id == Auth::user()->id)
        var lat = {{ $sdata->RideLocationHistory->from_lat??'26.00' }};
        var long = {{ $sdata->RideLocationHistory->from_long??'26.00'}};
        @else 
        var lat = {{ $sdata->RideLocationHistory->to_lat??'26.00' }};
        var long ={{ $sdata->RideLocationHistory->to_long??'26.00' }};
        @endif

        var pick_lat = {{ $sdata->from_lat }};
        var pick_long = {{ $sdata->from_long }};

        var drop_lat = {{ $sdata->to_lat }};
        var drop_long = {{ $sdata->to_long }};

        $(document).ready(function() {
            function initMap() {
                console.log('pick_location',pick_lat,pick_long);
                console.log('dropoffLocation',drop_lat,drop_long);
                console.log('driverStartLocation',lat,long);

                // Define the coordinates for pickup, drop-off, and any waypoints
                var pickupLocation = { lat: pick_lat, lng: pick_long };
                var dropoffLocation = { lat: drop_lat, lng: drop_long };
                var driverStartLocation = { lat: lat, lng: long }; 

                // Initialize the map centered around the pickup location
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 13,
                    center: pickupLocation
                });

                // Initialize the Directions Service and Renderer
                var directionsService = new google.maps.DirectionsService();
                var directionsRenderer = new google.maps.DirectionsRenderer({ suppressMarkers: true });

                directionsRenderer.setMap(map);

                // Function to calculate and display the route
                function calculateAndDisplayRoute() {
                    var request = {
                        origin: driverStartLocation,
                        destination: dropoffLocation,
                        waypoints: [{ location: pickupLocation, stopover: true }],
                        travelMode: google.maps.TravelMode.DRIVING
                    };

                    directionsService.route(request, function(result, status) {
                        if (status === google.maps.DirectionsStatus.OK) {
                            directionsRenderer.setDirections(result);
                        } else {
                            console.error('Directions request failed due to ' + status);
                        }
                    });
                }

                calculateAndDisplayRoute();

                // Add markers for pickup and drop-off locations
                var pickupMarker = new google.maps.Marker({
                    position: pickupLocation,
                    map: map,
                    title: 'Pickup Location',
                    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                });

                var dropoffMarker = new google.maps.Marker({
                    position: dropoffLocation,
                    map: map,
                    title: 'Drop-off Location',
                    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
                });

                // Optionally add a marker for the driver's starting location
                var driverStartMarker = new google.maps.Marker({
                    position: driverStartLocation,
                    map: map,
                    title: 'Driver Start Location',
                    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
                });
            }

            initMap();           
        });
    </script>
@endsection