@extends('components.dashboard.layouts.master')
@section('title', __('Submission Details'))

@section('styles')
    <style>
        .question-title{font-size:1.5rem;font-weight:bold;letter-spacing:.5px;color:white;margin:0}
        .pointer{cursor:pointer}

        /* badges */
        .badge-chip{display:inline-flex;align-items:center;height:24px;padding:0 .5rem;border-radius:999px;font-size:.75rem}
        .badge-blue{background:#e9f1ff;color:#0b57d0}
        .badge-green{background:#e9fbea;color:#1e7e34}
        .badge-red{background:#ffe9ea;color:#d92d20}
        .badge-gray{background:#f1f5f9;color:#475569}

        /* meta grid */
        .q-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1rem}
        .q-meta .item{background:#f7f8fa;border:1px solid #e7eaf0;border-radius:10px;padding:.5rem .75rem;font-size:.875rem}
        .q-meta .label{color:#6b7280;display:block;margin-bottom:.25rem;font-weight:600}
        .q-meta .value{display:inline-flex;align-items:center;gap:.35rem;font-weight:600}

        /* choices */
        .choices{border:1px solid #d6e0ef;border-radius:12px;overflow:hidden}
        .choice{display:flex;align-items:center;gap:.75rem;padding:.65rem .9rem;border-top:1px solid #eef2f7;background:#fff}
        .choice:first-child{border-top:none}
        .choice .num{width:2rem;height:2rem;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;background:#f3f6fb;color:#3b82f6}
        .choice .text{flex:1;font-size:.95rem}

        /* highlight */
        .student-answer.highlight-correct {
            background: #e9fbea;
            color: #1e7e34;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
        }
        .student-answer.highlight-wrong {
            background: #ffe9ea;
            color: #d92d20;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
        }

        /* images */
        .opt-img{
            width:80px;height:80px;object-fit:cover;
            border-radius:8px;border:2px solid #e5e7eb;margin-right:.75rem
        }
        .q-img{max-width:250px;margin:.35rem 0 .6rem;border-radius:10px;border:1px solid #e5e7eb}

        /* modal */
        #imageModal{display:none;position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;
            background:rgba(0,0,0,.85);justify-content:center;align-items:center;flex-direction:column}
        #imageModal .modal-content-box{background:#fff;padding:20px;border-radius:10px;max-width:600px;text-align:center}
        #imageModal img{max-width:100%;max-height:70vh;border-radius:8px;box-shadow:0 0 20px rgba(0,0,0,.7)}
        #imageModalLabel{margin-top:10px;font-size:1rem}
        #imageModal .closeBtn{position:absolute;top:20px;right:30px;font-size:40px;color:#fff;cursor:pointer;font-weight:bold;user-select:none}

        .label-correct{color:#1e7e34;background:#e9fbea;padding:4px 8px;border-radius:5px;display:inline-block;margin:2px}
        .label-wrong{color:#d92d20;background:#ffe9ea;padding:4px 8px;border-radius:5px;display:inline-block;margin:2px}
    </style>
@endsection

@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-body">

                <x-dashboard.layouts.breadcrumb now="{{ __('Submission Details') }}">
                    <li class="breadcrumb-item">
                        <a href="{{ route('teacher.questions-bank.index') }}">{{ __('Questions bank') }}</a>
                    </li>
                </x-dashboard.layouts.breadcrumb>

                <section id="submission-details" class="mt-3">
                    <div class="row justify-content-center">
                        <div class="col-md-11">
                            <div class="card shadow rounded">

                                <div class="card-header bg-primary d-flex justify-content-center" style="padding-bottom:20px;">
                                    <h5 class="question-title">{{ __('Submission Details') }}</h5>
                                </div>

                                <div class="card-body">
                                    {{-- Header meta --}}
                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <strong>{{ __('Exam') }}:</strong>
                                            <p class="mb-0">{{ $submission->exam->title ?? ('#'.$submission->exam_id) }}</p>
                                        </div>
                                        <div class="col-md-4">
                                            <strong>{{ __('Student') }}:</strong>
                                            <p class="mb-0">{{ $submission->student->name ?? '-' }}</p>
                                        </div>
                                        <div class="col-md-4">
                                            <strong>{{ __('Submitted At') }}:</strong>
                                            <p class="mb-0">{{ $submission->updated_at }}</p>
                                        </div>
                                    </div>

                                    <hr>

                                    {{-- Questions table --}}
                                    <div class="table-responsive">
                                        <table class="table table-bordered align-middle">
                                            <thead>
                                            <tr>
                                                <th style="width:60px">#</th>
                                                <th>{{ __('Question') }}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($submission->spacificStudentSubmissionQuestions as $idx => $row)
                                                @php
                                                    $q = $row->question;
                                                    $isMcq = $q && $q->question_type === 'mcq';
                                                    $studentOptionId = $isMcq ? (string)($row->answer ?? '') : null;
                                                    $questionImg = $q->getFirstMediaUrl('image') ?? null;
                                                    $correctAnswerText = $isMcq ? optional($q->options->firstWhere('is_correct',1))->answer : $q->answer;
                                                @endphp

                                                <tr>
                                                    <td>{{ $idx + 1 }}</td>
                                                    <td>
                                                        <div class="fw-semibold mb-2">{{ $q->question_text ?? '-' }}</div>

                                                        @if($questionImg)
                                                            <img src="{{ $questionImg }}" alt="{{ __('Question Image') }}"
                                                                 class="q-img pointer"
                                                                 onclick="openImageModal('{{ $questionImg }}', null, true, false, '{{ $correctAnswerText }}', null)">
                                                        @endif

                                                        {{-- Meta --}}
                                                        <div class="q-meta">
                                                            <div class="item">
                                                                <span class="label">{{ __('Question Type') }}</span>
                                                                <span class="value">
                                                                    <span class="badge-chip badge-blue">{{ __($q->question_type ?? '-') }}</span>
                                                                </span>
                                                            </div>
                                                            <div class="item">
                                                                <span class="label">{{ __('Question Score') }}</span>
                                                                <span class="value">
                                                                    <span class="badge-chip badge-blue">{{ $q->score ?? 0 }}</span>
                                                                </span>
                                                            </div>
                                                            <div class="item">
                                                                <span class="label">{{ __('Difficulty Level') }}</span>
                                                                @php
                                                                    $diffChip = match($q->difficulty_level ?? null) {
                                                                        'easy'   => 'badge-green',
                                                                        'medium' => 'badge-gray',
                                                                        'hard'   => 'badge-red',
                                                                        default  => 'badge-gray',
                                                                    };
                                                                @endphp
                                                                <span class="value">
                                                                    <span class="badge-chip {{ $diffChip }}">{{ __($q->difficulty_level ?? '-') }}</span>
                                                                </span>
                                                            </div>
                                                        </div>

                                                        {{-- MCQ options --}}
                                                        @if($isMcq && $q->options && $q->options->count())
                                                            <div class="mb-2 fw-bold">{{ __('Choices') }}:</div>
                                                            <div class="choices">
                                                                @foreach ($q->options as $opt)
                                                                    @php
                                                                        $isCorrect = (bool) $opt->is_correct;
                                                                        $isChosen  = (string)$opt->id === $studentOptionId;
                                                                        $optImg    = $opt->getFirstMediaUrl('answers_image') ?? null;

                                                                        $class = '';
                                                                        if($isCorrect){
                                                                            $class = 'highlight-correct';
                                                                        } elseif($isChosen && !$isCorrect){
                                                                            $class = 'highlight-wrong';
                                                                        }
                                                                    @endphp

                                                                    <div class="choice">
                                                                        @if($optImg)
                                                                            <img src="{{ $optImg }}" alt="{{ __('Option Image') }}"
                                                                                 class="opt-img pointer"
                                                                                 onclick="openImageModal('{{ $optImg }}','{{ $opt->answer }}', {{ $isCorrect ? 'true' : 'false' }}, {{ $isChosen ? 'true' : 'false' }}, '{{ $correctAnswerText }}', {{ $isChosen ? 'true' : 'false' }})">
                                                                        @endif
                                                                        <div class="text">
                                                                            <div class="student-answer {{ $class }}">{{ $opt->answer }}</div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        @elseif(!$isMcq && !empty($q->answer))
                                                            {{-- Non-MCQ answer --}}
                                                            <div class="mt-2">
                                                                <span class="fw-bold">{{ __('Correct Answer') }}:</span>
                                                                <span class="student-answer highlight-correct">{{ $q->answer }}</span>
                                                            </div>
                                                            @if($row->answer)
                                                                <div class="mt-1">
                                                                    <span class="fw-bold">{{ __('Student Answer') }}:</span>
                                                                    <span class="student-answer {{ trim($row->answer) === trim($q->answer) ? 'highlight-correct' : 'highlight-wrong' }}">
                                                                        {{ $row->answer }}
                                                                    </span>
                                                                </div>
                                                            @endif
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>{{-- /card-body --}}
                            </div>
                        </div>
                    </div>
                </section>

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

    {{-- GLOBAL Image Modal --}}
    <div id="imageModal">
        <span class="closeBtn" onclick="closeImageModal()">&times;</span>
        <div class="modal-content-box">
            <img id="imageModalImg" src="" alt="Preview">
            <div id="imageModalLabel" class="mt-2 text-center fw-bold"></div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function openImageModal(src, answer, isCorrect, isChosen, correctAnswer, chosen){
            const m = document.getElementById('imageModal');
            const img = document.getElementById('imageModalImg');
            const label = document.getElementById('imageModalLabel');

            img.src = src;
            label.innerHTML = "";

            if(isCorrect && isChosen){
                label.innerHTML = `<span class="label-correct">✔ ${answer} (Correct Answer)</span>`;
            } else if(isChosen && !isCorrect){
                label.innerHTML = `
                    <span class="label-wrong">✘ ${answer} (Your Answer)</span><br>
                    <span class="label-correct">✔ ${correctAnswer} (Correct Answer)</span>
                `;
            } else if(isCorrect && !isChosen){
                label.innerHTML = `<span class="label-correct">✔ ${answer} (Correct Answer)</span>`;
            }
            m.style.display = 'flex';
        }
        function closeImageModal(){
            const m = document.getElementById('imageModal');
            document.getElementById('imageModalImg').src = '';
            document.getElementById('imageModalLabel').innerHTML = '';
            m.style.display = 'none';
        }
        document.getElementById('imageModal')?.addEventListener('click', function(e){
            if(e.target.id === 'imageModal'){ closeImageModal(); }
        });
    </script>
@endsection