@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(31.97579740000000000, 35.86237730000000000),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();
            var infowindow2 = new google.maps.InfoWindow();
            var color = ["https://maps.google.com/mapfiles/ms/icons/orange-dot.png",
                                                                    "https://maps.google.com/mapfiles/ms/icons/purple-dot.png",
                                                                    "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
                                                                    "https://maps.google.com/mapfiles/ms/icons/pink-dot.png",
                                                                    "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"], colorSelect = [];

            var marker = [], marker2 = [];

            @foreach($orders as $index => $order)
                var colorMarker = color[Math.floor((Math.random()*color.length))];
                colorSelect.push(colorMarker)
                marker[{{ $index }}] = new google.maps.Marker({
                    position: new google.maps.LatLng({{ $order->order_location_beck_up_latitude }}, {{ $order->order_location_beck_up_longitude }}),
                    map: map,
                    icon: colorMarker
                });

                marker2[{{ $index }}] =  new google.maps.Marker({
                    position: new google.maps.LatLng({{ $order->order_location_beck_up_latitude }}, {{ $order->order_location_beck_up_longitude }}),
                    map: map,
                    icon: colorMarker
                });
              

                google.maps.event.addListener(marker2[{{ $index }}], 'click', (function() {
                    return function() {
                        infowindow.open(map,  marker2[{{ $index }}]);
                        infowindow2.setContent("{{ $order->user->full_name }}" + " {{ $order->id }}");
                        infowindow2.open(map,  marker[{{ $index }}]);
                    }
                })(marker2[{{ $index }}]));
            @endforeach

            setInterval(()=>{
                console.log("clear");
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: "GET",
                    url: "{{ route("ajax.track_order.get_all") }}",
                    success: function( response ) {
                        var data = response.data;
                        for(i=0; i < marker2.length;i++){
                            marker2[i].setMap(null);
                        }
                        data.forEach((mark, index) => {
                            marker2[index] = new google.maps.Marker({
                                position: new google.maps.LatLng(mark.lat, mark.lng),
                                map: map,
                                icon: colorSelect[index]
                            });

                            google.maps.event.addListener(marker2[index], 'click', (function() {
                                return function() {
                                    infowindow.setContent(mark.name + " " + mark.id);
                                    infowindow.open(map,  marker2[index]);
                                    infowindow2.setContent(mark.user_order + " " + mark.id);
                                    infowindow2.open(map,  marker[index]);
                                }
                            })(marker2[index]));
                        })
                    },
                    error : function (response) {

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