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

@section('title')
	Sales 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-12 grid-margin">
      <a href="#" id="searchFilter" class="btn btn-warning btn-rounded btn-fw float-right">
        <i class="mdi mdi-filter-outline"></i> Advance Filter
      </a>
    </div>

	<div class="col-12 grid-margin">
        <div class="card"  id="searchDiv" style="display: none;">
          <div class="card-body">
            <h4 class="card-title">Search Options</h4>
            <form class="form-sample" method="get">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label" style="text-align: right;">From</label>
                    <div class="col-sm-9">
                      <input type="text" name="from" class="form-control" id="from" /> 
                  	</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label" style="text-align: right;">To</label>
                    <div class="col-sm-9">
                      <input type='text' class="form-control" name="to" id="to"  />
                  	</div>
                  </div>
                </div>
              </div>

              <div class="row">
              	<div class="col-md-11">
              		<button type="submit" class="btn btn-info float-right col-md-2">
              			Generate Report
              		</button>
              	</div>
              </div>
            </form>
          </div>
        </div>
    </div>
</div>

<div class="row">
	<div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
          	<div class="card-body">
            	<h4 class="card-title float-left">
            		@if(count(Request::input()))
            			<u>Sales Report:</u>
            			<br>{{carbonDate($from, 'y-m-d')}} to {{carbonDate($to, 'y-m-d')}}
            		@else
            			Today's Sales
            		@endif
            	</h4>
            	<div class="table-responsive">
	              	<table class="table table-bordered">
		                <thead >
		                  <tr>
		                    <th width="10%"> Date </th>
		                    <th width="10%"> Invoice No </th>
		                    <th width="20%"> Items </th>
		                    <th width="20%"> Client </th>
		                    <th width="12.5%"> Total </th>
		                    <th width="12.5%"> Paid </th>
		                    <th width="15%"> Profit</th>
		                  </tr>
		                </thead>
		                <tbody>
		                  @foreach($invoices as $invoice)
			                <tr>
			                    <td> 
			                    	{{carbonDate($invoice->date, 'y-m-d')}}
			                    </td>
			                    
			                    <td> 
			                    	#{{$invoice->invoice_no}} 
			                    </td>

			                    <td>
			                    	<ul style="list-style: none;">
			                    	@foreach($invoice->sale_items as $item)	
			                    		<li>
			                    			- {{$item->product->name}}
			                    		</li>
			                    	@endforeach
			                    	</ul>
			                    </td>

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

			                    <td> 
			                    	&#2547; {{$invoice->total - $invoice->total_cost_price}}
			                    </td>
			                </tr>
		                  @endforeach

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

		                  <tr>
		                  	<td colspan="4" style="text-align: right; font-weight: bold;">
		                  		Total Sell:
		                  	</td>

		                  	<td colspan="3" style="text-align: left; font-weight: bold;">
		                  		&#2547; {{$invoices->sum('total')}}
		                  	</td>
		                  </tr>

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

		                  	<td colspan="3" style="text-align: left; font-weight: bold;">
		                  		&#2547; {{$invoices->sum('total') - $invoices->sum('paid')}}
		                  	</td>
		                  </tr>

		                  <tr>
		                  	<td colspan="4" style="text-align: right; font-weight: bold;">
		                  		Total Profit:
		                  	</td>

		                  	<td colspan="3" style="text-align: left; font-weight: bold;">
		                  		&#2547; {{$invoices->sum('total') - $invoices->sum('total_cost_price')}}
		                  	</td>
		                  </tr>
		                </tbody>
	              	</table>
	            </div>
	        </div>
        </div>
    </div>
</div>



@stop

@section('post-js')
<script>
	$('#from').datepicker({
        uiLibrary: 'bootstrap4',
        icons: {
             rightIcon: '<i class="mdi mdi-timetable"></i>'
         }
    });

    $('#to').datepicker({
        uiLibrary: 'bootstrap4',
        icons: {
             rightIcon: '<i class="mdi mdi-timetable"></i>'
         }
    });

    $(document).ready(function (){
      $('#searchFilter').on('click', function () {
        $("#searchDiv").slideToggle(1000);
      })
    })
</script>
<script src="{{asset('expense-assets/js/shared/tooltips.js')}}"></script>
@stop