
<!-- ======================== START OF EXTRA INFORMATION MODULE MODALS ========================= -->

<!-- New Identification Document Type Modal -->
<div class="modal fade" id="addDepartmentModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-save"></i> New Identification Document</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 action="#" method="POST" id="addNewDepartmentForm">
					<div class="row" style="margin: 0px;">
						<div class="form-group col-md-12">
							<label class="control-label">Position Name</label>
							<input class="form-control" type="text" name="txtPositionNameAddNewDepartment" id="txtPositionNameAddNewDepartment" placeholder="Ex: Finance director" required>
							<input type="hidden" name="txtRegisteredByAddNewPropertyType" id="txtRegisteredByAddNewPropertyType" value="<?php echo $_SESSION['userIdd']; ?>" required>
							<input type="hidden" name="txtRegisterDateAddNewPropertyType" id="txtRegisterDateAddNewPropertyType" value="<?php echo date("Y-m-d H:i:s");?>" required>
						</div>
					</div>
					<div class="form-group col-md-12 text-right pt-2">
						<button type="submit" class="btn btn-success" name="btnAddNewPropertyType" id="btnAddNewPropertyType"><i class="fa fa-fw fa-lg fa-save"></i>Register Type</button>&nbsp;&nbsp;&nbsp;
						<button type="reset" class="btn btn-danger" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- New Identification Document Type Modal Ends Here  -->

<!-- Update Identification Document Type Modal -->
<div class="modal fade" id="updateIdentificationDocumentTypeModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-edit"></i> Update Department</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 action="#" method="POST" id="updateIdentificationDocumentTypeForm">
					<div class="row" style="margin: 0px;">
						<div class="form-group col-md-12">
							<label class="control-label">Document Type Name</label>
							<input type="hidden" name="txtDocumentTypeIddUpdateIdentificationDocumentType" id="txtDocumentTypeIddUpdateIdentificationDocumentType" required>
							<input class="form-control" type="text" name="txtDocumentTypeNameUpdateIdentificationDocumentType" id="txtDocumentTypeNameUpdateIdentificationDocumentType" required>
							<input type="hidden" name="txtUpdatedByUpdateIdentificationDocumentType" id="txtUpdatedByUpdateIdentificationDocumentType" value="<?php echo $_SESSION['userIdd']; ?>" required>
							<input type="hidden" name="txtUpdateDateUpdateIdentificationDocumentType" id="txtUpdateDateUpdateIdentificationDocumentType" value="<?php echo date("Y-m-d H:i:s");?>" required>
						</div>
					</div>
					<div class="form-group col-md-12 text-right pt-2">
						<button type="submit" class="btn btn-success" name="btnUpdateIdentificationDocumentType" id="btnUpdateIdentificationDocumentType"><i class="fa fa-fw fa-lg fa-pencil"></i>Update Type</button>&nbsp;&nbsp;&nbsp;
						<button type="reset" class="btn btn-danger" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- Update Identification Document Type Modal Ends Here  -->

<!-- New Department Modal -->
<div class="modal fade" id="addDepartmentModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-save"></i> New Department</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 action="#" method="POST" id="addNewDepartmentForm">
					<div class="row" style="margin: 0px;">
						<div class="form-group col-md-12">
							<label class="control-label">Position Name</label>
							<input class="form-control" type="text" name="txtPositionNameAddNewDepartment" id="txtPositionNameAddNewDepartment" placeholder="Ex: Finance director" required>
							<input type="hidden" name="txtRegisteredByAddNewPropertyType" id="txtRegisteredByAddNewPropertyType" value="<?php echo $_SESSION['userIdd']; ?>" required>
							<input type="hidden" name="txtRegisterDateAddNewPropertyType" id="txtRegisterDateAddNewPropertyType" value="<?php echo date("Y-m-d H:i:s");?>" required>
						</div>
					</div>
					<div class="form-group col-md-12 text-right pt-2">
						<button type="submit" class="btn btn-success" name="btnAddNewPropertyType" id="btnAddNewPropertyType"><i class="fa fa-fw fa-lg fa-save"></i>Register Type</button>&nbsp;&nbsp;&nbsp;
						<button type="reset" class="btn btn-danger" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- New Department Modal Ends Here  -->

<!-- Update Department Modal -->
<div class="modal fade" id="updateDepartmentModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-edit"></i> Update Department</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 action="#" method="POST" id="updateDepartmentForm">
					<div class="row" style="margin: 0px;">
						<div class="form-group col-md-12">
							<label class="control-label">Department Name</label>
							<input type="hidden" name="txtDepartmentIddUpdateDepartment" id="txtDepartmentIddUpdateDepartment" required>
							<input class="form-control" type="text" name="txtDepartmentNameUpdateDepartment" id="txtDepartmentNameUpdateDepartment" required>
							<input type="hidden" name="txtUpdatedByUpdateDepartment" id="txtUpdatedByUpdateDepartment" value="<?php echo $_SESSION['userIdd']; ?>" required>
							<input type="hidden" name="txtUpdateDateUpdateDepartment" id="txtUpdateDateUpdateDepartment" value="<?php echo date("Y-m-d H:i:s");?>" required>
						</div>
					</div>
					<div class="form-group col-md-12 text-right pt-2">
						<button type="submit" class="btn btn-success" name="btnUpdateDepartment" id="btnUpdateDepartment"><i class="fa fa-fw fa-lg fa-pencil"></i>Update Position</button>&nbsp;&nbsp;&nbsp;
						<button type="reset" class="btn btn-danger" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- Update Department Modal Ends Here  -->

