@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{!! asset('assets/gis/mapro.css') !!}?v=1"/>
<link rel="stylesheet" type="text/css" href="{!! asset('assets/gis/maptalkextended.css') !!}?v=a"/>

<style type="text/css">
    .info-content{
      color : black;
      height:50px;
      width:auto;
      }
    .info-header{
      color : black;
    }
</style>
@endsection

@section('content')
<div class="main main-app mt-5 p-2 p-lg-2" >

    <div class="row g-2">

      @if (!Auth::user()->prf_sites_id)
        <div class="alert alert-solid alert-warning d-flex align-items-center" role="alert">
        <i class="ri-information-line"></i>
          Please Setup
          <a href="#modal_sys_prf" data-bs-toggle="modal"><abbr title="Configure System Preference"><strong>&nbsp;System Preference&nbsp;</strong></abbr></a>
          Before Continue.
        </div>
      @endif

      <div class="col-xl-3 col-xxl-2">

        <!-- ESTIMATED TOTAL SAVING (RM) -->
        <div class="card card-post bg-primary bg-gradient bg-opacity-25 mb-2">
          <div class="card-body">
            <div class="row">
              <div class="col-12">
                <label class="card-title fw-medium text-dark mb-1">{{(session()->get('Global_PrfSiteName'))}}</label>
              </div><!-- col -->
              <div class="col-5">
                <!-- <div id="flotChart3" class="flot-chart ht-80"></div> -->
              </div><!-- col -->
            </div><!-- row -->
          </div><!-- card-body -->
        </div><!-- card-one -->

          <div class="card card-post bg-gray-700 mb-2">
            <div class="card-body">
              <div class="row">
                <div class="col-12">
                  <label class="card-title fw-medium text-light mb-1">TOTAL ENERGY USAGE</label>
                  <h3 class="card-value fw-bolder text-light mb-1">65,9830.16 kWh</h3>
                  <span class="d-block fs-22 lh-4 text-light">Estimated Total Energy in kWh.</span>
                </div><!-- col -->
                <div class="col-5">
                  <!-- <div id="flotChart3" class="flot-chart ht-80"></div> -->
                </div><!-- col -->
              </div><!-- row -->
            </div><!-- card-body -->
          </div><!-- card-one -->


          <!-- Energy Consumption (kWh) -->
          <div class="card card-post mb-2">
            <div class="card-header">
              <h6 class="card-title">Energy Consumption (kWh)</h6>
              <nav class="nav nav-icon nav-icon-sm ms-auto">
                <i class="ri-refresh-line"></i>
              </nav>
            </div><!-- card-header -->
              <div class="ht-150"><canvas id="chartBar5"></canvas></div>
          </div><!-- card -->

          <!-- POWER CONSUMPTION BILL (RM) -->
          <div class="card card-post bg-success bg-gradient bg-opacity-50 mb-2">
            <div class="card-body">
              <div class="row">
                <div class="col-12">
                  <label class="card-title fw-medium  mb-1">ESTIMATED TOTAL SAVING (RM)</label>
                  <h3 class="card-value mb-1">RM 61,173.07</h3>
                </div><!-- col -->
                <div class="col-5">
                  <!-- <div id="flotChart3" class="flot-chart ht-80"></div> -->
                </div><!-- col -->
              </div><!-- row -->
            </div><!-- card-body -->
          </div><!-- card-one -->

          <!-- TOTAL ENERGY SAVINGS -->
          <div class="card card-post bg-info bg-gradient bg-opacity-25 mb-2">
            <div class="card-body">
              <div class="row">
                <div class="col-12">
                  <label class="card-title fw-medium text-dark mb-1">MONTHLY ENERGY SAVING</label>
                  <h3 class="card-value fw-bolder text-dark mb-1">{{ $PercentageEnergySaving }} %</h3>
                </div><!-- col -->
              </div><!-- row -->
            </div><!-- card-body -->
          </div><!-- card-one -->

          <!-- Total Devices -->
          <div class="card card-post bg-warning bg-gradient bg-opacity-25 mb-2">
            <div class="card-body">
              <div class="row">
                <div class="col-12">
                  <label class="card-title fw-medium text-dark mb-1">CARBON EMISSION</label>
                  <h3 class="card-value fw-bolder text-light mb-1">
                    <h4>163.17 t/CO<sub>2</sub>/kWh</h4>
                  </h3>
                </div><!-- col -->
                <div class="col-5">
                  <!-- <div id="flotChart3" class="flot-chart ht-80"></div> -->
                </div><!-- col -->
              </div><!-- row -->
            </div><!-- card-body -->
          </div><!-- card-one -->


          <!-- Energy Summary -->
          <div class="card card-post mb-2">
            <div class="card-header">
              <h6 class="card-title">Monthly Energy Summary</h6>
              <nav class="nav nav-icon nav-icon-sm ms-auto">
                <i class="ri-refresh-line"></i>
              </nav>
            </div><!-- card-header -->
          </div><!-- card -->

          <div class="card card-post mb-2">
            <div id="carouselExampleDark" class="carousel  slide" data-bs-ride="carousel">

              <div class="carousel-inner text-center">


              @php $isfirst = 'active' @endphp
              @foreach($MonthlyEnergySummary as $MnthKwh)

                <div class="carousel-item {{ $isfirst }}" data-bs-interval="10000">
                  <h2>{{ $MnthKwh['SiteName'] }}</h2>

                  <h4>{{ $MnthKwh['EnergySaving'] }} %</h4>
                  <p>Energy Saving</p>

                  <h4>{{ $MnthKwh['EnergyConsumption'] }} kWh</h4>
                  <p>Energy Consumption</p>

                  <h4>{{ $MnthKwh['CarbonEmission'] }} t/CO<sub>2</sub>/kWh</h4>
                  <p>Carbon Emission</p>
                </div>
                @php $isfirst = '' @endphp
              @endforeach

              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>
            </div>
          </div><!-- card -->


          <!-- Total Devices -->
          <div class="card card-post bg-secondary bg-gradient bg-opacity-25 mb-2">
            <div class="card-body">
              <div class="row">
                <div class="col-12">
                  <label class="card-title fw-medium text-light mb-1">Total Devices</label>
                  <h3 class="card-value fw-bolder text-light mb-1">{{ $total_device }}</h3>
                </div><!-- col -->
                <div class="col-5">
                  <!-- <div id="flotChart3" class="flot-chart ht-80"></div> -->
                </div><!-- col -->
              </div><!-- row -->
            </div><!-- card-body -->
          </div><!-- card-one -->

      </div>

      <div class="col-xl-6 col-xxl-7">



        <div class="card card-post">
          <div class="card-header" style="padding: 9px 20px;">
            <h6 class="card-title">
              <div class="spinner-grow spinner-grow-sm text-success">
                <span class="visually-hidden">live...</span>
              </div>
              <h6 class="fs-xs text-secondary mb-0">&nbsp;{{(session()->get('Global_PrfSiteName'))}}</h6>
            </h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <i class="ri-refresh-line"></i>
            </nav>
          </div><!-- card-header -->
          <div class="card-body m-0 p-0">
            <div id="shah_alam_map" style="height:83vh;width:auto;"></div>

            <!-- UT8 - https://www.w3schools.com/charsets/tryit.asp?deci=10687&ent=ofcir -->
            <div id="info">
              <strong style="color:#33d685;font-size:20px;">⦿</strong> Functional <br>
              <strong style="color:#eae420;font-size:20px;">⦿</strong> Repair Needed <br>
              <strong style="color:#eb4d1f;font-size:20px;">⦿</strong> Out of Order <br>
            </div>

            <div id="info-topright">
              <img id="sdbar_logo" src="{{ asset('assets/img/logo/'.config('app.name').'/emblem/emblem_topright.svg')}}" height="100px" width="auto" alt="{{config('app.name')}}">
            </div>

            <div id="info-topleft">
              <img id="sdbar_logo" src="{{ asset('assets/img/logo/'.config('app.name').'/emblem/emblem_topleft.svg')}}" height="60px" width="auto" alt="{{config('app.name')}}">
            </div>

          </div><!-- card-body -->
        </div><!-- card -->

        <div class="card card-post">
          <div class="d-flex align-content-center flex-wrap border">
            <div class="flex-fill border p-2"></div>
            <div class="flex-fill border p-2">S17</div>
            <div class="flex-fill border p-2">S29</div>
            <div class="flex-fill border p-2">S30</div>
            <div class="flex-fill border p-2">S31</div>
            <div class="flex-fill border p-2">S32</div>
            <div class="flex-fill border p-2">S33</div>
            <div class="flex-fill border p-2">S34</div>
            <div class="flex-fill border p-2">S35</div>
            <div class="flex-fill border p-2">S36</div>
            <div class="flex-fill border p-2"></div>
          </div>
        </div>
      </div>


      <div class="col-xl-3 col-xxl-3">

        <div class="card card-post bg-success bg-gradient bg-opacity-50">
          <div class="card-body">
            <div class="row">
              <div class="col-12">
                <label class="card-title fw-medium mb-1"><a style="color:white" href="https://ems.intraxius.net/xzcx30543dxxawe32.php?token=xsas534fdcg587v">Energy Monitoring System</a></label>
              </div><!-- col -->
            </div><!-- row -->
          </div><!-- card-body -->
        </div><!-- card-one -->

        <div class="card card-post">
          <div class="card-header">
            <h6 class="card-title">Notification Alert</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
              <i class="ri-refresh-line"></i>
            </nav>
          </div><!-- card-header -->


          <div class="card-body p-1 scrollspy-demo" style="height:84vh;overflow:hidden;">

            @include('module_dashboard.geois.inc_notification.poweroutage')

            @include('module_dashboard.geois.inc_notification.phaseout')

            @include('module_dashboard.geois.inc_notification.dooralarm')

            @include('module_dashboard.geois.inc_notification.minorfaulty')

            @include('module_dashboard.geois.inc_notification.majorfaulty')

            @include('module_dashboard.geois.inc_notification.daylight')

          </div><!-- card-body -->

        </div><!-- card -->

      </div><!-- Notifications -->

    </div><!-- row -->

    @include('layouts.inc.footer')

