web-mooc/resources/views/admin/project/grading/preview.blade.php

{{-- HAPUS <div class="row"> jika ada, gunakan div biasa --}}
<div class="h-100">
    
    {{-- KONDISI 1: Belum Submit --}}
    @if(!$submission)
        <div class="d-flex flex-column align-items-center justify-content-center h-100 text-center p-5">
            <div class="mb-3 p-3 bg-light rounded-circle">
                <i class="fas fa-times text-danger fa-2x"></i>
            </div>
            <h5>{{ get_phrase('Not Submitted') }}</h5>
            <p class="text-muted">{{ get_phrase('This student has not submitted the project yet.') }}</p>
        </div>

    {{-- KONDISI 2: Sudah Submit --}}
    @else
        <div class="p-4">
            {{-- Header Status --}}
            <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
                <div>
                    <h5 class="fw-bold mb-1">{{ get_phrase('Project Submission') }}</h5>
                    <small class="text-muted">
                        <i class="far fa-clock me-1"></i> 
                        {{ date('d M Y, H:i', strtotime($submission->created_at)) }}
                    </small>
                </div>
                <div>
                    @if($submission->status == 1)
                        <span class="badge bg-success px-3 py-2">{{ get_phrase('Accepted') }}</span>
                    @elseif($submission->status == 2)
                        <span class="badge bg-danger px-3 py-2">{{ get_phrase('Revision Needed') }}</span>
                    @else
                        <span class="badge bg-warning text-dark px-3 py-2">{{ get_phrase('Pending Review') }}</span>
                    @endif
                </div>
            </div>

            {{-- Link Project --}}
            <div class="mb-4">
                <label class="fw-bold mb-2">{{ get_phrase('Student Project Link') }}</label>
                <div class="input-group">
                    <input type="text" class="form-control bg-light" value="{{ $submission->drive_link }}" readonly>
                    <a href="{{ $submission->drive_link }}" target="_blank" class="btn btn-primary">
                        <i class="fas fa-external-link-alt"></i> {{ get_phrase('Open') }}
                    </a>
                </div>
            </div>

            {{-- Form Grading --}}
            <div class="card border bg-light shadow-none">
                <div class="card-body">
                    <form action="{{ route('admin.project.grading.update', $submission->id) }}" method="post" id="gradingForm">
                        @csrf
                        <h6 class="fw-bold mb-3"><i class="fas fa-check-double me-2"></i>{{ get_phrase('Grading') }}</h6>

                        <div class="mb-3">
                            <div class="btn-group w-100" role="group">
                                <input type="radio" class="btn-check" name="status" id="accept_{{ $submission->id }}" value="1" 
                                    {{ $submission->status == 1 ? 'checked' : '' }} onchange="toggleComment(this)">
                                <label class="btn btn-outline-success" for="accept_{{ $submission->id }}">{{ get_phrase('Passed') }}</label>

                                <input type="radio" class="btn-check" name="status" id="revise_{{ $submission->id }}" value="2" 
                                    {{ $submission->status == 2 ? 'checked' : '' }} onchange="toggleComment(this)">
                                <label class="btn btn-outline-danger" for="revise_{{ $submission->id }}">{{ get_phrase('Revision Needed') }}</label>
                            </div>
                        </div>

                        {{-- Area Komentar dengan WYSIWYG Editor --}}
                        <div id="comment_box_area" style="display: {{ $submission->status == 2 ? 'block' : 'none' }};">
                            <div class="mb-3">
                                <label class="fw-bold text-danger mb-1">
                                    {{ empty($submission->comment) ? get_phrase('Add Revision Notes') : get_phrase('Previous Revision Notes') }} *
                                </label>
                                
                                {{-- Textarea untuk Summernote --}}
                                <textarea name="comment" id="comment_editor" class="form-control">{{ $submission->comment }}</textarea>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100">{{ get_phrase('Save Grading') }}</button>
                    </form>
                </div>
            </div>
        </div>
    @endif
</div>

{{-- Tambahkan CSS Summernote --}}
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

{{-- Tambahkan Script Summernote --}}
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script>
    let commentEditor = null;
    
    function toggleComment(radio) {
        let box = document.getElementById('comment_box_area');
        
        if (radio.value == '2') {
            $(box).slideDown();
            // Inisialisasi editor jika belum diinisialisasi
            initSummernote();
            // Fokus ke editor
            setTimeout(() => {
                if (commentEditor && commentEditor.summernote) {
                    commentEditor.summernote('focus');
                }
            }, 300);
        } else {
            $(box).slideUp();
        }
    }
    
    // Fungsi untuk menginisialisasi Summernote
    function initSummernote() {
        if (!commentEditor) {
            $('#comment_editor').summernote({
                height: 200,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                placeholder: '{{ get_phrase("Explain what needs to be fixed...") }}'
            });
            commentEditor = $('#comment_editor');
        }
    }
    
    // Fungsi untuk validasi form sebelum submit
    $('#gradingForm').on('submit', function(e) {
        const status = $('input[name="status"]:checked').val();
        
        if (status == '2') {
            // Jika status "Revision Needed", pastikan ada konten di editor
            let commentContent = '';
            
            if (commentEditor && commentEditor.summernote) {
                commentContent = commentEditor.summernote('code').trim();
            } else {
                commentContent = $('#comment_editor').val().trim();
            }
            
            // Hapus tag HTML untuk cek konten sebenarnya
            const plainText = commentContent.replace(/<[^>]*>/g, '').trim();
            
            if (plainText === '') {
                e.preventDefault();
                alert('{{ get_phrase("Please add revision notes before submitting.") }}');
                if (commentEditor && commentEditor.summernote) {
                    commentEditor.summernote('focus');
                }
                return false;
            }
        }
    });
    
    // Inisialisasi editor otomatis jika sudah ada komentar sebelumnya dan status adalah "Revision Needed"
    @if($submission && $submission->status == 2 && !empty($submission->comment))
        $(document).ready(function() {
            // Tunggu sebentar agar DOM siap
            setTimeout(() => {
                initSummernote();
            }, 100);
        });
    @endif
    
    // Inisialisasi editor jika comment_box_area langsung terlihat
    $(document).ready(function() {
        @if($submission && $submission->status == 2)
            // Tunggu sedikit agar DOM selesai render
            setTimeout(() => {
                initSummernote();
            }, 200);
        @endif
    });
</script>