@extends('layouts.admin')

@section('title')
    All Tickets
@endsection

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

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

@section('content')
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-md-8">
      @include('admin.tickets.definitions')
      </div>
      <div class="col-md-4">
        @include('admin.tickets.stats')
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-body">
  <div class="row">
      <div class="col-md-12">
          <div class="box">
              <div class="box-body table-responsive no-padding">
                <a href="/admin/tickets/create">
                  <button class="btn btn-info mb-2">New Ticket</button>
                </a>
                <table id ='ticket-table' class="table table-hover">
                  <thead>
                    <tr>
                      <th width="10"></th>
                      <th>#</th>
                      <th>Ticket ID</th>
                      <th>Terminal</th>
                      <th>Title</th>
                      <th>Severity</th>
                      <th>Status</th>
                      <th>Activity</th>
                      <th>Assign To</th>
                      <th>Create By</th>
                      <th>Last Update</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th width="10"></th>
                      <th>#</th>
                      <th>Ticket ID</th>
                      <th>Terminal</th>
                      <th>Title</th>
                      <th>Severity</th>
                      <th>Status</th>
                      <th>Activity</th>
                      <th>Assign To</th>
                      <th>Create By</th>
                      <th>Last Update</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.box-body -->
            </div>
            <!-- /.box -->
      </div>
  </div>
  </div>
</div>
@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="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<style>
#chartdiv {
  width	: 100%;
  height	: 300px;
}
</style>
@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 = $('#ticket-table').DataTable({
            processing: true,
            serverSide: true,
            ajax:{
                url:'/admin/tickets/data'
            },
            columns : [
              {data: 'placeholder', name: 'placeholder' },
              {data: 'DT_RowIndex', name:'DT_RowIndex', orderable: false, searchable: false},
              {data: 'ticket_id', name: 'tickets.ticket_id'},
              {data: 'device_id', name: 'tickets.node.id'},
              {data: 'ticket_title', name: 'tickets.title', orderable: false, searchable: false},
              {data: 'severity', name: 'tickets.severity'},
              {data: 'status', name: 'tickets.status'},
              {data: 'activity', name: 'tickets.node.status'},
              {data: 'assignee_id', name: 'tickets.assignee_id', searchable: false},
              {data: 'created_by', name: 'tickets.created_by', searchable: false},
              {data: 'last_update', name: 'tickets.updated_at',searchable: false},
            ],
        });
        $('#ticket-table tfoot th').each( function () {
          var title = $(this).text();
          if (title === "Severity") {
            $(this).html( '<select style="width: 100%;font-size: 12px;padding: 3px 5px;" class="form-control"><option value="">-</option> <option value="critical">Critical</option> <option value="urgent">Urgent</option> <option value="important">Important</option><option value="monitor">Monitor</option>' );
          }
          else if (title === "Status") {
            $(this).html( '<select style="width: 100%;font-size: 12px;padding: 3px 5px;" class="form-control"><option value="">-</option> <option value="open">Open</option> <option value="progress">Progress</option> <option value="resolved">Resolved</option> <option value="closed">Closed</option> <option value="reopen">Reopen</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 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> <option value="unknown">Unknown</option>' );
          }
          else if (title === "#") {
            $(this).html( '' );
          }
          else if (title === "Title") {
            $(this).html( '' );
          }
          else if (title === "Last Update") {
            $(this).html( '' );
          }
          else if (title === "Assign To") {
            $(this).html( '' );
          }
          else if (title === "Create By") {
            $(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();
            }
          });
          $( 'select', this.footer() ).on( 'change', function () {
            if ( that.search() !== this.value ) {
              that
              .search( this.value )
              .draw();
            }
          });
        });
      });
    </script>
    <!-- END SCRIPT DATATABLE -->
    @include('admin.tickets.scripts.maps', ['tickets' => $tickets])
@endsection