</div><!-- main -->

@endsection

@section('js')

<script src="{!! asset('assets/gis/shahalam/imsb.js') !!}"></script>
<script src="{!! asset('assets/gis/shahalam/ss17.js') !!}"></script>

<script src="{!! asset('assets/gis/shahalam/line_ss29.js') !!}"></script>
<script src="{!! asset('assets/gis/shahalam/line_ss30.js') !!}"></script>
<script src="{!! asset('assets/gis/shahalam/line_ss31.js') !!}"></script>
<script src="{!! asset('assets/gis/shahalam/line_ss32.js') !!}"></script>
<script src="{!! asset('assets/gis/shahalam/line_ss33.js') !!}"></script>
<script src="{!! asset('assets/gis/shahalam/line_ss36.js') !!}"></script>
<script src="{!! asset('assets/gis/shahalam/line_ss34.js') !!}"></script>

<script src="{!! asset('assets/gis/mapro_compressed.js') !!}"></script>
<script>

  var basemaps = localStorage.getItem('skin-mode');
  var white = '#EDEADE';
  var dark = '#1a1918';

  //mapro_encoding
  var mapbox3Dark = 'https://api.mapbox.com/styles/v1/syafiqsafiyan/cljzrhfla009c01pk4122911t/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1Ijoic3lhZmlxc2FmaXlhbiIsImEiOiJjbGp6cW91NHQwZjJyM29tbWwzbnpjbms2In0.FYG1qjlh4WGx0tnJd1fS9Q';
  var mapbox3DLight = 'https://api.mapbox.com/styles/v1/syafiqsafiyan/cljzs4rdj008601pf9by66eil/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1Ijoic3lhZmlxc2FmaXlhbiIsImEiOiJjbGp6cW91NHQwZjJyM29tbWwzbnpjbms2In0.FYG1qjlh4WGx0tnJd1fS9Q';
  //carto_encoding
  var mapcarto_dark = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png';
  var mapcarto_light = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

  if(basemaps) {
    basemaps = mapbox3Dark;
    color = white;
  }
  else{
    basemaps = mapbox3DLight;
    color = dark;
  }

  function info(str) {
    document.getElementById('info').innerHTML = str;
  }

  var anim_ss17 = [101.51713,3.00060];

  var map = new maptalks.Map('shah_alam_map', {
    center: anim_ss17,
    zoom: 13.839949081159921,
    pitch : 0,
    bearing: 0,
    overviewControl : false,
    // compassControl: {
    //       position: 'bottom-right',
    //     },
    attribution:
      {
        content: '{{(session()->get("Global_PrfSiteName"))}}',
        position: {
            bottom: 2,
            right: 1
          }
      },
    baseLayer: new maptalks.TileLayer('base', {
      urlTemplate: basemaps,
      subdomains: ["a","b","c","d"],
      attribution: '<a href=#">GIS Shah Alam </a> Intellectual Property By <a href="#">LSSB</a> X-N3493J &copy; 2019 - 2023'
    })
  });

  var bndry_imsb = new maptalks.Polygon(imsb, {
    'symbol' : [
      {
        'lineColor' : '#f5933d',
        'lineWidth' : 4,
        'lineDasharray' : [5, 5],
        'polygonFillOpacity' : 100,
      }
    ],
  });

  var bndry_ss17 = new maptalks.Polygon(boudary_shahalam_ss17, {
    'symbol' : [
      {
        'lineColor' : '#f5933d',
        'lineWidth' : 4,
        'lineDasharray' : [5, 5],
        'polygonFillOpacity' : 100
      }
    ],
  });

  var line_ss36 = new maptalks.LineString(line_shahalam_ss36, {
    symbol: {
      'lineColor' : '#f5933d',
      'lineWidth' : 2,
      'lineDasharray' : [4, 3]
    }
  });

  var line_ss30 = new maptalks.LineString(line_shahalam_ss30, {
    symbol: {
      'lineColor' : '#f5933d',
      'lineWidth' : 2,
      'lineDasharray' : [4, 3]
    }
  });

  var line_ss29 = new maptalks.LineString(line_shahalam_ss29, {
    symbol: {
      'lineColor' : '#f5933d',
      'lineWidth' : 2,
      'lineDasharray' : [4, 3]
    }
  });

  var line_ss31 = new maptalks.LineString(line_shahalam_ss31, {
    symbol: {
      'lineColor' : '#f5933d',
      'lineWidth' : 2,
      'lineDasharray' : [4, 3]
    }
  });

  var line_ss33 = new maptalks.LineString(line_shahalam_ss33, {
    symbol: {
      'lineColor' : '#f5933d',
      'lineWidth' : 2,
      'lineDasharray' : [4, 3]
    }
  });

  var line_ss32 = new maptalks.LineString(line_shahalam_ss32 , {
    symbol: {
      'lineColor' : '#f5933d',
      'lineWidth' : 2,
      'lineDasharray' : [4, 3]
    }
  });

  var line_ss34 = new maptalks.LineString(line_shahalam_ss34 , {
    symbol: {
      'lineColor' : '#f5933d',
      'lineWidth' : 2,
      'lineDasharray' : [4, 3]
    }
  });

  // reference http://geojson.io/#map=13.63/3.04541/101.4778
  var layer = new maptalks.VectorLayer('vector', [line_ss34, line_ss32, line_ss33, line_ss31, line_ss29, line_ss30, line_ss36])
  .addGeometry([bndry_imsb,bndry_ss17])
  .addTo(map);

  var green =  { 'textFaceName' : 'sans-serif', 'textName' : '⦿', 'textFill' : '#0ef03b', 'textHorizontalAlignment' : 'right', 'textSize' : 15 };
  var yellow =  { 'textFaceName' : 'sans-serif', 'textName' : '⦿', 'textFill' : '#eae420', 'textHorizontalAlignment' : 'right', 'textSize' : 15 };
  var red =  { 'textFaceName' : 'sans-serif', 'textName' : '⦿', 'textFill' : '#eb4d1f', 'textHorizontalAlignment' : 'right', 'textSize' : 15 };

  @foreach ($mtrlonglatlist as $mtrlocs)

    var longitude = "{{ $mtrlocs['longitude'] }}";
    var latitude = "{{ $mtrlocs['latitude'] }}";
    var status = "{{ $mtrlocs['status'] }}";
    var marker_color;
    var metrname = "{{ $mtrlocs['metrname'] }}";
    var mtrno = "{{ $mtrlocs['mtrno'] }}";
    var reason = "{{ $mtrlocs['reason'] }}";

    if(status == 'green')
    {
      marker_color = green;
    }
    else if(status == 'red')
    {
      marker_color = red;
    }
    else
    {
      marker_color = yellow;
    }

    if(reason !== '')
    {
        meter_reason = '<br><strong> Reason : </strong><br>' + reason;
    }
    else
    {
        meter_reason = '';
    }

    // var marker = new maptalks.Marker(
    //   [ longitude , latitude ], { symbol : marker_color }
    // ).addTo(layer);

    var marker = new maptalks.Marker([ longitude , latitude ], { symbol : marker_color });
    layer.addGeometry(marker);
    marker.setInfoWindow({
    title: '<div class="info-header">' + metrname + '</div>',
    content: '<div class="info-content">' + metrname + '<br>' + mtrno + meter_reason + '</div>'
    });

  @endforeach

  var text_S34 = new maptalks.Marker([101.50453968812656,3.010456315303543],  {symbol :{ 'textFaceName' : 'sans-serif', 'textName' : 'S34', 'textFill' : '#CECECE', 'textHorizontalAlignment' : 'right', 'textSize' : 25 }} ).addTo(layer);
  var text_S30 = new maptalks.Marker([101.52442255827879,2.9705536112157347], {symbol :{ 'textFaceName' : 'sans-serif', 'textName' : 'S30', 'textFill' : '#CECECE', 'textHorizontalAlignment' : 'right', 'textSize' : 25 }} ).addTo(layer);
  var text_S32 = new maptalks.Marker([101.51504202101961,2.9958145145960486], {symbol :{ 'textFaceName' : 'sans-serif', 'textName' : 'S32', 'textFill' : '#CECECE', 'textHorizontalAlignment' : 'right', 'textSize' : 25 }} ).addTo(layer);
  var text_S31 = new maptalks.Marker([101.53754721490543,2.9964454010411856], {symbol :{ 'textFaceName' : 'sans-serif', 'textName' : 'S31', 'textFill' : '#CECECE', 'textHorizontalAlignment' : 'right', 'textSize' : 25 }} ).addTo(layer);
  var text_S29 = new maptalks.Marker([101.56218260013941,2.9698761904134443], {symbol :{ 'textFaceName' : 'sans-serif', 'textName' : 'S29', 'textFill' : '#CECECE', 'textHorizontalAlignment' : 'right', 'textSize' : 25 }} ).addTo(layer);
  var text_S33 = new maptalks.Marker([101.54912029548831,3.0196834857956247], {symbol :{ 'textFaceName' : 'sans-serif', 'textName' : 'S33', 'textFill' : '#CECECE', 'textHorizontalAlignment' : 'right', 'textSize' : 25 }} ).addTo(layer);
  var text_S17 = new maptalks.Marker([101.50741388725032,3.0492273704463315], {symbol :{ 'textFaceName' : 'sans-serif', 'textName' : 'S17', 'textFill' : '#CECECE', 'textHorizontalAlignment' : 'right', 'textSize' : 25 }} ).addTo(layer);
  var text_S36 = new maptalks.Marker([101.48253997457061,3.0282766527051734], {symbol :{ 'textFaceName' : 'sans-serif', 'textName' : 'S36', 'textFill' : '#CECECE', 'textHorizontalAlignment' : 'right', 'textSize' : 25 }} ).addTo(layer);

  // var marker = new maptalks.Marker(
  //   [101.507689,3.043767],
  //   {
  //   'id' : 'marker0',
  //   'symbol' : yellow_point,
  //   'properties' : {
  //   'foo' : 'value'
  //   }
  // }).addTo(layer);

