@extends('layouts.app')

@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="row">
    <div class="col-md-8">
      @include('visits.total_visits')
    </div>
    <div class="col-md-4">
      @include('visits.stats')
    </div>
  </div>
<div class="row">
    <div class="col-md-12">

        <div class="box">
          <div class="box-header">
            <div class="box-body table-responsive no-padding">
              <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>Contact</th>
                    <th>Comment</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>#</th>
                    <th>Visit ID</th>
                    <th>Related Ticket</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>User</th>
                    <th>Type</th>
                    <th>Contact</th>
                    <th>Comment</th>
                  </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
@endsection

@section('scripts')
@include('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:'/visits/data'
                // data: function(d) {
                    // d.startDate = $('#search-date').val();
                // }
            },
            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: 'createdat', 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: 'contact_name', name: 'contacts.name'},
              {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