@extends('expenses.layouts.expense-layout')

@section('title')
	Due Report || @parent
@stop

<style>
	td{
    font-family: NotoSans, Verdana, sans-serif;
    color: #000000;
    text-align: center;
  }

  thead tr th{
    font-family: NotoSans, Verdana, sans-serif;
    color: #000000;
    text-align: center;
  }

  .table > tbody > tr > td{
    padding: 5px;
    font-size: 13px;

  }

  .table > thead > tr > th{
    padding: 8px;
    font-size: 14px;

  }
</style>
@section('main-content')
<div class="row">
	<div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
          	<div class="card-body">
            	<h1 class="card-title float-left" style="font-size: 25px;">
            		Due Report
            	</h1>

            	<div class="table-responsive">
	              	<table class="table table-bordered">
		                <thead >
		                  <tr>
		                    <th width="20%"> Date </th>
		                    <th width="15%"> Invoice No </th>
		                    <th width="25%"> Customer Info </th>
		                    <th width="20%"> Total </th>
		                    <th width="20%"> Due </th>
		                    <th>Action</th>
		                  </tr>
		                </thead>
		                <tbody>
		                  @foreach($due_invoices as $invoice)
			                <tr>
			                    <td> 
			                    	{{carbonDate($invoice->date, 'y-m-d')}}
			                    </td>
			                    
			                    <td> 
			                    	#{{$invoice->invoice_no}} 
			                    </td>

			                    <td> 
			                    	{!! ucfirst($invoice->client_info) !!} 
			                    </td>
			                    
			                    <td> 
			                    	&#2547; {{$invoice->total}} 
			                    </td>
			                    
			                    <td> 
			                    	&#2547; {{$invoice->total - $invoice->paid}}
			                    </td>

			                    <td>
			                    	<a target="_BLINK" href="{{route('invoice.details', $invoice)}}" class="badge badge-info" data-toggle="tooltip" data-placement="top" title="Click here to see invoice details">
			                    		Details
			                    	</a>
			                    </td>
			                </tr>
		                  @endforeach
		                </tbody>

		                <tr>
		                	<td colspan="6"></td>
		                </tr>

		                <tr>
		                	<td colspan="4" style="text-align: right;">
		                		<b>Total Due:</b>
		                	</td>

		                	<td colspan="2" style="text-align: left;"> 
		                		<b>
		                			&#2547; 
		                			{{$due_invoices->sum('total') - $due_invoices->sum('paid')}}
		                		</b>
		                	</td>
		                </tr>
	              	</table>
	            </div>
        	</div>
        </div>
    </div>
</div>



@stop

@section('post-js')
<script src="{{asset('expense-assets/js/shared/tooltips.js')}}"></script>
@stop