@extends('branch.layout.default')

@section('content')

<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title ">
                    Track Order
                </h3>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        <!--Begin::Section-->
        <div class="row">
            <div class="col-lg-12">
                <div class="m-portlet" id="trackerMap">
                    <!-- AIzaSyDng1yokhcw1VK3lPaeykbTzHdFW58UWEI -->

                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')

<script>
    var url = document.URL;
    var array = url.split('/');
    var addressId = array[array.length - 1];
    var driverId = array[array.length - 2];

    function loadMap(addressId, driverId) {
        $.ajax({
            url: "{{route('branchordermapTracker')}}",
            type: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                "drId": driverId,
                "addId": addressId
            },
            success: function(data) {
                $('#trackerMap').empty();
                $('#trackerMap').append(data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {}
        });
    }

    window.onload = loadMap(addressId, driverId);
    setInterval(function() {
        loadMap(addressId, driverId)
    }, 20000);
</script>

@endsection