@extends('layout.app')
@section('title') Dashboard @endsection
@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.css">

<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<script src="https://cdn.maptiler.com/ol-mapbox-style/v6.8.3/olms.js"></script>
<link rel="stylesheet" href="{{asset('plugins/daterangepicker/daterangepicker.css')}}">
<link rel="stylesheet" href="{{asset('plugins/ekko-lightbox/ekko-lightbox.css')}}">

<style>
  /* #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;} */
  #map{
    height: 70vh;
  }

  .ol-attribution.ol-unselectable.ol-control.ol-collapsed{
    display: none !important; 
  }
  
</style>
@endpush
@section('content')
   <!-- Content Header (Page header) -->
   <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0">Track Locations</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Dashboard v3</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <div class="content">
    <div class="container-fluid">
      <div class="card">
        <div class="card-header d-flex">
            <form action="{{request()->url()}}" method="GET" class="d-flex">
                <div class="input-group mr-2" style="width:20vw;" >
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                             <i class="far fa-calendar-alt"></i>
                        </span>
                    </div>
                    <input readonly type="text" name="date" class="form-control float-right" id="date">
                </div>
                <button type="submit" class="btn btn-secondary">Search</button>
            </form>
            
            
          <div class="ml-auto">
            
            <a href="{{route('locations')}}" class="btn {{request()->is('location') ? 'btn-primary' : 'btn-outline-primary'}} rounded-pill">All locations</a>
            <a href="{{route('users.location')}}" class="btn {{request()->is('location/user') ? 'btn-primary' : 'btn-outline-primary'}} rounded-pill">User locations</a>
            <a href="{{route('stores.location')}}" class="btn {{request()->is('location/store') ? 'btn-primary' : 'btn-outline-primary'}} rounded-pill">Store locations</a>
           
          </div>

        </div>
        <div class="card-body">
          <div id="map">

          </div>
        </div>
      </div>
    </div>
  </div>
 
@endsection
@php
    $store_locations = isset($store_locations) ? $store_locations : null;
    $user_locations = isset($user_locations) ? $user_locations : null;

