@extends('layouts.studentportalnav')

@section('title','Results')

@section('content')

<style>

body{
    background:#f6f7fb;
}

/* =======================
Hero
======================= */

.result-hero{

    background:linear-gradient(135deg,#5E244E,#4a1c3e);
    color:#fff;
    border-radius:20px;
    padding:40px;
    margin-bottom:30px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.result-hero h2{

    font-weight:700;

}

.result-hero p{

    color:#ddd;
    margin-bottom:0;

}

/* =======================
Summary Cards
======================= */

.summary-card{

    background:#fff;
    border:none;
    border-radius:20px;
    padding:25px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;

}

.summary-card:hover{

    transform:translateY(-5px);

}

.summary-card i{

    font-size:40px;
    color:#5E244E;
    margin-bottom:15px;

}

.summary-card h3{

    color:#5E244E;
    font-weight:700;

}

.summary-card small{

    color:#777;

}

/* =======================
Result Table
======================= */

.result-card{

    margin-top:35px;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.table-head{

    background:#5E244E;
    color:#fff;
    padding:18px 25px;

}

.table{

    margin-bottom:0;

}

.table th{

    background:#744a68;
    color:#fff;
    border:none;

}

.table td{

    vertical-align:middle;

}

.grade{

    padding:7px 15px;
    border-radius:30px;
    font-weight:600;
    color:#fff;
    display:inline-block;

}

.a{

    background:#28a745;

}

.b{

    background:#17a2b8;

}

.c{

    background:#ffc107;
    color:#222;

}

.fail{

    background:#dc3545;

}

/* =======================
Progress
======================= */

.progress{

    height:10px;
    border-radius:20px;

}

/* =======================
Download
======================= */

.download-card{

    margin-top:30px;
    background:#4a1c3e;
    color:#fff;
    border-radius:20px;
    padding:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;

}

.download-card h4{

    color:#d4af37;
    font-weight:700;

}

.btn-result{

    background:#d4af37;
    color:#fff;
    border:none;
    border-radius:50px;
    padding:12px 30px;
    font-weight:600;

}

.btn-result:hover{

    background:#c49d20;
    color:#fff;

}

</style>

<div class="container py-4">

    <!-- Hero -->

    <div class="result-hero">

        <h2>

            <i class="fas fa-award"></i>

            Academic Results

        </h2>

        <p>

            View your examination results and academic performance.

        </p>

    </div>

    <!-- Summary -->

    <div class="row">

        <div class="col-md-4 mb-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 mb-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 mb-4">

            <div class="summary-card">

                <i class="fas fa-book"></i>

                <h3>6 / 6</h3>

                <small>Modules Passed</small>

            </div>

        </div>

    </div>

    <!-- Result Table -->

    <div class="result-card">

        <div class="table-head">

            <h4 class="mb-0">

                Semester Results

            </h4>

        </div>

        <table class="table table-hover">

            <thead>

            <tr>

                <th>Module</th>
                <th>Marks</th>
                <th>Grade</th>
                <th>Status</th>

            </tr>

            </thead>

            <tbody>

            <tr>

                <td>Engine Technology</td>

                <td>91</td>

                <td>

                    <span class="grade a">

                        A+

                    </span>

                </td>

                <td>Pass</td>

            </tr>

            <tr>

                <td>Brake Systems</td>

                <td>84</td>

                <td>

                    <span class="grade a">

                        A

                    </span>

                </td>

                <td>Pass</td>

            </tr>

            <tr>

                <td>Electrical Systems</td>

                <td>79</td>

                <td>

                    <span class="grade b">

                        B+

                    </span>

                </td>

                <td>Pass</td>

            </tr>

            <tr>

                <td>Transmission Systems</td>

                <td>74</td>

                <td>

                    <span class="grade b">

                        B

                    </span>

                </td>

                <td>Pass</td>

            </tr>

            <tr>

                <td>Workshop Practice</td>

                <td>88</td>

                <td>

                    <span class="grade a">

                        A

                    </span>

                </td>

                <td>Pass</td>

            </tr>

            <tr>

                <td>Industrial Safety</td>

                <td>81</td>

                <td>

                    <span class="grade a">

                        A-

                    </span>

                </td>

                <td>Pass</td>

            </tr>

            </tbody>

        </table>

    </div>

    <!-- Performance -->

    <div class="result-card mt-4">

        <div class="table-head">

            <h4 class="mb-0">

                Overall Performance

            </h4>

        </div>

        <div class="p-4">

            <p class="mb-2">

                Course Completion

            </p>

            <div class="progress mb-4">

                <div class="progress-bar bg-success"

                     style="width:82%">

                </div>

            </div>

            <p class="mb-2">

                Attendance Score

            </p>

            <div class="progress">

                <div class="progress-bar bg-warning"

                     style="width:90%">

                </div>

            </div>

        </div>

    </div>

    <!-- Download -->

    <div class="download-card">

        <div>

            <h4>

                Download Official Result Sheet

            </h4>

            <p class="mb-0">

                Download your latest semester examination results in PDF format.

            </p>

        </div>

        <button class="btn btn-result">

            <i class="fas fa-download"></i>

            Download PDF

        </button>

    </div>

</div>

@endsection