<?php
session_start();
include('../include/config.php');

// Check login
if (!isset($_SESSION['studentid'])) {
    header("Location: ../index.php");
    exit();
}

$intake = $_SESSION['intake'];
$program = $_SESSION['program'];
$studentid = $_SESSION['studentid'];

// ------------------ FETCH DATA ------------------

// Payments
$payments = [];
$payment_query = mysqli_query($conn, "SELECT * FROM payments WHERE studentid = '$studentid'");
if ($payment_query) {
    while ($payment_row = mysqli_fetch_assoc($payment_query)) {
        $payments[] = $payment_row;
    }
}

// Balances
$balances = [];
$balance_query = mysqli_query($conn, "SELECT * FROM balances WHERE intake = '$intake' AND program = '$program'");
if ($balance_query) {
    while ($balance_row = mysqli_fetch_assoc($balance_query)) {
        $balances[] = $balance_row;
    }
}

// Notifications
$notifications = [];
$notif_query = mysqli_query($conn, "SELECT * FROM notifications  ORDER BY date DESC LIMIT 20");
if ($notif_query) {
    while ($notif_row = mysqli_fetch_assoc($notif_query)) {
        $notifications[] = $notif_row;
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notifications & Financial Alerts</title>

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">

<style>
    body {
        background-color: #f8f9fa;
        font-family: 'Source Sans Pro', sans-serif;
    }
    .accordion-buttons-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 20px;
    }
    .accordion-button-horizontal {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-radius: 8px;
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        min-width: 200px;
        flex: 1;
    }
    .accordion-button-horizontal:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .accordion-button-horizontal.active {
        box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
    }
    .accordion-button-content {
        display: flex;
        align-items: center;
        flex-grow: 1;
    }
    .accordion-button-count {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        font-size: 0.9rem;
    }
    .accordion-button-icon {
        margin-right: 10px;
        font-size: 1.2rem;
    }
    .accordion-content {
        display: none;
        margin-bottom: 20px;
        animation: fadeIn 0.3s ease;
    }
    .accordion-content.active {
        display: block;
    }
    .alert {
        border-left: 4px solid;
        padding: 10px 15px;
        margin-bottom: 10px;
        border-radius: 4px;
    }
    .alert-danger { border-left-color: var(--primary); background-color: #f8d7da; }
    .alert-success { border-left-color: #28a745; background-color: #d4edda; }
    .alert-info { border-left-color: #0d6efd; background-color: #d1ecf1; }
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Colors for buttons */
    .btn-messages { background-color: #0d6efd; }
    .btn-invoices { background-color: var(--primary); }
    .btn-payments { background-color: #198754; }
</style>
</head>

<body>
<?php include('../include/nav.php'); ?>

<div class="content">
    <div class="page-header">
        <h2 class="mb-0">Notifications</h2>
        <button onclick="window.location.href='dashboard.php'" class="btn btn-success">
            <i class="fas fa-home"></i> Back to Dashboard
        </button>
    </div>

    <!-- Horizontal Accordion Buttons -->
    <div class="accordion-buttons-container">
        <div class="accordion-button-horizontal btn-messages active" data-target="messages">
            <div class="accordion-button-content">
                <i class="fas fa-bell accordion-button-icon"></i>
                Messages
            </div>
            <span class="accordion-button-count"><?php echo count($notifications); ?></span>
        </div>
        
        <div class="accordion-button-horizontal btn-invoices" data-target="invoices">
            <div class="accordion-button-content">
                <i class="fas fa-file-invoice accordion-button-icon"></i>
                Invoices
            </div>
            <span class="accordion-button-count"><?php echo count($balances); ?></span>
        </div>
        
        <div class="accordion-button-horizontal btn-payments" data-target="payments">
            <div class="accordion-button-content">
                <i class="fas fa-money-bill-wave accordion-button-icon"></i>
                Payments
            </div>
            <span class="accordion-button-count"><?php echo count($payments); ?></span>
        </div>
    </div>

    <!-- Accordion Content Areas -->
    <div id="messages" class="accordion-content active">
        <h4 class="mb-3"><i class="fas fa-bell me-2"></i>Messages</h4>
        <?php if (count($notifications) > 0): ?>
            <?php foreach ($notifications as $notif): ?>
                <div class="alert alert-info">
                    <strong><?php echo htmlspecialchars($notif['title'] ?? 'Message'); ?></strong><br>
                    <p class="mb-1">Hi <?php echo $studentid;?> <br><?php echo htmlspecialchars($notif['message'] ?? ''); ?></p>
                    <?php if (!empty($notif['date'])): ?>
                        <small class="text-muted"><?php echo date('M j, Y', strtotime($notif['date'])); ?></small>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p class="text-muted">No new messages available.</p>
        <?php endif; ?>
    </div>

    <div id="invoices" class="accordion-content">
        <h4 class="mb-3"><i class="fas fa-file-invoice me-2"></i>Invoices</h4>
        <?php if (count($balances) > 0): ?>
            <?php foreach ($balances as $balance): ?>
                <div class="alert alert-danger">
                    <strong><?php echo htmlspecialchars($balance['fee_type'] ?? 'Balance'); ?></strong><br>
                    Invoice Amount: <b>K <?php echo number_format($balance['amount'] ?? 0, 2); ?></b><br>
                    <?php if (!empty($balance['period']) || !empty($balance['year'])): ?>
                        <small class="text-muted">
                            <?php echo htmlspecialchars($balance['period'] ?? ''); ?>
                            <?php if (!empty($balance['period']) && !empty($balance['year'])): ?>-<?php endif; ?>
                            <?php echo htmlspecialchars($balance['year'] ?? ''); ?>
                        </small><br>
                    <?php endif; ?>
                    <small class="text-muted">Please settle this invoice promptly.</small>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p class="text-muted">No outstanding invoice records found.</p>
        <?php endif; ?>
    </div>

    <div id="payments" class="accordion-content">
        <h4 class="mb-3"><i class="fas fa-money-bill-wave me-2"></i>Payments</h4>
        <?php if (count($payments) > 0): ?>
            <?php foreach ($payments as $payment): ?>
                <div class="alert alert-success">
                    <strong><?php echo htmlspecialchars($payment['fee_type'] ?? 'Payment'); ?></strong><br>
                    Amount: <b>K <?php echo number_format($payment['amount'] ?? 0, 2); ?></b><br>
                    <?php if (!empty($payment['status'])): ?>
                        <span class="badge bg-light text-dark">Status: <?php echo htmlspecialchars($payment['status']); ?></span><br>
                    <?php endif; ?>
                    <?php if (!empty($payment['paidday'])): ?>
                        <small class="text-muted">Paid on: <?php echo date('M j, Y', strtotime($payment['paidday'])); ?></small><br>
                    <?php endif; ?>
                    <?php if (!empty($payment['payid'])): ?>
                        <small>Payment ID: <?php echo htmlspecialchars($payment['payid']); ?></small>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p class="text-muted">No payment records found.</p>
        <?php endif; ?>
    </div>
<br><br><br>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.accordion-button-horizontal');
    const contents = document.querySelectorAll('.accordion-content');
    
    // Show the active content on page load
    showContent('messages');
    
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            const target = this.getAttribute('data-target');
            
            // Update button states
            buttons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // Show the corresponding content
            showContent(target);
        });
    });
    
    function showContent(targetId) {
        contents.forEach(content => {
            if (content.id === targetId) {
                content.classList.add('active');
            } else {
                content.classList.remove('active');
            }
        });
    }
});
</script>

</body>
</html>