</script>

<script src="{{ asset('assets/lib/chart.js/chart.min.js') }}"></script>
<script>
                //  1             2            3         4             5             6               7             8           9      10     11     12
  var ctxLabel = ['Jan',        'Feb',       'Mar',    'Apr',        'May',        'Jun',          'Jul',         'Aug',      'Sep', 'Oct', 'Nov', 'Dec'];
  var ctxData1 = [1095254.590, 967127.66, 969256.30,  1071512.31,   1068841.71,   1045423.78,    1036929.47,    659830.16,      0,     0,    0,      0];
  var ctxData2 = [10, 40, 30, 40, 60, 55, 45, 35, 30, 20, 150, 20];
  var ctxColor1 = '#506fd9';
  var ctxColor2 = '#DBDFFD';

  // With gradient
  var ctx7 = document.getElementById('chartBar5').getContext('2d');

  var gradient1 = ctx7.createLinearGradient(0, 150, 0, 0);
  gradient1.addColorStop(0, '#506fd9');
  gradient1.addColorStop(1, '#ba50d9');

  var gradient2 = ctx7.createLinearGradient(0, 400, 0, 0);
  gradient2.addColorStop(0, '#dbdffd');
  gradient2.addColorStop(1, '#fddbdf');

  var chartBar5 = new Chart(ctx7, {
  type: 'bar',
  data: {
      labels: ctxLabel,
      datasets: [{
      data: ctxData1,
      backgroundColor: gradient1,
      barPercentage: 0.4},]
  },
  options: {
      maintainAspectRatio: false,
      responsive: true,
      plugins: {
      legend: {
          display: false
      }
      },
      scales: {
      y: {
          display: true,
          //beginAtZero:true,
          //max: 80
      }
      }
  }
  });

  if(skinMode)
  {
    chartBar5.options.scales['x'].grid.color = 'rgba(255,255,255,.06)';
    chartBar5.options.scales['y'].grid.color = 'rgba(255,255,255,.06)';
    chartBar5.options.scales['x'].ticks.color = 'rgba(255,255,255,.65)';
    chartBar5.options.scales['y'].ticks.color = 'rgba(255,255,255,.65)';
  }

  chartBar5.update();
</script>

<script>
setInterval(function() { window.location.reload(); }, 600000);
</script>

@endsection