@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 id="address-list" class="list-group">
                                                    <li class="list-group-item ps-2 border-0 addr-li pt-0 pe-2 pb-0" onclick="resetMap()">
                                                        <div onclick="openAddressDetails(this)">
                                                            <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">
                                                                    {{ $baseAddr }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    @foreach ($addresses as $address)
                                                        <li class="list-group-item ps-2 border-0 addr-li pe-2 pb-0" data-index={{ $loop->iteration }}>
                                                            <div id="addr-div-{{ $address->id }}" class="left-addr-div" onclick="openAddressDetails(this)">
                                                                <div class="num-part">
                                                                    {{ $loop->iteration }}
                                                                </div>
                                                                <div class="address">
                                                                    <div class="name-part">
                                                                        {{ Str::upper($address->user->firstName)  . ' ' . Str::upper($address->user->lastName) }}
                                                                    </div>
                                                                    <div class="address-part">
                                                                        {{ $address->address }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="addr-details pb-4 d-none">
                                                                <div class="text-end p-3 pb-0">
                                                                    <div class="text-danger" onclick="closeAddressDetails(this)">
                                                                        <span class="f-22 close-btn" data-bs-toggle="tooltip" data-bs-original-title="Close">&times;</span>
                                                                    </div>
                                                                </div>
                                                                <div class="fw-medium">
                                                                    <div class="border-bottom pb-1 border-dark">
                                                                        @isset($address->user)
                                                                            {{ Str::upper($address->user->firstName)  . ' ' . Str::upper($address->user->lastName) }}
                                                                            <br>
                                                                        @endisset

                                                                        @isset($address->user->email)
                                                                            <a class="text-dark f-12" href="mailto:{{ $address->user->email }}">
                                                                                {{ $address->user->email }}
                                                                            </a>
                                                                            <br>
                                                                        @endisset

                                                                        @isset($address->user->phone)
                                                                            <a class="text-dark f-12" href="tel:{{ $address->user->phone }}">
                                                                                {{ $address->user->phone }}
                                                                            </a>
                                                                        @endisset
                                                                    </div>
                                                                    <div class="mt-2">
                                                                        House No.: {{ $address->houseNumber }}
                                                                        <br>
                                                                        Street: {{ $address->street }}
                                                                        <br><br>
                                                                        {{ $address->address }}

                                                                        @isset($address->addressType)
                                                                            <br><br>
                                                                            Address Type: {{ Str::ucfirst($address->addressType) }}
                                                                            @if ($address->buzzerCode != NULL)
                                                                                Buzzer code {{ Str::ucfirst($address->addressType) }}
                                                                            @endif
                                                                        @endisset
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @else
                                                <div class="alert alert-info">No address available!</div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div 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 type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}" ></script>
    <script src="{{ asset('assets/js/plugins/choices.min.js') }}"></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 oldRouteDirections = [];
        var directionsService = new google.maps.DirectionsService();
        var directionRenderers = [];
        var markersArr = [];
        var markersIndex = 1;

        // 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 = [];

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

                    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) {
                        var steps = [];

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

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

                                let infoWindowArr = [];

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

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

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

                                    markersArr[markersIndex++] = m;

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

                                    infoContent += '<div class="f-16 border-bottom mb-2 pb-1">'+ info[i]['firstName'] + ' ' + info[i]['lastName'] +'</div>'
                                    infoContent += '<div>'+ info[i]['address']['houseNumber'] +'</div>';
                                    infoContent += '<div>'+ info[i]['address']['street'] +'</div>';
                                    infoContent += '<div>'+ info[i]['address']['address'] +'</div>';
                                    infoContent += '<br>';
                                    infoContent += '<div class="f-12">Phone: <a class="text-dark" href="tel:+'+ info[i]['phone'] +'">'+ info[i]['phone'] +'</a></div>'

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

                                    infoContent += '</div>';

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

                                    infoWindowArr.push(infowindow);

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

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

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

                                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.setZoom(12);
                            map.fitBounds(bounds);

                            // Fetch direction steps.
                            let instructions = [];
                            let legs = result['routes'][0]['legs'];
                            let legIndex = 0;

                            if (legs.length > 0) {
                                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) {
                                                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.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>');
                                });
                            }
                        }
                    });
                }
            });
        }

        // 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 targetLi = $(ele).closest('li');
            let targetLiIndex = $(targetLi).attr('data-index');

            let targetEle = $(targetLi).find('.addr-details');

            $('.addr-details').addClass('d-none');
            $('.left-addr-div').removeClass('d-none');

            $(targetEle).toggleClass('d-none');
            $(targetEle).prev().addClass('d-none');

            // Center map to marker.
            var latLng = markersArr[targetLiIndex].getPosition();
            map.setCenter(latLng);
            map.setZoom(17);
        }

        // Close address details
        function closeAddressDetails(ele) {
            $(ele).closest('.addr-details').addClass('d-none');
            $(ele).closest('.addr-details').prev().removeClass('d-none');
            resetMap();
        }

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

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

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

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

            $('#routeSelect').val('{{ $route->id }}');
        });
    </script>
@endsection