<?php

declare(strict_types=1);

/*
|--------------------------------------------------------------------------
| EXPECTED VARIABLES
|--------------------------------------------------------------------------
|
| $total_students
| $pass_students
| $fail_students
| $average_percentage
|
*/

?>

<div class="row">

    <!-- TOTAL STUDENTS -->

    <div class="col-lg-3 col-md-6 col-12">

        <div class="small-box bg-info">

            <div class="inner">

                <h3>

                    <?= (int) $total_students; ?>

                </h3>

                <p>

                    Total Students

                </p>

            </div>

            <div class="icon">

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

            </div>

        </div>

    </div>

    <!-- PASS STUDENTS -->

    <div class="col-lg-3 col-md-6 col-12">

        <div class="small-box bg-success">

            <div class="inner">

                <h3>

                    <?= (int) $pass_students; ?>

                </h3>

                <p>

                    Pass Students

                </p>

            </div>

            <div class="icon">

                <i class="fas fa-check-circle"></i>

            </div>

        </div>

    </div>

    <!-- FAIL STUDENTS -->

    <div class="col-lg-3 col-md-6 col-12">

        <div class="small-box bg-danger">

            <div class="inner">

                <h3>

                    <?= (int) $fail_students; ?>

                </h3>

                <p>

                    Fail Students

                </p>

            </div>

            <div class="icon">

                <i class="fas fa-times-circle"></i>

            </div>

        </div>

    </div>

    <!-- AVERAGE PERCENTAGE -->

    <div class="col-lg-3 col-md-6 col-12">

        <div class="small-box bg-warning">

            <div class="inner">

                <h3>

                    <?= htmlspecialchars(
                        number_format(
                            (float) $average_percentage,
                            2
                        )
                    ); ?>%

                </h3>

                <p>

                    Average Percentage

                </p>

            </div>

            <div class="icon">

                <i class="fas fa-chart-line"></i>

            </div>

        </div>

    </div>

</div>