@extends('layouts.panel')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            @include('panel.scripts.parts.info')
            <div class="card my-3">
                <form id="form-main" method="POST" action="{{ route('panel.scripts.questions.updatepg') }}" enctype="multipart/form-data">
                    <div class="card-body">
                        <div class="text-center">
                            <h4>Passing Grade</h4>
                        </div>
                        <hr>
                        <dl class="row">
                            @foreach ($headings as $key=>$heading)
                                <input type="hidden" id="script_id[{{ $key }}]" name="script_id[{{ $key }}]" value="{{ $heading->script_id}}">
                                <input type="hidden" id="heading[{{ $key }}]" name="heading[{{ $key }}]" value="{{ $heading->heading }}">
                                <dt class="col-4">{{ $heading->heading ?? $script->title }}</dt>
                                <dd class="col-8"><input type="number" id="passing_grade[{{ $key }}]" name="passing_grade[{{ $key }}]" value="{{ $heading->passing_grade }}"></dd>
                            @endforeach
                        </dl>
                        <div class="btn-group btn-group-sm"> 
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card my-3">
                <div class="card-body">
                    <div class="text-center">
                        <h4>Butir Soal</h4>
                    </div>
                    <hr>
                    <ul class="list-unstyled row">
                    @foreach ($questions->items() as $question)
                        <li class="mb-4 col-12">
                            <div class="d-flex">
                                <div class="me-2">{{ $question->number  }}.</div>
                                <div>{!! $question->sentence !!}</div>
                            </div>
                            <ul class="list-unstyled ps-4">
                            @foreach ($question->choices as $choice)
                                <li>
                                    <div class="d-flex">
                                        <div class="me-2">{{ $choice->key  }}.</div>
                                        <div>{!! $choice->content !!}</div>
                                    </div>
                                </li>
                            @endforeach
                            </ul>
                        </li>   
                    @endforeach
                    </ul>
                </div>
            </div>
            <div class="d-flex justify-content-center">
                {{ $questions->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="{{ asset('vendor/katex/katex.min.css') }}">
@endpush

@push('js')
<script src="{{ asset('vendor/katex/katex.min.js') }}"></script>
<script>
$('form.form-ajax').submit((e)=>{
    e.preventDefault();
    let form    = e.target,
        data    = new FormData(form),
        btn     = $(form).find('[type="submit"]'),
        btnHTML = btn.html();

    $.ajax({
        method  : $(form).attr('method'),
        url     : $(form).attr('action'),
        data    : data,
        contentType: false,
        processData: false,
        beforeSend:()=>{
            btn.prop('disabled',true).addClass('disabled').html('Loading ...');
        },
        error:(xhr)=>{
            btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
            let errorFields = xhr.responseJSON.errors;
            let toast = new bootstrap.Toast(document.getElementById('toast-error'));
            toast.show();
            $.each(errorFields, (key, value)=>{
                $(`[name="${key}"]`).addClass('is-invalid');
                $(`[name="${key}"]`).next('.invalid-feedback').text(value[0]);
            });
        },
        success: (response)=>{
            btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
            let toast = new bootstrap.Toast(document.getElementById('toast-success'));
            toast.show();
            setTimeout(()=>{
                window.location.href = `{{ route('panel.scripts.index') }}`;
            },1000);
        }
    });
});
$('form#form-main').submit(function(e){
        e.preventDefault();
        let form    = e.target,
            data    = new FormData(form),
            btn     = $(form).find('[type="submit"]'),
            btnHTML = btn.html();        
        $.ajax({
            method  : $(form).attr('method'),
            url     : $(form).attr('action'),
            data    : data,
            contentType: false,
            processData: false,
            beforeSend:()=>{
                $(form).find('.is-invalid').removeClass('is-invalid');
                btn.prop('disabled',true).addClass('disabled').html('Loading ...');
            },
            error:(xhr)=>{
                btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
                let errorFields = xhr.responseJSON.errors;
                let toast = new bootstrap.Toast(document.getElementById('toast-error'));
                toast.show();
                $.each(errorFields, (key, value)=>{
                    let elSelector = String(key).replace(/\./g,'-');
                    $(`[id="${elSelector}"]`).addClass('is-invalid');
                    $(`[id="${elSelector}"]`).siblings('.invalid-feedback').text(value[0]);
                });
            },
            success: (response)=>{
                btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
                let toast = new bootstrap.Toast(document.getElementById('toast-success'));
                toast.show();
                setTimeout(()=>{
                    reload();
                }, 1000);
            }
        });
    });
</script>
@endpush