@extends('layout.layout')

@section('content')
    <div class="container py-3">
        <div class="card shadow-sm border-0 rounded-5">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="mb-0 fw-bold">Quiz Results</div>
            </div>
            <div class="card-body">
                {{-- Result Summary --}}
                <div class="row g-3 mb-3">
                    <div class="col-md-3">
                        <div class="p-3 rounded text-center">
                            <div class="fw-bold text-secondary">Time Taken</div>
                            <div class="fs-5 fw-bold">{{ $submission->time_taken_seconds ?? '' }}s</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-3 rounded text-center">
                            <div class="fw-bold text-secondary">Score</div>
                            <div class="fs-5 fw-bold">{{ $submission->score ?? 0 }} / {{ $submission->total_marks ?? 0 }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-3 rounded text-center">
                            <div class="fw-bold text-secondary">Percentage</div>
                            <div class="fs-5 text-primary fw-bold">
                                {{ number_format(($submission->score / max($submission->total_marks, 1)) * 100, 2) }}%
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-3 rounded text-center">
                            <div class="fw-bold text-secondary">Status</div>
                            <div class="fs-5 fw-bold {{ $submission->passed == 1 ? 'text-success' : 'text-danger' }}">
                                {{ $submission->passed == 1 ? 'Pass' : 'Fail' }}
                            </div>
                        </div>

                    </div>
                </div>

                {{-- Detailed Feedback --}}
                <div class="fw-bold mb-3 fs-3">Details</div>
                <div class="table-responsive">
                    <table
                        class="table table-bordered table-sm table bordered-table sm-table mb-0 align-middle text-center">
                        <thead class="">
                            <tr>
                                <th class="text-center">Question</th>
                                <th class="text-center">Your Answer</th>
                                {{-- <th class="text-center">Correct Answer</th> --}}
                                <th class="text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($feedback as $item)
                                <tr>
                                    <td class="text-start">{{ $item['question'] ?? '' }}</td>
                                    <td>{{ is_array($item['answer']) ? implode(', ', $item['answer']) : $item['answer'] }}
                                    </td>
                                    {{-- <td>{{ is_array($item['correct_answer']) ? implode(', ', $item['correct_answer']) :
                                        $item['correct_answer'] }}
                                    </td> --}}
                                    <td>
                                        @if ($item['is_correct'])
                                            <span class="badge bg-success">Correct</span>
                                        @else
                                            <span class="badge bg-danger">Wrong</span>
                                        @endif
                                    </td>

                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            window.onpopstate = function (event) {
                window.location.href = "{{ route('showAssignedQuizzes') }}";
            };

            history.pushState(null, "", location.href);

            // عند الضغط على زر الرجوع
            window.addEventListener("popstate", function () {
                window.location.replace("{{ route('showAssignedQuizzes') }}");
            });

            // معالجة حالة الرجوع من Back-Forward Cache
            window.addEventListener("pageshow", function (event) {
                if (event.persisted) {
                    window.location.replace("{{ route('showAssignedQuizzes') }}");
                }
            });
        });
    </script>
@endpush