@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-4 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">Total Order</span>
                     <span class="info-box-number">{{$totalProjectClient}}</span>
                  </div>
               </div>
            </div>

            <div class="col-md-4 col-sm-6 col-12">
               <div class="info-box">
                  <span class="info-box-icon bg-success"><i class="far fa-user"></i></span>   
                  <div class="info-box-content">
                     <span class="info-box-text">Progress Order</span>
                     <span class="info-box-number">{{$totalOnProgressClient}}</span>
                  </div>
               </div>
            </div>

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

        <!-- Map Site -->
         <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>
         </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())


   </script>
@endpush