{{-- Container Utama --}}
<div class="row g-0 h-100">
    
    {{-- KOLOM KIRI: LIST SISWA --}}
    <div class="col-md-4 border-end" style="min-height: 400px; max-height: 70vh; overflow-y: auto;">
        <div class="p-3 border-bottom bg-light sticky-top">
            <h6 class="mb-0 fw-bold"><i class="fas fa-users me-2"></i> {{ get_phrase('Student List') }}</h6>
        </div>
        
        <div class="list-group list-group-flush" id="studentList">
            @if($participants->isEmpty())
                <div class="text-center p-5 text-muted small">
                    {{ get_phrase('No participants found.') }}
                </div>
            @else
                @foreach ($participants as $participant)
                    <a href="javascript:void(0);" 
                    class="list-group-item list-group-item-action py-3 student-item"
                    {{-- PERBAIKAN DISINI: Tambahkan parameter ke-3 yaitu $lesson_id --}}
                    onclick="loadStudentSubmission(this, '{{ $participant->id }}', '{{ $lesson_id }}')">
                    
                        <div class="d-flex align-items-center">
                            <div class="me-3 d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold" 
                                style="width: 44px; height: 36px; font-size: 14px;">
                                {{ strtoupper(substr($participant->name, 0, 1)) }}
                            </div>
                            
                            <div class="w-100">
                                <h6 class="mb-0 text-dark" style="font-size: 14px;">{{ $participant->name }}</h6>
                                <small class="text-muted" style="font-size: 12px;">{{ get_phrase('Click to grade') }}</small>
                            </div>
                            <i class="fas fa-chevron-right text-muted small"></i>
                        </div>
                    </a>
                @endforeach
            @endif
        </div>
    </div>

    {{-- KOLOM KANAN: AREA PREVIEW & GRADING --}}
    <div class="col-md-8 bg-white">
        {{-- ID ini penting: target AJAX --}}
        <div id="grading-area" class="h-100 position-relative">
            
            {{-- State Awal (Belum Klik) --}}
            <div class="d-flex flex-column align-items-center justify-content-center h-100 text-center p-5">
                <div class="mb-3 p-4 rounded-circle bg-light">
                    <i class="fi fi-rr-box-open fs-1 text-secondary opacity-50"></i>
                </div>
                <h6 class="text-muted">{{ get_phrase('Select a student to start grading') }}</h6>
            </div>

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

<script>
    "use strict";

function loadStudentSubmission(element, userId, lessonId) {
    // Cegah event default
    event.preventDefault();
    
    // Validasi parameter
    if (!userId || !lessonId) {
        console.error("Missing parameters. User ID:", userId, "Lesson ID:", lessonId);
        alert('Missing parameters');
        return;
    }

    // 1. Visual Active State
    $('.student-item').removeClass('active bg-light');
    $(element).addClass('active bg-light');
    
    // 2. Loading State
    $('#grading-area').html(`
        <div class="d-flex flex-column align-items-center justify-content-center h-100">
            <div class="spinner-border text-primary mb-2" role="status"></div>
            <small class="text-muted">Loading data...</small>
        </div>
    `);

    // Debugging
    console.log("AJAX Call Parameters:");
    console.log("- Lesson ID:", lessonId); 
    console.log("- User ID:", userId);
    console.log("- URL:", "{{ route('admin.project.grading.preview') }}");
    console.log("- CSRF Token:", $('meta[name="csrf-token"]').attr('content'));

    // 3. AJAX Call
    $.ajax({
        type: "GET",
        url: "{{ route('admin.project.grading.preview') }}",
        data: {
            lesson_id: lessonId, 
            user_id: userId
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            console.log("Success Response:", response.substring(0, 200)); // Log 200 karakter pertama
            $('#grading-area').html(response);
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error:", error);
            console.error("Status:", status);
            console.error("Response:", xhr.responseText);
            
            $('#grading-area').html(`
                <div class="alert alert-danger m-3">
                    <h6>Failed to load data</h6>
                    <small>Error: ${error}</small>
                    <br>
                    <small>Check console for details</small>
                </div>
            `);
        }
    });
}
</script>