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

@section('title')
	Income Statement || @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' name="to" class="form-control" 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>Income Statement:</u>
            			<br>{{carbonDate($from, 'y-m-d')}} to {{carbonDate($to, 'y-m-d')}}
            		@else
            			{{date('F')}}'s' Income Statement
            		@endif
            	</h4>

            	<div class="table-responsive">
	              	<table class="table">
	              		<tr>
	              			<td>Net Sales</td>
	              			<td><b>&#2547;</b> {{$net_sales}}</td>
	              		</tr>

	              		<tr>
	              			<td>Cost of Sales</td>
	              			<td>
	              				<b>&#2547;</b> 
	              				{{$cost_of_sales}}
	              			</td>
	              		</tr>

	              		<tr>
	              			<td>
	              				<b>Gross Margin</b>
	              			</td>
	              			<td>
	              				<b>&#2547;</b> 
	              				{{$gross_margin}}
	              			</td>
	              		</tr>

	              		<tr>
	              			<td>Expenses:</td>
	              			<td></td>
	              		</tr>

	              		<tr>
	              			<td>
	              				@foreach($expenses as $index => $expense)
	              				<dl>
	              					<dt style="font-weight: normal;">
	              						{{ $index }}
	              					</dt>
	              				</dl>
	              				@endforeach
	              			</td>
	              			<td>
	              				@foreach($expenses as $expense)
	              				<dl>
	              					<dt style="font-weight: normal;">
	              						<b>&#2547;</b> 
	              						{{ $expense }}
	              					</dt>
	              				</dl>
	              				@endforeach
	              			</td>
	              		</tr>

	              		<tr>
	              			<td>Total Expense:</td>
	              			<td><b>&#2547;</b> {{$total_expense}}</td>
	              		</tr>

	              		<tr>
	              			<td>Other Income:</td>
	              			<td><b>&#2547;</b> {{$others_income}}</td>
	              		</tr>

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

	              		<tr>
	              			<td>
                        <b>Net @if($net_income > 0)Income @else Loss @endif</b>
                      </td>
	              			<td>
	              				<b>&#2547; {{abs($net_income)}}</b>
	              			</td>
	              		</tr>
	              	</table>
	            </div>
	        </div>

	        <div class="card-footer">
	        	
	        </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