@extends('layouts.app')

@section('title')
    All Contacts
@endsection

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

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

@section('styles')
<!-- CSS DATATABLE -->
<link href="/vendor/datatables/css/datatables.bootstrap.css" rel="stylesheet">
<link href="/vendor/bootstrap-datepicker/css/bootstrap-datepicker.css" rel="stylesheet">
<style>
#chartdiv {
  width	: 100%;
  height	: 300px;
}
</style>
@endsection

@section('content')
@include('contacts.maps')
<div class="row">
    <div class="col-md-12">
      <div class="box">
        <div class="box-body table-responsive no-padding">
          <table id="contact-table" class="table table-hover">
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Device</th>
                <th>Address</th>
                <th>Phone Number</th>
                <th>Coordinate</th>
              </tr>
            </thead>
            <tfoot>
                <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Device</th>
                  <th>Address</th>
                  <th>Phone Number</th>
                  <th>Coordinate</th>
                </tr>
            </tfoot>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
</div>
@endsection

@section('scripts')
    <!-- SCRIPT DATATABLE -->
    <script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
    <script src="/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="/vendor/datatables/js/datatables.bootstrap.js"></script>
    <script type="text/javascript">
      $(function() {
        var table = $('#contact-table').DataTable({
            processing: true,
            serverSide: true,
            ajax:{
                url:'/contacts/data'
            },
            columns : [
              {data: 'id', name:'id', searchable: false},
              {data: 'contact_name', name: 'name'},
              {data: 'device_id', name: 'device_id', orderable: false, searchable: false},
              {data: 'contact_address', name: 'address'},
              {data: 'contact_phonenumber', name: 'phone_number'},
              {data: 'coordinate', name: 'coordinate', orderable: false, searchable: false},
            ]          
        });
        $('#contact-table tfoot th').each( function () {
          var title = $(this).text();
          if (title === "ID") {
            $(this).html( '' );
          }
          else if (title === "Coordinate") {
            $(this).html( '' );
          }
          else if (title === "Device") {
            $(this).html( '' );
          }
          else {
            $(this).html( '<input type="text" style="width: 100%;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();
            }
          });
        });
      });
    </script>
    <!-- END SCRIPT DATATABLE -->
    @include('contacts.scripts.maps', ['contacts' => $contacts])
@endsection