@extends('layouts.app-2')
@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 text-dark">Dashboard</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 </li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
   </div>
    <!-- /.content-header -->

    <!-- Main content -->
   <section class="content">
      <div class="container-fluid">

         <!-- Small boxes (Stat box) -->
         <div class="row">
            <div class="col-md-3 col-sm-6 col-12">
               <div class="info-box">
                  <span class="info-box-icon bg-primary"><i class="far fa-star"></i></span>   
                  <div class="info-box-content">
                     <span class="info-box-text">Client</span>
                     <span class="info-box-number">{{$totalClient}}</span>
                  </div>
               </div>
            </div>

            <div class="col-md-3 col-sm-6 col-12">
               <div class="info-box">
                  <span class="info-box-icon bg-info"><i class="far fa-user"></i></span>   
                  <div class="info-box-content">
                     <span class="info-box-text">Koordinator</span>
                     <span class="info-box-number">{{$totalKordinator}}</span>
                  </div>
               </div>
            </div>

            <div class="col-md-3 col-sm-6 col-12">
               <div class="info-box">
                  <span class="info-box-icon bg-secondary"><i class="far fa-user"></i></span>   
                  <div class="info-box-content">
                     <span class="info-box-text">Teknisi</span>
                     <span class="info-box-number">{{$totalTeknisi}}</span>
                  </div>
               </div>
            </div>

            <div class="col-md-3 col-sm-6 col-12">
               <div class="info-box">
                  <span class="info-box-icon bg-info"><i class="far fa-file"></i></span>   
                  <div class="info-box-content">
                     <span class="info-box-text">Order</span>
                     <span class="info-box-number">{{$totalOrder}}</span>
                  </div>
               </div>
            </div>
            
         </div>
         <!-- /.row -->

         <div class="row">
            <div class="col-12">
               <div class="card card-light">
                  <div class="card-header">
                     <h3 class="card-title"><i class="fas fa-map-marker-alt mr-1"></i>
                        Site
                     </h3>
                     <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                              class="fas fa-minus"></i>
                        </button>
                     </div>
                  </div>
                  <div class="card-body" style="padding: 0px" >
                     <div id="map" style="height: 400px;width: 100%;"></div>
                  </div>
               </div>

               <div class="card card-light">
                  <div class="card-header">
                     <h3 class="card-title"><i class="fas fa-map-marker-alt mr-1"></i>
                        Teknisi
                     </h3>
                     <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                              class="fas fa-minus"></i>
                        </button>
                     </div>
                  </div>
                  <div class="card-body" style="padding: 0px" >
                     <div id="map2" style="height: 400px;width: 100%;"></div>
                  </div>
               </div>

               <div class="card card-light">
                  <div class="card-header">
                     <h3 class="card-title"><i class="fas fa-map-marker-alt mr-1"></i>
                        Kordinator
                     </h3>
                     <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                              class="fas fa-minus"></i>
                        </button>
                     </div>
                  </div>
                  <div class="card-body" style="padding: 0px" >
                     <div id="map3" style="height: 400px;width: 100%;"></div>
                  </div>
               </div>


            </div>
         </div>
        
        <!-- Map Site -->
         {{-- <div class="row">
            <div class="col-12">
               <div class="card bg-gradient-light border">
                  <div class="card-header border-0">
                     <h3 class="card-title">
                        <i class="fas fa-map-marker-alt mr-1"></i>
                        Site
                     </h3>
                     <!-- card tools -->
                     <div class="card-tools">
                        <button type="button"
                              class="btn btn-info btn-sm"
                              data-card-widget="collapse"
                              data-toggle="tooltip"
                              title="Collapse" aria-expanded="false" aria-controls="collapseExample">
                        <i class="fas fa-minus"></i>
                        </button>
                     </div>
                     <!-- /.card-tools -->
                  </div>
                  <div class="card-body" >
                     <div class="rounded mt--5" id="map44" style="height: 420px; width: 100%;"></div>
                  </div>
               </div>
            </div>
         </div> --}}

         <!-- Map Teknisi -->
         
      </div><!-- /.container-fluid -->
   </section>
    <!-- /.content --> 
@endsection

