@extends('backend.school_admin.layout_app')

@section('content')
	<!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="{{ asset('/public')}}/metronic/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/public')}}/metronic/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
    <!-- END PAGE LEVEL PLUGINS -->
	
	<div class="row">
		<div class="col-md-12">
			<!-- BEGIN EXAMPLE TABLE PORTLET-->
			<div class="portlet light bordered">
				<div class="portlet-title">
					<div class="caption font-dark">
						<i class="icon-settings font-dark"></i>
						<span class="caption-subject bold uppercase">Manage Fee Head</span>
					</div>
				</div>
				<div class="portlet-body">	
					<div class="table-toolbar">
						<div class="row">
							<div class="col-md-6">
								<div class="btn-group">
									<a id="sample_editable_1_new" href="javascript:void(0)" class="btn sbold green addfeeheads"> Add/Edit Fee Head  <i class="fa fa-plus"></i></a>
								</div>
							</div>
						</div>
					</div>
					
					<div class="addFeeHeadsForm" style="display:none;">
						<div class="portlet light bordered">
							<div class="portlet-title">
								<div class="caption">
									<i class="icon-equalizer font-red-sunglo"></i>
									<span class="caption-subject font-red-sunglo bold uppercase">Add/Edit Fee Head</span>
								</div>
							</div>
							<div class="portlet-body form">
								<!-- BEGIN FORM-->
								<form action="{{ url('/') }}/schoolAdmin/schoolSetting/storeFeeHead" method="POST" class="form-horizontal">
									<input type="hidden" name="_token" value="{{ csrf_token() }}">
									<div class="form-body">
										<div class="form-group">
											<label class="col-md-3 control-label">Fee Head Title</label>
											<div class="col-md-8">
												<input type="text" class="form-control feeheadtitle" name="fee_head_title" placeholder="Enter Fee Head Title" required>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-3 control-label">Fee Head Description</label>
											<div class="col-md-8">
												<input type="text" class="form-control feeheaddescription" name="fee_head_description" placeholder="Enter Fee Head Description">
											</div>
										</div>
									</div>
									<div class="form-actions">
										<div class="row">
											<div class="col-md-offset-3 col-md-4">
												<button type="submit" class="btn green">Submit</button>
												<button type="button" class="btn default discardheadform">Cancel</button>
											</div>
										</div>
									</div>
								</form>
								<!-- END FORM-->
							</div>
						</div>
					</div>
					
					<table class="table table-striped table-bordered table-hover table-checkable order-column" id="feehead_list">
						<thead>
                        <tr>
                            <th>#</th>      
							<th>Head Title</th>    							
                            <th>Head Description</th>
							<th style="text-align:center;">{{  Lang::get('general.action') }} </th>
                        </tr>
                        </thead>
                        <tbody>
						                        @foreach($allFeeHeads as $row)
                            <tr>
                                <td>1.</td>    
								<td>{{ $row->fee_head_title }}</td> 								
                                <td>{{ $row->fee_head_description }}</td>                              
                                <td style="text-align:center;">
									<div class="btn-group btn-group-xs btn-group-solid" >
										<a class="btn green-meadow editFeeHead" fee_head_row_id="{{ $row->fee_head_row_id }}" head_title="{{ $row->fee_head_title }}" head_description="{{ $row->fee_head_description }}" href="javascript:void(0)"> Edit </a>  
										<a class="btn red deleteFeeHead" href="#commonmodal" fee_head_row_id="{{ $row->fee_head_row_id }}" data-toggle="modal"> Delete </a>
									</div>
								</td>
                            </tr>
							
                        @endforeach
                        </tbody>
					</table>
				</div>
			</div>
			<!-- END EXAMPLE TABLE PORTLET-->
		</div>
	</div>
	
	<div class="modal fade" id="commonmodal" tabindex="-1" role="basic" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title"></h4>
				</div>
				<div class="modal-body"></div>
				<div class="modal-footer">
					<a class="btn dark btn-outline" data-dismiss="modal">Close</a>
					<a class="btn green confirmrequest">Confirm</a>
				</div>
			</div>
		</div>
	</div>
	
@section('page_js')
	<script src="{{ asset('/public')}}/metronic/global/scripts/datatable.js" type="text/javascript"></script>
	<script src="{{ asset('/public')}}/metronic/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
	<script src="{{ asset('/public')}}/metronic/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
	<script src="{{ asset('/public')}}/metronic/pages/scripts/table-datatables-managed.min.js" type="text/javascript"></script>
	<script src="{{ asset('/public')}}/metronic/global/plugins/jquery-ui/jquery-ui.min.js"></script>
	<script src="{{ asset('/public')}}/metronic/pages/scripts/ui-modals.min.js" type="text/javascript"></script>
@endsection	
	<script type="text/javascript">
	$(document).ready(function() {
		
		$('#feehead_list').dataTable({
			"bProcessing": true,
			"bSort": false
		});
		
		//$('.addfeeheads').click(function(e){
			//$('.addFeeHeadsForm').show();
		///});
		
		$(".addfeeheads").on('click',function(){
			$('.addFeeHeadsForm').slideToggle();
			$(this).children('.fa-minus, .fa-plus').toggleClass("fa-minus fa-plus");
		});
		
		$('.discardheadform').click(function(e){
			$('.addFeeHeadsForm').slideToggle();
			$('.addfeeheads').children('.fa-plus, .fa-minus').toggleClass("fa-plus fa-minus");
			$("input[name=fee_head_title]").val('');
			$("input[name=fee_head_description]").val('');
			$("input[name=fee_head_row_id]").val('');
		});
		
		$('.editFeeHead').click(function(e){
			var head_title = $(this).attr('head_title');
			var head_description = $(this).attr('head_description');
			var fee_head_row_id = $(this).attr('fee_head_row_id');
			$('.addFeeHeadsForm .feeheadtitle').val(head_title);
			$('.addFeeHeadsForm .feeheaddescription').val(head_description);
			$(".discardheadform").after('<input type="hidden" name="fee_head_row_id" value="'+fee_head_row_id+'" >');
			$('.addFeeHeadsForm').slideToggle();
			$('.addfeeheads').children('.fa-plus, .fa-minus').toggleClass("fa-plus fa-minus");
		});	
		
		$('.deleteFeeHead').click(function(e){
			$('#commonmodal .modal-title').empty();
			$('#commonmodal .modal-body').empty();
			var fee_head_row_id = $(this).attr('fee_head_row_id');
			$('#commonmodal .modal-title').append('Delete Fee Head');
			$('#commonmodal .modal-body').append('Do you really want to delete this fee head?');
			$('#commonmodal .modal-footer .confirmrequest').attr("href", "{{ url('/') }}/schoolAdmin/schoolSetting/deleteFeeHead/"+fee_head_row_id);
			
		});
	} );
	</script>
@endsection