Spaces:
Running
Running
| /** | |
| * Student Fee Payment Registration - Main Page | |
| * Search for students and display outstanding fees | |
| */ | |
| require_once 'db_config.php'; | |
| $studentData = null; | |
| $outstandingFees = []; | |
| $studentId = $_GET['student_id'] ?? ''; | |
| // If student is selected, fetch their data and outstanding fees | |
| if (!empty($studentId)) { | |
| try { | |
| // Fetch student details | |
| $sql = "SELECT | |
| sr.id, | |
| sr.student_code, | |
| CONCAT(sr.last_name, ' ', sr.first_name, ' ', COALESCE(sr.other_name, '')) AS full_name, | |
| al.level_name | |
| FROM tb_student_registrations sr | |
| LEFT JOIN tb_academic_levels al ON al.id = sr.level_id | |
| WHERE sr.id = :student_id"; | |
| $stmt = $pdo->prepare($sql); | |
| $stmt->execute(['student_id' => $studentId]); | |
| $studentData = $stmt->fetch(); | |
| if ($studentData) { | |
| // Fetch outstanding fees per fee_id | |
| $sql = "SELECT | |
| ar.id AS receivable_id, | |
| ar.fee_id, | |
| asf.description AS fee_description, | |
| ar.academic_session, | |
| ar.term_of_session, | |
| ar.actual_value AS billed_amount, | |
| COALESCE(asp.total_paid_for_period, 0) AS total_paid, -- Renamed column for clarity | |
| (ar.actual_value - COALESCE(asp.total_paid_for_period, 0)) AS outstanding_amount, | |
| ar.created_on | |
| FROM | |
| tb_account_receivables ar | |
| JOIN | |
| tb_account_school_fees asf ON asf.id = ar.fee_id | |
| LEFT JOIN ( | |
| -- Subquery now calculates total payments specific to a session, term, and fee | |
| SELECT | |
| fee_id, | |
| student_id, | |
| academic_session, | |
| term_of_session, | |
| SUM(payment_to_date) AS total_paid_for_period | |
| FROM | |
| tb_account_student_payments | |
| GROUP BY | |
| fee_id, | |
| student_id, | |
| academic_session, | |
| term_of_session | |
| ) asp ON asp.fee_id = ar.fee_id | |
| AND asp.student_id = ar.student_id | |
| AND asp.academic_session = ar.academic_session | |
| AND asp.term_of_session = ar.term_of_session | |
| WHERE | |
| ar.student_id = :student_id | |
| AND ar.academic_session > 2023 | |
| -- Only show records where the calculated outstanding amount is greater than zero | |
| AND (ar.actual_value - COALESCE(asp.total_paid_for_period, 0)) > 0 | |
| ORDER BY | |
| ar.academic_session ASC, ar.term_of_session ASC, ar.created_on ASC"; | |
| $stmt = $pdo->prepare($sql); | |
| $stmt->execute(['student_id' => $studentId]); | |
| $outstandingFees = $stmt->fetchAll(); | |
| } | |
| } catch (PDOException $e) { | |
| $error = "Error fetching student data: " . $e->getMessage(); | |
| } | |
| } | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Student Fee Payment Registration</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); | |
| padding: 30px; | |
| } | |
| h1 { | |
| color: #333; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| font-size: 28px; | |
| } | |
| .search-section { | |
| margin-bottom: 30px; | |
| padding: 20px; | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| } | |
| .search-box { | |
| position: relative; | |
| } | |
| .search-box label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: #555; | |
| } | |
| .search-box input { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 2px solid #ddd; | |
| border-radius: 6px; | |
| font-size: 16px; | |
| transition: border-color 0.3s; | |
| } | |
| .search-box input:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| } | |
| .search-results { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: white; | |
| border: 2px solid #667eea; | |
| border-top: none; | |
| border-radius: 0 0 6px 6px; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| display: none; | |
| z-index: 1000; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .search-results.active { | |
| display: block; | |
| } | |
| .search-result-item { | |
| padding: 12px 15px; | |
| cursor: pointer; | |
| border-bottom: 1px solid #eee; | |
| transition: background-color 0.2s; | |
| } | |
| .search-result-item:hover { | |
| background-color: #f0f0f0; | |
| } | |
| .search-result-item:last-child { | |
| border-bottom: none; | |
| } | |
| .student-code { | |
| color: #667eea; | |
| font-weight: 600; | |
| margin-right: 10px; | |
| } | |
| .student-details { | |
| margin-bottom: 30px; | |
| padding: 20px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border-radius: 8px; | |
| } | |
| .student-details h2 { | |
| margin-bottom: 10px; | |
| font-size: 24px; | |
| } | |
| .student-details p { | |
| font-size: 16px; | |
| margin-bottom: 5px; | |
| } | |
| .fees-section { | |
| margin-bottom: 30px; | |
| } | |
| .fees-section h3 { | |
| margin-bottom: 15px; | |
| color: #333; | |
| font-size: 20px; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-bottom: 20px; | |
| } | |
| th, | |
| td { | |
| padding: 12px; | |
| text-align: left; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| th { | |
| background-color: #667eea; | |
| color: white; | |
| font-weight: 600; | |
| } | |
| tr:hover { | |
| background-color: #f8f9fa; | |
| } | |
| .amount { | |
| text-align: right; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .btn { | |
| padding: 12px 30px; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| .btn-primary:disabled { | |
| background: #ccc; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 2000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: white; | |
| padding: 30px; | |
| border-radius: 12px; | |
| max-width: 600px; | |
| width: 90%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| } | |
| .modal-header { | |
| margin-bottom: 20px; | |
| } | |
| .modal-header h2 { | |
| color: #333; | |
| font-size: 22px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: #555; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 10px 12px; | |
| border: 2px solid #ddd; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| font-family: inherit; | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| } | |
| .form-group input[readonly] { | |
| background-color: #f0f0f0; | |
| cursor: not-allowed; | |
| } | |
| .modal-actions { | |
| display: flex; | |
| gap: 10px; | |
| justify-content: flex-end; | |
| margin-top: 25px; | |
| } | |
| .btn-secondary { | |
| background: #6c757d; | |
| color: white; | |
| } | |
| .btn-secondary:hover { | |
| background: #5a6268; | |
| } | |
| .error { | |
| color: #dc3545; | |
| font-size: 14px; | |
| margin-top: 5px; | |
| } | |
| .success { | |
| color: #28a745; | |
| font-size: 14px; | |
| margin-top: 5px; | |
| } | |
| .alert { | |
| padding: 15px; | |
| border-radius: 6px; | |
| margin-bottom: 20px; | |
| } | |
| .alert-error { | |
| background-color: #f8d7da; | |
| color: #721c24; | |
| border: 1px solid #f5c6cb; | |
| } | |
| .total-row { | |
| font-weight: bold; | |
| background-color: #f0f0f0; | |
| } | |
| .loading { | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| border: 3px solid #f3f3f3; | |
| border-top: 3px solid #667eea; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-left: 10px; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Student Fee Payment Registration</h1> | |
| <?php if (isset($error)): ?> | |
| <div class="alert alert-error"><?php echo htmlspecialchars($error); ?></div> | |
| <?php endif; ?> | |
| <!-- Student Search Section --> | |
| <div class="search-section"> | |
| <div class="search-box"> | |
| <label for="studentSearch">Search Student (by name or student code)</label> | |
| <input type="text" id="studentSearch" placeholder="Type to search..." autocomplete="off"> | |
| <div class="search-results" id="searchResults"></div> | |
| </div> | |
| </div> | |
| <?php if ($studentData): ?> | |
| <!-- Student Details --> | |
| <div class="student-details"> | |
| <h2><?php echo htmlspecialchars($studentData['full_name']); ?></h2> | |
| <p><strong>Student Code:</strong> <?php echo htmlspecialchars($studentData['student_code']); ?></p> | |
| <p><strong>Academic Level:</strong> <?php echo htmlspecialchars($studentData['level_name'] ?? 'N/A'); ?></p> | |
| </div> | |
| <?php if (count($outstandingFees) > 0): ?> | |
| <!-- Outstanding Fees Section --> | |
| <div class="fees-section"> | |
| <h3>Outstanding Fees</h3> | |
| <form id="paymentForm"> | |
| <input type="hidden" name="student_id" value="<?php echo htmlspecialchars($studentData['id']); ?>"> | |
| <input type="hidden" name="student_code" | |
| value="<?php echo htmlspecialchars($studentData['student_code']); ?>"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th width="50">Select</th> | |
| <th>Fee Description</th> | |
| <th width="100">Session</th> | |
| <th width="80">Term</th> | |
| <th width="120" class="amount">Billed</th> | |
| <th width="120" class="amount">Paid</th> | |
| <th width="120" class="amount">Outstanding</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <?php | |
| $totalOutstanding = 0; | |
| foreach ($outstandingFees as $fee): | |
| $totalOutstanding += $fee['outstanding_amount']; | |
| ?> | |
| <tr> | |
| <td> | |
| <input type="checkbox" class="fee-checkbox" name="selected_fees[]" value="<?php echo htmlspecialchars(json_encode([ | |
| 'receivable_id' => $fee['receivable_id'], | |
| 'fee_id' => $fee['fee_id'], | |
| 'academic_session' => $fee['academic_session'], | |
| 'term_of_session' => $fee['term_of_session'], | |
| 'outstanding_amount' => $fee['outstanding_amount'] | |
| ])); ?>" checked> | |
| </td> | |
| <td><?php echo htmlspecialchars($fee['fee_description']); ?></td> | |
| <td><?php echo htmlspecialchars($fee['academic_session']); ?></td> | |
| <td><?php echo htmlspecialchars($fee['term_of_session']); ?></td> | |
| <td class="amount">₦<?php echo number_format($fee['billed_amount'], 2); ?></td> | |
| <td class="amount">₦<?php echo number_format($fee['total_paid'], 2); ?></td> | |
| <td class="amount">₦<?php echo number_format($fee['outstanding_amount'], 2); ?></td> | |
| </tr> | |
| <?php endforeach; ?> | |
| <tr class="total-row"> | |
| <td colspan="6" style="text-align: right;">Total Outstanding:</td> | |
| <td class="amount">₦<?php echo number_format($totalOutstanding, 2); ?></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <button type="button" class="btn btn-primary" id="processPaymentBtn">Process Payment</button> | |
| </form> | |
| </div> | |
| <?php else: ?> | |
| <div class="alert alert-error">No outstanding fees found for this student.</div> | |
| <?php endif; ?> | |
| <?php endif; ?> | |
| </div> | |
| <!-- Payment Modal --> | |
| <div class="modal" id="paymentModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Process Payment</h2> | |
| </div> | |
| <form id="paymentDetailsForm" method="POST" action="process_payment.php"> | |
| <input type="hidden" name="student_id" id="modal_student_id"> | |
| <input type="hidden" name="student_code" id="modal_student_code"> | |
| <input type="hidden" name="selected_fees" id="modal_selected_fees"> | |
| <input type="hidden" name="payment_date" id="modal_payment_date"> | |
| <input type="hidden" name="bank_description" id="modal_bank_description"> | |
| <div class="form-group"> | |
| <label for="teller_number">Teller Number *</label> | |
| <input type="text" id="teller_number" name="teller_number" required> | |
| <span class="loading" id="tellerLoading" style="display:none;"></span> | |
| <div class="error" id="tellerError"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="bank_narration">Bank Narration</label> | |
| <textarea id="bank_narration" name="bank_narration" rows="3" readonly></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="unreconciled_amount">Unreconciled Amount on Teller</label> | |
| <input type="text" id="unreconciled_amount" readonly> | |
| </div> | |
| <div class="form-group"> | |
| <label for="amount_to_use">Amount to Use for Fees *</label> | |
| <input type="number" id="amount_to_use" name="amount_to_use" step="0.01" min="0" required> | |
| <div class="error" id="amountError"></div> | |
| </div> | |
| <div class="modal-actions"> | |
| <button type="button" class="btn btn-secondary" id="cancelBtn">Cancel</button> | |
| <button type="submit" class="btn btn-primary" id="proceedBtn" disabled>OK PROCEED!</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Student search functionality | |
| const searchInput = document.getElementById('studentSearch'); | |
| const searchResults = document.getElementById('searchResults'); | |
| let searchTimeout; | |
| searchInput.addEventListener('input', function () { | |
| clearTimeout(searchTimeout); | |
| const searchTerm = this.value.trim(); | |
| if (searchTerm.length < 2) { | |
| searchResults.classList.remove('active'); | |
| searchResults.innerHTML = ''; | |
| return; | |
| } | |
| searchTimeout = setTimeout(() => { | |
| fetch(`ajax_handlers.php?action=search_students&search=${encodeURIComponent(searchTerm)}`) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.error) { | |
| searchResults.innerHTML = `<div class="search-result-item">${data.error}</div>`; | |
| } else if (data.length === 0) { | |
| searchResults.innerHTML = '<div class="search-result-item">No students found</div>'; | |
| } else { | |
| searchResults.innerHTML = data.map(student => | |
| `<div class="search-result-item" data-id="${student.id}"> | |
| <span class="student-code">${student.student_code}</span> | |
| <span>${student.full_name}</span> | |
| </div>` | |
| ).join(''); | |
| // Add click handlers | |
| document.querySelectorAll('.search-result-item').forEach(item => { | |
| item.addEventListener('click', function () { | |
| const studentId = this.dataset.id; | |
| window.location.href = `?student_id=${studentId}`; | |
| }); | |
| }); | |
| } | |
| searchResults.classList.add('active'); | |
| }) | |
| .catch(error => { | |
| console.error('Search error:', error); | |
| searchResults.innerHTML = '<div class="search-result-item">Error searching students</div>'; | |
| searchResults.classList.add('active'); | |
| }); | |
| }, 300); | |
| }); | |
| // Close search results when clicking outside | |
| document.addEventListener('click', function (e) { | |
| if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) { | |
| searchResults.classList.remove('active'); | |
| } | |
| }); | |
| // Payment modal functionality | |
| const modal = document.getElementById('paymentModal'); | |
| const processPaymentBtn = document.getElementById('processPaymentBtn'); | |
| const cancelBtn = document.getElementById('cancelBtn'); | |
| const tellerInput = document.getElementById('teller_number'); | |
| const tellerLoading = document.getElementById('tellerLoading'); | |
| const tellerError = document.getElementById('tellerError'); | |
| const amountInput = document.getElementById('amount_to_use'); | |
| const amountError = document.getElementById('amountError'); | |
| const proceedBtn = document.getElementById('proceedBtn'); | |
| let unreconciledAmount = 0; | |
| processPaymentBtn?.addEventListener('click', function () { | |
| const checkedFees = document.querySelectorAll('.fee-checkbox:checked'); | |
| if (checkedFees.length === 0) { | |
| alert('Please select at least one fee to process payment.'); | |
| return; | |
| } | |
| // Collect selected fees | |
| const selectedFees = Array.from(checkedFees).map(cb => JSON.parse(cb.value)); | |
| // Populate modal | |
| document.getElementById('modal_student_id').value = document.querySelector('input[name="student_id"]').value; | |
| document.getElementById('modal_student_code').value = document.querySelector('input[name="student_code"]').value; | |
| document.getElementById('modal_selected_fees').value = JSON.stringify(selectedFees); | |
| // Reset form | |
| document.getElementById('paymentDetailsForm').reset(); | |
| tellerError.textContent = ''; | |
| amountError.textContent = ''; | |
| proceedBtn.disabled = true; | |
| unreconciledAmount = 0; | |
| modal.classList.add('active'); | |
| }); | |
| cancelBtn.addEventListener('click', function () { | |
| modal.classList.remove('active'); | |
| }); | |
| // Teller lookup on blur | |
| tellerInput.addEventListener('blur', function () { | |
| const tellerNumber = this.value.trim(); | |
| if (!tellerNumber) { | |
| return; | |
| } | |
| tellerLoading.style.display = 'inline-block'; | |
| tellerError.textContent = ''; | |
| fetch(`ajax_handlers.php?action=lookup_teller&teller_number=${encodeURIComponent(tellerNumber)}`) | |
| .then(response => response.json()) | |
| .then(data => { | |
| tellerLoading.style.display = 'none'; | |
| if (data.error) { | |
| tellerError.textContent = data.error; | |
| document.getElementById('bank_narration').value = ''; | |
| document.getElementById('unreconciled_amount').value = ''; | |
| unreconciledAmount = 0; | |
| proceedBtn.disabled = true; | |
| } else { | |
| document.getElementById('bank_narration').value = data.teller_name; | |
| document.getElementById('unreconciled_amount').value = '₦' + parseFloat(data.unreconciled_amount).toFixed(2); | |
| document.getElementById('modal_payment_date').value = data.payment_date; | |
| document.getElementById('modal_bank_description').value = data.description; | |
| unreconciledAmount = parseFloat(data.unreconciled_amount); | |
| // Enable proceed button if amount is valid | |
| validateAmount(); | |
| } | |
| }) | |
| .catch(error => { | |
| tellerLoading.style.display = 'none'; | |
| tellerError.textContent = 'Error looking up teller number'; | |
| console.error('Teller lookup error:', error); | |
| }); | |
| }); | |
| // Amount validation | |
| amountInput.addEventListener('input', validateAmount); | |
| function validateAmount() { | |
| const amount = parseFloat(amountInput.value); | |
| if (isNaN(amount) || amount <= 0) { | |
| amountError.textContent = 'Amount must be greater than zero'; | |
| proceedBtn.disabled = true; | |
| return; | |
| } | |
| if (unreconciledAmount === 0) { | |
| amountError.textContent = 'Please enter a valid teller number first'; | |
| proceedBtn.disabled = true; | |
| return; | |
| } | |
| if (amount > unreconciledAmount) { | |
| amountError.textContent = `Amount cannot exceed unreconciled amount (₦${unreconciledAmount.toFixed(2)})`; | |
| proceedBtn.disabled = true; | |
| return; | |
| } | |
| amountError.textContent = ''; | |
| proceedBtn.disabled = false; | |
| } | |
| </script> | |
| </body> | |
| </html> |