@php

    $rtl = getActiveFrontLangRTL();
    $front_locale = getFrontLocale();
    $plugin_folder = getPluginRoutesSettingConfigAttractionsPlugin('plugin_folder');
    $plugin_path = getPluginRoutesSettingConfigAttractionsPlugin('plugin_path');
    $generalSettings = getGeneralSettingsDetails();
    $title = ($plugin_settings['content_title']['active'] && $parent->translation('title', $front_locale)) ? $parent->translation('title', $front_locale) : translate(getPluginWordConfigTourPlugin('PluginName'));
    $header_first_title = ($plugin_settings['content_subtitle']['active'] && $parent->translation('subtitle', $front_locale)) ? $parent->translation('subtitle', $front_locale) : '';
    $header_title = ($plugin_settings['content_title']['active'] && $parent->translation('title', $front_locale)) ? $parent->translation('title', $front_locale) : '';
    $header_subtitle = ($plugin_settings['content_subtitle']['active'] && $parent->translation('subtitle', $front_locale)) ? $parent->translation('subtitle', $front_locale) : '';
    $header_paragraph = ($plugin_settings['content_description']['active'] && $parent->translation('header_description', $front_locale)) ? $parent->translation('header_description', $front_locale) : null;
    $header_image = ($plugin_settings['content_main_image']['active'] && $parent->header_image) ? $parent->header_image : null;
    if(isset($category)) {
      $meta_title = ($plugin_settings['category_meta_title']['active'] && $category->translation('meta_title', $front_locale)) ? $category->translation('meta_title', $front_locale) : $category->translation('title', $front_locale);
      $meta_description = ($plugin_settings['category_meta_description']['active'] && $category->translation('meta_description', $front_locale)) ? $category->translation('meta_description', $front_locale) : null;
      $meta_image = ($plugin_settings['category_meta_image']['active'] && $category->meta_image) ? $category->meta_image : $header_image;
    } else {
      $meta_title = ($plugin_settings['content_meta_title']['active'] && $parent->translation('meta_title', $front_locale)) ? $parent->translation('meta_title', $front_locale) : $header_title;
      $meta_description = ($plugin_settings['content_meta_description']['active'] && $parent->translation('meta_description', $front_locale)) ? $parent->translation('meta_description', $front_locale) : null;
      $meta_image = ($plugin_settings['content_meta_image']['active'] && $parent->meta_image) ? $parent->meta_image : $header_image;
    }
    $motto = ($generalSettings['site_moto']) ? $generalSettings['site_moto'] : $generalSettings['system_name'];
    $main_title = front_translate('Guide Tour');
@endphp

@extends($plugin_path.'::frontend.layout.master')

@section('seo')
    {{-- SEO --}}
    <title>{{ $main_title . ' | ' . $meta_title . ' | ' . $motto }}</title>
    <meta name="title" content="{{ $main_title . ' | ' . $meta_title . ' | ' . $motto }}">
    <meta name="description" content="{{$meta_description}}">
    <meta name="keywords" content="{{ getGeneralSetting('site_meta_keywords') }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ $main_title . ' | ' . $meta_title . ' | ' . $motto }}">
    <meta property="og:description" content="{{$meta_description}}">
    <meta name="twitter:card" content="{{ $main_title . ' | ' . $meta_title . ' | ' . $motto }}">
    <meta name="twitter:title" content="{{ $main_title . ' | ' . $meta_title . ' | ' . $motto }}">
    <meta name="twitter:description" content="{{$meta_description}}">
    <meta name="twitter:image" content="{{ $meta_image ? asset(getFilePath($meta_image)) : '' }}">
    <meta property="og:image" content="{{ $meta_image ? asset(getFilePath($meta_image)) : '' }}">
    <meta property="og:image:width" content="1200">
@endsection

@section('custom-css')
    @php
        $builder_css_file = base_path("plugins/{$plugin_folder}/public/css/style.css");
        $builder_css_path = asset("plugins/{$plugin_folder}/public/css/style.css");
    @endphp
    @if (file_exists($builder_css_file))
        <link rel="stylesheet" href="{{ $builder_css_path.'?v='.time() }}">
    @endif
    @php
        $builder_dark_css_file = base_path("plugins/{$plugin_folder}/public/css/dark-theme.css");
        $builder_dark_css_path = asset("plugins/{$plugin_folder}/public/css/dark-theme.css");
    @endphp
    @if (file_exists($builder_dark_css_file))
        <link rel="stylesheet" href="{{ $builder_dark_css_path.'?v='.time() }}">
    @endif
@endsection

