<div class="container">
	<div class="row">
		<div class="col">
			<h4 style="color: red;"><b>RECOGNITION *farid</b><button type="button" class="btn btn-default btn-sm d-print-none" onclick="openRecognitionModal()" title=" Add New Recognition"><span class="fa fa-plus" style="color: #007bff;"></span></button></h4>
		</div>
	</div>
	<div class="row">
		<div class="col">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>ACHIEVEMENT</th>
						<th>AWARD</th>
						<th>YEAR</th>
						<th>ATTACHMENT</th>
						<th>ACTION</th>
					</tr>
				</thead>
				<tbody>
					<?php if($recognition) foreach ($recognition as $key => $row): ?>
						<tr>
							<td><?php echo ($row->achievement)?strtoupper($row->achievement):'N/A'; ?></td>
							<td><?php echo ($row->award)?strtoupper($row->award):'N/A'; ?></td>
							<td><?php echo ($row->year)?strtoupper($row->year):'N/A'; ?></td>
							<td><?php echo ($row->attachment_name)?strtoupper($row->attachment_name):'N/A'; ?></td>
							<td></td>
						</tr>
					<?php endforeach ?>
				</tbody>
			</table>
		</div>
	</div>
</div>

<!-- Modal -->
<div class="modal fade d-print-none" role="dialog" aria-hidden="true" id="recognitionModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="racks-modal-title">Add Recognition</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
			<form id="recognitionForm" class="form">
				<div class="modal-body">
						<div class="form-row">
							<div class="col-12 col-sm-6">
								<label for="recognition_achievement">Achievement</label>
								<input type="text" class="form-control" name="recognition_achievement" id="recognition_achievement">
							</div>
							<div class="col-12 col-sm-6">
								<label for="recognition_year">Year</label>
								<input class="form-control datepicker-yyyy" name="recognition_year" id="recognition_year">
							</div>
						</div>
						<div class="form-row">
							<div class="col-12 col-sm-6">
								<label for="recognition_award" class="col-form-label">Award</label>
								<input type="text" class="form-control" name="recognition_award" id="recognition_award">
							</div>
							<div class="col-12 col-sm-6">
								<label for="recognition_attachments" class="col-form-label">Attachment</label>
								<input type="file" class="form-control" name="recognition_attachments" id="recognition_attachments">
							</div>
						</div>
				</div>
				<div class="modal-footer">
					<div class="btn-group float-right">
						<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
						<button type="button" id="saveRecognitionButton" onclick="saveRecognition();" class="btn btn-primary">Save</button>
					</div>
				</div>
			</form>
        </div>
    </div>
</div>

<?php  
//1. script for modal address
//2. script to ajax load for update address
//3. script to refresh table address
//4. script document ready to refresh table 
//5. script to save and refresh table after save 
?>
<script type="text/javascript">
	function openRecognitionModal()
	{

		clearForm("#recognitionForm");

		$('#recognitionModal').find('#racks-modal-title').text('Add Recognition');
        $('#saveRecognitionButton').attr('onclick', 'saveRecognition()');
		$('#recognitionModal').modal('show');
	}
</script>