@extends('layouts.app')

@section('content')
    <div class="container py-5">
        <ul class="nav nav-tabs justify-content-center mb-5" id="analyticsTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active fw-bold" id="exams-tab" data-bs-toggle="tab" data-bs-target="#exams"
                    type="button" role="tab" aria-controls="exams" aria-selected="true">Exams</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link fw-bold" id="quizzes-tab" data-bs-toggle="tab" data-bs-target="#quizzes"
                    type="button" role="tab" aria-controls="quizzes" aria-selected="false">Quizzes</button>
            </li>
        </ul>


        <div class="tab-content" id="analyticsTabsContent">

            <div class="tab-pane fade show active" id="exams" role="tabpanel" aria-labelledby="exams-tab">
                <div class="container mb-5">

                    <div class="row g-4">
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="100">
                                <div class="card-icon">
                                    <i class="fas fa-tasks"></i>
                                </div>
                                <div class="card-title">Total Attempts</div>
                                <div class="card-value">{{ $examTotalAttempts }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="200">
                                <div class="card-icon">
                                    <i class="fas fa-check-circle text-primary"></i>
                                </div>
                                <div class="card-title">Pass Attempts</div>
                                <div class="card-value">{{ $examPassAttempts }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="300">
                                <div class="card-icon">
                                    <i class="fas fa-times-circle text-danger"></i>
                                </div>
                                <div class="card-title">Fail Attempts</div>
                                <div class="card-value">{{ $examFailAttempts }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="400">
                                <div class="card-icon">
                                    <i class="fas fa-question-circle"></i>
                                </div>
                                <div class="card-title">Avg. Questions Answered</div>
                                <div class="card-value">{{ $examAverageQuestionsAnsweredFormatted }}</div>

                            </div>
                        </div>
                    </div>


                    <div class="row g-4 mt-3">
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="100">
                                <div class="card-icon">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div class="card-title">Avg. Time Spent</div>
                                <div class="card-value">{{ $examAverageTimeSpentFormatted }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="200">
                                <div class="card-icon">
                                    <i class="fas fa-star text-warning"></i>
                                </div>
                                <div class="card-title">Avg. Score</div>
                                <div class="card-value">{{ $examAverageScoreFormatted }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="300">
                                <div class="card-icon">
                                    <i class="fas fa-trophy text-primary"></i>
                                </div>
                                <div class="card-title">High Score</div>
                                <div class="card-value">{{ $examHighScore }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="400">
                                <div class="card-icon">
                                    <i class="fas fa-arrow-down text-danger"></i>
                                </div>
                                <div class="card-title">Low Score</div>
                                <div class="card-value">{{ $examMinScore }}</div>

                            </div>
                        </div>
                    </div>


                    <div class="row g-4 mt-3">
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="100">
                                <div class="card-icon">
                                    <i class="fas fa-percent"></i>
                                </div>
                                <div class="card-title">Avg. Percentage</div>
                                <div class="card-value">{{ $examAveragePercentageFormatted }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="200">
                                <div class="card-icon">
                                    <i class="fas fa-bullseye"></i>
                                </div>
                                <div class="card-title">Avg. Accuracy</div>
                                <div class="card-value">{{ $examAverageAccuracyFormatted }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="300">
                                <div class="card-icon">
                                    <i class="fas fa-tachometer-alt"></i>
                                </div>
                                <div class="card-title">Avg. Speed</div>
                                <div class="card-value">{{ $examAverageSpeedFormatted }}</div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="tab-pane fade" id="quizzes" role="tabpanel" aria-labelledby="quizzes-tab">
                <div class="container mb-5">

                    <div class="row g-4">
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="100">
                                <div class="card-icon">
                                    <i class="fas fa-tasks"></i>
                                </div>
                                <div class="card-title">Total Attempts</div>
                                <div class="card-value">{{ $quizTotalAttempts }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="200">
                                <div class="card-icon">
                                    <i class="fas fa-check-circle text-primary"></i>
                                </div>
                                <div class="card-title">Pass Attempts</div>
                                <div class="card-value">{{ $quizPassAttempts }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="300">
                                <div class="card-icon">
                                    <i class="fas fa-times-circle text-danger"></i>
                                </div>
                                <div class="card-title">Fail Attempts</div>
                                <div class="card-value">{{ $quizFailAttempts }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="400">
                                <div class="card-icon">
                                    <i class="fas fa-question-circle"></i>
                                </div>
                                <div class="card-title">Avg. Questions Answered</div>
                                <div class="card-value">{{ $quizAverageQuestionsAnsweredFormatted }}</div>

                            </div>
                        </div>
                    </div>


                    <div class="row g-4 mt-3">
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="100">
                                <div class="card-icon">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div class="card-title">Avg. Time Spent</div>
                                <div class="card-value">{{ $quizAverageTimeSpentFormatted }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="200">
                                <div class="card-icon">
                                    <i class="fas fa-star text-warning"></i>
                                </div>
                                <div class="card-title">Avg. Score</div>
                                <div class="card-value">{{ $quizAverageScoreFormatted }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="300">
                                <div class="card-icon">
                                    <i class="fas fa-trophy text-primary"></i>
                                </div>
                                <div class="card-title">High Score</div>
                                <div class="card-value">{{ $quizHighScore }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="400">
                                <div class="card-icon">
                                    <i class="fas fa-arrow-down text-danger"></i>
                                </div>
                                <div class="card-title">Low Score</div>
                                <div class="card-value">{{ $quizMinScore }}</div>

                            </div>
                        </div>
                    </div>


                    <div class="row g-4 mt-3">
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="100">
                                <div class="card-icon">
                                    <i class="fas fa-percent"></i>
                                </div>
                                <div class="card-title">Avg. Percentage</div>
                                <div class="card-value">{{ $quizAveragePercentageFormatted }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card bottom-right-card" data-aos="fade-up" data-aos-delay="200">
                                <div class="card-icon">
                                    <i class="fas fa-bullseye"></i>
                                </div>
                                <div class="card-title">Avg. Accuracy</div>
                                <div class="card-value">{{ $quizAverageAccuracyFormatted }}</div>

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="dashboard-card" data-aos="fade-up" data-aos-delay="300">
                                <div class="card-icon">
                                    <i class="fas fa-tachometer-alt"></i>
                                </div>
                                <div class="card-title">Avg. Speed</div>
                                <div class="card-value">{{ $quizAverageSpeedFormatted }}</div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    .dashboard-card {
        transition: background-color 0.3s ease;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        text-align: center;
        padding: 20px;
        background-color: #f8f9fa;
    }

    .dashboard-card:hover {
        background-color: #608ac4;
        color: #fff;
    }

    .bottom-right-card {
        background-color: #e6f0fa;
    }


    .card-icon {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .card-title {
        font-size: 0.9rem;
        color: #6c757d;
        text-transform: uppercase;
    }

    .card-value {
        font-size: 1.5rem;
        font-weight: bold;
        margin-top: 10px;
    }
  
</style>