Rapport-Laravel/resources/views/neblogisticreport/abmapprovereject.blade.php

1077 lines
43 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
@include('layouts.shared/title-meta', ['title' => "ABM Approval/Rejection"])
@include('layouts.shared/head-css', ["mode" => $mode ?? '', "demo" => $demo ?? ''])
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
</head>
<body class="loading authentication-bg authentication-bg-pattern">
<div class="account-pages mt-3 mb-5">
<div class="container">
<div class="approval-container">
@if(isset($show_form) && $show_form)
<!-- Review Form -->
<div class="approval-header">
<h1 class="approval-title">Review Request</h1>
<p class="approval-subtitle">Please review the request details and make your decision</p>
</div>
<div id="messageContainer" style="display: none;">
<div class="approval-message" id="messageDiv">
<h4 id="messageTitle"></h4>
<p class="mb-0" id="messageText"></p>
</div>
</div>
<!-- Employee Details Section -->
<div class="details-section">
<h5 class="section-title">Employee Details</h5>
<div class="section-content">
@if(isset($record->emp_id))
<div class="detail-row">
<span class="detail-label">Emp ID of TM:</span>
<span class="detail-value">{{ $record->emp_id }}</span>
</div>
@endif
@if(isset($record->emp_name))
<div class="detail-row">
<span class="detail-label">Name of TM:</span>
<span class="detail-value">{{ $record->emp_name }}</span>
</div>
@endif
@if(isset($record->emp_phone))
<div class="detail-row">
<span class="detail-label">TM Mobile Number:</span>
<span class="detail-value">{{ $record->emp_phone }}</span>
</div>
@endif
@if(isset($record->emp_email))
<div class="detail-row">
<span class="detail-label">TM Email ID:</span>
<span class="detail-value">{{ $record->emp_email }}</span>
</div>
@endif
@if(isset($record->abm_name))
<div class="detail-row">
<span class="detail-label">ABM Name:</span>
<span class="detail-value">{{ $record->abm_name }}</span>
</div>
@endif
@if(isset($record->rbm_name))
<div class="detail-row">
<span class="detail-label">RBM Name:</span>
<span class="detail-value">{{ $record->rbm_name }}</span>
</div>
@endif
</div>
</div>
<!-- Doctor Details Section -->
<div class="details-section">
<h5 class="section-title">Doctor Details</h5>
<div class="section-content">
@if(isset($record->doctor_name))
<div class="detail-row">
<span class="detail-label">Dr Name:</span>
<span class="detail-value">{{ $record->doctor_name }}</span>
</div>
@endif
@if(isset($record->doctor_phone))
<div class="detail-row">
<span class="detail-label">Doctor Mobile Number:</span>
<span class="detail-value">{{ $record->doctor_phone }}</span>
</div>
@endif
@if(isset($record->doctor_speciality))
<div class="detail-row">
<span class="detail-label">Speciality:</span>
<span class="detail-value">{{ $record->doctor_speciality }}</span>
</div>
@endif
@if(isset($record->msl_code))
<div class="detail-row">
<span class="detail-label">MSL CODE of Dr:</span>
<span class="detail-value">{{ $record->msl_code }}</span>
</div>
@endif
@if(isset($record->type_of_nebulizer))
<div class="detail-row">
<span class="detail-label">Type of Nebulizer:</span>
<span class="detail-value">{{ $record->type_of_nebulizer }}</span>
</div>
@endif
@if(isset($record->no_of_nebulizer))
<div class="detail-row">
<span class="detail-label">No of Nebulizer:</span>
<span class="detail-value">{{ $record->no_of_nebulizer }}</span>
</div>
@endif
@if(isset($record->value_of_parcel))
<div class="detail-row">
<span class="detail-label">Value of the Parcel:</span>
<span class="detail-value">{{ $record->value_of_parcel }}</span>
</div>
@endif
@if(isset($record->team))
<div class="detail-row">
<span class="detail-label">Team:</span>
<span class="detail-value">{{ $record->team }}</span>
</div>
@endif
</div>
</div>
<!-- Drop Details Section -->
<div class="details-section">
<h5 class="section-title">Drop Details</h5>
<div class="section-content">
@if(isset($record->clinic_hospital_name))
<div class="detail-row">
<span class="detail-label">Clinic / Hospital / Home Name:</span>
<span class="detail-value">{{ $record->clinic_hospital_name }}</span>
</div>
@endif
@if(isset($record->address_building))
<div class="detail-row">
<span class="detail-label">Building Name:</span>
<span class="detail-value">{{ $record->address_building }}</span>
</div>
@endif
@if(isset($record->address_type))
<div class="detail-row">
<span class="detail-label">Address Type:</span>
<span class="detail-value">{{ $record->address_type }}</span>
</div>
@endif
@if(isset($record->address_line_1))
<div class="detail-row">
<span class="detail-label">Address line 1:</span>
<span class="detail-value">{{ $record->address_line_1 }}</span>
</div>
@endif
@if(isset($record->address_line_2))
<div class="detail-row">
<span class="detail-label">Address line 2:</span>
<span class="detail-value">{{ $record->address_line_2 }}</span>
</div>
@endif
@if(isset($record->address_state))
<div class="detail-row">
<span class="detail-label">State:</span>
<span class="detail-value">{{ $record->address_state }}</span>
</div>
@endif
@if(isset($record->address_city))
<div class="detail-row">
<span class="detail-label">City:</span>
<span class="detail-value">{{ $record->address_city }}</span>
</div>
@endif
@if(isset($record->address_pin_code))
<div class="detail-row">
<span class="detail-label">Pin Code:</span>
<span class="detail-value">{{ $record->address_pin_code }}</span>
</div>
@endif
</div>
</div>
<!-- Additional Information Section -->
<div class="details-section">
<h5 class="section-title">Additional Information</h5>
<div class="section-content">
@if(isset($record->remarks))
<div class="detail-row">
<span class="detail-label">Remarks:</span>
<span class="detail-value">{{ $record->remarks ?: 'N/A' }}</span>
</div>
@endif
@if(isset($record->paramedic_alternate_contact_number))
<div class="detail-row">
<span class="detail-label">Paramedic/Alternate Contact number:</span>
<span class="detail-value">{{ $record->paramedic_alternate_contact_number ?: 'N/A' }}</span>
</div>
@endif
@if(isset($record->status))
<div class="detail-row">
<span class="detail-label">Current Status:</span>
<span class="detail-value">
<span class="status-badge status-{{ strtolower(str_replace(' ', '-', $record->status)) }}">{{ $record->status }}</span>
</span>
</div>
@endif
@if(isset($record->created_at))
<div class="detail-row">
<span class="detail-label">Request Date:</span>
<span class="detail-value">{{ \Carbon\Carbon::parse($record->created_at)->format('d M Y, h:i A') }}</span>
</div>
@endif
</div>
</div>
<!-- Request Letter Image -->
@if(isset($record->request_letter) && !empty($record->request_letter))
<div class="request-letter-section">
<h5>Request Letter</h5>
<div class="request-letter-container">
<img src="{{ $record->request_letter }}" alt="Request Letter" class="request-letter-image" onclick="openImageModal('{{ $record->request_letter }}')" />
</div>
</div>
@endif
<!-- Action Buttons -->
@if(isset($record->status) && !empty($record->status) && $record->status != 'L1 Approved')
<div class="approval-actions">
<button type="button" class="btn-approval btn-approve" onclick="approveRequest()">
<i class="fas fa-check"></i> Approve Request
</button>
<button type="button" class="btn-approval btn-reject" onclick="showRejectionForm()">
<i class="fas fa-times"></i> Reject Request
</button>
</div>
@endif
<!-- Rejection Form (Hidden by default) -->
<div id="rejectionForm" class="rejection-form" style="display: none;">
<h5>Rejection Reason</h5>
<div class="form-group">
<textarea id="rejection_reason" class="form-control" rows="4" placeholder="Please provide a reason for rejection..." required></textarea>
</div>
<div class="form-actions">
<button type="button" class="btn-approval btn-confirm-reject" onclick="rejectRequest()">
<i class="fas fa-times"></i> Confirm Rejection
</button>
<button type="button" class="btn-approval btn-cancel" onclick="hideRejectionForm()">
<i class="fas fa-arrow-left"></i> Cancel
</button>
</div>
</div>
@else
<!-- Result Display -->
<div class="approval-header">
@if($success)
<div class="approval-icon {{ isset($action) && $action === 'reject' ? 'error-icon' : 'success-icon' }}">
<i class="fas {{ isset($action) && $action === 'reject' ? 'fa-times-circle' : 'fa-check-circle' }}"></i>
</div>
<h1 class="approval-title">
{{ isset($action) && $action === 'reject' ? 'Rejection Successful' : 'Approval Successful' }}
</h1>
<p class="approval-subtitle">
{{ isset($action) && $action === 'reject' ? 'The request has been successfully rejected' : 'The request has been successfully approved' }}
</p>
@else
<div class="approval-icon error-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<h1 class="approval-title">Operation Failed</h1>
<p class="approval-subtitle">The request could not be processed</p>
@endif
</div>
<div class="approval-message {{ $success ? 'success-message' : 'error-message' }}">
<h4>{{ $success ? 'Success!' : 'Error' }}</h4>
<p class="mb-0">{{ $message }}</p>
</div>
@if(isset($record))
<!-- Submission ID -->
<div class="submission-info">
<div class="detail-row">
<span class="detail-label">Submission ID:</span>
<span class="detail-value">{{ $submission_id }}</span>
</div>
</div>
<!-- Employee Details Section -->
<div class="details-section">
<h5 class="section-title">Employee Details</h5>
<div class="section-content">
@if(isset($record->emp_id))
<div class="detail-row">
<span class="detail-label">Emp ID of TM:</span>
<span class="detail-value">{{ $record->emp_id }}</span>
</div>
@endif
@if(isset($record->emp_name))
<div class="detail-row">
<span class="detail-label">Name of TM:</span>
<span class="detail-value">{{ $record->emp_name }}</span>
</div>
@endif
@if(isset($record->emp_phone))
<div class="detail-row">
<span class="detail-label">TM Mobile Number:</span>
<span class="detail-value">{{ $record->emp_phone }}</span>
</div>
@endif
@if(isset($record->emp_email))
<div class="detail-row">
<span class="detail-label">TM Email ID:</span>
<span class="detail-value">{{ $record->emp_email }}</span>
</div>
@endif
@if(isset($record->abm_name))
<div class="detail-row">
<span class="detail-label">ABM Name:</span>
<span class="detail-value">{{ $record->abm_name }}</span>
</div>
@endif
@if(isset($record->rbm_name))
<div class="detail-row">
<span class="detail-label">RBM Name:</span>
<span class="detail-value">{{ $record->rbm_name }}</span>
</div>
@endif
</div>
</div>
<!-- Doctor Details Section -->
<div class="details-section">
<h5 class="section-title">Doctor Details</h5>
<div class="section-content">
@if(isset($record->doctor_name))
<div class="detail-row">
<span class="detail-label">Dr Name:</span>
<span class="detail-value">{{ $record->doctor_name }}</span>
</div>
@endif
@if(isset($record->doctor_phone))
<div class="detail-row">
<span class="detail-label">Doctor Mobile Number:</span>
<span class="detail-value">{{ $record->doctor_phone }}</span>
</div>
@endif
@if(isset($record->doctor_speciality))
<div class="detail-row">
<span class="detail-label">Speciality:</span>
<span class="detail-value">{{ $record->doctor_speciality }}</span>
</div>
@endif
@if(isset($record->msl_code))
<div class="detail-row">
<span class="detail-label">MSL CODE of Dr:</span>
<span class="detail-value">{{ $record->msl_code }}</span>
</div>
@endif
@if(isset($record->type_of_nebulizer))
<div class="detail-row">
<span class="detail-label">Type of Nebulizer:</span>
<span class="detail-value">{{ $record->type_of_nebulizer }}</span>
</div>
@endif
@if(isset($record->no_of_nebulizer))
<div class="detail-row">
<span class="detail-label">No of Nebulizer:</span>
<span class="detail-value">{{ $record->no_of_nebulizer }}</span>
</div>
@endif
@if(isset($record->value_of_parcel))
<div class="detail-row">
<span class="detail-label">Value of the Parcel:</span>
<span class="detail-value">{{ $record->value_of_parcel }}</span>
</div>
@endif
@if(isset($record->team))
<div class="detail-row">
<span class="detail-label">Team:</span>
<span class="detail-value">{{ $record->team }}</span>
</div>
@endif
</div>
</div>
<!-- Drop Details Section -->
<div class="details-section">
<h5 class="section-title">Drop Details</h5>
<div class="section-content">
@if(isset($record->clinic_hospital_name))
<div class="detail-row">
<span class="detail-label">Clinic / Hospital / Home Name:</span>
<span class="detail-value">{{ $record->clinic_hospital_name }}</span>
</div>
@endif
@if(isset($record->address_building))
<div class="detail-row">
<span class="detail-label">Building Name:</span>
<span class="detail-value">{{ $record->address_building }}</span>
</div>
@endif
@if(isset($record->address_type))
<div class="detail-row">
<span class="detail-label">Address Type:</span>
<span class="detail-value">{{ $record->address_type }}</span>
</div>
@endif
@if(isset($record->address_line_1))
<div class="detail-row">
<span class="detail-label">Address line 1:</span>
<span class="detail-value">{{ $record->address_line_1 }}</span>
</div>
@endif
@if(isset($record->address_line_2))
<div class="detail-row">
<span class="detail-label">Address line 2:</span>
<span class="detail-value">{{ $record->address_line_2 }}</span>
</div>
@endif
@if(isset($record->address_state))
<div class="detail-row">
<span class="detail-label">State:</span>
<span class="detail-value">{{ $record->address_state }}</span>
</div>
@endif
@if(isset($record->address_city))
<div class="detail-row">
<span class="detail-label">City:</span>
<span class="detail-value">{{ $record->address_city }}</span>
</div>
@endif
@if(isset($record->address_pin_code))
<div class="detail-row">
<span class="detail-label">Pin Code:</span>
<span class="detail-value">{{ $record->address_pin_code }}</span>
</div>
@endif
</div>
</div>
<!-- Status and Additional Information Section -->
<div class="details-section">
<h5 class="section-title">Status & Additional Information</h5>
<div class="section-content">
@if(isset($record->remarks))
<div class="detail-row">
<span class="detail-label">Remarks:</span>
<span class="detail-value">{{ $record->remarks ?: 'N/A' }}</span>
</div>
@endif
@if(isset($record->paramedic_alternate_contact_number))
<div class="detail-row">
<span class="detail-label">Paramedic/Alternate Contact number:</span>
<span class="detail-value">{{ $record->paramedic_alternate_contact_number ?: 'N/A' }}</span>
</div>
@endif
@if(isset($previous_status))
<div class="detail-row">
<span class="detail-label">Previous Status:</span>
<span class="detail-value">
<span class="status-badge status-pending">{{ $previous_status }}</span>
</span>
</div>
@endif
@if(isset($new_status))
<div class="detail-row">
<span class="detail-label">New Status:</span>
<span class="detail-value">
<span class="status-badge {{ isset($action) && $action === 'reject' ? 'status-rejected' : 'status-approved' }}">{{ $new_status }}</span>
</span>
</div>
@endif
@if(isset($rejection_reason))
<div class="detail-row">
<span class="detail-label">Rejection Reason:</span>
<span class="detail-value">{{ $rejection_reason }}</span>
</div>
@endif
@if(isset($record->created_at))
<div class="detail-row">
<span class="detail-label">Request Date:</span>
<span class="detail-value">{{ \Carbon\Carbon::parse($record->created_at)->format('d M Y, h:i A') }}</span>
</div>
@endif
</div>
</div>
@endif
@endif
</div>
</div>
</div>
<!-- Image Modal -->
<div id="imageModal" class="image-modal" onclick="closeImageModal()">
<div class="image-modal-content" onclick="event.stopPropagation()">
<span class="image-modal-close" onclick="closeImageModal()">&times;</span>
<img id="modalImage" src="" alt="Request Letter" class="modal-image" />
</div>
</div>
<footer class="footer footer-alt">
2015 - <script>
document.write(new Date().getFullYear())
</script> &copy; Powered by <a href="https://stratawiz.com" target="_blank" class="text-white-50">Stratawiz</a>
</footer>
@include('layouts.shared/footer-script')
<script>
function showRejectionForm() {
document.getElementById('rejectionForm').style.display = 'block';
document.getElementById('rejection_reason').focus();
}
function hideRejectionForm() {
document.getElementById('rejectionForm').style.display = 'none';
document.getElementById('rejection_reason').value = '';
}
function showMessage(title, message, isSuccess) {
const messageContainer = document.getElementById('messageContainer');
const messageDiv = document.getElementById('messageDiv');
const messageTitle = document.getElementById('messageTitle');
const messageText = document.getElementById('messageText');
messageTitle.textContent = title;
messageText.textContent = message;
// Remove existing classes
messageDiv.classList.remove('success-message', 'error-message');
// Add appropriate class
if (isSuccess) {
messageDiv.classList.add('success-message');
} else {
messageDiv.classList.add('error-message');
}
messageContainer.style.display = 'block';
// Scroll to message
messageContainer.scrollIntoView({ behavior: 'smooth' });
}
function hideMessage() {
document.getElementById('messageContainer').style.display = 'none';
}
function approveRequest() {
const submissionId = '{{ $submission_id }}';
// Show loading state
const approveBtn = document.querySelector('.btn-approve');
const originalText = approveBtn.innerHTML;
approveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
approveBtn.disabled = true;
fetch('{{ url("/neblogisticreport/abmapproverejectajax") }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
body: JSON.stringify({
submission_id: submissionId,
user_id: "{{ isset($user_id) ? $user_id : '' }}",
form_id: "{{ isset($form_id) ? $form_id : '' }}",
partition: "{{ isset($partition) ? $partition : '' }}",
action: 'approve'
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showMessage('Success!', data.message, true);
// Update status display if exists
updateStatusDisplay(data.previous_status, data.new_status);
// Hide action buttons
document.querySelector('.approval-actions').style.display = 'none';
} else {
showMessage('Error', data.message, false);
}
})
.catch(error => {
console.error('Error:', error);
showMessage('Error', 'An error occurred while processing your request. Please try again.', false);
})
.finally(() => {
// Reset button state
approveBtn.innerHTML = originalText;
approveBtn.disabled = false;
});
}
function rejectRequest() {
const submissionId = '{{ $submission_id }}';
const rejectionReason = document.getElementById('rejection_reason').value.trim();
if (!rejectionReason) {
showMessage('Error', 'Please provide a reason for rejection.', false);
return;
}
// Show loading state
const rejectBtn = document.querySelector('.btn-confirm-reject');
const originalText = rejectBtn.innerHTML;
rejectBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
rejectBtn.disabled = true;
fetch('{{ url("/neblogisticreport/abmapproverejectajax") }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
body: JSON.stringify({
submission_id: submissionId,
user_id: "{{ isset($user_id) ? $user_id : '' }}",
form_id: "{{ isset($form_id) ? $form_id : '' }}",
partition: "{{ isset($partition) ? $partition : '' }}",
action: 'reject',
rejection_reason: rejectionReason
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showMessage('Success!', data.message, true);
// Update status display if exists
updateStatusDisplay(data.previous_status, data.new_status);
// Hide action buttons and rejection form
document.querySelector('.approval-actions').style.display = 'none';
document.getElementById('rejectionForm').style.display = 'none';
} else {
showMessage('Error', data.message, false);
}
})
.catch(error => {
console.error('Error:', error);
showMessage('Error', 'An error occurred while processing your request. Please try again.', false);
})
.finally(() => {
// Reset button state
rejectBtn.innerHTML = originalText;
rejectBtn.disabled = false;
});
}
function updateStatusDisplay(previousStatus, newStatus) {
// Find and update status display if it exists
const statusElements = document.querySelectorAll('.detail-row');
statusElements.forEach(element => {
const label = element.querySelector('.detail-label');
if (label && label.textContent.includes('Current Status')) {
const valueSpan = element.querySelector('.detail-value');
if (valueSpan) {
const statusBadge = valueSpan.querySelector('.status-badge');
if (statusBadge) {
statusBadge.textContent = newStatus;
statusBadge.className = 'status-badge status-' + newStatus.toLowerCase().replace(' ', '-');
}
}
}
});
}
function openImageModal(imageSrc) {
const modal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
modalImage.src = imageSrc;
modal.style.display = 'block';
document.body.style.overflow = 'hidden'; // Prevent background scrolling
}
function closeImageModal() {
const modal = document.getElementById('imageModal');
modal.style.display = 'none';
document.body.style.overflow = 'auto'; // Restore scrolling
}
// Close modal when pressing Escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeImageModal();
}
});
</script>
<style>
.approval-container {
max-width: 900px;
margin: 50px auto;
padding: 30px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.approval-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f8f9fa;
}
.approval-icon {
font-size: 4rem;
margin-bottom: 20px;
}
.success-icon {
color: #28a745;
}
.error-icon {
color: #dc3545;
}
.review-icon {
color: #007bff;
}
.approval-title {
font-size: 2rem;
font-weight: 600;
margin-bottom: 10px;
}
.approval-subtitle {
color: #6c757d;
font-size: 1.1rem;
}
.approval-message {
background: #f8f9fa;
padding: 25px;
border-radius: 8px;
margin: 25px 0;
border-left: 4px solid;
}
.success-message {
border-left-color: #28a745;
background: #d4edda;
color: #155724;
}
.error-message {
border-left-color: #dc3545;
background: #f8d7da;
color: #721c24;
}
.submission-info {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 15px 20px;
margin: 25px 0;
text-align: center;
}
.details-section {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 8px;
margin: 20px 0;
overflow: hidden;
}
.section-title {
background: #007bff;
color: #fff;
margin: 0;
padding: 15px 20px;
font-size: 1.2rem;
font-weight: 600;
border-bottom: 1px solid #dee2e6;
}
.section-content {
padding: 20px;
}
.approval-details {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 20px;
margin: 25px 0;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #f1f3f4;
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
font-weight: 600;
color: #495057;
min-width: 150px;
}
.detail-value {
color: #212529;
flex: 1;
text-align: right;
}
.request-letter-section {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 20px;
margin: 25px 0;
}
.request-letter-container {
text-align: center;
margin-top: 15px;
}
.request-letter-image {
max-width: 100%;
max-height: 500px;
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.2s ease;
}
.request-letter-image:hover {
transform: scale(1.02);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.approval-actions {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 2px solid #f8f9fa;
}
.btn-approval {
padding: 12px 30px;
font-size: 1.1rem;
border-radius: 6px;
text-decoration: none;
display: inline-block;
margin: 0 10px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-approval:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.fa-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.btn-approve {
background: #28a745;
color: #fff;
border: 1px solid #28a745;
}
.btn-approve:hover {
background: #218838;
border-color: #1e7e34;
color: #fff;
}
.btn-reject {
background: #dc3545;
color: #fff;
border: 1px solid #dc3545;
}
.btn-reject:hover {
background: #c82333;
border-color: #bd2130;
color: #fff;
}
.btn-confirm-reject {
background: #dc3545;
color: #fff;
border: 1px solid #dc3545;
}
.btn-confirm-reject:hover {
background: #c82333;
border-color: #bd2130;
color: #fff;
}
.btn-cancel {
background: #6c757d;
color: #fff;
border: 1px solid #6c757d;
}
.btn-cancel:hover {
background: #545b62;
border-color: #4e555b;
color: #fff;
}
.rejection-form {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.form-group {
margin-bottom: 20px;
}
.form-control {
width: 100%;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1rem;
resize: vertical;
}
.form-actions {
text-align: center;
margin-top: 20px;
}
.status-badge {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
}
.status-pending {
background: #fff3cd;
color: #856404;
}
.status-approved {
background: #d4edda;
color: #155724;
}
.status-rejected {
background: #f8d7da;
color: #721c24;
}
.status-l1-approved {
background: #d1ecf1;
color: #0c5460;
}
/* Image Modal Styles */
.image-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(5px);
}
.image-modal-content {
position: relative;
margin: auto;
padding: 20px;
width: 90%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
animation: modalFadeIn 0.3s ease;
}
.modal-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.image-modal-close {
position: absolute;
top: 15px;
right: 35px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 10000;
transition: color 0.3s ease;
}
.image-modal-close:hover {
color: #ff6b6b;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 768px) {
.detail-row {
flex-direction: column;
}
.detail-label {
min-width: auto;
margin-bottom: 5px;
}
.detail-value {
text-align: left;
}
.btn-approval {
display: block;
width: 100%;
margin: 10px 0;
}
.image-modal-content {
width: 95%;
height: 95%;
padding: 10px;
}
.image-modal-close {
top: 10px;
right: 20px;
font-size: 30px;
}
}
</style>
</body>
</html>