<?php
$query = mysqli_query($conn, "SELECT SUM(amount) as paid FROM payments  WHERE studentid='$userlogin' and status='Paid'");

if (mysqli_num_rows($query) > 0) {
    while ($row = mysqli_fetch_array($query)) {
      $total = $row['paid'];
       if($total==0){
        $total = 0;
       }else{
        $total = $row['paid'];
       }
 
      
        
       
        
    }
} 

$query = mysqli_query($conn, "SELECT SUM(amount) as unpaid FROM balances  WHERE intake='$intake'");


    while ($row = mysqli_fetch_array($query)) {
      $unpaid = $row['unpaid'];
   

        $balance=$unpaid-$total;
         if ($total > 0) {
    $per = ($total / $total+$unpaid) * 100;
} else {
    $per = 0; // or handle differently
}
    
      $_SESSION['balance']=$balance;
           
        
    }




  ?>
<?php
$program = $_SESSION['program'];
$user = $_SESSION['studentid'];
$studentname = $_SESSION['studentname'];
?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
:root {
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-700: #374151;
    --gray-900: #111827;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
}

/* Full Width Dashboard Header */
.dashboard-header {
    width: 100%;
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 0;
    margin: 0;
}

/* Top Navigation Bar */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid var(--gray-100);
    background: white;
}

.welcome-section h1 {
    font-size: 22px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.welcome-section p {
    font-size: 14px;
    color: var(--gray-700);
    margin-top: 4px;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}

.profile-btn:hover {
    background: var(--gray-100);
}

.profile-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
}

.profile-info {
    text-align: left;
}

