{{-- trskrk/_partials/questions_table.blade.php
    DataTable listing essay questions for trskrk/questions.
    Used by: trskrk/questions.blade.php
--}}
<div class="row px-4 py-2 mt-3">
    <div class="table-responsive">
        <table class="table display" id="list_{{ $dmenu }}">
            <thead class="thead-light" style="background-color: #00b7bd4f;">
                <tr>
                    <th width="110">Action</th>
                    <th>Questions</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Progress</th>
                    <th class="text-center">Corrections</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($table_detail as $item)
                    <tr>
                        <td class="text-sm">
                            <button class="btn btn-primary btn-sm mb-0 px-3"
                                onclick="window.location='{{ url($url_menu . '/show/' . rawurlencode(encrypt($item->id))) }}?exam_id={{ $item->exam_id }}'"
                                title="koreksi">
                                <i class="fas fa-edit"></i>
                                <span class="font-weight-bold"> Corrections</span>
                            </button>
                        </td>
                        <td class="text-sm">
                            <p class="text-sm text-dark mb-0 p-3 border-radius-sm bg-gray-100"
                                style="white-space: normal; max-width: 500px;">
                                {{ $item->question_text }}
                            </p>
                        </td>
                        <td class="text-sm text-center">
                            @if ($item->status == 'progress')
                                <span class="badge badge-sm bg-warning">Progress</span>
                            @elseif($item->status == 'unfinished')
                                <span class="badge badge-sm bg-danger">Unfinished</span>
                            @elseif($item->status == 'complete')
                                <span class="badge badge-sm bg-success">Complete</span>
                            @elseif($item->status == 'no_data')
                                <span class="badge badge-sm bg-danger">Answer Data Missing</span>
                            @endif
                        </td>
                        <td class="text-sm text-center">
                            <div class="d-flex flex-column align-items-center">
                                <span class="text-xs font-weight-bold mb-1">{{ $item->progress }}%</span>
                                <div class="progress" style="width: 80px; height: 6px;">
                                    <div class="progress-bar {{ $item->status == 'complete' ? 'bg-success' : 'bg-info' }}"
                                        role="progressbar" style="width: {{ $item->progress }}%;"></div>
                                </div>
                            </div>
                        </td>
                        <td class="text-sm text-center">
                            <span class="font-weight-bold">{{ $item->corrected_count }}/{{ $item->total_participants }}</span><br>
                            <small class="text-xs text-secondary">Participant</small>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>