@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-2 pull-left" style=" float: left;">
                <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-10">
                                    <table class="table table-striped table-bordered" style="table-layout:fixed;">
                                        <tbody>
                                            <tr>
                                                <th style="width:30%">{{ trans('admin_lang.ride_id') }}</th>
                                                
                                                    <td style="width:70%">#{{ $sdata->ride_id }}</td>
                                              
                                            </tr>
                                            <tr>
                                                <th>{{ trans('admin_lang.rider_name') }}</th>
                                                <td>{!! !empty($sdata->rider) ? $sdata->rider->full_name : '-' !!}</td>
                                            </tr>
                                            @if($sdata->self_someone == 'someone')
                                            <tr>
                                                <th>Other {{ trans('admin_lang.rider_name') }}</th>
                                                <td>{!! !empty($sdata->someone_name) ? $sdata->someone_name : '-' !!}</td>
                                            </tr>
                                            <tr>
                                                <th>Other Phone Number</th>
                                                <td>{!! !empty($sdata->someone_mobile_number) ? $sdata->someone_mobile_number : '-' !!}</td>
                                            </tr>
                                            @endif
                                            <tr>
                                                <th>Mobility Equipment</th>
                                                <td>{!! !empty($sdata->mobility_equipment_names) ? $sdata->mobility_equipment_names : '-' !!}</td>
                                            </tr>
                                            <tr>
                                                <th>Transfer Level</th>
                                                <td>{!! !empty($sdata->transfer_level_names) ? $sdata->transfer_level_names : '-' !!}</td>
                                            </tr>
                                            <tr>
                                                <th>Message</th>
                                                <td>--</td>
                                            </tr>

                                            <tr>
                                                <th>{{ trans('admin_lang.driver_name') }}</th>
                                                <td>{!! !empty($sdata->driver) ? $sdata->driver->full_name : '-' !!}</td>
                                            </tr>

                                            <tr>
                                                <th>Ride Type</th>
                                                <td>{!! !empty($sdata->ride_type) ? $sdata->ride_type : '-' !!}</td>
                                            </tr>
                                            @if($sdata->status != '6')
                                            
                                            <tr>
                                                <th>Driver’s rating</th>
                                                <td>{{ number_format($totalrating, 1)}}</td>
                                            </tr>

                                            <tr>
                                                <th>Ride is OTP verified</th>
                                                <td>--</td>
                                            </tr>

                                            @endif

                                            <tr>
                                                <th>Vehicle information</th>
                                                <td>{!! !empty($sdata->vehicle_number) ? $sdata->vehicle_number : '-' !!}</td>
                                            </tr>
                                            <tr>
                                                <th>Ride date</th>
                                                {{-- <td>{!! !empty($sdata->start_time) ? $sdata->start_time : '-' !!}</td> --}}
                                            <td>{!! !empty($sdata->ride_time) ? $sdata->created_at ? \Carbon\Carbon::parse($sdata->created_at)->timezone('Asia/Kolkata')->format('M d Y H:i:s') : '-' : '-' !!}
                                            </td>
                                            </tr>
                                            <tr>
                                                <th>Ride start time</th>
                                                {{-- <td>{!! !empty($sdata->start_time) ? $sdata->start_time : '-' !!}</td> --}}
                                            <td>{!! !empty($sdata->start_time) ?  \Carbon\Carbon::createFromTimestamp($sdata->start_time)->timezone('Asia/Kolkata')->format('M d Y H:i:s') : '-' !!}
                                            </td>
                                            </tr>
                                            <tr>
                                                <th>Ride end time</th>
                                                <td>{!! !empty($sdata->end_time) ?  \Carbon\Carbon::createFromTimestamp($sdata->end_time)->timezone('Asia/Kolkata')->format('M d Y H:i:s') : \Carbon\Carbon::parse($sdata->ride_cancellation_reason->created_at)->timezone('Asia/Kolkata')->format('M d Y H:i:s')   !!}
                                                </tr>
                                            <tr>
                                                <th>Booking type</th>
                                                <td>{!! !empty($sdata->booking_type) ? $sdata->booking_type : '-' !!}</td>
                                            </tr>
                                            <tr>
                                                <th>Pick Up location</th>
                                                <td>{!! !empty($sdata->from_address) ? $sdata->from_address : '-' !!}</td>
                                            </tr>
                                            <tr>
                                                <th>Drop off location</th>
                                                <td>{!! !empty($sdata->to_address) ? $sdata->to_address : '-' !!}</td>
                                            </tr>
                                            {{-- @if ($sdata->status == '6')
                                            <tr>
                                                <td colspan="4"><img style="height: 400px; width: 100%;" src="{{ url($sdata->ride_snapshot ?? "img/no-image.jpeg") }}"></td>
                                            </tr>
                                            @else --}}
                                            <tr>
                                                <td colspan="4"> 
                                                    <div id="map" style="height: 400px; width: 100%;"></div>
                                                </td>
                                            </tr>
                                            {{-- @endif --}}
                                            <tr>
                                                <th>Total Trip Fare</th>
                                                <td>{!! !empty($sdata->ride_amount) ? $sdata->ride_amount : '-' !!}</td>
                                            </tr>
                                            <tr>
                                                <th>Trip Fare (Final Price that driver will receive)</th>
                                                <td>0.00</td>
                                            </tr>
                                            <tr>
                                                <th>Amount that the admin will receive</th>
                                                <td>0.00</td>
                                            </tr>
                                            <tr>
                                                <th>Rider Rating & review</th>
                                                <td>{!! !empty($sdata->rider_review) ? $sdata->rider_review->reason : '-' !!}</td>
                                            </tr>
                                            <tr>
                                                <th>Driver Rating</th>
                                                <td>{!! !empty($sdata->driver_review) ? $sdata->driver_review->reason : '-' !!}</td>
                                            </tr>
                                            @if($sdata->mobile_number)
                                            <tr>
                                                <th >Other person contact number</th>
                                                <td >{{ $sdata->emergency_code??'' }} {{ $sdata->emergency_number??'' }}</td>
                                                
                                            </tr>
                                            @endif
                                            
                                            @if($sdata->status == '2')
                                            <tr>
                                                <th>Ride Cancelled time</th>
                                                <td>{{ $sdata->ride_cancellation_reason->created_at??'-' }}</td>
                                            </tr>
                                            <tr>
                                                <th>Ride Cancelled By</th>
                                                <td> {{ $sdata->ride_cancellation_reason->user->full_name??'-' }} {{ ($sdata->ride_cancellation_reason->user_id == $sdata->user_id) ? '(Rider)' : '(Driver)' }}
                                                </tr>
                                            @endif
                                            <tr>
                                                <th>Refund Amount</th>
                                                <td>0</td>
                                            </tr>
                                            @if ($sdata->status == '2' && $sdata->driver_id != null)
                                            <tr>
                                                <th >Trip cancellation charges</th>
                                                <td >$0.00</td>
                                                
                                            </tr>
                                            <tr>
                                                <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>
                                            
                                            </tr>
                                            <tr>
                                                <th >Cancelled Reason</th>
                                                <td >{{ ($sdata->ride_cancellation_reason->reason)}}</td>
                                            </tr>
                                            
                                            @endif
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-2">
                               
                                @if (isset($sdata->rider->profile_image) && $sdata->rider->profile_image != null)
                                    Rider Profile picture <br>
                                    <a href="{{ asset($sdata->profile_image) }}" data-fancybox="group" >
                                        <img src="{{ asset($sdata->rider->profile_image) }}"
                                            style=" margin-top:20px; height: 125px;"></a><br>
                                @endif
                                @if (isset($sdata->driver->profile_image) && $sdata->driver->profile_image != null)
                                    Driver Profile picture <br>
                                    <a href="{{ asset($sdata->profile_image) }}" data-fancybox="group" >
                                        <img src="{{ asset($sdata->rider->profile_image) }}"
                                            style=" margin-top:20px; height: 125px;"></a><br>
                                  
                                @endif
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <script type="text/javascript">
        $('[data-fancybox]').fancybox({
            // Options will go here
            buttons: [
                'close'
            ],
            wheel: false,
            transitionEffect: "slide",
            // thumbs          : false,
            // hash            : false,
            loop: true,
            // keyboard        : true,
            toolbar: false,
            // animationEffect : false,
            // arrows          : true,
            clickContent: false
        });
    </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