@extends('frontend.layouts.app')
@php
    $cookie = \Illuminate\Support\Facades\Cookie::get('EuserSelectedanswers');
    $userSelectedAnswers = json_decode($cookie, true);
    $username = Auth::user()->name;

    $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) {
  .exam-history {
    height: 350px !important;
  }
  
  
  
}
</style>


@endpush
@section('content')
<div class="wrapper">
    <section class="space-top space-extra2-bottom history-back">
        <div class="container">
            <div 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:700px;"
                    class="p-5 mb-5 col-xl-4 col-lg-4 order-lg-2 question-first-part exam-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  --}}


                {{-- fileter part start  --}}

                <div>
                    <div class="d-flex justify-content-between">
                     <p class="mt-5">FILTER QUESTIONS</p>
                    </div>
                    <hr style="margin-top: -10px">
                    <span class="mt-4">MARKED</span>
                    <ul class="mt-2 mb-4 nav">
                        <li class="nav-item">
                            <a class="filter_design" href="#">ALL</a>
                        </li>
                        <li class="nav-item">
                            <a class="filter_design" href="#">CORRECT</a>
                        </li>
                        <li class="nav-item">
                            <a class="filter_design" href="#">INCORRECT</a>
                        </li>
                    </ul>

                    

                </div>


                      {{-- fileter part End  --}}
                </div>

                <!-- Right Content Area -->
                <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:700px; overflow-y: scroll;"
                class="mt-5 col-xl-8 col-lg-8 order-lg-2 p-4 question-second-part">
                    <h5>Mock Exam History</h5>
                    <p>Date Completed: {{date('d-m-y')}}</p>


                    <ul class="list-group w-100" id="totalQuestion">
                        @foreach ($questions as $question)
                            @php
                                $selectedAnswer = $userSelectedAnswers[$question->id] ?? null;
                                $correctAnswer = $question->answer->where('is_correct', '1')->first();

                            @endphp

                            <a href="{{ route('frontend.question.review',['username'=> $username,'id'=>$question->id])}}">
                            <li class="mt-2 list-group-item selected question-item" style="cursor:pointer; border-radius:5px">
                                @if ($selectedAnswer && $correctAnswer && $selectedAnswer == $correctAnswer->id)
                                    <span class="icon-circle correct-icon">
                                        <i class="fa-solid fa-check"></i>
                                    </span>
                                @elseif ($selectedAnswer)
                                    <span class="icon-circle incorrect-icon">
                                        <i class="fa-solid fa-xmark"></i>
                                    </span>
                                @else
                                    <span class="icon-circle neutral-icon">
                                        <i class="fa-solid fa-minus"></i>
                                    </span>
                                @endif
                                {{ $question->question }}
                            </li>
                            </a>
                        @endforeach
                    </ul>

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

</div>
@endsection

@push('js')
    <script>

    </script>
@endpush