@extends('pages.admin.layout')

@section('css_before')
<style>
    .map, .map-wrapper {
        height: 100%;
    }

    .map-wrapper .geo-location {
        -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        -moz-transition: 0.3s ease;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
        position: absolute;
        height: 26px;
        width: 26px;
        background-color: #4611a7;
        color: white;
        font-size: 16px;
        text-align: center;
        line-height: 26px;
        right: 13px;
        top: 40px;
        z-index: 1;
        cursor: pointer;
    }

    .map-wrapper .geo-location:hover {
        background-color: white;
        color: #4611a7;
    }

    .map.show-marker-labels .marker .mini-title {
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }

    .map .cluster:hover > div {
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .map .cluster > div {
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -moz-transition: 0.5s cubic-bezier(0, 0.28, 0.45, 1.01);
        -webkit-transition: 0.5s cubic-bezier(0, 0.28, 0.45, 1.01);
        transition: 0.5s cubic-bezier(0, 0.28, 0.45, 1.01);
        -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.3);
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.3);
        background-color: #4611a7;
        border: 2px solid #4611a7;
        width: 36px;
        height: 36px;
        color: #fff !important;
        line-height: 32px !important;
    }

    .map .cluster > div:after {
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        -moz-transform: translateZ(-2px);
        -ms-transform: translateZ(-2px);
        -webkit-transform: translateZ(-2px);
        transform: translateZ(-2px);
        -moz-box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.3);
        box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.3);
        border: 2px solid #4611a7;
        background-color: #4611a7;
        width: 36px;
        height: 36px;
        position: absolute;
        top: -2px;
        left: -2px;
        content: "";
    }

    .map .cluster > div:before {
        text-shadow: none;
        -webkit-font-smoothing: antialiased;
        font-family: 'fontawesome';
        speak: none;
        font-weight: normal;
        font-variant: normal;
        line-height: 1;
        text-transform: none;
        -moz-transform: translateZ(-4px);
        -ms-transform: translateZ(-4px);
        -webkit-transform: translateZ(-4px);
        transform: translateZ(-4px);
        content: "\f002";
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 33px;
        height: 36px;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
    }

    .map a[href^="http://maps.google.com/maps"] {
        display: none !important;
    }

    .map a[href^="https://maps.google.com/maps"] {
        display: none !important;
    }

    .map .gmnoprint a, .map .gmnoprint span, .map .gm-style-cc {
        display: none;
    }

    .map .gm-style button[draggable="false"] {
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .map .marker {
        display: inline-block;
        cursor: pointer;
        position: relative;
    }

    .map .marker:after {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -moz-transition: 0.3s ease;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
        -moz-transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
        transform: scale(0.7, 0.7);
        width: 14px;
        height: 4px;
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 0;
    }

    .map .marker:hover:after, .map .marker.hover-state:after, .map .marker.active:after {
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    .map .marker:hover .marker-wrapper, .map .marker.hover-state .marker-wrapper, .map .marker.active .marker-wrapper {
        -moz-transform: rotateY(180deg) translateY(-4px);
        -ms-transform: rotateY(180deg) translateY(-4px);
        -webkit-transform: rotateY(180deg) translateY(-4px);
        transform: rotateY(180deg) translateY(-4px);
    }

    .map .marker:hover .marker-wrapper .pin:after, .map .marker.hover-state .marker-wrapper .pin:after, .map .marker.active .marker-wrapper .pin:after {
        -moz-transform: translateX(-1px);
        -ms-transform: translateX(-1px);
        -webkit-transform: translateX(-1px);
        transform: translateX(-1px);
        -moz-transition: 0.3s ease;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }

    .map .marker:hover .mini-title, .map .marker.hover-state .mini-title, .map .marker.active .mini-title {
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    .map .marker.active .marker-wrapper:before {
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 2s;
        -webkit-animation-name: pulse;
        -webkit-animation-fill-mode: forwards;
        /* this prevents the animation from restarting! */
        -webkit-animation-iteration-count: infinite;
        -moz-animation-delay: 0s;
        -moz-animation-duration: 2s;
        -moz-animation-name: pulse;
        -moz-animation-fill-mode: forwards;
        /* this prevents the animation from restarting! */
        -moz-animation-iteration-count: infinite;
        -o-animation-delay: 0s;
        -o-animation-duration: 2s;
        -o-animation-name: pulse;
        -o-animation-fill-mode: forwards;
        /* this prevents the animation from restarting! */
        -o-animation-iteration-count: infinite;
        animation-delay: 0s;
        animation-duration: 2s;
        animation-name: pulse;
        animation-fill-mode: forwards;
        /* this prevents the animation from restarting! */
        animation-iteration-count: infinite;
    }

    .map .marker .marker-wrapper {
        -moz-transition: 0.5s cubic-bezier(0, 0.28, 0.45, 1.01);
        -webkit-transition: 0.5s cubic-bezier(0, 0.28, 0.45, 1.01);
        transition: 0.5s cubic-bezier(0, 0.28, 0.45, 1.01);
        position: relative;
        transform-style: preserve-3d;
        width: 37px;
        height: 49px;
    }

    .map .marker .marker-wrapper:before {
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        background-color: #4611a7;
        width: 37px;
        height: 37px;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        z-index: -1;
    }

    .map .marker .marker-wrapper:after {
        text-shadow: none;
        -webkit-font-smoothing: antialiased;
        font-family: 'fontawesome';
        speak: none;
        font-weight: normal;
        font-variant: normal;
        line-height: 1;
        text-transform: none;
        -moz-transform: translateZ(-4px);
        -ms-transform: translateZ(-4px);
        -webkit-transform: translateZ(-4px);
        transform: translateZ(-4px);
        content: "\f002";
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 37px;
        height: 37px;
        line-height: 34px;
        font-size: 14px;
        text-align: center;
    }

    .map .marker .marker-wrapper .pin {
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px white;
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px white;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px white;
        transform-style: preserve-3d;
        border: 2px solid #4611a7;
        position: absolute;
        top: 0;
        left: 0;
        width: 37px;
        height: 37px;
        background-size: cover;
    }

    .map .marker .marker-wrapper .pin:before {
        -moz-transform: translateZ(-2px);
        -ms-transform: translateZ(-2px);
        -webkit-transform: translateZ(-2px);
        transform: translateZ(-2px);
        -moz-box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.3);
        box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.3);
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        border: 2px solid #4611a7;
        content: "";
        z-index: -2px;
        background-color: #4611a7;
        position: absolute;
        top: -2px;
        left: -2px;
        width: 37px;
        height: 37px;
        z-index: 1;
    }

    .map .marker .marker-wrapper .pin .image {
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px white;
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px white;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px white;
        background-size: cover;
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 2;
    }

    .map .marker .marker-wrapper .pin .image:after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 4px 0 4px;
        border-color: #4611a7 transparent transparent transparent;
        content: "";
        position: absolute;
        bottom: -8px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .map .marker .tag {
        -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        -moz-transform: translateZ(3px);
        -ms-transform: translateZ(3px);
        -webkit-transform: translateZ(3px);
        transform: translateZ(3px);
        position: absolute;
        top: -3px;
        right: -1px;
        z-index: -1;
        background-color: #4611a7;
        width: 19px;
        font-size: 9px;
        height: 19px;
        color: #fff;
        text-align: center;
        line-height: 18px;
        transform-style: preserve-3d;
    }

    .map .marker .tag i {
        -moz-transform: translateZ(2px);
        -ms-transform: translateZ(2px);
        -webkit-transform: translateZ(2px);
        transform: translateZ(2px);
        transform-style: preserve-3d;
    }

    .map .marker .mini-title {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        -moz-transform: translateX(10px);
        -ms-transform: translateX(10px);
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        -moz-transition: 0.3s ease;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
        -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
        pointer-events: none;
        position: absolute;
        left: 50px;
        font-size: 14px;
        top: 5px;
        white-space: nowrap;
        background-color: #fff;
        padding: 2px 4px;
    }

    .map .marker .mini-title:after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 6px 4px 0;
        border-color: transparent #fff transparent transparent;
        content: "";
        position: absolute;
        left: -6px;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .map .marker .mini-title:before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 6px 4px 0;
        border-color: transparent rgba(0, 0, 0, 0.2) transparent transparent;
        content: "";
        position: absolute;
        left: -6px;
        top: 2px;
        bottom: 0;
        margin: auto;
    }

    .mini-title {
        z-index: 999999;
    }

    .map .tooltip .tooltip-inner {
        -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        white-space: nowrap;
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
        background-color: #fff;
        color: #1f1f1f;
    }

    .map .tooltip .tooltip-arrow {
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
        border-top-color: rgba(0, 0, 0, 0.3);
        z-index: 1;
        bottom: -1px;
    }

    .map .tooltip .tooltip-arrow:after {
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 5px 0;
        border-top-color: #fff;
        position: absolute;
        top: -6px;
        left: -5px;
        content: "";
    }

    .driverDetails li a {
        color: white;
        padding: 5px;
        width: 100%;
        margin: 1px;
        display: block;
    }
    ul.dropdown-menu.show li {
    font-size: 13pt;
    margin-bottom: 8px;
}
</style>
@endsection

