@extends('sponsor.layouts.sponsor')
@section('title')
Sponsor | Nearby Events
@endsection

@section('styles')
<style>
     #map {
        height: 400px;  
        width: 100%; 
       }
    .scrollFix {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}
.gm-style-iw {
width: auto; 
height: auto;
/*min-height: 150px;*/
}

@media only screen and (max-width: 600px) {
  .gm-style-iw.gm-style-iw-c {
    max-width: 280px!important;
  }

  .gm-style-iw-d {
      max-width: 100%!important;
  }
}

table { 
    border-collapse: collapse; 
} 
th { 
    background-color:green; 
    Color:white; 
} 
th, td { 
   /*width:150px; */
    text-align:left; 
    border:1px solid black; 
    padding:5px 
  
} 
.geeks { 
    border-right:hidden; 
} 
.gfg { 
    border-collapse:separate; 
    border-spacing:0 15px; 
} 
h1 { 
    color:green; 
}
</style>
@endsection

@section('content')
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Nearby Events</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ route('sponsor.dashboard') }}">Dashborad</a></li>
              <li class="breadcrumb-item"><a href="#">Events</a></li>              
              <li class="breadcrumb-item active">Nearby Events</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
     <section class="content">
      <div class="container-fluid"> 

        @if ($errors->any())            
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row">
          <div class="col-md-10"></div>
          <div class="col-md-2 pb-md-0 pb-lg-2 pb-3">
            <a href="{{ route('sponsor.events.nearbyEvent.cart') }}" class="btn btn-dark col-sm-12 btn-lg btn-flat">
              <i class="fa fa-shopping-cart" aria-hidden="true"></i> 
              Cart(<span class="cart-item-count">{{ $sponsorCartCount??0 }}</span>)
            </a>
          </div>
        </div>
                   
        <div class="row">
          <div class="col-md-12">
            <div id="map" style="height: 800px"></div>
          </div>                   
        </div>

      </div>
    </section>
@endsection

@section('scripts')
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ get_setting('google-api-key') }}&callback=initialize">
</script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
      function initialize() {
        var data = null;
        var event_lat = "{{ $latlong['latitude']??'' }}";
        var event_long = "{{ $latlong['longitude']??'' }}";
        var styledMapType = new google.maps.StyledMapType(
            [
              {elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
              {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
              {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
              {
                featureType: 'administrative',
                elementType: 'geometry.stroke',
                stylers: [{color: '#c9b2a6'}]
              },
              {
                featureType: 'administrative.land_parcel',
                elementType: 'geometry.stroke',
                stylers: [{color: '#dcd2be'}]
              },
              {
                featureType: 'administrative.land_parcel',
                elementType: 'labels.text.fill',
                stylers: [{color: '#ae9e90'}]
              },
              {
                featureType: 'landscape.natural',
                elementType: 'geometry',
                stylers: [{color: '#dfd2ae'}]
              },
              {
                featureType: 'poi',
                elementType: 'geometry',
                stylers: [{color: '#dfd2ae'}]
              },
              {
                featureType: 'poi',
                elementType: 'labels.text.fill',
                stylers: [{color: '#93817c'}]
              },
              {
                featureType: 'poi.park',
                elementType: 'geometry.fill',
                stylers: [{color: '#a5b076'}]
              },
              {
                featureType: 'poi.park',
                elementType: 'labels.text.fill',
                stylers: [{color: '#447530'}]
              },
              {
                featureType: 'road',
                elementType: 'geometry',
                stylers: [{color: '#f5f1e6'}]
              },
              {
                featureType: 'road.arterial',
                elementType: 'geometry',
                stylers: [{color: '#fdfcf8'}]
              },
              {
                featureType: 'road.highway',
                elementType: 'geometry',
                stylers: [{color: '#f8c967'}]
              },
              {
                featureType: 'road.highway',
                elementType: 'geometry.stroke',
                stylers: [{color: '#e9bc62'}]
              },
              {
                featureType: 'road.highway.controlled_access',
                elementType: 'geometry',
                stylers: [{color: '#e98d58'}]
              },
              {
                featureType: 'road.highway.controlled_access',
                elementType: 'geometry.stroke',
                stylers: [{color: '#db8555'}]
              },
              {
                featureType: 'road.local',
                elementType: 'labels.text.fill',
                stylers: [{color: '#806b63'}]
              },
              {
                featureType: 'transit.line',
                elementType: 'geometry',
                stylers: [{color: '#dfd2ae'}]
              },
              {
                featureType: 'transit.line',
                elementType: 'labels.text.fill',
                stylers: [{color: '#8f7d77'}]
              },
              {
                featureType: 'transit.line',
                elementType: 'labels.text.stroke',
                stylers: [{color: '#ebe3cd'}]
              },
              {
                featureType: 'transit.station',
                elementType: 'geometry',
                stylers: [{color: '#dfd2ae'}]
              },
              {
                featureType: 'water',
                elementType: 'geometry.fill',
                stylers: [{color: '#b9d3c2'}]
              },
              {
                featureType: 'water',
                elementType: 'labels.text.fill',
                stylers: [{color: '#92998d'}]
              }
            ],
            {name: 'Styled Map'}
          );

        var map = new google.maps.Map(document.getElementById('map'),{ 
          zoom: 8,
          center: new google.maps.LatLng(event_lat,event_long),
          navigationControl: false,
          mapTypeControl: false,
          scaleControl: false,
          draggable: true,
          panControl: false,
          disableDefaultUI: true,
          mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain','styled_map'] 
         //mapTypeId: google.maps.MapTypeId.TERRAIN         
         });
        map.mapTypes.set('styled_map', styledMapType);
        map.setMapTypeId('styled_map');
        addMarker(map,data);        
      }
google.maps.event.addDomListener(window, 'load', initialize);

function addMarker(ajaxmap,data) {
  //console.log(data); 16,12,1314
  //12,12
  var data;
  var map;
   map=ajaxmap;
  var InforObj = [];
  var eventData=data;
  var markersOnMap=eventData;
  var contentString;
 var arr=new Array();
  var orgnazationArr =new Array();
for(var i = 0; i < data.length; i++){
 
  if (typeof data[i]['organization_id'] != 'undefined') {
    orgnazationArr[data[i]['organization_id']] = '';
    if(data[i]['events']) {      
      var event = '';
       for(var j = 0; j < data[i]['events'].length; j++) {
        event = '<tr>';
        event += '<td><i class="fa fa-calendar" aria-hidden="true"></i>'+'</td>';
        event += '<td>'+data[i]['events'][j]['event_ID']+'</td>';
        event += '<td>'+data[i]['events'][j]['event_date']+'</td>';
        event += '<td width="10%">'+'<a title="Show" href="' + baseUrl + 'sponsor/events/nearbyEvent/showEvent/' + data[i]['events'][j]['event_id']+ '" class="btn btn-warning btn-xs"><i class="fa fa-eye text-dark" aria-hidden="true"></i></a>'+'</td>';
        event += '</tr>';
        orgnazationArr[data[i]['organization_id']] += event;
      }
      orgnazationArr[data[i]['organization_id']] += "<tr><td colspan='4'>"+data[i]['address']+"</td></tr>";
    }    
  }
 
 contentString= "<div class='scrollFix1'><table width='100%' align='left' cellspacing='10'>"+orgnazationArr[data[i]['organization_id']]+"</table></div>"; 
 //console.log(orgnazationArr);
 var position = new google.maps.LatLng(parseFloat(markersOnMap[i].latitude), parseFloat(markersOnMap[i].longitude));
 const marker = new google.maps.Marker({
    position: position,
    map: map,
    icon : {
      url: "