@push('maps')
   <script>

      // Map Site
      const defaultLocation = [114.59075, -3.31987]
      mapboxgl.accessToken = 'pk.eyJ1IjoicmFobWF0cmgiLCJhIjoiY2tqZHBvaWUxNWg2cTJxcndraHQ0bHNxMyJ9.AO_Soy7dCqnCy6ZnC9mNKA';
      var map = new mapboxgl.Map({
      container: 'map',
      center: defaultLocation,
      zoom: 4.4,
      });

      map.on('load', function () {

         map.addSource('site', {
            type: 'geojson',
            data: {!! $geoJsonSite !!},
            cluster: true,
            clusterMaxZoom: 14,
            clusterRadius: 50
            
         });

         map.addLayer({
            id: 'clusters', 
            type: 'circle',
            source: 'site',
            filter: ['has', 'point_count'],
            paint: {
               'circle-color': [
                     'step',
                     ['get', 'point_count'],
                     '#51bbd6',
                     100,
                     '#f1f075',
                     750,
                     '#f28cb1'
               ],
               'circle-radius': [
                     'step',
                     ['get', 'point_count'],
                     20,
                     100,
                     30,
                     750,
                     40
               ]
            }
         });

         map.addLayer({
            id: 'cluster-count',
            type: 'symbol',
            source: 'site',
            filter: ['has', 'point_count'],
            layout: {
               'text-field': '{point_count_abbreviated}',
               'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
               'text-size': 12
            }
         });

         map.addLayer({
            id: 'unclustered-point',
            type: 'circle',
            source: 'site',
            filter: ['!', ['has', 'point_count']],

            paint: {
               // 'circle-color': '#A3A847',
                  'circle-color': [
                     'match',
                     ['get', 'desc'],
                     'Menuggu Kordinator',
                     '#B2B1B9',
                     'Menunggu Teknisi',
                     '#B2B1B9',
                     'On Progress',
                     '#4bb2f7',
                     'Order Report',
                     '#FAAD80',
                     'Order Bast',
                     '#FFF338',
                     'Ready to Payment',
                     '#09c4a8',
                     'Order Complete',
                     '#A239EA',

                     
                     
                     /* other */ '#000'
                  ],
               'circle-radius': 8,
               'circle-stroke-width': 1,
               'circle-stroke-color': '#66DE93'
            }
         });

         map.on('click', 'clusters', function (e) {
            var features = map.queryRenderedFeatures(e.point, {
               layers: ['clusters']
            });
            var clusterId = features[0].properties.cluster_id;
            map.getSource('site').getClusterExpansionZoom(
               clusterId,
               function (err, zoom) {
                     if (err) return;

                     map.easeTo({
                        center: features[0].geometry.coordinates,
                        zoom: zoom
                     });
               }
            );
         });


         map.on('click', 'unclustered-point', function (e) {
            var coordinates = e.features[0].geometry.coordinates.slice();
            var nama = e.features[0].properties.title;
            var client = e.features[0].properties.client;
            var kordinator = e.features[0].properties.kordinator;
            var status = e.features[0].properties.status;
            var lat = e.features[0].properties.lat;
            var long = e.features[0].properties.long;
            var desc = e.features[0].properties.desc;
            console.log(nama);


            new mapboxgl.Popup()
               .setLngLat(coordinates)
               .setHTML(
                     "<span class='text-dark'>Site Order<hr><span class='font-bold'>" + nama +"</span><hr>Client : "+client+"<br>Kordinator : "+kordinator+"<br>Lat : "+lat+"<br>Long : "+long+"<hr><span class='font-bold'>"+desc+"</span></span>"
               )
               // .setHTML(
               //       "<span class='font-bold text-dark'>Site Order</span>"
               // )
               .addTo(map);
               });

               map.on('mouseenter', 'clusters', function () {
                  map.getCanvas().style.cursor = 'pointer';
               });
               map.on('mouseleave', 'clusters', function () {
                  map.getCanvas().style.cursor = '';
               });
      });
      map.setStyle('mapbox://styles/mapbox/outdoors-v11')
      map.addControl(new mapboxgl.NavigationControl())




      // Map Teknisi
      const defaultLocationTeknisi = [114.59075, -3.31987]
      mapboxgl.accessToken = 'pk.eyJ1IjoicmFobWF0cmgiLCJhIjoiY2tqZHBvaWUxNWg2cTJxcndraHQ0bHNxMyJ9.AO_Soy7dCqnCy6ZnC9mNKA';
      var map2 = new mapboxgl.Map({
         container: 'map2',
         center: defaultLocationTeknisi,
         zoom: 4.4,
      });
      map2.on('load', function () {

               map2.addSource('earthquakes', {
                  type: 'geojson',
                  data: {!! $geoJsonTeknisi !!},
                  cluster: true,
                  clusterMaxZoom: 14,
                  clusterRadius: 50
                  
               });

               map2.addLayer({
                  id: 'clusters', 
                  type: 'circle',
                  source: 'earthquakes',
                  filter: ['has', 'point_count'],
                  paint: {
                     'circle-color': [
                           'step',
                           ['get', 'point_count'],
                           '#51bbd6',
                           100,
                           '#f1f075',
                           750,
                           '#f28cb1'
                     ],
                     'circle-radius': [
                           'step',
                           ['get', 'point_count'],
                           20,
                           100,
                           30,
                           750,
                           40
                     ]
                  }
               });

               map2.addLayer({
                  id: 'cluster-count',
                  type: 'symbol',
                  source: 'earthquakes',
                  filter: ['has', 'point_count'],
                  layout: {
                     'text-field': '{point_count_abbreviated}',
                     'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                     'text-size': 12
                  }
               });
               
               map2.addLayer({
                  id: 'unclustered-point',
                  type: 'circle',
                  source: 'earthquakes',
                  
                  filter: ['!', ['has', 'point_count']],
                  paint: {
                        'circle-color': '#185ADB',
                     //  'circle-color': [
                     //     'match',
                     //     ['get', 'locationId'],
                     //     1,
                     //     '#fbb03b',
                     //     2,
                     //     '#223b53',
                     //     /* other */ '#ccc'
                     //   ],
                        'circle-radius': 8,
                        'circle-stroke-width': 1,
                        'circle-stroke-color': '#66DE93'
                     }
                  
               });

               map2.on('click', 'clusters', function (e) {
                  var features = map2.queryRenderedFeatures(e.point, {
                     layers: ['clusters']
                  });
                  var clusterId = features[0].properties.cluster_id;
                  map2.getSource('earthquakes').getClusterExpansionZoom(
                     clusterId,
                     function (err, zoom) {
                           if (err) return;

                           map2.easeTo({
                              center: features[0].geometry.coordinates,
                              zoom: zoom
                           });
                     }
                  );
               });


               map2.on('click', 'unclustered-point', function (e) {
                  var coordinates = e.features[0].geometry.coordinates.slice();
                  var nama = e.features[0].properties.title;
                  var no = e.features[0].properties.no;
                  var lat = e.features[0].properties.lat;
                  var long = e.features[0].properties.long;

                  new mapboxgl.Popup()
                     .setLngLat(coordinates)
                     .setHTML(
                           "Teknisi<hr><span class='font-bold text-lg'>" + nama +"</span><hr>Lat: "+lat+"<br>Long: "+long
                     )
                     .addTo(map2);
               });

               map2.on('mouseenter', 'clusters', function () {
                  map2.getCanvas().style.cursor = 'pointer';
               });
               map2.on('mouseleave', 'clusters', function () {
                  map2.getCanvas().style.cursor = '';
               });
         });

      map2.setStyle('mapbox://styles/mapbox/outdoors-v11')
      map2.addControl(new mapboxgl.NavigationControl())




      // Map Koordinator
      const defaultLocationKordinator = [114.59075, -3.31987]
      mapboxgl.accessToken = 'pk.eyJ1IjoicmFobWF0cmgiLCJhIjoiY2tqZHBvaWUxNWg2cTJxcndraHQ0bHNxMyJ9.AO_Soy7dCqnCy6ZnC9mNKA';
      var map3 = new mapboxgl.Map({
        container: 'map3',
        center: defaultLocationKordinator,
        zoom: 4.4,
      });

      map3.on('load', function () {

map3.addSource('kordinator', {
    type: 'geojson',
    data: {!! $geoJsonKordinator !!},
    cluster: true,
    clusterMaxZoom: 14,
    clusterRadius: 50
    
});

map3.addLayer({
    id: 'clusters', 
    type: 'circle',
    source: 'kordinator',
    filter: ['has', 'point_count'],
    paint: {
        'circle-color': [
            'step',
            ['get', 'point_count'],
            '#51bbd6',
            100,
            '#f1f075',
            750,
            '#f28cb1'
        ],
        'circle-radius': [
            'step',
            ['get', 'point_count'],
            20,
            100,
            30,
            750,
            40
        ]
    }
});

map3.addLayer({
    id: 'cluster-count',
    type: 'symbol',
    source: 'kordinator',
    filter: ['has', 'point_count'],
    layout: {
        'text-field': '{point_count_abbreviated}',
        'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
        'text-size': 12
    }
});

map3.addLayer({
    id: 'unclustered-point',
    type: 'circle',
    source: 'kordinator',
    filter: ['!', ['has', 'point_count']],

    paint: {
        'circle-color': '#A3A847',
        'circle-radius': 8,
        'circle-stroke-width': 1,
        'circle-stroke-color': '#66DE93'
    }
});

map3.on('click', 'clusters', function (e) {
    var features = map3.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });
    var clusterId = features[0].properties.cluster_id;
    map3.getSource('kordinator').getClusterExpansionZoom(
        clusterId,
        function (err, zoom) {
            if (err) return;

            map3.easeTo({
                center: features[0].geometry.coordinates,
                zoom: zoom
            });
        }
    );
});


map3.on('click', 'unclustered-point', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var nama = e.features[0].properties.title;
    var no = e.features[0].properties.no;
    var lat = e.features[0].properties.lat;
    var long = e.features[0].properties.long;

    new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML(
                "Kordinator<hr><span class='font-bold text-lg'>" + nama +"</span><hr>Lat: "+lat+"<br>Long: "+long
            )
        .addTo(map3);
});

map3.on('mouseenter', 'clusters', function () {
    map3.getCanvas().style.cursor = 'pointer';
});
map3.on('mouseleave', 'clusters', function () {
    map3.getCanvas().style.cursor = '';
});
});



map3.setStyle('mapbox://styles/mapbox/outdoors-v11')
map3.addControl(new mapboxgl.NavigationControl())
     
   </script>
@endpush