@extends('layouts.app')

@section('css')
<link href="{{ asset('assets/css/amcharts.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/lib/amcharts/plugins/export/export.css') }}" rel="stylesheet" type="text/css" media="all">
@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">Energy Monitoring Analytics Dashboard</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 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-md-12 p-0 m-0">
        <div id="grph_energykWh" data-skin="dark" data-darkcolor="#000000" data-lightcolor="#FFFFFF" data-provider='@json($arrayEnergy)' data-days="{{ $numberOfDays }}"></div>
      </div>


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

    @include('layouts.inc.footer')

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

@endsection

@section('js')
<script src="{{ asset('assets/lib/amcharts/amcharts.js') }}"></script>
<script src="{{ asset('assets/lib/amcharts/serial.js') }}"></script>
<script src="{{ asset('assets/lib/amcharts/pie.js') }}"></script>
<script src="{{ asset('assets/lib/amcharts/plugins/export/export.min.js') }}"></script>
<script src="{{ asset('assets/lib/amcharts/themes/light.js') }}"></script>
<script src="{{ asset('assets/lib/amcharts/themes/dark.js') }}"></script>
<script id="chart_energy">

  document.addEventListener("DOMContentLoaded", function() {
    var dataContainer = document.getElementById('grph_energykWh');
    var skinMode = localStorage.getItem('skin-mode');
    var darkcolor = dataContainer.getAttribute('data-darkcolor');
    var lightcolor = dataContainer.getAttribute('data-lightcolor');
    var skin = dataContainer.getAttribute('data-skin');
    var theme = skinMode ? 'dark' : 'light';
    var color = (theme == 'dark') ? lightcolor : darkcolor;
    var dataProvider = JSON.parse(dataContainer.getAttribute('data-provider'));
    var numberOfDays = parseInt(dataContainer.getAttribute('data-days'));

    var exportdata = dataProvider.map(function(item) { delete item.x_url; return item; });

    var chart = AmCharts.makeChart( "grph_energykWh", {

      "type": "serial",

      "theme": theme,

      "titles": [
      {
        "text": "Energy Consumption (kWh) \n" +
            "{{ $meterPathName }} - {{ $srcmeterno }}" + "\n" +
            "{{ $srcdaterange }}",
        "size": 13,
        "color" : color,
      }
      ],

      "hideCredits":true,

      "dataDateFormat": "YYYY-MM-DD",
      "dataProvider": dataProvider,

      "addClassNames": true,
      "startDuration": 1.5,
      "marginLeft": 10,

      "categoryField": "x_dateIntrval",
      "categoryAxis": {
        "parseDates": true,
        "minPeriod": "DD",
        "autoGridCount": true,
        "gridCount": 10,
        "gridAlpha": 0.2,
        "gridColor": "#3da2f0",
        "axisColor": "#3da2f0",
        "dateFormats": [
          { "period": 'DD', "format": 'DD/MMM' },
          { "period": 'WW', "format": 'MMM/DD' },
          { "period": 'MM', "format": 'MMM' },
          { "period": 'YYYY', "format": 'YYYY'} ]
      },

      "valueAxes": [ {
        "id": "a1",
        "minimum": 0,
        "title": "Energy Consumption (kWh)",
        "gridAlpha": 0.2,
        "axisAlpha": 0.3
      } ],

      "graphs": [
        {
          "id": "g1",
          "valueField": "x_noKwh",
          "classNameField": "bulletClass",
          "title": "Energy",
          "type": "column",
          "fillAlphas": 0.7,
          "lineAlpha": 0, // stroke color
          "valueAxis": "a1",
          "labelText":"[[value]] kWh",
          "labelSize" : 20,
          "labelPosition": "bottom",
          "color": darkcolor, //chartlabelcolor
          "labelRotation": 270,
          "labelOffset": 15,
          "balloonText": "[[value]] kWh / [[x_dateIntrval]]",
          "legendValueText": "[[value]] kWh",
          "legendPeriodValueText": "/ Total [[value.sum]] kWh",
          //"lineColor": "#0dcaf0",
          "fillColors": ["#7CC491", "#60CE9A", "#ACD560"], //["#6f78f4", "#bf7cdc", "#e58cc6", "#fd8dac", "#ff9794"],  // Gradient colors
          "gradientOrientation": "vertical", // horizontal or "vertical"
          "alphaField": "alpha",
          "urlField": "x_url",
          //"fixedColumnWidth": 17,
          "clustered":false,
          "columnWidth": 0.35,
          "cornerRadiusTop" : 5,
        },


        {
          "id": "baseline",
          "title": "Baseline kWh",
          "behindColumns": true,
          "valueField": "x_baseline",
          "bullet": "circle",
          "bulletBorderAlpha": 1,
          "bulletBorderThickness": 2,
          "bulletAlpha": 0.5,
          "bulletSize": 2,
          "fillAlphas": 0.2,
          "fillColors": "#5176FF",
          "showBalloon" : true,
          "legendValueText": "[[value]] kWh",
          "lineColor": "#5176FF",
          "lineThickness": 4,
          "balloonText": "Baseline [[value]] kWh",
          "animationPlayed": true // Disable animation on reload
        }
      ],

      "depth3D": 12,
      "angle": 55,

      "chartScrollbar": {
      "scrollbarHeight": 20,
      "backgroundAlpha": 0,
      "selectedBackgroundAlpha": 0.1,
      "selectedBackgroundColor": color, //dynamic
      "graphFillAlpha": 0,
      "graphLineAlpha": 0.5,
      "selectedGraphFillAlpha": 1,
      "selectedGraphLineAlpha": 0,
      "autoGridCount": true,
      "color": color //dynamic
      },

      "chartCursor": {
        "zoomable": true,
        "categoryBalloonDateFormat": "DD",
        "cursorAlpha": 0,
        "valueBalloonsEnabled": true,
        "valueLineBalloonEnabled": true,
        "valueLineEnabled": true,
        "cursorAlpha": 0.1,
        "cursorColor": "#506fd9", //dynamic
        "valueBalloonColor": "#00FF00",
        "fullWidth": true
      },

      "legend": {
        "bulletType": "round",
        "equalWidths": false,
        "valueWidth": 300,
        "useGraphSettings": true,
        "color": color, //dynamic
        "valueText": "[[value]] kWh - " + numberOfDays + " days", // Dynamically adding numberOfDays
      },

      "export": {
        "enabled": true,
        "dataProvider": exportdata,
        "fileName": "{{ $meterPathName }} - {{ $srcmeterno }}",
        "columnNames": {
          "x_mtrNo": "Meter Number",
          "x_mtrName": "Meter Name",
          "x_dateIntrval": "Date",
          "x_totalEnergy": "Electric Usage (kwh)",
          "x_noKwh": "Energy Usage (kwh)",
          "x_baseline": "Baseline (kwh)",
          "x_url": "URL"
        },
        "skipColumns": ["URL"]
      }

    });

    // Apply the color dynamically if needed
    dataContainer.setAttribute('data-color',color);

    chart.addListener("dataUpdated", zoomChart);

    // Call zoomChart on chart initialization
    zoomChart();

    // Function to adjust the zoom based on the device
    function zoomChart() {
      // Determine the number of items to display based on screen width
      var numberOfItems;
      if (window.innerWidth < 768) { // Mobile devices
          numberOfItems = 10;
      } else { // Desktops and larger devices
          numberOfItems = 31;
      }
      // Zoom to the appropriate number of items
      chart.zoomToIndexes(dataProvider.length - numberOfItems, dataProvider.length);
    }

      // Redraw the chart when the window is resized
      window.addEventListener('resize', zoomChart);

    // Function to adjust chart size for printing
    function handlePrint(event) {
      if (event.matches) {
        var chartDiv = document.getElementById('grph_energykWh');
        chartDiv.style.width = '100%';
        chartDiv.style.height = 'auto';

        // Ensure the chart redraws itself correctly for print
        chart.invalidateSize();
      } else {
        var chartDiv = document.getElementById('grph_energykWh');
        chartDiv.style.width = '';
        chartDiv.style.height = '500px'; // Reset to original size
        // Ensure the chart redraws itself correctly after print
        chart.invalidateSize();
      }
    }

    // Listen for print media changes
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(handlePrint);

    // Trigger the resize when print is initiated
    window.onbeforeprint = function() {
        handlePrint(mediaQueryList);
    };

    // Revert the chart size after printing is done
    window.onafterprint = function() {
        handlePrint({ matches: false });
    };

  }); //End DOMContentLoaded

</script>

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