@extends('layouts.backend')

@section('content')

    <!-- Hero -->
    <div class="bg-image" style="background-image: url('./../../../media/photos/photo13@2x.jpg');">
        <div class="bg-black-50">
            <div class="content content-full">
                <div class="d-flex justify-content-between align-items-center">
                    <h1 class="flex-fill font-size-h2 text-white my-2">
                        <i class="fa fa-boxes text-white-50 mr-1"></i> {{ $title }}
                    </h1>
                </div>
            </div>
        </div>
    </div>
    <!-- END Hero -->

    <!-- Page Content -->
    <div class="content">
        <div class="row chartFilter" style="display: none;">
            <div class="col-xl-6 offset-xl-6">
                <div class="form-row">
                    <div class="form-group col-xl-6">
                        <input type="text" class="js-flatpickr form-control bg-white" id="DashboardDateInterval" name="DashboardDateInterval" placeholder="{{ __('Select Date Range') }}" data-mode="range" data-max-date="today" value="{{ $defDateRange }}">
                    </div>
                    <div class="form-group col-xl-6">
                        <button type="button" class="btn btn-primary mr-1 mb-3 findDashboardDate" data-url="{{ route('DashboardChartFilter') }}">
                            <i class="fa fa-fw fa-play mr-1"></i> {{ __('Filter') }}
                        </button>
                        <button type="button" class="btn btn-primary mr-1 mb-3 clearDashboardDate" data-url="{{ route('clearDashboardChartFilter') }}">
                            {{ __('Clear') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Resources -->
        <script src="https://www.amcharts.com/lib/4/core.js"></script>
        <script src="https://www.amcharts.com/lib/4/charts.js"></script>
        <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

        <!-- Chart code -->
        <script>
            am4core.ready(function() {

                // Themes begin
                am4core.useTheme(am4themes_animated);
                // Themes end

                // Create chart instance
                var chart = am4core.create("deviceChart", am4charts.XYChart);
                chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
                // Add data
                //chart.data = firebasedb.loadChartData({!! $device !!}, '{!! $defDateRange !!}');
                chart.data = generateChartData({!! $data !!});
                /*
                firebasedb.refreshchart({!! $device !!}, '{{ $type }}', function(newData) {
                    chart.addData({ date: newData.date, value: newData.value });
                });
                */
// Create axes
                var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
                dateAxis.tooltipDateFormat = "MMMM d, HH:mm:ss";
                /*
                dateAxis.baseInterval = { timeUnit: 'minutes', count: 5 };
                dateAxis.cursorTooltipEnabled = true;
                */
                var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
                var series = chart.series.push(new am4charts.LineSeries());
                series.dataFields.valueY = "value";
                series.dataFields.dateX = "date";
                series.strokeWidth = 2;
                series.minBulletDistance = 2;
                series.tooltipText = "{valueY}\n{warningText}";
                series.tooltip.pointerOrientation = "vertical";
                series.tooltip.background.cornerRadius = 20;
                series.tooltip.background.fillOpacity = 0.5;
                series.tooltip.label.padding(12,12,12,12);
                series.propertyFields.stroke = "color";
                series.propertyFields.fill = "color";

// Add scrollbar
                chart.scrollbarX = new am4charts.XYChartScrollbar();
                chart.scrollbarX.series.push(series);

// Add cursor
                chart.cursor = new am4charts.XYCursor();
                chart.cursor.xAxis = dateAxis;
                chart.cursor.snapToSeries = series;

                function generateChartData(data) {
                    var chartData = [];
                    $.each(data, function(i, v) {
                        newDate = new Date(v.date);

                        chartData.push({
                            date: newDate,
                            value: v.value,
                            color: v.color,
                            warningText: v.warningText
                        });
                    });
                    return chartData;
                }

            }); // end am4core.ready()
        </script>

        <!-- HTML -->
        <div id="deviceChart" style="height:500px;"></div>

    </div>
    <!-- END Page Content -->

@endsection