@endphp
@push('scripts')
<script>
  var store_locations = {!! json_encode($store_locations) !!};
  var user_locations = {!! json_encode($user_locations) !!};
  function generateRandomColor(){
    let maxVal = 0xFFFFFF; // 16777215
    let randomNumber = Math.random() * maxVal; 
    randomNumber = Math.floor(randomNumber);
    randomNumber = randomNumber.toString(16);
    let randColor = randomNumber.padStart(6, 0);   
    return `#${randColor.toUpperCase()}`
  }
  var iconStyle = new ol.style.Style({
	  image: new ol.style.Icon({
	    anchor: [0.5, 46],
	    anchorXUnits: 'fraction',
	    anchorYUnits: 'pixels',
	    src: 'https://icon-library.net/images/google-maps-gps-icon/google-maps-gps-icon-14.jpg',
	    scale: 0.1
	  })

	});
	var labelStyle = new ol.style.Style({
	  text: new ol.style.Text({
	    font: '13px Calibri,sans-serif',
	    overflow: true,
	    fill: new ol.style.Fill({
	      color: '#000'
	    }),
	    stroke: new ol.style.Stroke({
	      color: '#fff',
	      width: 1
	    }),
	    offsetY: -12
	  })
	});
	var style = [iconStyle, labelStyle];

  const map = new ol.Map({
    layers:[
        new ol.layer.Tile({
          source:new ol.source.TileJSON({
            url:'https://api.maptiler.com/maps/basic-v2/tiles.json?key=YJ3FZmIjQhgnzfE6qEgL',
            tileSize:512
          })
        }),
    ],
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([96.16372345533095,16.852548741516753]),
      zoom: 13.5
    })
  });

  map.on('click',function(e){
      map.forEachFeatureAtPixel(e.pixel,function(feature,layer){
        console.log(feature.get('name'));
        // console.log('hello')
      },{
        layerFilter:function(layerCandidate){
          return true;
          if(layerCandidate.get('title') == 'apm'){
            console.log(layerCandidate.get('name'))
            return true;
          }
        }
      });
  });


  if(store_locations){
    store_locations.forEach(location => {
      const marker = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [
          new ol.Feature({
            geometry: new ol.geom.Point(
              ol.proj.fromLonLat([location.long,location.lat])
            )
          })
        ]
      }),

      style:new ol.style.Style({
        image: new ol.style.Icon({
          src: {!!json_encode(asset('store.png'))!!},
          anchor: [0.5,1]
        })
      })
    })

    map.addLayer(marker)

    const label = new ol.layer.Vector({
                source: new ol.source.Vector({
                  features: [
                    new ol.Feature({
                      geometry: new ol.geom.Point(
                        ol.proj.fromLonLat([location.long,location.lat])
                      ),
                      name: location.name,
                      labelStyle:new ol.style.Style({
                        text: new ol.style.Text({
                          font: '30px Calibri,sans-serif',
                          overflow: true,
                          fill: new ol.style.Fill({
                            color: '#000'
                          }),
                          stroke: new ol.style.Stroke({
                            color: '#fff',
                            width: 10
                          }),
                          offsetY: -12
                        })
                      })

                    })
                  ]
                }),

                style: function(feature) {
                  labelStyle.getText().setText(feature.get('name'));
                  return style;
                }
              })
              map.addLayer(label)
    });
  }
  
  

  if(user_locations){
    console.log(user_locations)
    user_locations.forEach(user => {
        let path = [];
        user.location.forEach(value => {
          path.push([value.long,value.lat]);      
        })
        
        // const lineString = new ol.geom.LineString(path);
        //     lineString.transform('EPSG:4326', 'EPSG:3857');
        //     const feature = new ol.Feature({
        //       geometry: lineString,
        //     });
        //     feature.setProperties({'name':user.info.name, 'description':'xyz'})
        //     const source = new ol.source.Vector();
        //     source.addFeature(feature);
        //     var vector = new ol.layer.Vector({
        //         source,
        //         title:user.info.name,
        //         style: new ol.style.Style({
        //           stroke: new ol.style.Stroke({
        //           color: generateRandomColor(),
        //           width: 5
        //         })
        //       })
        //     })
        //     map.addLayer(vector)

          user.location.forEach((location,key) => {
            const marker = new ol.layer.Vector({
              source: new ol.source.Vector({
                features: [
                  new ol.Feature({
                    geometry: new ol.geom.Point(
                      ol.proj.fromLonLat([location.long,location.lat])
                    ),
                    name: user.info.name,
                    labelStyle:new ol.style.Style({
                      text: new ol.style.Text({
                        font: '12px Calibri,sans-serif',
                        overflow: true,
                        fill: new ol.style.Fill({
                          color: '#000'
                        }),
                        stroke: new ol.style.Stroke({
                          color: '#fff',
                          width: 3
                        }),
                        offsetY: -12
                      })
                    })

                  })
                ]
              }),

              style:new ol.style.Style({
                image: new ol.style.Icon({
                  src: {!!json_encode(asset('user.png'))!!},
                  anchor: [0.5,1]
                })
              }),
            })
            map.addLayer(marker)

            console.log(key)
            if(key == Math.round((user.location.length - 1) / 2) || true){
              const label = new ol.layer.Vector({
                source: new ol.source.Vector({
                  features: [
                    new ol.Feature({
                      geometry: new ol.geom.Point(
                        ol.proj.fromLonLat([location.long,location.lat])
                      ),
                      name: user.info.name + '('+(key+1)+')',
                      labelStyle:new ol.style.Style({
                        text: new ol.style.Text({
                          font: '30px Calibri,sans-serif',
                          overflow: true,
                          fill: new ol.style.Fill({
                            color: '#000'
                          }),
                          stroke: new ol.style.Stroke({
                            color: '#fff',
                            width: 10
                          }),
                          offsetY: -12
                        })
                      })

                    })
                  ]
                }),

                style: function(feature) {
                  labelStyle.getText().setText(feature.get('name'));
                  return style;
                }
              })
              map.addLayer(label)
            }
              
          });
    })
    
  }

  

  

  
  

</script>
<script src="{{asset('plugins/moment/moment.min.js')}}"></script>
  <script src="{{asset('plugins/daterangepicker/daterangepicker.js')}}"></script>
  <script src="{{asset('plugins/ekko-lightbox/ekko-lightbox.min.js')}}"></script>
  <script src="{{asset('plugins/filterizr/jquery.filterizr.min.js')}}"></script>
  <script>
    $(function () {
        var dates = {!!json_encode($_GET['date'] ?? '')!!};
        if(dates){
            var start_date =  moment(dates.split(" - ")[0]);
            var end_date =  moment(dates.split(" - ")[1]);
        }else{
            var start_date = moment();
            var end_date = moment();
        }
        $('#date').daterangepicker(
      {
        ranges   : {
          'Today'       : [moment(), moment()],
          'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month'  : [moment().startOf('month'), moment().endOf('month')],
          'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        startDate: start_date,
        endDate  : end_date
      },
      function (start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
      }
    );

        if(dates){
          $('#date').val(dates);
        }

        $('#date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
        });




        $(document).on('click', '[data-toggle="lightbox"]', function(event) {
          event.preventDefault();
          $(this).ekkoLightbox({
            alwaysShowClose: true
          });
        });

        $('.filter-container').filterizr({gutterPixels: 3});

        $('.btn[data-filter]').on('click', function() {
          $('.btn[data-filter]').removeClass('active');
          $(this).addClass('active');
        });
      })
  </script>
@endpush