{% extends 'base.html.twig' %}

{% block title %}List of Candidates{% endblock %}

{% block content %}
	<div class="kt-subheader kt-grid__item"></div>

	<div class="kt-container kt-grid__item kt-grid__item--fluid">
		<div class="kt-portlet kt-portlet--mobile">
			<div class="kt-portlet__head kt-portlet__head--lg">
				<div class="kt-portlet__head-label">
					<h3 class="kt-portlet__head-title">List of Candidates</h3>
				</div>

				<div class="kt-portlet__head-toolbar">
					<div class="kt-portlet__head-wrapper">
						<a href="{{ path('dashboard') }}" class="btn btn-clean btn-icon-sm"><i class="la la-long-arrow-left"></i>Back</a>
					</div>
				</div>
			</div>

			<div class="kt-portlet__body">
				<div class="table-responsive">
					<table class="table table-striped table-bordered">
						<thead>
							<tr>
								<th class="text-nowrap">Sr. No.</th>
								<th class="text-nowrap">Full Name</th>
								<th class="text-nowrap">Father's Name</th>
								<th>Category</th>
								<th>Mobile</th>
								<th class="text-nowrap">Local Address</th>
								<th class="text-nowrap">Hometown Address</th>
								<th class="text-nowrap">Adhar No.</th>
								<th class="text-nowrap">Date of Birth</th>
								<th>Qualification</th>
								<th>Basic</th>
								<th>%</th>
								<th>Graduation</th>
								<th>%</th>
								<th class="text-nowrap">Post Graduation</th>
								<th>%</th>
								<th class="text-nowrap">Extra Experience in Year &amp; Month</th>
								<th>Action</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="text-right">1</td>
								<td class="text-nowrap">Raj Mihir Shah</td>
								<td>Mihir Shah</td>
								<td>SC</td>
								<td class="text-right">9558131100</td>
								<td>Local Address</td>
								<td>Hometown address</td>
								<td class="text-right">261521534122</td>
								<td class="text-right">08/05/1988</td>
								<td>MBA</td>
								<td>HSC</td>
								<td class="text-right">78</td>
								<td>BBA</td>
								<td class="text-right">79</td>
								<td>MBA</td>
								<td class="text-right">86</td>
								<td>From 06/2018 to 03/2019</td>
								<td class="text-center text-nowrap">
									<a href="javascript:void(0);" class="btn btn-sm btn-label-success btn-bold give-marks" data-toggle="modal" data-target="#interview-details" data-name="Raj Mihir Shah">
										Assign Marks
									</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="interview-details" tabindex="-1" role="dialog" aria-labelledby="interview-marks-label" aria-hidden="true">
		<div class="modal-dialog modal-xl" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="interview-marks-label">Assign Marks to: <span></span></h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
				</div>

				<div class="modal-body">
					<div class="form-group row">
						<label for="category" class="col-md-3 col-form-label font-weight-bold required">Interviewer 1</label>
						<input type="number" name="interviewer1" class="col-md-9 form-control interviewer1" min="1" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
					</div>

					<div class="form-group row">
						<label for="category" class="col-md-3 col-form-label font-weight-bold required">Interviewer 2</label>
						<input type="number" maxlength="10" name="interviewer2" class="col-md-9 form-control interviewer2" min="1" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
					</div>

					<div class="form-group row">
						<label for="category" class="col-md-3 col-form-label font-weight-bold required">Interviewer 3</label>
						<input type="number" maxlength="10" name="interviewer3" class="col-md-9 form-control interviewer3" min="1" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
					</div>

					<div class="form-group row">
						<label for="category" class="col-md-3 col-form-label font-weight-bold required">Interviewer 4</label>
						<input type="number" name="interviewer4" maxlength="10" class="col-md-9 form-control interviewer4" min="1" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
					</div>

					<h4><strong>Total:</strong> <span>0</span></h4>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-brand" data-dismiss="modal">Submit</button>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	{{ parent() }}

	<script>
    $('.give-marks').on('click', function() {
    	$('.modal-title span').html($(this).data('name'));
    });

    $('.modal-body input').blur(function() {
    	var total = 0;

    	$('.modal-body input').each(function() {
      	total += parseInt($(this).val()) || 0;
    	});

      $('.modal-body h4 span').html(total);
    });
	</script>
{% endblock %}