<!-- New Employee Title Type Modal -->
<div class="modal fade" id="addEmployeePositionModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-save"></i> New Employee Position</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 action="#" method="POST" id="addNewEmployeePositionForm">
					<div class="row" style="margin: 0px;">
						<div class="form-group col-md-12">
							<label class="control-label">Position Name</label>
							<input class="form-control" type="text" name="txtPositionNameAddNewEmployeePosition" id="txtPositionNameAddNewEmployeePosition" placeholder="Ex: Finance director" required>
							<input type="hidden" name="txtRegisteredByAddNewPropertyType" id="txtRegisteredByAddNewPropertyType" value="<?php echo $_SESSION['userIdd']; ?>" required>
							<input type="hidden" name="txtRegisterDateAddNewPropertyType" id="txtRegisterDateAddNewPropertyType" value="<?php echo date("Y-m-d H:i:s");?>" required>
						</div>
					</div>
					<div class="form-group col-md-12 text-right pt-2">
						<button type="submit" class="btn btn-success" name="btnAddNewPropertyType" id="btnAddNewPropertyType"><i class="fa fa-fw fa-lg fa-save"></i>Register Type</button>&nbsp;&nbsp;&nbsp;
						<button type="reset" class="btn btn-danger" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- New Employee Title Modal Ends Here  -->

<!-- Update Employee Title Modal -->
<div class="modal fade" id="updateEmployeePositionModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-edit"></i> Update Employee Position</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 action="#" method="POST" id="updateEmployeePositionForm">
					<div class="row" style="margin: 0px;">
						<div class="form-group col-md-12">
							<label class="control-label">Position Name</label>
							<input type="hidden" name="txtPositionIddUpdateEmployeePosition" id="txtPositionIddUpdateEmployeePosition" required>
							<input class="form-control" type="text" name="txtPositionNameUpdateEmployeePosition" id="txtPositionNameUpdateEmployeePosition" required>
							<input type="hidden" name="txtUpdatedByUpdateEmployeePosition" id="txtUpdatedByUpdateEmployeePosition" value="<?php echo $_SESSION['userIdd']; ?>" required>
							<input type="hidden" name="txtUpdateDateUpdateEmployeePosition" id="txtUpdateDateUpdateEmployeePosition" value="<?php echo date("Y-m-d H:i:s");?>" required>
						</div>
					</div>
					<div class="form-group col-md-12 text-right pt-2">
						<button type="submit" class="btn btn-success" name="btnUpdateEmployeePosition" id="btnUpdateEmployeePosition"><i class="fa fa-fw fa-lg fa-pencil"></i>Update Position</button>&nbsp;&nbsp;&nbsp;
						<button type="reset" class="btn btn-danger" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- Update Employee Title Modal Ends Here  -->

<!-- Start of Update Working Area Modal -->
<div class="modal fade" id="updateWorkingAreaModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-edit"></i> Update Working Area</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="tile">
					<form action="#" method="POST" id="updateWorkingAreaForm">
						<div class="row">
							<div class="form-group col-md-12">
								<label class="control-label">Area Name</label>
								<input type="hidden" name="txtWorkingAreaIdUpdateWorkingArea" id="txtWorkingAreaIdUpdateWorkingArea" required />
								<input class="form-control font-weight-bold" type="text" name="txtWorkingAreaNameUpdateWorkingArea" id="txtWorkingAreaNameUpdateWorkingArea" placeholder="Enter working area name" required>
							</div>
							<div class="form-group col-md-12">
								<label class="control-label">Description</label>
								<textarea class="form-control" rows="2" name="txtWorkingAreaDescriptionUpdateWorkingArea" id="txtWorkingAreaDescriptionUpdateWorkingArea" placeholder="Enter area description" required></textarea>
								<input class="form-control" type="hidden" name="txtUpdatedByUpdateWorkingArea" id="txtUpdatedByUpdateWorkingArea" value="<?php echo $_SESSION['userIdd']; ?>" required>
								<input class="form-control" type="hidden" name="txtUpdatDateUpdateWorkingArea" id="txtUpdatDateUpdateWorkingArea" value="<?php echo date("Y-m-d H:i:s"); ?>" required>
							</div>
							<div class="form-group col-md-12 text-right">
								<button type="submit" class="btn btn-success" name="btnUpdateWorkingArea" id="btnUpdateWorkingArea"><i class="fa fa-fw fa-lg fa-pencil"></i>Update Area</button>
							</div>
						</div>
					</form> 	
				</div>
			</div>

		</div>
	</div>
</div>
<!-- Update Working Area Modal Ends Here  -->

<!-- Start of Update Expense Types Modal -->
<div class="modal fade" id="updateExpenseTypeModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-edit"></i> Update Working Area</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="tile">
					<form action="#" method="POST" id="updateExpenseTypeForm">
						<div class="row">
							<div class="form-group col-md-12">
								<label class="control-label">Area Name</label>
								<input type="hidden" name="txtExpenseTypeIdUpdateExpenseType" id="txtExpenseTypeIdUpdateExpenseType" required />
								<input class="form-control font-weight-bold" type="text" name="txtExpenseTypeNameUpdateExpenseType" id="txtExpenseTypeNameUpdateExpenseType" placeholder="Enter working area name" required>
							</div>
							<div class="form-group col-md-12">
								<label class="control-label">Description</label>
								<textarea class="form-control" rows="2" name="txtExpenseTypeDescriptionUpdateExpenseType" id="txtExpenseTypeDescriptionUpdateExpenseType" placeholder="Enter area description" required></textarea>
								<input class="form-control" type="hidden" name="txtUpdatedByUpdateExpenseType" id="txtUpdatedByUpdateExpenseType" value="<?php echo $_SESSION['userIdd']; ?>" required>
								<input class="form-control" type="hidden" name="txtUpdateDateUpdateExpenseType" id="txtUpdateDateUpdateExpenseType" value="<?php echo date("Y-m-d H:i:s"); ?>" required>
							</div>
							<div class="form-group col-md-12 text-right">
								<button type="submit" class="btn btn-success" name="btnUpdateExpenseType" id="btnUpdateExpenseType"><i class="fa fa-fw fa-lg fa-pencil"></i>Update Type</button>
							</div>
						</div>
					</form> 	
				</div>
			</div>

		</div>
	</div>
</div>
<!-- Update Expense Types Modal Ends Here  -->

<!-- ======================== END OF EXTRA INFORMATION MODULE MODALS =========================== -->

