@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