@extends('front.layoutwithout')

@section('title','Calificaciones parciales')
@section('sub-title')

@section('content')
	<div class="msg-error">
		<div class="alert alert-danger alert-dismissible fade show" role="alert" style="background: #FFEDED;border-radius: 4px;color: #BD0500;">
		  No se han encontrado resultados con tu búsqueda. Verifica que los campos ingresados son correctos.
		  <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="top:50%;transform: translate(0,-50%);">
		    <span aria-hidden="true">&times;</span>
		  </button>
		</div>
	</div>
	<form action="{{route('partials.index')}}" id="routes"></form>
	<div class="row">
		<div class="col-xl-12">
			<ul class="nav nav-tabs" id="myTab" role="tablist">
			  <li class="nav-item">
			    <a class="nav-link active" id="1-tab" data-toggle="tab" href="#1" role="tab" aria-controls="1" aria-selected="true">Grupo</a>
			  </li>
			</ul>
			<div class="tab-content" id="myTabContent">
				<div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="1-tab">

					<div id="change">
					  	<div class="row">
							<div class="col-xl-2">
								<div class="form-group">
									<div class="checkbox checkbox-css">
					                    <input type="checkbox" name="quarter" id="quarter"
					                    @if(Session::has('quarter'))
											@if(Session::get('quarter') != '0')
												checked
											@endif
										@endif
					                    />
					                    <label for="quarter">Cuatrimestre</label>
					                </div>
								</div>
							</div>
						</div>

						<div class="row">

							<div class="col-xl-8 col-lg-6">
								<div class="form-group">
									<label>Carrera</label>
									<select name="career" class="form-control" id="career">
										<option value="null">-- Selecciona una carrera --</option>
										@foreach($data['careers'] as $career)
										<option
											value="{{$career->id}}"
											@if(Session::has('career_id'))
												@if(Session::get('career_id') == $career->id )
												selected
												@endif
											@endif
										>{{$career->name}}</option>
										@endforeach
									</select>
								</div>
							</div>

							<div class="col-xl-2 col-lg-3">
								<div class="form-group">
									<label>Grupo</label>
									@php
										$grupo = array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
									@endphp
									<select name="group" class="form-control" id="group">
										@foreach($grupo as $gro)
											<option value="{{$gro}}"
											@if(Session::has('group_id'))
												@if(Session::get('group_id') == $gro )
												selected
												@endif
											@endif
											>{{$gro}}</option>
										@endforeach
									</select>
								</div>
							</div>
							<div class="col-xl-2 col-lg-3">
								<div class="form-group">
									<label>Plan</label>
									<select name="career_plan" class="form-control" id="plan">
										@foreach($data['plans'] as $plan)
											<option value="{{$plan->id}}"
												@if(Session::has('plan_id'))
													@if(Session::get('plan_id') == $plan->id )
														selected
													@endif
												@endif
											>{{$plan->name}}</option>
										@endforeach
									</select>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-xl-2 col-lg-4">
								<div class="form-group">
									<label>Clave materia</label>
									<input type="text" class="form-control" id="key" @if(Session::has('subject_id'))value="{{Session::get('subject_id')}}"@endif
									>
								</div>
							</div>
							<div class="col-xl-10 col-lg-8">
								<div class="form-group">
									<label>Materia</label>
									<input type="text" name="subject" class="form-control" id="subject" disabled>
								</div>
							</div>
						</div>
					</div>

					<div class="row" id="calif_partials">
						<div class="col-xl-12">
							<h4>Alumnos inscritos en la materia (<span id="count">0</span>)</h4>
							<div class="table-responsive">
							<table class="table table-bordered table-striped">
							  <thead>
							    <tr>
							      <th scope="col" style="font-weight: 600;width: 5em;">No.</th>
							      <th scope="col" style="font-weight: 600;width: 11em;">Matrícula</th>
							      <th scope="col" style="font-weight: 600;">Nombre</th>
							      <th scope="col" style="font-weight: 600;width: 8em;">Parcial 1</th>
							      <th scope="col" style="font-weight: 600;width: 8em;">Parcial 2</th>
							      <th scope="col" style="font-weight: 600;width: 8em;">Parcial 3</th>
							      <th scope="col" class="quarter-item" style="font-weight: 600;width: 8em;">Parcial 4</th>
							      <th scope="col" style="font-weight: 600;width: 8em;">Promedio</th>
							    </tr>
							  </thead>
							  <tbody>

								  	@if(!$data['students']->isEmpty())
										@foreach($data['students'] as $student)
											@foreach($student->PartialCurrentGrades as $study)
												<tr class="student student-item"
												  data-id="{{$study->subject->id}}"
												  data-enrollment="{{ $study->student->enrollment }}"
												  data-name="{{$study->student->user->last_name}} {{$study->student->user->name}}"
												  data-partial_1="{{$study->student->grades->first()->partial_1}}"
												  data-partial_2="{{$study->student->grades->first()->partial_2}}"
												  data-partial_3="{{$study->student->grades->first()->partial_3}}"
												  data-partial_4="{{$study->student->grades->first()->partial_4}}"
									  			  data-subject="{{$study->subject->code}}"
									  			  data-subject-name="{{$study->subject->name}}"
									  			  data-career="{{$study->student->career->id}}"
									  			  data-quarter="{{ ($study->student->career->quarter == 'on')? '1':'0'}}"
									  			  data-plan="{{$study->student->career->career_plan_id}}"
									  			  data-group="{{$study->student->group}}"
												>
													<td>{{ $study->id }}</td>
													<td>{{ $study->student->enrollment }}</td>
													<td>{{$study->student->user->last_name}} {{ $study->student->user->name }}</td>
													<td>{{ $study->partial_1 }}</td>
													<td>{{ $study->partial_2 }}</td>
													<td>{{ $study->partial_3 }}</td>
													<td class="quarter-item">{{ $study->partial_4 }}</td>
													<td>
														@if($study->grade <= 5.9)
															<span style="color:red">{{ $study->grade }}</span>
														@else
															{{ $study->grade }}
														@endif
													</td>
												</tr>
											@endforeach
										@endforeach
									{{-- <tr class="not_found">
										<td colspan="8">No se encuentran alumnos inscritos en la materia.</td>
									</tr> --}}
								@else
									<tr class="not_found">
										<td colspan="8">No se encuentran alumnos inscritos en la materia.</td>
									</tr>
								@endif
							  </tbody>
							</table>
							</div>
						</div>
					</div>

					<div class="capture" style="display:none;">
						<form method="post" id="calUpdate" action="{{ route('partials.index') }}">
							{{ csrf_field() }}
                    		<input name="_method" type="hidden" value="PUT">
                    		<input name="id" id="id" type="hidden">
                    		<input name="quarter" id="quarter_id" type="hidden">
                    		<input name="group_id" id="group_id" type="hidden">
                    		<input name="plan_id" id="plan_id" type="hidden">
                    		<input name="subject_hidden" id="subject_hidden" type="hidden">
                    		<input name="career_id" id="career_id" type="hidden">
							<div class="row">
								<div class="col-xl-12">
									<h4>Captura</h4>
								</div>
								<div class="col-xl-2">
									<div class="form-group">
										<label>Matrícula</label>
										<input type="text" class="form-control" id="enrollment" disabled>
									</div>
								</div>
								<div class="col-xl-10">
									<div class="form-group">
										<label>Alumno</label>
										<input type="text" class="form-control" id="name" disabled>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-xl-2">
									<div class="form-group">
										<label>Parcial 1</label>
										<input type="text" name="partial_1" class="form-control" id="partial_1">
									</div>
								</div>
								<div class="col-xl-2">
									<div class="form-group">
										<label>Parcial 2</label>
										<input type="text" name="partial_2" class="form-control" id="partial_2">
									</div>
								</div>
								<div class="col-xl-2">
									<div class="form-group">
										<label>Parcial 3</label>
										<input type="text" name="partial_3" class="form-control" id="partial_3">
									</div>
								</div>
								<div class="col-xl-2 quarter-item">
									<div class="form-group">
										<label>Parcial 4</label>
										<input type="text" name="partial_4" class="form-control" id="partial_4">
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-xl-3">
									<a href="javascript:{}" onclick="enviarForm()" class="btn btn-md btn-primary" id="capture">Capturar</a>
								</div>
							</div>
						</form>
					</div>
			  	</div>
			  </div>
		 </div>
	</div>

