@model IEnumerable<EMPDETAILS.Models.EmployeeDetails>
@{
ViewBag.Title = "Employee Records";
}
<h4 class="text-center mb-4">Employee Records</h4>
<!-- DataTable HTML -->
<table id="employeeTable" class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Full Name</th>
<th>Gender</th>
<th>Phone Number</th>
<th>Address</th>
<th>District</th>
<th>PinCode</th>
<th>Email ID</th>
<th>Marital Status</th>
<th>Blood Group</th>
<th>Pan Card No</th>
<th>Aadhar Card No</th>
<th>Company Name</th>
<th>Department</th>
<th>PF Number</th>
<th>UAN Number</th>
<th>HR Name</th>
<th>HR Contact Number</th>
<th>HR Email ID</th>
<th>Reporting Manager Name</th>
<th>Reporting Manager Contact No</th>
<th>Reporting Manager Email ID</th>
<th>Reference Name</th>
<th>Reference Phone No</th>
<th>Reference Email ID</th>
<th>Family Name</th>
<th>Family Relation</th>
<th>Family DOB</th>
<th>Nominee Name</th>
<th>Nominee Relation</th>
<th>Nominee DOB</th>
<th>Nominee Contact No</th>
<th>Emergency Contact Name</th>
<th>Emergency Contact Relation</th>
<th>Emergency Contact Phone No</th>
<th>Document Pan File</th>
<th>Document Aadhar File</th>
<th>Document License File</th>
<th>Document Passport File</th>
<th>Document Bank Details File</th>
<th>Educational Certificate File</th>
<th>Relieving Letter File</th>
<th>Position</th>
<th>Joining Date</th>
<th>Location</th>
<th>Manager</th>
<th>Actions</th> <!-- New column for the View Details Button -->
</tr>
</thead>
<tbody>
@foreach (var employee in Model)
{
<tr>
<td>@employee.FullName</td>
<td>@Convert.ToDateTime(employee.DateOfBirth).ToString("dd-MM-yyyy")</td>
<td>@employee.Gender</td>
<td>@employee.PhoneNumber</td>
<td>@employee.Address</td>
<td>@employee.District</td>
<td>@employee.PinCode</td>
<td>@employee.EmailId</td>
<td>@employee.MaritalStatus</td>
<td>@employee.BloodGroup</td>
<td>@employee.PanCardNo</td>
<td>@employee.AadharCardNo</td>
<td>@employee.CompanyName</td>
<td>@employee.Department</td>
<td>@employee.PFNumber</td>
<td>@employee.UANNumber</td>
<td>@employee.HRName</td>
<td>@employee.HRContactNumber</td>
<td>@employee.HREmailId</td>
<td>@employee.ReportingManagerName</td>
<td>@employee.ReportingManagerContactNo</td>
<td>@employee.ReportingManagerEmailId</td>
<td>@employee.ReferenceName</td>
<td>@employee.ReferencePhoneNo</td>
<td>@employee.ReferenceEmailId</td>
<td>@employee.FamilyName</td>
<td>@employee.FamilyRelation</td>
<td>@Convert.ToDateTime(employee.FamilyDOB).ToString("dd-MM-yyyy")</td>
<td>@employee.NomineeName</td>
<td>@employee.NomineeRelation</td>
<td>@Convert.ToDateTime(employee.NomineeDOB).ToString("dd-MM-yyyy")</td>
<td>@employee.NomineeContactNo</td>
<td>@employee.EmergencyContactName</td>
<td>@employee.EmergencyContactRelation</td>
<td>@employee.EmergencyContactPhoneNo</td>
<td>
@(string.IsNullOrEmpty(employee.DocumentPanFilePath) ? "" :
"<a href='" + Url.Action("DownloadFile", new { fileName = Path.GetFileName(employee.DocumentPanFilePath) }) + "' download>Download</a>")
</td>
<td>
@(string.IsNullOrEmpty(employee.DocumentAadharFilePath) ? "" :
"<a href='" + Url.Action("DownloadFile", new { fileName = Path.GetFileName(employee.DocumentAadharFilePath) }) + "' download>Download</a>")
</td>
<td>
@(string.IsNullOrEmpty(employee.DocumentLicenseFilePath) ? "" :
"<a href='" + Url.Action("DownloadFile", new { fileName = Path.GetFileName(employee.DocumentLicenseFilePath) }) + "' download>Download</a>")
</td>
<td>
@(string.IsNullOrEmpty(employee.DocumentPassportFilePath) ? "" :
"<a href='" + Url.Action("DownloadFile", new { fileName = Path.GetFileName(employee.DocumentPassportFilePath) }) + "' download>Download</a>")
</td>
<td>
@(string.IsNullOrEmpty(employee.DocumentBankDetailsFilePath) ? "" :
"<a href='" + Url.Action("DownloadFile", new { fileName = Path.GetFileName(employee.DocumentBankDetailsFilePath) }) + "' download>Download</a>")
</td>
<td>
@(string.IsNullOrEmpty(employee.EducationalCertificateFilePath) ? "" :
"<a href='" + Url.Action("DownloadFile", new { fileName = Path.GetFileName(employee.EducationalCertificateFilePath) }) + "' download>Download</a>")
</td>
<td>
@(string.IsNullOrEmpty(employee.RelievingLetterFilePath) ? "" :
"<a href='" + Url.Action("DownloadFile", new { fileName = Path.GetFileName(employee.RelievingLetterFilePath) }) + "' download>Download</a>")
</td>
<td>@employee.Position</td>
<td>@Convert.ToDateTime(employee.JoiningDate).ToString("dd-MM-yyyy")</td>
<td>@employee.Location</td>
<td>@employee.Manager</td>
<td>
<!-- View Details Button -->
<button class="btn btn-info btn-sm"
data-toggle="modal"
data-target="#employeeModal"
data-id="@employee.EMPId"
data-fullname="@employee.FullName"
data-dob="@Convert.ToDateTime(employee.DateOfBirth).ToString("dd-MM-yyyy")"
data-gender="@employee.Gender"
data-phone="@employee.PhoneNumber"
data-address="@employee.Address"
data-district="@employee.District"
data-pincode="@employee.PinCode"
data-email="@employee.EmailId"
data-maritalstatus="@employee.MaritalStatus"
data-bloodgroup="@employee.BloodGroup"
data-pancard="@employee.PanCardNo"
data-aadharcard="@employee.AadharCardNo"
data-companyname="@employee.CompanyName"
data-department="@employee.Department"
data-pfnumber="@employee.PFNumber"
data-uannumber="@employee.UANNumber"
data-hrname="@employee.HRName"
data-hrcontact="@employee.HRContactNumber"
data-hremail="@employee.HREmailId"
data-reportingmanager="@employee.ReportingManagerName"
data-reportingcontact="@employee.ReportingManagerContactNo"
data-reportingemail="@employee.ReportingManagerEmailId"
data-referencename="@employee.ReferenceName"
data-referencephone="@employee.ReferencePhoneNo"
data-referenceemail="@employee.ReferenceEmailId"
data-familyname="@employee.FamilyName"
data-familyrelation="@employee.FamilyRelation"
data-familydob="@Convert.ToDateTime(employee.FamilyDOB).ToString("dd-MM-yyyy")"
data-nomineename="@employee.NomineeName"
data-nomineerelation="@employee.NomineeRelation"
data-nomineedob="@Convert.ToDateTime(employee.NomineeDOB).ToString("dd-MM-yyyy")"
data-nomineecontact="@employee.NomineeContactNo"
data-emergencycontact="@employee.EmergencyContactName"
data-emergencyrelation="@employee.EmergencyContactRelation"
data-emergencyphone="@employee.EmergencyContactPhoneNo"
data-position="@employee.Position"
data-joiningdate="@Convert.ToDateTime(employee.JoiningDate).ToString("dd-MM-yyyy")"
data-location="@employee.Location"
data-manager="@employee.Manager">
View Details
</button>
</td>
</tr>
}
</tbody>
</table>
<!-- Bootstrap Modal for displaying employee details -->
<div class="modal fade" id="employeeModal" tabindex="-1" role="dialog" aria-labelledby="employeeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title" id="employeeModalLabel">Employee Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Employee Details Will Be Dynamically Loaded Here -->
<div id="employeeDetailsContent">
<p><strong>Full Name:</strong> <span id="empFullName"></span></p>
<p
><strong
>Date of Birth
:</strong
> <span id
="empDOB"></span
></p
> <p><strong>Gender:</strong> <span id="empGender"></span></p>
<p><strong>Phone Number:</strong> <span id="empPhone"></span></p>
<p><strong>Address:</strong> <span id="empAddress"></span></p>
<p><strong>District:</strong> <span id="empDistrict"></span></p>
<p><strong>PinCode:</strong> <span id="empPinCode"></span></p>
<p><strong>Email ID:</strong> <span id="empEmail"></span></p>
<p><strong>Marital Status:</strong> <span id="empMaritalStatus"></span></p>
<p><strong>Blood Group:</strong> <span id="empBloodGroup"></span></p>
<p><strong>Pan Card No:</strong> <span id="empPanCard"></span></p>
<p><strong>Aadhar Card No:</strong> <span id="empAadharCard"></span></p>
<p><strong>Company Name:</strong> <span id="empCompanyName"></span></p>
<p><strong>Department:</strong> <span id="empDepartment"></span></p>
<p><strong>PF Number:</strong> <span id="empPFNumber"></span></p>
<p><strong>UAN Number:</strong> <span id="empUANNumber"></span></p>
<p><strong>HR Name:</strong> <span id="empHRName"></span></p>
<p><strong>HR Contact Number:</strong> <span id="empHRContact"></span></p>
<p><strong>HR Email ID:</strong> <span id="empHREmail"></span></p>
<p><strong>Reporting Manager Name:</strong> <span id="empReportingManager"></span></p>
<p><strong>Reporting Manager Contact:</strong> <span id="empReportingContact"></span></p>
<p><strong>Reporting Manager Email:</strong> <span id="empReportingEmail"></span></p>
<p><strong>Reference Name:</strong> <span id="empReferenceName"></span></p>
<p><strong>Reference Phone No:</strong> <span id="empReferencePhone"></span></p>
<p><strong>Reference Email ID:</strong> <span id="empReferenceEmail"></span></p>
<p><strong>Family Name:</strong> <span id="empFamilyName"></span></p>
<p><strong>Family Relation:</strong> <span id="empFamilyRelation"></span></p>
<p><strong>Family DOB:</strong> <span id="empFamilyDOB"></span></p>
<p><strong>Nominee Name:</strong> <span id="empNomineeName"></span></p>
<p><strong>Nominee Relation:</strong> <span id="empNomineeRelation"></span></p>
<p><strong>Nominee DOB:</strong> <span id="empNomineeDOB"></span></p>
<p><strong>Nominee Contact No:</strong> <span id="empNomineeContact"></span></p>
<p><strong>Emergency Contact Name:</strong> <span id="empEmergencyContact"></span></p>
<p><strong>Emergency Contact Relation:</strong> <span id="empEmergencyRelation"></span></p>
<p><strong>Emergency Contact Phone No:</strong> <span id="empEmergencyPhone"></span></p>
<p><strong>Position:</strong> <span id="empPosition"></span></p>
<p
><strong
>Joining
Date:</strong
> <span id
="empJoiningDate"></span
></p
> <p><strong>Location:</strong> <span id="empLocation"></span></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="printButton">Print</button>
</div>
</div>
</div>
</div>
@section scripts {
<script>
$(document).ready(function () {
// Initialize DataTable with responsive design and export buttons
$('#employeeTable').DataTable({
"scrollX": true,
"pageLength": 10,
"lengthMenu": [10, 25, 50, 100],
"columnDefs": [
{ "targets": [46], "orderable": false, "className": "dt-center" }
],
"dom": 'Bfrtip',
"buttons": ['copy', 'csv', 'excel', 'pdf', 'print'],
"responsive": true,
"ordering": true,
});
// When the "View Details" button is clicked, populate the modal with employee details
$('#employeeModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
// Fetch employee data from the button attributes and set it to modal
$('#empFullName').text(button.data('fullname'));
$('#empDOB').text(button.data('dob'));
$('#empGender').text(button.data('gender'));
$('#empPhone').text(button.data('phone'));
$('#empAddress').text(button.data('address'));
$('#empDistrict').text(button.data('district'));
$('#empPinCode').text(button.data('pincode'));
$('#empEmail').text(button.data('email'));
$('#empMaritalStatus').text(button.data('maritalstatus'));
$('#empBloodGroup').text(button.data('bloodgroup'));
$('#empPanCard').text(button.data('pancard'));
$('#empAadharCard').text(button.data('aadharcard'));
$('#empCompanyName').text(button.data('companyname'));
$('#empDepartment').text(button.data('department'));
$('#empPFNumber').text(button.data('pfnumber'));
$('#empUANNumber').text(button.data('uannumber'));
$('#empHRName').text(button.data('hrname'));
$('#empHRContact').text(button.data('hrcontact'));
$('#empHREmail').text(button.data('hremail'));
$('#empReportingManager').text(button.data('reportingmanager'));
$('#empReportingContact').text(button.data('reportingcontact'));
$('#empReportingEmail').text(button.data('reportingemail'));
$('#empReferenceName').text(button.data('referencename'));
$('#empReferencePhone').text(button.data('referencephone'));
$('#empReferenceEmail').text(button.data('referenceemail'));
$('#empFamilyName').text(button.data('familyname'));
$('#empFamilyRelation').text(button.data('familyrelation'));
$('#empFamilyDOB').text(button.data('familydob'));
$('#empNomineeName').text(button.data('nomineename'));
$('#empNomineeRelation').text(button.data('nomineerelation'));
$('#empNomineeDOB').text(button.data('nomineedob'));
$('#empNomineeContact').text(button.data('nomineecontact'));
$('#empEmergencyContact').text(button.data('emergencycontact'));
$('#empEmergencyRelation').text(button.data('emergencyrelation'));
$('#empEmergencyPhone').text(button.data('emergencyphone'));
$('#empPosition').text(button.data('position'));
$('#empJoiningDate').text(button.data('joiningdate'));
$('#empLocation').text(button.data('location'));
});
// Print button functionality inside modal
$('#printButton').click(function () {
var printContent = document.getElementById("employeeDetailsContent").innerHTML;
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Employee Details</title></head><body>');
printWindow.document.write(printContent);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
});
</script>
}