@extends('layouts.home.site')
<style type="text/css">
.table td, .table th{
	padding: 2px 10px;
}	
</style>
@section('content')

<div class="payfee-content" ng-controller="academic_controller">  

    <section class="call-to-action" >
        <div class="anim-icons">
            <!--            <span class="icon icon-cloud wow shake"></span>-->
            <span class="icon butterfly-1 wow zoomIn"></span>
            <!--            <span class="icon butterfly-2 wow zoomIn"></span>-->
        </div>

        <div class="auto-container">
            <div class="outer-box clearfix" style="text-align: -webkit-center;">
                <div class="title-column">
                    <h3 style="width:100%; text-transform: uppercase;">  FEE DEPOSIT </h3>

                </div>

            </div>
        </div>
    </section>
<br><br> 
<div class="register-content">   
	  {!! Form::open(array('url' => URL_USERS_PAYFEE, 'method' => 'POST', 'novalidate'=>'','name'=>'formPayfee ', 'files'=>'true')) !!}
		<div class="col-md-12">
	  	<div class="row">
	  	<fieldset class="form-group col-md-4">
		{{ Form::label('roll_no', getphrase('TSN No.')) }}
		<span class="text-red" >*</span>
			{{ Form::text('roll_no', $value = null , $attributes = array('class'=>'form-control', 'placeholder' => '78546','required'=> 'true','autocomplete'=>"off" )) }}
			<div class="validation-error" ng-messages="formPayfee.roll_no.$error" >
					{!! getValidationMessage()!!}
				</div>
		</fieldset>	
	  	<fieldset class="col-sm-4">
			{{ Form::label('date_of_birth', getphrase('date_of_birth')) }}
			<span class="text-red" >*</span>
			<div id="dpYears" class="input-group date"  data-date-viewmode="years"  data-provide="datepicker" data-date-format="{{getDateFormat()}}">
			{{ Form::text('date_of_birth', $value = date('Y/m/d') , $attributes = array('class'=>'form-control', 'placeholder' => '2015/07/17', 'id'=>'dp','autocomplete'=>"off" )) }}	
			<div class="input-group-addon" style="background: none; border-radius: 0px; border-color: #e1e8f8; font-size: 30px; color: #e1e8f8; padding: 0 10px; line-height: 40px;">
				<span class="mdi mdi-calendar"></span>
			</div>			 
			</div>
		</fieldset>
		<div class='col-sm-4'>
			<label style="width: 100%">&nbsp;</label>
			<button type="button" id="payfeefrom" ng-click="getFeeDetils()" class="btn btn-lg btn-primary button">{{getphrase('Get Details')}}</button>
		</div> 

		<div class="col-md-12" id="maindiv" style="padding: 10px 10px 30px 10px;line-height: 31px; display: none;" ng-if="fee_detail!=''">
			<h1 style="font-weight: bold; padding: 5px 0 5px 0; border-bottom: 1px solid #ccc; margin-bottom: 10px;color: #02002B;"><i class="icon icon-user"></i> Student Detail</h1>
			<div ng-if="fee_detail.status==0">@{{fee_detail.msg}}</div>
			<div ng-if="fee_detail.status==1">				 
	  			<div class="row">
				<div class="col-lg-4">
	                <div style="font-weight: bold; font-size: 14px; float: left; width: 33%;">Student Name</div>
	          		<div style="border-bottom:#dee2e6 solid 1px; padding-left: 5px; float: left; font-size: 13px; width: 66%;"> @{{student.name}}</div>
                </div>	
                <div class="col-lg-4">
	                <div style="font-weight: bold; font-size: 14px; float: left; width: 33%;">Class </div>
	          		<div style="border-bottom:#dee2e6 solid 1px; padding-left: 5px; float: left; font-size: 13px; width: 66%;"> @{{student.course_title}} </div>
                </div>	
                <div class="col-lg-4">
	                <div style="font-weight: bold; font-size: 14px; float: left; width: 33%;">Student Mode </div>
	          		<div style="border-bottom:#dee2e6 solid 1px; padding-left: 5px; float: left; font-size: 13px; width: 66%;"> @{{student.student_type}} </div>
                </div>
	            </div> 
	            <div class="row">
				<div class="col-lg-4">
	                <div style="font-weight: bold; font-size: 14px; float: left; width: 33%;">Student Roll No.</div>
	          		<div style="border-bottom:#dee2e6 solid 1px; padding-left: 5px; float: left; font-size: 13px; width: 66%;"> @{{student.roll_no}}</div>
                </div>	
                <div class="col-lg-4">
	                <div style="font-weight: bold; font-size: 14px; float: left; width: 33%;">Date Of Birth </div>
	          		<div style="border-bottom:#dee2e6 solid 1px; padding-left: 5px; float: left; font-size: 13px; width: 66%;"> @{{student.date_of_birth}} </div>
                </div>	
                <div class="col-lg-4">
	                <div style="font-weight: bold; font-size: 14px; float: left; width: 33%;">Mobile </div>
	          		<div style="border-bottom:#dee2e6 solid 1px; padding-left: 5px; float: left; font-size: 13px; width: 66%;"> @{{student.phone}} </div>
                </div>
	            </div> 
	            <div class="row">
				<div class="col-lg-4">
	                <div style="font-weight: bold; font-size: 14px; float: left; width: 33%;">Father Name</div>
	          		<div style="border-bottom:#dee2e6 solid 1px; padding-left: 5px; float: left; font-size: 13px; width: 66%;"> @{{student.fathers_name}}</div>
                </div>	
                <div class="col-lg-4">
	                <div style="font-weight: bold; font-size: 14px; float: left; width: 33%;">Mother Name </div>
	          		<div style="border-bottom:#dee2e6 solid 1px; padding-left: 5px; float: left; font-size: 13px; width: 66%;"> @{{student.mothers_name}} </div>
                </div>	
                <div class="col-lg-4">
	                <div style="font-weight: bold; font-size: 14px; float: left; width: 33%;">Pending Fee </div>
	          		<div style="border-bottom:#dee2e6 solid 1px; padding-left: 5px; float: left; font-size: 13px; width: 66%;">Rs. @{{fee_detail.data.pendingAmount}} </div>
                </div>
                </div> 
                <div class="row" style="margin-top:10px; ">
                <div class="col-lg-12">
	                <h1 style="font-weight: bold; padding: 5px 0 5px 0; border-bottom: 1px solid #ccc; margin-bottom: 10px;color: #02002B;"><i class="fa fa-money"></i> Student Fee Detail</h1>

	                <div class="col-lg-12" style="color: red;">
	                	Notice :: Fee Should be pay terms wise sequential. Select the checkbox which fee you want to pay!!
	                	 <table  class="table feeparticulars-table table-bordered">
		                    <thead> 
			                    <tr style="background: #242424; color:#fff; font-size: 18px;">
									<td >{{getPhrase('particulars')}}</td>
									<td>Amount</td>
									{{-- <td>Paid</td>    
									<td>Scholarship</td>  --}}
									<td>Due Amount</td>
								</tr> 
		                    </thead> 
                      <tbody> 
                      <tr ng-repeat="item in full_payment_details | filter:search track by $index">   
                       <td>
                       <span ng-if="item.is_term==1">Term - @{{item.installment}}</span>
                       <span ng-if="item.is_term==0"> (Others) </span>
                      <td>
                      {{$currency}} @{{item.total_amount | currency : '' : 2}}  
                      </td> 
                      {{-- <td>
                       <span ng-if="item.paid_amount==0"> - </span>
                       <span ng-if="item.paid_amount>0"> {{$currency}} @{{item.paid_amount | currency : '' : 2}} </span> 
                      </td> 
                       <td>
                       <span ng-if="item.discount_data==0"> - </span>
                       <span ng-if="item.discount_data>0"> {{$currency}} @{{item.discount_data | currency : '' : 2}} </span> 
                      </td> --}}
                      <td> 
                      	<span ng-if="item.net_amount>0"> 
                      		<label> 
                      		<span ng-if="item.is_term==1">
                      		<input type="checkbox" name="selectedfee[@{{item.fid}}]"  ng-model="selectedfee" value="0" id="selectedfee_@{{item.id}}" checked="" fid="@{{item.fid}}" class="feecheckData" style="display:block;float: left; margin-right: 5px; margin-top: 2px!important;"> </span> {{$currency}} @{{item.net_amount | currency : '' : 2}}  
                      		</label>
                      	</span>
                      	<span ng-if="item.net_amount==0">
                      		{{$currency}} @{{item.net_amount | currency : '' : 2}}  
                      	</span>
                      </td> 
                      </tr> 
                      </tbody>
                        <tfoot>
                          <tr>                           
                            <td><strong>{{getPhrase('total')}}</strong></td>
                            <td><strong>{{$currency}} @{{total_full_fee | currency : '' : 2}}</strong></td>
                         {{--    <td>
                           <span ng-if="total_amount_paid==0"> - </span>
                            <span ng-if="total_amount_paid>0"><strong> {{$currency}} @{{total_amount_paid | currency : '' : 2 }}</strong> <br>
                            <strong> (Total Fine: {{$currency}} @{{fee_detail.data.full_fine_sum | currency : '' : 2}})</strong>
                            </span>
                            </td>
                             <td>
                            <span ng-if="discount_sum==0"> - </span>
                            <span ng-if="discount_sum>0"><strong> {{$currency}} @{{ discount_sum | currency : '' : 2 }}</strong></span>
                            </td> --}}
                            <td><strong>{{$currency}} @{{net_full_amount_to_pay | currency : '' : 2}}</strong></td>
                          </tr>
                        </tfoot>
                      </table>
	                </div>	
	                <div class="col-lg-10" ng-if="student.phone=='-'" style="text-align: right; margin-top: 10px; color: #FF0000">
	                	Please Contact To School Administrator For Update Your Mobile No., Then You Can Able To Pay Fee
	                </div>  
	                <div class="col-lg-3" style="text-align: left; margin-top: 10px; float: right;">
	                	<button type="button" id="payfeefrom" ng-if="fee_detail.data.pendingAmount>0 && student.phone!='-' && finalpaidamount>0" ng-click="payFeeDetils()" class="btn btn-lg btn-primary button">{{getphrase('Pay Fee')}}</button>
	                </div>	 
	                 <div class="col-lg-6" ng-if="fee_detail.data.pendingAmount>0 && student.phone!='-' && finalpaidamount>0" style="text-align: right; margin-top: 10px; float: right;">
	                	<strong>Final Amount To Pay:  {{$currency}} @{{finalpaidamount | currency : '' : 2}}</strong><br>	
	                	<span ng-if="fee_detail.data.pendingAmount>0 && student.phone!='-' && finalpaidamount>0 && finaldiscount>0"> yuppie you get  {{$currency}} @{{finaldiscount | currency : '' : 2}} scholership on fee payment</span>
	                </div>           
				</div>
			</div>
		</div>
</div>
		</div>
		</div> 	 
	{!! Form::close() !!} 			
	</div> 
@stop 

@section('footer_scripts')
	<script src="{{JS}}moment.min.js"></script>
	<script src="{{JS}}bootstrap-datepicker.min.js"></script>
	<script src="{{JS}}bootstrap-datetimepicker.js"></script>
	<script type="text/javascript">
		$( document ).ready(function() {
		  $('#maindiv').css('display','block');
		});	
	</script>	
	@include('users.student.scripts.online-payfee-js-scripts')
@stop