<?php
require_once './includes/session_init.php';
require_once './auth/middleware.php';

$title = 'My Loan Details';
$subTitle = 'View your loan account information';

// Check if user is logged in as a member
if (!isset($_SESSION['member_id'])) {
    header("Location: login.php");
    exit;
}

$memberId = $_SESSION['member_id'];

try {
    // Get member details
    $memberStmt = $pdo->prepare("
        SELECT id, first_name, middle_name, last_name, member_number 
        FROM members 
        WHERE id = ?
    ");
    $memberStmt->execute([$memberId]);
    $member = $memberStmt->fetch(PDO::FETCH_ASSOC);

    // Get all active loans for this member with account type details
    $loansStmt = $pdo->prepare("
        SELECT 
            l.id, 
            l.loan_number, 
            l.disbursement_amount, 
            l.repayment_amount, 
            l.recommended_period as loan_term_months,
            DATE_FORMAT(l.disbursement_date, '%Y-%m-%d') as disbursement_date,
            
            at.type_code,
            at.description as account_description,
            at.account_name,
            at.account_type,
            at.interest_rate as account_interest_rate
        FROM loans l
        JOIN account_types at ON l.account_type_id = at.id
        WHERE l.member_id = ? 
        ORDER BY l.disbursement_date DESC
    ");
    $loansStmt->execute([$memberId]);
    $loans = $loansStmt->fetchAll(PDO::FETCH_ASSOC);

    // Get schedule for each loan
    foreach ($loans as &$loan) {
        $scheduleStmt = $pdo->prepare("
            SELECT 
                id as installment_number,
                DATE_FORMAT(due_date, '%Y-%m-%d') as due_date,
                principal_amount,
                interest_calculated,
                penalty_amount,
                calculated_total_due,
                principal_paid,
                interest_paid,
                penalty_paid,
                total_paid,
                status,
                DATEDIFF(CURDATE(), due_date) as days_past_due
            FROM loan_schedule
            WHERE loan_id = ?
            ORDER BY due_date
        ");
        $scheduleStmt->execute([$loan['id']]);
        $loan['schedule'] = $scheduleStmt->fetchAll(PDO::FETCH_ASSOC);

        // Calculate totals
        $loan['totals'] = [
            'principal' => 0,
            'interest' => 0,
            'penalty' => 0,
            'due' => 0,
            'paid' => 0,
            'outstanding' => 0
        ];

        foreach ($loan['schedule'] as $installment) {
            $loan['totals']['principal'] += $installment['principal_amount'];
            $loan['totals']['interest'] += $installment['interest_calculated'];
            $loan['totals']['penalty'] += $installment['penalty_amount'];
            $loan['totals']['due'] += $installment['calculated_total_due'];
            $loan['totals']['paid'] += $installment['total_paid'];
            $loan['totals']['outstanding'] += ($installment['calculated_total_due'] - $installment['total_paid']);
        }
    }
    unset($loan); // Break the reference

} catch (PDOException $e) {
    echo "Error: " . $e->getMessage();
    exit;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --success-color: #4cc9f0;
            --danger-color: #f72585;
            --warning-color: #f8961e;
            --info-color: #4895ef;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --border-radius: 0.375rem;
            --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            color: #495057;
            background-color: #f8fafc;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        h2 {
            color: var(--dark-color);
            margin-bottom: 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.75rem;
        }

        h2 i {
            color: var(--primary-color);
        }

        /* Member Information */
        .member-info {
            background: white;
            border-radius: var(--border-radius);
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: var(--box-shadow);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            border-left: 4px solid var(--primary-color);
            background: linear-gradient(to right, #ffffff, #f8f9fa);
        }

        .member-details h3 {
            margin: 0;
            color: var(--dark-color);
            font-size: 1.4rem;
            font-weight: 600;
        }

        .member-details p {
            margin: 0.5rem 0 0;
            color: #6c757d;
            font-size: 0.95rem;
        }

        .member-stats {
            display: flex;
            gap: 1rem;
        }

        .stat-box {
            background: white;
            padding: 1rem 1.5rem;
            border-radius: var(--border-radius);
            text-align: center;
            min-width: 120px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .stat-value {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--primary-color);
            line-height: 1;
        }

        .stat-label {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 500;
        }

        /* Loan Cards */
        .loan-card {
            background: white;
            border-radius: var(--border-radius);
            margin-bottom: 2rem;
            box-shadow: var(--box-shadow);
            overflow: hidden;
            transition: var(--transition);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .loan-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
        }

        .loan-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .loan-title {
            font-weight: 600;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        /* Account Details */
        .account-details {
            background: #f8f9fa;
            padding: 1.5rem;
            border-bottom: 1px solid #e9ecef;
        }

        .account-details h4 {
            margin-top: 0;
            margin-bottom: 1.25rem;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .account-details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 1.25rem;
        }

        .account-detail-item {
            background: white;
            padding: 1rem;
            border-radius: var(--border-radius);
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.03);
        }

        .account-detail-label {
            font-weight: 600;
            color: var(--primary-color);
            font-size: 0.8rem;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
            letter-spacing: 0.5px;
        }

        .account-detail-value {
            font-size: 1rem;
            color: var(--dark-color);
            font-weight: 500;
        }

        /* Loan Summary */
        .loan-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
            padding: 1.5rem;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }

        .summary-item {
            background: white;
            padding: 1.25rem;
            border-radius: var(--border-radius);
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.03);
        }

        .summary-label {
            font-size: 0.85rem;
            color: #6c757d;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .summary-value {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--dark-color);
        }

        /* Table Styles */
        .scrollable-table {
            overflow-x: auto;
            padding: 0 1rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
            font-size: 0.9rem;
        }

        th, td {
            padding: 0.75rem 1rem;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }

        th {
            background-color: var(--primary-color);
            color: white;
            font-weight: 600;
            position: sticky;
            top: 0;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
        }

        tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        tr:hover {
            background-color: #f1f3ff;
        }

        .number {
            text-align: right;
            font-family: 'Roboto Mono', monospace;
        }

        /* Status Badges */
        .status-badge {
            display: inline-block;
            padding: 0.35rem 0.75rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-paid {
            background-color: rgba(76, 201, 240, 0.1);
            color: var(--success-color);
        }

        .status-overdue {
            background-color: rgba(247, 37, 133, 0.1);
            color: var(--danger-color);
        }

        .status-pending {
            background-color: rgba(248, 150, 30, 0.1);
            color: var(--warning-color);
        }

        /* No Loans Message */
        .no-loans {
            text-align: center;
            padding: 3rem 2rem;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            max-width: 600px;
            margin: 0 auto;
        }

        .no-loans i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            opacity: 0.8;
        }

        .no-loans h3 {
            color: var(--dark-color);
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .no-loans p {
            color: #6c757d;
            max-width: 500px;
            margin: 0 auto 1.5rem;
            font-size: 1rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.625rem 1.25rem;
            border-radius: var(--border-radius);
            font-weight: 500;
            text-decoration: none;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            gap: 0.5rem;
            font-size: 0.9rem;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
        }

        .btn-outline:hover {
            background-color: rgba(67, 97, 238, 0.1);
        }

        /* Days Past Due Badge */
        .days-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            background-color: var(--danger-color);
            color: white;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .account-details-grid {
                grid-template-columns: 1fr;
            }
            
            .loan-summary {
                grid-template-columns: 1fr 1fr;
            }
            
            .member-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 1.5rem;
            }
            
            .member-stats {
                width: 100%;
                justify-content: space-between;
            }
            
            .stat-box {
                flex: 1;
            }

            .loan-header {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 576px) {
            .loan-summary {
                grid-template-columns: 1fr;
            }
        }

        /* Print Styles */
        @media print {
            body {
                background: none;
                font-size: 12pt;
                padding: 0;
            }
            
            .container {
                padding: 0;
                max-width: 100%;
            }
            
            .loan-card {
                box-shadow: none;
                page-break-inside: avoid;
                margin-bottom: 20pt;
                border: 1px solid #ddd;
            }
            
            .scrollable-table {
                overflow-x: visible;
            }

            .btn {
                display: none;
            }
        }
        
        /* Animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .loan-card {
            animation: fadeIn 0.5s ease-out forwards;
        }
        
        /* Delay animations for each card */
        .loan-card:nth-child(1) { animation-delay: 0.1s; }
        .loan-card:nth-child(2) { animation-delay: 0.2s; }
        .loan-card:nth-child(3) { animation-delay: 0.3s; }

        /* Progress Bar */
        .progress-container {
            width: 100%;
            height: 8px;
            background-color: #e9ecef;
            border-radius: 4px;
            margin-top: 0.5rem;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, var(--success-color), var(--primary-color));
            border-radius: 4px;
            transition: width 0.6s ease;
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono&display=swap" rel="stylesheet">
</head>
<body>
<?php include './partials/layouts/layoutTop.php'; ?>

<div class="container">
    <h2><i class="fas fa-file-invoice-dollar"></i> My Loan Account Details</h2>
    
    <!-- Member Information -->
    <div class="member-info">
        <div class="member-details">
            <h3><?= htmlspecialchars($member['first_name'] . ' ' . htmlspecialchars($member['middle_name'] ?? '') . ' ' . htmlspecialchars($member['last_name'])) ?></h3>
            <p>Member #: <?= htmlspecialchars($member['member_number']) ?></p>
            
            <!-- Progress Bar -->
            <?php if (!empty($loans)): ?>
                <?php 
                    $totalLoans = count($loans);
                    $paidLoans = count(array_filter($loans, function($loan) {
                        return $loan['totals']['outstanding'] <= 0;
                    }));
                    $progressPercent = $totalLoans > 0 ? ($paidLoans / $totalLoans) * 100 : 0;
                ?>
                <div style="margin-top: 1rem; width: 100%; max-width: 300px;">
                    <div style="display: flex; justify-content: space-between; font-size: 0.85rem;">
                        <span>Loan Performance</span>
                        <span><?= round($progressPercent) ?>% Complete</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: <?= $progressPercent ?>%"></div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
        <div class="member-stats">
            <div class="stat-box">
                <div class="stat-value"><?= count($loans) ?></div>
                <div class="stat-label">Active Loans</div>
            </div>
            <div class="stat-box">
                <div class="stat-value"><?= count(array_filter($loans, function($loan) { 
                    return $loan['totals']['outstanding'] > 0; 
                })) ?></div>
                <div class="stat-label">With Balance</div>
            </div>
            <div class="stat-box">
                <div class="stat-value"><?= count(array_filter($loans, function($loan) {
                    foreach ($loan['schedule'] as $installment) {
                        if ($installment['status'] !== 'Paid' && $installment['due_date'] < date('Y-m-d')) {
                            return true;
                        }
                    }
                    return false;
                })) ?></div>
                <div class="stat-label">Overdue</div>
            </div>
        </div>
    </div>
    
    <?php if (empty($loans)): ?>
        <div class="no-loans">
            <i class="fas fa-info-circle"></i>
            <h3>No Active Loans Found</h3>
            <p>You currently don't have any active loans. Visit the loans section to apply for a new loan.</p>
            <a href="apply_loan.php" class="btn btn-primary">
                <i class="fas fa-plus"></i> Apply for a Loan
            </a>
        </div>
    <?php else: ?>
        <?php foreach ($loans as $loan): ?>
            <div class="loan-card">
                <div class="loan-header">
                    <div class="loan-title">
                        <i class="fas fa-hand-holding-usd"></i> Loan #<?= htmlspecialchars($loan['loan_number']) ?>
                    </div>
                    <div>
                        <i class="far fa-calendar-alt"></i> Disbursed: <?= htmlspecialchars($loan['disbursement_date']) ?>
                    </div>
                </div>
                
                <!-- Account Type Details -->
                <div class="account-details">
                    <h4><i class="fas fa-landmark"></i> Account Information</h4>
                    <div class="account-details-grid">
                        <div class="account-detail-item">
                            <div class="account-detail-label">Account Type</div>
                            <div class="account-detail-value"><?= htmlspecialchars($loan['account_type']) ?></div>
                        </div>
                        <div class="account-detail-item">
                            <div class="account-detail-label">Account Name</div>
                            <div class="account-detail-value"><?= htmlspecialchars($loan['account_name']) ?></div>
                        </div>
                        <div class="account-detail-item">
                            <div class="account-detail-label">Type Code</div>
                            <div class="account-detail-value"><?= htmlspecialchars($loan['type_code']) ?></div>
                        </div>
                        <div class="account-detail-item">
                            <div class="account-detail-label">Standard Rate</div>
                            <div class="account-detail-value"><?= htmlspecialchars($loan['account_interest_rate']) ?>%</div>
                        </div>
                        <div class="account-detail-item">
                            <div class="account-detail-label">Your Rate</div>
                            <div class="account-detail-value"><?= htmlspecialchars($loan['interest_rate']) ?>%</div>
                        </div>
                        <div class="account-detail-item">
                            <div class="account-detail-label">Loan Term</div>
                            <div class="account-detail-value"><?= htmlspecialchars($loan['loan_term_months']) ?> months</div>
                        </div>
                    </div>
                </div>
                
                <div class="loan-summary">
                    <div class="summary-item">
                        <div class="summary-label">Amount Advanced</div>
                        <div class="summary-value">KES <?= number_format($loan['disbursement_amount'], 2) ?></div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">Total Repayment</div>
                        <div class="summary-value">KES <?= number_format($loan['repayment_amount'], 2) ?></div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">Amount Paid</div>
                        <div class="summary-value">KES <?= number_format($loan['totals']['paid'], 2) ?></div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">Outstanding Balance</div>
                        <div class="summary-value" style="color: <?= $loan['totals']['outstanding'] > 0 ? 'var(--danger-color)' : 'var(--success-color)' ?>">
                            KES <?= number_format($loan['totals']['outstanding'], 2) ?>
                        </div>
                        <?php if ($loan['totals']['outstanding'] > 0): ?>
                            <div class="progress-container">
                                <div class="progress-bar" style="width: <?= ($loan['totals']['paid'] / $loan['repayment_amount']) * 100 ?>%"></div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
                
                <div class="scrollable-table">
                    <table>
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Due Date</th>
                                <th>Principal</th>
                                <th>Interest</th>
                                <th>Penalty</th>
                                <th>Total Due</th>
                                <th>Amount Paid</th>
                                <th>Balance</th>
                                <th>Status</th>
                                <th>Days</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($loan['schedule'] as $installment): ?>
                                <?php 
                                    $balance = $installment['calculated_total_due'] - $installment['total_paid'];
                                    $statusClass = '';
                                    $statusText = '';
                                    
                                    if ($installment['status'] === 'Paid') {
                                        $statusClass = 'status-paid';
                                        $statusText = 'Paid';
                                    } elseif ($installment['due_date'] < date('Y-m-d')) {
                                        $statusClass = 'status-overdue';
                                        $statusText = 'Overdue';
                                    } else {
                                        $statusClass = 'status-pending';
                                        $statusText = 'Pending';
                                    }
                                ?>
                                <tr>
                                    <td><?= $installment['installment_number'] ?></td>
                                    <td><?= $installment['due_date'] ?></td>
                                    <td class="number"><?= number_format($installment['principal_amount'], 2) ?></td>
                                    <td class="number"><?= number_format($installment['interest_calculated'], 2) ?></td>
                                    <td class="number"><?= number_format($installment['penalty_amount'], 2) ?></td>
                                    <td class="number"><?= number_format($installment['calculated_total_due'], 2) ?></td>
                                    <td class="number"><?= number_format($installment['total_paid'], 2) ?></td>
                                    <td class="number" style="color: <?= $balance > 0 ? 'var(--danger-color)' : 'var(--success-color)' ?>">
                                        <?= number_format($balance, 2) ?>
                                    </td>
                                    <td><span class="status-badge <?= $statusClass ?>"><?= $statusText ?></span></td>
                                    <td>
                                        <?php if ($installment['days_past_due'] > 0 && $statusText !== 'Paid'): ?>
                                            <span class="days-badge"><?= $installment['days_past_due'] ?>d</span>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                            <!-- Totals Row -->
                            <tr style="font-weight: bold; background-color: #f8f9fa;">
                                <td colspan="2">Totals</td>
                                <td class="number"><?= number_format($loan['totals']['principal'], 2) ?></td>
                                <td class="number"><?= number_format($loan['totals']['interest'], 2) ?></td>
                                <td class="number"><?= number_format($loan['totals']['penalty'], 2) ?></td>
                                <td class="number"><?= number_format($loan['totals']['due'], 2) ?></td>
                                <td class="number"><?= number_format($loan['totals']['paid'], 2) ?></td>
                                <td class="number" style="color: <?= $loan['totals']['outstanding'] > 0 ? 'var(--danger-color)' : 'var(--success-color)' ?>">
                                    <?= number_format($loan['totals']['outstanding'], 2) ?>
                                </td>
                                <td colspan="2"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div style="padding: 1rem 1.5rem; text-align: right; border-top: 1px solid #e9ecef; display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <?php 
                            $overdueInstallments = array_filter($loan['schedule'], function($i) {
                                return $i['due_date'] < date('Y-m-d') && $i['status'] !== 'Paid';
                            });
                            if (count($overdueInstallments) > 0): 
                        ?>
                            <span style="color: var(--danger-color); font-weight: 500; font-size: 0.9rem;">
                                <i class="fas fa-exclamation-triangle"></i> <?= count($overdueInstallments) ?> overdue installments
                            </span>
                        <?php endif; ?>
                    </div>
                    <div>
                        <button class="btn btn-outline" onclick="window.print()" style="margin-right: 0.5rem;">
                            <i class="fas fa-print"></i> Print
                        </button>
                        <?php if ($loan['totals']['outstanding'] > 0): ?>
                            <button class="btn btn-primary">
                                <i class="fas fa-money-bill-wave"></i> Make Payment
                            </button>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

<?php include './partials/layouts/layoutBottom.php'; ?>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add click event to loan headers to toggle schedule visibility
        const loanHeaders = document.querySelectorAll('.loan-header');
        loanHeaders.forEach(header => {
            const card = header.closest('.loan-card');
            const schedule = card.querySelector('.scrollable-table');
            const toggleIcon = document.createElement('i');
            toggleIcon.className = 'fas fa-chevron-down';
            toggleIcon.style.marginLeft = 'auto';
            toggleIcon.style.transition = 'transform 0.3s ease';
            
            header.style.cursor = 'pointer';
            header.style.display = 'flex';
            header.style.alignItems = 'center';
            header.appendChild(toggleIcon);
            
            header.addEventListener('click', function() {
                if (schedule.style.display === 'none') {
                    schedule.style.display = 'block';
                    toggleIcon.style.transform = 'rotate(0deg)';
                } else {
                    schedule.style.display = 'none';
                    toggleIcon.style.transform = 'rotate(-90deg)';
                }
            });
        });

        // Highlight overdue rows
        document.querySelectorAll('.status-overdue').forEach(item => {
            const row = item.closest('tr');
            row.style.backgroundColor = 'rgba(247, 37, 133, 0.05)';
            row.style.borderLeft = '3px solid var(--danger-color)';
        });
    });
</script>
</body>
</html>