@extends('layouts.admin')

@section('content')
    <link rel="stylesheet" href="{{ asset('assets/css/route.css') }}">
    <script src="{{ asset('assets/js/jquery-ui.js') }}"></script>

    <div 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" aria-current="page">
                                    #{{ $route->routeNumber . ' - ' . $route->title }}
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-6 col-lg-8">
                                    <div class="page-header-title">
                                        <h3 class="mb-0 mt-3">Route Details</h3>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-text" id="basic-addon3">Route</span>
                                            <select class="form-select cursor-p" id="routeSelect" data-bs-toggle="tooltip" title="Change route">
                                                @if (is_countable($routes))
                                                    @foreach ($routes as $x)
                                                        <option value="{{ $x->id }}">
                                                            #{{ $x->routeNumber }} &nbsp; {{ $x->title }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body routes-outer">
                            <div class="row">
                                <div class="col-md-2 p-0">
                                    <div class="route-details-left-panel">
                                        <div class="pe-2 mb-3">
                                            <select id="select-addr" class="form-control">
                                                <option value="" selected>Search in this route.</option>
                                            </select>
                                        </div>

                                        <div id="address-list-container">
                                            @if (count($addresses) > 0)
                                                <ul class="list-group">
                                                    <li class="list-group-item ps-2 border-0 addr-li pt-0 pe-2 pb-0" onclick="resetMap()">
                                                        <div>
                                                            <div class="base-num-part">
                                                                <i class="ti ti-home f-18 text-green-500"></i>
                                                            </div>
                                                            <div class="address">
                                                                <div class="name-part">
                                                                    &nbsp;
                                                                </div>
                                                                <div class="address-part font-size-11">
                                                                    {{ $baseAddr }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                                <ul id="address-list" class="list-group">
                                                    @foreach ($addresses as $address)
                                                        <li id="addr-tr-{{ $address->id }}" class="list-group-item ps-2 border-0 addr-li pe-2 pb-0 sort-addr" data-index={{ $loop->iteration }} data-addr-id="{{ $address->id }}">
                                                            <div id="addr-div-{{ $address->id }}" class="left-addr-div" data-addr-id="{{ $address->id }}" onclick="openAddressDetails(this)">
                                                                <div class="num-part">
                                                                    {{ $loop->iteration }}
                                                                </div>
                                                                <div id="label-{{ $address->id }}" class="address">
                                                                    <div class="name-part font-size-14">
                                                                        {{ Str::upper($address->user->firstName)  . ' ' . Str::upper($address->user->lastName) }}
                                                                    </div>
                                                                    <div class="address-part font-size-11">
                                                                        {{ $address->address }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @else
                                                <div class="alert alert-info">No address available!</div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div id="side-panel" class="col-md-4 col-xl-3 pe-0 d-none border resizable">
                                    {{-- <div class="resize-handle"></div> --}}

                                    <div id="sidepanel-content" class="table-responsive font-size-13"></div>
                                </div>

                                <div id="right-panel" class="col-md-8 px-0">
                                    <div id="map" class="route-details-map">
                                        {{-- Google API will draw map here --}}
                                    </div>
                                </div>

                                <div class="col-md-2 pe-0">
                                    <div id="route-instructions-div">
                                        <ul id="route-instructions-ul" class="list-group">
                                            {{-- Will be filled by Google Map API --}}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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>
        //Fill select element options with addresses from $addresses.
        var addressesBrief = {{ Js::from($addressesBrief) }};

        var straightIcon = '{{ asset('assets/images/map/straight.png') }}';
        var turnLeftIcon = '{{ asset('assets/images/map/turn_left.png') }}';
        var roundaboutLeftIcon = '{{ asset('assets/images/map/roundabout.png') }}';
        var mergeIcon = '{{ asset('assets/images/map/merge.png') }}';
        var mergeLeftIcon = '{{ asset('assets/images/map/merge_left.png') }}';
        var TurnSharpLeftIcon = '{{ asset('assets/images/map/turn_sharp_left.png') }}';
        var TurnSlightLeftIcon = '{{ asset('assets/images/map/turn_slight_left.png') }}';

        var choicesSelect = new Choices('#select-addr', {
            searchFields: ['label'],
            choices: addressesBrief,
        });

        // 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 routeColor = '#00A86B';
        var routeWeight = 2.5;
        var markerColor = '#EC5800';
        var markerColor2 = '#317bff';
        var oldRouteDirections = [];
        var directionsService = new google.maps.DirectionsService();
        var directionRenderers = [];
        var markersArr = [];
        var markersIndex = 1;
        var markers_map = new Map();
        var infoWindowMap = new Map();
        var address_markers = [];
        var hideAllInfoWindowsFlag = false;
        var infoWindowArr = [];
        var contextWindowArr = [];
        var boundsBackup = new google.maps.DirectionsRenderer();

        var $resizable = $('.resizable');
        var $handle = $resizable.find('.resize-handle');
        var startX, startWidth;

        // This function draws map for given route id.
        function drawRouteMap(routeId) {
            var origins;
            var destinations;
            var waypoints;
            var temp = [];
            var waypointLatLong = [];
            var directionsRenderer = new google.maps.DirectionsRenderer();
            var bounds = new google.maps.LatLngBounds();
            var directionRenderers = [];
            var markers = [];
            var positions = [];
            var first_markers = [];
            var mark = [];
            var infoContentRouteName = '';
            var infoContentRouteDriver = '';
            var routeMarkers = [];

            address_markers = [];

            // 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,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                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,
                    };

                    directionsService.route(request, function(result, status) {
                        var steps = [];

                        if (status == 'OK') {
                            let routeLegs = result.routes[0].legs;
                            let polylineCoordinates = [];
                            let waypointsOrder = result['routes'][0]['waypoint_order'];
                            let waypointsOrderIndex = 0;

                            // Change order of waypoints
                            let new_waypoints = [];
                            let w_index = 0;
                            waypointsOrder.forEach(function(x) {
                                new_waypoints[w_index] = waypoints[x];
                                w_index++;
                            });

                            // Change order of address list
                            let al = $('.sort-addr');
                            let al_index = 0;
                            let new_al = [];
                            waypointsOrder.forEach(function(x) {
                                new_al[al_index] = al[x];
                                al_index++;
                            });
                            $('#address-list').html(new_al);

                            $('.num-part').each(function(ix, el) {
                                $(el).text(ix+1)
                            });

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

                            directionsService.route(request, function(new_result, status) {
                                // Fetch direction steps.
                                let instructions = [];
                                let legs = new_result['routes'][0]['legs'];

                                let legIndex = 0;

                                if (legs.length > 0) {
                                    // Change order of address briefs.
                                    let new_briefs = [];
                                    let b_index = 0;
                                    waypointsOrder.forEach(function(x) {
                                        new_briefs[b_index] = addressesBrief[x];
                                        b_index++;
                                    });

                                    addressesBrief = new_briefs;

                                    legs.forEach(function(v) {
                                        let steps = v['steps'];
                                        let stepsLen = steps.length;
                                        let stepsIndex = 0;

                                        if (stepsLen > 0) {
                                            steps.forEach(function(v) {
                                                let z = [];

                                                z['distance'] = v.distance;
                                                z['duration'] = v.duration;
                                                z['instruction'] = v.instructions;
                                                z['maneuver'] = v.maneuver;
                                                z['lat'] = v.start_location.lat();
                                                z['lng'] = v.start_location.lng();

                                                stepsIndex++;

                                                if (stepsIndex == stepsLen) {
                                                    if (addressesBrief[legIndex] != undefined) {
                                                        z['alias'] = addressesBrief[legIndex]['name'];
                                                        z['address'] = addressesBrief[legIndex]['address'];
                                                        z['sn'] = addressesBrief[legIndex]['sn'];
                                                    }
                                                } else {
                                                    z['alias'] = "";
                                                    z['address'] = "";
                                                    z['sn'] = "";
                                                }

                                                instructions.push(z)
                                            });
                                        }

                                        legIndex++;
                                    });
                                }

                                // Append instructions to ul#steps

                                if (instructions.length > 0) {
                                    let routeInstructionsEle = $("#route-instructions-ul");

                                    instructions.pop();
                                    instructions.forEach(function(v, i, e) {
                                        let str = '';
                                        let maneuverIcon = '';
                                        let maneuverIconParent = '';

                                        switch(e[i]['maneuver']) {
                                            case 'straight':
                                                maneuverIcon = straightIcon;
                                                break;
                                            case 'turn-left':
                                                maneuverIcon = turnLeftIcon;
                                                break;
                                            case 'turn-right':
                                                maneuverIcon = turnLeftIcon;
                                                maneuverIconParent = 'dir-tt-turn-right';
                                                break;
                                            case 'roundabout-left':
                                                maneuverIcon = roundaboutLeftIcon;
                                                break;
                                            case 'roundabout-right':
                                                maneuverIcon = roundaboutLeftIcon;
                                                maneuverIconParent = 'dir-tt-turn-right';
                                                break;
                                            case 'merge':
                                                maneuverIcon = mergeIcon;
                                                break;
                                            case 'merge-left':
                                                maneuverIcon = mergeLeftIcon;
                                                break;
                                            case 'merge-right':
                                                maneuverIcon = mergeRightIcon;
                                                maneuverIconParent = 'dir-tt-turn-right';
                                                break;
                                            case 'turn-sharp-left':
                                                maneuverIcon = TurnSharpLeftIcon;
                                                break;
                                            case 'turn-sharp-right':
                                                maneuverIcon = TurnSharpLeftIcon
                                                maneuverIconParent = 'dir-tt-turn-right';
                                                break;
                                            case 'turn-slight-left':
                                                maneuverIcon = TurnSlightLeftIcon;
                                                break;
                                            case 'turn-slight-right':
                                                maneuverIcon = TurnSlightLeftIcon
                                                maneuverIconParent = 'dir-tt-turn-right';
                                                break;
                                            default:
                                                maneuverIcon = straightIcon;
                                                break;
                                        }

                                        str += '<div class="d-flex justify-content-start" onclick="openLeg('+ e[i]["lat"] + "," + e[i]["lng"] + ')">';

                                        str += '<div class="'+ maneuverIconParent +'">';
                                        str += '<img class="maneuverIcon" src="'+ maneuverIcon +'">';
                                        str += '</div>';

                                        str += '<div class="w pb-2">' + e[i]['instruction'] + '</div>';
                                        str += '</div>';

                                        str += '<div class="x">';
                                        str += '<div class="y">';

                                        str += '<div class="z">';
                                        str += '<div class="">'+ e[i]['distance']['text'] +'</div>';
                                        str += '</div>';


                                        str += '</div>';

                                        if (e[i]['alias'] != "") {
                                            str += '<div class="instructions-alias-div mt-3 fw-medium"><div class=" py-2 text-uppercase">' + e[i]['sn'] + ') ' + e[i]['alias'] + '</div><div class="address-part-steps">'+ e[i]['address'] +'</div></div>';
                                        }

                                        str += '</div>';

                                        routeInstructionsEle.append('<li class="list-group-item p-0">'+ str +'</li>');
                                    });
                                }
                            });

                            if (routeLegs.length > 0) {
                                routeLegs.forEach(function(v, i, e) {
                                    let legSteps = e[i].steps;

                                    legSteps.forEach(function(v2, i2, e2) {
                                        let x = {};

                                        x.lat = e2[i2].start_location.lat();
                                        x.lng = e2[i2].start_location.lng();

                                        polylineCoordinates.push(x);
                                    });
                                });
                            }

                            let polylineOptions = {};

                            polylineOptions.path = polylineCoordinates;
                            polylineOptions.fillColor = routeColor;
                            polylineOptions.strokeColor = routeColor;
                            polylineOptions.strokeWeight = routeWeight;
                            polylineOptions.strokeOpacity = 1.0;
                            polylineOptions.icons = [];

                            let polyOffset = polylineCoordinates.length * 20;

                            for (let i = 0; i < polylineCoordinates.length - 1; i++) {
                                polylineOptions.icons.push({
                                    icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW },
                                    offset: (i + 0.5) / (polylineCoordinates.length - 1) * polyOffset + '%' // Offset for each arrow
                                });
                            }

                            directionsRenderer.setOptions({
                                polylineOptions,
                                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'];

                                infoWindowArr = [];
                                contextWindowArr = [];

                                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[waypointsOrder[waypointsOrderIndex]]['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
                                            });

                                            m.address = info[waypointsOrder[waypointsOrderIndex]]['address']['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("click", () => {
                                                pinDetails(m.address);
                                            });

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

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

                            map.fitBounds(bounds);
                            boundsBackup = bounds;

                            google.maps.event.addListener(map, 'idle', function() {
                                $('#routeSelect').removeAttr('disabled');
                            });
                        }
                    });
                }
            });
        }

        function closeSidePanel() {
            $('#right-panel').removeClass('col-md-8');
            $('#right-panel').addClass('col-md-8');
            $('#side-panel').addClass('d-none');
            
            map.fitBounds(boundsBackup);
        }


        function pinDetails(id) {
            $('#label-' + id).trigger('click');

            $('.active-address-tr').removeClass('active-address-tr');
            $('#addr-tr-' + id).addClass('active-address-tr');
        }

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

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

            openSidePanel(id);
        }

        function openSidePanel(addressId) {
            let url = "{{ route('sidepanel-details') }}";

            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    'addr_id': addressId,
                },
                success: function(data){
                    $('#sidepanel-content').html(data)
                }
            });

            $('#right-panel').removeClass('col-md-8');
            $('#right-panel').addClass('col-md-5');
            $('#side-panel').removeClass('d-none');
        }

        // Zoom at clicked maneuver.
        function openLeg(lat, lng) {
            let targetLocation = { lat: lat, lng: lng };
            map.setZoom(19);
            map.setCenter(targetLocation);
        }

        // Show address details.
        function openAddressDetails(ele) {
            let addrid = $(ele).attr('data-addr-id');

            highlightMarker(addrid);
        }

        // Reset map to initial state.
        function resetMap() {
            var mapOptions = {
                zoom: 12,
                center: { lat: latitude, lng: longitude },
                scrollwheel: true,
            };

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

            drawRouteMap('{{ $route->id }}');
        }

        // Change route
        $('#routeSelect').on('change', function() {
            var url = "{{ route('route-details', ['route' => 'arg1']) }}";
            url = url.replace('arg1', $('#routeSelect').val());
            location.href = url;
        });

        function onMouseMove(e) {
            var newWidth = startWidth + (e.clientX - startX);
            if (newWidth > 50) { // Minimum width of 50px
                $resizable.width(newWidth);
                onResize(newWidth);
            }
        }

        function onResize(width) {
            console.log('resizing....');
            google.maps.event.trigger(map, 'resize');
        }

        function onMouseUp() {
            $(document).off('mousemove', onMouseMove);
            $(document).off('mouseup', onMouseUp);
        }

        function clearMap() {
            // UNDER TESTING


            // var mapOptions = {
            //     zoom: 12,
            //     center: { lat: latitude, lng: longitude },
            //     scrollwheel: true,
            // };

            // 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"},
            // });

            // drawRouteMap($('#routeSelect').val());
        }

        $(document).ready(function() {
            resetMap();

            $('#select-addr').on('change', function() {
                let option = '#addr-div-' + $('option:selected', this).val();
                $(option).trigger('click');
            });

            $('#routeSelect').val('{{ $route->id }}');

            $("#address-list").sortable({
                items: 'li',
                cursor: 'move',
                opacity: 0.8,
                update: function(event, ui) {
                    let sortOrder = [];

                    $('.list-group li').each(function() {
                        sortOrder.push($(this).data('addr-id'));
                    });

                    $.ajax({
                        url: "{{ route('update-route-address-order') }}",
                        method: 'POST',
                        data: {
                            ids: sortOrder,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            window.location.reload();
                        },
                        error: function(xhr) {
                            console.log('Error updating order');
                        }
                    });
                }
            }).disableSelection();

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

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

            $('body').on('click', '#sidepanel-address-1', function() {
                $('#sidepanel-address-2').slideToggle();

                if ($('#sidepanel-address-1-i').hasClass('fa-chevron-right')) {
                    $('#sidepanel-address-1-i').removeClass('fa-chevron-right').addClass('fa-chevron-down');
                } else {
                    $('#sidepanel-address-1-i').removeClass('fa-chevron-down').addClass('fa-chevron-right');
                }
            });

            $handle.on('mousedown', function(e) {
                startX = e.clientX;
                startWidth = $resizable.width();

                $(document).on('mousemove', onMouseMove);
                $(document).on('mouseup', onMouseUp);
            });
        });
    </script>
@endsection