@extends('layouts.admin')

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

    <section class="pc-container">
        <div class="pc-content">
            <div class="page-header pb-2">
                <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">
                                    Routes & Addresses
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="page-header-title">
                                        <h3 class="mb-0 mt-3">
                                            Routes & Addresses
                                        </h3>
                                    </div>
                                </div>

                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="input-group mb-1">
                                                <span class="input-group-text">Route</span>
                                                <select disabled class="form-select cursor-p" id="routeSelect" data-bs-toggle="tooltip" title="Select route">
                                                    @if (is_countable($routes))
                                                        @foreach ($routes as $route)
                                                            <option value="{{ $route->id }}">#{{ $route->routeNumber }} &nbsp; {{ $route->title }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-5 pt-2">
                                            <div class="d-flex justify-content-evenly">
                                                <span 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>
                                                </span>

                                                <span role="button" class="btn avtar avtar-xs btn-link-success btn-pc-default" onclick="details()">
                                                    <i class="ti ti-map f-18" data-bs-toggle="tooltip" title="Open route details"></i>
                                                </span>

                                                <span role="button" class="btn avtar avtar-xs btn-link-success btn-pc-default" onclick="subRoutes()">
                                                    <i class="ti ti-unlink f-18" data-bs-toggle="tooltip" title="Break this route into sub routes"></i>
                                                </span>

                                                <span role="button" onclick="showChangeRouteNameModal()" class="btn avtar avtar-xs btn-link-success btn-pc-default">
                                                    <i class="ti ti-edit-circle f-18" data-bs-toggle="tooltip" title="Change route name"></i>
                                                </span>

                                                <span role="button" onclick="showConfirmModal()" class="btn avtar avtar-xs btn-link-danger btn-pc-default">
                                                    <i class="ti ti-trash f-18 text-danger" data-bs-toggle="tooltip" data-bs-original-title="Remove this route"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-md-2 text-end pt-1">
                                            <span data-bs-toggle="tooltip" data-bs-original-title="Create new route">
                                                <button class="d-inline-block btn btn-primary ms-3" data-pc-animate="3d-slit" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#animateModal">
                                                    Add Route
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade modal-animate" id="animateModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form action="{{ route('store-route') }}" method="post">
                            @csrf

                            <div class="modal-header">
                                <h5 class="modal-title">New Route</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                            </div>

                            <div class="modal-body">
                                <input id="new-route-input" type="text" name="title" class="form-control" placeholder="New route name" aria-label="Route name" aria-describedby="button-addon2">
                            </div>

                            <div class="modal-footer">
                                <input type="submit" class="btn btn-primary shadow-2 text-white add-route-btn" value="Save" data-bs-toggle="tooltip" title="Save this route">
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body routes-outer">
                            @include('include.flash-message')
                            @include('include.errors')

                            <div class="row">
                                <div id="left-panel" class="col-md-3 col-xl-2 px-0">
                                    <div id="route-div">
                                        <div>
                                            <div>
                                                <div class="d-flex justify-content-end align-items-baseline">
                                                    <div>
                                                        <div id="changeRouteNameModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="changeRouteNameModalTitle" aria-hidden="true">
                                                            <div class="modal-dialog modal-dialog-centered" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title" id="changeRouteNameModalTitle">Change Route Name</h5>
                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                    </div>

                                                                    <div class="modal-body">
                                                                        <div class="form-group">
                                                                            <form action="{{ route('update-route-name') }}" method="post">
                                                                                @csrf
                                                                                <label class="form-label">Route Name <span class="text-danger">*</span></label>
                                                                                <input id="targetRouteName" required name="title" type="text" class="form-control" value="">
                                                                                <input id="targetRouteId" type="hidden" name="id" value="">
                                                                                <input type="submit" value="Save" class="btn btn-primary m-t-20 m-b-20" data-bs-toggle="tooltip" data-bs-original-title="Save changes">
                                                                            </form>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div id="confirmModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle" aria-hidden="true">
                                                            <div class="modal-dialog modal-dialog-centered" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title text-danger" id="confirmModalTitle">Remove Route</h5>
                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                    </div>

                                                                    <div class="modal-body">
                                                                        <p>Are you sure to remove this route?</p>
                                                                    </div>

                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-success" data-bs-dismiss="modal">No</button>
                                                                        <a id="delete-route-href" href="" class="btn btn-danger text-white">Yes</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div id="map-div" class="table-responsive">
                                                @if (count($addresses) > 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="search()">
                                                                <i class="ti ti-search"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <table id="address-table" class="table table-sm table-hover d-none">
                                                        @foreach ($addresses as $address)
                                                            <tr id="addr-tr-{{ $address->id }}" class="address-tr d-flex sort-addr" data-addr-id="{{ $address->id }}">
                                                                <td class="border-0">
                                                                    <div class="form-check form-switch switch-sm">
                                                                        <input type="checkbox" class="form-check-input input-primary mt-1 address-checkbox cursor-p address-chk" data-address="{{ $address->id }}" id="addressCheckbox{{$loop->index}}" value="{{ $address->id }}" onclick="assignUnassignAddressToRoute(this)" data-bs-toggle="tooltip" data-bs-original-title="Assign/unassign this address">

                                                                        <label id="label-{{ $address->id }}" class="form-check-label user-label" data-addr="{{ $address->id }}" onclick="highlightMarker(this)">
                                                                            <span class="sn badge pt-2 rounded rounded-circle fw-medium">
                                                                                {{-- Will be filled by JS --}}
                                                                            </span>
                                                                            <span class="fw-medium address-username font-size-14">
                                                                                @isset($address->user)
                                                                                    {{ $address->user->firstName . ' ' . $address->user->lastName }}
                                                                                @endisset
                                                                            </span>
                                                                            <br />
                                                                            <span class="text-wrap user-address font-size-11">
                                                                                {!! $address->address !!} - {{ $address->zipcode }}
                                                                            </span>
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </table>
                                                @endif
                                            </div>
                                        </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 mt-3 font-size-13"></div>
                                </div>

                                <div id="right-panel" class="col-md-9 col-xl-10 pe-0">
                                    <div id="map" class="route-index-map route-addresses-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 markerColor2 = '#317bff';
        var routeWeight = 2.5;
        var directionsService = new google.maps.DirectionsService();
        var directionRenderers = [];
        var markers_map = new Map();
        var address_markers = [];
        var boundsBackup = new google.maps.DirectionsRenderer();

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

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

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

        // Assign/unassign address to selected route.
        function assignUnassignAddressToRoute(ele) {
            let routeId = $('#routeSelect').val();
            let addressId = $(ele).attr('data-address');

            if (routeId != null) {
                let url = "{{ route('assign-unassign-address-to-route', ['route' => 'arg1', 'address' => 'arg2']) }}";

                url = url.replace('arg1', routeId);
                url = url.replace('arg2', addressId);

                $.ajax({
                    type: 'POST',
                    url: url,
                    success: function(data) {
                        if (data == 'done') {
                            changeRoute(routeId);
                        }
                    }
                });
            } else {
                ele.checked = false;

                $('#routeSelect').focus();
            }
        }

        // Show route number in badge for selected route.
        function showRouteNumberandSetDeleteRouteHref(routeId) {
            var deleteRouteUrl = "{{ route('delete-route', ['route' => 'arg1']) }}";
            deleteRouteUrl = deleteRouteUrl.replace('arg1',  $('#routeSelect').val());

            $('#delete-route-href').attr('href', deleteRouteUrl);

            // Fetch route name and put in route name input field value.
            var url = "{{ route('get-route-name', ['id' => 'arg1']) }}";
            url = url.replace('arg1', routeId);

            $.ajax({
                type: 'POST',
                url: url,
                success: function(data) {
                    $('#targetRouteName').val(data);
                }
            });

            $('#targetRouteId').val(routeId);
        }

        // Change route for given route id.
        function changeRoute(routeId) {
            $('#routeSelect').attr('disabled', 'disabled');

            if (routeId != null) {

                showRouteNumberandSetDeleteRouteHref(routeId);

                // Show all address rows.
                $('.address-tr').removeClass('d-none');

                // Uncheck all address checkboxes.
                $('.address-checkbox').each(function(index, ele) {
                    $(ele)[0].checked = false;
                });

                // Fetch addresses assigned to this route and check corresponding checkboxes.
                var addressesAssignedToThisRoute = [];
                var url = "{{ route('route-address-ids', ['routeId' => 'arg1']) }}";

                url = url.replace('arg1', routeId);

                $('.address-checkbox').each(function(index, ele) {
                    $(ele).parent().find('.sn').removeClass('sn-active').text(' ');
                });

                $.ajax({
                    type: 'POST',
                    url: url,
                    success: function(data) {
                        addressesAssignedToThisRoute = data;

                        if (data.length > 0) {
                            let sn = 1;

                            $('.address-checkbox').each(function(index, ele) {
                                if (data.includes(Number($(ele).attr('data-address')))) {
                                    $(ele)[0].checked = true;
                                    $(ele).parent().find('.sn').addClass('sn-active').text(sn++)
                                }
                            });
                        }

                        // Fetch available addresses and uncheck corresponding checkboxes.
                        var url = "{{ route('available-addresses') }}";

                        $.ajax({
                            type: 'GET',
                            url: url,
                            success: function(data) {
                                $('.address-checkbox').each(function(index, ele) {
                                    if (data.includes(Number($(ele).attr('data-address')))) {
                                        // Address is not assigned to any route. So make it available for selection.
                                    } else {
                                        // Address is assigned to some route.
                                        if (addressesAssignedToThisRoute.includes(Number($(ele).attr('data-address')))) {
                                            $(ele).closest('tr').addClass('assigned-tr');
                                        } else {
                                            $(ele).closest('tr').addClass('d-none');
                                        }
                                    }
                                });
                            }
                        });
                    }
                });

                // Draw map for this route.
                drawRouteMap($('#routeSelect').val());

                $('#route-div').removeClass('d-none');
                $('#routeSelect').removeAttr('disabled');
            }
        }

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

            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,
                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'];

                                infoWindowArr = [];
                                contextWindowArr = [];

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

                                // Update distance duration
                                var distanceDuration = [];

                                legs.forEach(function(v) {
                                    distanceDuration.push([v.distance.value, v.duration.value]);
                                })

                                var url = "{{ route('update-distance-duration', ['routeId' => 'arg1', 'legs' => 'arg2']) }}";
                                url = url.replace('arg1', routeId);
                                url = url.replace('arg2', JSON.stringify(distanceDuration));

                                $.ajax({
                                    type: 'POST',
                                    url: url,
                                    success: function(data) {
                                        // console.log(data)
                                    }
                                });

                                // Create an array 'positions'.
                                // Where, property is a position(lat lng) and value is an array of indexes of 'info' array which have common address.
                                // Example positions['11 22'] = [0, 3] Here, 11,22 is lat,lng and 0, 3 are indexes of array 'info'. It means we have two addresses at that position.
                                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];
                                    }
                                }

                                // Traverse positions and show markers and set info windows.
                                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);

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

                                            // Make changes in left panel.
                                            let the_label_id = 'label-' + info[waypointsOrder[waypointsOrderIndex]]["address"]["id"];
                                            let the_addr_id = info[waypointsOrder[waypointsOrderIndex]]["address"]["id"];
                                            let the_address = info[waypointsOrder[waypointsOrderIndex]]["address"]["address"] + ' - ' + info[waypointsOrder[waypointsOrderIndex]]["address"]["zipcode"];
                                            let customer_name = info[waypointsOrder[waypointsOrderIndex]]['firstName'] + ' ' + info[waypointsOrder[waypointsOrderIndex]]['lastName'];

                                            $($('.address-username')[waypointsOrderIndex]).text(customer_name);
                                            $($('.user-address')[waypointsOrderIndex]).text(the_address);
                                            $($('.user-label')[waypointsOrderIndex]).attr('data-addr', the_addr_id);
                                            $($('.user-label')[waypointsOrderIndex]).attr('id', the_label_id);
                                            $($('.address-chk')[waypointsOrderIndex]).attr('data-address', the_addr_id);
                                            $($('.address-chk')[waypointsOrderIndex]).val(the_addr_id);

                                            waypointsOrderIndex++;
                                        });

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

                                        $('#address-table').removeClass('d-none');
                                    }
                                }

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

        // 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 details()
        {
            if($('#routeSelect').val() != null) {
                let url = "{{ route('route-details', ['route' => 'arg1']) }}";
                location.href = url.replace('arg1', $('#routeSelect').val());
            } else {
                $('#routeSelect').focus();
            }
        }

        function subRoutes() {
            if($('#routeSelect').val() != null) {
                var url = "{{ route('sub-routes', ['route' => 'arg1']) }}";
                location.href = url.replace('arg1', $('#routeSelect').val());
            } else {
                $('#routeSelect').focus();
            }
        }

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

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

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

        function showChangeRouteNameModal() {
            if($('#routeSelect').val() != null) {
                $('#changeRouteNameModal').modal('show');
            } else {
                $('#routeSelect').focus();
            }
        }

        function showConfirmModal() {
            if($('#routeSelect').val() != null) {
                $('#confirmModal').modal('show');
            } else {
                $('#routeSelect').focus();
            }
        }

        function search() {
            let key = $('#search-input').val();

            if (key == '') {
                $('.address-tr').removeClass('d-none');
                $('#search-input').focus();
            } else {
                let url = "{{ route('search-route-address') }}";

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {
                        'key': key,
                        'routeId' : $('#routeSelect').val()
                    },
                    success: function(data){
                        $('.address-tr').addClass('d-none');

                        data.forEach(function(v) {
                            $('#addr-tr-' + v).removeClass('d-none');
                        });
                    }
                });
            }
        }

        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); // 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(x) {
            let id = $(x).attr('data-addr');

            // 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-9 col-xl-10');
            $('#right-panel').addClass('col-md-5 col-xl-7');
            $('#side-panel').removeClass('d-none');
        }

        function closeSidePanel() {
            $('#right-panel').removeClass('col-md-5 col-xl-7');
            $('#right-panel').addClass('col-md-9 col-xl-10');
            $('#side-panel').addClass('d-none');

            map.fitBounds(boundsBackup);
        }

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

        // Change route
        $('#routeSelect').on('change', function() {
            resetMap();
            changeRoute($(this).val());
        });

        $(document).ready(function() {
            $( "#sortable" ).sortable();
            resetMap();
            changeRoute($('#routeSelect').val());

            $('#search-input').keyup(function (event) {
                search();
            });

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

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

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

    <script>
        var animateModal = document.getElementById('animateModal');

        animateModal.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget;
            var recipient = button.getAttribute('data-pc-animate');

            animateModal.classList.add('anim-' + recipient);

            if (recipient == 'let-me-in' || recipient == 'make-way' || recipient == 'slip-from-top') {
                document.body.classList.add('anim-' + recipient);
            }
        });

        animateModal.addEventListener('hidden.bs.modal', function (event) {
            removeClassByPrefix(animateModal, 'anim-');
            removeClassByPrefix(document.body, 'anim-');
        });

        $(animateModal).on('shown.bs.modal', function () {
            $('#new-route-input').focus();
        });
    </script>
@endsection