@extends('layouts.app')

@section('title')
    All Nodes
@endsection

@section('description')
    All nodes is here.
@endsection

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

@section('styles')
<!-- CSS DATATABLE -->
<link href="/vendor/datatables/css/datatables.bootstrap.css" rel="stylesheet">
@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-body table-responsive no-padding">
                <!-- <div style="padding:10px"class="row">
                  <div class="col-lg-6">
                    <h4>Search :</h4>
                    <div class="input-group">
                      <span class="input-group-btn">
                        <button id="mySearchButton" class="btn btn-default" type="button">Go</button>
                      </span>
                      <input id="mySearchText" type="text" class="form-control" placeholder="Search for...">
                    </div>
                </div>
              </div> -->
                <table id="nodes-table" class="table table-hover">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Device ID</th>
                      <th>Contact</th>
                      <th>District</th>
                      <th>Ticket</th>
                      <th>Phone Number</th>
                      <th>S/N</th>
                      <th>F/W</th>
                      <th>Last Timestamp</th>
                      <th>Last Data</th>
                      <th>Availability</th>
                      <th>Activity</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th>#</th>
                      <th>Device ID</th>
                      <th>Contact</th>
                      <th>District</th>
                      <th>Ticket</th>
                      <th>Phone Number</th>
                      <th>S/N</th>
                      <th>F/W</th>
                      <th>Last Timestamp</th>
                      <th>Last Data</th>
                      <th>Availability</th>
                      <th>Activity</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
          </div>
    </div>
</div>
</div>
@endsection

@section('scripts')
  <!-- SCRIPT DATATABLE -->
  <script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
  <script src="/vendor/datatables/js/datatables.bootstrap.js"></script>
  <script type="text/javascript">
      $(function() {
          var table = $('#nodes-table').DataTable({
              processing: true,
              serverSide: true,
              ajax: '/nodes/data',
              columns : [
                {data: 'DT_RowIndex', name:'DT_RowIndex', orderable: false, searchable: false},
                {data: 'nodes_device_id', name: 'nodes.device_id'},
                {data: 'contacts_name', name: 'contacts.name'},
                {data: 'contacts_district', name: 'contacts.district'},
                {data: 'ticket_id', name: 'ticket_id.district', orderable: false, searchable: false},
                {data: 'contacts_phone_number', name: 'contacts.phone_number'},
                {data: 'nodes_serial_number', name: 'nodes.serial_number'},
                {data: 'nodes_firmware_version', name: 'nodes.firmware_version'},
                {data: 'nodes_data_timestamp', name: 'nodes.data_timestamp',orderable: false, searchable:false},
                {data: 'nodes_status_timestamp', name: 'nodes.status_timestamp', orderable: false, searchable:false},
                {data: 'status', name: 'nodes.status'},
                {data: 'activity', name: 'nodes.activity_status'},
              ],
            });
            $('#nodes-table tfoot th').each( function () {
              var title = $(this).text();
              if (title === "#") {
                $(this).html( '' );
              }
              else if (title === "Ticket") {
                $(this).html( '' );
              }
              else if (title === "Last Timestamp") {
                $(this).html( '' );
              }
              else if (title === "Last Data") {
                $(this).html( '' );
              }
              else if (title === "Activity") {
                $(this).html( '<select style="width: 100%;font-size: 12px;padding: 3px 5px;" class="form-control"><option value="">-</option> <option value="active">Active</option> <option value="inactive">Inactive</option>' );
              }
              else if (title === "Availability") {
                $(this).html( '<select style="width: 100%;font-size: 12px;padding: 3px 5px;" class="form-control"><option value="">-</option> <option value="live">Live</option> <option value="outage">Outage</option> <option value="revoked">Revoked</option>' );
              }
              else {
                $(this).html( '<input type="text" style="width:80%;font-size: 12px;padding: 3px 5px;" class="form-control" placeholder="Search '+title+'" />' );
              }
            });
            table.columns().every( function () {
              var that = this;
              $( 'input', this.footer() ).on( 'change', function () {
                if ( that.search() !== this.value ) {
                  that
                  .search( this.value)
                  .draw();
                }
              });
              $( 'select', this.footer() ).on( 'change', function () {
                if ( that.search() !== this.value ) {
                  that
                  .search(this.value)
                  .draw();
                }
              });
            });
          });
            // $('#mySearchButton').on( 'keyup click', function () {
            //   table.search($('#mySearchText').val()).draw();
            // } );
  </script>
  <!-- END SCRIPT DATATABLE -->
    <!-- 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