@extends('frontend.layouts.main')
@section('main-container')
@include('cdn')
<main id="main" class="main">
  
 <div style="margin-top:15px ;">
    <h4 class="text-uppercase mb-3">Service Invoice</h4>
 </div>
     <table class="table table-striped display nowrap" id="tabl" style="width:100%;">
                <thead>
                    <tr>
                        <th> </th>
                        <th>S.No</th>
                        <th>Name</th>
                        <th>Amount Due($)</th>
                        <th>Amount($)</th> 
                        <th>Description</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody> 
                 @foreach($serviceinv as $key=>$value)
                  <tr>
                    <td></td>
                    <td>{{++$key}}</td>
                    <td>{{$value->ServiceLead->name}}</td>               
                    <td>$ {{$value->amtdue}}</td>
                    <td>$ {{$value->amount}}</td>
                    <td>{{$value->descript}}</td>
                    <td>
                        @can('Invoice.View')
                        <a href="{{ route('admin.index',['id'=>$value->id])}}"><button class="btn btn-warning rounded-pill">View Invoice</button></a>
                        @endcan
                    </td>
                  </tr>
                @endforeach
                </tbody>
      </table>      
</main>
<script type="text/javascript">  
   $(document).ready(function () {
     var table = $('#tabl').DataTable({
      order: [],
      columnDefs: [ { orderable: false, targets: [0,1,2,3,4,5,6] } ], 
      responsive: true
    });

    new $.fn.dataTable.FixedHeader( table );
}); 
</script>
@endsection
