@extends('layout.layout')

@php($assessmentResults = $assessmentResults ?? [])
@php($score = (float) ($assessmentResults['score'] ?? $submission->score ?? 0))
@php($totalMarks = (float) ($assessmentResults['total_marks'] ?? $submission->total_marks ?? 0))
@php($percentage = array_key_exists('percentage', $assessmentResults) ? (float) $assessmentResults['percentage'] : ($submission->percentage !== null ? (float) $submission->percentage : ($totalMarks > 0 ? ($score / $totalMarks) * 100 : 0)))
@php($accuracy = (float) ($assessmentResults['accuracy'] ?? $submission->accuracy ?? 0))
@php($passed = array_key_exists('passed', $assessmentResults) ? (bool) $assessmentResults['passed'] : (bool) $submission->passed)

@push('styles')
    <style>
        .assessment-feedback {
            max-width: 1180px;
            margin: 0 auto;
            padding: .5rem 0 1.5rem;
        }

        .assessment-feedback__header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: .5rem;
        }

        .assessment-feedback__title {
            margin: 0;
            color: #111827;
            font-size: 18px !important;
            font-weight: 700;
            line-height: 1.3;
        }

        .assessment-feedback__back {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            min-height: 40px;
            padding: .6rem .9rem;
            border-radius: 8px;
            border: 1px solid #dbe3ef;
            color: #334155;
            background: #fff;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
        }

        .assessment-feedback__back:hover {
            color: #0f172a;
            border-color: #b8c4d6;
        }

        .assessment-summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .85rem;
            margin-bottom: 1rem;
        }

        .assessment-summary__item,
        .assessment-panel {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
        }

        .assessment-summary__item {
            padding: 1rem;
            min-height: 108px;
        }

        .assessment-summary__label {
            color: #64748b;
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .assessment-summary__value {
            margin-top: .45rem;
            color: #111827;
            font-size: 1.35rem;
            font-weight: 800;
            line-height: 1.2;
        }

        .assessment-summary__note {
            margin-top: .25rem;
            color: #94a3b8;
            font-size: .82rem;
        }

        .assessment-status {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: .35rem .7rem;
            border-radius: 999px;
            font-size: .82rem;
            font-weight: 800;
        }

        .assessment-status--pass,
        .assessment-status--correct {
            color: #047857;
            background: #d1fae5;
        }

        .assessment-status--fail,
        .assessment-status--wrong {
            color: #b91c1c;
            background: #fee2e2;
        }

        .assessment-panel {
            overflow: hidden;
        }

        .assessment-panel__head {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: .55rem .85rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .assessment-panel__title {
            margin: 0;
            color: #111827;
            font-size: 18px !important;
            font-weight: 700;
        }

        .assessment-panel__count {
            color: #64748b;
            font-size: .86rem;
            font-weight: 700;
        }

        .assessment-feedback-list {
            display: grid;
            gap: .75rem;
            padding: 1rem;
        }

        .assessment-question {
            border: 1px solid #edf0f5;
            border-radius: 8px;
            background: #fbfdff;
            overflow: hidden;
        }

        .assessment-question__top {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 1rem;
            align-items: start;
            padding: 1rem;
        }

        .assessment-question__number {
            color: #071b3d;
            font-size: .78rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .assessment-question__text {
            margin-top: .25rem;
            color: #111827;
            font-weight: 700;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }

        .assessment-answer {
            margin: 0 1rem 1rem;
            padding: .8rem .9rem;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            background: #fff;
        }

        .assessment-answer__label {
            margin-bottom: .25rem;
            color: #64748b;
            font-size: .78rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .assessment-answer__value {
            color: #1f2937;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }

        .assessment-child {
            margin: 0 1rem 1rem;
            border-left: 3px solid #dbeafe;
        }

        .assessment-empty {
            padding: 2rem 1rem;
            color: #64748b;
            text-align: center;
        }

        @media (max-width: 991px) {
            .assessment-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575px) {
            .assessment-feedback__header,
            .assessment-panel__head {
                flex-direction: column;
            }

            .assessment-feedback__back {
                width: 100%;
                justify-content: center;
            }

            .assessment-summary {
                grid-template-columns: 1fr;
            }

            .assessment-question__top {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@section('content')
    <div class="assessment-feedback">
        <div class="assessment-feedback__header">
            <h1 class="assessment-feedback__title">Exam Results</h1>
            <a class="assessment-feedback__back" href="{{ route('showAssignedExams') }}">
                <i class="ri-arrow-left-line"></i>
                Back to Exams
            </a>
        </div>

        <div class="assessment-summary">
            <div class="assessment-summary__item">
                <div class="assessment-summary__label">Time Taken</div>
                <div class="assessment-summary__value">{{ $submission->time_taken_seconds ?? 0 }}s</div>
            </div>
            <div class="assessment-summary__item">
                <div class="assessment-summary__label">Score</div>
                <div class="assessment-summary__value">{{ number_format($score, 2) }} / {{ number_format($totalMarks, 2) }}</div>
            </div>
            <div class="assessment-summary__item">
                <div class="assessment-summary__label">Percentage</div>
                <div class="assessment-summary__value">{{ number_format($percentage, 2) }}%</div>
                <div class="assessment-summary__note">{{ number_format($accuracy, 2) }}% answer accuracy</div>
            </div>
            <div class="assessment-summary__item">
                <div class="assessment-summary__label">Status</div>
                <div class="assessment-summary__value">
                    <span class="assessment-status {{ $passed ? 'assessment-status--pass' : 'assessment-status--fail' }}">
                        {{ $passed ? 'Pass' : 'Fail' }}
                    </span>
                </div>
            </div>
        </div>

        <div class="assessment-panel">
            <div class="assessment-panel__head">
                <h2 class="assessment-panel__title">Answer Details</h2>
                <div class="assessment-panel__count">{{ count($feedback) }} {{ \Illuminate\Support\Str::plural('question', count($feedback)) }}</div>
            </div>

            <div class="assessment-feedback-list">
                @forelse ($feedback as $item)
                    <div class="assessment-question">
                        <div class="assessment-question__top">
                            <div>
                                <div class="assessment-question__number">Question {{ $loop->iteration }}</div>
                                <div class="assessment-question__text">{{ $item['question'] ?? '' }}</div>
                            </div>
                            <span class="assessment-status {{ !empty($item['is_correct']) ? 'assessment-status--correct' : 'assessment-status--wrong' }}">
                                {{ !empty($item['is_correct']) ? 'Correct' : 'Wrong' }}
                            </span>
                        </div>

                        <div class="assessment-answer">
                            <div class="assessment-answer__label">Your Answer</div>
                            <div class="assessment-answer__value">
                                {{ is_array($item['answer'] ?? null) ? implode(', ', $item['answer']) : ($item['answer'] ?? 'N/A') }}
                            </div>
                        </div>

                        @foreach (($item['children'] ?? []) as $child)
                            <div class="assessment-child">
                                <div class="assessment-question__top">
                                    <div>
                                        <div class="assessment-question__number">Sub-question {{ $loop->iteration }}</div>
                                        <div class="assessment-question__text">{{ $child['question'] ?? '' }}</div>
                                    </div>
                                    <span class="assessment-status {{ !empty($child['is_correct']) ? 'assessment-status--correct' : 'assessment-status--wrong' }}">
                                        {{ !empty($child['is_correct']) ? 'Correct' : 'Wrong' }}
                                    </span>
                                </div>
                                <div class="assessment-answer">
                                    <div class="assessment-answer__label">Your Answer</div>
                                    <div class="assessment-answer__value">
                                        {{ is_array($child['answer'] ?? null) ? implode(', ', $child['answer']) : ($child['answer'] ?? 'N/A') }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @empty
                    <div class="assessment-empty">No feedback is available for this submission.</div>
                @endforelse
            </div>
        </div>
    </div>
@endsection

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

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

            window.addEventListener("popstate", function () {
                window.location.replace("{{ route('showAssignedExams') }}");
            });

            window.addEventListener("pageshow", function (event) {
                if (event.persisted) {
                    window.location.replace("{{ route('showAssignedExams') }}");
                }
            });
        });
    </script>
@endpush