@php
$layout = (isSeller()) ? 'layouts.seller' : 'layouts.admin';
@endphp
@extends($layout)
@section('content')
<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>{!! __('heatmap.title') !!}</p>
        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    @php
                        $routeDashboard = (isSeller() > 0) ? route('seller.dashboard', getStoreSlug()) : route('admin.dashboard');
                    @endphp
                    <li class="breadcrumb-item"><a href="{{ $routeDashboard }}">{{ __('common.home')}}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{!! __('heatmap.title') !!}</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    @include('layouts.partials.messages')
    <div class="row">
        <div class="col-12">
            <div class="round-white-bg box-shadow">
                <div class="row px-3">
                    {!! Form::open(array('route' => $route, 'method' => 'GET', 'class'=>'filter_form mobile_filter px-2 col-md-12')) !!}
                    <div class="row filters_list">
                        <div class="col-md-3 filters">
                            <div class="form-group custom-input-group custom-input-group-small date-form-control">
                                {!! Form::label("date", __('report.date') ,['class' => 'first-column']) !!}
                                <div class="order_dt_picker_range"
                                    style="background: #fff; cursor: pointer; padding: 8px 6px; border: 1px solid #ccc; width: 100%;height: 40px;">
                                </div>
                                {!! Form::hidden('from_date', isset($_GET['from_date'])?dateFormat($_GET['from_date'], SHOW_DATE) : '', ['id' => 'from_date']) !!}
                                {!! Form::hidden('to_date', isset($_GET['to_date'])?dateFormat($_GET['to_date'], SHOW_DATE) : '', ['id' => 'to_date']) !!}
                            </div>
                        </div>

                        <div class="col-md-3 filters">
                            {!! Form::label("store_ids", __('report.store'),['class' => 'first-column']) !!}
                            {!! Form::select('store_ids[]', $stores, (isset($inputs['store_ids'])?$inputs['store_ids']:[]), [
                                'class'=>'form-control select2 second-column', 'id' => 'store_ids', 'multiple' => true,
                                'data-actions-box'=>'true', 'data-width'=>'100%'
                            ]) !!}
                        </div>

                        <div class="col-md-2 filters">
                            {!! Form::label("order_from", __('report.platform'),['class' => 'first-column']) !!}
                            {!! Form::select('order_from[]', orderFrom(), (isset($inputs['order_from'])?$inputs['order_from']:''), ['class'=>'form-control select2 second-column','multiple' => true]) !!}
                        </div>

                        <div class="col-md-3 filters __filter_actions d-flex">
                            {{--<div class="__filter_actions">--}}
                                {!! Form::hidden('filter', 1) !!}
                                {!! Form::submit(__('orders.search'), ['class'=>'btn btn-primary btn_sub search-btn']) !!}
                                <a href="{{ route( $route ) }}" class="btn btn-primary ml-1 reset-btn">{!! __('orders.reset') !!}</a>
                            {{--</div>--}}
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
                <div class="row mt-2">
                    <div class="col-12">
                      <div id="map" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="https://maps.googleapis.com/maps/api/js?key={!! config('constants.GOOGLE_MAP_KEY') !!}&libraries=visualization"></script>
<script>
  let map, heatmap;
  let bounds = new google.maps.LatLngBounds();

  const mapStyle = [
    {
      elementType: "geometry",
      stylers: [{ color: "#f5f5f5" }],
    },
    {
      elementType: "labels.icon",
      stylers: [{ visibility: "off" }],
    },
    {
      elementType: "labels.text.fill",
      stylers: [{ color: "#616161" }],
    },
    {
      elementType: "labels.text.stroke",
      stylers: [{ color: "#f5f5f5" }],
    },
    {
      featureType: "administrative.land_parcel",
      elementType: "labels.text.fill",
      stylers: [{ color: "#bdbdbd" }],
    },
    {
      featureType: "poi",
      elementType: "geometry",
      stylers: [{ color: "#eeeeee" }],
    },
    {
      featureType: "poi",
      elementType: "labels.text.fill",
      stylers: [{ color: "#757575" }],
    },
    {
      featureType: "poi.park",
      elementType: "geometry",
      stylers: [{ color: "#e5e5e5" }],
    },
    {
      featureType: "poi.park",
      elementType: "labels.text.fill",
      stylers: [{ color: "#9e9e9e" }],
    },
    {
      featureType: "road",
      elementType: "geometry",
      stylers: [{ color: "#ffffff" }],
    },
    {
      featureType: "road.arterial",
      elementType: "labels.text.fill",
      stylers: [{ color: "#757575" }],
    },
    {
      featureType: "road.highway",
      elementType: "geometry",
      stylers: [{ color: "#dadada" }],
    },
    {
      featureType: "road.highway",
      elementType: "labels.text.fill",
      stylers: [{ color: "#616161" }],
    },
    {
      featureType: "road.local",
      elementType: "labels.text.fill",
      stylers: [{ color: "#9e9e9e" }],
    },
    {
      featureType: "transit.line",
      elementType: "geometry",
      stylers: [{ color: "#e5e5e5" }],
    },
    {
      featureType: "transit.station",
      elementType: "geometry",
      stylers: [{ color: "#eeeeee" }],
    },
    {
      featureType: "water",
      elementType: "geometry",
      stylers: [{ color: "#c9c9c9" }],
    },
    {
      featureType: "water",
      elementType: "labels.text.fill",
      stylers: [{ color: "#9e9e9e" }],
    },
  ];

  function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
      zoom: 13,
      mapTypeId: "roadmap",
    });

    map.setOptions({ styles: mapStyle });

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: getPoints(),
      map: map,
    });

    // heatmap.set("radius", 10);
    heatmap.set("opacity", 0.9);
  }

  let jsonData = {!! json_encode($result) !!}
  // Heatmap data: 500 Points
  var myLatlng = [];
  function getPoints() {
    let points = [];
    if(jsonData.length > 0) {
      for(i=0; i<jsonData.length; i++) {
        let lat = parseFloat(jsonData[i].latitude);
        let lng = parseFloat(jsonData[i].longitude);
        let wgt = parseInt(jsonData[i].total);
        let p = new google.maps.LatLng(lat, lng, wgt);
        myLatlng.push({lat: parseFloat(lat), lng: parseFloat(lng)});
        points.push({location: new google.maps.LatLng(lat, lng), weight: wgt});
        bounds.extend({lat, lng});
      }
    } else {
        let lat = parseFloat('58.969975');
        let lng = parseFloat('5.733107');
        bounds.extend({lat,lng});
        map.setOptions({maxZoom: 5});
    }

    var infowindow = new google.maps.InfoWindow;

    var marker, i;
    var pinIcon = new google.maps.MarkerImage(
        "{!! asset('assets/images/icons/transparent.png') !!}",
        null, /* size is determined at runtime */
        null, /* origin is 0,0 */
        null, /* anchor is bottom center of the scaled image */
        new google.maps.Size(15, 15)
    );

    for (i = 0; i < jsonData.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(jsonData[i].latitude, jsonData[i].longitude),
            map: map,
            icon: pinIcon
        });

        google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
            return function() {
                infowindow.setContent(jsonData[i].store_name);
                infowindow.open(map, marker);
            }
        })(marker, i));

        google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
            return function() {
                infowindow.close();
            }
        })(marker, i));

        marker.setOptions({'opacity': 0.01})
    }

    map.fitBounds(bounds);
    return points;
  }
  google.maps.event.addDomListener(window, "load", initMap);
</script>
@endsection