@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: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        speak: none;
        font-weight: normal;
        font-variant: normal;
        line-height: 1;
        text-transform: none;
        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:after {
        content: "";
        display: block;
        transform: none;
        font-size: 17pt;
    }

    .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;
    }
</style>
@endsection

@section('content')
<!-- Main content -->
<section class="content">
    <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 id="map" class="map" style="width: 100%; height: 70vh;"></div>
            </div>
            <div class="col-4">
                <div class="directions" id="directionsPanel"></div>
            </div>
        </div>

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

</section>
@endsection
@section('scripts')
<script>
    let map = false;
    let infoWindow = false;
    let allMarkers = false;
    function loadData(url) {
        $.ajax({
            url: url,
            dataType: "json",
            method: "GET",
            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);
            }
        });
    }

    var base = false;

    var directionsService = false;
    var directionsRenderer = false;

    function initMap() {
        base = new google.maps.LatLng(52.444149, -0.918572);
        directionsService = new google.maps.DirectionsService();
        directionsRenderer = new google.maps.DirectionsRenderer();
        var mapOptions = {
            zoom: 7,
            center: base
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        directionsRenderer.setMap(map);

        loadMarkers()
        calcRoute();
    }

    function calcRoute() {
        var request = {
            origin: base,
            destination: base,
            waypoints: [
            @foreach($orders as $order)
                {
                    location:  new google.maps.LatLng({{$order->DeliveryLatitude}}, {{$order->DeliveryLongitude}}),
                    stopover: false
                } @if($loop->last) @else , @endif
            @endforeach
            ],
            provideRouteAlternatives: false,
            travelMode: 'DRIVING',
            drivingOptions: {
                departureTime: new Date(/* now, or future date */),
                trafficModel: 'pessimistic'
            },
            unitSystem: google.maps.UnitSystem.IMPERIAL
        };
        directionsService.route(request, function (result, status) {
            if (status == 'OK') {
                directionsRenderer.setDirections(result);
            }
        });
    }

    function loadData(url) {
        $.ajax({
            url: url,
            dataType: "json",
            method: "GET",
            cache: false,
            success: function (results) {
                placeMarkers(results);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }


    function loadMarkers() {
        loadData("/admin/delivery/markers/{{$orders->first()->DriveryID}}", null);
    }

    function placeMarkers(markers) {

        newMarkers = [];

        color = markers[0].driver_color;
        var style = document.createElement("style");
        document.head.appendChild(style);
        console.log(color);
        document.styleSheets[document.styleSheets.length - 1].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper::before { background-color: ' + color + '}', 0);
        document.styleSheets[document.styleSheets.length - 1].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .pin { border-color: ' + color + '}', 0);
        document.styleSheets[document.styleSheets.length - 1].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .pin::before { background-color: ' + color + '}', 0);
        document.styleSheets[document.styleSheets.length - 1].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .pin::before { border-color: ' + color + '}', 0);
        document.styleSheets[document.styleSheets.length - 1].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .pin .image::after { border-color: ' + color + ' transparent transparent transparent }', 0);
        document.styleSheets[document.styleSheets.length - 1].insertRule('.map .marker[data-color="' + color + '"] .marker-wrapper .tag { background-color: ' + color + '}', 0);


        for (let i in markers) {

            let item = markers[i];
            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>';

            var style = document.createElement("style");
            document.head.appendChild(style);
            document.styleSheets[document.styleSheets.length - 1].insertRule('.map .marker[data-id="' + item.id + '"] .marker-wrapper::after { content: "' + item.DeliveryOrder + '"}', 0);

            item.markerContent = markerContent;

            renderRichMarker(item);
        }
    }

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

    function renderRichMarker(item) {
        marker = new RichMarker({
            position: new google.maps.LatLng(parseFloat(item.DeliveryLatitude), parseFloat(item.DeliveryLongitude)),
            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 async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyO3x7uKn93SypSRbLZnY2AXgrfeKBwfY&callback=initMap">
</script>
<script async defer src="/js/richmarker.js"></script>
@endsection