@extends('layouts.training_centre_layout')

@section('content')
<!-- [ Page Header ] start -->

<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<div class="container">

    <main class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-4">

        <!-- Card 1: Pass (A+) -->
        @foreach ($assessmentDetails->studentDetails as $studentDetails)

            @php
                $marksheet = $studentDetails->student->studentMarksheet->firstWhere('assessment_id', '==', $assessmentDetails->id);
                $grade = $marksheet->grades;
                $isNumeric = is_numeric($grade);
                if ($isNumeric) {
                    $score = (int)$grade;

                    if ($score >= 90)       $letter = 'A';
                    elseif ($score >= 80)   $letter = 'B';
                    elseif ($score >= 60)   $letter = 'C';
                    elseif ($score >= 40)   $letter = 'D';
                    else                    $letter = 'E';

                } else {
                    $letter = strtoupper($grade);
                    switch ($letter) {
                        case 'A': $score = 95; break;
                        case 'B': $score = 85; break;
                        case 'C': $score = 65; break;
                        case 'D': $score = 50; break;
                        default:  $score = 15; break; // E
                    }
                }
                $status = $letter === 'E' ? 'fail' : 'pass';
                $color = $status === 'pass' ? 'success' : 'danger';
            @endphp

            <div class="col">
                <div class="card h-100 shadow-sm card-hover border-top border-{{ $color }} overflow-hidden">
                    <div class="card-body p-4">
                        <!-- Student Info -->
                        <h2 class="h4 card-title fw-bold text-dark mb-1">{{ $studentDetails->student->personalDetail->name }}</h2>
                        <p class="small text-muted mb-3">Application ID: {{ $studentDetails->student->application_number }}</p>
                        
                        <!-- Divider -->
                        <hr class="my-3">
                        
                        <!-- Results -->
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="text-uppercase small text-muted fw-semibold mb-0">Grade</p>
                                <p class="display-5 fw-bolder text-{{ $color }} mb-0">{{ $grade }}</p>
                            </div>
                            <span class="badge text-uppercase rounded-pill bg-{{ $color }}-subtle text-{{ $color }}-emphasis fs-6 px-3 py-2">
                                {{ $status }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

    </main>
</div>

@endsection

@section('pages-scripts')

@endsection