554 lines
30 KiB
PHP
554 lines
30 KiB
PHP
@extends('layouts.masterbeta')
|
|
|
|
@section('title', 'Click ERP - Staff Directory')
|
|
|
|
@push('styles')
|
|
<!-- Select2 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
<style>
|
|
.staff-card { background: #fff; border: 1px solid #eaedf1; border-radius: 12px; transition: all 0.2s ease-in-out; position: relative; overflow: hidden; }
|
|
.staff-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.05); border-color: #d1d5db; }
|
|
.card-top-bar { height: 4px; width: 100%; position: absolute; top: 0; left: 0; }
|
|
|
|
.staff-avatar { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background-color: #f8f9fc; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: #5c4df0; }
|
|
.contact-row { font-size: 0.85rem; padding: 0.4rem 0; border-bottom: 1px solid #f8f9fc; }
|
|
.contact-row:last-child { border-bottom: none; }
|
|
|
|
/* Select2 Bootstrap 5 tweaks */
|
|
.select2-container .select2-selection--single { height: 38px; border: 1px solid #dee2e6; border-radius: 0.375rem; display: flex; align-items: center; }
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('breadcrumbs')
|
|
<a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
|
|
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
|
<span class="fw-bold" style="font-size: 0.95rem;">Staff Directory</span>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h4 class="fw-bold mb-1">Staff Directory</h4>
|
|
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage employee profiles, department roles, and system access.</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" id="btnOpenStaffModal">
|
|
<i class="bi bi-person-plus me-2"></i> Add Employee
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="content-card p-3 mb-4">
|
|
<form action="{{ route('staff.index') }}" method="GET">
|
|
<div class="row g-3">
|
|
<div class="col-md-5">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-transparent border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
|
<input type="text" name="search" value="{{ request('search') }}" class="form-control border-start-0 ps-0" placeholder="Search by name, role, or phone...">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select" name="department_id" onchange="this.form.submit()">
|
|
<option value="">All Departments</option>
|
|
@foreach($departments as $dept)
|
|
<option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select class="form-select" name="status" onchange="this.form.submit()">
|
|
<option value="">Status: All</option>
|
|
<option value="ACTIVE" {{ request('status') == 'ACTIVE' ? 'selected' : '' }}>Active</option>
|
|
<option value="ON-LEAVE" {{ request('status') == 'ON-LEAVE' ? 'selected' : '' }}>On Leave</option>
|
|
<option value="INACTIVE" {{ request('status') == 'INACTIVE' ? 'selected' : '' }}>Inactive</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button type="submit" class="btn btn-secondary w-100" style="border-radius: 8px;">Filter</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Staff Grid -->
|
|
<div class="row g-4">
|
|
@php
|
|
// Define an array of Bootstrap background classes for the card top bars
|
|
$colors = ['bg-primary', 'bg-success', 'bg-warning', 'bg-danger', 'bg-info'];
|
|
@endphp
|
|
|
|
@forelse($staffMembers as $staff)
|
|
@php
|
|
// Generate Initials
|
|
$words = explode(' ', $staff->name);
|
|
$initials = strtoupper(substr($words[0], 0, 1) . (isset($words[1]) ? substr($words[1], 0, 1) : ''));
|
|
|
|
// Match the department ID to the collection
|
|
$deptName = $departments->firstWhere('id', $staff->department_id)->name ?? 'Unassigned';
|
|
|
|
// Cycle through colors based on the loop index
|
|
$topBarColor = $colors[$loop->index % count($colors)];
|
|
@endphp
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6">
|
|
<div class="staff-card p-4 h-100 d-flex flex-column">
|
|
<div class="card-top-bar {{ $topBarColor }}"></div>
|
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
@if($staff->profile_pic)
|
|
<img src="{{ asset('public/storage/' . $staff->profile_pic) }}" class="staff-avatar me-3" alt="{{ $staff->name }}">
|
|
@else
|
|
<div class="staff-avatar bg-primary bg-opacity-10 text-primary me-3">{{ $initials }}</div>
|
|
@endif
|
|
|
|
<div>
|
|
<h6 class="fw-bold mb-1 text-dark">{{ $staff->name }}</h6>
|
|
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary-subtle px-2 py-1" style="font-size: 0.7rem;">
|
|
{{ $staff->designation ?? 'N/A' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="contact-row d-flex justify-content-between align-items-center">
|
|
<span class="text-secondary text-truncate" style="max-width: 140px;"><i class="bi bi-buildings me-2"></i>{{ $deptName }}</span>
|
|
<span class="badge {{ $staff->status == 'ACTIVE' ? 'bg-success text-success' : 'bg-warning text-warning' }} bg-opacity-10" style="font-size: 0.65rem;">
|
|
{{ $staff->status }}
|
|
</span>
|
|
</div>
|
|
<div class="contact-row d-flex justify-content-between align-items-center">
|
|
<span class="text-secondary text-truncate" style="max-width: 180px;"><i class="bi bi-envelope me-2"></i>{{ $staff->email }}</span>
|
|
<a href="mailto:{{ $staff->email }}" class="text-secondary"><i class="bi bi-box-arrow-up-right" style="font-size: 0.7rem;"></i></a>
|
|
</div>
|
|
<div class="contact-row d-flex align-items-center">
|
|
<span class="text-secondary"><i class="bi bi-geo-alt me-2"></i>{{ $staff->location_country ?? 'Not Specified' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2 mt-auto pt-2 border-top">
|
|
<button class="btn btn-sm btn-light text-success flex-grow-1 btn-view-staff"
|
|
data-id="{{ $staff->id }}"
|
|
title="View Profile Details">
|
|
<i class="bi bi-eye"></i> View
|
|
</button>
|
|
<button class="btn btn-sm btn-light text-primary me-1 fw-semibold btn-edit-staff"
|
|
data-id="{{ $staff->id }}"
|
|
data-name="{{ $staff->name }}"
|
|
data-email="{{ $staff->email }}"
|
|
data-phone="{{ $staff->phone }}"
|
|
data-designation="{{ $staff->designation }}"
|
|
data-department_id="{{ $staff->department_id }}"
|
|
data-location_country="{{ $staff->location_country }}"
|
|
data-status="{{ $staff->status }}"
|
|
data-pic="{{ $staff->profile_pic ? asset('public/storage/' . $staff->profile_pic) : '' }}">
|
|
<i class="bi bi-pencil me-1"></i> Edit
|
|
</button>
|
|
|
|
{{--
|
|
<form action="{{ route('staff.destroy', $staff->id) }}" method="POST" class="flex-grow-1 m-0">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="button" class="btn btn-sm btn-light text-danger w-100 fw-semibold btn-delete-staff">
|
|
<i class="bi bi-trash me-1"></i> Delete
|
|
</button>
|
|
</form>
|
|
--}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12 text-center py-5 text-secondary">
|
|
<i class="bi bi-people mb-3 d-block" style="font-size: 3rem;"></i>
|
|
No staff members found.
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
{{ $staffMembers->links('pagination::bootstrap-5') }}
|
|
</div>
|
|
@endsection
|
|
|
|
@push('modals')
|
|
<!-- ADD / EDIT MODAL -->
|
|
<div class="modal fade" id="staffModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content" style="border-radius: 12px; border: none;">
|
|
<div class="modal-header bg-light" style="border-radius: 12px 12px 0 0;">
|
|
<h5 class="modal-title fw-bold" id="staffModalTitle">Add New Employee</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<form id="staffForm" enctype="multipart/form-data">
|
|
<div class="modal-body p-4">
|
|
<div id="staffModalAlert"></div>
|
|
<input type="hidden" id="staffId" name="id">
|
|
|
|
<div class="row mb-4">
|
|
<!-- Avatar Column -->
|
|
<div class="col-md-3 text-center border-end pe-4">
|
|
<div class="staff-avatar mx-auto mb-3" style="width: 100px; height: 100px; font-size: 2rem;" id="avatarPreview">
|
|
<i class="bi bi-person text-secondary"></i>
|
|
</div>
|
|
<label for="staffPhoto" class="btn btn-sm btn-outline-secondary w-100">Upload Photo</label>
|
|
<input type="file" id="staffPhoto" name="photo" class="d-none" accept=".jpg,.jpeg,.png">
|
|
<div class="form-text mt-1" style="font-size: 0.7rem;">Max size: 2MB</div>
|
|
</div>
|
|
|
|
<!-- Identity Column -->
|
|
<div class="col-md-9 ps-4">
|
|
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Identity</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Full Name *</label>
|
|
<input type="text" class="form-control" id="staffName" name="name" required placeholder="Jane Doe">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Job Title *</label>
|
|
<input type="text" class="form-control" id="staffDesignation" name="designation" required placeholder="e.g. Network Engineer">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Email Address *</label>
|
|
<input type="email" class="form-control" id="staffEmail" name="email" required placeholder="jane@company.com">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold small">Phone / Extension</label>
|
|
<input type="text" class="form-control" id="staffPhone" name="phone" placeholder="e.g. +233 55 123 4567">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="text-secondary opacity-25">
|
|
|
|
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Organizational Assignment</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label text-secondary fw-semibold small">Department *</label>
|
|
<select class="form-select" id="staffDept" name="department_id" required>
|
|
<option value="">Select Department...</option>
|
|
@foreach($departments as $dept)
|
|
<option value="{{ $dept->id }}">{{ $dept->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label text-secondary fw-semibold small">Location / Country</label>
|
|
<select class="form-select select2-field" id="staffCountry" name="location_country">
|
|
<option value="">Select Country</option>
|
|
@foreach($countries as $country)
|
|
<option value="{{ $country->en_short_name }}">{{ $country->en_short_name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label text-secondary fw-semibold small">Status</label>
|
|
<select class="form-select" id="staffStatus" name="status">
|
|
<option value="ACTIVE">Active</option>
|
|
<option value="ON-LEAVE">On Leave</option>
|
|
<option value="INACTIVE">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn text-white fw-bold px-4" style="background-color: #5c4df0;" id="btnSubmitStaff">
|
|
Save Employee
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- VIEW STAFF PROFILE MODAL -->
|
|
<div class="modal fade" id="viewStaffModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-light">
|
|
<h5 class="modal-title fw-bold" id="viewStaffTitle">Staff Profile Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="modal-body p-4">
|
|
<!-- Basic Info Header -->
|
|
<div class="d-flex align-items-center mb-4 pb-3 border-bottom">
|
|
<div id="viewStaffAvatarContainer" class="me-3">
|
|
<!-- Dynamic Avatar inserted via JS -->
|
|
</div>
|
|
<div>
|
|
<h4 class="fw-bold mb-1 text-dark" id="viewStaffName">---</h4>
|
|
<p class="text-secondary mb-1 small" id="viewStaffDesignation">---</p>
|
|
<span id="viewStaffStatusBadge" class="badge">---</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Grid -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-4">
|
|
<div class="text-secondary small fw-semibold">WORK EMAIL</div>
|
|
<div class="fw-medium text-dark small" id="viewStaffEmail">---</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-secondary small fw-semibold">PHONE NUMBER</div>
|
|
<div class="fw-medium text-dark small" id="viewStaffPhone">---</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-secondary small fw-semibold">STAFF ID</div>
|
|
<div class="fw-medium text-dark small" id="viewStaffCode">---</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-secondary small fw-semibold">PERSONAL EMAIL</div>
|
|
<div class="fw-medium text-dark small" id="viewStaffPersonalEmail">---</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-secondary small fw-semibold">LOCATION / COUNTRY</div>
|
|
<div class="fw-medium text-dark small" id="viewStaffLocation">---</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-secondary small fw-semibold">ANNUAL LEAVE BALANCE</div>
|
|
<div class="fw-medium text-dark small"><span id="viewStaffLeaveBalance">0</span> Days</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Emergency Contacts Table Section -->
|
|
<h6 class="fw-bold text-dark mb-3"><i class="bi bi-shield-exclamation me-2 text-danger"></i>Emergency Contacts & Dependents</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-sm align-middle mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Full Name</th>
|
|
<th>Relationship</th>
|
|
<th>Phone</th>
|
|
<th>Medical Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="viewStaffDependentsList">
|
|
<tr>
|
|
<td colspan="4" class="text-center text-secondary py-3">Loading emergency contacts...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer bg-light">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<!-- Select2 JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
const staffModal = new bootstrap.Modal(document.getElementById('staffModal'));
|
|
const $form = $('#staffForm');
|
|
|
|
// Initialize Select2 inside the modal for Country
|
|
$('#staffCountry').select2({
|
|
placeholder: "Select Country",
|
|
allowClear: true,
|
|
width: '100%',
|
|
dropdownParent: $('#staffModal')
|
|
});
|
|
|
|
// Handle Photo Preview
|
|
$('#staffPhoto').on('change', function(e) {
|
|
if(e.target.files && e.target.files[0]) {
|
|
let reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
$('#avatarPreview').html(`<img src="${e.target.result}" style="width:100%; height:100%; object-fit:cover; border-radius:12px;">`);
|
|
}
|
|
reader.readAsDataURL(e.target.files[0]);
|
|
}
|
|
});
|
|
|
|
// --- OPEN MODAL FOR CREATE ---
|
|
$('#btnOpenStaffModal').on('click', function() {
|
|
$form[0].reset();
|
|
$('#staffId').val('');
|
|
$('#avatarPreview').html('<i class="bi bi-person text-secondary"></i>');
|
|
$('#staffCountry').val(null).trigger('change');
|
|
|
|
$('#staffModalTitle').text('Add New Employee');
|
|
$('#btnSubmitStaff').html('<i class="bi bi-save me-2"></i>Save Employee');
|
|
staffModal.show();
|
|
});
|
|
|
|
// --- OPEN MODAL FOR EDIT ---
|
|
$('.btn-edit-staff').on('click', function() {
|
|
const data = $(this).data();
|
|
|
|
$form[0].reset();
|
|
$('#staffId').val(data.id);
|
|
|
|
$('#staffName').val(data.name);
|
|
$('#staffDesignation').val(data.designation);
|
|
$('#staffEmail').val(data.email);
|
|
$('#staffPhone').val(data.phone);
|
|
$('#staffDept').val(data.department_id);
|
|
$('#staffCountry').val(data.location_country).trigger('change');
|
|
$('#staffStatus').val(data.status);
|
|
|
|
if (data.pic) {
|
|
$('#avatarPreview').html(`<img src="${data.pic}" style="width:100%; height:100%; object-fit:cover; border-radius:12px;">`);
|
|
} else {
|
|
$('#avatarPreview').html('<i class="bi bi-person text-secondary"></i>');
|
|
}
|
|
|
|
$('#staffModalTitle').text('Edit Employee: ' + data.name);
|
|
$('#btnSubmitStaff').html('<i class="bi bi-check-circle me-2"></i>Update Employee');
|
|
staffModal.show();
|
|
});
|
|
|
|
// --- HANDLE FORM SUBMISSION (AJAX) ---
|
|
$form.on('submit', function(e) {
|
|
e.preventDefault();
|
|
const $btn = $('#btnSubmitStaff');
|
|
const originalText = $btn.html();
|
|
const $alertBox = $('#staffModalAlert');
|
|
|
|
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Saving...');
|
|
$btn.prop('disabled', true);
|
|
$alertBox.html('');
|
|
$form.find('.is-invalid').removeClass('is-invalid');
|
|
|
|
let formData = new FormData(this);
|
|
const recordId = $('#staffId').val();
|
|
const submitUrl = recordId ? "{{ url('staff') }}/" + recordId : "{{ url('staff') }}";
|
|
|
|
if (recordId) formData.append('_method', 'PUT');
|
|
|
|
$.ajax({
|
|
url: submitUrl,
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
if (response.success) {
|
|
staffModal.hide();
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Success!',
|
|
text: response.message,
|
|
confirmButtonColor: '#5c4df0'
|
|
}).then(() => location.reload());
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
if (xhr.status === 422) {
|
|
let errors = xhr.responseJSON.errors;
|
|
$alertBox.html('<div class="alert alert-danger py-2 px-3 small"><i class="bi bi-exclamation-triangle-fill me-2"></i>Please check the highlighted fields below.</div>');
|
|
$.each(errors, function(key, value) {
|
|
let $input = $form.find('[name="' + key + '"]');
|
|
$input.addClass('is-invalid');
|
|
});
|
|
} else {
|
|
$alertBox.html('<div class="alert alert-danger py-2 px-3 small"><i class="bi bi-x-circle-fill me-2"></i>An unexpected error occurred.</div>');
|
|
}
|
|
},
|
|
complete: function() {
|
|
$btn.html(originalText).prop('disabled', false);
|
|
}
|
|
});
|
|
});
|
|
|
|
// --- SWEETALERT FOR DELETE ---
|
|
$('.btn-delete-staff').on('click', function() {
|
|
const $form = $(this).closest('form');
|
|
Swal.fire({
|
|
title: 'Remove Staff Member?',
|
|
text: "You are about to delete this employee's profile. This cannot be undone.",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: '<i class="bi bi-trash me-1"></i> Yes, remove them!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) $form.submit();
|
|
});
|
|
});
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
const viewModal = new bootstrap.Modal(document.getElementById('viewStaffModal'));
|
|
|
|
$('.btn-view-staff').on('click', function() {
|
|
const staffId = $(this).data('id');
|
|
|
|
// Reset fields to loading state
|
|
$('#viewStaffName').text('Loading...');
|
|
$('#viewStaffDesignation').text('');
|
|
$('#viewStaffEmail').text('');
|
|
$('#viewStaffPhone').text('');
|
|
$('#viewStaffCode').text('');
|
|
$('#viewStaffPersonalEmail').text('');
|
|
$('#viewStaffLocation').text('');
|
|
$('#viewStaffLeaveBalance').text('');
|
|
$('#viewStaffDependentsList').html('<tr><td colspan="4" class="text-center text-secondary py-3">Loading...</td></tr>');
|
|
|
|
viewModal.show();
|
|
|
|
// Fetch staff details via AJAX
|
|
$.ajax({
|
|
url: "{{ url('staff') }}/" + staffId + "/details", // Match your route endpoint
|
|
type: 'GET',
|
|
success: function(response) {
|
|
if (response.success) {
|
|
let staff = response.staff;
|
|
|
|
$('#viewStaffName').text(staff.name);
|
|
$('#viewStaffDesignation').text(staff.designation || 'Staff Member');
|
|
$('#viewStaffEmail').text(staff.email || 'N/A');
|
|
$('#viewStaffPhone').text(staff.phone || 'N/A');
|
|
$('#viewStaffCode').text(staff.staff_id || 'N/A');
|
|
$('#viewStaffPersonalEmail').text(staff.personal_email || 'N/A');
|
|
$('#viewStaffLocation').text(staff.location_country || 'N/A');
|
|
$('#viewStaffLeaveBalance').text(staff.annual_leave_balance ?? 0);
|
|
|
|
// Status Badge
|
|
let badgeClass = staff.status === 'ACTIVE' ? 'bg-success bg-opacity-10 text-success' : 'bg-warning bg-opacity-10 text-warning';
|
|
$('#viewStaffStatusBadge').attr('class', `badge ${badgeClass} px-3 py-1`).text(staff.status);
|
|
|
|
// Avatar setup
|
|
if (staff.profile_pic) {
|
|
$('#viewStaffAvatarContainer').html(`<img src="{{ asset('public/storage') }}/${staff.profile_pic}" class="rounded-circle border" style="width: 70px; height: 70px; object-fit: cover;">`);
|
|
} else {
|
|
let initials = staff.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
|
|
$('#viewStaffAvatarContainer').html(`<div class="rounded-circle bg-light text-primary fw-bold d-flex align-items-center justify-content-center border" style="width: 70px; height: 70px; font-size: 1.5rem;">${initials}</div>`);
|
|
}
|
|
|
|
// Dependents Table population
|
|
let dependentsHtml = '';
|
|
if (response.dependents && response.dependents.length > 0) {
|
|
response.dependents.forEach(dep => {
|
|
dependentsHtml += `
|
|
<tr>
|
|
<td class="fw-bold">${dep.fullname}</td>
|
|
<td><span class="badge bg-secondary bg-opacity-10 text-dark border">${dep.relationship}</span></td>
|
|
<td>${dep.phone || 'N/A'}</td>
|
|
<td class="text-secondary">${dep.medical_details || 'None'}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
} else {
|
|
dependentsHtml = `<tr><td colspan="4" class="text-center text-secondary py-3">No emergency contacts found.</td></tr>`;
|
|
}
|
|
$('#viewStaffDependentsList').html(dependentsHtml);
|
|
}
|
|
},
|
|
error: function() {
|
|
$('#viewStaffName').text('Error loading profile details.');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |