@extends('admin.layouts.app')
<link href="http://localhost/taxiappz-dashboard-git/public/dispatcher/vendors/flatpickr/flatpickr.min.css" rel="stylesheet" />

@section('content')

<div class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-sm-12">
                    <div class="box">

                        <div class="box-header with-border">
                            <div class="d-flex flex-row" style="justify-content: space-between;">
                                <h4></h4>
                                <a href="{{ url()->previous() }}">
                                    <button class="btn btn-danger btn-sm pull-right" type="submit">
                                        <i class="mdi mdi-keyboard-backspace mr-2"></i>
                                        @lang('view_pages.back')
                                    </button>
                                </a>
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <form class="form-horizontal form-material" id="AdminupdateRideForm" method="post" action="{{route('Adminupdateride')}}">
                            @csrf
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <input type="hidden" name="req_id" value="{{$item->id}} " id="req_id">
                                            <label for="driver_id">Vehicle Type </label>
                                            <select class="form-control" id="vehicle_type" onchange="changeCapicity()" name="vehicle_type" data-placeholder="Choose a Vehicle Type" tabindex="1" >
                                                <option value="0" selected hidden>Please select Vehicle Type</option>
                                                @foreach($vehicle_details as $vd)
                                                <option value="{{$vd->id}}">{{$vd->name}}</option>
                                                @endforeach
                                            </select>
                                            <!-- <input type="text" name="vehical_cap" id="vehical_cap" > -->
                                            <label id="vehicle_typeCheck"/>

                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Pickup location</label>
                                            <!-- <input class="form-control w-100" type="text" name="pickup"
                                                id="pickup" placeholder="Pickup location" aria-label="pickup" style="width: 250px" aria-describedby="basic-addon1"> -->
                                            <input class="form-control" type="text" placeholder="Pickup Location"  name="pickup_location" id="pickup_location" aria-label="Username" aria-describedby="basic-addon1" autocomplete="off">
                                            <input type="hidden" name="pickup_lan" id="pickup_lan">
                                            <input type="hidden" name="pickup_long" id="pickup_long">
                                            <label id="pickup_locationCheck">

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Pickup time/date</label>
                                            <input class="form-control " type="text"
                                                placeholder="Pickup time/date" name="pickup_date-time" id="pickup_date-time" aria-label="pickup_date-time"
                                                aria-describedby="basic-addon1">
                                            <label id="pickup_date-timeCheck">

                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Destination address</label>
                                            <input class="form-control " type="text" name="destination_address"
                                                id="destination_address" placeholder="Destination address" aria-label="destination_address" aria-describedby="basic-addon1">
                                            <input type="hidden" name="drop_lan" id="drop_lan">
                                            <input type="hidden" name="drop_long" id="drop_long">
                                            <label id="destination_addressCheck">

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <input type="hidden" name="customer_id" id="customer_id" value="{{ $item->adHocuserDetail->id ?? $item->userDetail->id}}">
                                            <input type="hidden" name="customer_old_name" id="customer_old_name" value="{{ $item->adHocuserDetail->name ?? $item->userDetail->name}}">
                                            <label>Customer Name</label>
                                            <input class="form-control" type="text"
                                                placeholder="Customer Name" value="{{ $item->adHocuserDetail->name ?? $item->userDetail->name}}" name="customer_name" id="customer_name" aria-label="customer_name"
                                                aria-describedby="basic-addon1">
                                            <label id="customer_nameCheck">

                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Customer Number</label>
                                            <input class="form-control" type="text" name="customer_number"
                                                id="customer_number"  value="{{ $item->adHocuserDetail->mobile ?? $item->userDetail->mobile}}" placeholder="Customer Number" aria-label="customer_number" aria-describedby="basic-addon1">
                                                <input type="hidden" name="customer_old_number" id="customer_old_number" value="{{ $item->adHocuserDetail->mobile ?? $item->userDetail->mobile}}">
                                            <label id="customer_numberCheck">

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Ride fare</label>
                                            <input class="form-control " type="text" name="ride_fare"
                                                id="ride_fare" placeholder="Ride fare"  aria-describedby="basic-addon1">
                                            <label id="ride_fareCheck">

                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Operator remark</label>
                                            <input class="form-control " type="text"
                                                placeholder="Operator remark" name="operator_remark"  aria-label="operator_remark"
                                                aria-describedby="basic-addon1">
                                            <label id="operator_remarkCheck">

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Reason of cancellation</label>
                                            <input class="form-control " type="text" name="reason_of_cancellation"
                                                id="reason_of_cancellation" placeholder="reason_of_cancellation"  aria-label="reason_of_cancellation" aria-describedby="basic-addon1">
                                            <label id="reason_of_cancellationCheck">

                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>No. of passengers</label>
                                            <input class="form-control" type="text"
                                                placeholder="No. of passengers" name="no_of_passengers"   id="no_of_passengers" aria-label="no_of_passengers"
                                                aria-describedby="basic-addon1">

                                            <input  type="hidden"
                                                 name="passengers_capacity" id="passengers_capacity"  aria-label="passengers_capacity">
                                            <label id="no_of_passengersCheck">

                                        </div>
                                    </div>
                                </div>
                                <a type="button" class="btn btn-warning btn-sm mx-2" onclick="validateform()" >Update</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- container -->
