@extends('layouts.app')

@section('title')
    Sensors
@endsection

@section('description')
    Last 100 data is here.
@endsection

@section('breadcrumb')
    <li class="active"><a href="/sensors">All Data</a></li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-8">
      @include('nodes.maps')
    </div>
    <div class="col-md-4">
      @include('nodes.total_availability')
      @include('nodes.total_activity')
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-header">

              <div class="box-title">
                <div class="input-group input-group-sm" style="width: 250px;">
                  <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">

                  <div class="input-group-btn">
                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                  </div>
                </div>
              </div>

              <div class="box-tools">
                <ul class="pagination pagination-sm no-margin pull-right">
                  <li><a href="#">&laquo;</a></li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">&raquo;</a></li>
                </ul>
              </div>

            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
              <table class="table table-hover">
                <tr>
                  <th>#</th>
                  <th>Device ID</th>
                  <th>Temperature (C)</th>
                  <th>Seismic (dB)</th>
                  <th>Rain</th>
                  <th>CO2 (%)</th>
                  <th></th>
                </tr>
                @forelse ($sensors as $index => $datum)
                    <tr>
                    <td>{{ $index+1 }}</td>
                    @if($datum->node()->exists())
                      <td><a href="{{ $datum->node->path() }}">{{ $datum->device_id }}</a></td>
                    @else
                      <td>Uknown device</td>
                    @endif
                    @foreach(json_decode($datum->content) as $index => $json_data)
                      @if($index != 'device_id' && $index != 'session_id')
                       <td>{{ $json_data }}</td>
                      @endif
                    @endforeach
                    <td><a href="/sensors/{{ $datum->id }}">View detail</a></td>                    
                    </tr>                   
                @empty
                    <tr><td>No data.</td></tr>                
                @endforelse
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
    </div>
</div>
@endsection

@section('scripts')
    <!-- ChartJS 1.0.1 -->
    <script src="/plugins/chartjs/Chart.min.js"></script>
    <!-- FastClick -->
    <script src="/plugins/fastclick/fastclick.js"></script>
    @include('nodes.scripts.total_availability')
    @include('nodes.scripts.total_activity')
    @include('nodes.scripts.maps', ['nodes' => $nodes])
@endsection