@extends('layouts.admin')

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

    <span id="route-id" class="d-none">{{ $route->id }}</span>

    <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-sub-route') }}" method="post">
                    @csrf

                    <input type="hidden" name="routeId" value="{{ $route->id }}">

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

                    <div class="modal-body">
                        <input id="new-sub-route-input" type="text" name="title" class="form-control" placeholder="New sub route name" aria-label="Sub 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 sub route">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <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">
                                    Sub Routes
                                </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">
                                            #{{ $route->routeNumber }} - {{ $route->title }}
                                        </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">Sub Route</span>

                                                <select class="form-select" id="subRouteSelect" data-bs-toggle="tooltip" data-bs-original-title="Select sub route">
                                                    @if (is_countable($sub_routes))
                                                        @foreach ($sub_routes as $route)
                                                            <option value="{{ $route->id }}">{{ $route->title }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4 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 id="subRoutesBtn" role="button" class="btn avtar avtar-xs btn-link-success btn-pc-default" data-bs-toggle="tooltip" title="Show / hide sub routes" onclick="showSubRoutes()">
                                                    <i class="ti ti-link f-18"></i>
                                                </span>

                                                <span role="button" onclick="showChangeSubRouteNameModal()" class="btn avtar avtar-xs btn-link-success btn-pc-default">
                                                    <i class="ti ti-edit-circle f-18" data-bs-toggle="tooltip" data-bs-original-title="Change sub 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" title="Remove this route"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-md-3 text-end pt-1">
                                            <span data-bs-toggle="tooltip" data-bs-original-title="Create new sub 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 Sub Route
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

                            <div class="row">
                                <div id="left-panel" class="col-md-3 px-0">
                                    <div id="route-div">
                                        <div>
                                            <div>
                                                <div class="d-flex justify-content-end align-items-baseline">
                                                    <div>
                                                        <div id="changeSubRouteNameModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="changeSubRouteNameModalTitle" 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="changeSubRouteNameModalTitle">Change Sub 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-sub-route-name') }}" method="post">
                                                                                @csrf
                                                                                <label class="form-label">Route Name <span class="text-danger">*</span></label>
                                                                                <input id="targetSubRouteName" required name="title" type="text" class="form-control" value="">
                                                                                <input id="targetSubRouteId" 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 Sub 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 sub 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 class="table table-sm table-hover">
                                                        @foreach ($addresses as $address)
                                                            <tr id="addr-tr-{{ $address->id }}" class="address-tr d-flex">
                                                                <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" data-address="{{ $address->id }}" id="addressCheckbox{{$loop->index}}" value="{{ $address->id }}" onclick="assignUnassignAddressToSubRoute(this, {{ $address->id }})" data-bs-toggle="tooltip" data-bs-original-title="Assign/unassign this address">

                                                                        <label class="form-check-label" for="addressCheckbox{{$loop->index}}">
                                                                            <span class="sn badge pt-2 rounded rounded-circle fw-bold">
                                                                                {{-- Will be filled by JS --}}
                                                                            </span>
                                                                            <span class="fw-medium">
                                                                                @isset($address->user)
                                                                                    {{ $address->user->firstName . ' ' . $address->user->lastName }}
                                                                                @endisset
                                                                            </span>
                                                                            <br />
                                                                            <span class="text-wrap fs-11 fw-medium">
                                                                                {!! $address->address !!}
                                                                            </span>
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </table>
                                                @else
                                                    <div class="alert alert-info">No address available!</div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div id="order-div" class="d-none">
                                        <div class="d-flex justify-content-between align-items-baseline">
                                            <h5>
                                                Sub Routes in This Route
                                            </h5>
                                        </div>

                                        <div id="no-sub-routes-div" class="text-center pt-5">
                                            {{-- JS will fill this --}}
                                        </div>

                                        <div class="mt-2">
                                            <ul id="sub-routes-ul" class="list-group no-lr-border">
                                                {{-- JS will fill this --}}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div id="right-panel" class="col-md-9 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 type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}" ></script>

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

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

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

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

        // Assign/unassign address to selected route.
        function assignUnassignAddressToSubRoute(ele, addressId) {
            let subRouteId = $('#subRouteSelect').val();

            if (subRouteId == null) {
                $('#subRouteSelect').focus();
                ele.checked = false;
            } else {
                var url = "{{ route('assign-unassign-address-to-sub-route', ['route' => 'arg1', 'subRoute' => 'arg2', 'address' => 'arg3']) }}";

                url = url.replace('arg1', $('#route-id').text());
                url = url.replace('arg2', subRouteId);
                url = url.replace('arg3', addressId);

                $.ajax({
                    type: 'POST',
                    url: url,
                    success: function(data) {
                        if (data == 'done') {
                            location.reload();
                        }
                    }
                });
            }
        }

        // Show route number in badge for selected route.
        function showRouteNumberandSetDeleteRouteHref(subRouteId) {
            var deleteSubRouteURL = "{{ route('delete-sub-route', ['route' => 'arg1']) }}";
            deleteSubRouteURL = deleteSubRouteURL.replace('arg1',  subRouteId);

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

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

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

            $('#targetSubRouteId').val(subRouteId);
        }

        // Change route for given route id.
        function changeSubRoute(subRouteId) {
            if (subRouteId != null) {
                showRouteNumberandSetDeleteRouteHref(subRouteId);

                // 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 sub route and check corresponding checkboxes.
                var addressesAssignedToThisSubRoute = [];
                var url = "{{ route('sub-route-address-ids', ['routeId' => 'arg1', 'subRouteId' => 'arg2']) }}";

                url = url.replace('arg1', $('#route-id').text());
                url = url.replace('arg2', subRouteId);

                $.ajax({
                    type: 'POST',
                    url: url,
                    success: function(data) {
                        addressesAssignedToThisSubRoute = 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++)
                                }
                            });
                        } else {
                            $('.address-checkbox').each(function(index, ele) {
                                $(ele).parent().find('.sn').removeClass('sn-active').text(' ');
                            });
                        }

                        // Fetch available addresses and uncheck corresponding checkboxes.
                        var url = "{{ route('sub-route-available-addresses', ['route' => 'arg1']) }}";
                        url = url.replace('arg1', $("#route-id").text());

                        $.ajax({
                            type: 'GET',
                            url: url,
                            success: function(data) {
                                $('.address-checkbox').each(function(index, ele) {
                                    if (data.includes(Number($(ele).attr('data-address')))) {
                                        $(ele).closest('tr').removeClass('d-none');
                                        $(ele).closest('tr').removeClass('assigned-tr');
                                    } else {
                                        if (addressesAssignedToThisSubRoute.includes(Number($(ele).attr('data-address')))) {
                                            $(ele).closest('tr').addClass('assigned-tr');
                                        } else {
                                            $(ele).closest('tr').removeClass('assigned-tr');
                                            $(ele).closest('tr').addClass('d-none');
                                        }
                                    }
                                });
                            }
                        });
                    }
                });

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

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

            // 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-sub-route-map', ['subRoute' => 'arg1']) }}";
            url = url.replace('arg1', routeId);

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

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

                    origins = temp;

                    temp = [];

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

                    destinations = temp;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                    infoContent += '</div>';

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

                                    infoWindowArr.push(infowindow);

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

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

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

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

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

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

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

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

                            map.fitBounds(bounds);
                        }
                    });
                }
            });
        }

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

        // Show change address order div
        function showSubRoutes() {
            showLeftPanel();

            if ($('#order-div').hasClass('d-none')) {
                $('#route-div').addClass('d-none');
                $('#order-div').removeClass('d-none');
                $('#subRoutesBtn').addClass('text-success');

                let data = {!! $sub_routes->toJson() !!};
                let liIndex = 1;

                if (data.length > 0) {
                    data.forEach(v => {
                        let str = ' <strong>' + v.title + '</strong>';

                        $("#sub-routes-ul").append('<li id="'+ v.id +'" class="list-group-item py-1">'+ str +'</li>');

                        liIndex++;
                    });
                } else {
                    $("#no-sub-routes-div").html('No sub route available!');
                }
            } else {
                $('#order-div').addClass('d-none');
                $('#subRoutesBtn').removeClass('text-success');
                $('#route-div').removeClass('d-none');
            }
        }

        function details()
        {
            if($('#subRouteSelect').val() != null) {
                let url = "{{ route('route-details', ['route' => 'arg1']) }}";
                location.href = url.replace('arg1', $('#route-id').text());
            } else {
                $('#subRouteSelect').focus();
            }
        }

        function showChangeSubRouteNameModal() {
            if($('#subRouteSelect').val() != null) {
                $('#changeSubRouteNameModal').modal('show');
            } else {
                $('#subRouteSelect').focus();
            }
        }

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

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

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

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

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

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

                    data.forEach(function(v) {
                        let temp = $('#addr-tr-' + v);

                        if (temp.hasClass('assigned-tr')) {
                            temp.removeClass('d-none');
                        }
                    });
                }
            });
        }

        // Change route
        $('#subRouteSelect').on('change', function() {
            resetMap();

            changeSubRoute($(this).val());
        });

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

            changeSubRoute($('#subRouteSelect').val());

            $('#search-input').keyup(function (event) {
                search();
            });
        });
    </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-sub-route-input').focus();
        });
    </script>
@endsection