@extends("layouts.admin.app")
@section("page-title")
    Support Locations
@endSection
@section('css-links')
    <style>
        #info-box{display: none;}
    </style>
@endsection

@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> {{__("Track Order")}}</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__('Track Order')}}</a></li>
        </ul>
    </div>
@endsection
@section("content")
    @include("includes.dialog")

    <div class="row parent-box">
        <div class="col-lg-10 m-auto map-box">
            <div class="tile">
                <div class="tile-body" id="parent-box">

                    <!--- Map Section --->

                    <div id="map-box">
                        <div id="map"></div>

                    </div>
                    <input type="hidden" name="latitude" id="lat">
                    <input type="hidden" name="longitude" id="lng">

                    <!--- Info Section --->
                </div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")

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

    <script type="text/javascript">
        $(document).ready(function() {

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng({{ $order->order_location_beck_up_latitude }}, {{ $order->order_location_beck_up_longitude }}),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, marker2;

        let pos = new google.maps.LatLng({{ $order->order_location_beck_up_latitude }}, {{ $order->order_location_beck_up_longitude }});
        marker = new google.maps.Marker({
            position: pos,
            map: map,
            icon: "{{asset("assets/person.png")}}"

        });

        marker2 =  new google.maps.Marker({
            position: new google.maps.LatLng({{ $order->acceptOrder()->technician->Livelocations->lat }}, {{ $order->acceptOrder()->technician->Livelocations->lng }}),
            map: map,
            icon: "{{asset("assets/truck.png")}}"
        });


        google.maps.event.addListener(marker2, 'click', (function(marker2) {
            return function() {
                infowindow.setContent("{{ $order->acceptOrder()->technician->full_name }}");
                infowindow.open(map, marker2);
            }
        })(marker2));

        setInterval(()=>{
            console.log("clear");
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "GET",
                url: "{{ route("ajax.track_order.index") }}",
                data: {id: "{{ $order->acceptOrder()->technician->id }}"},
                success: function( response ) {
                    var data = response.data;
                    marker2.setMap(null);
                    marker2 = new google.maps.Marker({
                        position: new google.maps.LatLng(data.lat, data.lng),
                        map: map,
                        icon: "{{asset("assets/truck.png")}}"
                    });

                    google.maps.event.addListener(marker2, 'click', (function(marker2) {
                        return function() {
                            infowindow.setContent(data.name);
                            infowindow.open(map, marker2);
                        }
                    })(marker2));
                },
                error : function (response) {

                }
            });
        }, 2000)
        })
    </script>
@endsection