@extends('layout')

@section('content')
    <div class="container py-5">
        <table id="dt" class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Score</th>
                </tr>
            </thead>
        </table>
    </div>
@endsection

@push('scripts')

<script>
$(()=>{
    const table = $(`#dt`).DataTable({
        serverSide: true,
        processing: true,
        ajax: {
            url: `{{ route('groups.index') }}`
        },
        columns: [
            { data: 'id' },
            { data: 'name' },
            { 
                data: 'score',
                render(data, type, row, meta){
                    return `
                    <div class="input-group">
                        <input class="form-control input-score" value="${data}" />
                        <button class="btn btn-primary dt-row-update" data-action="{{ route('groups.index') }}/${row.id}">Update</button>
                    </div>
                    `;
                }
            }
        ],
        rowCallback(row){
            let api = this.api();
            $(row).find('.dt-row-update').click(function(e){
                e.preventDefault();
                let url     = $(this).attr('data-action');
                let score   = $(row).find('.input-score').val();
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        _token  : '{{ csrf_token() }}',
                        _method : 'PUT',
                        score   : score
                    },
                    success : function(response) {
                        api.ajax.reload(null,false);
                    }
                });
            });
        }
    });
});
</script>
@endpush