@extends('layouts.admin')

@section('content')
    <link rel="stylesheet" href="{{ asset('assets/css/route.css') }}">

    <section class="pc-container">
        <div class="pc-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('routes') }}">Routes Management</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="javascript:void(0)">All Routes</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="row mt-2">
                                <div class="col-md-6">
                                    <div class="page-header-title">
                                        <h4 class="mb-0">
                                            All Routes
                                        </h4>
                                    </div>
                                </div>
                                <div class="col-md-6 text-end">
                                    <div id="menu-btn" role="button" class="btn avtar avtar-xs btn-link-success btn-pc-default" onclick="toggleLeftPanel()">
                                        <i class="ti ti-menu-2 f-22" data-bs-toggle="tooltip" title="Show/hide left panel"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body routes-outer">
                            <div class="row">
                                <div id="left-panel" class="col-md-3 px-0">
                                    <div>
                                        <div class="input-group mb-1">
                                            <input type="text" name="" id="search-input" class="form-control" placeholder="Search address...">
                                            <button class="btn btn-outline-secondary br-round-8" type="button" id="button-addon2" data-bs-toggle="tooltip" data-bs-original-title="Search" onclick="findAddress()">
                                                <i class="ti ti-search"></i>
                                            </button>
                                        </div>
                                    </div>

                                    @if (count($routes))
                                        <ul class="list-group">
                                            <li class="list-group-item ps-1 pe-0 py-2 border-0">
                                                <span class="form-check form-switch switch-sm all-routes-li-span">
                                                    <input id="all-routes-check" type="checkbox" class="form-check-input input-primary mt-1 cursor-p" onclick="drawAllRoutes(this)">
                                                    <label class="form-check-label all-routes-labels" for="all-routes-check">
                                                        All
                                                    </label>
                                                </span>
                                            </li>

                                            @foreach ($routes as $item)
                                                <li class="list-group-item ps-1 pe-0 py-2 border-0">
                                                    <span class="form-check form-switch switch-sm all-routes-li-span">
                                                        <input id="routeCheckbox{{$loop->index}}" type="checkbox" class="form-check-input input-primary mt-1 route-checkbox cursor-p" value="{{ $item->id }}" onclick="drawRouteMap(this, {{ $item->id }})">
                                                        <label class="form-check-label all-routes-labels" for="routeCheckbox{{$loop->index}}">
                                                            #{{ $item->routeNumber }} &nbsp; {{ $item->title }}
                                                        </label>
                                                    </span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @else
                                        <div class="my-3 text-center">
                                            No route found!
                                        </div>
                                    @endif
                                </div>
                                <div id="right-panel" class="col-md-9 pe-0">
                                    <div id="map" class="route-index-map all-routes-map">
                                        {{-- Google API will draw map here --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="{{ asset('assets/js/plugins/choices.min.js') }}"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}" ></script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        // Set starting location lat, lng
        var latitude = Number('{{ $baseLat }}');
        var longitude = Number('{{ $baseLng }}');

        // Variables for map
        var marker = 0;
        var map = 0;
        var autocomplete;
        var oldRouteDirections = [];
        var routeColor = '#00A86B';
        var markerColor = '#EC5800';
        var routeWeight = 2.5;
        var directionsService = new google.maps.DirectionsService();
        var maps = [];
        var dr = [];
        var colorIndex = 0;
        var markers = [];
        var bounds = new google.maps.LatLngBounds();

        var colors = [
            'green',
            'brown',
            '#6A5ACD',
            '#1E90FF',
            '#FF6347',
            '#9ACD32',
            '#40E0D0',
            'orange',
            'purple',
            'cyan',
            'gray',
            'aqua',
            '#6495ED',
            '#FF8C00',
            '#9932CC',
            '#DAA520',
            '#7B68EE',
            '#808000',
            '#DA70D6',
            '#EEE8AA',
            '#8B4513',
            '#98FB98'
        ];

        const mapOptions = {
            zoom: 14,
            center: { lat: latitude, lng: longitude },
        };

        function drawAllRoutes(ele) {
            if (ele.checked == true) {
                $('.route-checkbox').each(function(i, ob) {
                    ob.checked = false;
                    ob.click();
                });

                ele.checked = true;
            } else {
                $('.route-checkbox').each(function(i, ob) {
                    ob.checked = true;
                    ob.click();
                });

                ele.checked = false;
            }
        }

        // This function draws map for given route id.
        function drawRouteMap(ele, routeId) {
            var origins;
            var destinations;
            var waypoints;
            var temp = [];
            var waypointLatLong = [];
            var directionsRenderer = new google.maps.DirectionsRenderer();
            var routeMarkers = [];
            var directionRenderers = [];
            markers = [];

            if (ele.checked == true) {
                if (colorIndex == 21) {
                    colorIndex = 0;
                }

                routeColor = colors[colorIndex++];

                // Add starting lat,lng to bounds
                let m1 = new google.maps.Marker({
                    position: { lat: latitude, lng: longitude },
                    map: map,
                });

                markers.push(m1);
                bounds.extend(m1.getPosition());

                var url = "{{ route('get-route-map', ['route' => 'arg1']) }}";
                url = url.replace('arg1', routeId);

                $.ajax({
                    type: 'POST',
                    url: url,
                    success: function(data) {
                        origins = data['origins'];
                        destinations = data['destinations'];
                        waypoints = data['waypoints'];
                        info = data['info'];

                        origins.forEach(function(item) {
                            temp.push(new google.maps.LatLng(item[0], item[1]));
                            waypointLatLong.push([item[0], item[1]]);
                        });

                        origins = temp;

                        temp = [];

                        destinations.forEach(function(item) {
                            temp.push(new google.maps.LatLng(item[0], item[1]));
                        });

                        destinations = temp;

                        var service = new google.maps.DistanceMatrixService();

                        service.getDistanceMatrix(
                        {
                            origins: origins,
                            destinations: destinations,
                            travelMode: 'DRIVING',
                        });

                        let request = {
                            origin: origins[0],
                            destination: destinations[destinations.length - 1],
                            waypoints: waypoints,
                            travelMode: 'DRIVING',
                            optimizeWaypoints: true,
                            provideRouteAlternatives: true,
                        };

                        if (oldRouteDirections.length > 0) {
                            oldRouteDirections.forEach(function(item) {
                                if (item[0] == data['routeNumber']) {
                                    item[1].setMap(null);

                                    if (item[2].length > 0) {
                                        item[2].forEach(function(mk) {
                                            mk.setMap(null);
                                        });
                                    }
                                }
                            });
                        }

                        directionsService.route(request, function(result, status) {
                            if (status == 'OK') {
                                directionsRenderer.setOptions({
                                    polylineOptions: {
                                        fillColor: routeColor,
                                        strokeColor: routeColor,
                                        strokeWeight: routeWeight,
                                    },
                                    preserveViewport: true,
                                    suppressMarkers: true
                                });

                                let directionRenderersLen = directionRenderers.length;
                                let showDirectionsFlag = true;

                                if (directionRenderersLen > 0) {
                                    for (let i = 0; i < directionRenderersLen; i++) {
                                        if (directionRenderers[i][0] == data['routeId']) {
                                            let dR = directionRenderers[i][1];
                                            dR.setMap(null);
                                            dR.setDirections({routes: []});
                                            directionRenderers.splice(i, 1);
                                            showDirectionsFlag = false;
                                            break;
                                        }
                                    }
                                }

                                if (showDirectionsFlag == true) {
                                    directionRenderers.push([data['routeId'], directionsRenderer, routeColor]);

                                    let temp = [];
                                    temp = data['destinations'];

                                    let infoWindowArr = [];
                                    let legs = result['routes'][0]['legs'];

                                    for (let i = 0; i < temp.length; i++) {
                                        let myPin = {
                                            path: 'M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0',
                                            strokeColor: markerColor,
                                            fillColor: markerColor,
                                            fillOpacity: 1,
                                            scale: 0.7
                                        };

                                        let m = new google.maps.Marker({
                                            position: { lat: Number(legs[i]['end_location'].lat()), lng: Number(legs[i]['end_location'].lng()) },
                                            map: map,
                                            icon: myPin,
                                            label: {
                                                text: ""+(i+1),
                                                fontWeight: "bold",
                                                color:"white"
                                            }
                                        });

                                        markers.push(m);

                                        bounds.extend(m.getPosition());

                                        let infoContent = '<div class="infoContent fw-medium f-14">';

                                        infoContent += '<span class="f-16">' + info[i]['accountId'] + '</span>';
                                        infoContent += '<hr>';
                                        infoContent += '<div class="text-gray-700">';
                                        infoContent += '<span class="f-16">' + info[i]['firstName'] + ' ' + info[i]['lastName'] + '</span>';
                                        infoContent += '<div>'+ info[i]['address']['houseNumber'] +'</div>';
                                        infoContent += '<div>'+ info[i]['address']['street'] +'</div>';
                                        infoContent += '<div>'+ info[i]['address']['address'] +'</div>';
                                        infoContent += '<br>';
                                        infoContent += '<div>Phone: <a class="text-blue" href="tel:+'+ info[i]['phone'] +'">'+ info[i]['phone'] +'</a></div>'

                                        if (info[i]['email'] != null) {
                                            infoContent += '<div>Email: <a class="text-blue" href="mailto:'+ info[i]['email'] +'">'+ info[i]['email'] +'</a></div>'
                                        }

                                        infoContent += '<hr>';
                                        infoContent += 'Package: ' + info[i]['packageTitle'];

                                        infoContent += '</div>';

                                        let infowindow = new google.maps.InfoWindow({
                                            content: infoContent,
                                            ariaLabel: 'alias-' + info[i]['firstName'],
                                        });

                                        infoWindowArr.push(infowindow);

                                        m.addListener("mouseover", () => {
                                            infoWindowArr.forEach(function(x) {
                                                x.close();
                                            })

                                            infowindow.open({
                                                anchor: m,
                                                map,
                                            });
                                        });

                                        google.maps.event.addListener(map, "click", function(event) {
                                            infowindow.close();
                                        });
                                    }

                                    routeMarkers.push([data['routeId'], markers]);

                                    if (oldRouteDirections.length > 0) {
                                        let oldRouteDirectionsLength = oldRouteDirections.length;
                                        let oldRouteDirectionsFlag = false;

                                        for (let i = 0; i < oldRouteDirectionsLength; i++) {
                                            if (oldRouteDirections[0][0] == data['routeNumber']) {
                                                oldRouteDirections[0][1] = directionsRenderer;
                                                oldRouteDirections[0][2] = markers;
                                                oldRouteDirectionsFlag = true;
                                                break;
                                            }
                                        }

                                        if (oldRouteDirectionsFlag == false) {
                                            oldRouteDirections.push([data['routeNumber'], directionsRenderer, markers]);
                                        }
                                    } else {
                                        oldRouteDirections.push([data['routeNumber'], directionsRenderer, markers]);
                                    }

                                    maps[routeId] = markers;
                                    dr[routeId] = directionsRenderer;

                                    directionsRenderer.setMap(map);
                                    directionsRenderer.setDirections(result);
                                }

                                map.fitBounds(bounds);
                            }
                        });
                    }
                });
            } else {
                let arr = maps[routeId];
                dr[routeId].setMap(null);

                arr.forEach(function (v, i, x) {
                    x[i].setMap(null);
                });
            }
        }

        // Reset map to starting location without any route directions.
        function resetMap() {
            map = new google.maps.Map(document.getElementById("map"), mapOptions);

            marker = new google.maps.Marker({
                position: { lat: latitude, lng: longitude },
                map: map,
                label: {text: 'O', color: "white"},
            });
        }

        function toggleLeftPanel() {
            if ($('#right-panel').hasClass('col-md-9')) {
                hideLeftPanel();
            } else {
                showLeftPanel();
            }
        }

        function showLeftPanel() {
            $('#left-panel').show();
            $('#right-panel').removeClass('col-md-12').addClass('col-md-9').removeClass('ps-0');;
            $('#routeNumberDiv').addClass('d-none');
            $('#menu-btn').removeClass('text-success');
        }

        function hideLeftPanel() {
            $('#left-panel').hide();
            $('#right-panel').removeClass('col-md-9').addClass('col-md-12').addClass('ps-0');
            $('#routeNumberDiv').removeClass('d-none');
            $('#menu-btn').addClass('text-success');
        }

        function findAddress() {
            let key = $('#search-input').val();
            let url = "{{ route('find-address') }}";

            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    'key': key,
                },
                success: function(data) {
                    data.forEach(function(x, i) {
                        let myPin = {
                            path: 'M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0',
                            strokeColor: markerColor,
                            fillColor: markerColor,
                            fillOpacity: 1,
                            scale: 0.7
                        };

                        let m = new google.maps.Marker({
                            position: { lat: Number(x.latitude), lng: Number(x.longitude) },
                            map: map,
                            icon: myPin,
                            label: {
                                text: (x.firstName).charAt(0).toUpperCase(),
                                fontWeight: "bold",
                                color:"white"
                            }
                        });

                        markers.push(m);
                        bounds.extend(m.getPosition());
                        map.setZoom(12);

                        let infoContent = '<div class="infoContent fw-medium f-14">';

                        infoContent += '<span class="f-16">' + x.accountId + '</span>';
                        infoContent += '<hr>';
                        infoContent += '<div class="text-gray-700">';
                        infoContent += '<span class="f-16">' + x.firstName + ' ' + x.lastName + '</span>';
                        infoContent += '<div>'+ x.houseNumber +'</div>';
                        infoContent += '<div>'+ x.street +'</div>';
                        infoContent += '<div>'+ x.address +'</div>';
                        infoContent += '<br>';
                        infoContent += '<div>Phone: <a class="text-blue" href="tel:+'+ x.phone +'">'+ x.phone +'</a></div>'

                        if (x.email != null) {
                            infoContent += '<div>Email: <a class="text-blue" href="mailto:'+ x.email +'">'+ x.email +'</a></div>'
                        }

                        if (x.packageTitle) {
                            infoContent += '<hr>';
                            infoContent += 'Package: ' + x.packageTitle;
                        }

                        infoContent += '</div>';

                        let infowindow = new google.maps.InfoWindow({
                            content: infoContent,
                            ariaLabel: 'alias-' + x.firstName,
                        });

                        let infoW = [];

                        infoW.push(infowindow);

                        m.addListener("mouseover", () => {
                            infoW.forEach(function(x) {
                                x.close();
                            })

                            infowindow.open({
                                anchor: m,
                                map,
                            });
                        });
                    });
                }
            });
        }

        $('#routeSelect').on('change', function() {
            resetMap();
        });

        $(document).ready(function() {
            resetMap();
        });
    </script>

@endsection