<!-- ======================== START OF ADMINISTRATION MODULE MODALS ============================ -->

<!--Update Menu Modal --> 
<div class="modal fade" style="z-index: 3040; overflow-y: auto;" id="updateMenuModal" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5><i class="fa fa-pencil"></i> <b>Update System Menu</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="tile">
                    <form action="#" method="POST" id="updateMenuForm">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label class="form-group">Menu Text</label>
                                <input type="hidden" name="txtMenuIddUpdateMenu" id="txtMenuIddUpdateMenu" />
                                <input class="form-control" type="text" name="txtMenuNameUpdateMenu" id="txtMenuNameUpdateMenu" placeholder="Enter menu name" required>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="form-group">Menu Icon</label>
                                <input class="form-control" type="text" name="txtMenuIconUpdateMenu" id="txtMenuIconUpdateMenu" placeholder="Enter menu fa icon" required>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="form-group">Menu Link</label>
                                <input class="form-control" type="text" name="txtMenuLinkUpdateMenu" id="txtMenuLinkUpdateMenu" placeholder="Enter menu link (URL)" required>
                            </div>
                        	<div class="form-group col-md-12 mt-3" style="text-align: right;">
                                <button type="submit" class="btn btn-primary" name="btnUpdateMenu" id="btnUpdateMenu"><i class="fa fa-fw fa-lg fa-pencil"></i>Update</button>&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn btn-danger"  data-dismiss="modal"><i class="fa fa-fw fa-lg fa-close"></i>Close</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Update Submenu Modal --> 
<div class="modal fade" style="z-index: 3040; overflow-y: auto;" id="updateSubmenuModal" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5><i class="fa fa-pencil"></i> <b>Update Submenu</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="tile">
                    <form action="#" method="POST" id="updateSubmenuForm">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label class="form-group">Submenu Text</label>
                                <input type="hidden" name="txtSubmenuIddUpdateSubmenu" id="txtSubmenuIddUpdateSubmenu" />
                                <input class="form-control" type="text" name="txtSubmenuNameUpdateSubmenu" id="txtSubmenuNameUpdateSubmenu" placeholder="Enter submenu name" required>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="form-group">Submenu Icon</label>
                                <input class="form-control" type="text" name="txtSubmenuIconUpdateSubmenu" id="txtSubmenuIconUpdateSubmenu" placeholder="Enter submenu fa icon" required>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="form-group">Submenu Link</label>
                                <input class="form-control" type="text" name="txtSubmenuLinkUpdateSubmenu" id="txtSubmenuLinkUpdateSubmenu" placeholder="Enter submenu link (URL)" required>
                            </div>
                        	<div class="form-group col-md-12 mt-3" style="text-align: right;">
                                <button type="submit" class="btn btn-primary" name="btnUpdateSubmenu" id="btnUpdateSubmenu"><i class="fa fa-fw fa-lg fa-pencil"></i>Update</button>&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn btn-danger"  data-dismiss="modal"><i class="fa fa-fw fa-lg fa-close"></i>Close</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Update Payment Gateway Modal -->
<div class="modal fade" id="updatePaymentGatewaysModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-save"></i> Update Payment Gateways</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="location.reload()">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="tile">
					<form action="#" method="POST" id="updatePaymentGatewayForm" enctype="multipart/form-data" >
						<div class="row">
							<div class="form-group col-sm-12">
							    <input type="hidden" name="txtGatewayIdd" id="txtGatewayIdd">
								<label class="control-label">Gateway Type</label>
								<select class="form-control" style="width: 100%;" name="cmbGatewayTypeUp" id="cmbGatewayTypeUp" required>
									<option selected value="">Select Type</option>
									<option value="1">Bank Payment</option>
									<option value="2">Mobile Payment</option>
									<option value="3">Cash Payment</option>
								</select>
							</div>
							<div class="form-group col-md-12">
								<label class="control-label" id="gatewayNameLabelUp">Name</label>
								<input type="text" class="form-control" name="txtGatewaysGatewayNameUp" id="txtGatewaysGatewayNameUp" placeholder="Enter name" required>
								<input class="form-control" type="hidden" name="txtUserrIddd" id="txtUserrIddd" value="<?php echo $_SESSION['userIdd']; ?>" required>
								<input class="form-control" type="hidden" name="txtGatewayUpdateDate" id="txtGatewayUpdateDate" value="<?php echo date("Y-m-d H:i:s"); ?>" required>
							</div>
							<div class="form-group col-md-5" align="center">
    							<br>
    							<img class='img-responsive' src="img/upload_gateway_image.png" id="gatewayTargetUp" width="80%" height="100px" /><br><br>
    							<label class="btn btn-success col-md-12">
    								<i class="fa fa-upload"> </i> Upload <input type="file" name="gatewayPhotoUp" id="gatewayPhotoUp" hidden>
    							</label>
    							<input type="hidden" name="photoGatewayUpdate" id="photoGatewayUpdate">
    							<script>
    								var up_gateway_src = document.getElementById("gatewayPhotoUp");
    								var up_gateway_target = document.getElementById("gatewayTargetUp");
    
    								function showGatewayImageUp(up_gateway_src, up_gateway_target) {
    									var upl = new FileReader();
    									upl.onload = function (e) {
    										up_gateway_target.src = this.result;
    									};
    									up_gateway_src.addEventListener("change", function () {
    										upl.readAsDataURL(up_gateway_src.files[0]);
    									})
    								}
    								showGatewayImageUp(up_gateway_src, up_gateway_target);
    							</script>
    						</div>
    						<div class="form-group col-md-12 mt-3" style="text-align: right;">
    							<button type="submit" class="btn btn-primary" name="btnUpdateGateway" id="btnUpdateGateway"><i class="fa fa-fw fa-lg fa-pencil"></i>Update Gateway</button>&nbsp;&nbsp;&nbsp;
    							<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
    						</div>
    					</div>
					</form>

				</div>
			</div>

		</div>
	</div>
</div>
<!-- End of Update Payment Gateway Modal -->