@section('content')
    
    <div id="guide-tour" class="mt-20px">
        <div class="container">
            <h1 class="fs-22 fw-300 font-noto font-italic pb-5px lh-1 mb-10px border-bottom border-default-20 resizable-text"
                data-font-size="22">{{$main_title}}</h1>
            <div class="guide-tour-description lh-1-7 resizable-text" data-font-size="14" data-font-size-md="16"
                 data-font-size-xl="18">
                {!! $parent->translation('content', $front_locale) !!}
            </div>
        </div>
        @if(count($records) > 0)
            <div class="mt-30px">
                <div class="container guide-tour-titles">

                    <h2 class="fs-22 fw-300 font-noto font-italic pb-5px lh-1 mb-5px border-bottom border-default-20 resizable-text"
                        data-font-size="22">
                        {{front_translate('To ')}} <span id="destination_name"> </span>
                    </h2>
                    <h3 class="fs-14 fw-700 mb-20px resizable-text" data-font-size="14">
                        <span id="next_time_invisible"></span> <span class="attraction-time-dot"></span> <span
                                id="next_distance_invisible"></span> <span class="attraction-time-dot"></span> <span
                                id="estimated_arrival_time"></span>
                    </h3>
                </div>
                <div class="attraction-publish-maps">
                    <div id="map-canvas">
                        <!-- Xartis Edo -->

                    </div>
                    <div class="maps-actions">
                        <div class="maps-buttons">

                            <a id="start_button" hidden="true" href="javascript:void(0);"
                               onclick="draw_active_route(); "
                               class="btn btn-default fs-14 start-route resizable-text unchanged" data-font-size="14"
                               onclick="draw_active_route();">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.38 13.65" class="mr-1">
                                    <use xlink:href="{{ asset('/public/images/route.svg') }}#content"></use>
                                </svg>
                                {{front_translate('Start Route')}}
                            </a>
                            <a href="javascript:void(0);" class="btn btn-white fs-14 re-center resizable-text"
                               data-font-size="14" id="recalibration_button" onclick="recalibrate();" hidden="true">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.38 13.65" class="mr-1">
                                    <use xlink:href="{{ asset('/public/images/route.svg') }}#content"></use>
                                </svg>
                                {{front_translate('Re-Center')}}
                            </a>
                        </div>

                    </div>
                </div>
                <div id="map_popup_div" hidden="true" class="map-popup-direction">
                    <div class="row gutters-3">
                        <div class="col-auto">
                            <div class="map-popup-direction-image">
                                <img id="attraction_image"
                                     src="https://tersefanou.skwebline.net/public/uploaded/all_files/2024/Feb/uYLwh3ERf40cWPkSI0qmpvlqsGHKjLtjfAK3Bv6a.jpg"
                                     alt="" class="img-fit absolute-full h-100 hidden-image">
                            </div>
                        </div>
                        <div class="col py-5px d-flex flex-column justify-content-center l-space-04">
                            <div class="row gutters-10 align-items-center">
                                <div class="col">
                                    <h4 id="instruction_information"
                                        class="title fw-400 fs-11 lh-1-4 mb-5px resizable-text"
                                        data-font-size="10"></h4>
                                    <h5 id="instruction_distance" class="speed fs-12 text-default-50 m-0 resizable-text"
                                        data-font-size="12"></h5>
                                </div>
                                <div class="col-auto">
                                    <div class="close-direction" onclick="stop_guide();"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="map-popup-routes">
                    <div class="map-popup-toggle"></div>
                    <div class="map-popup-routes-results">
                        <!-- Oti egine idi evala tin class completed kai oti ginete auti tin stigmi evala tin class active -->
                        @foreach($records as $key => $record)
                            {{--                            <div id="record_{{$record->name}}" class="map-popup-route-item @if($key==0) active completed @endif ">--}}
                            <div id="record_{{$record->id}}" class="map-popup-route-item ">
                                @php
                                    if  ($record->banner == null) continue;
                                    $banner = \Core\Models\UploadedFile::where('id',$record->banner)->first();
                                    $banner_image = $banner->path;
                                @endphp
                                <img id="image_{{$record->id}}" src="{{asset('public/'.$banner_image)}}" hidden="true">
                                <div class="row gutters-5">
                                    <div class="col col-35px">
                                        <div class="number-container">
                                            <div class="number-wrap">
                                                <div class="number fs-14 resizable-text"
                                                     data-font-size="14">{{$key+1}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col col-grow-35px">
                                        <h3 class="title fs-18 fw-700 lh-1 resizable-text" data-font-size="18">
                                            <span class="icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.56 15.69">
                                                    <use xlink:href="{{ asset('/public/images/walker.svg') }}#content"></use>
                                                </svg>
                                            </span>
                                            {{$record->translation('title', $front_locale)}}
                                        </h3>
                                        <p class="description l-space-04 resizable-text"
                                           data-font-size="14">{{$record->translation('short_description', $front_locale)}}</p>
                                        @if($record->audio_file != null)
                                            <div class="voice resizable-text" data-font-size="12">
                                                <div class="audio-style">
                                                    <div class="row gutters-2 align-items-center">
                                                        <div class="col-auto">
                                                            <div id="play_{{$record->id}}" class="audio-play">
                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                     viewBox="0 0 11.21 11.44">
                                                                    <use xlink:href="{{ asset('/public/images/repeat.svg') }}#content"></use>
                                                                </svg>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div id="waveform_{{$record->id}}"></div>
                                                            <div class="row gutters-5 justify-content-between">
                                                                <div class="col-auto">
                                                                    <div id="time_{{$record->id}}" class="audio-time">
                                                                        0:00
                                                                    </div>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div id="duration_{{$record->id}}"
                                                                         class="audio-time duration">0:00
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
{{--                                                <div class="fs-12 hear-countdown resizable-text" data-font-size="12">--}}
{{--                                                    {{front_translate('Listen to the voice recording in')}} <span--}}
{{--                                                            id="next_time_invisible_sound_{{$record->id}}"></span> {{front_translate('minutes')}}--}}
{{--                                                </div>  --}}
                                                <div class="fs-12 hear-countdown resizable-text" data-font-size="12">
                                                    {{front_translate('Voice recording available upon arrival')}}
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </div>

    <div class="modal fade" id="guide_modal">
        <div class="modal-dialog modal-dialog-bottom">
            <div class="modal-content">
                <button id="close_button_top" type="button" class="close" data-dismiss="modal"></button>
                <!-- Modal Body -->
                <div class="modal-body py-35px px-15px">
                    <h4 class="fs-22 fw-300 font-italic font-noto mb-20px lh-1-5">{{front_translate('Do you want to continue to the next destination?')}}</h4>
                    <div class="row gutters-5">
                        <div class="col-6">
                            <button id="close_button" type="button" class="btn btn-block btn-outline-default">{{front_translate('No, Return')}}</button>
                        </div>
                        <div class="col-6">
                            <button id="continue_button" type="button" class="btn btn-block btn-primary">{{front_translate('Yes, Continue')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="audio_modal">
        <div class="modal-dialog modal-dialog-bottom">
            <div class="modal-content">
                <button id="audio_close_button_top" type="button" class="close" data-dismiss="modal"></button>
                <!-- Modal Body -->
                <div class="modal-body py-35px px-15px">
                    <h4 class="fs-22 fw-300 font-italic font-noto mb-20px lh-1-5">{{front_translate('Do you want to play the sound?')}}</h4>
                    <div class="row gutters-5">
                        <div class="col-6">
                            <button id="audio_close_button" type="button" class="btn btn-block btn-outline-default">{{front_translate('Skip')}}</button>
                        </div>
                        <div class="col-6">
                            <button id="audio_play_button" type="button" class="btn btn-block btn-primary">{{front_translate('Play sound')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{--the final modal --}}

    <div class="modal fade" id="end_modal">
        <div class="modal-dialog modal-dialog-bottom">
            <div class="modal-content">
                <button id="end_close_button_top" type="button" class="close" data-dismiss="modal"></button>
                <!-- Modal Body -->
                <div class="modal-body py-35px px-15px">
                    <h4 class="fs-22 fw-300 font-italic font-noto mb-5px lh-1-5">{{front_translate('The tour has been completed')}}</h4>
                    <p class="fs-12 mb-20px text-default-50">{{front_translate('Thank you for visiting Tersefanou.')}}</p>
                    <a href="{{route(getPluginRoutesSettingConfigAttractionsPlugin('name.front_index'), $parent->permalink)}}" class="btn btn-block btn-primary">{{front_translate('Exit')}}</a>
                </div>
            </div>
        </div>
    </div>


    @php

        // $previous_subitem = $record;
         $previous_subitem = $parent;
         $next_subitem = $records[0];

            $coords=[];

             foreach ($records as $attraction){

                     $coords[]=[
                     'coordinates' => $attraction->coordinates,
                     'color' => 'blue',
                     'name' => $attraction->title,
                      'audio'=> $attraction->audio_file,
                      'id'=>$attraction->id,

         ];

             }

             $paudio = $previous_subitem->audio_file;
     $naudio = $next_subitem->audio_file;

    @endphp

@endsection

@section('custom-js')
    
    <script src="{{ asset('themes/default/public/assets/js/wavesurfer.js') }}"></script>
    <script>


        var markers = [];
        var audios = [];


      


        @if(count($records) > 0)
        /*Other Audios*/
        @foreach($records as $key => $record)
        @if($record->audio_file != null)

        const wavesurfer_{{$record->id}} = WaveSurfer.create({
            container: '#waveform_{{$record->id}}',
            waveColor: 'rgba(194,156,101,0.5)',
            progressColor: '#242257',
            url: '{{ asset('/public/uploads/attractions/audios/') .'/'. $record->audio_file }}',
            dragToSeek: true,
            // Set a bar width
            barWidth: 2,
            // Optionally, specify the spacing between bars
            barGap: 3,
            // And the bar radius
            barRadius: 0,
        });

        const playButton_{{$record->id}} = document.querySelector('#play_{{$record->id}}')
        const timeEl_{{$record->id}} = document.querySelector('#time_{{$record->id}}');
        const durationEl_{{$record->id}} = document.querySelector('#duration_{{$record->id}}');

        wavesurfer_{{$record->id}}.once('decode', () => {
            playButton_{{$record->id}}.onclick = () => {
                wavesurfer_{{$record->id}}.playPause()
                $('#play_{{$record->id}}').toggleClass('play').removeClass('repeat');
            }
        });

        const formatTime_{{$record->id}} = (seconds) => {
            const minutes = Math.floor(seconds / 60)
            const secondsRemainder = Math.round(seconds) % 60
            const paddedSeconds = `0${secondsRemainder}`.slice(-2)
            return `${minutes}:${paddedSeconds}`
        }

        wavesurfer_{{$record->id}}.on('decode', (duration) => (durationEl_{{$record->id}}.textContent = formatTime_{{$record->id}}(duration)))
        wavesurfer_{{$record->id}}.on('timeupdate', (currentTime) => (timeEl_{{$record->id}}.textContent = formatTime_{{$record->id}}(currentTime)))

        wavesurfer_{{$record->id}}.on('audioprocess', () => {
            const progress = wavesurfer_{{$record->id}}.getCurrentTime() / wavesurfer_{{$record->id}}.getDuration();
            if (progress >= 1) {
                // Call your JavaScript function here only once when progress reaches 1 (end)
                $('#play_{{$record->id}}').removeClass('play').addClass('repeat');
                wavesurfer_{{$record->id}}.un('audioprocess'); // Unbind the event after calling the function

                // console.log(document.getElementById('record_{{$record->id}}').classList);

                if (document.getElementById('record_{{$record->id}}').classList.contains('active')) {

                    show_correct_modal();

                    // $('#guide_modal').modal('show');
                }

            }
        });

        audios[{{$record->id}}] = wavesurfer_{{$record->id}};

        @endif

        @endforeach
        @endif

        console.log(audios);
    </script>
    <script>
      $(document).on('click', '.map-popup-toggle', function () {
        $(this).parent('.map-popup-routes').toggleClass('closed');
        scrollToRoutes();
      });
      function removeFixedHeader() {
          $('.fixed-header').removeClass('header-down');
          $('body').removeClass('fixed-header-showed');
      }
      resizeGoogleMaps();
      function resizeGoogleMaps() {
        let extra_elements = $('.guide-tour-titles').outerHeight(true) + 30 + $('.map-popup-direction').outerHeight(true) + $('.map-popup-route-item:first-child').outerHeight(true) + parseInt($('.map-popup-routes').css('padding-top')) + parseInt($('.map-popup-routes').css('padding-bottom')),
          windowHeight = $(window).height(),
          mapHeight = windowHeight - extra_elements;
        $('#map-canvas').css('height', mapHeight + 'px');
        removeFixedHeader();
      }
      function scrollToRoutes() {
        if($('.map-popup-routes').hasClass('closed')) {
          resizeGoogleMaps();
          scrollToElementBottom('.map-popup-routes');
        } else {
          scrollToElementHalfBottom('.map-popup-routes');
        }
      }

      function scrollToElementBottom(elementId) {
        var element = $(elementId);
        if (element.length) {
          var windowHeight = $(window).height();
          var elementBottom = element.offset().top + element.outerHeight();
          var scrollTop = elementBottom - windowHeight;
          $('html, body').animate({
            scrollTop: scrollTop
          }, {
            duration: 'slow',
            step: function() {
              didScroll = false;
                removeFixedHeader();
            },
            complete: function() {
              didScroll = false;
              removeFixedHeader();
                setTimeout(function(){
                  didScroll = false;
                removeFixedHeader();
              }, 50)
            }
        });
        }
      }

      function scrollToElementHalfBottom(elementId) {
        var element = $(elementId);
        if (element.length) {
          var windowHeight = $(window).height();
          var elementBottom = element.offset().top;
          var scrollTop = elementBottom - (windowHeight / 2);
          $('html, body').animate({
            scrollTop: scrollTop
          }, {
            duration: 'slow',
            step: function() {
              didScroll = false;
                removeFixedHeader();
            },
            complete: function() {
              didScroll = false;
              removeFixedHeader();
                setTimeout(function(){
                  didScroll = false;
                removeFixedHeader();
              }, 50)
            }
        });
        }
      }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{getPluginGoogleMapsAPIkeyConfigAttractionsPlugin()}}&libraries=places,drawing"></script>
    @php
        $userLocationEnable = false;
        $google_maps_redirection = false;
        if  (request()->has('location')) {
            $userLocationEnable = true;

            if(request()->get('location') === '2' ){
                $google_maps_redirection = true;
            }

        }
        $userLocationEnable = true;

    @endphp
    <script>

        $('body').addClass('loader');



        var directionsDisplay_array = [];
        var user_marker;
        var map;
        var userLocation;
        var coordinates_array = {!! json_encode($coords) !!};
        var shifted_coordinates_array = coordinates_array;
        var routes = [];
        var active_route;
        var numbered_markers_created = false;
        var d_directions;
        var stable_bounds = [];
        var umarker;
        var route_computed = false;
        var user_initiated = false;

        var proper_hide_audio = false;
        var proper_hide_guide = false;

        var user_initial_route_deleted = false;

        var guide_activated = false;
        var dService;

        var initial_instruction_points = [];
        var projected_instructions = [];
        var instructions_set = false;

        var renderer;

        var invisible_routes = [];
        var found_invisible_route = false;

        var active_route_n;

        {{ $coordinates = $record->coordinates}};

        {{$pcoordinates=$previous_subitem->coordinates}};
        {{$ncoordinates=$next_subitem->coordinates}};

        var active_route_instructions = [];

        var my_position = new google.maps.LatLng({{$coordinates}});

        var bounds = new google.maps.LatLngBounds();

        var previous_location_point = '{{$pcoordinates}}';

        var next_location_point = '{{$ncoordinates}}';

        var previous_audio = '{{$paudio}}';
        var next_audio = '{{$naudio}}';

        var audio_loaded = false;

        const {AdvancedMarkerElement, PinElement} = google.maps.importLibrary(
            "marker",
        );

        function add_marker_ic(map, pos, name, color) {

            var pinBorder = new google.maps.marker.PinElement({
                background: color,
                borderColor: color,
                glyph: name,

            });

            new google.maps.marker.AdvancedMarkerElement({
                position: pos,
                title: name,
                map: map,
                content: pinBorder.element,
            });
        }

        function add_marker(map, pos, name, color) {

            const glyphImg = document.createElement('div');
            glyphImg.classList.add('marker_guide');
            glyphImg.innerHTML = name;

            var pinBorder = new google.maps.marker.PinElement({
                background: '#C29C65',
                borderColor: '#C29C65',
                glyph: glyphImg,

            });

          var p =  new google.maps.marker.AdvancedMarkerElement({
                position: pos,
                title: name,
                map: map,
                content: pinBorder.element,
            });

          markers[name] = p;
        }

        document.getElementById('continue_button').addEventListener('click', function () {

            proper_hide_guide = true;
            $('#guide_modal').modal('hide');

            invisible_next();
            setTimeout(draw_active_route, 2000);
        });
        document.getElementById('close_button').addEventListener('click', function () {

            proper_hide_guide = true;
            $('#guide_modal').modal('hide');

            invisible_next();
            setTimeout(stop_guide, 2000);

        });

        document.getElementById('close_button_top').addEventListener('click', function () {

            proper_hide_guide = true;
            $('#guide_modal').modal('hide');

            invisible_next();
            setTimeout(stop_guide, 2000);

        });

        function initialize() {
           // document.getElementsByClassName('gmnoprint').hidden = true;

            map = new google.maps.Map(document.getElementById('map-canvas'), {
                //mapTypeId: google.maps.MapTypeId.TERRAIN,
                center: my_position,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.SATELLITE,
                zoomControl: false, // Disable zoom controls
                streetViewControl: false, // Disable street view control
                mapTypeControl: false, // Disable map type control
                keyboardShortcuts: false,
                disableDoubleClickZoom: true,
                fullscreenControl: false,
                {{--mapId: '{{getPluginMapIdConfigAttractionsPlugin()}}',--}}
                mapId: '1c540a2093137ffa',
            });

            map.addListener('tilesloaded', function() {
                $('body').removeClass('loader');
            });

            //  var posi = new google.maps.LatLng(34.858433672956766 , 33.547540715672106);
            var posi = new google.maps.LatLng(34.8544676937152, 33.54704573154125);
                            umarker = new google.maps.Marker({
                // position: new google.maps.LatLng(34.854433672956766 , 33.547540715672106),
                position: posi,
                draggable: true,
                map: map
            });
            bounds.extend(posi);

            userLocation = {
                lat: 34.8544676937152,
                lng: 33.54704573154125
            };

            coordinates_array = {!! json_encode($coords) !!};

            var ini = coordinates_array[0].coordinates.split(',');

            setTimeout(function () {
                //if (haversineDistance(userLocation.lat, userLocation.lng, ini[0], ini[1]) > 10) {
                var adirectionsService = new google.maps.DirectionsService;

                adirectionsService.route({
                        origin: new google.maps.LatLng(userLocation.lat, userLocation.lng),
                        destination: new google.maps.LatLng(ini[0], ini[1]),
                        travelMode: 'WALKING',
                        avoidFerries: true,
                        avoidHighways: true,
                        avoidTolls: true,
                    }
                    , function (response, status) {
                        if (status === 'OK') {
                            active_route_n = response;
                            active_route_instructions = [];
                            var step_instr = active_route_n.routes[0].legs[0].steps;
                            for (let j = 0; j < step_instr.length; j++) {

                                active_route_instructions.push({
                                    'start': step_instr[j].start_location,
                                    'end': step_instr[j].end_location,
                                    'instructions': step_instr[j].instructions,
                                    'distance': step_instr[j].distance.text,
                                    'duration': step_instr[j].duration.text
                                });

                            }
                            console.log(response);

                            document.getElementById('next_time_invisible').innerHTML = response.routes[0].legs[0].duration.text;

                            if (document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id) != null) {
                                if (document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id) != null) {
                                   // document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = response.routes[0].legs[0].duration.text;
                                   // document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = Math.ceil(parseInt(response.routes[0].legs[0].duration.value)/60);

                                }

                            }
                            document.getElementById('next_distance_invisible').innerHTML = response.routes[0].legs[0].distance.text;

                            var currentTime = new Date();
                            var secondsToAdd = response.routes[0].legs[0].duration.value;
                            var arrivalTime = new Date(currentTime.getTime() + secondsToAdd * 1000);

                            var arrivalHours = arrivalTime.getHours();
                            var arrivalMinutes = arrivalTime.getMinutes();
                            arrivalHours = (arrivalHours < 10) ? '0' + arrivalHours : arrivalHours;
                            arrivalMinutes = (arrivalMinutes < 10) ? '0' + arrivalMinutes : arrivalMinutes;
                            var formattedArrivalTime = arrivalHours + ':' + arrivalMinutes;

                            document.getElementById('estimated_arrival_time').innerHTML = formattedArrivalTime;

                            document.getElementById('destination_name').innerHTML = coordinates_array[0].name;
                            var ac_image = document.getElementById('image_' + coordinates_array[0].id).src;
                            document.getElementById('attraction_image').src = ac_image;
                            //make the start button visible now
                            document.getElementById('start_button').hidden = false;

                        } else {
                            window.alert('Directions request failed due to ' + status);
                        }
                    });

                // }


            }, 3000);


            google.maps.event.addListener(umarker, 'drag', function (e) {
                var positionDragged = e.latLng;
                $('#inputLatLng').val(positionDragged.lat() + ', ' + positionDragged.lng());
                umarker.setPosition(positionDragged);

                userLocation = {
                    lat: positionDragged.lat(),
                    lng: positionDragged.lng()
                };
                if (renderer != null) {
                    //console.log(active_route_instructions);

                    for (var g = 0; g < active_route_instructions.length; g++) {
                        if (haversineDistance(userLocation.lat, userLocation.lng, active_route_instructions[g].start.lat(), active_route_instructions[g].start.lng()) < 5) {
                            document.getElementById('instruction_distance').innerHTML = active_route_instructions[g].distance;
                            document.getElementById('instruction_information').innerHTML = active_route_instructions[g].instructions;

                        }

                    }

                    if (haversineDistance(userLocation.lat, userLocation.lng, active_route_n.routes[0].legs[0].end_location.lat(), active_route_n.routes[0].legs[0].end_location.lng()) < 5) {

                        document.getElementById('instruction_distance').innerHTML = '';

                        document.getElementById('instruction_information').innerHTML = 'Destination Reached';

                        var r_name = 'record_' + shifted_coordinates_array[0].id;
                        document.getElementById(r_name).classList.add('completed');

                        var mark = markers[shifted_coordinates_array[0].id];


                        const glyphImg2 = document.createElement('div');
                        glyphImg2.classList.add('marker_guide');
                        glyphImg2.innerHTML = shifted_coordinates_array[0].id;

                        var pinBorder = new google.maps.marker.PinElement({
                            background: 'rgb(255,255,255)',
                            borderColor: '#C29C65',
                            glyph: glyphImg2,

                        });

                        mark.content = pinBorder.element;


                        // the correct marker should change class and have the new design

                        var w_name = 'waveform_' + shifted_coordinates_array[0].id;


                        if (document.getElementById(w_name) === null) {

                            show_correct_modal();

                            // var end_reached= true;
                            //
                            // for(var i=0;i<shifted_coordinates_array.length;i++){
                            //     if(!document.getElementById('record_'+shifted_coordinates_array[i].id).classList.contains('completed')){
                            //         end_reached = false
                            //     }
                            // }
                            //
                            // if(end_reached){
                            //     $('#end_modal').modal('show');
                            // }
                            // else{
                            //     $('#guide_modal').modal('show');
                            // }

                        } else {
                            document.getElementById('play_'+shifted_coordinates_array[0].id).classList.add('play');
                           // $('#play_'+shifted_coordinates_array[0].id).addClass('play');
                            audios[shifted_coordinates_array[0].id].play();

                        }

                    }

// the popup or sound should activate even if the user dont go from the route
                  var  actual_location_point = shifted_coordinates_array[0].coordinates;
                    var narr = actual_location_point.split(',');
                    if (haversineDistance(userLocation.lat, userLocation.lng, narr[0], narr[1]) < 5) {

                        document.getElementById('instruction_distance').innerHTML = '';

                        document.getElementById('instruction_information').innerHTML = 'Destination Reached';

                        var r_name = 'record_' + shifted_coordinates_array[0].id;
                        document.getElementById(r_name).classList.add('completed');

                        var w_name = 'waveform_' + shifted_coordinates_array[0].id;


                        if (document.getElementById(w_name) === null) {
                            //$('#guide_modal').modal('show');
                            show_correct_modal();
                        } else {
                            document.getElementById('play_'+shifted_coordinates_array[0].id).classList.add('play');
                            audios[shifted_coordinates_array[0].id].play();

                        }

                    }



                }

            });
            
            for (let i = 0; i < coordinates_array.length; i++) {

                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer({
                    map: map,
                    draggable: false,
                });
                var arr2 = [];
                var start;
                var end;

                var arr = coordinates_array[i].coordinates.split(',');
                var bou = new google.maps.LatLng(arr[0], arr[1])
                stable_bounds.push(bou);
                bounds.extend(bou);
                if (arr.length === 2) {
                    var pos = new google.maps.LatLng(arr[0], arr[1]);
                    // add_marker(map, pos, coordinates_array[i].name, coordinates_array[i].color);
                }
                if (i === 0 && coordinates_array.length > 1) {
                    arr2 = coordinates_array[i + 1].coordinates.split(',');
                    start = new google.maps.LatLng(arr[0], arr[1]);
                    end = new google.maps.LatLng(arr2[0], arr2[1]);
                } else if (i !== 0 && i + 1 < coordinates_array.length) {
                    arr2 = coordinates_array[i + 1].coordinates.split(',');
                    start = new google.maps.LatLng(arr[0], arr[1]);
                    end = new google.maps.LatLng(arr2[0], arr2[1]);
                } else if (i + 1 === coordinates_array.length) {
                    arr2 = coordinates_array[0].coordinates.split(',');
                    start = new google.maps.LatLng(arr[0], arr[1]);
                    end = new google.maps.LatLng(arr2[0], arr2[1]);
                }

                calculateAndDisplayRoute(directionsService, directionsDisplay, start, end, map, i.toString(), coordinates_array.length, my_position, false);
            }

        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay, start, end, map, number, length, record_position, initial) {

            var num = parseInt(number);
            var num2 = parseInt(number);
            num2 = num2 + 1;

            var next_num = num + 1;
            var next_num2 = num2 + 1;

            directionsService.route({
                    origin: start,
                    destination: end,
                    travelMode: 'WALKING',
                    avoidFerries: true,
                    avoidHighways: true,
                    avoidTolls: true,
                }
                , function (response, status) {
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                        var route = response.routes[0].legs;
                        routes.push(route);

                        var color = 'orange';
                        var opacity = '0.3';
                        var index = '0';

                        if (start.toString() === record_position.toString() && initial) {

                            color = '#7c7cfe';
                            opacity = '1';
                            index = '1';
                            active_route = route;

                        }
                        directionsDisplay.setOptions({
                            preserveViewport: true,
                            suppressMarkers: true,
                            polylineOptions: {
                                strokeColor: color,
                                strokeOpacity: opacity,
                                strokeWeight: 5,
                                zIndex: index
                            }
                        });
                        // console.log(directionsDisplay);
                        directionsDisplay_array.push(directionsDisplay)
                        for (var p = 0; p < route.length; p++) {

                            if (num <= length - 2) {

                                if (!numbered_markers_created) {
                                    // add_marker_ic(map, route[p].start_location, number, '#00ff0019');
                                    // add_marker_ic(map, route[p].end_location, next_num.toString(), '#00ff0019');
                                    add_marker(map, start, num2.toString(), '#00ff0019');
                                    add_marker(map, end, next_num2.toString(), '#00ff0019');

                                }
                            }
                        }

                    } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                });

        }

        function invisible_next() {
            if (renderer != null) {
                renderer.setMap(null);
                renderer = null;
            }

            var r_name = 'record_' + shifted_coordinates_array[0].id;
            document.getElementById(r_name).classList.remove('active');
            // document.getElementById(r_name).classList.remove('completed');

            var firstElement = shifted_coordinates_array.splice(0, 1)[0];
            shifted_coordinates_array.push(firstElement);

            previous_location_point = shifted_coordinates_array[0].coordinates;
            next_location_point = shifted_coordinates_array[1].coordinates;

            previous_audio = shifted_coordinates_array[0].audio;
            next_audio = shifted_coordinates_array[1].audio;

            var narr = previous_location_point.split(',');

            var directionsService_invisible = new google.maps.DirectionsService;

            start = new google.maps.LatLng(userLocation.lat, userLocation.lng);
            end = new google.maps.LatLng(narr[0], narr[1]);

            directionsService_invisible.route({
                    origin: start,
                    destination: end,
                    travelMode: 'WALKING',
                    avoidFerries: true,
                    avoidHighways: true,
                    avoidTolls: true,
                }
                , function (response, status) {
                    if (status === 'OK') {

                        console.log(response);
                        active_route_n = response;
                        active_route_instructions = [];
                        var step_instr = active_route_n.routes[0].legs[0].steps;
                        for (let j = 0; j < step_instr.length; j++) {

                            active_route_instructions.push({
                                'start': step_instr[j].start_location,
                                'end': step_instr[j].end_location,
                                'instructions': step_instr[j].instructions,
                                'distance': step_instr[j].distance.text,
                                'duration': step_instr[j].duration.text
                            });

                        }

                        document.getElementById('next_time_invisible').innerHTML = response.routes[0].legs[0].duration.text;
                        if (document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id) != null) {
                           // document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = response.routes[0].legs[0].duration.text;
                           // document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = Math.ceil(parseInt(response.routes[0].legs[0].duration.value)/60);

                        }

                        document.getElementById('next_distance_invisible').innerHTML = response.routes[0].legs[0].distance.text;


                        var currentTime = new Date();
                        var secondsToAdd = response.routes[0].legs[0].duration.value;
                        var arrivalTime = new Date(currentTime.getTime() + secondsToAdd * 1000);

                        var arrivalHours = arrivalTime.getHours();
                        var arrivalMinutes = arrivalTime.getMinutes();
                        arrivalHours = (arrivalHours < 10) ? '0' + arrivalHours : arrivalHours;
                        arrivalMinutes = (arrivalMinutes < 10) ? '0' + arrivalMinutes : arrivalMinutes;
                        var formattedArrivalTime = arrivalHours + ':' + arrivalMinutes;

                        document.getElementById('estimated_arrival_time').innerHTML = formattedArrivalTime;

                        var r_name = 'record_' + shifted_coordinates_array[0].id;
                        document.getElementById(r_name).classList.add('active');

                        document.getElementById('destination_name').innerHTML = shifted_coordinates_array[0].name;

                        var ac_image = document.getElementById('image_' + shifted_coordinates_array[0].id).src;
                        document.getElementById('attraction_image').src = ac_image;
                        //document.getElementById('next_address_invisible').innerHTML = response.routes[0].legs[0].end_address;
                    }
                })
            initial_instruction_points = [];
            projected_instructions = [];
            instructions_set = false;
            audio_loaded = false;

        }

        function invisible_previous() {
            var lastElement = shifted_coordinates_array.pop();
            shifted_coordinates_array.unshift(lastElement);

            previous_location_point = shifted_coordinates_array[0].coordinates;
            next_location_point = shifted_coordinates_array[1].coordinates;

            previous_audio = shifted_coordinates_array[0].audio;
            next_audio = shifted_coordinates_array[1].audio;

            var narr = previous_location_point.split(',');

            var directionsService_invisible = new google.maps.DirectionsService;

            start = new google.maps.LatLng(userLocation.lat, userLocation.lng);
            end = new google.maps.LatLng(narr[0], narr[1]);


            directionsService_invisible.route({
                    origin: start,
                    destination: end,
                    travelMode: 'WALKING',
                    avoidFerries: true,
                    avoidHighways: true,
                    avoidTolls: true,
                }
                , function (response, status) {
                    if (status === 'OK') {

                        console.log(response);
                        active_route_n = response;
                        active_route_instructions = [];
                        var step_instr = active_route_n.routes[0].legs[0].steps;
                        for (let j = 0; j < step_instr.length; j++) {

                            active_route_instructions.push({
                                'start': step_instr[j].start_location,
                                'end': step_instr[j].end_location,
                                'instructions': step_instr[j].instructions,
                                'distance': step_instr[j].distance.text,
                                'duration': step_instr[j].duration.text
                            });

                        }

                        document.getElementById('next_time_invisible').innerHTML = response.routes[0].legs[0].duration.text;
                        if (document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id) != null) {
                           // document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = response.routes[0].legs[0].duration.text;
                           // document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = Math.ceil(parseInt(response.routes[0].legs[0].duration.value)/60);

                        }

                        document.getElementById('next_distance_invisible').innerHTML = response.routes[0].legs[0].distance.text;

                        var currentTime = new Date();
                        var secondsToAdd = response.routes[0].legs[0].duration.value;
                        var arrivalTime = new Date(currentTime.getTime() + secondsToAdd * 1000);

                        var arrivalHours = arrivalTime.getHours();
                        var arrivalMinutes = arrivalTime.getMinutes();
                        arrivalHours = (arrivalHours < 10) ? '0' + arrivalHours : arrivalHours;
                        arrivalMinutes = (arrivalMinutes < 10) ? '0' + arrivalMinutes : arrivalMinutes;
                        var formattedArrivalTime = arrivalHours + ':' + arrivalMinutes;


                        document.getElementById('estimated_arrival_time').innerHTML = formattedArrivalTime;

                        document.getElementById('destination_name').innerHTML = shifted_coordinates_array[0].name;

                        // document.getElementById('next_address_invisible').innerHTML = response.routes[0].legs[0].end_address;
                    }
                })
            initial_instruction_points = [];
            projected_instructions = [];
            instructions_set = false;
            audio_loaded = false;
        }

        function next_destination() {
            var pre_end;

            var user_ini_num;

            numbered_markers_created = true;

            for (var i = 0; i < directionsDisplay_array.length; i++) {
                //directionsDisplay_array[i].set('map', null);

                if (directionsDisplay_array[i].polylineOptions.strokeColor === '#7c7cfe') {
                    user_ini_num = i;

                    var pdirs = directionsDisplay_array[i].getDirections();
                    pre_end = pdirs.routes[0].legs[0].end_location;

                    directionsDisplay_array[i].set('map', null);
                    directionsDisplay_array[i] = null;

                    directionsDisplay_array[i] = new google.maps.DirectionsRenderer({
                        map: map,
                        draggable: false,
                    });

                    directionsDisplay_array[i].setOptions({
                        preserveViewport: true,
                        suppressMarkers: true,
                        polylineOptions: {
                            strokeColor: 'orange',
                            strokeOpacity: 1,
                            strokeWeight: 5,
                            zIndex: 1
                        }
                    });
                    directionsDisplay_array[i].setDirections(pdirs);
                }
            }
            if (!user_initial_route_deleted) {
                directionsDisplay_array[user_ini_num].set('map', null);
                directionsDisplay_array[user_ini_num] = null;

                directionsDisplay_array.splice(user_ini_num, 1);
                user_initial_route_deleted = true;
            }

            for (var ii = 0; ii < directionsDisplay_array.length; ii++) {

                if (directionsDisplay_array[ii].directions.routes[0].legs[0].start_location.lat() === pre_end.lat() && directionsDisplay_array[ii].directions.routes[0].legs[0].start_location.lng() === pre_end.lng()) {
                    var pdirss = directionsDisplay_array[ii].getDirections();

                    directionsDisplay_array[ii].set('map', null);
                    directionsDisplay_array[ii] = null;

                    directionsDisplay_array[ii] = new google.maps.DirectionsRenderer({
                        map: map,
                        draggable: false,
                    });

                    directionsDisplay_array[ii].setOptions({
                        preserveViewport: true,
                        suppressMarkers: true,
                        polylineOptions: {
                            strokeColor: '#7c7cfe',
                            strokeOpacity: 1,
                            strokeWeight: 5,
                            zIndex: 1
                        }
                    });
                    directionsDisplay_array[ii].setDirections(pdirss);

                }

            }
        }

        function previous_destination() {
            numbered_markers_created = true;

            for (var i = 0; i < directionsDisplay_array.length; i++) {
                directionsDisplay_array[i].set('map', null);
            }

            directionsDisplay_array = [];

            var lastElement = shifted_coordinates_array.pop();
            shifted_coordinates_array.unshift(lastElement);

            previous_location_point = shifted_coordinates_array[0].coordinates;
            next_location_point = shifted_coordinates_array[1].coordinates;

            previous_audio = shifted_coordinates_array[0].audio;
            next_audio = shifted_coordinates_array[1].audio;

            var parr = previous_location_point.split(',');
            var narr = next_location_point.split(',');
            var previous_distance = haversineDistance(userLocation['lat'], userLocation['lng'], parr[0], parr[1]);
            var next_distance = haversineDistance(userLocation['lat'], userLocation['lng'], narr[0], narr[1]);

            for (let i = 0; i < coordinates_array.length; i++) {

                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer({
                    map: map,
                    draggable: false,
                });
                var arr2 = [];
                var start;
                var end;

                var arr = coordinates_array[i].coordinates.split(',');
                var shifted_arr = shifted_coordinates_array[0].coordinates.split(',');
                var shifted_start = new google.maps.LatLng(shifted_arr[0], shifted_arr[1]);

                if (i === 0 && coordinates_array.length > 1) {
                    arr2 = coordinates_array[i + 1].coordinates.split(',');
                    start = new google.maps.LatLng(arr[0], arr[1]);
                    end = new google.maps.LatLng(arr2[0], arr2[1]);
                } else if (i !== 0 && i + 1 < coordinates_array.length) {
                    arr2 = coordinates_array[i + 1].coordinates.split(',');
                    start = new google.maps.LatLng(arr[0], arr[1]);
                    end = new google.maps.LatLng(arr2[0], arr2[1]);
                } else if (i + 1 === coordinates_array.length) {
                    arr2 = coordinates_array[0].coordinates.split(',');
                    start = new google.maps.LatLng(arr[0], arr[1]);
                    end = new google.maps.LatLng(arr2[0], arr2[1]);
                }

                calculateAndDisplayRoute(directionsService, directionsDisplay, start, end, map, i.toString(), coordinates_array.length, shifted_start, true);
            }
        }

        function newLocation() {

            var userDirection;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    userLocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    bounds.extend(new google.maps.LatLng(userLocation.lat, userLocation.lng));
                    map.fitBounds(bounds);
                    navigator.geolocation.watchPosition(position => {

                        userLocation = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };

                    })

                    user_marker = new google.maps.Marker({

                        icon: {
                            fillColor: '#252158',
                            fillOpacity: 1,

                            anchor: new google.maps.Point(23, 25),
                            //path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                            path: 'm23.17,27.62c-.08,0-.14.05-.2.09-.98.6-1.82,1.19-2.8,1.79-1.33.82-2.67,1.64-4,2.46-.07.04-.14.16-.22.1-.05-.04.04-.15.07-.22.6-1.48,1.19-2.95,1.79-4.43.96-2.38,1.92-4.76,2.88-7.14.67-1.68,1.34-3.35,2.01-5.03.12-.31.25-.61.38-.91.01-.03.01-.08.06-.08.04,0,.05.05.06.08,1.41,3.29,2.82,6.58,4.24,9.87,1.07,2.49,2.14,4.97,3.2,7.46.04.08.14.18.07.26-.03.03-.15-.08-.23-.13-1.45-.81-2.86-1.68-4.29-2.51-.94-.54-2.01-1.07-2.95-1.61-.03-.02-.07-.03-.09-.05Z',


                            // anchor: new google.maps.Point(0, 2),
                            //path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                           // path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                            rotation: 40,
                            //scale: 6,
                            scale: 2,
                            strokeColor: 'white',
                            strokeWeight: 2,

                        },
                        position: userLocation,
                        map: map,
                        title: 'Your Location'
                    });



                    coordinates_array = {!! json_encode($coords) !!};

                    var ini = coordinates_array[0].coordinates.split(',');

                    setTimeout(function () {
                        // if (haversineDistance(userLocation.lat, userLocation.lng, ini[0], ini[1]) > 50000) {
                        
                        var adirectionsService = new google.maps.DirectionsService;

                        adirectionsService.route({
                                origin: new google.maps.LatLng(userLocation.lat, userLocation.lng),
                                destination: new google.maps.LatLng(ini[0], ini[1]),
                                travelMode: 'WALKING',
                                avoidFerries: true,
                                avoidHighways: true,
                                avoidTolls: true,
                            }
                            , function (response, status) {
                                if (status === 'OK') {
                                    active_route_n = response;
                                    active_route_instructions = [];
                                    var step_instr = active_route_n.routes[0].legs[0].steps;
                                    for (let j = 0; j < step_instr.length; j++) {

                                        active_route_instructions.push({
                                            'start': step_instr[j].start_location,
                                            'end': step_instr[j].end_location,
                                            'instructions': step_instr[j].instructions,
                                            'distance': step_instr[j].distance.text,
                                            'duration': step_instr[j].duration.text
                                        });

                                    }


                                    document.getElementById('next_time_invisible').innerHTML = response.routes[0].legs[0].duration.text;
                                    if (document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id) != null) {
                                       // document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = response.routes[0].legs[0].duration.text;
                                       // document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = Math.ceil(parseInt(response.routes[0].legs[0].duration.value)/60);

                                    }

                                    document.getElementById('next_distance_invisible').innerHTML = response.routes[0].legs[0].distance.text;


                                    var currentTime = new Date();
                                    var secondsToAdd = response.routes[0].legs[0].duration.value;
                                    var arrivalTime = new Date(currentTime.getTime() + secondsToAdd * 1000);

                                    var arrivalHours = arrivalTime.getHours();
                                    var arrivalMinutes = arrivalTime.getMinutes();
                                    arrivalHours = (arrivalHours < 10) ? '0' + arrivalHours : arrivalHours;
                                    arrivalMinutes = (arrivalMinutes < 10) ? '0' + arrivalMinutes : arrivalMinutes;
                                    var formattedArrivalTime = arrivalHours + ':' + arrivalMinutes;

                                    document.getElementById('estimated_arrival_time').innerHTML = formattedArrivalTime;

                                    document.getElementById('destination_name').innerHTML = coordinates_array[0].name;
                                    var ac_image = document.getElementById('image_' + shifted_coordinates_array[0].id).src;
                                    document.getElementById('attraction_image').src = ac_image;

                                    document.getElementById('start_button').hidden = false;

                                } else {
                                    window.alert('Directions request failed due to ' + status);
                                }
                            });
                        
                    }, 100);
                    // map.setCenter(new google.maps.LatLng(userLocation));
                }, function () {

                    alert('Error: The Geolocation service failed.');
                }, {enableHighAccuracy: true});

            } else {

                alert('Error: Your browser does not support Geolocation.');
            }
        }

        function haversineDistance(lat1, lon1, lat2, lon2) {
            var R = 6371;

            var dLat = (lat2 - lat1) * Math.PI / 180;
            var dLon = (lon2 - lon1) * Math.PI / 180;

            var a =
                Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                Math.sin(dLon / 2) * Math.sin(dLon / 2);

            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            var distance = R * c * 1000; // Distance in kilometers

            return distance;
        }

        google.maps.event.addDomListener(window, 'load', initialize);
                var lastOrientationTime = 0;

        function handleOrientation(event) {

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    userLocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    navigator.geolocation.watchPosition(position => {

                        userLocation = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };

                    })

                }, null, {enableHighAccuracy: true});
            }

            var orientationDelay = 100;

            var currentTime = Date.now();
            if (currentTime - lastOrientationTime >= orientationDelay) {
                var alpha = event.alpha; // Rotation around the z-axis (in degrees)
                var beta = event.beta; // Rotation around the x-axis (in degrees)
                var gamma = event.gamma; // Rotation around the y-axis (in degrees)

                if (map && !isNaN(alpha) && !isNaN(beta) && !isNaN(gamma)) {
                    var heading = 360 - alpha; // Compass heading

                    if (user_marker == null) {
                        user_marker = new google.maps.Marker({

                            icon: {
                                fillColor: '#252158',
                                fillOpacity: 1,
                                // anchor: new google.maps.Point(0, 2),
                                // path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

                                anchor: new google.maps.Point(23, 25),
                                //path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                                path: 'm23.17,27.62c-.08,0-.14.05-.2.09-.98.6-1.82,1.19-2.8,1.79-1.33.82-2.67,1.64-4,2.46-.07.04-.14.16-.22.1-.05-.04.04-.15.07-.22.6-1.48,1.19-2.95,1.79-4.43.96-2.38,1.92-4.76,2.88-7.14.67-1.68,1.34-3.35,2.01-5.03.12-.31.25-.61.38-.91.01-.03.01-.08.06-.08.04,0,.05.05.06.08,1.41,3.29,2.82,6.58,4.24,9.87,1.07,2.49,2.14,4.97,3.2,7.46.04.08.14.18.07.26-.03.03-.15-.08-.23-.13-1.45-.81-2.86-1.68-4.29-2.51-.94-.54-2.01-1.07-2.95-1.61-.03-.02-.07-.03-.09-.05Z',

                                rotation: 40,
                               // scale: 6,
                                scale: 2,
                                strokeColor: 'white',
                                strokeWeight: 2,

                            },
                            position: userLocation,
                            map: map,
                            title: 'Your Location'
                        });
                    }

                    if (user_marker != null) {

                        if (guide_activated) {
                            user_marker.setIcon({
                               // anchor: new google.maps.Point(0, 2),
                                anchor: new google.maps.Point(23, 25),
                                 //path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                                path: 'm23.17,27.62c-.08,0-.14.05-.2.09-.98.6-1.82,1.19-2.8,1.79-1.33.82-2.67,1.64-4,2.46-.07.04-.14.16-.22.1-.05-.04.04-.15.07-.22.6-1.48,1.19-2.95,1.79-4.43.96-2.38,1.92-4.76,2.88-7.14.67-1.68,1.34-3.35,2.01-5.03.12-.31.25-.61.38-.91.01-.03.01-.08.06-.08.04,0,.05.05.06.08,1.41,3.29,2.82,6.58,4.24,9.87,1.07,2.49,2.14,4.97,3.2,7.46.04.08.14.18.07.26-.03.03-.15-.08-.23-.13-1.45-.81-2.86-1.68-4.29-2.51-.94-.54-2.01-1.07-2.95-1.61-.03-.02-.07-.03-.09-.05Z',
                              //  path:'',
                                fillColor: '#252158',
                                fillOpacity: 1,
                                strokeWeight: 2,
                                scale: 2,
                                 rotation: heading - map.getHeading(), // Set the rotation angle

                            });

                            document.getElementById('recalibration_button').hidden = true;
                        } else {
                            user_marker.setIcon({
                                anchor: new google.maps.Point(23, 25),
                                 //path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                                path: 'm23.17,27.62c-.08,0-.14.05-.2.09-.98.6-1.82,1.19-2.8,1.79-1.33.82-2.67,1.64-4,2.46-.07.04-.14.16-.22.1-.05-.04.04-.15.07-.22.6-1.48,1.19-2.95,1.79-4.43.96-2.38,1.92-4.76,2.88-7.14.67-1.68,1.34-3.35,2.01-5.03.12-.31.25-.61.38-.91.01-.03.01-.08.06-.08.04,0,.05.05.06.08,1.41,3.29,2.82,6.58,4.24,9.87,1.07,2.49,2.14,4.97,3.2,7.46.04.08.14.18.07.26-.03.03-.15-.08-.23-.13-1.45-.81-2.86-1.68-4.29-2.51-.94-.54-2.01-1.07-2.95-1.61-.03-.02-.07-.03-.09-.05Z',
                                fillColor: '#252158',
                               // url:'/public/images/arrow-in-circle.svg',
                                fillOpacity: 1,
                                strokeWeight: 2,
                                scale: 2,
                                rotation: heading - map.getHeading(),
                                //rotation: heading, // Set the rotation angle

                            });
                            if (renderer != null) {
                                document.getElementById('recalibration_button').hidden = false;
                            }
                        }

                        user_marker.setPosition(userLocation);

                        if (renderer != null) {

                            for (var g = 0; g < active_route_instructions.length; g++) {
                                if (haversineDistance(userLocation.lat, userLocation.lng, active_route_instructions[g].start.lat(), active_route_instructions[g].start.lng()) < 20) {
                                    document.getElementById('instruction_distance').innerHTML = active_route_instructions[g].distance;
                                    // document.getElementById('instruction_duration').innerHTML = active_route_instructions[g].duration;
                                    document.getElementById('instruction_information').innerHTML = active_route_instructions[g].instructions;
                                }

                            }

                            if (haversineDistance(userLocation.lat, userLocation.lng, active_route_n.routes[0].legs[0].end_location.lat(), active_route_n.routes[0].legs[0].end_location.lng()) < 5) {

                                document.getElementById('instruction_distance').innerHTML = '';
                                document.getElementById('instruction_information').innerHTML = 'Destination Reached';

                                var r_name = 'record_' + shifted_coordinates_array[0].id;
                                document.getElementById(r_name).classList.add('completed');

                                var w_name = 'waveform_' + shifted_coordinates_array[0].id;

                                if (document.getElementById(w_name) === null) {
                                    show_correct_modal();
                                    //$('#guide_modal').modal('show');
                                } else {
                                    document.getElementById('play_'+shifted_coordinates_array[0].id).classList.add('play');
                                    audios[shifted_coordinates_array[0].id].play();

                                }

                            }


                            var  actual_location_point = shifted_coordinates_array[0].coordinates;
                            var narr = actual_location_point.split(',');
                            if (haversineDistance(userLocation.lat, userLocation.lng, narr[0], narr[1]) < 5) {

                                document.getElementById('instruction_distance').innerHTML = '';
                                //document.getElementById('instruction_duration').innerHTML = '';
                                document.getElementById('instruction_information').innerHTML = 'Destination Reached';

                                var r_name = 'record_' + shifted_coordinates_array[0].id;
                                document.getElementById(r_name).classList.add('completed');

                                var w_name = 'waveform_' + shifted_coordinates_array[0].id;

                                //console.log(document.getElementById(w_name));
                                if (document.getElementById(w_name) === null) {
                                    show_correct_modal();
                                    //$('#guide_modal').modal('show');
                                } else {
                                    document.getElementById('play_'+shifted_coordinates_array[0].id).classList.add('play');
                                    //console.log( audios[shifted_coordinates_array[0].id]);
                                    audios[shifted_coordinates_array[0].id].play();

                                }

                            }


                        }

                    }

                    if (guide_activated && renderer != null) {
                        // to calibrate the map

                        var cameraOptions = {
                            tilt: 65,
                            heading: heading,
                            zoom: 16,
                            center: {lat: userLocation.lat, lng: userLocation.lng},
                        };
                        map.moveCamera(cameraOptions);
                        map.panBy(0, -100);

                    }

                    document.getElementById("map-canvas").addEventListener('touchstart', function (event) {
                        if (event.touches.length === 2) {
                            guide_activated = false;
                        }
                    });

                }
                lastOrientationTime = currentTime;
            }
        }

        function Give_Directions() {

            var dstart = new google.maps.LatLng(userLocation['lat'], userLocation['lng']);
            map.setCenter(dstart);

            var cameraOptions = {
                tilt: 0,
                heading: 0,
                zoom: 3,
                center: {lat: userLocation['lat'], lng: userLocation['lng']},
            };

            var ttt = new TWEEN.Tween(cameraOptions)
                .to({tilt: 65, heading: 90, zoom: 20}, 3000)
                .easing(TWEEN.Easing.Quadratic.InOut)
                .onUpdate(() => {
                    map.moveCamera(cameraOptions);
                })
                .start();

            function animate(time) {
                ttt.update(time)
                requestAnimationFrame(animate)
            }

            requestAnimationFrame(animate)

            guide_activated = true;

        }

        function next_destination_instructions() {

            document.getElementById('panel').innerHTML = "";
            document.getElementById('next_dest').hidden = true;

            next_destination();
            setTimeout(set_dest, 500);
            //  set_dest();
        }

        function set_dest() {

            if (dService == null) {
                dService = new google.maps.DirectionsService;
                console.log('initiate dir service');
            } else {
                console.log('already initiated the service');
            }

            if (d_directions == null) {
                console.log('initiate renderer');
                d_directions = new google.maps.DirectionsRenderer({
                    map: map,
                    draggable: false,
                });

                d_directions.setOptions({
                    preserveViewport: true,
                    suppressMarkers: true,
                    polylineOptions: {
                        strokeColor: 'green',
                        strokeOpacity: 1,
                        strokeWeight: 7,
                        zIndex: 2
                    }
                });
            } else {
                console.log(' renderer exists');
            }

            var dstart = new google.maps.LatLng(userLocation['lat'], userLocation['lng']);

            dService.route({
                    origin: dstart,
                    destination: active_route[0].end_location,
                    travelMode: 'WALKING',
                    avoidFerries: true,
                    avoidHighways: true,
                    avoidTolls: true,
                }
                , function (response, status) {
                    if (status === 'OK') {
                        d_directions.setDirections(response);
                        d_directions.setOptions({
                            preserveViewport: true,
                            suppressMarkers: true,
                            polylineOptions: {
                                strokeColor: 'red',
                                strokeOpacity: 1,
                                strokeWeight: 8,
                                zIndex: 3
                            }
                        });

                        var dirs = d_directions.getDirections();
                        var rpos = dirs.routes[0].legs[0];
                        var stepss = dirs.routes[0].legs[0].steps;
                        for (let j = 0; j < stepss.length; j++) {
                            if (!instructions_set) {
                                initial_instruction_points.push({
                                    'start': stepss[j].start_location,
                                    'end': stepss[j].end_location,
                                    'instructions': stepss[j].instructions
                                });

                            }
                        }
                        instructions_set = true;

                        for (let k = 0; k < initial_instruction_points.length; k++) {

                            if (haversineDistance(d_directions.directions.routes[0].legs[0].start_location.lat(), d_directions.directions.routes[0].legs[0].start_location.lng(), initial_instruction_points[k].start.lat(), initial_instruction_points[k].start.lng()) < 3) {

                                if (!projected_instructions.includes(k)) {
                                    document.getElementById('panel').innerHTML += initial_instruction_points[k].instructions;
                                    document.getElementById('panel').innerHTML += '<br>';

                                    projected_instructions.push(k);
                                }

                            }

                            if (haversineDistance(d_directions.directions.routes[0].legs[0].start_location.lat(), d_directions.directions.routes[0].legs[0].start_location.lng(), d_directions.directions.routes[0].legs[0].end_location.lat(), d_directions.directions.routes[0].legs[0].end_location.lng()) < 3) {

                                if (!audio_loaded) {
                                    document.getElementById('panel').innerHTML += 'congrats !!!!!!!!!!!';
                                    document.getElementById("audio_source").src = '{{asset('/public/uploads/attractions/audios/') .'/'}}' + next_audio;
                                    document.getElementById("audio_file").load();
                                    document.getElementById("audio_file").play();
                                    audio_loaded = true;
                                }
                            }
                        }
                    }
                });

            set_center();
        }

        function set_center() {
            // map.setCenter(userLocation);
            map.setTilt(65);
        }

        function draw_active_route() {
            if (renderer != null) {
                renderer.setMap(null);
                renderer = null;
            }

            renderer = new google.maps.DirectionsRenderer({
                map: map,
                draggable: false,
            });
            renderer.setOptions({
                preserveViewport: true,
                suppressMarkers: true,
                polylineOptions: {
                    strokeColor: '#7c7cfe',
                    strokeOpacity: 1,
                    strokeWeight: 8,
                    zIndex: 3
                }
            });
            renderer.setDirections(active_route_n);
            guide_activated = true;

            var r_name = 'record_' + shifted_coordinates_array[0].id;
            document.getElementById('map_popup_div').hidden = false;
            document.getElementById('instruction_information').innerHTML = '{{translate('Follow the Route')}}';




            var mark = markers[shifted_coordinates_array[0].id];


            const glyphImg2 = document.createElement('div');
            glyphImg2.classList.add('marker_guide_active');
            glyphImg2.innerHTML = shifted_coordinates_array[0].id;

            var pinBorder = new google.maps.marker.PinElement({
                background: '#C29C65',
                borderColor: '#C29C65',
                glyph: glyphImg2,

            });

            mark.content = pinBorder.element;











            document.getElementById(r_name).classList.add('active');
            document.getElementById('start_button').hidden = true;
            $('.map-popup-routes').addClass('closed');
            scrollToRoutes();
        }

        function stop_guide() {

            document.getElementById('map_popup_div').hidden = true;
            document.getElementById('recalibration_button').hidden = true;
            var cameraOptions = {
                tilt: 0,
                center: {lat: userLocation.lat, lng: userLocation.lng},
            };
            map.moveCamera(cameraOptions);

            bounds = new google.maps.LatLngBounds();
            for (var l = 0; l < stable_bounds.length; l++) {
                bounds.extend(stable_bounds[l]);
            }
            bounds.extend(new google.maps.LatLng(userLocation.lat, userLocation.lng));
            map.fitBounds(bounds);
            guide_activated = false;

            if (renderer != null) {
                renderer.setMap(null);
                renderer = null;
            }

            var directionsService_invisible = new google.maps.DirectionsService;

            start = new google.maps.LatLng(userLocation.lat, userLocation.lng);
            end = new google.maps.LatLng(active_route_n.routes[0].legs[0].end_location.lat(), active_route_n.routes[0].legs[0].end_location.lng());

            directionsService_invisible.route({
                    origin: start,
                    destination: end,
                    travelMode: 'WALKING',
                    avoidFerries: true,
                    avoidHighways: true,
                    avoidTolls: true,
                }
                , function (response, status) {
                    if (status === 'OK') {

                        console.log(response);
                        active_route_n = response;
                        active_route_instructions = [];
                        var step_instr = active_route_n.routes[0].legs[0].steps;
                        for (let j = 0; j < step_instr.length; j++) {

                            active_route_instructions.push({
                                'start': step_instr[j].start_location,
                                'end': step_instr[j].end_location,
                                'instructions': step_instr[j].instructions,
                                'distance': step_instr[j].distance.text,
                                'duration': step_instr[j].duration.text
                            });
                        }
                        document.getElementById('next_time_invisible').innerHTML = response.routes[0].legs[0].duration.text;
                        if (document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id) != null) {
                            document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = response.routes[0].legs[0].duration.text;
                           // document.getElementById('next_time_invisible_sound_' + shifted_coordinates_array[0].id).innerHTML = Math.ceil(parseInt(response.routes[0].legs[0].duration.value)/60);

                        }

                        document.getElementById('next_distance_invisible').innerHTML = response.routes[0].legs[0].distance.text;

                        var currentTime = new Date();
                        var secondsToAdd = response.routes[0].legs[0].duration.value;
                        var arrivalTime = new Date(currentTime.getTime() + secondsToAdd * 1000);

                        var arrivalHours = arrivalTime.getHours();
                        var arrivalMinutes = arrivalTime.getMinutes();
                        arrivalHours = (arrivalHours < 10) ? '0' + arrivalHours : arrivalHours;
                        arrivalMinutes = (arrivalMinutes < 10) ? '0' + arrivalMinutes : arrivalMinutes;
                        var formattedArrivalTime = arrivalHours + ':' + arrivalMinutes;

                        document.getElementById('estimated_arrival_time').innerHTML = formattedArrivalTime;
                        document.getElementById('destination_name').innerHTML = shifted_coordinates_array[0].name;

                        //document.getElementById('next_address_invisible').innerHTML = response.routes[0].legs[0].end_address;
                    }
                });
            // document.getElementById('destination_panel').hidden = false;
            document.getElementById('start_button').hidden = false;
        }

        function recalibrate() {
            guide_activated = true;
        }

        function show_audio_modal() {
            $('#audio_modal').modal('show');
        }

        document.getElementById('audio_play_button').addEventListener('click', function () {
            proper_hide_audio = true;
            document.getElementById("audio_source").src = '{{asset('/public/uploads/attractions/audios/') .'/'}}' + previous_audio;
            document.getElementById("audio_file").load();
            document.getElementById("audio_file").play();
            audio_loaded = true;
            $('#audio_modal').modal('hide');
        });
        document.getElementById('audio_close_button').addEventListener('click', function () {
            proper_hide_audio = true;
            $('#guide_modal').modal('show');
            $('#audio_modal').modal('hide');
        })
        document.getElementById('audio_close_button_top').addEventListener('click', function () {
            proper_hide_audio = true;
            $('#guide_modal').modal('show');
            $('#audio_modal').modal('hide');

        });

        function google_map_redirect() {
            var ini = coordinates_array[0].coordinates.split(',');
            var latitude = ini[0];
            var longitude = ini[1];
            var googleMapsUrl = 'https://www.google.com/maps/dir/?api=1&destination=' + latitude + ',' + longitude;
            window.open(googleMapsUrl, '_blank');
        }


        function show_correct_modal(){
            var end_reached= true;

            for(var i=0;i<shifted_coordinates_array.length;i++){
                if(!document.getElementById('record_'+shifted_coordinates_array[i].id).classList.contains('completed')){
                    end_reached = false
                }
            }

            if(end_reached){
                $('#end_modal').modal('show');
            }
            else{
                $('#guide_modal').modal('show');
            }
        }

    </script>

@endsection