@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/wave.css') }}?v=1"/>
@endsection

@section('content')

<div class="main main-app p-3 p-lg-4">
    <div class="d-md-flex align-items-center justify-content-between mb-2">
      <div>
        <ol class="breadcrumb fs-sm mb-1 mt-2">
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item active" aria-current="page">Flood Mitigation System (FMS)</li>
        </ol>
        <h4 class="main-title mb-0">Flood Mitigation System</h4>
        <p>{{ Auth::routes(); }}</p>
      </div>
      <div class="d-flex gap-2 mt-3 mt-md-0">
        <div class="d-flex gap-2 mt-3 mt-md-0">
            <button onClick="window.location.reload();" class="btn btn-white d-flex align-items-center gap-2"><i class="ri-refresh-fill fs-18 lh-1"></i>Refresh</button>
            <a href="#modal_cmsoon" data-bs-toggle="modal" class="btn btn-white d-flex align-items-center gap-2"><i class="ri-printer-line fs-18 lh-1"></i>Print</a>
            <a href="#modal_cmsoon" data-bs-toggle="modal" class="btn btn-primary d-flex align-items-center gap-2"><i class="ri-bar-chart-2-line fs-18 lh-1"></i>Generate<span class="d-none d-sm-inline"> Report</span></a>
          </div>
      </div>
    </div>

    <div class="row g-3">

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

      <div class="col-xl-12">
        <div id="ww_b82343c91e973" v='1.3' loc='id' a='{"t":"responsive","lang":"en","sl_lpl":1,"ids":["wl8186"],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"#616161","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722","cl_odd":"#0000000a"}'>Weather for the Following Location: <a href="https://2ua.org/mys/negeri_sembilan/map/" id="ww_b82343c91e973_u" target="_blank">Negeri Sembilan map, Malaysia</a></div>
        <script async src="https://app1.weatherwidget.org/js/?id=ww_b82343c91e973"></script>
      </div>

      <div class="col-xl-12">
        <div class="row g-3">
        @foreach ($arruxpixel as $upxl)

        <div class="col-sm-12 col-md-4 col-xl-3 col-xxl-2">
          <div class="card card-one">
            <div class="card-body overflow-hidden">
              <h2 id="snsr_name-{{ $upxl['snsr_id'] }}" class="text-dark fw-semibold mb-1 text-center">{{ $upxl['snsr_name'] }}</h2>
              <h6 class="card-value justify-content-center mb-0">Current Water Level</h6>
              <p id="cntr_wtr_lvl-{{ $upxl['snsr_id'] }}" class="card-value justify-content-center text-primary mb-0">
                {{ number_format($upxl['cntr_wtr_lvl'], 2) }} meter
              </p>
              <div class="divider mt-0 mb-0">
                <span class="fst-italic" id="snsr_last_tx_at-{{ $upxl['snsr_id'] }}">{{ $upxl['snsr_last_tx_at'] }}</span>
              </div>
              <div class="d-flex justify-content-center">
                <div class="circle-container">
                  <div class="circle"></div>
                  <div id="wave-1-{{ $upxl['snsr_id'] }}" class="wave {{ $upxl['css_wave'] }}"></div>
                  <div id="wave-2-{{ $upxl['snsr_id'] }}" class="wave {{ $upxl['css_wave'] }}"></div>
                  <div id="wave-3-{{ $upxl['snsr_id'] }}" class="wave {{ $upxl['css_wave'] }}"></div>
                  <div id="wave-4-{{ $upxl['snsr_id'] }}" class="wave-below {{ $upxl['css_wave'] }}"></div>
                  <div id="wave-5-{{ $upxl['snsr_id'] }}" class="desc {{ $upxl['css_wave'] }}">
                    <h2>Water Level</h2>
                    <p>
                      <b>
                        <text id="wtr_prcnt-{{ $upxl['snsr_id'] }}">{{ number_format($upxl['wtr_prcnt'], 2) }}</text>
                        <span> %</span>
                      </b>
                    </p>
                  </div>
                </div>
              </div>
              <div class="row g-3 text-center align-items-center">
                <p class="col-6 fs-xs text-secondary mb-0 lh-4 text-center">
                    <span class="text-success fs-xs align-items-center">Highest<i class="ri-arrow-up-line fs-15 lh-3"></i></span><br>
                    <text id="cntr_wtr_max_lvl-{{ $upxl['snsr_id'] }}">{{ number_format($upxl['cntr_wtr_max_lvl'], 2) }}</text> meter
                </p>
                <p class="col-6 fs-xs text-secondary mb-0 lh-4 text-center">
                    <span class="text-danger fs-xs align-items-center">Lowest<i class="ri-arrow-down-line fs-15 lh-3"></i></span><br>
                    <text id="cntr_wtr_min_lvl-{{ $upxl['snsr_id'] }}">{{ number_format($upxl['cntr_wtr_min_lvl'], 2) }}</text> meter
                </p>
              </div>
            </div>
          </div><!-- card -->
        </div><!-- col -->
        @endforeach

        </div>
      </div>

      <h6 class="card-title">
        Live Control :
        <font id="pingpixel-1"></font> -
        <font id="pingpixel-2" data-id="table"></font> -
        <font id="pingpixel-3" data-id="pingpixel-3"></font>
      </h6>

      <div class="col-xl-12">
        <div class="row g-3">
          <div class="col-xl-12">
            <div class="card card-one">
              <div style="height:300px" id="chartdiv"></div>
            </div>
          </div>
        </div>
      </div>

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

    @include('layouts.inc.footer')

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

  @endsection

