File: /var/www/html/hrms-production/resources/views/components/employee-icard-modal.blade.php
{{-- Add Employee I-card --}}
<div class="modal fade" id="addEmployeeIcard">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Employee I-card </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="addEmployeeIcardform">
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
<input type="hidden" name="EmployeeCode" id="EmpCode">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="EmployeeCode">Employee Code <span class="text-danger">*</span></label>
<select class="form-control form-control-sm select2" style="width: 100%;"
aria-hidden="true" name="EmployeeCode" id="EmployeeCode"
data-placeholder="Employee Code" required>
<option selected="selected" disabled>Employee Code</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="OrderNo">Order No <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" name="OrderNo" id="OrderNo">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="OrderDate">Order Date <span class="text-danger">*</span></label>
<div class="input-group date" id="OrderDate3" data-target-input="nearest">
<input type="text" id="OrderDate" name="OrderDate"
class="form-control form-control-sm datetimepicker-input" data-target="#OrderDate" placeholder="DD/MM/YYYY" />
<div class="input-group-append" data-target="#OrderDate" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="ICardNumber">I-Card Number <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" name="ICardNumber" id="ICardNumber">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="DemandPurpose">Demand Purpose <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" name="DemandPurpose" id="DemandPurpose">
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="AadharCardNo">Aadhar Card No <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" name="AadharCardNo" id="AadharCardNo" readonly>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="PaymentFile">Payment File</label>
<div class="input-group input-group-sm">
<div class="custom-file">
<input type="file" class="custom-file-input" name="PaymentFile" id="PaymentFile" accept="image/*,pdf">
<label class="custom-file-label" for="PaymentFile">Choose file</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="OrderFile">Order File</label>
<div class="input-group input-group-sm">
<div class="custom-file">
<input type="file" class="custom-file-input" name="OrderFile" id="OrderFile" accept="image/*,pdf">
<label class="custom-file-label" for="OrderFile">Choose file</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="ICardLanguage">I-Card Language</label><br>
<div class="icheck-primary d-inline">
<input class="lang" type="radio" name="ICardLanguage" id="English" value="English" checked>
<label class="mb-0" for="English">English</label>
</div>
<div class="icheck-primary d-inline">
<input class="lang" type="radio" name="ICardLanguage" id="Marathi" value="Marathi">
<label class="mb-0" for="Marathi">Marathi</label>
</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 -->
{{-- Update ICard Report --}}
<div class="modal fade" id="UpdateICardlReport">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Employee I-card <span id="CREmployeeName" 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="updateEmployeeIcardform">
<input type="hidden" name="_token" id="token1" value="{{ csrf_token() }}">
<input type="hidden" name="EmployeeICardId" id="EmployeeICardId">
<input type="hidden" name="PrimaryId" id="PrimaryId">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="EmployeeCode">Employee Code <span class="text-danger">*</span></label>
<select class="form-control form-control-sm select2" style="width: 100%;"
aria-hidden="true" name="EditEmployeeCode" id="EditEmployeeCode"
data-placeholder="Employee Code" required>
<option value="" disabled selected>Employee Code</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="EditOrderNo">Order No <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" name="EditOrderNo" id="EditOrderNo">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="OrderDate">Order Date <span class="text-danger">*</span></label>
<div class="input-group date" id="OrderDate3" data-target-input="nearest">
<input type="text" id="EditOrderDate" name="EditOrderDate"
class="form-control form-control-sm datetimepicker-input" data-target="#EditOrderDate" placeholder="DD/MM/YYYY" />
<div class="input-group-append" data-target="#EditOrderDate" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="EditICardNumber">I-Card Number <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" name="EditICardNumber" id="EditICardNumber">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="EditDemandPurpose">Demand Purpose <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" name="EditDemandPurpose" id="EditDemandPurpose">
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="EditAdharCardNo">Aadhar Card No</label>
<input type="text" class="form-control form-control-sm" name="EditAdharCardNo" id="EditAdharCardNo" readonly>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="EditPaymentFile">Payment File</label>
<div class="input-group input-group-sm">
<div class="custom-file">
<input type="file" class="custom-file-input" name="PaymentFile" id="EditPaymentFile" accept="image/*,pdf">
<label class="custom-file-label" for="EditPaymentFile">Choose file</label>
</div>
<img class="card-img-top" src="#" id="PaymentImage" height="100px">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="EditOrderFile">Order File</label>
<div class="input-group input-group-sm">
<div class="custom-file">
<input type="file" class="custom-file-input" name="OrderFile" id="EditOrderFile" accept="image/*,pdf">
<label class="custom-file-label" for="OrderFile">Choose file</label>
</div>
<img class="card-img-top" src="#" id="OrderImage" height="100px">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-2">
<label class="mb-0" for="ICardLanguage">I-Card Language</label><br>
<div class="icheck-primary d-inline">
<input class="Editlang" type="radio" name="EditICardLanguage" id="EditEnglish" value="English">
<label class="mb-0" for="EditEnglish">English</label>
</div>
<div class="icheck-primary d-inline">
<input class="Editlang" type="radio" name="EditICardLanguage" id="EditMarathi" value="Marathi">
<label class="mb-0" for="EditMarathi">Marathi</label>
</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" class="btn btn-sm btn-info mx-1">Update</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{-- JS Start Here --}}
<!-- <script>
$(function() {
$("#ICardTable").DataTable({
"responsive": true,
"lengthChange": true,
"autoWidth": false,
"lengthMenu": [10, 20, 50, 100, 250, 500],
//"buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
}).buttons().container().appendTo('#userTable_wrappercol-md-6:eq(0)');
});
</script> -->
{{-- Employee List --}}
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "{{ url('/employee-list') }}",
dataType: "json",
success: function(response) {
var json = response.EmployeeList;
$.each(json, function(i, employee) {
$("#EmployeeCode,#EditEmployeeCode").append("<option value='" + employee.EmployeeId + "'>" + employee.EmployeeCode + " (" + employee.EmployeeName + ") " + "</option>");
$('#EmployeeCode,#EditEmployeeCode').trigger('change');
});
}
});
});
// Get Employee Details
$('#EmployeeCode').on('select2:select', function (e) {
var data = e.params.data;
var EmployeeId = data.id;
$('#EmpId').val('');
$('#EmpCode').val('');
getEmployeeDetail(EmployeeId);
// Reset Form field on change Employee Code
$('#EmployeeId').val(null).trigger('change');
});
function getEmployeeDetail(EmployeeId)
{
var EmployeeId = EmployeeId;
$.ajax({
type: "post",
url: "{{ url('/') }}/get-employee-current-detail",
dataType: "json",
data: {
_token: "{{csrf_token()}}",
EmployeeId: EmployeeId,
},
success: function(response) {
var json = response.GetEmpCurrentDetail;
$('#EmployeeId').val(json.EmployeeId);
$('#EmpCode').val(json.EmployeeCode);
$('#AadharCardNo,#EditAdharCardNo').val(json.AadharCardNo);
}
});
}
</script>
{{-- Edit ICard Data Modal --}}
<script>
function editIcardReport(EmployeeICardId)
{
var EmployeeICardId = EmployeeICardId;
$('#UpdateICardlReport').modal('show');
$.ajax({
type: "POST",
url: "{{ url('/') }}/edit-icard-report",
dataType: 'json',
data: {
EmployeeICardId: EmployeeICardId,
_token: "{{ csrf_token() }}",
},
success: function (response) {
$('span#CREmployeeName').html('#' +response.GetICardReport.EmployeeName);
$('#PrimaryId').val(response.GetICardReport.id);
$('#EmployeeICardId').val(response.GetICardReport.EmployeeICardId);
$('#EditEmployeeCode').val(response.GetICardReport.EmployeeId);
$('#EditEmployeeCode').trigger('change');
$('#EditOrderNo').val(response.GetICardReport.OrderNo);
$('#EditOrderDate').val(response.GetICardReport.OrderDate);
$('#EditICardNumber').val(response.GetICardReport.ICardNumber);
$('#EditDemandPurpose').val(response.GetICardReport.DemandPurpose);
$('#EditAdharCardNo').val(response.GetICardReport.AadharCardNo);
$("#PaymentImage").attr("src", "{{ url('/') }}" + response.GetICardReport.PaymentRecieptPath);
$('#OrderImage').attr("src","{{ url('/') }}" + response.GetICardReport.OrderFilePath);
if (response.GetICardReport.ICardLanguage == 'English') {
$("input#EditEnglish").prop('checked', true);
}
else{
$("input#EditMarathi").prop('checked', true);
}
}
});
}
</script>
{{-- Validate form and Save data --}}
<script>
$(function () {
$.validator.setDefaults({
submitHandler: function () {
event.preventDefault();
// Get Form Data
var langvalue = $('.lang:checked').val();
var token = $("#token").val();
var IcardId = $("#IcardId").val();
var EmpCode = $('#EmployeeCode').find('option:selected').text();
var EmployeeCode = EmpCode.split(' ')[0];
var EmployeeId = $('#EmployeeCode').find('option:selected').val();
var OrderNo = $('#OrderNo').val();
var OrderDate = $('#OrderDate').val();
var ICardNumber = $('#ICardNumber').val();
var DemandPurpose = $('#DemandPurpose').val();
var AdharCardNo = $('#AadharCardNo').val();
var ICardLanguage = langvalue;
var PaymentFile = $('#PaymentFile')[0].files;
var OrderFile = $('#OrderFile')[0].files;
var fd = new FormData();
fd.append('_token',token);
fd.append('EmployeeId',EmployeeId);
fd.append('EmployeeCode',EmployeeCode);
fd.append('OrderNo',OrderNo);
fd.append('OrderDate',OrderDate);
fd.append('ICardNumber',ICardNumber);
fd.append('DemandPurpose',DemandPurpose);
fd.append('AdharCardNo',AdharCardNo);
fd.append('ICardLanguage',ICardLanguage);
// files data
fd.append('PaymentRecieptPath',PaymentFile[0]);
fd.append('OrderFilePath',OrderFile[0]);
$.ajax({
type: "post",
url: "{{ url('store-icard-report') }}",
data: fd,
contentType: false,
processData: false,
success: function(response) {
var response = 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: 'Icard 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!'
});
}
});
}
});
$('#addEmployeeIcardform').validate({
rules: {
IcardId: {
required: true,
},
EmployeeCode: {
required: true,
},
OrderNo: {
required: true,
},
OrderDate: {
required: true,
},
ICardNumber: {
required: true,
},
DemandPurpose: {
required: true,
},
AadharCardNo: {
required: true,
},
},
messages: {
IcardId: {
required: "Employee Icard Id is required.",
},
// EmployeeId: {
// required: "Employee Code is required.",
// },
EmployeeCode: {
required: "Employee Code is required.",
},
OrderNo: {
required: "Order No is required.",
},
OrderDate: {
required: "Order Date is required.",
},
ICardNumber: {
required: "ICard Number is required.",
},
DemandPurpose: {
required: "Demand Purpose is required.",
},
AadharCardNo: {
required: "Aadhar Card No 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>
{{-- Validate form and Update Icard data --}}
<script>
$(function () {
$.validator.setDefaults({
submitHandler: function () {
event.preventDefault();
// Get Form Data
var langvalue = $('.Editlang:checked').val();
var token = $("#token1").val();
var IcardId = $("#IcardId1").val();
var PrimaryId = $("#PrimaryId").val();
var EmpCode = $('#EditEmployeeCode').find('option:selected').text();
var EmployeeCode = EmpCode.split(' ')[0];
var EmployeeId = $('#EditEmployeeCode').find('option:selected').val();
var OrderNo = $('#EditOrderNo').val();
var OrderDate = $('#EditOrderDate').val();
var ICardNumber = $('#EditICardNumber').val();
var DemandPurpose = $('#EditDemandPurpose').val();
var AdharCardNo = $('#EditAdharCardNo').val();
var ICardLanguage = langvalue;
var PaymentFile = $('#EditPaymentFile')[0].files;
var OrderFile = $('#EditOrderFile')[0].files;
var fd = new FormData();
fd.append('_token',token);
fd.append('PrimaryId',PrimaryId);
fd.append('EmployeeId',EmployeeId);
fd.append('EmployeeCode',EmployeeCode);
fd.append('OrderNo',OrderNo);
fd.append('OrderDate',OrderDate);
fd.append('ICardNumber',ICardNumber);
fd.append('DemandPurpose',DemandPurpose);
fd.append('AdharCardNo',AdharCardNo);
fd.append('ICardLanguage',ICardLanguage);
// files data
fd.append('PaymentRecieptPath',PaymentFile[0]);
fd.append('OrderFilePath',OrderFile[0]);
$.ajax({
type: "post",
url: "{{ url('update-icard-report') }}",
data: fd,
processData: false,
contentType: false,
cache: 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: 'Report 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!'
});
}
});
}
});
$('#updateEmployeeIcardform').validate({
rules: {
IcardId1: {
required: true,
},
EditOrderNo: {
required: true,
},
EditOrderDate: {
required: true,
},
EditICardNumber: {
required: true,
},
EditDemandPurpose: {
required: true,
},
},
messages: {
IcardId: {
required: "Employee Icard Id is required.",
},
EditOrderNo: {
required: "Order No is required.",
},
EditOrderDate: {
required: "Order Date is required.",
},
EditICardNumber: {
required: "ICard Number is required.",
},
EditDemandPurpose: {
required: "Demand Purpose 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 Icard Detail --}}
<script>
function deleteIcardReport(EmployeeICardId) {
var EmployeeICardId = EmployeeICardId;
Swal.fire({
title: "Delete Record?",
text: "Are you sure you want to delete this Record?",
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-icard-report",
dataType: "json",
data: {
_token: "{{csrf_token()}}",
EmployeeICardId: EmployeeICardId,
},
success: function (response) {
Swal.fire({
icon: "success",
title: "Record has been deleted!",
showConfirmButton: false,
timer: 1500,
}).then(function () {
location.reload();
});
},
});
}
});
}
</script>