@extends('layouts.admin')

@section('title')
    All Visits
@endsection

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

@section('breadcrumb')
    <li class="active"><a href="/visits">All Visits</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">
<link rel="stylesheet" href="/plugins/amcharts/plugins/export/export.css" type="text/css" media="all" />
<style>
#chartdiv {
  width	: 100%;
  height	: 300px;
}
</style>
@endsection

@section('content')
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-md-8">
        @include('admin.visits.total_visits')
      </div>
      <div class="col-md-4">
        @include('admin.visits.stats')
      </div>
    </div>
    <a href="/admin/visits/create">
      <button class="btn btn-info mb-2">New Visit</button>
    </a>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <table id="visit-table" class="table table-hover">
      <thead>
        <tr>
          <th>#</th> 
          <th>Visit ID</th>
          <th>Related Ticket</th>
          <th>Date</th>
          <th>Time</th>
          <th>User</th>
          <th>Type</th>
          <th>Comment</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
@endsection

@section('scripts')
@include('admin.visits.scripts.amchart', ['total_visits' => $total_visits])

    <!-- 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 = $('#visit-table').DataTable({
            processing: true,
            serverSide: true,
            ajax:{
                url:'/admin/visits/data'
            },
            columns : [
              {data: 'DT_RowIndex', name:'DT_RowIndex', orderable: false, searchable: false},
              {data: 'visitid', name: 'visits.visit_id'},
              {data: 'nomer_ticket', name: 'tickets.ticket_id'},
              {data: 'created_at', name: 'visits.created_at'},
              {data: 'time', name: 'created_at', orderable: false, searchable:false},
              {data: 'name_user', name: 'users.name'},
              {data: 'type', name: 'visits.type'},
              {data: 'comment', name: 'visits.comment', orderable: false, searchable:false},
            ],
        });
        // $('#visit-table tfoot th').each( function () {
        //   var title = $(this).text();
        //   if (title === "Date") {
        //     $(this).html( '<input id="datepicker" style="width: 71%;font-size: 12px;padding: 3px 5px;" class="date form-control" type="text" placeholder="Search '+title+'" />' );
        //   }
        //   else if (title === "#") {
        //     $(this).html( '' );
        //   }
        //   else if (title === "Comment") {
        //     $(this).html( '' );
        //   }
        //   else if (title === "Time") {
        //     $(this).html( '' );
        //   }
        //   else if (title === "Type") {
        //     $(this).html( '<select style="width: 100%;font-size: 12px;padding: 3px 5px;" class="form-control"><option value="">-</option> <option value="installation">Installation</option> <option value="maintenance">Maintenance</option> <option value="dismantle">Dismantle</option> <option value="survey">Survey</option>' );
        //   }
        //   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();
        //     }
        //   });
        //   $( 'select', this.footer() ).on( 'change', function () {
        //     if ( that.search() !== this.value ) {
        //       that
        //       .search( this.value )
        //       .draw();
        //     }
        //   });
        // });
        // $('.date').datepicker({
        //   format: 'yyyy-mm-dd'
        // });
      });
    </script>
@endsection