@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card border-0 shadow-sm mt-3">
                        <div class="row align-items-center">
                            <div class="card-header col-md-auto bg-transparent">
                                <h5 class="mb-0">Essay Grading</h5>
                                <p class="text-xs text-secondary mb-0 mt-1">Monitor essay grading progress and continue reviewing participant answers that are pending review.</p>
                            </div>
                            <div class="col mt-2 mt-md-0">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        @include('assesm.trskrk._partials.filter')
                        @include('assesm.trskrk._partials.data_table')
                        @if($can_manual_recovery ?? false)
                            @include('assesm.trskrk._partials.manual_attempt_modal')
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@include('assesm._partials.jsmenu_push')

@if($can_manual_recovery ?? false)
@push('addjs')
<script>
    const manualAttemptModal = new bootstrap.Modal(document.getElementById('manual-attempt-modal'));
    let manualAttemptExamId = null;
    let manualAttemptBusy = false;

    $('#manual-attempt-modal').on('hide.bs.modal', function(event) {
        if (manualAttemptBusy) {
            event.preventDefault();
        }
    });

    function setManualAttemptBusy(isBusy) {
        manualAttemptBusy = isBusy;
        const $modal = $('#manual-attempt-modal');
        const $button = $('#manual-attempt-submit');

        $modal.toggleClass('manual-recovery-busy', isBusy);
        $modal.find('input, button').prop('disabled', isBusy);

        if (isBusy) {
            $button.html('<i class="fas fa-spinner fa-spin me-2"></i>Memproses Attempt & Answer Rows...');
        } else {
            $button.html('<i class="fas fa-file-signature me-2"></i>Buat Attempt & Answer Rows');
            $button.prop('disabled', $('.manual-attempt-check').length === 0);
        }
    }

    function openManualAttemptRecovery(examId, trainingName) {
        manualAttemptExamId = examId;
        $('#manual-attempt-training').text(trainingName || '-');
        $('#manual-attempt-list').html('<div class="text-center py-4"><i class="fas fa-spinner fa-spin me-2"></i>Memuat peserta...</div>');
        $('#manual-attempt-submit').prop('disabled', true);
        manualAttemptModal.show();

        fetch(`{{ url('trskrk/manual-attempts') }}/${examId}`, {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin'
        })
        .then(async response => {
            const payload = await response.json().catch(() => ({}));
            if (!response.ok) throw new Error(payload.message || 'Gagal mengambil peserta.');
            return payload;
        })
        .then(payload => renderManualAttemptCandidates(payload.participants || []))
        .catch(error => {
            $('#manual-attempt-list').html(`<div class="alert alert-danger mb-0">${$('<div>').text(error.message).html()}</div>`);
        });
    }

    function renderManualAttemptCandidates(participants) {
        if (!participants.length) {
            $('#manual-attempt-list').html('<div class="alert alert-info mb-0">Semua peserta hadir sudah memiliki attempt dan answer rows lengkap.</div>');
            return;
        }

        const rows = participants.map(p => `
            <label class="manual-participant-row d-flex align-items-center border rounded p-3 mb-2 cursor-pointer">
                <input class="form-check-input manual-attempt-check me-3" type="checkbox" value="${$('<div>').text(p.nik).html()}">
                <span class="flex-grow-1"><strong>${$('<div>').text(p.name).html()}</strong><br><small class="text-muted">${$('<div>').text(p.nik).html()}</small></span>
                <span class="badge ${p.attempt_id ? 'bg-warning' : 'bg-secondary'}">${p.attempt_id ? `${p.answer_count}/${p.question_count} Answers` : 'No Attempt'}</span>
            </label>
        `).join('');

        $('#manual-attempt-list').html(rows);
        $('#manual-attempt-submit').prop('disabled', false);
    }

    $(document).on('click', '#manual-attempt-select-all', function() {
        $('.manual-attempt-check').prop('checked', true);
    });

    $(document).on('click', '#manual-attempt-submit', function() {
        const participants = $('.manual-attempt-check:checked').map(function() { return this.value; }).get();
        if (!participants.length) {
            Swal.fire({ icon: 'warning', title: 'Pilih peserta', text: 'Pilih minimal satu peserta.' });
            return;
        }

        setManualAttemptBusy(true);
        fetch(`{{ url('trskrk/manual-attempts') }}/${manualAttemptExamId}`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: JSON.stringify({ participants })
        })
        .then(async response => {
            const payload = await response.json().catch(() => ({}));
            if (!response.ok || !payload.success) throw new Error(payload.message || 'Recovery gagal.');
            return payload;
        })
        .then(payload => {
            setManualAttemptBusy(false);
            return Swal.fire({ icon: 'success', title: 'Berhasil', text: payload.message })
                .then(() => window.location.reload());
        })
        .catch(error => {
            setManualAttemptBusy(false);
            Swal.fire({ icon: 'error', title: 'Recovery gagal', text: error.message });
        });
    });
</script>
@endpush
@endif