@section('content')
<!-- Main content -->
<section class="content">

    <ul id="contextMenu" class="dropdown-menu driverDetails" role="menu" style="display:none">
        <li><a tabindex="-1" href="javascript:void(0)" target="_blank" id="orderLink" data-driverid="openorder"
               class="bg-success">View
                Order</a></li>
        <li class="divider"></li>
        @foreach(App\Drivers::get() as $driver)
        <li><a tabindex="-1" href="#" data-driverid="{{$driver->id}}"
               style="background: #{{ substr(md5($driver->name), 0, 6)}};">{{$driver->name}}
                ({{$driver->telephone}})</a>
        </li>
        @endforeach
        <li class="divider"></li>
        <li>
            <a href="background: red; color:white;" data-driverid="false" class="unassignDriver" href="javascript:void(0)">Unassign Driver</a>
        </li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#" data-driverid="false" style="background: red">Close</a></li>
    </ul>

    <h2 class="content-heading d-print-none mt-0 pt-0">
        Delivery Management
    </h2>
    <div class="block py-3 px-3">
        <div class="row">
            <div class="col-8">
                <div class="row">
                    <div class="col-6"><h3>Total orders: <strong class="text-success">{{$orders->count()}}</strong></h3> @if(count($excludes) > 0) <h4>Excluding: <strong>{{implode(", ", $excludes)}}</strong></h4> @endif</div>
                    <div class="col-6">

                        <div class="button-group pull-right float-right">
                            <div class="dropdown">
                                <button type="button" class="btn btn-info dropdown-toggle mb-1" data-toggle="dropdown"><span
                                        class="fa fa-cog"></span> Exclude Items <span class="caret"></span></button>
                             <form action="/admin/delivery" method="GET">
                                {{ method_field('get') }}
                                @csrf
                                <ul class="dropdown-menu">

                                    <li><input name="items[Milk]" id="item_Milk" type="checkbox" @if($items["Milk"])
                                        checked="checked" @endif />&nbsp;
                                        <label for="item_Milk">Milk</label></li>
                                    <li><input name="items[Eggs]" id="item_Eggs" type="checkbox" @if($items["Eggs"])
                                        checked="checked" @endif />&nbsp;
                                        <label for="item_Eggs">Eggs</label></li>
                                    <li><input name="items[Ice]" id="item_Ice" type="checkbox" @if($items["Ice"])
                                        checked="checked" @endif />&nbsp;
                                        <label for="item_Ice">Ice Cream</label></li>
                                    <li><input name="items[Bread]" id="item_Bread" type="checkbox" @if($items["Bread"])
                                        checked="checked" @endif />&nbsp;
                                        <label for="item_Bread">Bread</label></li>
                                    <li><input name="items[Farrenheight]" id="item_Farrenheight" type="checkbox"
                                               @if($items["Farrenheight"]) checked="checked" @endif />&nbsp;
                                        <label for="item_Farrenheight">Farrenheight</label></li>
                                    <li><input name="items[Hambleton]" id="item_Hambleton" type="checkbox"
                                               @if($items["Hambleton"]) checked="checked" @endif />&nbsp;
                                        <label for="item_Hambleton">Hambleton</label></li>
                                    <li><input name="items[Wesse]" id="item_Wesse" type="checkbox"
                                               @if($items["Wesse"]) checked="checked" @endif />&nbsp;
                                        <label for="item_Wesse">Wesse</label></li>


                                    <li><button class="btn btn-sm btn-success btn-block" type="submit">Filter</button></li>
                                </ul>
                            </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="map" class="map" style="width: 100%; height: 70vh;"></div>
            </div>
            <div class="col-4">

                <div class="card">
                    <div class="card-header bg-primary text-white">Drivers</div>
                    <div class="card-body driverDetails">

                        @foreach(App\Drivers::get() as $driver)
                        <li class="dropdown-item"><a tabindex="-1" href="#" data-driverid="{{$driver->id}}"
                                                     style="background: #{{ substr(md5($driver->name), 0, 6)}};">{{$driver->name}}
                                ({{$driver->telephone}})</a>
                        </li>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>

    </div>
    <!-- /.box -->

