@extends('layouts.app')

@section('content')
<div class="page-heading">
    <h3>Detail Jawaban</h3>
    <p class="text-subtitle text-muted">RFID: {{ $rfid }} | ID Soal: {{ $id_daftar_soal }}</p>

    <script>
        // Menampilkan alert jika ada session message
        @if(session('success'))
            Swal.fire({
                position: 'top-center',
                icon: 'success',
                title: "{{ session('success') }}",
                showConfirmButton: false,
                timer: 1000
            });
        @endif

        @if(session('error'))
            Swal.fire({
                position: 'top-center',
                icon: 'error',
                title: "{{ session('error') }}",
                showConfirmButton: false,
                timer: 1000
            });
        @endif
    </script>

    <section class="section">
        <div class="card">
            <div class="card-body">
                @if($jawaban->isEmpty())
                    <p>Tidak ada jawaban ditemukan.</p>
                @else
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr class="text-center">
                                    <th>No</th>
                                    <th width="450px">Soal</th>
                                    <th width="200px">Jawaban</th>
                                    <th width="200px">Kunci</th>
                                    <th>Hasil</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($jawaban as $item)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $item->soal->pertanyaan }}</td>

                                    @if($item->soal->tipe_soal == 'isian')
                                        <td>{{ $item->jawaban }}</td>
                                        <td>{{ $item->jawaban_benar }}</td>
                                        <td class="text-center">
                                            <span class="editable-badge badge {{ $item->hasil_isian ? 'bg-success' : 'bg-danger' }}"
                                                  data-id="{{ $item->id_jawaban }}"
                                                  data-value="{{ $item->hasil_isian ?? '' }}">
                                                {{ $item->hasil_isian ?? 'Belum dinilai' }}
                                            </span>
                                        </td>
                                    @else
                                        <td>{{ $item->isiJawaban->pilihan ?? '-' }}</td>
                                        <td>{{ $item->isiKunci->pilihan ?? '-' }}</td>
                                        <td class="text-center">
                                            <span class="badge {{ $item->hasil ? 'bg-success' : 'bg-danger' }}">
                                                {{ $item->hasil ? 'Benar' : 'Salah' }}
                                            </span>
                                        </td>
                                    @endif
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </section>
</div>

<!-- Inline Editing Script -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll('.editable-badge').forEach(function (badge) {
            badge.addEventListener('click', function () {
                let currentValue = this.dataset.value || '';
                let id = this.dataset.id;
                let input = document.createElement('input');
                input.type = 'number';
                input.value = currentValue;
                input.className = 'form-control';
                input.style.width = '100px';
                input.style.display = 'inline-block';

                this.innerHTML = '';
                this.appendChild(input);

                // Simpan nilai awal
                let originalValue = currentValue;

                // Fokus setelah sedikit delay agar tidak langsung blur
                setTimeout(() => {
                    input.focus();
                    input.select();
                }, 0);

                input.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        if (input.value !== originalValue) {
                            submitValue(id, input.value, badge);
                        } else {
                            badge.innerText = originalValue || 'Belum dinilai';
                        }
                    }
                });

                input.addEventListener('blur', () => {
                    if (input.value !== originalValue) {
                        submitValue(id, input.value, badge);
                    } else {
                        badge.innerText = originalValue || 'Belum dinilai';
                    }
                });
            });


        });

        function submitValue(id, value, badge) {
            fetch(`/jawaban/update-hasil-isian/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ hasil_isian: value })
            })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'ok') {
                    badge.innerText = value || 'Belum dinilai';
                    badge.classList.remove('bg-danger', 'bg-success');
                    badge.classList.add(value ? 'bg-success' : 'bg-danger');
                    badge.dataset.value = value;

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Nilai berhasil diperbarui',
                        timer: 1000,
                        showConfirmButton: false
                    });
                } else {
                    throw new Error(data.message || 'Gagal update');
                }
            })
            .catch(() => {
                badge.innerText = badge.dataset.value || 'Belum dinilai';
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: 'Terjadi kesalahan saat menyimpan nilai'
                });
            });
        }
    });
</script>
@endsection