</div>
</main>

</section>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ get_google_map_api_key() }}&libraries=places"></script>

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-database.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-analytics.js"></script>
<script>
   // var lat = 11.015956;
    // var lng = 76.968985;
    var lat = "{{$item->requestPlace->pick_lat}}"
    var lng = "{{$item->requestPlace->pick_lng}}"
    var pickLat = [];
    var pickLng = [];
    var default_lat = lat;
    var default_lng = lng;
    var driverLat, driverLng, bearing, type;
    var marker = [];
    var onTrip, available;
    onTrip = available = true;
    var requestId = "{{ $item->id }}"
    var driverId = "{{ $item->driver_id }}"
    var directionsService = new google.maps.DirectionsService();
    var directionsRenderer = new google.maps.DirectionsRenderer({
        suppressMarkers: true
    });

    // Your web app's Firebase configuration
        var firebaseConfig = {
                apiKey: "{{get_settings('firebase-api-key')}}",
    authDomain: "{{get_settings('firebase-auth-domain')}}",
    databaseURL: "{{get_settings('firebase-db-url')}}",
    projectId: "{{get_settings('firebase-project-id')}}",
    storageBucket: "{{get_settings('firebase-storage-bucket')}}",
    messagingSenderId: "{{get_settings('firebase-messaging-sender-id')}}",
    appId: "{{get_settings('firebase-app-id')}}",
    measurementId: "{{get_settings('firebase-measurement-id')}}"
    };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();

    var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(default_lat, default_lng),
            zoom: 10,
            mapTypeId: 'roadmap',
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.TOP_CENTER,
            },
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_BOTTOM,
            },
            scaleControl: true,
            streetViewControl: false,
            fullscreenControl: true,
        });

    directionsRenderer.setMap(map);

    var iconBase = "{{ asset('map/icon/') }}";
    var icons = {
        available: {
            name: 'Available',
            icon: iconBase + '/taxi1.svg'
        },
        ontrip: {
            name: 'OnTrip',
            icon: iconBase + '/taxi.svg'
        },
        pickup: {
            name: 'PickUp',
            icon: iconBase + '/driver_available.png'
        },
        drop: {
            name: 'Drop',
            icon: iconBase + '/driver_on_trip.png'
        }
    };

    var requestRef = firebase.database().ref('requests/'+requestId);

    requestRef.on('value', async function(snapshot) {
        var tripData = snapshot.val();

        if (tripData && typeof tripData.request_id != 'undefined') {
            await loadDriverIcons(tripData);
            await getTripDetails(tripData.request_id);
        }
    });

    function loadDriverIcons(val){
        deleteAllMarkers();

        var iconImg = icons['ontrip'].icon;

        var carIcon = new google.maps.Marker({
            position: new google.maps.LatLng(val.lat, val.lng),
            icon: {
                url: iconImg,
                scaledSize: new google.maps.Size(40, 40)
            },
            map: map
        });

        marker.push(carIcon);
        carIcon.setMap(map);

        setTimeout(() => {
            rotateMarker(iconImg, val.bearing);
        }, 3000);
    }

    function getTripDetails(requestId){
        var basePath = "{{ asset('storage/uploads/request/delivery-proof') }}/"
        if(requestId){
            let url = "{{ url('dispatch/request') }}/"+requestId;
            fetch(url)
            .then(response => response.json())
            .then(result => {

                if(result){
                    var pickLat = result.pick_lat
                    var pickLng = result.pick_lng
                    var dropLat = result.drop_lat
                    var dropLng = result.drop_lng

                    var pickUpLocation = new google.maps.LatLng(pickLat, pickLng);
                    var dropLocation = new google.maps.LatLng(dropLat, dropLng);
                    calcRoute(pickUpLocation, dropLocation)

                    var activity = `<h5 class="bg-secondary p-2 text-white mb-3">
                                        Activity Timeline :
                                    </h5>
                                    <ul class="time-line">
                                        ${result.converted_created_at ? 
                                        `<li>
                                            <i class="fas fa-envelope"></i>
                                            <p>
                                                <b>Request Made at :</b> <br>
                                                <small>${result.converted_created_at}</small>
                                            </p>
                                        </li>`
                                        : ''
                                        }

                                        ${result.converted_accepted_at ? 
                                        `<li>
                                            <i class="fas fa-envelope-open-text"></i>
                                            <p>
                                                <b>Accepted at :</b> <br>
                                                <small>${result.converted_accepted_at}</small>
                                            </p>
                                        </li>`
                                        : ''
                                        }

                                        ${result.converted_arrived_at ? 
                                        `<li>
                                            <i class="fas fa-map-marked-alt"></i>
                                            <p>
                                                <b>Arrived at :</b> <br>
                                                <small>${result.converted_arrived_at}</small>
                                            </p>
                                        </li>`
                                        : ''
                                        }

                                        ${result.converted_trip_start_time ? 
                                        `<li>
                                            <i class="fas fa-box"></i>
                                            <p>
                                                <b>Trip Started at
                                                    :</b> <br>
                                                <small>${result.converted_trip_start_time}</small>
                                            </p>
                                        </li>`
                                        : ''
                                        }

                                        ${result.converted_completed_at ? 
                                        `<li>
                                            <i class="fas fa-parachute-box"></i>
                                            <p>
                                                <b>Reached to Drop location at
                                                    :</b> <br>
                                                <small>${result.converted_completed_at}</small>
                                            </p>
                                        </li>`
                                        : ''
                                        }
                                    </ul>`;

                    $('.tripTimeline').html(activity);

                   
                   
                }
            });
        }
    }

    // To rotate truck based on driver bearing
    function rotateMarker(carimage, bearing) {
        if(document.querySelectorAll(`img[src='${carimage}']`).length > 0)
             var bearing = Math.floor((Math.random() * 180) + 0);
            document.querySelectorAll(`img[src='${carimage}']`)[0].style.transform = 'rotate(' + bearing + 'deg)';
    }

    // Delete truck icons once map reloads
    function deleteAllMarkers() {
        for (var i = 0; i < marker.length; i++) {
            marker[i].setMap(null);
        }
    }

    // Draw path from pickup to drop - map api
    function calcRoute(pickup, drop) {
        var request = {
            origin: pickup,
            destination: drop,
            travelMode: google.maps.TravelMode['DRIVING']
        };

        directionsService.route(request, function(response, status) {
            if (status == 'OK') {
                directionsRenderer.setDirections(response);
                var leg = response.routes[0].legs[0];
                makeMarker(leg.start_location, icons['pickup'].icon, icons['pickup'].name, map);
                makeMarker(leg.end_location, icons['drop'].icon, icons['drop'].name, map);
            }
        });
    }

    function makeMarker(position, icon, title, map) {
        new google.maps.Marker({
            position: position,
            map: map,
            icon: icon,
            title: title
        });
    }
   

