@extends('layouts.master')
    
@section('title', 'Add/Edit Criteria')
    
@section('style')

@endsection
    
@section('script')
	<script>
		$('#criteria_type').change(function(){
			var criteria_type = $('#criteria_type').val();
			
			if(criteria_type == 'Approve'){
				$('#box_recommendation').show();
				$('#box_from').hide();
				$('#box_to').hide();
				
				$('#box_recommendation').val('');
				$('#box_from').val('');
				$('#box_to').val('');
				
				document.getElementById("criteria_recommendation").required	= true;
				document.getElementById("criteria_from").required 			= false;
				document.getElementById("criteria_to").required 			= false;
			}
			else if(criteria_type == 'Date'){
				$('#box_recommendation').hide();
				$('#box_from').show();
				$('#box_to').show();
				
				$('#box_recommendation').val('');
				$('#box_from').val('');
				$('#box_to').val('');
				
				document.getElementById("criteria_recommendation").required	= false;
				document.getElementById("criteria_from").required 			= true;
				document.getElementById("criteria_to").required 			= false;
			}
		})
	</script>
@endsection
    
@section('content')
    
	@include('layouts.header')
	@include('layouts.header-sub')

	<section class="wrapper bg-light">
		<div class="container py-14 py-md-16">
			<div class="row gx-lg-8 gx-xl-12">

				<div class="col-md-12">
					<h5 class="display-1 mb-3" style="font-size: 30px">@yield('title') : {{ $school_get->school_shortname }}</h5>
					<p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
				</div>

				<div class="col-lg-12">
					<div class="blog single">
						<div class="card">
							<div class="card-body">

								<form class="contact-form" method="post" action="{{ url('/criteriaedit') }}" enctype="multipart/form-data">
									{{ csrf_field() }}
										
									<input name="criteria_id" value="{{ $criteria_id }}" type="hidden">
									<input name="criteria_school" value="{{ $criteria_school }}" type="hidden">
										
									<div class="messages"></div>
									<div class="row gx-4">
											
										<div class="col-md-12">
											<div class="form-select-wrapper mb-4">
												<select class="form-select" id="criteria_type" name="criteria_type" required>
													<option disabled selected value="">Criteria Type *</option>
													<option  value="Approve">Approve</option>
													<option  value="Date">Date</option>
												</select>
											</div>
										</div>
										
										<div class="col-md-6" id="box_recommendation" style="display: none">
											<div class="form-floating mb-4">
												<input id="criteria_recommendation" type="text" name="criteria_recommendation" class="form-control" placeholder="Criteria Name" 
													   value="{{ $criteria_recommendation }}" autocomplete="off">
												<label>Criteria Name</label>
											</div>
										</div>
										
										<div class="col-md-6" id="box_from" style="display: none">
											<div class="form-floating mb-4">
												<input id="criteria_from" type="text" name="criteria_from" class="form-control" placeholder="From" 
													   value="{{ $criteria_from }}" autocomplete="off">
												<label>From</label>
											</div>
										</div>
										
										<div class="col-md-6" id="box_to" style="display: none">
											<div class="form-floating mb-4">
												<input id="criteria_to" type="text" name="criteria_to" class="form-control" placeholder="To" 
													   value="{{ $criteria_to }}" autocomplete="off">
												<label>To</label>
											</div>
										</div>
										
										<div class="col-md-12">
											<div class="form-select-wrapper mb-4">
												<select class="form-select" id="criteria_member" name="criteria_member" required>
													<option disabled selected value="">Approver Type *</option>
													<option  value="Select from Member">
														Select from Member
													</option>
													<option  value="Director">Director</option>
												</select>
											</div>
										</div>

										<div class="col-12 text-center" style="margin-top: 50px">
											<input type="submit" class="btn btn-primary rounded-pill btn-send mb-3" value="Submit">

											<a class="btn btn-violet rounded-pill btn-send mb-3" href="{{ url('/criterialist', $school_id) }}">
												<i class="uil uil-back"></i> Back
											</a>

											<p class="text-muted"><strong>*</strong> These fields are required.</p>
										</div>
										
									</div>
								</form>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>


	@include('layouts.footer')
    
@endsection