File: /var/www/html/hrms-production/resources/views/components/pay-level-amount-modal.blade.php
{{-- Add PayLevel Amount --}}
<div class="modal fade" id="addPayLevelAmount">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add PayLevel Amount</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="addPayLevelAmountform">
<input type="hidden" name="_token" id="token_paylevel_amount" value="{{ csrf_token() }}">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group mb-">
<label class="mb-0" for="Pay Scale">Pay Scale/Pay Commision <span class="text-danger">*</label></label>
<select class="form-control form-control-sm select2" style="width: 100%;" aria-hidden="true" name="PayScaleId" id="PayScaleIdPayLevelAmount" data-placeholder="Select PayScale" required>
<option value="" disabled selected>Select PayScale</option>
</select>
</div>
</div>
<div class="col-md-6" id="PayBandIdPayLevelAmount_field" style="display: none;">
<div class="form-group mb-">
<label class="mb-0" for="PayBand">Pay Band <span class="text-danger">*</label></label>
<select class="form-control form-control-sm select2" style="width: 100%;" aria-hidden="true" name="PayBandId" id="PayBandIdPayLevelAmount" data-placeholder="Select Pay Band">
<option value="" disabled selected>Select Pay Band</option>
</select>
</div>
</div>
<div class="col-md-6" id="GradePayIdPayLevelAmount_field" style="display: none;">
<div class="form-group mb-">
<label class="mb-0" for="GradePay">GradePay <span class="text-danger">*</label></label>
<select class="form-control form-control-sm select2" style="width: 100%;" aria-hidden="true" name="GradePayId" id="GradePayIdPayLevelAmount" data-placeholder="Select GradePay">
<option value="" disabled selected>Select GradePay</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="PayLevel">PayLevel <span class="text-danger">*</label>
<select class="form-control form-control-sm select2" style="width: 100%;" aria-hidden="true" name="PayLevelId" id="PayLevelIdAmount" data-placeholder="Select PayLevel">
<option value="" disabled selected>Select PayLevel</option>
</select>
</div>
</div>
</div>
<div class="row" id="PayLevelAmount_field">
<div class="col-md-12">
<div class="form-group mb-2">
<label class="mb-0" for="PayLevelAmount">PayLevel Amount <span class="text-danger">*</label>
<input type="text" class="form-control form-control-sm" id="PayLevelAmount" name="PayLevelAmount">
</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-new-paylevel-amount"
class="btn btn-sm btn-outline-info mx-1">Save & New</button>
<button type="submit" id="btn-save-paylevel-amount"
class="btn btn-sm btn-info mx-1">Save</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{-- Update PayLevel Amount --}}
<div class="modal fade" id="updatePayLevelAmount">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">PayLevel Amount <span id="PayLevelAmountName" 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="updatePayLevelAmountform">
<input type="hidden" name="_token" id="token_paylevel-amount_update" value="{{ csrf_token() }}">
<input type="hidden" id="PayLevelAmountId" name="PayLevelAmountId">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group mb-2">
<label class="mb-0" for="name">PayLevelAmount Name<span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm"
id="editPayLevelAmountName" name="PayLevelAmountName"
onkeyup="checkDuplicatePayLevelAmount(this);" required>
<span id='editCheckPayLevelAmount'></span>
</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="button" id="btn-update-paylevel-amount" name="Update" value="Update"
class="btn btn-sm btn-info mx-1" disabled>Update</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{-- JS Start Here --}}
{{-- PayScale List / PayBand List --}}
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "{{ url('/payscale-list') }}",
dataType: "json",
success: function(response) {
var json = response.PayScale;
$.each(json, function(i, payscale) {
$("#PayScaleIdPayLevelAmount").append("<option value='" + payscale.PayScaleId + "'>" + payscale.PayScaleName + "</option>");
$('#PayScaleIdPayLevelAmount').trigger('change');
});
}
});
});
$(document).ready(function() {
$.ajax({
type: "GET",
url: "{{ url('/payband-list') }}",
dataType: "json",
success: function(response) {
var json = response.PayBand;
$.each(json, function(i, payband) {
$("#PayBandIdPayLevelAmount").append("<option value='" + payband.PayBandId + "'>" + payband.PayBandName + "</option>");
$('#PayBandIdPayLevelAmount').trigger('change');
});
}
});
});
</script>
{{-- Change Field based on payscale --}}
<script>
$(document).ready(function() {
$("#PayScaleIdPayLevelAmount").change(function() {
//alert($(this).val())
if ($(this).val() == "l7Is9HD8Yr2nMQKmSwm189AEr3yawtvPrZrn4") { // 6th payscale
$("#PayBandIdPayLevelAmount_field").css('display', 'block');
$("#PayBandIdPayLevelAmount").prop('required', true);
$("#GradePayIdPayLevelAmount_field").css('display', 'block');
$("#GradePayIdPayLevelAmount").prop('required', true);
} else {
$("#PayBandIdPayLevelAmount_field").css('display', 'none');
$("#PayBandIdPayLevelAmount").prop('required', false);
$("#GradePayIdPayLevelAmount_field").css('display', 'none');
$("#GradePayIdPayLevelAmount").prop('required', false);
}
});
});
</script>
{{-- Get GradePay on select PayBand --}}
<script>
$('#PayBandIdPayLevelAmount').on('select2:select', function (e) {
//alert(e.params.data);
var data = e.params.data;
var PayBandId = data.id;
getGradePayList(PayBandId);
});
function getGradePayList(PayBandId){
var PayBandId = PayBandId;
$('#GradePayIdPayLevelAmount').empty();
$.ajax({
type: "GET",
url: "{{ url('/') }}/get-gradepay-list/" +PayBandId,
dataType: "json",
success: function(response) {
var json = response.GradePay;
$.each(json, function(i, gradepay) {
$("#GradePayIdPayLevelAmount").append("<option value='" + gradepay.GradePayId + "'>" + gradepay.GradePayName + "</option>");
$('#GradePayIdPayLevelAmount').val(null).trigger('change');
});
}
});
}
</script>
{{-- Get PayLevel on select PayScale --}}
<script>
$('#PayScaleIdPayLevelAmount').on('select2:select', function (e) {
//alert(e.params.data);
var data = e.params.data;
var PayScaleId = data.id;
getPayLevelList(PayScaleId);
});
function getPayLevelList(PayScaleId){
var PayScaleId = PayScaleId;
$('#PayLevelIdAmount').empty();
$.ajax({
type: "GET",
url: "{{ url('/') }}/get-paylevel-list/" +PayScaleId,
dataType: "json",
success: function(response) {
var json = response.PayLevel;
$.each(json, function(i, paylevel) {
$("#PayLevelIdAmount").append("<option value='" + paylevel.PayLevelId + "'>" + paylevel.PayLevelName + " (" + paylevel.AmountRange + ")" +"</option>");
$('#PayLevelIdAmount').val(null).trigger('change');
});
}
});
}
</script>
{{-- Check Availablity --}}
<script>
function checkDuplicatePayLevelAmount(element, id){
var id = id;
var PayLevelAmount = $(element).val();
if (PayLevelAmount == "") {
$('span#CheckPayLevelAmount, #editCheckPayLevelAmount').css("display", "none");
} else {
$('span#CheckPayLevelAmount, #editCheckPayLevelAmount').css("display", "block");
}
//alert (PayLevelAmount);
$.ajax({
type: "GET",
url: '{{ url("/") }}/check-pay-level-amount/',
data: {PayLevelAmount:PayLevelAmount, id:id},
dataType: "json",
success: function(res) {
if(res.exists){
$('span#CheckPayLevelAmount, span#editCheckPayLevelAmount').html('<span class="text-danger">PayLevel Amount is already exist!</span>');
$('#btn-save-new-paylevel-amount, #btn-save-paylevel-amount, #btn-update-paylevel-amount').attr('disabled', true);
} else {
$('span#CheckPayLevelAmount, span#editCheckPayLevelAmount').html('<span class="text-success">PayLevel Amount is available!</span>');
$('#btn-save-new-paylevel-amount, #btn-save-paylevel-amount, #btn-update-paylevel-amount').attr('disabled', false);
}
},
error: function (jqXHR, exception) {
}
});
}
</script>
{{-- Store PayLevel Amount --}}
<script>
var reload = 0;
$(function () {
$.validator.setDefaults({
submitHandler: function () {
savePayLevelAmountRecord();
}
});
// Reload page after data save
$('#btn-save-paylevel-amount').click(function(){
reload = 1;
});
// Validate Fields
$('#addPayLevelAmountform').validate({
rules: {
PayLevelAmount: {
required: true,
remote: {
type: "POST",
url:'{{ url("/") }}/check-duplicate-paylevel-amount',
data: {
PayLevelAmount: function() {
return $( "#PayLevelAmount" ).val();
},
PayScaleId: function() {
return $('#PayScaleIdPayLevelAmount').find(":selected").val();
},
PayBandId: function() {
return $('#PayBandIdPayLevelAmount').find(":selected").val();
},
GradePayId: function() {
return $('#GradePayIdPayLevelAmount').find(":selected").val();
},
PayLevelId: function() {
return $('#PayLevelIdAmount').val();
},
'_token':$('meta[name="csrf-token"]').attr('content')
}
},
},
},
messages: {
PayLevelAmountName: {
required: "Please enter the PayLevel Amount",
remote: "The PayLevel Amount already exists in the selected PayLevel.",
},
},
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>
{{-- Save Data Function --}}
<script>
function savePayLevelAmountRecord() {
event.preventDefault();
$.ajax({
type: "post",
url: "{{ url('store-pay-level-amount') }}",
dataType: "json",
data: $('form#addPayLevelAmountform').serialize(),
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: 'PayLevelAmount added successfully!'
});
$('#PayScaleIdPayLevelAmount').val(null).trigger('change');
$('#PayBandIdPayLevelAmount').val(null).trigger('change');
$('#GradePayIdPayLevelAmount').val(null).trigger('change');
$('#PayLevelIdAmount').empty();
$('form#addPayLevelAmountform').each(function() {
this.reset();
});
$('span#CheckPayLevelAmount').html('');
if(reload)
{
location.reload();
}
},
error: function(response) {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'error',
title: 'Sorry, Something went wrong!'
})
}
});
}
</script>
{{-- Activate / De-Activate --}}
<script>
// Activate
function activatePayLevelAmount(PayLevelAmountId) {
var PayLevelAmountId = PayLevelAmountId;
Swal.fire({
title: 'Activate PayLevelAmount?',
text: "Are you sure you want to activate PayLevelAmount!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, activate it!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: "get",
url: "{{ url('/') }}/change-status-pay-level-amount/" + PayLevelAmountId,
success: function(response) {
Swal.fire({
icon: 'success',
title: 'PayLevelAmount has been activated!',
showConfirmButton: false,
timer: 1500
}).then(function() {
location.reload();
});
}
});
}
});
}
// Deactivate
function deactivatePayLevelAmount(PayLevelAmountId) {
var PayLevelAmountId = PayLevelAmountId;
Swal.fire({
title: 'De-activate PayLevelAmount?',
text: "Are you sure you want to De-activate PayLevelAmount!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, De-activate it!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: "get",
url: "{{ url('/') }}/change-status-pay-level-amount/" + PayLevelAmountId,
success: function(response) {
Swal.fire({
icon: 'success',
title: 'PayLevelAmount has been De-activated!',
showConfirmButton: false,
timer: 1500
}).then(function() {
location.reload();
});
}
});
}
});
}
</script>
{{-- Edit PayLevel Amount --}}
<script>
function editPayLevelAmount(PayLevelAmountId)
{
var PayLevelAmountId = PayLevelAmountId;
$('#updatePayLevelAmount').modal('show');
$.ajax({
type: "GET",
url: "{{ url('/') }}/edit-pay-level-amount/" +PayLevelAmountId,
success: function (response) {
$('#editPayLevelAmountName').val(response.PayLevelAmount.PayLevelAmountName);
$('#PayLevelAmountId').val(PayLevelAmountId);
$('span#PayLevelAmountName').html('#' +response.PayLevelAmount.PayLevelAmountName);
}
});
}
</script>
{{-- Update PayLevel Amount --}}
<script>
$("#btn-update-paylevel-amount").click(function (event) {
event.preventDefault();
var Name = $("#editPayLevelAmountName").val();
if (Name == "") {
Swal.fire({
icon: "warning",
title: "Name is required!",
showConfirmButton: false,
timer: 2000,
});
} else {
$.ajax({
type: "post",
url: "{{ url('update-pay-level-amount') }}",
dataType: "json",
data: $("form#updatePayLevelAmountform").serialize(),
success: function (response) {
Swal.fire({
icon: "success",
title: "PayLevelAmount has been updated!",
showConfirmButton: false,
timer: 2000,
}).then(function () {
location.reload();
});
},
error: function (response) {
Swal.fire({
icon: "error",
title: "Some thing went wrong!",
showConfirmButton: false,
timer: 2000,
});
},
});
}
});
</script>
{{-- Delete PayLevel Amount --}}
<script>
//Delete PayLevel Amount
function deletePayLevelAmount(PayLevelAmountId) {
var PayLevelAmountId = PayLevelAmountId;
alert(PayLevelAmountId);
$.ajax({
type: "GET",
url: "{{ url('/') }}/check-employee-pay-level-amount/" + PayLevelAmountId,
success: function (response) {
if (response.exists) {
Swal.fire({
icon: "warning",
title: "Can't be deleted!",
text: "This PayLevel Amount is associated with empolyee(s)!",
showConfirmButton: true,
});
} else {
Swal.fire({
title: "Delete PayLevelAmount?",
text: "Are you sure you want to delete this PayLevelAmount?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: "get",
url:
"{{ url('/') }}/delete-pay-level-amount/" +
PayLevelAmountId,
success: function (response) {
Swal.fire({
icon: "success",
title: "PayLevelAmount has been deleted!",
showConfirmButton: false,
timer: 1500,
}).then(function () {
location.reload();
});
},
});
}
});
}
},
});
}
</script>