File: /var/www/html/hrms-production/resources/views/components/employee-pension-scheme-modal.blade.php
{{-- Add Employee Pension Scheme --}}
<div class="modal fade" id="addEmpPensionScheme">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Employee Name <span id="EmployeeName" class="text-info"></span></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Main content -->
<form id="addEmpPensionSchemeform">
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
<input type="hidden" id="EmployeeId" name="EmployeeId">
<input type="hidden" id="EmployeeCode" name="EmployeeCode">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="form-group mb-2">
<label class="mb-0" for="PensionScheme">Pensionary benefits <span
class="text-danger">*</span></label>
<select class="form-control form-control-sm select2" style="width: 100%;"
aria-hidden="true" name="PensionScheme" id="PensionScheme"
data-placeholder="Select Pensionary">
<option value="" selected disabled>Select Pensionary</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label class="mb-0" for="PensionSchemeNumber">Pensionary benefits No. </label>
<input type="text" id="PensionSchemeNumber" name="PensionSchemeNumber"
class="form-control form-control-sm">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label class="mb-0" for="PensionScheme Certificate">Pensionary benefits
Certificate </label>
<div class="input-group">
<div class="custom-file">
<input type="file" name="PensionSchemeCertificate"
class="custom-file-input form-control-sm" id="PensionSchemeCertificate"
accept="image/*, .pdf">
<label class="custom-file-label" for="Pension Scheme Certificate">Choose
file</label>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="GIS_field_row">
<div class="col-md-4">
<div class="form-group mb-0">
<label for="GisScheme">GIS:</label>
<div class="col-sm-12 mt-0">
<div class="icheck-primary d-inline">
<input type="radio" id="GisSchemeNo" name="GisScheme" value="No" checked="">
<label for="GisSchemeNo">No</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="GisSchemeYes" name="GisScheme" value="Yes">
<label for="GisSchemeYes">Yes</label>
</div>
</div>
</div>
</div>
<div class="col-md-4" id="GISNo_field" style="display: none">
<div class="form-group mb-2">
<label class="mb-0" for="GISNo">GIS No. <span class="text-danger">*</span></label>
<input type="text" id="GISNo" name="GISNo" class="form-control form-control-sm">
</div>
</div>
<div class="col-md-4" id="GISCertificate_field" style="display: none">
<div class="form-group mb-2">
<label class="mb-0" for="GISCertificate">GIS Certificate </label>
<div class="input-group">
<div class="custom-file">
<input type="file" name="GISCertificate"
class="custom-file-input form-control-sm" id="GISCertificate"
accept="image/*, .pdf">
<label class="custom-file-label" for="GISCertificate">Choose file</label>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center justify-content-center">
<button type="button" class="btn btn-sm btn-outline-secondary mx-1"
data-dismiss="modal" aria-label="Close">Cancel</button>
<button type="submit" id="btn-save-name" name="Save" value="Save"
class="btn btn-sm btn-info mx-1">Save</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{-- JS Start Here --}}
{{-- Update Employee Pension Scheme --}}
<div class="modal fade" id="UpdateEmpPensionScheme">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Employee Name <span id="EditPensionSchemeEmployeeName" class="text-info"></span>
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Main content -->
<form id="editEmpPensionSchemeform">
<input type="hidden" name="_token" id="token_edit_emp_pension" value="{{ csrf_token() }}">
<input type="hidden" id="EditEmployeePensionSchemeId" name="EmployeePensionSchemeId">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="form-group mb-2">
<label class="mb-0" for="PensionScheme">Pensionary benefits <span
class="text-danger">*</span></label>
<select class="form-control form-control-sm select2" style="width: 100%;"
aria-hidden="true" name="PensionScheme" id="EditEmpPensionScheme"
data-placeholder="Select Pensionary">
<option value="" selected disabled>Select Pensionary</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label class="mb-0" for="PensionSchemeNumber">Pensionary benefits No. </label>
<input type="text" id="EditEmpPensionSchemeNumber" name="PensionSchemeNumber"
class="form-control form-control-sm">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label class="mb-0" for="PensionScheme Certificate">Pensionary benefits
Certificate </label>
<div class="input-group">
<div class="custom-file">
<input type="file" name="PensionSchemeCertificate"
class="custom-file-input form-control-sm"
id="EditEmpPensionSchemeCertificate" accept="image/*, .pdf">
<label class="custom-file-label" for="Pension Scheme Certificate">Choose
file</label>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center justify-content-center">
<button type="button" class="btn btn-sm btn-outline-secondary mx-1"
data-dismiss="modal" aria-label="Close">Cancel</button>
<button type="submit" name="Update" value="Update"
class="btn btn-sm btn-info mx-1">Update</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{-- Master List --}}
<script>
// Pension Scheme List
$(document).ready(function() {
$.ajax({
type: "GET",
url: "{{ url('/pension-scheme-list') }}",
dataType: "json",
success: function(response) {
var json = response.PensionScheme;
$.each(json, function(i, pensionscheme) {
$("#PensionScheme, #EditEmpPensionScheme").append("<option value='" + pensionscheme.PensionSchemeId + "'>" + pensionscheme.PensionSchemeName + "</option>");
$('#PensionScheme, #EditEmpPensionScheme').trigger('change');
});
}
});
});
</script>
{{-- GIS Pension field hide/show --}}
<script>
$(document).ready(function() {
$("#PensionScheme").change(function() {
//alert($(this).val())
if ($(this).find(":selected").text() == "GIS") { // Yes
$("#GIS_field_row").css('display', 'none');
$("#GISNo").prop('required', false);
} else {
$("#GIS_field_row").css('display', '');
// $("#GISNo").prop('required', true);
}
});
});
$(document).ready(function() {
$("input[name=GisScheme]").change(function() {
//alert($(this).val())
if ($(this).val() == "Yes") { // Yes
$("#GISNo_field, #GISCertificate_field").css('display', 'block');
// $("#GISNo").prop('required', true);
} else {
$("#GISNo_field, #GISCertificate_field").css('display', 'none');
$("#GISNo").prop('required', false);
}
});
});
</script>
{{-- Add Employee Pension Scheme Modal --}}
<script>
function addPendingEmpPensionScheme(EmployeeId)
{
var EmployeeId = EmployeeId;
$('#addEmpPensionScheme').modal('show');
$.ajax({
type: "POST",
url: "{{ url('/') }}/get-employee-detail",
dataType: 'json',
data: {
EmployeeId: EmployeeId,
_token: "{{ csrf_token() }}",
},
success: function (response) {
$('#EmployeeId').val(response.GetEmployee.EmployeeId);
$('#EmployeeCode').val(response.GetEmployee.EmployeeCode);
$('span#EmployeeName').html('#' +response.GetEmployee.EmployeeName);
}
});
}
</script>
{{-- Validate form and Save data --}}
<script>
$(function () {
$.validator.setDefaults({
submitHandler: function () {
event.preventDefault();
// Get Form Data
var token = $("#token").val();
var EmployeeId = $("#EmployeeId").val();
var EmployeeCode = $("#EmployeeCode").val();
var PensionSchemeId = $('#PensionScheme :selected').val();
var PensionSchemeNumber = $('#PensionSchemeNumber').val();
var GisScheme = $("input[name='GisScheme']:checked").val();
var GISNo = $('#GISNo').val();
var PensionSchemeCertificate = $('#PensionSchemeCertificate')[0].files;
var GISCertificate = $('#GISCertificate')[0].files;
var fd = new FormData();
fd.append('_token',token);
fd.append('EmpId',EmployeeId);
fd.append('EmpCode',EmployeeCode);
fd.append('PensionScheme',PensionSchemeId);
fd.append('PensionSchemeNo',PensionSchemeNumber);
fd.append('GisScheme',GisScheme);
fd.append('GISNo',GISNo);
// files data
fd.append('PensionSchemeCertificate',PensionSchemeCertificate[0]);
fd.append('GISCertificate',GISCertificate[0]);
$.ajax({
type: "post",
url: "{{ url('store-employee-pension-scheme') }}",
data: fd,
contentType: false,
processData: false,
success: function(response) {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'success',
title: 'Pension scheme added successfully!'
});
setTimeout(function(){
window.location.reload(1);
}, 2000);
},
error: function(data) {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'error',
title: 'Something went wrong!'
});
}
});
}
});
$('#addEmpPensionSchemeform').validate({
rules: {
PensionScheme: {
required: true,
},
PensionSchemeNumber: {
// required: true,
},
PensionSchemeCertificate: {
//required: true,
accept: "image/*, pdf"
},
GISCertificate: {
accept: "image/*, pdf"
},
},
messages: {
PensionScheme: {
required: "Pension Scheme is required.",
},
PensionSchemeNumber: {
required: "Pension scheme number is required.",
},
PensionSchemeCertificate: {
required: "Please upload the certificate file.",
},
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
});
</script>
{{-- Edit Record --}}
<script>
function editEmpPensionScheme(EmployeePensionSchemeId)
{
var EmployeePensionSchemeId = EmployeePensionSchemeId;
$.ajax({
type: "POST",
url: "{{ url('/') }}/edit-employee-pension-scheme",
dataType: 'json',
data: {
EmployeePensionSchemeId: EmployeePensionSchemeId,
_token: "{{ csrf_token() }}",
},
success: function (response) {
$('#EditEmployeePensionSchemeId').val(response.GetEmpPensionScheme.EmployeePensionSchemeId);
$('span#EditPensionSchemeEmployeeName').html('#' +response.GetEmpPensionScheme.EmployeeName);
$('#EditEmpPensionScheme').val(response.GetEmpPensionScheme.PensionSchemeId);
$('#EditEmpPensionScheme').trigger('change');
$('#EditEmpPensionSchemeNumber').val(response.GetEmpPensionScheme.PensionSchemeNumber);
}
});
$('#UpdateEmpPensionScheme').modal('show');
}
</script>
{{-- Validate form and Update data --}}
<script>
$(function () {
$.validator.setDefaults({
submitHandler: function () {
event.preventDefault();
// Get Form Data
var token = $("#token_edit_emp_pension").val();
var EmployeePensionSchemeId = $("#EditEmployeePensionSchemeId").val();
var PensionSchemeId = $('#EditEmpPensionScheme :selected').val();
var PensionSchemeNumber = $('#EditEmpPensionSchemeNumber').val();
var PensionSchemeCertificate = $('#EditEmpPensionSchemeCertificate')[0].files;
var fd = new FormData();
fd.append('_token',token);
fd.append('EmployeePensionSchemeId',EmployeePensionSchemeId);
fd.append('PensionSchemeId',PensionSchemeId);
fd.append('PensionSchemeNumber',PensionSchemeNumber);
// files data
fd.append('PensionSchemeCertificate',PensionSchemeCertificate[0]);
$.ajax({
type: "post",
url: "{{ url('update-employee-pension-scheme') }}",
data: fd,
contentType: false,
processData: false,
success: function(response) {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'success',
title: 'Pension scheme updated successfully!'
});
setTimeout(function(){
window.location.reload(1);
}, 2000);
},
error: function(data) {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'error',
title: 'Something went wrong!'
});
}
});
}
});
$('#editEmpPensionSchemeform').validate({
rules: {
PensionScheme: {
required: true,
},
PensionSchemeNumber: {
// required: true,
},
PensionSchemeCertificate: {
accept: "image/*, pdf"
},
},
messages: {
PensionScheme: {
required: "Pension Scheme is required.",
},
PensionSchemeNumber: {
required: "Pension scheme number is required.",
},
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
});
</script>
{{-- Delete Employee Pension --}}
<script>
function deleteEmpPensionScheme(EmployeePensionSchemeId) {
var EmployeePensionSchemeId = EmployeePensionSchemeId;
Swal.fire({
title: "Delete Employee Pension?",
text: "Are you sure you want to delete this Employee Pension?",
icon: "warning",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: "post",
url: "{{ url('/') }}/delete-employee-pension-scheme",
dataType: "json",
data: {
_token: "{{csrf_token()}}",
EmployeePensionSchemeId: EmployeePensionSchemeId,
},
success: function (response) {
Swal.fire({
icon: "success",
title: "Employee Pension has been deleted!",
showConfirmButton: false,
timer: 1500,
}).then(function () {
location.reload();
});
},
});
}
});
}
</script>