@extends('layouts.app')

@section('content')
<div class="container" style='max-width:100% !important;padding:0px;'>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Device Info 
                        <div class="pull-right">
                            <button id='saveButton' type="button" class="btn btn-sm btn-primary w-xs" style='color:#fff;'>Save</button>
                            <button type="button" class="btn btn-sm white w-xs" style='color:#2e3e4e;' onclick='window.history.back()'>Back</button>
                        </div>
                    </h3>
                </div>

                <div class="panel-body">
                    <div class='col-md-7'>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title clearfix">
                                    Device {{$device->orbit_device_id}} - <span id="GraphStatus">History</span>
                                    
                                    <input type="hidden" id="device_id" value="{{$device->orbit_device_id}}"/>
                                    
                                    <button type='button' id="refresh" class="btn btn-xs white pull-right" style="color: black;margin-left:5px;">Stop</button>
                                    
                                    <a href="#" id="LiveHistoryBtn" class="btn btn-xs white pull-right" style="color: black">
                                        Live
                                    </a>
                                    
                                    
                                </div>
                            </div>
                            <div class="panel-body">
                                <div id="HistoryRange" class="clearfix">
                                    <div class="alert alert-info pull-left" style="font-size:15pt; padding: 5px 10px;">                            
                                        Enter a date range in order to see device history
                                    </div>

                                    <div class="form-group pull-right" style="padding: 2px 4px;">
                                        <input type="text" class="form-control datepicker" id="GraphEndDate" />
                                    </div>

                                    <div class="form-group pull-right" style="padding: 2px 4px;">
                                        <input type="text" class="form-control datepicker" id="GraphStartDate" />
                                    </div>
                                </div>

                                <div data-device-id="{{$device->orbit_device_id}}" id="graph" style="width:100%">
                                    <h4>No data to display</h4>
                                </div>
                            </div>
                        </div>
                        <!--div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div!-->
                    </div>

                    <div class='col-md-5'>

                        <div id="accordion" style='height:850px;overflow-y:auto;'>
                            @if(count($trees)>0)
                                @include('devices.recursive', ['trees' => $trees->where('parent_id',0), 'all_trees' => $trees, 'level' => 0])
                            @endif
                        </div>
                    </div>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/jscolor.js') }}"></script>
<script src="{{ asset('js/devices/info.js') }}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<script type="text/javascript">
    $('.collapse').on('shown.bs.collapse', function(){
        $(this).parent().find(".acc_span").html('-');
    }).on('hidden.bs.collapse', function(){
        $(this).parent().find(".acc_span").html('+');
    });
    
    var period = {!! ($device->time_to_connect ?? 30)*1000 !!};
    
    $(document).ready(function(){
        $('#LiveHistoryBtn').click();
        
        setInterval(function() {
            if($('#refresh').text()=='Stop'){
                get_current_values($('#device_id').val());
            }
        }, period);
    });
    
    
    function get_current_values(id){        
    
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url:'/ajax_get_device_current_values',
                    type: 'POST',
            data: { 'id' : id},

            success: function(response) {
                        for(var i in response){
                            if($('#'+response[i].slot_id+'Save:visible').length==0){
                                $('#'+response[i].slot_id+'Input').val(response[i].value);
                                $('#'+response[i].slot_id+'Span').text(response[i].value);
                            }
                        }
                    }
        });
    }
    
    
    $('#refresh').on('click',function(){
        if($(this).text()=='Stop'){
            $(this).text('Start');
        }
        else{
            $(this).text('Stop');
        }
    });
</script>
@endsection