@extends('frontend.layouts.app')
@php
$status = \Illuminate\Support\Facades\Cookie::get('Rstatus');

$cookie = \Illuminate\Support\Facades\Cookie::get('userSelectedanswers');
$userSelectedAnswers = json_decode($cookie, true);



$totalQuestions = count($questions);
$correctCount = 0;
$incorrectCount = 0;

foreach ($questions as $question) {
$selectedAnswer = $userSelectedAnswers[$question->id] ?? null;

$correctAnswer = $question->answer->where('is_correct', '1')->first();

if ($selectedAnswer && $correctAnswer && $selectedAnswer == $correctAnswer->id) {
$correctCount++;
} elseif ($selectedAnswer) {
$incorrectCount++;
}
}
@endphp

@push('css')
<style>
    .question-item {
        border: 1px solid #ddd;
        /* 1px border around each question */
        padding: 10px;
        border-radius: 5px;
        /* Optional: adds slight rounding to the corners */
    }

    .icon-circle {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #ddd;
        /* 1px border around each icon */
        border-radius: 50%;
        /* Makes the icon area circular */
        margin-right: 10px;
        /* Space between icon and question text */
    }

    .correct-icon {
        color: green;
        border-color: green;
    }

    .incorrect-icon {
        color: red;
        border-color: red;
    }

    .neutral-icon {
        color: #747171;
        border-color: #747171;
    }

    .question-item:hover {
        background-color: #f0f0f0;
        /* Light gray background on hover */
        cursor: pointer;
        /* Changes cursor to pointer on hover */
    }

    .progress-container {
        width: 100%;
        height: 12px;
        background-color: red;
        /* Color for incorrect answers */
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .progress-bar {
        height: 100%;
        background: linear-gradient(to right, green 50%, transparent 50%);
        text-align: center;
        line-height: 20px;
        color: white;
        font-weight: bold;
        border-radius: 10px 0 0 10px;
    }

    .filter_design {
        border: 1px solid #ddd;
        padding: 5px;
        color: inherit;
        text-decoration: none;
        margin-right: 4px
    }

    .history-back {
        background-image: url("{{ asset('/frontend/assets/images/back.jpg') }}");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 770px;
        opacity: 90%;
    }

    @media (max-width: 991.98px) {
        .riv-history {
            height: 350px !important;
        }



    }

</style>


@endpush
@section('content')
<div class="wrapper">
    <section class="space-top space-extra2-bottom history-back">
        <div class="container">
            <div style="margin:0 auto" class="row">
                <!-- Left Sidebar -->

                <div style="margin:0 auto; background:rgb(255, 255, 255); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius:6px; height:200px" class="p-5 mb-5 col-xl-5 col-lg-5 order-lg-2 question-first-part riv-history">

                    {{-- progress bar start  --}}
                    <div class="d-flex justify-content-between">
                        <div>
                            <p>Final Score</p>
                        </div>
                        <div>
                            <p>{{ number_format(($correctCount / $totalQuestions) * 100, 2) }}%</p>
                        </div>
                    </div>
                    <hr style="margin-top: -10px">
                    <span style="float: left" class="correct-icon"><i class="fa-solid fa-check"></i> {{ $correctCount }} </span> <span style="float: right" class="incorrect-icon"> <i class="fa-solid fa-xmark"></i> {{ $totalQuestions }}</span>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: {{ ($correctCount / $totalQuestions) * 100 }}%;"></div>
                    </div>
                    {{-- progress bar End  --}}


                    


                   
                </div>

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

</div>
@endsection

@push('js')
<script>

</script>
@endpush