@section('js')

<script language="javascript" type="text/javascript">
  var timeout = setInterval(streamSnsrData, 2000);

  function streamSnsrData()
  {
    $.ajax({
      url: '{{ URL::to("dash_flood/streamSnsrData")}}',
      method: 'GET',
      success: function (data) {
        data.forEach(function(dt) {
            //streaming
            $('#cntr_wtr_lvl-'+dt.snsr_id).text(dt.cntr_wtr_lvl + ' meter');
            $('#snsr_last_tx_at-'+dt.snsr_id).text(dt.snsr_last_tx_at);
            $('#wtr_prcnt-'+dt.snsr_id).text(dt.wtr_prcnt);

            $('#cntr_wtr_max_lvl-'+dt.snsr_id).text(dt.cntr_wtr_max_lvl);
            $('#cntr_wtr_min_lvl-'+dt.snsr_id).text(dt.cntr_wtr_min_lvl);

            $('#wave-1-'+dt.snsr_id).removeClass($('#wave-1-'+dt.snsr_id).attr('class'));
            $('#wave-2-'+dt.snsr_id).removeClass($('#wave-2-'+dt.snsr_id).attr('class'));
            $('#wave-3-'+dt.snsr_id).removeClass($('#wave-3-'+dt.snsr_id).attr('class'));
            $('#wave-4-'+dt.snsr_id).removeClass($('#wave-4-'+dt.snsr_id).attr('class'));
            $('#wave-5-'+dt.snsr_id).removeClass($('#wave-5-'+dt.snsr_id).attr('class'));

            $('#wave-1-'+dt.snsr_id).addClass('wave ' + dt.css_wave);
            $('#wave-2-'+dt.snsr_id).addClass('wave ' + dt.css_wave);
            $('#wave-3-'+dt.snsr_id).addClass('wave ' + dt.css_wave);
            $('#wave-4-'+dt.snsr_id).addClass('wave-below ' + dt.css_wave);
            $('#wave-5-'+dt.snsr_id).addClass('desc ' + dt.css_wave);
        });
        },
    });
  }
</script>

<script language="javascript" type="text/javascript">
  var timeout = setInterval(status, 1000);
  //var scriptUrl = '{{ URL::to("dash_flood/status") }}';
  function status ()
  {
       $('#pingpixel-'+ 1).load('{{ URL::to("dash_flood/status") }}');
       $('[data-id="table"]').load('{{ URL::to("dash_flood/status") }}');
       $('#pingpixel-'+ 3).load('{{ URL::to("dash_flood/status") }}');
  }
</script>

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/dark.js"></script>

<script type="text/javascript">
  AmCharts.makeChart("chartdiv",
    {
      "type": "serial",
      "categoryField": "date",
      "dataDateFormat": "YYYY-MM-DD HH",
      "accessibleTitle": "",
      "color": "#FFFFFF",
      "theme": "dark",
      "categoryAxis": {
          "minPeriod": "hh",
          "parseDates": true
      },
      "chartCursor": {
          "enabled": true,
          "animationDuration": 0.39,
          "categoryBalloonDateFormat": "JJ:NN",
          "categoryBalloonText": "[[category]] "
      },
      "chartScrollbar": {
          "enabled": false
      },
      "trendLines": [],
      "graphs": [
          {
              "bullet": "round",
              "id": "AmGraph-1",
              "title": "SUMP PIT 01",
              "valueField": "column-1"
          },
          {
              "bullet": "square",
              "id": "AmGraph-2",
              "title": "SUMP PIT 02",
              "valueField": "column-2"
          }
      ],
      "guides": [],
      "valueAxes": [
          {
              "id": "ValueAxis-1",
              "title": "Water Level (m)"
          }
      ],
      "allLabels": [],
      "balloon": {},
      "legend": {
          "enabled": true,
          "useGraphSettings": true,
      },
      "titles": [
          {
              "id": "Title-1",
              "size": 21,
              "text": "Flood Mitigation System"
          }
      ],
      "dataProvider": [
          {
              "column-1": 0.8,
              "column-2": 5,
              "date": "2014-03-01 08"
          },
          {
              "column-1": 0.8,
              "column-2": 7,
              "date": "2014-03-01 09"
          },
          {
              "column-1": 1.2,
              "column-2": 3,
              "date": "2014-03-01 10"
          },
          {
              "column-1": 1.2,
              "column-2": 3,
              "date": "2014-03-01 11"
          },
          {
              "column-1": 1.2,
              "column-2": 1,
              "date": "2014-03-01 12"
          },
          {
              "column-1": 1.6,
              "column-2": 2,
              "date": "2014-03-01 13"
          },
          {
              "column-1": 1.0,
              "column-2": 8,
              "date": "2014-03-01 14"
          }
      ]
    }
  );
</script>

@endsection