{{-- ==========================================================
    Statistics
========================================================== --}}

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

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

        <div class="card border-0 shadow-sm rounded-4 bg-success text-white">

            <div class="card-body">

                <div class="d-flex justify-content-between align-items-center">

                    <div>

                        <small class="text-white-50">

                            Correct Answers

                        </small>

                        <h2 class="fw-bold mb-0">

                            {{ $result->correct_answers }}

                        </h2>

                    </div>

                    <div class="display-5">

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

                    </div>

                </div>

            </div>

        </div>

    </div>

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

        <div class="card border-0 shadow-sm rounded-4 bg-danger text-white">

            <div class="card-body">

                <div class="d-flex justify-content-between align-items-center">

                    <div>

                        <small class="text-white-50">

                            Wrong Answers

                        </small>

                        <h2 class="fw-bold mb-0">

                            {{ $result->wrong_answers }}

                        </h2>

                    </div>

                    <div class="display-5">

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

                    </div>

                </div>

            </div>

        </div>

    </div>

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

        <div class="card border-0 shadow-sm rounded-4 bg-warning text-dark">

            <div class="card-body">

                <div class="d-flex justify-content-between align-items-center">

                    <div>

                        <small>

                            Unanswered

                        </small>

                        <h2 class="fw-bold mb-0">

                            {{ $result->unanswered_questions }}

                        </h2>

                    </div>

                    <div class="display-5">

                        <i class="bi bi-question-circle-fill"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>

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

        <div class="card border-0 shadow-sm rounded-4 bg-primary text-white">

            <div class="card-body">

                <div class="d-flex justify-content-between align-items-center">

                    <div>

                        <small class="text-white-50">

                            Total Questions

                        </small>

                        <h2 class="fw-bold mb-0">

                            {{ $result->total_questions }}

                        </h2>

                    </div>

                    <div class="display-5">

                        <i class="bi bi-list-check"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

{{-- ==========================================================
    Result Analysis
========================================================== --}}

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

    <div class="card-header bg-light">

        <h5 class="mb-0 fw-bold">

            <i class="bi bi-pie-chart-fill text-primary me-2"></i>

            Performance Analysis

        </h5>

    </div>

    <div class="card-body">

        <div class="row text-center">

            <div class="col-md-4">

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

                    Accuracy

                </h6>

                <h3>

                    {{ $result->total_questions > 0
                        ? number_format(($result->correct_answers / $result->total_questions) * 100, 2)
                        : 0 }}%

                </h3>

            </div>

            <div class="col-md-4">

                <h6 class="text-danger fw-bold">

                    Error Rate

                </h6>

                <h3>

                    {{ $result->total_questions > 0
                        ? number_format(($result->wrong_answers / $result->total_questions) * 100, 2)
                        : 0 }}%

                </h3>

            </div>

            <div class="col-md-4">

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

                    Completion

                </h6>

                <h3>

                    {{ $result->total_questions > 0
                        ? number_format((($result->total_questions - $result->unanswered_questions) / $result->total_questions) * 100, 2)
                        : 0 }}%

                </h3>

            </div>

        </div>

    </div>

</div>