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

{% block title %}Leave Sanction{% 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">Leave Sanction</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>Full Name</th>
								<th>Designation</th>
								<th>Date of Posting</th>
								<th>Type of Employee</th>
								<th>Phone No.</th>
								<th>Current Address</th>
								<th>Type of Leave Applied</th>
								<th>From</th>
								<th>To</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="text-right">1</td>
								<td>Raj Kamlesh Mehta</td>
								<td>Doctor</td>
								<td class="text-right">28/06/2018</td>
								<td>Senior</td>
								<td class="text-right">9558131100</td>
								<td>Address</td>
								<td>EL</td>
								<td class="text-right">30/05/2020</td>
								<td class="text-right">01/06/2020</td>
								<td class="text-center text-nowrap">
									<a href="javascript:void(0);" class="actions mr-3 modal-a" data-name="Raj Kamlesh Mehta" data-designation="Doctor" data-year="28/06/2018" data-type="Senior" data-toggle="modal" data-target="#details-modal">
										<i class="fa fas fa-eye fa-2x" data-toggle="kt-tooltip" title="View Details"></i>
									</a>
									<a href="javascript:void(0);" class="actions" data-toggle="kt-tooltip" title="Accept">
										<i class="fa far fa-check-circle fa-2x mr-3"></i>
									</a>
									<a href="javascript:void(0);" class="actions" data-toggle="kt-tooltip" title="Reject" onclick="return confirm('Are you sure?');">
										<i class="fa far fa-ban fa-2x"></i>
									</a>
								</td>
							</tr>
							<tr>
								<td class="text-right">2</td>
								<td>Sam Suresh Mehta</td>
								<td>Driver</td>
								<td class="text-right">28/06/2016</td>
								<td>Senior</td>
								<td class="text-right">9558131100</td>
								<td>Address</td>
								<td>ML</td>
								<td class="text-right">30/05/2020</td>
								<td class="text-right">01/06/2020</td>
								<td class="text-center text-nowrap">
									<a href="javascript:void(0);" class="actions mr-3 modal-a" data-name="Sam Suresh Mehta" data-designation="Driver" data-year="28/06/2016" data-type="Senior" data-toggle="modal" data-target="#details-modal">
										<i class="fa fas fa-eye fa-2x" data-toggle="kt-tooltip" title="View Details"></i>
									</a>
									<a href="javascript:void(0);" class="actions" data-toggle="kt-tooltip" title="Accept">
										<i class="fa far fa-check-circle fa-2x mr-3"></i>
									</a>
									<a href="javascript:void(0);" class="actions" data-toggle="kt-tooltip" title="Reject" onclick="return confirm('Are you sure?');">
										<i class="fa far fa-ban fa-2x"></i>
									</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="details-modal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-xl" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Leave balance</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					</button>
				</div>

				<div class="modal-body">
					<div class="row col-12">
						<dl class="row">
							<dt class="col-3 pb-4">Name</dt>
							<dd id="name" class="col-3 pb-4"></dd>
							<dt class="col-3 pb-4">Designation</dt>
							<dd id="designation" class="col-3 pb-4"></dd>
							<dt class="col-3 pb-4">Type of Employee</dt>
							<dd id="type" class="col-3"></dd>
							<dt class="col-3 pb-4">Date of Posting</dt>
							<dd id="year" class="col-3"></dd>
						</dl>
					</div>

					<div class="table-responsive">
						<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th class="text-nowrap">Sr. No.</th>
									<th>Year</th>
									<th>Applied on</th>
									<th>Type of Leave</th>
									<th>Balance</th>
									<th>Applied</th>
									<th>From</th>
									<th>To</th>
									<th>Status</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="text-right">1</td>
									<td class="text-right">2020</td>
									<td class="text-right">15/05/2020</td>
									<td>EL</td>
									<td class="text-right">8</td>
									<td class="text-right">2</td>
									<td class="text-right">30/05/2020</td>
									<td class="text-right">01/06/2020</td>
									<td>Accepted</td>
								</tr>
								<tr>
									<td class="text-right">2</td>
									<td class="text-right">2020</td>
									<td class="text-right">16/05/2020</td>
									<td>CL</td>
									<td class="text-right">7</td>
									<td class="text-right">3</td>
									<td class="text-right">05/06/2020</td>
									<td class="text-right">06/06/2020</td>
									<td>Rejected</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" 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>
    $('.modal-a').on('click', function() {
    	$('#name').html($(this).data('name'));
    	$('#type').html($(this).data('type'));
    	$('#designation').html($(this).data('designation'));
    	$('#year').html($(this).data('year'));
    });
	</script>
{% endblock %}