<!-- New Employee Modal -->
<div class="modal fade" id="registerNewEmployeeModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-save"></i> Register New Employee</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="tile">
				    
					<form action="#" method="POST" id="registerNewEmployeeForm" enctype="multipart/form-data">
					    <div class="row">
                            <div class="form-group col-md-12">
                                <h5 class="text-primary pb-3 border-bottom border-warning"><i class="fa fa-vcard"></i> Personal Information</h5>
                            </div>
                        </div>
						<div class="row">
							<div class="form-group col-md-2 text-center">
								<img class="rounded" src="img/no-image.jpg" id="newEmployeePhotoTarget" width="100%" height="150px" /><br>
								<label class="btn btn-info btn-sm d-block mt-1">
									<i class="fa fa-upload"> </i> Upload <input type="file" class="form-control" name="newEmployeePhoto" id="newEmployeePhoto" hidden>
								</label>
								<input type="hidden" id="photoNewEmployee1" name="photoNewEmployee1"/>                        

								<script>
									var new_employee_photo_src = document.getElementById("newEmployeePhoto");
									var new_employee_photo_target = document.getElementById("newEmployeePhotoTarget");

									function showNewEmployeePhoto(new_employee_photo_src, new_employee_photo_target) {
										var upl = new FileReader();
										upl.onload = function (e) {
											new_employee_photo_target.src = this.result;
										};
										new_employee_photo_src.addEventListener("change", function () {
											upl.readAsDataURL(new_employee_photo_src.files[0]);
										})
									}
									showNewEmployeePhoto(new_employee_photo_src, new_employee_photo_target);
								</script>
							</div>

							<div class="form-group col-md-10">

								<div class="row">
									<div class="form-group col-md-6">
										<label class="control-label">Employee Name</label>
										<input class="form-control" type="text" name="txtEmployeeNameNewEmployee" id="txtEmployeeNameNewEmployee" placeholder="Ex: Abdullahi Siad Raage" required>
									</div>
									<div class="form-group col-md-3">
										<label class="control-label">Place of Birth</label>
										<input class="form-control" type="text" name="txtBirthPlaceNewEmployee" id="txtBirthPlaceNewEmployee" placeholder="Ex: Mogadishu" required>
									</div>
									<div class="form-group col-md-3">
										<label class="control-label">Date of Birth</label>
										<input class="form-control date" type="date" name="txtBirthDateNewEmployee" id="txtBirthDateNewEmployee" max="<?php echo date("Y-m-d"); ?>" value="<?php echo date("Y-m-d"); ?>" required>
									</div>
									
									<div class="form-group col-md-3">
										<label class="control-label">Employee Sex</label>
										<select id="cmbEmployeeSexNewEmployee" name="cmbEmployeeSexNewEmployee" class="form-control" style="width:100%" required />
											<option value="">Select Sex</option>
											<option value="Male">Male</option>
											<option value="Female">Female</option>
										</select>						
									</div>
									<div class="form-group col-md-3">
										<label class="control-label">Marital Status</label>
										<select id="cmbMaritalStatusNewEmployee" name="cmbMaritalStatusNewEmployee" class="form-control" style="width:100%" required />
											<option value="">Select Status</option>
											<option value="Single">Single</option>
											<option value="Married">Married</option>
										</select>						
									</div>
									<div class="form-group col-md-3">
        								<label class="control-label">Identification Type</label>
        								<select id="cmbIdentificationDocumentTypeNewEmployee" name="cmbIdentificationDocumentTypeNewEmployee" class="form-control" style="width:100%" required />

        								</select>						
        							</div>
									<div class="form-group col-md-3">
										<label class="control-label">ID Document</label>
										<label class="btn btn-primary d-block">
											<i class="fa fa-upload"> </i> Upload Document <input type="file" class="form-control" name="cmbEmployeeIdentificationDocumentNewEmployee" id="cmbEmployeeIdentificationDocumentNewEmployee" hidden>
										</label>
										<input type="hidden" id="docNewEmployee1" name="docNewEmployee1" />
									</div>
								</div>
							</div>
                            <div class="form-group col-md-12 mt-2">
                                <h5 class="text-primary pb-3 border-bottom border-warning"><i class="fa fa-id-card"></i> Employment Information </h5>
                            </div>
					        <div class="form-group col-md-3">
								<label class="control-label">Hire Date</label>
								<input class="form-control date" type="date" name="txtHireDateNewEmployee" id="txtHireDateNewEmployee" max="<?php echo date("Y-m-d"); ?>" value="<?php echo date("Y-m-d"); ?>" required>
							</div>
							<div class="form-group col-md-5">
								<label class="control-label">Department</label>
								<select id="cmbEmployeeDepartmentNameNewEmployee" name="cmbEmployeeDepartmentNameNewEmployee" class="form-control" style="width:100%" required />

								</select>						
							</div>
							<div class="form-group col-md-4">
								<label class="control-label">Title</label>
								<select id="cmbEmployeePositionNameNewEmployee" name="cmbEmployeePositionNameNewEmployee" class="form-control" style="width:100%" required />

								</select>						
							</div>
							<div class="form-group col-md-3">
								<label class="control-label">Working Area</label>
								<select id="cmbWorkingAreaNameNewEmployee" name="cmbWorkingAreaNameNewEmployee" class="form-control" style="width:100%" required />

								</select>						
							</div>
							<div class="form-group col-md-3">
								<label class="control-label">Salary</label>
								<input class="form-control" type="number" name="txtEmployeeSalaryNewEmployee" id="txtEmployeeSalaryNewEmployee" placeholder="Ex: 150" required>
							</div>
                            <div class="form-group col-md-12 mt-2">
                                <h5 class="text-primary pb-3 border-bottom border-warning"><i class="fa fa-phone"></i> Contact Information</h5>
                            </div>
							<div class="form-group col-md-5">
								<label class="control-label">Home Address</label>
								<input class="form-control" type="text" name="txtEmployeeHomeAddressNewEmployee" id="txtEmployeeHomeAddressNewEmployee" placeholder="Ex: Mogadishu" required>
							</div>
							<div class="form-group col-md-3">
								<label class="control-label">Mobile Phone</label>
								<input type="number" class="form-control" name="txtEmployeeMobilePhoneNewEmployee" id="txtEmployeeMobilePhoneNewEmployee" placeholder="Ex: 617336622" maxlength="9" required />
							</div>
							<div class="form-group col-md-4">
								<label class="control-label">Email Address</label>
								<input type="email" class="form-control" name="txtEmployeeEmailAddressNewEmployee" id="txtEmployeeEmailAddressNewEmployee" placeholder="Ex: name@example.com" required />
							</div>
                            <div class="form-group col-md-12 mt-2">
                                <h5 class="text-primary pb-3 border-bottom border-warning"><i class="fa fa-male"></i> Emergancy Contact</h5>
                            </div>
							<div class="form-group col-md-5">
								<label class="control-label">Contact Person (Name)</label>
								<input class="form-control" type="text" name="txtEmployeeContactPersonNewEmployee" id="txtEmployeeContactPersonNewEmployee" placeholder="Ex: Hassan Yusuf Khalif" required>
							</div>
							<div class="form-group col-md-3">
								<label class="control-label">Relationship</label>
								<select id="cmbEmployeeContactPersonRelationshipNewEmployee" name="cmbEmployeeContactPersonRelationshipNewEmployee" class="form-control" style="width:100%" required />
									<option value="">Select Relationship</option>
									<option value="Father">Father</option>
									<option value="Mother">Mother</option>
									<option value="Husband">Husband</option>
									<option value="Wife">Wife</option>
									<option value="Uncle">Uncle</option>
									<option value="Aunt">Aunt</option>
									<option value="Brother">Brother</option>
									<option value="Sister">Sister</option>
									<option value="Friend">Friend</option>
									<option value="Other">Other</option>
								</select>						
							</div>
							<div class="form-group col-md-4">
								<label class="control-label">Contact Phone</label>
								<input type="number" class="form-control" name="txtEmployeeContactPersonMobilePhoneNewEmployee" id="txtEmployeeContactPersonMobilePhoneNewEmployee" placeholder="Ex: 617336622">
								<input class="form-control" type="hidden" name="txtRegisteredByNewEmployee" id="txtRegisteredByNewEmployee" value="<?php echo $_SESSION['userIdd']; ?>" required>
								<input class="form-control" type="hidden" name="txtRegisterDateNewEmployee" id="txtRegisterDateNewEmployee" value="<?php echo date("Y-m-d H:i:s"); ?>" required>
							</div>
							<div class="form-group col-md-12 mt-3" style="text-align: right;">
								<button type="submit" class="btn btn-success" name="btnRegisterNewEmployee" id="btnRegisterNewEmployee"><i class="fa fa-fw fa-lg fa-save"></i>Register Employee</button>&nbsp;&nbsp;&nbsp;
								<button type="reset" class="btn btn-danger"><i class="fa fa-fw fa-lg fa-trash"></i> Clear</button>
							</div>
						</div>
					</form>	
				</div>
				
			</div>
		</div>
	</div>
