@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">

<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;
}

/* =======================
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;
}

/* =======================
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">

    <!-- 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>82%</h3>
                <small>Overall Average</small>
            </div>
        </div>

        <div class="col-md-4">
            <div class="summary-card">
                <i class="fas fa-medal"></i>
                <h3>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>6 / 6</h3>
                <small>Modules Passed</small>
            </div>
        </div>
    </div>

    <!-- Result Table -->
    <div class="result-card">
        <div class="table-head">
            <h5 class="mb-0 fw-bold">
                Semester Results
            </h5>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>Module</th>
                        <th>Marks</th>
                        <th>Grade</th>
                        <th>Status</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td class="fw-semibold" style="color: var(--theme-navy);">Engine Technology</td>
                        <td>91</td>
                        <td>
                            <span class="grade a">A+</span>
                        </td>
                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                    </tr>

                    <tr>
                        <td class="fw-semibold" style="color: var(--theme-navy);">Brake Systems</td>
                        <td>84</td>
                        <td>
                            <span class="grade a">A</span>
                        </td>
                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                    </tr>

                    <tr>
                        <td class="fw-semibold" style="color: var(--theme-navy);">Electrical Systems</td>
                        <td>79</td>
                        <td>
                            <span class="grade b">B+</span>
                        </td>
                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                    </tr>

                    <tr>
                        <td class="fw-semibold" style="color: var(--theme-navy);">Transmission Systems</td>
                        <td>74</td>
                        <td>
                            <span class="grade b">B</span>
                        </td>
                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                    </tr>

                    <tr>
                        <td class="fw-semibold" style="color: var(--theme-navy);">Workshop Practice</td>
                        <td>88</td>
                        <td>
                            <span class="grade a">A</span>
                        </td>
                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                    </tr>

                    <tr>
                        <td class="fw-semibold" style="color: var(--theme-navy);">Industrial Safety</td>
                        <td>81</td>
                        <td>
                            <span class="grade a">A-</span>
                        </td>
                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Performance Bars -->
    <div class="result-card">
        <div class="table-head">
            <h5 class="mb-0 fw-bold">
                Overall Performance
            </h5>
        </div>

        <div class="p-4">
            <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);">82%</span>
            </div>
            <div class="progress mb-4">
                <div class="progress-bar progress-bar-navy" style="width:82%"></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>

    <!-- Download Section -->
    <div class="download-card">
        <div>
            <h4>Download Official Result Sheet</h4>
            <p class="mb-0">
                Get your latest semester examination results in official PDF format.
            </p>
        </div>

        <button class="btn btn-result shadow-sm">
            <i class="fas fa-download me-2"></i>Download PDF
        </button>
    </div>

</div>

@endsection