@extends('layouts.app')

@section('title','Creating the third workspace. View our spaces')

@section('meta')
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{Request::url()}}">
  <meta property="og:title" content="Creating the third workspace. View our spaces">
  <meta property="og:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">
  <meta property="og:description" content="View our Reef spaces.Use the map to view all the spaces you can work from, and see where the upcoming Reef spaces will be next. If we aren't in your area, drop us a message and we will get some onboarded.">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="{{Request::url()}}">
  <meta property="twitter:title" content="Creating the third workspace. View our spaces">
  <meta property="twitter:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">

  <meta property="og:image:width" content="600"/>
  <meta property="og:image:height" content="315"/>

  <meta name="description" content="View our Reef spaces.Use the map to view all the spaces you can work from, and see where the upcoming Reef spaces will be next. If we aren't in your area, drop us a message and we will get some onboarded.">
@endsection

@section('header')
	@include('front.partials.header')
@endsection

@section('content')

<section class="venue-map d-flex flex-wrap flex-column">
    <div id="map" class="map position-relative"></div>
       <!-- Map Page with List View -->
    
       <div class="listing-venues">
        <div class="container">
            <div class="mobile-buttons d-block d-md-none">
                <h1>Our Spaces</h1>
                {{-- <ul class="list-unstyled">
                    <li class="list-inline-item">
                        <a href="#"><button class="btn invert w160 offcanvas-button-mobile removeCanvas">Map View</button></a>
                    </li>

                    <li class="list-inline-item">
                        <button class="btn invert w160 offcanvas-button-mobile" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">List View</button>
                    </li>
                </ul> --}}
                <section class="coral-banner-block-mobile d-block d-md-none">
                    <div class="container-fluid h-100 text-center">
                        <div class="d-flex h-100 align-items-center justify-content-center">
                            <p class="mb-0">Scroll around to see whats near you!</p>
                        </div>
                    </div>
                </section>
            </div>
            
