@extends('admin::layouts.plane')
@section('page_heading') {{$title}} @endsection
@section('content')


<div class="row">
<div class="panel-heading">
    <div class="col-xs-3">
    	<p style="font-size:20px;color:#5862c7"><b> &nbsp;  &nbsp; &nbsp;Payroll Dashboard</b> </p>
    </div>
    <div class="col-xs-3 pull-right">
	   
	   {{ Form::select('monthyear', [], '', ['placeholder' => '- Month Year -', 'class' => 'form-control', 'id' => 'select_month_year_id']) }}

    </div>

</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-3" id="poll_div">
		</div>
		@piechart('HeadCount', 'poll_div')
		<div class = "col-lg-1 col-md-1">
		</div>
		<div class = "col-lg-3 col-md-3" style = "background-color: #f4fafe;
			border: 3px solid #5862c7; height: 200px;width: 335px;">
			<p style="color:#5862c7"><b> Current Month Payroll BreakUp </b></p>
			<div class="table-responsive">
				<table id="data-table_dashboard" class="table table-striped-dashboard table-bordered">
					<thead>
                        <tr>
                            <th>Type</th>
                            <th>Amount</th>
                          </tr>
                    </thead>
                    <tbody>                      
                        <tr>
                            <td>Salary</td>
                            <td id="salary">{{$result['salary']}}</td>
						</tr>
					   <tr>
                            <td>Extra Days</td>
                            <td id="extradays">{{$result['extradays']}}</td>
						</tr>
                        <tr>
                            <td>Previous Salary</td>
                            <td id="prevsalary">{{$result['prevsalary']}}</td>
						</tr>
                        <tr>
                            <td>Increment</td>
                            <td id="increment">{{$result['increment']}}</td>
						</tr>
						<tr>
                            <td>Total</td>
                            <td id="totalpayroll"><b>{{$result['total']}}<b></td>
						</tr>

                    </tbody>
                </table>
			</div>
		</div>
		<div class = "col-lg-1 col-md-1">
		</div>
		<div  class = "col-lg-1 col-md-1" style = "background-color:#48C9B0 ;
			border: 3px solid #48C9B0; height: 100px;width: 150px; margin-right: 8px;border-radius: 25px;">  <br>
			<div id="totalSalary"> </div>
			<p style="font-size:14px;color:white">Total Salary</p>

		</div>
		<div class = "col-lg-1 col-md-1" style = "background-color: #9B59B6;
			 border: 3px solid #9B59B6; height: 100px;width: 150px; border-radius: 25px;">
			 <div id="drawnSalary"> </div>
			<p style="font-size:14px;color:white">Total Drawn Amt</p>
		</div>
		<div class = "col-lg-1 col-md-1">
		</div>
		<div class = "col-lg-1 col-md-1" style = "background-color: #F39C12  ;
			 border: 3px solid #F39C12  ; height: 100px;width: 150px; margin-right: 8px; margin-top: 5px; border-radius: 25px;">
			 <br>
			<div id="payable"> </div>
			<p style="font-size:14px;color:white">Total Payable Amount</p>
		</div>
		<div class = "col-lg-1 col-md-1" style = "background-color: #C0392B;
			 border: 3px solid #C0392B; height: 100px;width: 150px; margin-top: 5px;margin-bottom: 5px; border-radius: 25px;">
			 <div id="epf"> </div>
			<p style="font-size:14px;color:white">Total EPF</p>
		</div>
	</div>
	<div class="row">
		
		<div class = "col-lg-6 col-md-6 style = " style="background-color: #DA70D6  ;
			 border: 3px solid #DA70D6  ; height: 30px;width: 555px; margin-left: 14px;margin-bottom: 5px;margin-right: 17px">
			<p style="font-size:14px;color:white">Total Payable Salary Amount For this Session: <b>{{$totalAmount}}</b> </p><br>
		</div>

		<div class = "col-lg-6 col-md-6 style = " style="background-color: #DA70D6  ;
			 border: 3px solid #DA70D6  ; height: 30px;width: 555px; margin-left: 14px;margin-bottom: 5px">
			<p style="font-size:14px;color:white">Total EPF Amount For this Session:<b>{{$totalEPF}}</b> </p><br>
		</div>
	</div>

	<div class="row">
		<div class = "col-lg-6 col-md-6"  id="salYearly">
		</div>
		@barchart('SalaryYearly', 'salYearly')

		<div class = "col-lg-6 col-md-6"  id="epfYearly">
		</div>

		@barchart('EPFYearly', 'epfYearly')
	
	</div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        setTimeout(schoolOnChange(77, 1),1);
    });
    function selectCallback (event, chart) { 		
  		var baseUrl = $('#baseUrl').val();
        dataURL = baseUrl + '/admin/SummaryReport';
        location.href = dataURL; 		
	}
	function selectCallbackEPF (event, chart) { 		
  		var baseUrl = $('#baseUrl').val();
        dataURL = baseUrl + '/admin/EPFSummaryReport';
        location.href = dataURL; 		
	}

</script>

@stop