</script>
<script type="text/javascript">
    var id=$("#req_id").val();
     $.ajax({
                type:"GET",
                url:"{{url('requests/trip_view/fetch')}}/"+id,
                // data: "data",
                // dataType: "DataType",  
                success:function(response){
                    // alert(response);
                    $('#updateRideForm').trigger("reset");
                    // console.log(response);
                    // $('#vehicle_type').val(response.item.vehicle_type_name);
                    $('#vehicle_type').val(response.item.zone_type.vehicle_type.id).change();
                    $('#pickup_location').val(response.item.pick_address);
                    $('#pickup_lan').val(response.item.pick_lat);
                    $('#pickup_long').val(response.item.pick_lng);
                    $('#pickup_date-time').val(response.item.converted_trip_start_time);
                    $('#destination_address').val(response.item.drop_address);
                    $('#drop_lan').val(response.item.drop_lat);
                    $('#drop_long').val(response.item.drop_lng);
                    $('#passengers_capacity').val(response.item.zone_type.vehicle_type.capacity);
                    $('#operator_remark').val(response.item.operator_remark);
                    $('#reason_of_cancellation').val(response.item.reason_of_cancellation);
                    $('#no_of_passengers').val(response.item.no_of_passengers);
                    $('#ride_fare').val(response.bill_details.total_amount);
                    
                }
                });
    function changeCapicity() {
        var id=$("#vehicle_type").val();

        $.ajax({
            type:"GET",
            url:"{{url('requests/trip_view/fetchcapacity')}}/"+id,

            success:function(response){
                $('#passengers_capacity').val(response.vehicle_details.capacity);
            }
            });
        }
    $("#pickup_date-time").flatpickr({
            // minDate: "today",
            enableTime: true,
            dateFormat: "d-m-Y H:i",
            // maxDate: new Date().fp_incr(5)
        });
     function validateform() {
            // alert("hello");
            var valid = true;


            var vehicle_type=$("#vehicle_type");
            if(vehicle_type.val() == "")
            {
                document.getElementById("vehicle_typeCheck").innerHTML="Please Enter Vehicle Type";
                document.getElementById("vehicle_typeCheck").style.color="red";
                valid = false;
            }else{
                document.getElementById("vehicle_typeCheck").innerHTML="";
            }

            var pickup_location=$("#pickup_location");
            if(pickup_location.val() == "")
            {
                document.getElementById("pickup_locationCheck").innerHTML="Please Enter Pickup location";
                document.getElementById("pickup_locationCheck").style.color="red";
                valid = false;
            }else{
                document.getElementById("pickup_locationCheck").innerHTML="";
            }

            var pickup_datetime=$("#pickup_date-time");
            if(pickup_datetime.val() == "")
            {
                document.getElementById("pickup_date-timeCheck").innerHTML="Please Enter Pickup Date-time";
                document.getElementById("pickup_date-timeCheck").style.color="red";
                valid = false;
            }else{
                document.getElementById("pickup_date-timeCheck").innerHTML="";
            }

            var destination_address=$("#destination_address");
            if(destination_address.val() == "")
            {
                document.getElementById("destination_addressCheck").innerHTML="Please Enter Destination Address";
                document.getElementById("destination_addressCheck").style.color="red";
                valid = false;
            }else{
                document.getElementById("destination_addressCheck").innerHTML="";
            }

            var customer_name=$("#customer_name").val();
            if(customer_name.length > 0)
            {
                 if(customer_name.match(/^[a-zA-Z()\s]+$/)){
                    document.getElementById("customer_nameCheck").innerHTML=" ";
                    document.getElementById("customer_nameCheck").style.color="#00c292";
                }
                else{
                    document.getElementById("customer_nameCheck").innerHTML="Please enter Alphabatic Value";
                    document.getElementById("customer_nameCheck").style.color="red";
                    valid = false;
                }
                
            }else{
                document.getElementById("customer_nameCheck").innerHTML="Please enter Customer Name";
                document.getElementById("customer_nameCheck").style.color="red";
                valid = false;
            }

            // var customer_number=$("#customer_number").val();
            // if(customer_number == "")
            // {
            //     document.getElementById("customer_numberCheck").innerHTML="Please enter Mobile Number";
            //     document.getElementById("customer_numberCheck").style.color="red";
            //     valid = false;
                
                
            // }else{
            //     document.getElementById("customer_numberCheck").innerHTML="";
            // }

             var customer_number=$("#customer_number").val();
                if(customer_number.length == 13){
                    if(!isNaN(customer_number)){
                        document.getElementById("customer_numberCheck").innerHTML="";
                    }
                    else{
                        document.getElementById("customer_numberCheck").innerHTML="Please enter valid Mobile Number";
                        document.getElementById("customer_numberCheck").style.color="red";
                        valid = false;
                    }
                }
                else{
                document.getElementById("customer_numberCheck").innerHTML="Please enter valid length Mobile Number";
                document.getElementById("customer_numberCheck").style.color="red";
                valid = false;
                }

            var ride_fare=$("#ride_fare").val();
            if(ride_fare == "")
            {
                document.getElementById("ride_fareCheck").innerHTML="Please Enter Ride Fare";
                document.getElementById("ride_fareCheck").style.color="red";
                valid = false;

            }else{
                // alert(ride_fare);
                if(ride_fare  < 1){
                    document.getElementById("ride_fareCheck").innerHTML="Negative Number are not allowed";
                    document.getElementById("ride_fareCheck").style.color="red";
                    valid = false;
                }
                else{
                    document.getElementById("ride_fareCheck").innerHTML="";
                }
            }

            var operator_remark=$("#operator_remark");
            if(operator_remark.val() == "")
            {
                document.getElementById("operator_remarkCheck").innerHTML="Please Enter Operator Remark";
                document.getElementById("operator_remarkCheck").style.color="red";
                valid = false;
            }else{
                document.getElementById("operator_remarkCheck").innerHTML="";
            }

            // var reason_of_cancellation=$("#reason_of_cancellation");
            // if(reason_of_cancellation.val() == "")
            // {
            //     document.getElementById("reason_of_cancellationCheck").innerHTML="Please Enter Reason of Cancellation";
            //     document.getElementById("reason_of_cancellationCheck").style.color="red";
            //     valid = false;
            // }else{
            //     document.getElementById("reason_of_cancellationCheck").innerHTML="";
            // }

            var no_of_passengers=$("#no_of_passengers").val();
            if(no_of_passengers == "")
            {
                document.getElementById("no_of_passengersCheck").innerHTML="Please Enter No. of Passengers";
                document.getElementById("no_of_passengersCheck").style.color="red";
                valid = false;
            }else{
                var passengers_capacity=$("#passengers_capacity").val();

                if(parseInt(no_of_passengers) > parseInt(passengers_capacity)){
                    document.getElementById("no_of_passengersCheck").innerHTML="Vehicle Capacity Reached! More than "+passengers_capacity+" passengers are not allowed ";
                    document.getElementById("no_of_passengersCheck").style.color="red";
                    valid = false;
                }
                else{
                    document.getElementById("no_of_passengersCheck").innerHTML="";
                }
            }

            // alert(valid);
            if(valid == true)
            {
                document.getElementById("AdminupdateRideForm").submit();
            }
        }

            google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('pickup_location'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();
                $("#pickup_lan").val(latitude);
                $("#pickup_long").val(longitude);
            });

            var destination_address = new google.maps.places.Autocomplete(document.getElementById('destination_address'));
            google.maps.event.addListener(destination_address, 'place_changed', function () {
                var dropplace = destination_address.getPlace();
                var dropaddress = dropplace.formatted_address;
                var droplatitude = dropplace.geometry.location.lat();
                var droplongitude = dropplace.geometry.location.lng();
                $("#drop_lan").val(droplatitude);
                $("#drop_long").val(droplongitude);
            });
        });

</script>


@endsection