</div>
<!-- New Employee Modal Ends Here  -->

<!-- Update Employee Modal -->
<div class="modal fade" id="updateEmployeeModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fa fa-edit"></i> Update Employee Information</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="tile">
				    
					<form action="#" method="POST" id="updateEmployeeForm" enctype="multipart/form-data">
					    <div class="row">
                            <div class="form-group col-md-12">
                                <h5 class="text-primary pb-3 border-bottom border-warning"><i class="fa fa-vcard"></i> Personal Information</h5>
                            </div>
                        </div>
						<div class="row">
							<div class="form-group col-md-2 text-center">
								<img class="rounded" src="img/no-image.jpg" id="updateEmployeePhotoTarget" width="100%" height="150px" /><br>
								<label class="btn btn-info btn-sm d-block mt-1">
									<i class="fa fa-upload"> </i> Upload <input type="file" class="form-control" name="updateEmployeePhoto" id="updateEmployeePhoto" hidden>
								</label>
								<input type="hidden" id="photoUpdateEmployee1" name="photoUpdateEmployee1"/>                        

								<script>
									var update_employee_photo_src = document.getElementById("updateEmployeePhoto");
									var update_employee_photo_target = document.getElementById("updateEmployeePhotoTarget");

									function showUpdateEmployeePhoto(update_employee_photo_src, update_employee_photo_target) {
										var upl = new FileReader();
										upl.onload = function (e) {
											update_employee_photo_target.src = this.result;
										};
										update_employee_photo_src.addEventListener("change", function () {
											upl.readAsDataURL(update_employee_photo_src.files[0]);
										})
									}
									showUpdateEmployeePhoto(update_employee_photo_src, update_employee_photo_target);
								</script>
							</div>

							<div class="form-group col-md-10">

								<div class="row">
									<div class="form-group col-md-6">
										<label class="control-label">Employee Name</label>
										<input type="hidden" name="txtEmployeeIddUpdateEmployee" id="txtEmployeeIddUpdateEmployee" required>
										<input class="form-control" type="text" name="txtEmployeeNameUpdateEmployee" id="txtEmployeeNameUpdateEmployee" placeholder="Ex: Abdullahi Siad Raage" required>
									</div>
									<div class="form-group col-md-3">
										<label class="control-label">Place of Birth</label>
										<input class="form-control" type="text" name="txtBirthPlaceUpdateEmployee" id="txtBirthPlaceUpdateEmployee" placeholder="Ex: Mogadishu" required>
									</div>
									<div class="form-group col-md-3">
										<label class="control-label">Date of Birth</label>
										<input class="form-control date" type="date" name="txtBirthDateUpdateEmployee" id="txtBirthDateUpdateEmployee" max="<?php echo date("Y-m-d"); ?>" value="<?php echo date("Y-m-d"); ?>" required>
									</div>
									
									<div class="form-group col-md-3">
										<label class="control-label">Employee Sex</label>
										<select id="cmbEmployeeSexUpdateEmployee" name="cmbEmployeeSexUpdateEmployee" class="form-control" style="width:100%" required />
											<option value="">Select Sex</option>
											<option value="Male">Male</option>
											<option value="Female">Female</option>
										</select>						
									</div>
									<div class="form-group col-md-3">
										<label class="control-label">Marital Status</label>
										<select id="cmbMaritalStatusUpdateEmployee" name="cmbMaritalStatusUpdateEmployee" class="form-control" style="width:100%" required />
											<option value="">Select Status</option>
											<option value="Single">Single</option>
											<option value="Married">Married</option>
										</select>						
									</div>
									<div class="form-group col-md-3">
        								<label class="control-label">Identification Type</label>
        								<select id="cmbIdentificationDocumentTypeUpdateEmployee" name="cmbIdentificationDocumentTypeUpdateEmployee" class="form-control" style="width:100%" required />

        								</select>						
        							</div>
									<div class="form-group col-md-3">
										<label class="control-label">ID Document</label>
										<label class="btn btn-primary d-block">
											<i class="fa fa-upload"> </i> Upload Document <input type="file" class="form-control" name="txtEmployeeIdentificationDocumentUpdateEmployee" id="txtEmployeeIdentificationDocumentUpdateEmployee" hidden>
										</label>
										<input type="hidden" id="docUpdateEmployee1" name="docUpdateEmployee1" />
									</div>
								</div>
							</div>
                            <div class="form-group col-md-12 mt-2">
                                <h5 class="text-primary pb-3 border-bottom border-warning"><i class="fa fa-id-card"></i> Employment Information </h5>
                            </div>
					        <div class="form-group col-md-3">
								<label class="control-label">Hire Date</label>
								<input class="form-control date" type="date" name="txtHireDateUpdateEmployee" id="txtHireDateUpdateEmployee" max="<?php echo date("Y-m-d"); ?>" value="<?php echo date("Y-m-d"); ?>" required>
							</div>
							<div class="form-group col-md-5">
								<label class="control-label">Department</label>
								<select id="cmbEmployeeDepartmentNameUpdateEmployee" name="cmbEmployeeDepartmentNameUpdateEmployee" class="form-control" style="width:100%" required />

								</select>						
							</div>
							<div class="form-group col-md-4">
								<label class="control-label">Title</label>
								<select id="cmbEmployeePositionNameUpdateEmployee" name="cmbEmployeePositionNameUpdateEmployee" class="form-control" style="width:100%" required />

								</select>						
							</div>
							<div class="form-group col-md-3">
								<label class="control-label">Working Area</label>
								<select id="cmbWorkingAreaNameUpdateEmployee" name="cmbWorkingAreaNameUpdateEmployee" class="form-control" style="width:100%" required />

								</select>						
							</div>
							<div class="form-group col-md-3">
								<label class="control-label">Salary</label>
								<input class="form-control" type="number" name="txtEmployeeSalaryUpdateEmployee" id="txtEmployeeSalaryUpdateEmployee" placeholder="Ex: 150" required>
							</div>
                            <div class="form-group col-md-12 mt-2">
                                <h5 class="text-primary pb-3 border-bottom border-warning"><i class="fa fa-phone"></i> Contact Information</h5>
                            </div>
							<div class="form-group col-md-5">
								<label class="control-label">Home Address</label>
								<input class="form-control" type="text" name="txtEmployeeHomeAddressUpdateEmployee" id="txtEmployeeHomeAddressUpdateEmployee" placeholder="Ex: Mogadishu" required>
							</div>
							<div class="form-group col-md-3">
								<label class="control-label">Mobile Phone</label>
								<input type="number" class="form-control" name="txtEmployeeMobilePhoneUpdateEmployee" id="txtEmployeeMobilePhoneUpdateEmployee" placeholder="Ex: 617336622" maxlength="9" required />
							</div>
							<div class="form-group col-md-4">
								<label class="control-label">Email Address</label>
								<input type="email" class="form-control" name="txtEmployeeEmailAddressUpdateEmployee" id="txtEmployeeEmailAddressUpdateEmployee" placeholder="Ex: name@example.com" required />
							</div>
                            <div class="form-group col-md-12 mt-2">
                                <h5 class="text-primary pb-3 border-bottom border-warning"><i class="fa fa-male"></i> Emergancy Contact</h5>
                            </div>
							<div class="form-group col-md-5">
								<label class="control-label">Contact Person (Name)</label>
								<input class="form-control" type="text" name="txtEmployeeContactPersonUpdateEmployee" id="txtEmployeeContactPersonUpdateEmployee" placeholder="Ex: Hassan Yusuf Khalif" required>
							</div>
							<div class="form-group col-md-3">
								<label class="control-label">Relationship</label>
								<select id="cmbEmployeeContactPersonRelationshipUpdateEmployee" name="cmbEmployeeContactPersonRelationshipUpdateEmployee" class="form-control" style="width:100%" required />
									<option value="">Select Relationship</option>
									<option value="Father">Father</option>
									<option value="Mother">Mother</option>
									<option value="Husband">Husband</option>
									<option value="Wife">Wife</option>
									<option value="Uncle">Uncle</option>
									<option value="Aunt">Aunt</option>
									<option value="Brother">Brother</option>
									<option value="Sister">Sister</option>
									<option value="Friend">Friend</option>
									<option value="Other">Other</option>
								</select>						
							</div>
							<div class="form-group col-md-4">
								<label class="control-label">Contact Phone</label>
								<input type="number" class="form-control" name="txtEmployeeContactPersonMobilePhoneUpdateEmployee" id="txtEmployeeContactPersonMobilePhoneUpdateEmployee" placeholder="Ex: 617336622">
								<input type="hidden" name="txtUpdatedByUpdateEmployee" id="txtUpdatedByUpdateEmployee" value="<?php echo $_SESSION['userIdd']; ?>" required>
								<input type="hidden" name="txtUpdateDateUpdateEmployee" id="txtUpdateDateUpdateEmployee" value="<?php echo date("Y-m-d H:i:s"); ?>" required>
							</div>
							<div class="form-group col-md-12 mt-3" style="text-align: right;">
								<button type="submit" class="btn btn-success" name="btnUpdateEmployee" id="btnUpdateEmployee"><i class="fa fa-fw fa-lg fa-pencil"></i>Update Employee</button>&nbsp;&nbsp;&nbsp;
								<button type="reset" class="btn btn-danger"><i class="fa fa-fw fa-lg fa-trash"></i> Clear</button>
							</div>
						</div>
					</form>	
				</div>
				
			</div>
		</div>
	</div>
