@extends('layouts.app')

@section('title')
    My Tickets
@endsection

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

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

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-body table-responsive no-padding">
              <table id ='ticket-table' class="table table-hover">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Ticket ID</th>
                    <th>Device ID</th>
                    <th>Contact</th>
                    <th>Title</th>
                    <th>Severity</th>
                    <th>Status</th>
                    <th>Availability</th>
                    <th>Activity</th>
                    <th>Assign To</th>
                    <th>Create By</th>
                    <th>Last Update</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>#</th>
                    <th>Ticket ID</th>
                    <th>Device ID</th>
                    <th>Contact</th>
                    <th>Title</th>
                    <th>Severity</th>
                    <th>Status</th>
                    <th>Availability</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>
@endsection
@section('styles')
<!-- CSS DATATABLE -->
<link href="/datatables/css/datatables.bootstrap.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/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="/datatables/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
    <script src="https://datatables.yajrabox.com/js/datatables.bootstrap.js"></script>
    <script type="text/javascript">
      $(function() {
        var table = $('#ticket-table').DataTable({
            processing: true,
            serverSide: true,
            ajax:{
                url:'/tickets/mydata'
            },
            columns : [
              {data: 'DT_RowIndex', name:'DT_RowIndex', orderable: false, searchable: false},
              {data: 'ticket_id', name: 'tickets.ticket_id'},
              {data: 'device_id', name: 'nodes.device_id'},
              {data: 'contact_name', name: 'contacts.name'},
              {data: 'ticket_title', name: 'tickets.title'},
              {data: 'severity', name: 'tickets.severity'},
              {data: 'status', name: 'tickets.status'},
              {data: 'availability', name: 'nodes.status'},
              {data: 'activity', name: 'nodes.activity_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('tickets.scripts.maps', ['tickets' => $tickets])
@endsection