@extends('front.layoutwithout')

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

@section('content')
	<form action="{{route('ordinary.index')}}" id="routes"></form>
	<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>
	<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="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
			    	<h4>Grupo</h4>
			    </a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
			    	<h4>Ext. Grupo</h4>
				</a>
			  </li>
			</ul>

			<div class="tab-content" id="myTabContent">
			  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-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 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="row">
							<div class="col-xl-2 col-lg-3">
								<div class="form-group">
									<label>Fecha examen</label>
									<input type="date" class="form-control" id="date" value="" disabled>
								</div>
							</div>
						</div>
						<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: 13em;">Calificación</th>
							      <th scope="col" style="font-weight: 600;width: 20em;">Operación realizada</th>
							    </tr>
							  </thead>
							  <tbody>
							  	@if(!$data['students']->isEmpty())
									@foreach($data['students'] as $student)
										@foreach($student->OrdinaryGrades as $index => $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-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}}"
								  			  data-grade="{{$study->grade}}"
								  			  data-date="{{$study->date}}"
											>
												<td>{{ $index }}</td>
												<td>{{ $study->student->enrollment }}</td>
												<td>{{ $study->student->user->name }} {{$study->student->user->last_name}}</td>
												<td>
													@if($study->grade <= 5.9)
														<span style="color:red">{{ $study->grade }}</span>
													@else
														{{ $study->grade }}
													@endif
												</td>
												<td></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="#" action="{{ route('ordinary.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">
                    		<input name="date_id" id="date_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">
									</div>
								</div>
								<div class="col-xl-8">
									<div class="form-group">
										<label>Alumno</label>
										<input type="text" class="form-control" id="name">
									</div>
								</div>
								<div class="col-xl-2">
									<div class="form-group">
										<label>Calificacíón</label>
										<input type="number" class="form-control" id="grade">
									</div>
								</div>
							</div>
							<div class="row" style="display: none;">
								<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>

			  <!--Segunda tab-->
			  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">

			  		@include('front.parts.ext')

			  </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')}}';
			var date = '{{Session::get('date')}}';

			$('.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/ordinary.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(){

			//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'));
				$('#grade').val($(this).data('grade'));
				$('#order').val($(this).data('order'));

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

				$('#enrollment').val(enrollment);
				$('#name').val(name);
			});

			$('.student-item2').on('click', function(e){
				e.preventDefault();
				var capture = $('.capture2');
				capture.slideDown();

				//Rellenamos input de formulario de envío
				$('#id_ext').val($(this).data('id'));
				$('#quarter_id_ext').val($(this).data('quarter'));
				$('#group_id_ext').val($(this).data('group'));
				$('#plan_id_ext').val($(this).data('plan'));
				$('#subject_hidden_ext').val($(this).data('subject'));
				$('#career_id_ext').val($(this).data('career'));
				$('#extra').val($(this).data('extra'));
				// $('#order').val($(this).data('order'));

				var enrollment = $(this).data('enrollment');
				var name = $(this).data('name');
				var extra = $(this).data('extra');

				$('#enrollment2').val(enrollment);
				$('#name2').val(name);
			});
		});
	</script>
@endpush