<!---------------------- LIST FOR MOBILE ------------------------------------------>
            <div class="offcanvas offcanvas-end d-block d-md-none"  data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">

                <div class="offcanvas-body">
                    {{-- @foreach($counties as $county)
                        @if(count($county->venues) > 0)
                            <div class="venues-single hideCounty">
                                <p class="h3 mb-0">
                                    <a class="title-main collapsed" data-bs-toggle="collapse" href="#collapseExample{{$loop->iteration}}" role="button" aria-expanded="false" aria-controls="collapseExample{{$loop->iteration}}">{{$county->title}}</a>
                                </p>
                                <div class="collapse" id="collapseExample{{$loop->iteration}}">
                                    <div class="row justify-content-center justify-content-md-start">
                                        <div class="col-8 0ffset-2 col-md-10 offset-md-1">
                                            <div class="position-relative hover w-100">
                                                <a href="#" class="stretched-link">
                                                    <span class="visually-hidden">
                                                        Open Link
                                                    </span>
                                                </a>
                                                @foreach($county->county_cities as $key => $value) 
                                                    @if(count($value->city_venues) != 0)
                                                        <div class="d-flex pb-2 position-relative  flex-row justify-content-between">
                                                            <p class="mb-0 link-green">{{$value->title}}</p>
                                                            <p class="mb-0 link-green">{{count($value->city_venues)}}</p>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach --}}
                </div>
            </div>
            {{-- <button class="btn violet w160 offcanvas-button d-none d-md-block" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">List View</button> --}}
<!--------------------- LIST FOR DESKTOP --------------------------------------------------->
            <div class="offcanvas offcanvas-end d-none d-md-block" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">

                <div class="offcanvas-body">
                    {{-- @foreach($counties as $county)
                        @if(count($county->venues) > 0)
                            <div class="venues-single">
                                <p class="h3 mb-0">
                                    <a class="title-main collapsed" data-bs-toggle="collapse" href="#collapseExample{{$loop->iteration}}" role="button" aria-expanded="false" aria-controls="collapseExample{{$loop->iteration}}">{{$county->title}}</a>
                                </p>
                                <div class="collapse" id="collapseExample{{$loop->iteration}}">
                                    <div class="row justify-content-center justify-content-md-start">
                                        <div class="col-8 0ffset-2 col-md-10 offset-md-1">
                                            <div class="position-relative hover w-100">
                                                <a href="#" class="stretched-link">
                                                    <span class="visually-hidden">
                                                        Open Link
                                                    </span>
                                                </a>
                                            
                                                @foreach($county->county_cities as $key => $value) 
                                                    @if(count($value->city_venues) != 0)
                                                        <div class="d-flex pb-2 position-relative  flex-row justify-content-between"> 
                                                            <p class="mb-0 link-green">{{$value->title}}</p>
                                                            <p class="mb-0 link-green">{{count($value->city_venues)}}</p>
                                                        </div>                                                
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> 
                        @endif   
                    @endforeach               --}}
                </div>
            </div>
        </div>
    </div>
</section>


<section class="coral-banner-block"  id="popUp" style="display: none">
    <div class="container-fluid h-100 text-center">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <p class="mb-0 py-3 f-14">Scroll around to see whats near you!</p>
        </div>
    </div>
</section>

<section class="violet-banner-block">
    <div class="container-fluid h-100 text-center">
        <div class="d-flex h-100 align-items-center justify-content-center">
            @if(isset($page))
                @if($page == 'individuals')
                    <p class="mb-0 py-3 f-14">Want to know where our spaces are in more detail? <a href="{{route('book_your_demo_company')}}"> Request a demo</a> today for your free trial for full access.</p>
                @elseif($page == 'team')
                    <p class="mb-0 py-3 f-14">Want to know where our spaces are in more detail? <a href="{{route('book_your_demo_company')}}"> Request a demo</a> today for your free trial for full access.</p>
                @else
                    <p class="mb-0 py-3 f-14">Want to know where our spaces are in more detail? <a href="{{route('book_your_demo_company')}}"> Request a demo</a> today for your free trial for full access.</p>
                @endif
            @else
                <p class="mb-0 py-3 f-14">Want to know where our spaces are in more detail? <a href="{{route('book_your_demo_company')}}"> Request a demo</a> today for your free trial for full access.</p>
            @endif
        </div>
    </div>
</section>

{{-- <section class="black-bar-block">
    <div class="container text-center py-1 py-lg-1">
        <ul class="list-inline list-mobile-fix mb-0">
            <li class="list-inline-item py-2 align-middle">
                <a href="" class="btn w160 mobile-full green">Join today</a>
            </li>
        </ul>
    </div>
</section> --}}
@endsection


@section('footer')
    @include('front.partials.footer')
</div>
@endsection

@push('scripts')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}" type="text/javascript"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>

    {{-- <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBs5kGfOCny6I3NP4_2LCT40BKkMchGLXA&region=GB&callback=initMap"></script> --}}
    {{-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> --}}


    <script type="text/javascript">
        $(document).ready(function() {
            var legend = $('<div id="legend" class="legend-map"></div>'); 
            const icons = {
                parking: {
                    name: "Reef Host",
                    icon: "/images/black_dot.png"
                },
                library: {
                    name: "Coming soon",
                    icon: "/images/coral_dot.png",
                },
               
            };
            var div_legend = '';
            for (const key in icons) {
                const type = icons[key];
                const name = type.name;
                const icon = type.icon;    
                div_legend = div_legend + '<div class="pb-1 mb-0"><img style="width: 12%;" src="' + icon + '"> ' + name + '</div>';
            }   
            legend.append(div_legend);

            window.mapInit = function(parameter_locations, parameter_locations2, parameter_location_ids, parameter_location_ids2) {

                if(parameter_locations == null && parameter_location_ids == null) {
                    var locations = [
                        @foreach($reef_venues as $comp)
                            ['{{ $comp->venue_name }}', {{ $comp->la }}, {{ $comp->lo }}],
                        @endforeach
                    ];

                    var location_ids = [
                        @foreach($reef_venues as $comp)
                            [{{ $comp->id }}],
                        @endforeach
                    ];

                    var locations2 = [
                        @foreach($upcoming_venues as $comp)
                            ['{{ $comp->venue_name }}', {{ $comp->la }}, {{ $comp->lo }}],
                        @endforeach
                    ];

                    var location_ids2 = [
                        @foreach($upcoming_venues as $comp)
                            [{{ $comp->id }}],
                        @endforeach
                    ];


                } else {
                    var locations = parameter_locations;
                    var location_ids = parameter_location_ids;
                    var locations2 = parameter_locations2;
                    var location_ids2 = parameter_location_ids2;
                }

                var responsiveZoom = (window.innerWidth < 768) ? 11.75 : 12.75;

                var map = new google.maps.Map(document.getElementById('map'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                gestureHandling: "greedy",   
                });
            
                var infowindow = new google.maps.InfoWindow();

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

                var marker, i;

                window.markers_array = [];

                for (i = 0; i < locations.length; i++) {  
                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,           
                    icon: "/images/black_dot.png"
                });

                markers_array.push(marker)

                bounds.extend(marker.position);

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        //info on click on top of marker
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker); 

                    $.ajax({
                            type: "GET",
                            data: {venue_id:location_ids[i][0]},
                            url: "/get-venue-map-data",
                            success: function(data) {
                                $('.info_div_for_map_tag').hide();
                                $('.venue_name_single').text(data.venue.venue_name);
                              
                            },
                            error: function (request, status, error) {
                                alert('oops, something went wrong!');
                            }
                        });


                    }
                })(marker, i));
                }

                for (i = 0; i < locations2.length; i++) {  
                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations2[i][1], locations2[i][2]),
                    map: map,
                    icon: "/images/coral_dot.png",
                    title: "Coming soon",
                });
            
                markers_array.push(marker)

                bounds.extend(marker.position);

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        //info on click on top of marker
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker); 

                    $.ajax({
                            type: "GET",
                            data: {venue_id:location_ids2[i][0]},
                            url: "/get-venue-map-data",
                            success: function(data) {
                                $('.info_div_for_map_tag').hide();
                                $('.venue_name_single').text(data.venue.venue_name);
                               
                            },
                            error: function (request, status, error) {
                                alert('oops, something went wrong!');
                            }
                        });


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

            
                var listenerZ = google.maps.event.addListener(map, "idle", function () {
     
                    // var pt = navigator.geolocation ?  navigator.geolocation.getCurrentPosition((pos) => { myFunction(pos.coords.latitude, pos.coords.longitude) }) :  new google.maps.LatLng(51.5755041,-0.1070598)
                    var pt = new google.maps.LatLng(54.840346,-2.019629); //for london location  , -
                    map.setZoom(6);
                    map.setCenter(pt);
                
                    google.maps.event.removeListener(listenerZ);
                });

                
                // create an array of all your markers
                // const markers = markers_array; 
                map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend[0]);

                // Path for cluster icons to be appended (1.png, 2.png, etc.)
                // const imagePath = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m";
                // const imagePath = '/images/marker';

                // Enable marker clustering for this map and these markers
                // new MarkerClusterer(map, markers, {imagePath: imagePath});
            };     
        });
    </script>


    <script type="text/javascript">
        $(document).ready(function(){
            mapInit();
        });
    </script>
      <script type="text/javascript">
    $('.offcanvas-button-mobile').on('click', function(){
        $(this).siblings().removeClass('active');
        // $(document).find('.offcanvas').toggle();
        if($(document).find('.offcanvas.offcanvas-end').hasClass('show')){
            $(document).find('.offcanvas').hide();
        }else{
              $(document).find('.offcanvas').show();
        }
    });

    $(document).on('click', '.removeCanvas', function(){
        var myOffcanvas = document.getElementById('offcanvasScrolling')
        $(myOffcanvas).offcanvas('hide');
    })
</script>
<script>   
   $( "#popUp" ).show(); 
   setTimeout(function() {
      $( "#popUp" ).hide();
      $('.venue-map .map').css('min-height', 'calc(100vh - 7rem)')
    }, 8000);

    $( "#popUpmobile" ).show(); 
   setTimeout(function() {
      $( "#popUp" ).hide();
    }, 8000);
</script>

@endpush