@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 (is_countable($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>
                                    @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 src="{{ asset('assets/js/notify.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 markers_map = new Map();
        var infoWindowMap = new Map();
        var address_markers = [];
        var markersArr = [];
        var markersIndex = 1;

        var hideAllInfoWindowsFlag = false;
        var infoWindowArr = [];
        var contextWindowArr = [];

        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 },
            scrollwheel: true,
        };

        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 = [];
            var positions = [];
            var first_markers = [];
            var infoContentRouteName = '';
            var infoContentRouteDriver = '';

            address_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'];
                        infoContentRouteName = data['routeName'];
                        infoContentRouteDriver = data['routeDriver'] ? data['routeDriver'] : '';

                        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;
                                let waypointsOrder = result['routes'][0]['waypoint_order'];
                                let waypointsOrderIndex = 0;

                                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 pos = legs[i]['end_location'].lat() + ' ' + legs[i]['end_location'].lng();

                                        if (positions[pos]) {
                                            positions[pos].push(i);
                                        } else {
                                            positions[pos] = [i];
                                        }
                                    }

                                    let label_index = 0;

                                    for (const key in positions) {
                                        if (positions.hasOwnProperty(key)) {
                                            const array = positions[key];
                                            const k = `${key}`;
                                            const v = `${array.join(', ')}`;
                                            const [x, y] = k.split(' ');
                                            const v_arr = v.split(',');

                                            let myPin = {
                                                path: 'M -22,-22 L 22,-22 L 22,12 L -22,12 Z M -5,12 L 0,22 L 5,12 Z',
                                                strokeColor: markerColor,
                                                fillColor: markerColor,
                                                fillOpacity: 1,
                                                scale: 0.7
                                            };

                                            let addr_ids = [];
                                            let first_marker_flag = true;

                                            v_arr.forEach((element, index) => {
                                                let i = parseInt(`${element}`);
                                                let marker_id = info[i]['address']['id'];

                                                addr_ids.push(marker_id);
                                                label_index++;

                                                let m = new google.maps.Marker({
                                                    position: { lat: Number(x), lng: Number(y) },
                                                    map: map,
                                                    icon: myPin,
                                                    label: {
                                                        text: "" + (label_index),
                                                        fontWeight: "medium",
                                                        fontSize: "12px",
                                                        color:"white"
                                                    },
                                                    id: marker_id
                                                });

                                                markers.push(m);
                                                markers_map.set(marker_id, m);
                                                markersArr[markersIndex++] = m;

                                                if (first_marker_flag == true) {
                                                    first_markers.push(marker_id);
                                                }

                                                first_marker_flag = false;

                                                bounds.extend(m.getPosition());

                                                let infoContent = '<div class="infoContent pt-3 px-1 pb-0">';
                                                infoContent += '<div id="info-' + marker_id  + '" class="mb-3 info-div">';
                                                infoContent += '<div>';
                                                infoContent += '<strong>Route Name:</strong>';
                                                infoContent += '<div class="infoContent-text">'+ infoContentRouteName + '</div>';
                                                infoContent += '<div>';

                                                if (infoContentRouteDriver != '') {
                                                    infoContent += '<div>';
                                                    infoContent += '<strong>Assigned User:</strong>';
                                                    infoContent += '<div class="infoContent-text">'+ infoContentRouteDriver + '</div>';
                                                    infoContent += '<div>';
                                                }

                                                let c_address = info[waypointsOrder[waypointsOrderIndex]]['address']['address'];
                                                let lastCommaIndex = c_address.lastIndexOf(',');
                                                let formattedAddress = c_address.substring(0, lastCommaIndex) + ',<br>' + c_address.substring(lastCommaIndex + 1) + ' - ' + info[waypointsOrder[waypointsOrderIndex]]['address']['zipcode'];

                                                infoContent += '<div>';
                                                infoContent += '<strong>Address:</strong>';
                                                infoContent += '<div class="infoContent-text">'+ info[waypointsOrder[waypointsOrderIndex]]['address']['houseNumber'] + ' ' + formattedAddress + '</div>';
                                                infoContent += '<div>';

                                                infoContent += '<div>';
                                                infoContent += '<strong>Alias:</strong>';
                                                infoContent += '<div class="infoContent-text">' + info[waypointsOrder[waypointsOrderIndex]]['firstName'] + ' ' + info[waypointsOrder[waypointsOrderIndex]]['lastName'] + '</div>';
                                                infoContent += '</div>';

                                                if (info[waypointsOrder[waypointsOrderIndex]]['packageTitle']) {
                                                    infoContent += '<div>';
                                                    infoContent += '<strong>Package:</strong>';
                                                    infoContent += info[waypointsOrder[waypointsOrderIndex]]['packageTitle'];
                                                    infoContent += '<br>';
                                                    infoContent += '</div>';
                                                }

                                                infoContent += '<div>';
                                                infoContent += '<strong>Delivery Type:</strong>';
                                                infoContent += '<div class="infoContent-text">' + '<i class="fa fa-truck" aria-hidden="true"></i>' + ' Delivery' + '</div>';
                                                infoContent += '</div>';
                                                infoContent += '</div>';
                                                infoContent += '</div>';

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

                                                infoWindowArr.push(infowindow);

                                                m.addListener("mouseover", () => {
                                                    hideAllInfoWindowsFlag = false;

                                                    infoWindowArr.forEach(function(x) {
                                                        x.close();
                                                    });

                                                    contextWindowArr.forEach(function(x) {
                                                        x.close();
                                                    });

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

                                                m.addListener("mouseout", () => {
                                                    startTimer();
                                                });

                                                m.addListener("mouseenter", () => {
                                                    hideAllInfoWindowsFlag = false;

                                                    infoWindowArr.forEach(function(x) {
                                                        x.close();
                                                    });

                                                    contextWindowArr.forEach(function(x) {
                                                        x.close();
                                                    });

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

                                                let context_address = info[waypointsOrder[waypointsOrderIndex]]['address']['houseNumber'] + ' ' + info[waypointsOrder[waypointsOrderIndex]]['address']['address'] + ' - ' + info[waypointsOrder[waypointsOrderIndex]]['address']['zipcode'];
                                                let context_alias = info[waypointsOrder[waypointsOrderIndex]]['firstName'] + ' ' + info[waypointsOrder[waypointsOrderIndex]]['lastName'];
                                                let context_latitude = info[waypointsOrder[waypointsOrderIndex]]['address']['latitude'];;
                                                let context_longitude = info[waypointsOrder[waypointsOrderIndex]]['address']['longitude'];;

                                                const contextWindow = new google.maps.InfoWindow({
                                                    content: '<div class="copy-address-link p-2 pt-3 cursor-p" data-address="'+ context_address +'" data-alias="'+ context_alias +'" data-lat="'+ context_latitude +'" data-lng="'+ context_longitude +'" onclick="copyInfoWindowContent(this)"><i class="fa fa-clone" aria-hidden="true"></i> <span class="fw-medium">Copy Details to Clipboard</span></div>',
                                                    disableAutoPan: true
                                                });

                                                contextWindowArr.push(contextWindow);

                                                m.addListener("rightclick", () => {
                                                    hideAllInfoWindowsFlag = false;

                                                    infoWindowArr.forEach(function(x) {
                                                        x.close();
                                                    });

                                                    contextWindowArr.forEach(function(x) {
                                                        x.close();
                                                    });

                                                    contextWindow.open(map, m);
                                                });

                                                waypointsOrderIndex++;
                                            });

                                            addr_ids.forEach(function(v) {
                                                address_markers[v] = addr_ids;
                                            });
                                        }
                                    }

                                    showOnlyMarkers(first_markers);

                                    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);
                });
            }
        }

        function hideAllInfoWindows() {
            if (hideAllInfoWindowsFlag == true) {
                infoWindowArr.forEach(function(x) {
                    x.close();
                });
            }
        }

        function startTimer() {
            hideAllInfoWindowsFlag = true;

            setTimeout(() => {
                hideAllInfoWindows();
            }, 500);
        }

        function stopTimer() {
            hideAllInfoWindowsFlag = false;
        }

        function copyInfoWindowContent(ele) {
            let address = $(ele).attr('data-address');
            let alias = $(ele).attr('data-alias');
            let lat = $(ele).attr('data-lat');
            let lng = $(ele).attr('data-lng');

            $(ele).hide();

            let str = 'Address:' + address;
            str += '\n';
            str += 'Alias:' + alias;
            str += '\n';
            str += 'Destination Latitude:' + lat;
            str += '\n';
            str += 'Destination Longitude:' + lng;

            let textarea = document.createElement('textarea');

            textarea.value = str;
            document.body.appendChild(textarea);
            textarea.select();

            try {
                document.execCommand('copy');
            } catch (err) {
                console.error('Failed to copy:', err);
            }

            document.body.removeChild(textarea);

            let msg = 'Details of ' + alias + ' have been copied to clipboard.';

            $.notify(msg, 'success');
        }

        function changeMarkerIcon(mkr) {
            markers_map.forEach(function(v) {
                v.setIcon({
                    path: 'M -22,-22 L 22,-22 L 22,12 L -22,12 Z M -5,12 L 0,22 L 5,12 Z',
                    strokeColor: markerColor,
                    fillColor: markerColor,
                    fillOpacity: 1,
                    scale: 0.7
                });
            });

            mkr.setIcon({
                path: 'M -22,-22 L 22,-22 L 22,12 L -22,12 Z M -5,12 L 0,22 L 5,12 Z',
                strokeColor: markerColor2,
                fillColor: markerColor2,
                fillOpacity: 1,
                scale: 0.7
            });

            map.setCenter(mkr.getPosition());
            map.setZoom(12); // Adjust zoom level as needed
        }

        function showOnlyMarkers(firstMarkers) {
            markers_map.forEach(function(v) {
                v.setMap(null);
            });

            firstMarkers.forEach(function(v) {
                let mk = markers_map.get(v);

                if (mk) {
                    mk.setMap(map);
                } else {
                    console.log(`Marker with ID ${id} not found.`);
                }
            });
        }

        function highlightMarker(id) {
            // Hide all markers at same location.
            let target = address_markers[id];

            target.forEach(function(v) {
                let mk = markers_map.get(v);

                if (mk) {
                    mk.setMap(null);
                }

                $('#info-'+v).addClass('d-none');
            })

            // Show given marker.
            id = parseInt(id)
            let mk = markers_map.get(id);

            if (mk) {
                mk.setMap(map);
                changeMarkerIcon(mk);
            } else {
                console.log(`Marker with ID ${id} not found.`);
            }
        }

        // 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();

            $('body').on('mouseover', '.infoContent', function() {
                stopTimer();
            });

            $('body').on('mouseleave', '.infoContent', function() {
                infoWindowArr.forEach(function(x) {
                    x.close();
                });
            });
        });
    </script>

@endsection