@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @include('assesm.trskrk._partials.header')
    <div class="container-fluid py-4 pt-0">
        <div class="row">
            @include('assesm.trskrk._partials.participant_sidebar')
            <div class="col-lg-9 col-md-8">
                @include('assesm.trskrk._partials.question_card')
                @include('assesm.trskrk._partials.answer_area')
            </div>
        </div>
    </div>
    @include('assesm.trskrk._partials.styles')
@endsection

@push('js')
    <script>
        (function() {
            const trskrkShowUI = {
                bobot: {{ $question->weight }},
                bindSubmitLock() {
                    $('#grading-form').off('submit.trskrkShow').on('submit.trskrkShow', function() {
                        $('.btn-grading-submit').attr('disabled', true).html(
                            '<i class="fas fa-spinner fa-spin me-2"></i> Memproses...');
                    });
                },
                bindScoreValidation() {
                    $('input[name=score]').off('input.trskrkShow change.trskrkShow').on('input.trskrkShow change.trskrkShow', function() {
                        let val = parseFloat($(this).val());
                        if (isNaN(val)) {
                            $('#score-contribution').text('--');
                            return;
                        }
                        if (val > trskrkShowUI.bobot) {
                            $(this).val(trskrkShowUI.bobot);
                            val = trskrkShowUI.bobot;
                            Swal.fire({
                                icon: 'warning',
                                title: 'Batas Nilai',
                                text: 'Skor tidak boleh melebihi bobot soal (' + trskrkShowUI.bobot + ').',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        }
                        if (val < 0) {
                            $(this).val(0);
                            val = 0;
                        }
                        $('#score-contribution').text(val + ' poin');
                    });
                },
                init() {
                    this.bindSubmitLock();
                    this.bindScoreValidation();
                    $('input[name=score]').trigger('change');
                }
            };

            window.trskrkShowUI = trskrkShowUI;
            trskrkShowUI.init();
        })();
    </script>
@endpush