@extends('eventManagement.layouts.master')
@section('content')
   {{-- {{dd($mapinfo)}} --}}
    <section class="section">
        <ul class="breadcrumb breadcrumb-style ">
            <li class="breadcrumb-item">
                <a href="#">
                    <i data-feather="home"></i>
                </a>
            </li>
            <li class="breadcrumb-item">Map Location</li>
        </ul>
        <div class="section-body">
            <div class="row">

                <div class=" col-sm-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Map Location</h4>
                        </div>
                        <div class="card-body">
                            <div class="py-4">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div id="map" style="width: 100%; height: 300px;"></div> 
                                    </div>
                                    <div class="col-sm-6 mt-2">
                                        @if(!empty($mapinfo->image))
                                          <img src="{{ asset('/uploads/event/location_image/'.$mapinfo->image) }}" alt="Girl in a jacket" style="width: 100%; height: 600px;">
                                        @endif
                                    </div>
                                    <div class="col-sm-6">
                                        {{-- <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> --}}
                                        @if(!empty($mapinfo->video))
                                            <video style="width: 100%; height: 600px;" controls autoplay>
                                                <source src="{{URL::asset('/uploads/event/video/'.$mapinfo->video)}}">
                                            </video>
                                        @endif
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>  
            </div>
        </div>        
    </section>

@endsection
@section('script')
<script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZKJx8TmPHryjGnjWiY8FNjnmLBs4FYpE&callback=initAutocomplete&libraries=places&v=weekly"
      defer
    ></script>
<script>
    function initAutocomplete() {
        var longitude={{$mapinfo->lng}};
        var latitude={{$mapinfo->lat}};
        var address="{{$mapinfo->venue_address}}";
        //alert(address)
        //alert(latitude)
        var latlng = new google.maps.LatLng(latitude,longitude);
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 30
        });
        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            draggable: false,
            anchorPoint: new google.maps.Point(0, -29)
        });
        var infowindow = new google.maps.InfoWindow();   
        google.maps.event.addListener(marker, 'click', function() {
            //var latitude={{$mapinfo->lat}}
            var iwContent = '<div id="iw_container">' +
           '<div class="iw_title"><b>Location</b> :'+address+'</div></div>';
            // including content to the infowindow
            infowindow.setContent(iwContent);
            // opening the infowindow in the current map and at the current marker location
            infowindow.open(map, marker);
        });
    }
</script>

@endsection