</section>
@endsection
@section('scripts')
<script>
    let map = false;
    let infoWindow = false;
    let allMarkers = false;
    let items = {
        Milk: {!! var_export($items['Milk'] !== false) !!},
        Eggs: {!! var_export($items['Eggs'] !== false)!!},
        Ice: {!! var_export($items['Ice'] !== false)!!},
        Bread: {!! var_export($items['Bread'] !== false)!!},
        Wesse: {!! var_export($items['Wesse'] !== false)!!},
        Hambleton: {!! var_export($items['Hambleton'] !== false)!!},
        Farrenheight: {!! var_export($items['Farrenheight'] !== false)!!}
    };
    $('.dropdown.keep-open').on({
    "shown.bs.dropdown": function() { this.closable = false; },
    "click":             function() { this.closable = true; },
    "hide.bs.dropdown":  function() { return this.closable; }
});

    (function ($, window) {

        $.fn.contextMenu = function (event) {

            return this.each(function () {


                //open menu
                $("#contextMenu")
                    .data("invokedOn", $(event)).data("order_id", $(event.currentTarget).data("id"))
                    .fadeIn().show()
                    .css({
                        position: "absolute",
                        left: getLeftLocation(event),
                        top: getTopLocation(event)
                    })

            });

            function getLeftLocation(e) {
                var mouseWidth = e.pageX;
                var pageWidth = $(window).width();
                var menuWidth = $("#contextMenu").width();

                // opening menu would pass the side of the page
                if (mouseWidth + menuWidth > pageWidth &&
                    menuWidth < mouseWidth) {
                    return mouseWidth - menuWidth;
                }
                return mouseWidth;
            }

            function getTopLocation(e) {
                var mouseHeight = e.pageY;
                var pageHeight = $(window).height();
                var menuHeight = $("#contextMenu").height();

                // opening menu would pass the bottom of the page
                if (mouseHeight + menuHeight > pageHeight &&
                    menuHeight < mouseHeight) {
                    return mouseHeight - menuHeight;
                }
                return mouseHeight;
            }

        };
    })($, window);

    //make sure menu closes on any click
    $(document).click(function (e) {
        $("#contextMenu").hide();
    });

    $(document).on("click", ".marker", (e) => {
        $(this).contextMenu(e);
        e.preventDefault();
        return false;
    })

    $(document).on("click", "#contextMenu li a", (e) => {
        let order_id = $(e.currentTarget).parent().parent().data("order_id");
        let driver_id = $(e.currentTarget).data("driverid");
        let name = $(e.currentTarget).text();
        if (driver_id === "openorder") {
            $("#orderLink").attr("href", "/admin/orders/" + order_id + "/edit");
            $("#orderLink").click();
            return false;
        }


        if (driver_id !== 'false' && driver_id !== false) {
            console.log(order_id, driver_id)
            $.ajax({
                method: 'GET',
                url: "/admin/delivery/assign_driver/" + order_id + "/" + driver_id,
                success: (res) => {
                    console.log(res)
                    swal("Order ID: " + order_id + " - driver changed to: " + name, {
                        icon: "success",
                    });
                }, error: (res) => {
                    swal("Could not update the driver for order: " + order_id, {
                        icon: 'error'
                    })
                }
            })
        } else if( $(e.currentTarget).hasClass('unassignDriver')) {
            $.ajax({
                method: 'GET',
                url: "/admin/delivery/unassign_driver/" + order_id,
                success: (res) => {
                    console.log(res)
                    swal("Order ID: " + order_id + " - driver has been unassigned ", {
                        icon: "success",
                    });
                }, error: (res) => {
                    swal("Could not update the driver for order: " + order_id, {
                        icon: 'error'
                    })
                }
            })
        }
    })

    function loadData(url) {
        $.ajax({
            url: url,
            dataType: "json",
            method: "GET",
            data: items,
            cache: false,
            success: function (results) {
                for (var i = 0; i < allMarkers.length; i++) {
                    allMarkers[i].setMap(null);
                }
                allMarkers = results;
                placeMarkers(results);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

    function loadMarkers() {
        loadData("/admin/delivery/markers", null);
    }

    var customLabel = {
        restaurant: {
            label: 'R'
        },
        bar: {
            label: 'B'
        }
    };
    let newMarkers = [];

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(52.444149, -0.918572),
            zoom: 10
        });
        infoWindow = new google.maps.InfoWindow;

        loadMarkers()

    }

    function placeMarkers(markers) {

        newMarkers = [];

        for (i=0; i < markers.length; i++) {

            let item = markers[i];
            var latLng = new google.maps.LatLng(parseFloat(item.DeliveryLatitude), parseFloat(item.DeliveryLongitude));


            //Check Markers array for duplicate position and offset a little
            if(newMarkers.length != 0) {
                for (i2=0; i2 < newMarkers.length; i2++) {
                    var existingMarker = newMarkers[i2];
                    var pos = existingMarker.getPosition();
                    if (latLng.equals(pos)) {
                        console.log("SAME POS", i2, item.id);
                        var a = 360.0 / newMarkers.length;
                        var newLat = pos.lat() + -.00220 * Math.cos((+a*i2) / 180 * Math.PI);  //x
                        var newLng = pos.lng() + -.00424 * Math.sin((+a*i2) / 180 * Math.PI);  //Y
                        latLng = new google.maps.LatLng(newLat,newLng);
                    }
                }
            }


            var markerContent = document.createElement('div');
            var thumbnailImage;
            var color;

            thumbnailImage = "assets/img/items/default.png";

            color = item.driver_color;
            markerContent.innerHTML =
                '<div class="marker" data-id="' + item.id + '" data-color="' + color + '" data-i="' + i + '">' +
                '<div class="mini-title">Order: #' + item.id + ' - ' + item.DeliveryFirstName + ' ' + item.DeliveryLastName + '</div>' +
                '<div class="marker-wrapper">' +
                '<div class="pin">' +
                '<div class="image" style="background-image: url(' + thumbnailImage + ');"></div>' +
                '</div>' +
                '</div>';

            if (item.driver_color != null) {
                color = item.driver_color;
                var style = document.createElement("style");
                document.head.appendChild(style);
                console.log(color);
                document.styleSheets[0].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper::before { background-color: ' + color + '}', 0);
                document.styleSheets[0].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .pin { border-color: ' + color + '}', 0);
                document.styleSheets[0].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .pin::before { background-color: ' + color + '}', 0);
                document.styleSheets[0].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .pin::before { border-color: ' + color + '}', 0);
                document.styleSheets[0].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .pin .image::after { border-color: ' + color + ' transparent transparent transparent }', 0);
                document.styleSheets[0].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .tag { background-color: ' + color + '}', 0);
                document.styleSheets[0].insertRule('.hero-section .results-wrapper .result-item[data-id="' + item.id + '"] > a::before { background-color: ' + color + '}', 0);
                document.styleSheets[0].insertRule('.sidebar-content[data-id="' + item.id + '"] .label { background-color: ' + color + '}', 0);
            }
            item.markerContent = markerContent;
            item.location = latLng;

            renderRichMarker(item);
        }
    }

    // Create marker using RichMarker plugin -------------------------------------------------------------------

    function renderRichMarker(item) {
        marker = new RichMarker({
            position: item.location,
            map: map,
            draggable: false,
            content: item.markerContent,
            flat: true,
            id: item.id
        });
        google.maps.event.addListener(marker, 'click', (function (marker, item) {
            return function () {
                console.log(marker, item)
            }
        })(marker, item));
        newMarkers.push(marker);

    }


</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyO3x7uKn93SypSRbLZnY2AXgrfeKBwfY&callback=initMap">
</script>
<script src="/js/richmarker.js"></script>
@endsection