@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: 800px;
        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:680px; weight:350px" class="p-5 mb-5 col-xl-5 col-lg-5 order-lg-2 question-first-part riv-history">

                 <div style="margin: 0 auto; text-align:center">
                    <div>
                        <img style="width:265px; height:175px; margin-bottom:35px; margin-top:-30px;" src="{{ asset('/frontend/assets/images/res.jpg') }}" />
                    </div>

                    
                 
                 </div>

                 <div style="margin: 0 auto; text-align:center; margin-bottom:35px">
    <div style="display: flex; justify-content: center;">
        <div style="border: 1px solid orange; border-radius: 15px; height: 100px; text-align: center; padding: 1rem; margin-right: 1.5rem;">
            <h4 style="margin-bottom: 0;">{{ $totalQuestions }}</h4>
            <p style="margin-bottom: 0;">Total</p>
        </div>
        <div style="border: 1px solid orange; border-radius: 15px; height: 100px; text-align: center; padding: 1rem; margin-right: 1.5rem;">
            <h4 style="margin-bottom: 0;">{{ $correctCount }}</h4>
            <p style="margin-bottom: 0;">Correct</p>
        </div>
        <div style="border: 1px solid orange; border-radius: 15px; height: 100px; text-align: center; padding: 1rem;">
            <h4 style="margin-bottom: 0;">{{$incorrectCount}}</h4>
            <p style="margin-bottom: 0;">InCorrect</p>
        </div>
    </div>
</div>


                 

                    {{-- progress bar start  --}}
                    <div class="d-flex justify-content-between">
                        <div>
                            <p>Final Score</p>
                        </div>
                        <div>
                            <p>{{ number_format(($correctCount / $incorrectCount) * 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> {{$incorrectCount}}</span>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: {{ ($correctCount / $totalQuestions) * 100 }}%;"></div>
                    </div>
                    {{-- progress bar End  --}}


                    <div style="margin: 0 auto; text-align:center; margin-bottom:35px; margin-top:45px; border: 1px solid orange; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; height:149px" class="p-3">
                        <p class="mb-0 text-black">This is our demo revision. Our Premium course show</p>
                        <p> 3 Step process with question overview.</p>
                        <a href="{{route('frontend.course.list')}}" style="background:darkcyan; border:1px solid darkcyan; padding-left:25px; padding-right:25px; color:white; font-size:18px; padding-top:6px; padding-bottom:6px; border-radius:5px; cursor:pointer;" class="me-2">Try Premium Course</a>
                    <div>


                   
                </div>

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

</div>
@endsection

@push('js')
<script>

</script>
@endpush