@extends('layouts.panel')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            @include('panel.scripts.parts.info')
            <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 id="export-button" class="btn-group btn-group-sm me-2"></div>
                    <div class="btn-group btn-group-sm me-2">
                        <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalImport">Import Soal</button>
                        <a class="btn btn-outline-secondary" href="{{ route('panel.scripts.questions.export', ['script'=>$script]) }}">Export Soal</a>
                    </div>
                    <div class="btn-group btn-group-sm"> 
                        <a href="{{ route('panel.scripts.questions.create',['script'=>$script]) }}" class="btn btn-primary">Tambah</a>
                    </div>
                </div>
            </div>        
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <table id="dt" class="table" width="100%">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Tajuk</th>
                                <th>Pertanyaan</th>
                                <th>Grup</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modalImport" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <form id="form-import" class="modal-content" method="POST" action="{{ route('panel.scripts.questions.import',['script'=>$script]) }}" enctype="multipart/form-data">
            @method('POST')
            <div class="modal-header p-2">
                <h5 class="modal-title"><strong>Import Soal</strong></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-2">
                <div class="alert alert-primary mb-3"><strong>Peringatan !</strong><br>Proses import akan menimpah data soal yang sudah ada.</div>
                <div class="form-group">
                    <input id="file" type="file" class="form-control" name="file">
                    <div class="invalid-feedback"></div>
                </div>
                
            </div>
            <div class="modal-footer p-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batalkan</button>
                <button type="submit" class="btn btn-sm btn-primary">Import</button>
            </div>
        </form>
    </div>
</div>
<div id="modalConfirmDelete" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header p-2">
                <h5 class="modal-title"><strong>Peringatan !</strong></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-2">Data yang telah terhapus tidak dapat dikembalikan.<br/>Yakin ingin melanjutkan ?</div>
            <div class="modal-footer p-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batalkan</button>
                <button id="btn-dt-row-delete" type="button" class="btn btn-sm btn-primary">Ya Hapus</button>
            </div>
        </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') }}">
@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>
function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}
const dt = $('#dt').DataTable({
    processing : true,
    serverSide : true,
    search : {
        return : true
    },
    ajax : {
        url : `{{ url()->current() }}`
    },
    columns : [{
        data : 'number',
        width : '20px',
        className : 'text-end'
    },{
        data : 'heading'
    },{
        data : 'sentence',
        render: (data, type, row, meta)=>{
            let html = ``;
            $.each(row.choices, (index, choice)=>{
                //  <td class="text-end" width="50">${choice.score}</td>
                html += `<tr>
                    <td class="text-end" width="50">${choice.key}</td>
                    <td>${decodeHtml(choice.content)}</td>
                    <td class="text-end" width="50">${choice.score}</td>
                </tr>`;
            });
            return decodeHtml(data) + `<table class="table table-sm table-borderless table-striped mt-1">${html}</table>`;
        }
    },{
        data : 'group'
    }, {
        data : 'id',
        className : 'text-center',
        width : '50px',
        render : function(data, type, row, meta){
            return `
            <div class="dropdown dropstart">
                <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown">&#x22EE;</button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ url()->current() }}/${data}/edit">Edit</a></li>
                    <li><a class="dropdown-item dt-row-remove" href="{{ url()->current() }}/${data}" data-bs-toggle="modal" data-bs-target="#modalConfirmDelete">Hapus</a></li>
                </ul>
            </div>
            `;
        }
    }]
});

$('form#form-import').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:()=>{
            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 modal       = bootstrap.Modal.getInstance($('#modalImport').get(0));
            modal.hide();
            let toast = new bootstrap.Toast(document.getElementById('toast-success'));
            toast.show();
            setTimeout(()=>{
                dt.ajax.reload(null,false);
            }, 1000);
        }
    });
});

$('#modalConfirmDelete').on({
    'show.bs.modal': function(e) {
        $('#btn-dt-row-delete').attr('url-target', e.relatedTarget.getAttribute(
            "href"));
    },
    'hide.bs.modal': function() {
        $('#btn-dt-row-delete').attr('url-target', '');
    }
})
$('#btn-dt-row-delete').click(function(e) {
    e.preventDefault();
    let url = $(this).attr('url-target'),
        btn = $(this),
        btnHTML = btn.html();

    $.ajax({
        method: 'POST',
        url: url,
        dataType: 'json',
        data: {
            _token: '{{ csrf_token() }}',
            _method: 'DELETE'
        },
        beforeSend: function() {
            btn.prop('disabled', true);
            btn.addClass('disabled').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 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();
        },
        success: (response)=>{
            btn.prop('disabled', false).removeClass('disabled').html(btnHTML);
            let modal = bootstrap.Modal.getInstance($('#modalConfirmDelete').get(0));
            modal.hide();
            let toast = new bootstrap.Toast(document.getElementById('toast-success'));
            toast.show();
            dt.ajax.reload(null, false);
        }
    });
});
</script>
@endpush