</div>
<!-- Update Employee Modal Ends Here  -->

<!-- Advanced Salaries Modal Starts Here -->
<div class="modal fade" id="updateAdvancedSalariesModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-edit"></i> Update Advanced Salary</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <form action="#" method="POST" id="updateAdvancedSalaryForm">
						<div class="row">
						    <div class="form-group col-md-12">
                                <label class="control-label">Employee Name</label>
                                <input name="txtPaymentIdUpdateAdvancedSalary" id="txtPaymentIdUpdateAdvancedSalary" hidden readonly required>

                                <select class="form-control" name="cmbEmployeeIddUpdateAdvancedSalary" id="cmbEmployeeIddUpdateAdvancedSalary" style="font-size: 16px; width: 100%;" required>

                                </select>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="control-label">Payment Type</label>
                                <select class="form-control" name="cmbPaymentTypeUpdateAdvancedSalary" id="cmbPaymentTypeUpdateAdvancedSalary" style="font-size: 16px; width: 100%;" required>
                                    <option value="">Select Type</option>
                                    <option value="Order Payment">Order Payment</option>
                                    <option value="Money Payment">Money Payment</option>
                                </select>
                            </div>
							<div class="form-group col-md-12">
								<label class="control-label">Paid Amount</label>
								<input class="form-control font-weight-bold" type="number" name="txtPaidAmountUpdateAdvancedSalary" id="txtPaidAmountUpdateAdvancedSalary" step="0.01" placeholder="Enter paid amount" required>
							</div>
							<div class="form-group col-md-12">
								<label class="control-label">Description</label>
								<textarea class="form-control" rows="2" name="txtPaymentDescriptionUpdateAdvancedSalary" id="txtPaymentDescriptionUpdateAdvancedSalary" placeholder="Enter payment description" required></textarea>
								<input class="form-control" type="hidden" name="txtUpdatedByUpdateAdvancedSalary" id="txtUpdatedByUpdateAdvancedSalary" value="<?php echo $_SESSION['userIdd']; ?>" required>
								<input class="form-control" type="hidden" name="txtUpdateDateUpdateAdvancedSalary" id="txtUpdateDateUpdateAdvancedSalary" value="<?php echo date("Y-m-d H:i:s"); ?>" required>
							</div>
							<div class="form-group col-md-12 text-right">
								<button type="submit" class="btn btn-primary" name="btnUpdateAdvancedSalary" id="btnUpdateAdvancedSalary"><i class="fa fa-fw fa-lg fa-pencil"></i>Update Payment</button>
							</div>
						</div>
					</form> 
                </div>
            </div>

        </div>
    </div>
