<section class="container-fluid" style="padding-bottom: 2rem;">
	<div class="card bg-light-transparent">
		<div class="card-header bg-white">
			<div class="float-left">
				<h5>SALIHIN Alumni List</h5>
			</div>
		    <div class="float-right">
				<div class="btn-group btn-group-sm text-white">
					<a data-toggle="modal" data-target="#addModal" class="btn btn-info btn-sm" title="Add Alumni">
                        <i class="fa fa-plus"></i> Add Alumni
                    </a>
					<a href="<?php echo base_url('hr/alumni/print_alumniList')?>" target="_blank" class="btn btn-dark btn-sm" title="Print Alumni List">
                        <i class="fa fa-print"></i> Print
                    </a>
                    <button id="btnShowFilters" type="button" class="btn btn-light btn-sm collapsed" data-trigger="hover" title="Show Filters Box" data-toggle="collapse" data-target="#collapseFilter"><i class="fas fa-filter"></i>Show Filters</button>
				</div>
		    </div>
		</div>

		<div class="collapse" id="collapseFilter">
            <div class="card-header">
               <div class="row">
                    <div class="col">
                        <div class="card no-shadow">
                            <div class="card-body">
                                <div class="form-group row">
                                    <label for="alumni_filter_year" class="col-lg-3">
                                        Year of Resignation
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <input type="text" name="alumni_filter_year" id="alumni_filter_year" class="form-control datepicker-yyyy">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col d-print-none">
                                        <button class="btn btn-info" id="searchBtn">Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

		<div class="card-body">
			<div class="card no-shadow">
				<div class="card-body">
					<div class="table-responsive">
					<table class="table display responsive table-striped" id="filter_table_alumni">
						<thead>
						<tr>
							<th>No.</th>
							<th>Profile Picture</th>
							<th>Alumni Name</th>
							<th>Address</th>
							<th>Contact No.</th>
							<th>Email</th>
							<th>Date of Birth</th>
							<th>Years of Resignation</th>
							<th>Current Employer</th>
							<th>Action</th>
						</tr>
						</thead>
						<tbody>
							<?php $i=0; if($alumni_list){ foreach ($alumni_list as $value) { //debug($value);?>
								<tr>
									<td><?php echo ++$i; ?></td>
									<td class="text-center"><div class="border border-secondary img-responsive rounded-circle" style="background-image: url(<?php echo base_url(($value['file_name'])?($value['file_location'].$value['file_name']):('assets/images/user.png')); ?>); background-position:50% 50%; background-size: cover; width: 5rem; height: 6rem;" ></div>
									</td>
									<td><?php echo $value['alumni_name']; ?></td>
									<td><?php echo $value['address']; ?></td>
									<td><?php echo $value['contact_no']; ?></td>
									<td><?php echo $value['email']; ?></td>
									<td><?php if(!empty($value['birth_date']) && ($value['birth_date'] != '0000-00-00')){ echo date("d M Y", strtotime($value['birth_date'])); } else { echo ''; } ?></td>
									<td><?php echo $value['year_resigned']; ?></td> 
									<td><?php if($value['curr_employer'] != '0'){ echo $value['curr_employer']; } else { echo ''; } ?></td>
									<td>
										<?php if($value['status'] == 0){ ?>
											<div class="btn-group" role="group" aria-label="Basic example">
												<button type="button" title="Not Allowed to Edit Alumni" class="btn btn-sm btn-primary" disabled><i class="fa fa-upload"></i></button>
												<button type="button" class="btn btn-sm btn-warning" title="Not Allowed to Edit Alumni" disabled><i class="fas fa-edit"></i></button>
												<button type="button" class="btn btn-sm btn-danger" title="Not Allowed to Delete Alumni" disabled><i class="fas fa-trash"></i></button>
											</div>
										<?php } else { ?>
											<div class="btn-group" role="group" aria-label="Basic example">
												<button onclick="upload_pic(<?php echo $value['id']; ?>);" type="button" title="Upload Profile Picture" data-toggle="modal" data-target="#picModal" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i></button>
												<button type="button" class="btn btn-sm btn-warning" title="Edit Alumni" onclick="edit_alumni(<?php echo $value['id']; ?>)"><i class="fas fa-edit"></i></button>
												<button type="button" class="btn btn-sm btn-danger" title="Delete Alumni" id="deleteButtonAlumni" onclick="delete_alumni(<?php echo $value['id']; ?>);"><i class="fas fa-trash"></i></button>
											</div>
										<?php } ?>
									</td>
								</tr>
							<?php } } ?>
						</tbody>
					</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<div class="modal fade" id="addModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="allocation-modal-title">Add Alumni</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form action="<?php echo base_url('hr/alumni/save_alumni'); ?>" method="post" enctype="multipart/form-data">
            	<div class="modal-body">
	            	<div class="form-group">
	            		<div class="row">
	                		<div class="col">
			                    <label>Alumni Name</label>
			                    <input type="text" name="alumni_name" id="alumni_name" class="form-control">
			                </div>
			            </div>
			            <div class="row">
							<div class="col">
								<label>Address</label>
								<input class="form-control" name="alumni_address" id="alumni_address">
							</div>
						</div>
						<div class="row">
							<div class="col">
								<label>Postcode</label>
								<input class="form-control" name="alumni_postcode" id="alumni_postcode">
							</div>
							<div class="col">
								<label>City</label>
								<input class="form-control" name="alumni_city" id="alumni_city">
							</div>
						</div>
						<div class="row">
							<div class="col">
								<label for="state">State</label>
								<select type="text" class="form-control form-control" name="alumni_state" id="alumni_state">
									<option value="-1" selected="selected">Please Select</option>
	                                <?php if($states) foreach ($states as $key => $state): ?>
	                                	<option value="<?php echo $state->id; ?>"><?php echo $state->state; ?></option>
	                                <?php endforeach ?>
								</select>
							</div>
							<div class="col">
								<label for="country">Country</label>
								<select type="text" class="form-control form-control" name="alumni_country" id="alumni_country">
									<option value="-1" selected="selected">Please Select</option>
	                                <?php if($countries) foreach ($countries as $key => $country): ?>
	                               		<option value="<?php echo $country->id; ?>"><?php echo $country->country; ?></option>
	                                <?php endforeach ?>
								</select>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<label>Contact No.</label>
								<input class="form-control" name="alumni_contact" id="alumni_contact">
							</div>
							<div class="col">
								<label>Email</label>
								<input class="form-control" name="alumni_email" id="alumni_email">
							</div>
						</div>
						<div class="row">
							<div class="col">
								<label>Date of Birth</label>
								<input class="datepicker form-control" name="alumni_dob" id="alumni_dob">
							</div>
							<div class="col">
								<label>Year of Resignation</label>
								<input class="yearpicker form-control" name="alumni_resign_year" id="alumni_resign_year">
							</div>
						</div>	
						<div class="row">
	                		<div class="col">
			                    <label>Current Employer</label>
			                    <input type="text" name="alumni_curr_employer" id="alumni_curr_employer" class="form-control">
			                </div>
			            </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="submit" class="btn btn-primary">Save</button>
					</div>
	        	</div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="allocation-modal-title">Edit Alumni</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form action="<?php echo base_url('hr/alumni/edit_alumni'); ?>" method="post" enctype="multipart/form-data">
            	<div class="modal-body">
	            	<div class="form-group">
	            		<input type="hidden" id="alumni_id_edit" name="alumni_id_edit">
	            		<div class="row">
	                		<div class="col">
			                    <label>Alumni Name</label>
			                    <input type="text" name="alumni_name_edit" id="alumni_name_edit" class="form-control">
			                </div>
			            </div>
			            <div class="row">
							<div class="col">
								<label>Address</label>
								<input class="form-control" name="alumni_address_edit" id="alumni_address_edit">
							</div>
						</div>
						<div class="row">
							<div class="col">
								<label>Postcode</label>
								<input class="form-control" name="alumni_postcode_edit" id="alumni_postcode_edit">
							</div>
							<div class="col">
								<label>City</label>
								<input class="form-control" name="alumni_city_edit" id="alumni_city_edit">
							</div>
						</div>
						<div class="row">
							<div class="col">
								<label for="state">State</label>
								<select type="text" class="form-control form-control" name="alumni_state_edit" id="alumni_state_edit">
									<option value="-1">Please Select</option>
	                                <?php if($states) foreach ($states as $key => $state): ?>
	                                	<option value="<?php echo $state->id; ?>"><?php echo $state->state; ?></option>
	                                <?php endforeach ?>
								</select>
							</div>
							<div class="col">
								<label for="country">Country</label>
								<select type="text" class="form-control form-control" name="alumni_country_edit" id="alumni_country_edit">
									<option value="-1">Please Select</option>
	                                <?php if($countries) foreach ($countries as $key => $country): ?>
	                               		<option value="<?php echo $country->id; ?>"><?php echo $country->country; ?></option>
	                                <?php endforeach ?>
								</select>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<label>Contact No.</label>
								<input class="form-control" name="alumni_contact_edit" id="alumni_contact_edit">
							</div>
							<div class="col">
								<label>Email</label>
								<input class="form-control" name="alumni_email_edit" id="alumni_email_edit">
							</div>
						</div>
						<div class="row">
							<div class="col">
								<label>Date of Birth</label>
								<input class="datepicker form-control" name="alumni_dob_edit" id="alumni_dob_edit">
							</div>
							<div class="col">
								<label>Year of Resignation</label>
								<input class="yearpicker form-control" name="alumni_resign_year_edit" id="alumni_resign_year_edit">
							</div>
						</div>	
						<div class="row">
	                		<div class="col">
			                    <label>Current Employer</label>
			                    <input type="text" name="alumni_curr_employer_edit" id="alumni_curr_employer_edit" class="form-control">
			                </div>
			            </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="submit" class="btn btn-primary">Save</button>
					</div>
	        	</div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="picModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Upload Profile Picture</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form id="picModalForm" class="form">
					<div class="form-group" hidden>
						<label for="attachmentType">Attachment Type</label>
						<select id="attachmentType" class="custom-select">
							<option value="">Choose</option>
							<?php if(!empty($attachmentType)) foreach($attachmentType as $type): ?>
								<option value="<?php echo $type['id']; ?>"><?php echo $type['type']; ?></option>
							<?php endforeach; ?>
						</select>
					</div>
					<div class="form-group">
						<input type="file" class="form-control" name="alumni_pic" id="alumni_pic" aria-describedby="attachmentHelp">
						<small id="attachmentHelp" class="form-text text-muted">We only accept the following formats: jpg, jpeg, png.</small>
					</div>
				</form>
			</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" onclick="uploadPic();" id="savePic" class="btn btn-primary">Save</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

	$(document).ready(function(){

        $('#searchBtn').click(function(){
            getData();
        });

    });

	$( ".yearpicker" ).datepicker({
		uiLibrary: 'bootstrap4',
		format: 'yyyy',
		autoclose: true,
		changeYear: true,
		viewMode: "years", 
		minViewMode: "years"
	});

	function upload_pic(alumni_id)
	{
		clearForm('#picModalForm');

		$('#savePic').attr('onClick', 'uploadPic('+ alumni_id +')');
		$("#picModal").modal("show");
	}

	function uploadPic(alumni_id)
	{
		if($('#alumni_pic').prop('files').length > 0)
		{
			var pic_data = new FormData();
			
			pic_data.append("attachment", $('#alumni_pic').prop('files')[0]);
			pic_data.append("alumni_id", alumni_id);

			$.ajax({
				url: "<?php echo base_url('hr/alumni/upload_profile_pic'); ?>",
				type: "POST",
				data: pic_data,
				dataType: "JSON",
				processData: false,
				contentType: false,
				success: function(data) {
					if(data.status == 'Success')
					{
						$('#picModal').modal('hide');
						
						localStorage.setItem("status",data.status);
						localStorage.setItem("msg",data.msg);

						location.reload();
					}
				}
			});
		}
	}

	function edit_alumni(alumni_id) 
    {
		$.ajax({
			type: "POST",
			dataType:"json",
			url: "<?php echo base_url() ?>hr/alumni/get_alumni_details",
			data: {
			  alumni_id: alumni_id
			},
			success: function(data) {

                if ($.trim(data.status) == "success")
                {
                    var alumniData = data.alumni;

                    $('#alumni_id_edit').val(alumniData['id']);
			        $('#alumni_name_edit').val(alumniData['name']);
			        $('#alumni_address_edit').val(alumniData['address']);
			        $('#alumni_postcode_edit').val(alumniData['postcode']);
			        $('#alumni_city_edit').val(alumniData['city']);
			        $('#alumni_state_edit').val(alumniData['state_id']);
			        $('#alumni_country_edit').val(alumniData['country_id']);
			        $('#alumni_contact_edit').val(alumniData['contact_no']);
			        $('#alumni_email_edit').val(alumniData['email']);
			        $('#alumni_dob_edit').val(moment(alumniData['dob'], "YYYY-MM-DD").format("DD-MM-YYYY"));
			        $('#alumni_resign_year_edit').val(alumniData['year_resigned']);
			        $('#alumni_curr_employer_edit').val(alumniData['curr_employer']);
                   
                }
            }
		});

		$('#editModal').modal('show');

    }

    function delete_alumni(alumni_id) {
    	validateForm("#deleteButtonAlumni", "Delete this list?", function() {
			$.ajax({
	            url:'<?php echo base_url('hr/alumni/delete_alumni') ?>',
	            data: {
	                alumni_id : alumni_id,
	            },
	            type: 'post',
	            dataType: 'json',
	            success: (data) => {
	                if(data.status == 'Success')
					{
						localStorage.setItem("status",data.status);
						localStorage.setItem("msg",data.msg);

						window.location.href = "<?php echo base_url().'hr/alumni'?>";
					}
	            }
	        });
        });
    }

    function getData()
    {
        var table   = $('#filter_table_alumni').DataTable();
        table.clear().draw();
        var frmData = new FormData();

        frmData.append('alumni_filter_year',$('#alumni_filter_year').val());

        $.ajax({
            url:"<?php echo base_url('/hr/alumni/get_alumni_filter'); ?>",
            type:'post',
            dataType:'json',
            data:frmData,
            processData: false,
            contentType: false,
            success:function(data){

                iziToast.success({
                    position: 'bottomRight',
                    message: 'filtering data',
                });

                let alumni = data.table;

                if(alumni != null){
                    var index = 1;
                    $.each(alumni,function(key,content)
                    {
                        var i = index + key;

                        if(content.file_name != null){
							var pic = '<div class="border border-secondary img-responsive rounded-circle" style="background-image: url(<?php echo base_url();?>' + content.file_location + content.file_name +'); background-position:50% 50%; background-size: cover; width: 5rem; height: 6rem;"></div>';
                        }else{
                        	var pic = '<div class="border border-secondary img-responsive rounded-circle" style="background-image: url(<?php echo base_url();?>assets/images/user.png); background-position:50% 50%; background-size: cover; width: 5rem; height: 6rem;"></div>';
                        }

						if(content.status == 0){
							var action = '<div class="btn-group" role="group" aria-label="Basic example"><button type="button" title="Not Allowed to Edit Alumni" class="btn btn-sm btn-primary" disabled><i class="fa fa-upload"></i></button><button type="button" class="btn btn-sm btn-warning" title="Not Allowed to Edit Alumni" disabled><i class="fas fa-edit"></i></button><button type="button" class="btn btn-sm btn-danger" title="Not Allowed to Delete Alumni" disabled><i class="fas fa-trash"></i></button></div>';
						}else{
							var action = '<div class="btn-group" role="group" aria-label="Basic example"><button onclick="upload_pic(' + content.id + ');" type="button" title="Upload Profile Picture" data-toggle="modal" data-target="#picModal" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i></button><button type="button" class="btn btn-sm btn-warning" title="Edit Alumni" onclick="edit_alumni(' + content.id + ')"><i class="fas fa-edit"></i></button><button type="button" class="btn btn-sm btn-danger" title="Delete Alumni" id="deleteButtonAlumni" onclick="delete_alumni(' + content.id + ');"><i class="fas fa-trash"></i></button></div>';
						}
                        
                        table.row.add({
                            0   : i,
                            1   : pic,
                            2   : content.alumni_name,
                            3   : content.address,
                            4   : content.contact_no,
                            5   : content.email,
                            6   : moment(content.birth_date).format('DD-MM-YYYY'),
                            7   : content.year_resigned,
                            8   : content.curr_employer,
                            9   : action,
                        }).draw();
                    });
                }
            },
            error:function(){
                iziToast.warning({
                    position: 'bottomRight',
                    message: '500 Internal Server Error.'
                });
            }
        });
    }

</script>