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

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

{% block content %}
<form class="kt-form" id="employee-form">
	<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 Employees</h3>
				</div>

				<div class="kt-portlet__head-toolbar">
					<button type="submit" class="btn btn-brand btn-bold mr-2">Submit</button>
					<a href="{{ path('dashboard') }}" class="btn btn-clean btn-icon-sm"><i class="la la-long-arrow-left"></i>Back</a>
				</div>
			</div>

			<div class="kt-portlet__body">
				<table class="table table-striped table-bordered">
					<thead>
						<tr>
							<th>
								<label class="kt-checkbox kt-checkbox--single kt-checkbox--bold kt-checkbox--brand">
									<input type="checkbox" id="selectAllCandidates">
									<span></span>
								</label>
							</th>
							<th class="text-nowrap">Sr. No.</th>
							<th>Name</th>
							<th>Designation</th>
							<th>Date of Appointment at this Centre</th>
							<th>GPF / CPF No.</th>
							<th>Type of Employee</th>
							<th>Seniority in Cader</th>
							<th>Retirement / Relieve from Service</th>
							<th>Salary of Last Month Done</th>
							<th>Total Gross Salary</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<label class="kt-checkbox kt-checkbox--single kt-checkbox--bold kt-checkbox--brand">
									<input type="checkbox" name="select_employee">
									<span></span>
								</label>
							</td>
							<td class="text-right">1</td>
							<td>Rajesh Mehta</td>
							<td>Doctor</td>
							<td class="text-right">28/06/2018</td>
							<td class="text-right">13514</td>
							<td>Good</td>
							<td>Senior</td>
							<td class="text-right">20/05/2035</td>
							<td>Yes</td>
							<td class="text-right">25000</td>
							<td class="text-center">
								<a href="#" class="actions" download title="Download Payslip" data-toggle="kt-tooltip">
									<i class="fas fa-download fa-2x"></i>
								</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</form>
{% endblock %}

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

	<script>
    $('#employee-form').on('submit', function(e) {
    	e.preventDefault();

    	return confirm('Are you sure to pay to selected employees?');
    });

    $('#selectAllCandidates').on('click', function() {
  		$('input[name="select_employee"]').prop('checked', this.checked);
    });
	</script>
{% endblock %}