423 lines
12 KiB
PHP
423 lines
12 KiB
PHP
@extends('layouts.studentportalnav')
|
|
|
|
@section('title','Results')
|
|
|
|
@section('content')
|
|
|
|
<!-- Bootstrap 5 -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Google Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- html2pdf Library for Client-side PDF Generation -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--theme-navy: #2D355B; /* Primary Navy */
|
|
--theme-navy-dark: #1F2541; /* Dark Navy */
|
|
--theme-red: #822424; /* Primary Accent Red */
|
|
--theme-red-hover: #df2c3e; /* Red Hover */
|
|
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
|
--bg-light: #F6F6F6; /* Page Background */
|
|
--white: #ffffff;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background: var(--bg-light);
|
|
}
|
|
|
|
/* =======================
|
|
Hero Section
|
|
======================= */
|
|
.result-hero {
|
|
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
|
color: var(--white);
|
|
border-radius: 16px;
|
|
padding: 35px 30px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
|
border-left: 5px solid var(--theme-red);
|
|
}
|
|
|
|
.result-hero h2 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.result-hero p {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* =======================
|
|
Summary Cards
|
|
======================= */
|
|
.summary-card {
|
|
background: var(--white);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
padding: 25px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.summary-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--theme-navy);
|
|
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.summary-card i {
|
|
font-size: 36px;
|
|
color: var(--theme-red);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.summary-card h3 {
|
|
color: var(--theme-navy);
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.summary-card small {
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* =======================
|
|
Result Table
|
|
======================= */
|
|
.result-card {
|
|
margin-top: 30px;
|
|
background: var(--white);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
|
}
|
|
|
|
.table-head {
|
|
background: var(--theme-navy);
|
|
color: var(--white);
|
|
padding: 18px 25px;
|
|
}
|
|
|
|
.table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table th {
|
|
background: #f8fafc;
|
|
color: var(--theme-navy);
|
|
font-weight: 600;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
.table td {
|
|
vertical-align: middle;
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
.grade {
|
|
padding: 5px 14px;
|
|
border-radius: 30px;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: var(--white);
|
|
display: inline-block;
|
|
}
|
|
|
|
.grade.a {
|
|
background: var(--theme-navy);
|
|
}
|
|
|
|
.grade.b {
|
|
background: var(--theme-red);
|
|
}
|
|
|
|
.grade.c {
|
|
background: #e67e22;
|
|
}
|
|
|
|
.grade.fail {
|
|
background: #dc3545;
|
|
}
|
|
|
|
.status-pass {
|
|
color: #198754;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-fail {
|
|
color: #dc3545;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* =======================
|
|
Progress
|
|
======================= */
|
|
.progress {
|
|
height: 10px;
|
|
border-radius: 20px;
|
|
background-color: #e2e8f0;
|
|
}
|
|
|
|
.progress-bar-navy {
|
|
background-color: var(--theme-navy) !important;
|
|
}
|
|
|
|
.progress-bar-red {
|
|
background-color: var(--theme-red) !important;
|
|
}
|
|
|
|
.align-items-stretch {
|
|
align-items: stretch !important;
|
|
padding-top: 38px;
|
|
}
|
|
|
|
/* =======================
|
|
Download Card
|
|
======================= */
|
|
.download-card {
|
|
margin-top: 30px;
|
|
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
|
color: var(--white);
|
|
border-radius: 16px;
|
|
padding: 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
|
}
|
|
|
|
.download-card h4 {
|
|
color: var(--theme-yellow);
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.btn-result {
|
|
background-color: var(--theme-red) !important;
|
|
color: var(--white) !important;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 10px 24px;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-result:hover {
|
|
background-color: var(--theme-red-hover) !important;
|
|
color: var(--white) !important;
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
.result-hero {
|
|
padding: 25px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container py-4">
|
|
|
|
<!-- Printable Area Container -->
|
|
<div id="pdf-download-area">
|
|
|
|
<!-- Hero Section -->
|
|
<div class="result-hero">
|
|
<h2>
|
|
<i class="fas fa-award me-2" style="color: var(--theme-yellow);"></i>
|
|
Academic Results
|
|
</h2>
|
|
<p>
|
|
View your examination results and overall academic performance.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Summary Cards -->
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="summary-card">
|
|
<i class="fas fa-chart-line"></i>
|
|
<h3>{{ $averageMarks ?? 0 }}%</h3>
|
|
<small>Overall Average</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="summary-card">
|
|
<i class="fas fa-medal"></i>
|
|
<h3>{{ $gpa ?? '3.65' }}</h3>
|
|
<small>Current GPA</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="summary-card">
|
|
<i class="fas fa-book-open"></i>
|
|
<h3>{{ $passedModules ?? 0 }} / {{ $totalModules ?? 0 }}</h3>
|
|
<small>Modules Passed</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result Table -->
|
|
<div class="result-card">
|
|
<div class="table-head d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 fw-bold">
|
|
Semester Results
|
|
</h5>
|
|
@if(isset($results) && $results->isNotEmpty())
|
|
<span class="badge bg-light text-dark">
|
|
{{ optional($results->first())->academic_year }} | {{ optional($results->first())->semester }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>Module Code</th>
|
|
<th>Module Name</th>
|
|
<th>Marks</th>
|
|
<th>Grade</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
@forelse ($results ?? [] as $item)
|
|
<tr>
|
|
<td class="fw-bold" style="color: var(--theme-navy);">{{ $item->module_code }}</td>
|
|
<td class="fw-semibold">{{ $item->module_name }}</td>
|
|
<td>{{ $item->marks }}</td>
|
|
<td>
|
|
@php
|
|
$gradeClass = 'b';
|
|
$upperGrade = strtoupper($item->grade ?? '');
|
|
|
|
if(str_contains($upperGrade, 'A')) {
|
|
$gradeClass = 'a';
|
|
} elseif(str_contains($upperGrade, 'F')) {
|
|
$gradeClass = 'fail';
|
|
} elseif(str_contains($upperGrade, 'C')) {
|
|
$gradeClass = 'c';
|
|
}
|
|
@endphp
|
|
<span class="grade {{ $gradeClass }}">{{ $item->grade }}</span>
|
|
</td>
|
|
<td>
|
|
@if(strtolower($item->status ?? '') == 'pass')
|
|
<span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span>
|
|
@else
|
|
<span class="status-fail"><i class="fas fa-times-circle me-1"></i>Fail</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="text-center py-4 text-muted">
|
|
<i class="fas fa-info-circle me-1"></i> No result records found for your account.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Performance & Download Section (Side by Side) -->
|
|
<div class="row g-4 align-items-stretch">
|
|
|
|
<!-- Overall Performance Card -->
|
|
<div class="col-md-6">
|
|
<div class="result-card h-100 mt-0">
|
|
<div class="table-head">
|
|
<h5 class="mb-0 fw-bold">
|
|
Overall Performance
|
|
</h5>
|
|
</div>
|
|
|
|
<div class="p-4 d-flex flex-column justify-content-center">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span class="fw-semibold" style="color: var(--theme-navy);">Course Completion</span>
|
|
<span class="fw-bold" style="color: var(--theme-navy);">{{ $averageMarks ?? 0 }}%</span>
|
|
</div>
|
|
<div class="progress mb-4">
|
|
<div class="progress-bar progress-bar-navy" style="width: {{ $averageMarks ?? 0 }}%"></div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span class="fw-semibold" style="color: var(--theme-navy);">Attendance Score</span>
|
|
<span class="fw-bold" style="color: var(--theme-red);">90%</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-red" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download Section Card -->
|
|
<div class="col-md-6">
|
|
<div class="download-card h-100 mt-0 flex-column justify-content-between align-items-start text-start">
|
|
<div>
|
|
<h4 class="mb-3">Download Official Result Sheet</h4>
|
|
<p class="mb-4">
|
|
Get your latest semester examination results in official PDF format.
|
|
</p>
|
|
</div>
|
|
|
|
<button id="download-pdf-btn" onclick="generatePDF()" class="btn btn-result shadow-sm w-100">
|
|
<i class="fas fa-download me-2"></i>Download PDF
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- JavaScript to handle PDF Download -->
|
|
<script>
|
|
function generatePDF() {
|
|
const element = document.getElementById('pdf-download-area');
|
|
const button = document.getElementById('download-pdf-btn');
|
|
|
|
|
|
button.disabled = true;
|
|
button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Generating PDF...';
|
|
|
|
const options = {
|
|
margin: [10, 10, 10, 10],
|
|
filename: 'Official_Result_Sheet.pdf',
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2, useCORS: true },
|
|
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
|
};
|
|
|
|
|
|
html2pdf().set(options).from(element).save().then(() => {
|
|
button.disabled = false;
|
|
button.innerHTML = '<i class="fas fa-download me-2"></i>Download PDF';
|
|
}).catch(err => {
|
|
console.error(err);
|
|
button.disabled = false;
|
|
button.innerHTML = '<i class="fas fa-download me-2"></i>Download PDF';
|
|
});
|
|
}
|
|
</script>
|
|
|
|
@endsection |