.profile-info .name {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.profile-info .id {
    font-size: 12px;
    color: white;
}

.timetable-btn {
    background: white;
    color: var(--primary);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.timetable-btn:hover {
    background: #1d4ed8;
    color: white;
    text-decoration: none;
}

/* Main Dashboard Content */
.dashboard-content {
    width: 100%;
    padding: 10px;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card {
    background:white ;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-icon.total { background: #dbeafe; color: var(--primary); }
.stat-card.completed { background: #dcfce7; color: var(--success); }
.stat-card.inprogress { background: #fef3c7; color: var(--warning); }
.stat-card.notstarted { background: #f3f4f6; color: var(--gray-700); }

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-icon.total { background: #dbeafe; color: var(--primary); }
.stat-icon.completed { background: #dcfce7; color: var(--success); }
.stat-icon.progress { background: #fef3c7; color: var(--warning); }
.stat-icon.pending { background: #f3f4f6; color: var(--gray-700); }

.stat-title {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 5px;
}

.stat-subtext {
    font-size: 12px;
    color: var(--gray-500);
}

/* Financial Progress Card */
.finance-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 25px;
    grid-column: 1 / 3;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
}

.progress-percentage {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
}

.progress-container {
    margin: 25px 0;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--gray-700);
}

.progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    border-radius: 4px;
    transition: width 1s ease-in-out;
}

.finance-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 25px;
}

.detail-item {
    text-align: center;
    padding: 15px;
    background: var(--gray-50);
    border-radius: 8px;
}

.detail-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 5px;
}

.detail-label {
    font-size: 13px;
    color: var(--gray-600);
}

/* Quick Actions Sidebar */
.quick-actions-sidebar {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 25px;
    height: fit-content;
}

.quick-actions-sidebar h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 20px;
}

.action-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--gray-50);
    border-radius: 8px;
    text-decoration: none;
    color: var(--gray-900);
    transition: background 0.2s, transform 0.2s;
}

.action-item:hover {
    background: var(--gray-100);
    transform: translateX(5px);
    text-decoration: none;
    color: var(--gray-900);
}

.action-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.action-content {
    flex: 1;
}

.action-content h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 3px;
}

.action-content p {
    font-size: 12px;
    color: var(--gray-600);
}

.action-arrow {
    color: var(--gray-400);
    font-size: 14px;
}

/* Date Display */
.date-display {
    text-align: center;
    padding: 15px;
    background: white;
    border-top: 1px solid var(--gray-200);
    font-size: 14px;
    color: var(--gray-600);
    margin-top: 25px;
}

/* Modal */
.modal-content {
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.modal-body img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: block;
    border: 4px solid var(--gray-100);
}

/* Responsive */
@media (max-width: 1024px) {
    .dashboard-content {
        grid-template-columns: 1fr;
    }
    
    .finance-card {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .top-nav {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .top-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .finance-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .stats-grid {
        grid-template-columns: 1fr;
        justify-content:center;
        flex-wrap:wrap;
        display:flex;
    }
    .stat-card{
        width:150px !important;
    }
    .dashboard-content {
        padding: 1px;
    }
}
</style>

<?php
// Fetch student data
$query = mysqli_query($conn, "SELECT * FROM students WHERE studentid='$userlogin' LIMIT 1");
$imagepro = 'default.jpg';
$program_name = '';

if ($query && mysqli_num_rows($query) > 0) {
    $row = mysqli_fetch_assoc($query);
    $imagepro = $row['image'] ?? 'default.jpg';
    $program_name = $row['program'] ?? '';
}

// Fetch course stats
$stats = [
    'total_courses' => 0,
    'completed_courses' => 0,
    'in_progress_courses' => 0,
    'courses' => []
];

$courses_query = "SELECT `exam`, `ca`, `ca1`, `ca2` FROM `results` WHERE studentid='" . mysqli_real_escape_string($conn, $userlogin) . "'";
$courses_result = mysqli_query($conn, $courses_query);

if ($courses_result && mysqli_num_rows($courses_result) > 0) {
    while($course_row = mysqli_fetch_assoc($courses_result)) {
        $stats['total_courses']++;
        
        if (!empty($course_row['exam']) && is_numeric($course_row['exam'])) {
            $stats['completed_courses']++;
        } else if ((!empty($course_row['ca']) && is_numeric($course_row['ca'])) || 
                   (!empty($course_row['ca1']) && is_numeric($course_row['ca1'])) || 
                   (!empty($course_row['ca2']) && is_numeric($course_row['ca2']))) {
            $stats['in_progress_courses']++;
        }
    }
}

$not_started_courses = $stats['total_courses'] - $stats['completed_courses'] - $stats['in_progress_courses'];

// Financial calculations (same as before)
$query1 = mysqli_query($conn, "SELECT percentage as scholarship FROM scholarship WHERE studentid='$user'");
if ($query1 && mysqli_num_rows($query1) > 0) {
    $row = mysqli_fetch_array($query1);
    $scholarship = $row['scholarship'];
    $has_scholarship = true;
} else {
    $scholarship = 0;
    $has_scholarship = false;
}

$total = 0;
$query2 = mysqli_query($conn, "SELECT SUM(amount) as paid FROM payments WHERE studentid='$user' AND status='Paid'");
if ($query2 && mysqli_num_rows($query2) > 0) {
    $row = mysqli_fetch_array($query2);
    $total = $row['paid'] ?? 0;
}

$unpaid = 0;
if (!empty($intake)) {
    $query3 = mysqli_query($conn, "SELECT SUM(amount) as unpaid FROM balances WHERE intake='$intake' AND program='$program'");
    if ($query3 && mysqli_num_rows($query3) > 0) {
        $row = mysqli_fetch_array($query3);
        $unpaid = $row['unpaid'] ?? 0;
    }
}

$scholar = 0;
if ($has_scholarship && $scholarship > 0 && $unpaid > 0) {
    $scholar = ($scholarship / 100) * $unpaid;
}

$balance = $unpaid - $total - $scholar;
if ($balance < 0) $balance = 0;

$pay_percentage = 0;
if ($unpaid > 0) {
    $pay_percentage = ($total / $unpaid) * 100;
    if ($pay_percentage > 100) $pay_percentage = 100;
}

if ($has_scholarship && $scholarship > 0) {
    $pep = $scholarship + $pay_percentage;
} else {
    $pep = $pay_percentage;
}

if ($pep > 100) $pep = 100;

$maxpay = 75;
$query4 = mysqli_query($conn, "SELECT maxpay FROM admin LIMIT 1");
if ($query4 && mysqli_num_rows($query4) > 0) {
    $row = mysqli_fetch_array($query4);
    $maxpay = $row['maxpay'] ?? 75;
}

$is_cleared = ($pep >= $maxpay);
?>

<!-- Clean Dashboard Header -->
<div class="dashboard-header">
    <!-- Top Navigation -->
    <div class="top-nav" style="background: var(--primary); color:white;border-radius:7px;">
      
  
        <div class="top-actions">
                 <?php
$query = mysqli_query($conn, "SELECT * FROM admin");
while ($row = mysqli_fetch_array($query)) {
    $maxpay = $row['maxpay'];
    $ba = $maxpay - $per;

    if ($pep >= $maxpay) {
    echo' <a  class="timetable-btn " data-toggle="modal" data-toggle="modal" data-target="#statementone">
                <i class="bi bi-mortarboard"></i>
                 Results
            </a>';
      
    }else{
       echo'<a  class="timetable-btn " data-toggle="modal" data-target="#exampleModal33">
<i class="bi bi-mortarboard"></i>
                 Results
            </a> '; 
    }}
    ?> 
            
             
            <button class="profile-btn" data-bs-toggle="modal" data-bs-target="#profileModal">
                <img src="<?php echo htmlspecialchars($imagepro); ?>" class="profile-img" alt="Profile">
                <div class="profile-info">
                    <div class="name"><?php echo htmlspecialchars($studentname); ?></div>
                    <div class="id"><?php echo htmlspecialchars($user); ?></div>
                </div>
            </button>
        </div>
    </div>
    
    <!-- Main Dashboard Content -->
    <div class="dashboard-content">
        <!-- Left Column - Stats -->
        <div>
            <!-- Course Stats Cards -->
            <div class="stats-grid">
                <div class="stat-card" style="background:; color:">
                    <div class="stat-header">
                        <div class="stat-icon total">
                            <i class="fas fa-book"></i>
                        </div>
                        <div>
                            <div class="stat-title">Total Courses</div>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['total_courses']; ?></div>
                    <div class="stat-subtext">Registered this semester</div>
                </div>
                
                <div class="stat-card" style="background:; color:">
                    <div class="stat-header completed">
                        <div class="stat-icon completed">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div>
                            <div class="stat-title">Completed</div>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['completed_courses']; ?></div>
                    <div class="stat-subtext">With exam scores</div>
                </div>
                
                <div class="stat-card improgress">
                    <div class="stat-header">
                        <div class="stat-icon progress">
                            <i class="fas fa-spinner"></i>
                        </div>
                        <div>
                            <div class="stat-title">In Progress</div>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $stats['in_progress_courses']; ?></div>
                    <div class="stat-subtext">CA marks recorded</div>
                </div>
                
                <div class="stat-card notstarted">
                    <div class="stat-header">
                        <div class="stat-icon pending">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div>
                            <div class="stat-title">Not Started</div>
                        </div>
                    </div>
                    <div class="stat-value"><?php echo $not_started_courses; ?></div>
                    <div class="stat-subtext">No marks recorded</div>
                </div>
            </div>
            
            <!-- Financial Progress Card -->
            <div class="finance-card">
                <div class="card-header">
                    <h3>Financial Progress</h3>
                    <div class="progress-percentage"><?php echo round($pep); ?>%</div>
                </div>
                
                <div class="progress-container">
                    <div class="progress-labels">
                        <span>0%</span>
                        <span>Target: <?php echo $maxpay; ?>%</span>
                        <span>100%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: <?php echo $pep; ?>%"></div>
                    </div>
                </div>
                
                <div class="finance-details">
                    <div class="detail-item">
                        <div class="detail-value">ZMW <?php echo number_format($total, 2); ?></div>
                        <div class="detail-label">Total Paid</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-value"><?php echo $scholarship; ?>%</div>
                        <div class="detail-label">Scholarship</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-value">ZMW <?php echo number_format($balance, 2); ?></div>
                        <div class="detail-label">Remaining Balance</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Right Column - Quick Actions -->
        <div class="quick-actions-sidebar">
            <h3>Quick Actions</h3>
            <div class="action-list">
                <a href="course.php" class="action-item">
                    <div class="action-icon">
                        <i class="fas fa-book-open"></i>
                    </div>
                    <div class="action-content">
                        <h4>View Courses</h4>
                        <p>Check your registered courses</p>
                    </div>
                    <i class="fas fa-chevron-right action-arrow"></i>
                </a>
                
                <a href="payment.php" class="action-item">
                    <div class="action-icon" style="background: var(--success);">
                        <i class="fas fa-credit-card"></i>
                    </div>
                    <div class="action-content">
                        <h4>Make Payment</h4>
                        <p>View Payments made</p>
                    </div>
                    <i class="fas fa-chevron-right action-arrow"></i>
                </a>
                
                <a href="ca.php" class="action-item">
                    <div class="action-icon" style="background: var(--warning);">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <div class="action-content">
                        <h4>View CA</h4>
                        <p>Check Assessment</p>
                    </div>
                    <i class="fas fa-chevron-right action-arrow"></i>
                </a>
                
                <a href="assignment.php" class="action-item">
                    <div class="action-icon" style="background: #8b5cf6;">
                        <i class="fas fa-user-check"></i>
                    </div>
                    <div class="action-content">
                        <h4>Assignments</h4>
                        <p>View and Submit</p>
                    </div>
                    <i class="fas fa-chevron-right action-arrow"></i>
                </a>
            </div>
        </div>
    </div>
    
    <!-- Date Display -->
    <div class="date-display">
        <i class="far fa-calendar"></i>
        <span id="todayDate"></span>
    </div>

<!-- Profile Modal -->
<div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="profileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Student Profile</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img src="<?php echo htmlspecialchars($imagepro); ?>" 
                     alt="Profile Picture">
                <h5 class="mt-3"><?php echo htmlspecialchars($studentname); ?></h5>
                <p class="text-muted mb-1"><?php echo htmlspecialchars($user); ?></p>
                <p class="text-muted"><?php echo htmlspecialchars($program_name); ?></p>
                <div class="mt-3">
                    <span class="badge bg-<?php echo $is_cleared ? 'success' : 'warning'; ?>">
                        <?php echo $is_cleared ? 'Cleared' : 'Pending Clearance'; ?>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Set today's date
const today = new Date();
const options = { 
    weekday: 'long', 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
};
const dateString = today.toLocaleDateString('en-US', options);
document.getElementById('todayDate').textContent = dateString;

// Animate progress bars on load
document.addEventListener('DOMContentLoaded', function() {
    const progressBars = document.querySelectorAll('.progress-fill');
    progressBars.forEach(bar => {
        const width = bar.style.width;
        bar.style.width = '0';
        setTimeout(() => {
            bar.style.width = width;
        }, 300);
    });
});
</script>