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

@section('title')
	Account 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: #FFF !important;
    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>Account Statement:</u>
            			<br>{{carbonDate($from, 'y-m-d')}} to {{carbonDate($to, 'y-m-d')}}
            		@else
            			{{date('F')}}'s' Account Statement
            		@endif
            	</h4>


              <div class="table-responsive">
                <table class="table table-bordered">
                    <thead style="background-color: #007555;">
                      <tr>
                        <th>Particulars</th>
                        <th>Debit</th>
                        <th>Credit</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <ul style="list-style-type: none;">
                            @foreach($expenses as $expense)
                              <li>-{{$expense->expense_head}}</li>
                            @endforeach
                          </ul>
                        </td>
                        <td>
                          <ul style="list-style-type: none;">
                            @foreach($incomes as $income)
                              <li>-{{$income->title}}</li>
                            @endforeach
                          </ul>
                        </td>
                      </tr>

                    </tbody>
                </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