{{-- ==========================================================
    Performance Cards
========================================================== --}}

<div class="row g-4 mb-4">

    {{-- Score --}}
    <div class="col-lg-3 col-md-6">

        <div class="card border-0 shadow-sm rounded-4 h-100">

            <div class="card-body text-center">

                <div class="display-5 text-primary mb-3">

                    <i class="bi bi-trophy-fill"></i>

                </div>

                <h6 class="text-muted">

                    Score

                </h6>

                <h2 class="fw-bold">

                    {{ $result->score }}

                    <small class="text-muted fs-6">

                        / {{ $result->total_questions }}

                    </small>

                </h2>

            </div>

        </div>

    </div>

    {{-- Percentage --}}
    <div class="col-lg-3 col-md-6">

        <div class="card border-0 shadow-sm rounded-4 h-100">

            <div class="card-body text-center">

                <div class="display-5 text-success mb-3">

                    <i class="bi bi-bar-chart-fill"></i>

                </div>

                <h6 class="text-muted">

                    Percentage

                </h6>

                <h2 class="fw-bold text-success">

                    {{ number_format($result->percentage,2) }}%

                </h2>

            </div>

        </div>

    </div>

    {{-- Grade --}}
    <div class="col-lg-3 col-md-6">

        <div class="card border-0 shadow-sm rounded-4 h-100">

            <div class="card-body text-center">

                <div class="display-5 text-warning mb-3">

                    <i class="bi bi-award-fill"></i>

                </div>

                <h6 class="text-muted">

                    Grade

                </h6>

                <h2 class="fw-bold text-warning">

                    {{ $result->grade }}

                </h2>

            </div>

        </div>

    </div>

    {{-- Result --}}
    <div class="col-lg-3 col-md-6">

        <div class="card border-0 shadow-sm rounded-4 h-100">

            <div class="card-body text-center">

                <div class="display-5 mb-3">

                    @if($result->passed)

                        <i class="bi bi-check-circle-fill text-success"></i>

                    @else

                        <i class="bi bi-x-circle-fill text-danger"></i>

                    @endif

                </div>

                <h6 class="text-muted">

                    Status

                </h6>

                <h2 class="fw-bold">

                    @if($result->passed)

                        <span class="text-success">

                            PASS

                        </span>

                    @else

                        <span class="text-danger">

                            FAIL

                        </span>

                    @endif

                </h2>

            </div>

        </div>

    </div>

</div>

{{-- ==========================================================
    Progress Bar
========================================================== --}}

<div class="card border-0 shadow-sm rounded-4 mb-4">

    <div class="card-body">

        <div class="d-flex justify-content-between mb-2">

            <span class="fw-bold">

                Overall Performance

            </span>

            <span>

                {{ number_format($result->percentage,2) }}%

            </span>

        </div>

        <div
            class="progress"
            style="height:18px;">

            <div
                class="progress-bar
                    @if($result->percentage >= 70)
                        bg-success
                    @elseif($result->percentage >= 50)
                        bg-warning
                    @else
                        bg-danger
                    @endif"
                role="progressbar"
                style="width: {{ $result->percentage }}%;">

            </div>

        </div>

    </div>

</div>