@extends('layouts.panel')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            @include('panel.scripts.parts.info')
            <form id="form-main" method="POST" action="{{ route('panel.scripts.questions.update',['script'=>$script, 'question'=>$question]) }}" enctype="multipart/form-data">
                @method('PUT')
                <div class="d-flex mb-2 align-items-center mt-4">
                    <h6 class="m-0 text-uppercase fw-bold">Butir Soal</h6>
                    <div class="btn-toolbar ms-auto">
                        <div class="btn-group btn-group-sm me-2">
                            <a class="btn btn-outline-secondary" href="{{ route('panel.scripts.questions.index', ['script'=>$script]) }}">Batal</a>
                        </div>
                        <div class="btn-group btn-group-sm"> 
                            <button type="submit" class="btn btn-primary">Tambah</button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group mb-3">
                                    <label for="number">No Urut</label>
                                    <input id="number" type="text" class="form-control" name="number" value="{{ $question->number }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="group">Grup</label>
                                    <input id="group" type="text" class="form-control" name="group" value="{{ $question->group }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="heading">Tajuk</label>
                                    <input id="heading" type="text" class="form-control" name="heading" value="{{ $question->heading }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-3">
                            <label for="sentence">Pertanyaan</label>
                            <textarea id="sentence" class="form-control" name="sentence"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="table-responsive">
                            <table id="dt" class="table table-sm w-100" width="100%">
                                <thead>
                                    <tr>
                                        <th colspan="3">Pilihan Jawaban</th>
                                    </tr>
                                    <tr>
                                        <th>Key</th>
                                        <th>Konten</th>
                                        <th>Skor</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th colspan="2"></th>
                                        <th>
                                            <div class="btn-group">
                                                <button id="btn-row-delete" type="button" class="btn btn-outline-secondary">-</button>
                                                <button id="btn-row-add" type="button" class="btn btn-outline-secondary">+</button>
                                            </div>
                                        </th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="{{ asset('vendor/datatables/DataTables-1.12.1/css/dataTables.bootstrap5.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/katex/katex.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/summernote/summernote-lite.min.css') }}">
@endpush

@push('js')
<script src="{{ asset('vendor/datatables/DataTables-1.12.1/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/DataTables-1.12.1/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ asset('vendor/katex/katex.min.js') }}"></script>
<script src="{{ asset('vendor/summernote/summernote-lite.min.js') }}"></script>
<script src="{{ asset('vendor/summernote/plugin/math/math.js') }}"></script>
<script>
    $('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(()=>{
                    window.location.href = `{{ route('panel.scripts.questions.index',['script'=>$script]) }}`;
                }, 1000);
            }
        });
    });
    @if (isset($question->choices) && count($question->choices) > 0)
    let choices = {!!  json_encode($question->choices) !!};
    @else
    let choices = [
        { key : 'A', content : '', score : 0 },
        { key : 'B', content : '', score : 0 },
        { key : 'C', content : '', score : 0 },
        { key : 'D', content : '', score : 0 },
        { key : 'E', content : '', score : 0 }
    ];
    @endif
    const dt = $('#dt').DataTable({
        data        : choices,
        paging      : false,
        info        : false,
        searching   : false,
        columns     : [{
            data : 'key',
            width : '40px',
            render : function(data, type, row, meta){
                return `<input id="choices-${meta.row}-key" class="form-control text-center choice-key" value="${data}" ><div class="invalid-feedback"></div>`;
            }
        }, {
            data : 'content',
            render : function(data, type, row, meta){
                return `<textarea id="choices-${meta.row}-content" class="form-control choice-content">${data}</textarea><div class="invalid-feedback"></div>`;
            }
        }, {
            data : 'score', className : 'text-end',
            width : '100px',
            render : function(data, type, row, meta){
                return `<input id="choices-${meta.row}-score" class="form-control text-end choice-score" value="${data}" ><div class="invalid-feedback"></div>`;
            }
        }],
        createdRow : function(row, data, dataIndex, cells){
            console.log(data);
            $(row).find(`#choices-${dataIndex}-content`).summernote({
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize',['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video', 'math']],
                    ['view', ['fullscreen', 'codeview']],
                ]
            }).summernote('code',`${data.content}`);
        },
        rowCallback : function(row, data, displayNum, displayIndex, dataIndex){
            $(row).find('.choice-key').attr('name',`choices[${dataIndex}][key]`);
            $(row).find('.choice-content').attr('name',`choices[${dataIndex}][content]`);
            $(row).find('.choice-score').attr('name',`choices[${dataIndex}][score]`);
        }
    });

    $('#sentence').summernote({
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize',['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'math']],
            ['view', ['fullscreen', 'codeview', 'help']],
        ]
    }).summernote('code',`{!! $question->sentence !!}`);

    $('#btn-row-add').click(function(e){
        e.preventDefault();
        dt.row.add({
            key : '',  content : '', score : 0
        }).draw();
    });

    $('#btn-row-delete').click(function(e){
        dt.row( ':last' ).remove().draw();
    }); 
</script>
@endpush