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

@section('title')
	Service 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" id="to" name="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>Service Report:</u>
        			<br>{{carbonDate($from, 'y-m-d')}} to {{carbonDate($to, 'y-m-d')}}
        		@else
        			Service Sales of {{date('F')}}
        		@endif
        	</h4>

        	<table class="table table-bordered" width="100%">	
  					<thead  class="table-header-color">
  						<th class="text-center">Service Name</th>
  						<th class="text-center">Quanity</th>
  						<th class="text-center">Sales</th>
  						<th class="text-center">Profit</th>
  					</thead>

  					@foreach($sales as $index => $items)
  						<tr>
  							@foreach($items as $item)
  								<td class="text-center">
  									{{$item}}								
  								</td>
  							@endforeach
  						</tr>
  					@endforeach		
  				</table>
        </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