@endsection

@push('css')
@endpush

@push('js')

	<script>
		$(document).ready(function(){
			var quarter = '{{Session::get('quarter')}}';
			var group = '{{Session::get('group_id')}}';
			var plan = '{{Session::get('plan_id')}}';
			var subject = '{{Session::get('subject_id')}}';
			var career = '{{Session::get('career_id')}}';

			$('.not_found').hide();

			var item = $('.student-item[data-career="' + career + '"][data-plan="'+plan+'"][data-subject="'+subject+'"][data-quarter="'+quarter+'"][data-group="'+group+'"]');
			item.show();
		});
	</script>
	<script src="{{asset('js/partials.js')}}"></script>

	<script>
		function enviarForm(){
            id = $('#subject option:selected').data('grade');
            route = $('#routes').attr('action');
            $('#calUpdate').attr('action', route+"/"+id);
            $('#calUpdate').submit();
        }

		$(document).ready(function(){

			$('#career').on('change', function(){
				var career = $(this).val();

				 $("#town-select").change(function(){
			        if (this.value === 'all') {
			          $("div[data-town]").show();
			        } else {
			          $("div[data-town]").hide();
			          $("div[data-town=" + this.value +"]").show();
			        }
			      });
			});

			//Enable button save
			$('#partial_1,#partial_2,#partial_3').on('input', function(e){
				e.preventDefault();
				var capture = $('#capture');
				capture.removeAttr('disabled');
				capture.removeClass('disable');
				capture.addClass('btn-primary');
			});

			//Activar
			$('.student-item').on('click', function(e){
				e.preventDefault();
				var capture = $('.capture');
				capture.slideDown();

				//Rellenamos input de formulario de envío
				$('#id').val($(this).data('id'));
				$('#quarter_id').val($(this).data('quarter'));
				$('#group_id').val($(this).data('group'));
				$('#plan_id').val($(this).data('plan'));
				$('#subject_hidden').val($(this).data('subject'));
				$('#career_id').val($(this).data('career'));

				var enrollment = $(this).data('enrollment');
				var name = $(this).data('name');
				var partial_1 = $(this).data('partial_1');
				var partial_2 = $(this).data('partial_2');
				var partial_3 = $(this).data('partial_3');
				var partial_4 = $(this).data('partial_4');

				$('#enrollment').val(enrollment);
				$('#name').val(name);
				$('#partial_1').val(partial_1);
				$('#partial_2').val(partial_2);
				$('#partial_3').val(partial_3);
				$('#partial_4').val(partial_4);
			});
		});
	</script>
@endpush