@extends('layouts.app')

@section('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-4">
      <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="#">{{ $Title }}</a></li>
          <li class="breadcrumb-item active" aria-current="page">{{ $Subtitle }}</li>
        </ol>
        <h4 class="main-title mb-0">{{ $Title }}</h4>
        <p>{{ Auth::routes(); }}</p>
      </div>
      <div class="d-flex gap-2 mt-3 mt-md-0">

        @if(url()->previous() && url()->previous() !== url()->current())
        <form action="{{ url()->previous() }}">
          @csrf
          <button class="btn btn-white d-flex align-items-center gap-2"><i class="ri-arrow-left-circle-fill fs-18 lh-1"></i>Back</button>
        </form>
        @endif

        <button onClick="window.location.reload();" class="btn btn-white d-flex align-items-center gap-2"><i class="ri-refresh-line 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 class="row g-3 mb-2">

      @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><!-- row -->


    <div class="col-xxl-12">
      <div class="row g-3">

        <div class="col-xs-12 col-md-12 col-xl-12 col-xxl-5">
          <div class="card card-post">
              <div class="card-header">
                <h6 class="card-title">{{ $Title }} / {{ $Subtitle }}</h6>
              </div><!-- card-header -->
              <div class="card-body p-3">

                <div class="row g-3">
                  <div class="col-md-6">
                    <center><img style="max-height: 300px;" src="{{ asset('assets/img/device/av_packageunit_01.png') }}"/></center>
                  </div>

                  <div class="col-md-6">
                    <form class="row g-3">
                      {{-- Temperature Setting --}}
                      <div class="row g-3">
                        <div class="col">
                          <label for="min_temp" class="form-label">Room Temp (°C)</label>
                          <input value="24.32" type="text" class="form-control form-control-lg" id="min_temp">
                        </div>
                        <div class="col">
                          <label for="max_temp" class="form-label">Return Temp (°C)</label>
                          <input value="34.32" type="text" class="form-control form-control-lg" id="max_temp">
                        </div>
                        <div class="col">
                          <label for="supp_temp" class="form-label">Supply Temp (°C)</label>
                          <input value="34.32" type="text" class="form-control form-control-lg" id="max_temp">
                        </div>
                      </div>
                      {{-- Compressor Speed --}}
                      <div class="row g-3">
                        <div class="col">
                          <label for="min_comp" class="form-label">Compressor (%)</label>
                          <input value="55" type="text" class="form-control form-control-lg" id="min_comp">
                        </div>
                        <div class="col">
                          <label for="min_comp" class="form-label">Load (%)</label>
                          <input value="70" type="text" class="form-control form-control-lg" id="max_comp">
                        </div>
                      </div>
                      {{-- Blower Speed --}}
                      <div class="row g-3">
                        <div class="col">
                          <label for="min_blower" class="form-label">Power (kw)</label>
                          <input value="45" type="text" class="form-control form-control-lg" id="min_blower">
                        </div>
                        <div class="col">
                          <label for="max_blower" class="form-label">Saving (%)</label>
                          <input value="70" type="text" class="form-control form-control-lg" id="max_blower">
                        </div>
                      </div>
                    </form>
                  </div>
                </div>

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

        <div class="col-xs-12 col-md-12 col-xl-12 col-xxl-7">
          <div class="card card-post">
            <div class="card-header">
              <h6 class="card-title">Kilowatt vs Temperature</h6>
            </div><!-- card-header -->
            <div class="card">
                <div id="chartdiv" style="width: 100%; height: 500px;"></div>
            </div>
          </div>
        </div>

      </div><!-- end row -->
    </div><!-- end col-xxl-12 -->


    @include('layouts.inc.footer')

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

  @endsection

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

    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/plugins/exporting.js"></script>

    <script src="{{ asset('assets/data/xy_kw_vs_temp.js') }}"></script>
    <script>

      // import file data
      //   var data = [{}];

      // Create root element
      var root = am5.Root.new("chartdiv");


      // Set themes
      root.setThemes([
        am5themes_Animated.new(root)
      ]);

      // Create chart
      var chart = root.container.children.push(am5xy.XYChart.new(root, {
        panX: true, // true | fakse
        panY: true, // true | fakse
        wheelY: "zoomX", // zoomX | none
        layout: root.verticalLayout,
        pinchZoomX: true
      }));

      // Create color
      chart.get("colors").set("step", 2);


      // Create axes
      var xAxis = chart.xAxes.push(
        am5xy.GaplessDateAxis.new(root, {
          baseInterval: { timeUnit: "minute", count: 1 },
          renderer: am5xy.AxisRendererX.new(root, {}),
          tooltip: am5.Tooltip.new(root, {})
        })
      );
      xAxis.children.push(am5.Label.new(root, {
        text: "Package Unit / Level 1 G B1",
        textAlign: 'center',
        x: am5.p50,
        fontWeight: 'bold'
      }));


      // kw axis render
      var kwAxisRenderer = am5xy.AxisRendererY.new(root, {});
      kwAxisRenderer.grid.template.set("forceHidden", true);
      var kwAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: kwAxisRenderer,
        tooltip: am5.Tooltip.new(root, {})
      }));
      kwAxis.children.push(am5.Label.new(root, {
        text: "kw",
        textAlign: 'center',
        y: am5.p50,
        x: am5.p50,
        fontWeight: 'bold',
        rotation: -90,
      }));

      // temperature axis render
      var temperatureAxisRenderer = am5xy.AxisRendererY.new(root, { opposite: true });
      temperatureAxisRenderer.grid.template.set("forceHidden", true);
      var temperatureAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: temperatureAxisRenderer,
        tooltip: am5.Tooltip.new(root, {})
      }));
      temperatureAxis.children.push(am5.Label.new(root, {
        text: 'Temperature °C',
        textAlign: 'center',
        y: am5.p50,
        rotation: -90,
        fontWeight: 'bold'
      }));


      // Create kw series ===============
      var kwSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
        name: "Kilowatt",
        xAxis: xAxis,
        yAxis: kwAxis,
        valueYField: "kw_usage",
        valueXField: "date",
        tooltip:am5.Tooltip.new(root, {
          labelText:"{valueY} kw"
        })
      }));
      kwSeries.data.processor = am5.DataProcessor.new(root, {
        dateFields: ["date"],
        dateFormat: "yyyy-MM-dd HH:mm"
      });
      kwSeries.children.push(am5.Label.new(root, {
        text: "Kilowatt vs Temperature",
        textAlign: 'center',
        x: am5.p50,
        fontWeight: 'bold'
      }));


      // Create temp_1 series ===============
      var temp1Series = chart.series.push(am5xy.LineSeries.new(root, {
        name: "Return : ",
        xAxis: xAxis,
        yAxis: temperatureAxis,
        valueYField: "temp_01",
        valueXField: "date",
        tooltip:am5.Tooltip.new(root, {
          labelText:"{name} {valueY} °C"
        })
      }));
      temp1Series.strokes.template.setAll({ strokeWidth: 2 });
      temp1Series.bullets.push(function() {
        var graphics = am5.Circle.new(root, {
          strokeWidth: 2,
          radius: 5,
          stroke: temp1Series.get("stroke"),
          fill: root.interfaceColors.get("background"),
        });
        return am5.Bullet.new(root, {
          sprite: graphics
        });
      });


      // Create temp_2 series ===============
      var temp2Series = chart.series.push(am5xy.LineSeries.new(root, {
        name: "Room : ",
        xAxis: xAxis,
        yAxis: temperatureAxis,
        valueYField: "temp_02",
        valueXField: "date",
        tooltip:am5.Tooltip.new(root, {
          labelText:"{name} {valueY} °C"
        })
      }));
      temp2Series.strokes.template.setAll({ strokeWidth: 2 });
      temp2Series.bullets.push(function() {
        var graphics = am5.Circle.new(root, {
          strokeWidth: 2,
          radius: 5,
          stroke: temp1Series.get("stroke"),
          fill: root.interfaceColors.get("background"),
        });
        return am5.Bullet.new(root, {
          sprite: graphics
        });
      });

      // Add cursor
      chart.set("cursor", am5xy.XYCursor.new(root, {
        xAxis: xAxis,
        yAxis: kwAxis
      }));

      // Export list
      var exporting = am5plugins_exporting.Exporting.new(root, {
        menu: am5plugins_exporting.ExportingMenu.new(root, {}),
        dataSource: data,
        filePrefix: "Package Unit Data"
      });

      exporting.events.on("dataprocessed", function(ev) {
        for(var i = 0; i < ev.data.length; i++) {
          ev.data[i].sum = ev.data[i].value + ev.data[i].value2;
        }
      });

      exporting.get("menu").set("items", [{
        type: "format",
        format: "png",
        label: "Export Image"
      }, {
        type: "format",
        format: "csv",
        label: "Export Excel"
      }, {
        type: "separator"
      },{
        type: "format",
        format: "pdf",
        label: "Export Pdf"
      },{
        type: "separator"
      }, {
        type: "format",
        format: "print",
        label: "Print"
      }]);


      xAxis.data.setAll(data);
      kwSeries.data.setAll(data);
      temp1Series.data.setAll(data);
      temp2Series.data.setAll(data);


    </script>


  @endsection