@extends('layouts.admin_default')
@section('title', 'Tickets Table')
@section('page', 'Tickets / List')
@section('content')
<div class="layout-px-spacing">
   <div class="row layout-top-spacing">
      <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
         <div class="widget-content widget-content-area br-6">
            <div id="delete_bd_ms"></div>
             @if(isset($errors) && $errors->any())
             @foreach($errors->all() as $error )
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
                {{$error}}
            </div>
            @endforeach
            @endif
            @if(session()->has('message'))
            <div class="alert alert-success fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('message') }}
            </div>
            @elseif(session()->has('error'))
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('error') }}
            </div>
            @endif

            
            <div class="mb-4 mt-4">
               <table id="multi-column-ordering" class="table table-hover">
                  <thead>
                     <tr>
                        <!-- <th><input type="checkbox" class="new-control-input" id="contact-check-all"></th> -->
                        <th>Ticket Id</th>
                        <th>User Name</th>
                        <th>Product Name</th>
                        <th>Product Serial No</th>
                        <th>Service Type</th>
                        <th>Remark</th>
                        <th>Created Date</th>
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody id="tableItem">
                  </tbody>
                  <!-- <tfoot>
                     <tr>
                        <th>Ticket Id</th>
                        <th>User Name</th>
                        <th>Product Name</th>
                        <th>Product Serial No</th>
                        <th>Service Type</th>
                        <th>Remark</th>
                        <th>Created Date</th>
                        <th>Action</th>
                    </tr> -->
                  </tfoot>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>






@endsection
@section('footer')

<script type="text/javascript">
   $(document).ready(function(){
     $('#multi-column-ordering').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        ajax: "{{route('getTicketList')}}",
        columns: [
            // { data: 'checkall', orderable: false, searchable: false },
            { data: 'ticket_id' },
            { data: 'user_name' },
            { data: 'product_name' },
            { data: 'service_type' },
            { data: 'remark' },
            { data: 'product_serial_no' },
            { data: 'created_at' },
            { data: 'action', orderable: false, searchable: false },
        ],
        order: [[1, 'asc']],
        drawCallback: function (settings) {

           var response = settings.json;
           // $('#totalRecords').text(response.totalRecords);
           // $('#activeRecords').text(response.activeRecords);
           // $('#inactiveRecords').text(response.inactiveRecords);
           // $('#deletedRecords').text(response.deletedRecords);
           console.log(response);
           updateIcon()

       },
     });


       /*ajax header setup*/
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
       });
   });


   
</script>


@endsection