@extends('student.layout.main')

@section('content')
	
	@if(!$isSubmitted && count($subApplicationTypes) >  0)
		
		<div class = "portion" >
			<div class = "portion-header" >
				Add Preference For [{{$subApplicationType->sub_application_type}}]
			</div >
			<div class = "portion-body" >
				<form class = "form-horizontal" action = "" method = "" >
					<div class = "row" >
						<div class = "col-md-5" >
							<div class = "form-group" >
								<label for = "degree" class = "col-sm-3 control-label" >Degree/Courses</label >
								<div class = "col-sm-9" >
									<select data-placeholder = "Select degree" id = "degree" name = "degree"
									        onchange = "loadInstitutions(this)" >
										<option ></option >
									</select >
								</div >
							</div >
						</div >
						<div class = "col-md-5" >
							<div class = "form-group" >
								<label for = "institute" class = "col-sm-3 control-label" >Institute</label >
								<div class = "col-sm-9" >
									<select class = "form-control" data-placeholder = "Select institute" id = "institute" name = "institute" >
										<option ></option >
									</select >
								</div >
							</div >
						</div >
						<div class = "col-md-2" >
							<button type = "button" class = "btn btn-success btn-sm" id = "add-preference" >Add</button >
							<i id = "show" ></i >
						</div >
					</div >
					<div class = "clear" ></div >
				</form >
			</div >
		</div ><br />
	@endif
	
	<div class = "portion" >
		<div class = "portion-header" >
			Preferences [{{$subApplicationType->sub_application_type}}]
		</div >
		<div class = "portion-body" >
			<table class = "table table-bordered table-striped" >
				<thead >
					<tr >
						<th >Preference No.</th >
						<th >Degree</th >
						<th >Institute</th >
						<th >Action</th >
					</tr >
				</thead >
				<tbody id = "preferences-data" >
				</tbody >
			</table >
			@if(!$isSubmitted && count($subApplicationTypes) >  0)
				<button type = "button" class = "btn btn-success pull-right" id = "save" >Save & Next</button >
			@endif
			<div class = "clear" ></div >
		</div >
	</div >

@endsection

@section('script')
	<script >
        $ ( document ).ready ( function () {
            var url = "{{url('student/available-preferences/' . $subApplicationType->id)}}";
            getAvailablePreferences ( url );
			        @if(isset($selectedPreferences))
            var preferences = @php echo json_encode($selectedPreferences,JSON_PRETTY_PRINT); @endphp;
            preparePreferences ( preferences );
	
	        @endif
        } );

        @if(isset($selectedPreferences))
        function preparePreferences (preferences) {
            var arrayOfObjects = [];
            for ( var i = 0; i < preferences.length; i ++ ) {
                arrayOfObjects.push ( JSON.parse ( preferences[ i ] ) );
            }
            selectedPreferences = arrayOfObjects;
            addPreferenceInTable ();
        }

        @endif
        $ ( '#save' ).click ( function () {
            if ( selectedPreferences.length ) {
                var url = "{{url('student/preferences/' . $subApplicationType->id)}}";
                postPreferences ( url );
            } else {
                notification ( 'error', 'Preference', 'You have not selected any preference.' );
            }
        } );
	</script >
@endsection