</div>
<!-- Advanced Salaries Modal Ends Here -->


<!-- Employee Salaries Modal -->
<div class="modal fade" id="employeeSalariesModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="employeeSalariesModalTitle"><i class="fa fa-save"></i> Salary Payment Form</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="location.reload()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="tile">
		  
			            <form action="#" id="employeeSalaryPaymentForm" method="POST">
			  
				            <div class="row" style="margin-left: 0px; margin-right: 0px;">
					
					            <div class="form-group col-md-12">
						            <div class="row">
						
            							<div class="form-group col-md-8">
            							    <label class="control-label">Employee Name</label>
            							    <select class="form-control" name="cmbSalaryPaymentEmployeeName" id="cmbSalaryPaymentEmployeeName" style="width: 100%;" required>
            
            							    </select>
            							</div>
            							<div class="form-group col-sm-4">
            							    <label class="control-label">Title / Position</label>
            							    <input type="text" class="form-control" name="txtSalaryPaymentEmployeeTitle" id="txtSalaryPaymentEmployeeTitle" placeholder="Example: Finance Officer" required readonly>
            							</div>

            							<div class="form-group col-md-4">
            								<label class="control-label">Salary Month</label>
            								<select class="form-control" style="width: 100%;" name="cmbSalaryPaymentSalaryMonth" id="cmbSalaryPaymentSalaryMonth" required>
            									<option value="">-- Select month --</option>
            									<?php
                                                   $months = array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
                                                   $currentYearNo = date("Y");
                                                   $thisMonth = date("n") - 1;
                                                   for ($i = 0; $i <= $thisMonth; $i++) { ?>
                                                       <option option="<?php echo $months[$i]." ".$currentYearNo; ?>"><?php echo $months[$i]." ".$currentYearNo; ?></option>
                                                       <?php
                                                   }
            									?>
            								</select>
            							</div>
                                        <div class="form-group col-sm-4">
            							    <label class="control-label">Charged Salary ($)</label>
            							    <input type="number" class="form-control" name="txtSalaryPaymentChargedAmount" id="txtSalaryPaymentChargedAmount" placeholder="Example: 300" readonly required>
            							</div>
                                        <div class="form-group col-sm-4">
            							    <label class="control-label">Remaining Balance ($)</label>
            							    <input type="number" class="form-control" name="txtSalaryPaymentRemainingBalance" id="txtSalaryPaymentRemainingBalance" placeholder="Example: 300" min=1 required readonly>
            							</div>

                                        <div class="form-group col-md-5">
                                            <label class="control-label">Withdrawal Account</label>
                                            <select class="form-control" style="width: 100%;" name="cmbEmployeeSalariesWithdrawalAccount" id="cmbEmployeeSalariesWithdrawalAccount" required>
                                               
                                            </select>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label class="control-label">Account Number</label>
                                            <input class="form-control" type="text" name="txtEmployeeSalariesAccountNumber" id="txtEmployeeSalariesAccountNumber" min="1" required readonly>
                                        </div>

                                        <div class="form-group col-sm-3">
            							    <label class="control-label">Paid Amount ($)</label>
            							    <input type="number" class="form-control" name="txtSalaryPaymentPaidAmount" id="txtSalaryPaymentPaidAmount" placeholder="Example: 300" min=1 required>
            							</div>

                                        <div class="form-group col-sm-12">
            							    <label class="control-label">Amount in Words</label>
            							    <input type="text" class="form-control" name="txtSalaryPaymentAmountInWords" id="txtSalaryPaymentAmountInWords" placeholder="Example: Two Hundered Dollars" required readonly>
            							</div>
							
            							<div class="form-group col-sm-8">
            							    <label class="control-label">Remarks</label>
                                            <textarea class="form-control" name="txtSalaryPaymentSalaryDescription" id="txtSalaryPaymentSalaryDescription" placeholder="Enter Salary Remarks..." required></textarea>
                                            <input type="hidden" name="txtUserrIddd" id="txtUserrIddd" value="<?php echo $_SESSION['userIdd']; ?>" required>                                        
                                        </div>
                                        
                                        <div class="form-group col-sm-4">
            							    <label class="control-label">Payment Date</label>
                                            <input type="date" class="form-control" name="txtSalaryPaymentDate" id="txtSalaryPaymentDate" max="<?php echo date("Y-m-d"); ?>" required>                                        
            							</div>

            						</div>
						
            						<div class="tile-footer" style="text-align: right;">
            							<button type="submit" class="btn btn-primary" name="btnPayEmployeeSalary" id="btnPayEmployeeSalary"><i class="fa fa-fw fa-lg fa-save"></i>Register Salary Payment</button>&nbsp;&nbsp;&nbsp;
            							<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
            						</div>
            					</div>
					
				            </div>
				
                        </form>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Change Password Modal -->
