@extends('layouts.app')

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

@section('content')

<div class="main main-app p-3 p-lg-3">
    <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" aria-current="page">
            <span class="badge bg-primary"><i class="ri-building-2-fill"></i> {{(session()->get('Global_PrfSiteName'))}}</span>
          </li>
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item active" aria-current="page">Flood Monitoring System (FMS)</li>
        </ol>
        <h4 class="main-title mb-0">
          Flood Monitoring System
          <div class="spinner-grow spinner-grow-sm text-success">
            <span class="visually-hidden">live...</span>
          </div>
        </h4>

      </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 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 hidden 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">

          <a data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-url="{{ route('sensor.snsrCntrl', $upxl['snsr_id']) }}">

          <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 -->
          </a>
        </div><!-- col -->
        @endforeach
        </div>
      </div>

      <div hidden 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('module_dashboard.inc_dash_flood.modal_cntrl_pump')
    @include('layouts.inc.footer')

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

  @endsection

@section('js')

<script src="{{ asset('assets/lib/rangeslider/js/ion.rangeSlider.min.js') }}"></script>
<script type="text/javascript">

  $(document).ready(function () {

    setTimeout(function(){
      window.location.reload();
    }, 1800000); // 30 minute reload

      let _token = $('meta[name="csrf-token"]').attr('content');
      $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': _token
        },
      });

      $("#snsr_pump").ionRangeSlider();
      $("#wtr_lvl").ionRangeSlider();
      let snsr_pump = $("#snsr_pump").data("ionRangeSlider");
      let wtr_lvl = $("#wtr_lvl").data("ionRangeSlider");

      var exampleModal = document.getElementById('exampleModal')
      exampleModal.addEventListener('show.bs.modal', function (event) {
      // click that triggered the modal
      var attr = event.relatedTarget
      // Extract info from data-bs-* attributes
      var data_bs_url = attr.getAttribute('data-bs-url')

      $.ajax({
        url: data_bs_url,
        method: 'GET',
        success: function (snsr) {

          var modalTitle = exampleModal.querySelector('.modal-title')
          modalTitle.textContent = 'Control ' + snsr.snsr_name
          var snsr_name = exampleModal.querySelector('#snsr_name')
          snsr_name.value = snsr.snsr_name

          // Start Pump Control ----------------------------------------------
          var pmp_min_lvl =  exampleModal.querySelector('#pmp_min_lvl')
          var pmp_max_lvl =  exampleModal.querySelector('#pmp_max_lvl')
          pmp_min_lvl.value = snsr.pmp_min_lvl
          pmp_max_lvl.value = snsr.pmp_max_lvl
          snsr_pump.update({
              from:  snsr.pmp_min_lvl,
              to: snsr.pmp_max_lvl,
              onChange: function (data) {
                pmp_min_lvl.value = data.from
                pmp_max_lvl.value = data.to
              },
              onFinish: function (data) {
                $.ajax({
                  url: "module_uxpixel/sensor/"+ snsr.snsr_id,
                  method: "PUT",
                  data: { control_type: 'control_pump', pmp_min_lvl: data.from, pmp_max_lvl: data.to},
                });
              },
          });
          // End Pump Control ----------------------------------------------

          // Start Water Control ----------------------------------------------
          var wtr_min_lvl =  exampleModal.querySelector('#wtr_min_lvl')
          var wtr_max_lvl =  exampleModal.querySelector('#wtr_max_lvl')
          wtr_min_lvl.value = snsr.wtr_min_lvl
          wtr_max_lvl.value = snsr.wtr_max_lvl

          wtr_lvl.update({
              from:  snsr.wtr_min_lvl,
              to: snsr.wtr_max_lvl,
              onChange: function (data) {
                wtr_min_lvl.value = data.from
                wtr_max_lvl.value = data.to
              },

              onFinish: function (data) {
                $.ajax({
                  url: "module_uxpixel/sensor/"+ snsr.snsr_id,
                  method: "PUT",
                  data: { control_type: 'control_water', wtr_min_lvl: data.from, wtr_max_lvl: data.to},
                });
              },
          });
          // End Water Control ----------------------------------------------
        }, // End Sensor Ajx-Fetch
      }); // End Ajax Request
    }) // End Function
  }); // End Document Ready


  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 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