{{-- Answer area (col-xl-7) + Grading form (col-xl-5) --}}
<div class="row">
    @if (!$active_participant)
        <div class="col-12 mb-4">
            <div class="alert alert-warning text-sm font-weight-bold">
                <i class="fas fa-info-circle me-2"></i> There are no participant answers for this question yet.
            </div>
        </div>
    @else
    <div class="col-xl-7 mb-4">
        {{-- Answer Card --}}
        <div class="card shadow-sm border-0 border-radius-xl h-100">
            <div class="card-header pb-0 p-4 bg-white d-flex justify-content-between align-items-center border-bottom">
                <div class="d-flex align-items-center">
                    <h6 class="mb-0 font-weight-bolder text-uppercase text-xs text-secondary tracking-widest">
                        Participant Answare
                    </h6>
                </div>
                <div class="text-end">
                    <span class="text-xxs font-weight-bold text-secondary bg-gray-100 px-2 py-1 border-radius-md">
                        <i class="far fa-calendar-alt me-1"></i> {{ $active_participant->date }}
                    </span>
                </div>
            </div>
            <div class="card-body p-4 bg-light-soft">
                <div class="bg-white p-4 border-radius-lg shadow-none border min-vh-30 position-relative">
                    {{-- Essay text --}}
                    @if($active_participant->answer && trim($active_participant->answer) !== '')
                        <p class="text-sm text-dark font-weight-normal mb-0 line-height-lg"
                            style="white-space: pre-line;">
                            {{ $active_participant->answer }}
                        </p>
                    @else
                        <div class="alert alert-warning text-sm font-weight-bold mb-0">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Tidak ada jawaban di sistem. Periksa lembar ujian manual/kertas peserta, lalu berikan nilai dan feedback.
                        </div>
                    @endif

                    {{-- Essay image --}}
                    @if($active_participant->essay_image)
                        <div class="mt-3 pt-3 border-top">
                            <p class="text-xxs text-uppercase font-weight-bold text-muted mb-2">
                                <i class="fas fa-image me-1"></i> Answer Image Attachment
                            </p>
                            <a href="{{ asset('storage/' . $active_participant->essay_image) }}"
                               target="_blank" title="Klik untuk lihat penuh">
                                <img src="{{ asset('storage/' . $active_participant->essay_image) }}"
                                     class="img-fluid rounded shadow-sm"
                                     style="max-height: 340px; border: 1px solid #e9ecef; cursor: zoom-in;"
                                     alt="Gambar Jawaban">
                            </a>
                            <p class="text-xxs text-muted mt-1">
                                <i class="fas fa-external-link-alt me-1"></i>
                                Click the image to open in a new tab.
                            </p>
                        </div>
                    @endif

                    {{-- Watermark --}}
                    <div class="position-absolute bottom-0 end-0 p-3 opacity-1 pointer-events-none">
                        <i class="fas fa-file-signature fa-4x text-dark"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer p-4 pt-0 border-0 bg-white">
                <div class="d-flex align-items-center bg-gray-50 p-3 border-radius-lg border">
                    <div class="bg-gradient-primary border-radius-md p-2 me-3 shadow-sm d-flex align-items-center justify-content-center"
                        style="width: 40px; height: 40px;">
                        <span class="text-white font-weight-bold text-sm">
                            {{ strtoupper(substr($active_participant->name, 0, 1)) }}
                        </span>
                    </div>
                    <div class="d-flex flex-column justify-content-center">
                        <h6 class="mb-0 text-sm font-weight-bold text-dark">{{ $active_participant->name }}</h6>
                        <p class="mb-0 text-xs text-secondary">Participant</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-5 mb-4">
        {{-- Grading Card --}}
        <div class="card shadow-sm border-0 border-radius-xl h-100">
            <div class="card-header pb-0 p-4 bg-white border-bottom">
                <h6 class="mb-0 font-weight-bolder text-uppercase text-xs text-secondary tracking-widest">
                    Instrument Assessment
                </h6>
            </div>
            <div class="card-body p-4 pt-4">
                <form action="{{ url($url_menu . '/store') }}" method="POST" id="grading-form">
                    @csrf
                    <input type="hidden" name="answer_id" value="{{ $active_participant->id }}">

                    <div class="mb-4">
                        <label class="form-control-label d-flex justify-content-between mb-2">
                            <span class="text-xs font-weight-bolder text-uppercase text-secondary">Final Score</span>
                            <span class="badge bg-soft-primary text-primary px-2 py-1 text-xxs border-radius-pill">
                                Skala 0–{{ $question->weight }} &nbsp;<span class="opacity-6">(Weight: {{ $question->weight }})</span>
                            </span>
                        </label>
                        <div class="input-group input-group-alternative mb-2">
                            <input type="number" name="score"
                                class="form-control text-center font-weight-bolder text-primary fs-4 py-2"
                                value="{{ $active_participant->score }}" max="{{ $question->weight }}" min="0" step="0.1"
                                required placeholder="0">
                            <span class="input-group-text bg-gray-50 font-weight-bold px-3 text-xs">/ {{ $question->weight }}</span>
                        </div>
                        <p class="text-xxs text-secondary mb-0">
                            <i class="fas fa-info-circle me-1"></i>Value given:
                            <span id="score-contribution">–</span> poin (Max {{ $question->weight }})
                        </p>
                    </div>

                    <div class="mb-4">
                        <p class="text-xxs font-weight-bolder text-uppercase text-secondary mb-2">Quick Pick (Score)</p>
                        <div class="d-flex flex-wrap gap-2">
                            @php
                                $presets = [0, round($question->weight * 0.5, 1), round($question->weight * 0.75, 1), round($question->weight * 0.85, 1), $question->weight];
                                $presets = array_unique($presets);
                                sort($presets);
                            @endphp
                            @foreach ($presets as $preset)
                                <button type="button"
                                    class="btn btn-outline-secondary btn-xs mb-0 border-radius-md px-2 py-2 flex-grow-1 font-weight-bold shadow-none"
                                    onclick="$('input[name=score]').val({{ $preset }}).trigger('change');">
                                    {{ $preset }}
                                </button>
                            @endforeach
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <label class="form-control-label text-xs font-weight-bolder text-uppercase text-secondary mb-2">
                            Notes/Feedback
                        </label>
                        <textarea name="feedback" class="form-control border-radius-lg text-sm" rows="5"
                            placeholder="Provide feedback to participants so they understand the reasons for this value...">{{ $active_participant->feedback }}</textarea>
                    </div>

                    <div class="d-grid">
                        <button type="submit"
                            class="btn btn-primary btn-lg border-radius-lg mb-0 shadow-lg text-sm font-weight-bolder py-3 btn-grading-submit">
                            <i class="fas fa-cloud-upload-alt me-2"></i> SAVE ASSESSMENT
                        </button>
                    </div>

                    <div class="mt-3 text-center">
                        <span class="text-xxs text-secondary text-italic">
                            <i class="fas fa-info-circle me-1"></i> The correction results will appear in the participant recap.
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif
</div>