<div class="modal fade" id="changePasswordModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-key"></i> Change Passcode Form</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="location.reload()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="tile">
                    <div class="col-md-12">

                        <form action="#" method="POST" id="changePasswordForm" changing-user-type="user_its_self">
				            <div class="row">
            					<div class="form-group col-md-12">
            					    <label class="control-label">Current Passcode</label>
            					    <input class="form-control" type="password" placeholder="Enter current passcode" name="oldPasswordChange" id="oldPasswordChange" required autocomplete="off">
            					</div>
            					<div class="form-group col-md-12">
            					    <label class="control-label">New Passcode</label>
            					    <input type="password" class="form-control" type="text" name="pass1Change" id="pass1Change" placeholder="Enter new passcode" required>
            					</div>
            					<div class="form-group col-sm-12">
            					    <label class="control-label">Confirm Passcode</label>
            					    <input type="password" class="form-control" type="text" name="confirmPassChange" id="confirmPassChange" placeholder="Confirm passcode" required>
            					</div>
        				    </div>
        				    <div class="mt-2" style="text-align: right;">
            					<button type="submit" class="btn btn-primary" name="btnChangePassword" id="btnChangePassword"><i class="fa fa-fw fa-lg fa-pencil"></i>Change Passcode</button>&nbsp;&nbsp;&nbsp;
            				    <button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
            				</div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Update Profile Modal -->
<div class="modal fade" id="updateProfileModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateProfileModalTitle"><i class="fa fa-edit"></i> Update Profile Form</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="location.reload()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
			        <div class="tile">

                        <form action="#" method="POST" id="updateUserProfileForm" enctype="multipart/form-data">
					        <div class="row" align="center">
						        <div class="form-group col-md-12">
						        	<img class='img-responsive' src="<?php echo $_SESSION['userPhoto']; ?>"  id="updateProfileSrcTarget" width="60%" /><br><br>
        							<input class="form-control col-sm-8" type="file" id="updateProfileSrc" name="updateUserPhoto">
        							<input type="hidden" id="updateUserPhotoPath" name="updateUserPhotoPath" value="<?php echo $_SESSION['userPhoto']; ?>"/>
        							<script>
        								var updateSrc = document.getElementById("updateProfileSrc");
        								var updateTarget = document.getElementById("updateProfileSrcTarget");
        								function showPhoto(updateSrc, updateTarget) {
        									var upload = new FileReader();
        									upload.onload = function (e) {
        										updateTarget.src = this.result;
        									};
        									updateSrc.addEventListener("change", function () {
        										upload.readAsDataURL(updateSrc.files[0]);
        									})
        								}
        								showPhoto(updateSrc, updateTarget);
        							</script>
						        </div>

        						<div class="form-group col-md-12 text-left">
        							<label class="control-label">Full Name</label>
        							<input class="form-control" type="text" name="updateFullName" id="updateFullName" placeholder="Enter full name..." value="<?php echo $_SESSION['fullName']; ?>" maxlength="35" required>
        						</div>
							
					        </div>	
					
        					<div class="tile-footer" style="text-align: right;">
        						<button type="submit" class="btn btn-primary" name="updateProfileBtn" id="updateProfileBtn"><i class="fa fa-fw fa-lg fa-pencil"></i>Update Profile</button>&nbsp;&nbsp;&nbsp;
        					    <button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-lg fa-times"></i>Close</button>
        					</div>
        				</form>

			        </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Enable Disable 2-Step Verification Modal -->
<div class="modal fade" id="securitySettingsModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-toggle-on"></i> Security Settings</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="location.reload()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="tile">
		            <div class="row">
    					<div class="form-group col-md-10">
    					    <label class="control-label">2-Step Verification</label>
    					</div>
    					<div class="form-group col-md-2">
                            <div class="toggle lg">
                                <label><input type="checkbox" id="twoStepVerificationToggle" name="twoStepVerificationToggle"><span class="button-indecator"></span></label>
                            </div>                            
                        </div>
				    </div>
                </div>
            </div>

        </div>
    </div>
</div>

