@php
    if(!isset($action)) $action = 'create'; //create/update/view
@endphp
<div class="row mt-4">
    <div class="form-group col-sm-6" element="div">
        <label>Dasar Nilai</label>
        <input type="text" name="dasar_nilai" id="dasar_nilai" value="{{$action != 'create' ? $data['dasar_nilai'] : ''}}" {{$action == 'view' ? 'readonly' : ''}} class="form-control">
    </div>

    <div class="form-group col-sm-6" element="div">
        <label>Pendekatan Penilaian</label>
        <select name="pendekatan" id="pendekatan" {{$action == 'view' ? 'disabled' : ''}} class="form-control">
            @foreach(\App\Registry::PENDEKATAN_PENILAIAN as $key => $value)
                <option value="{{ $key }}" {{$action != 'create' ? ($data['pendekatan'] == $key ? 'selected' : '') : ''}}>{{ $value }}</option>
            @endforeach
        </select>
    </div>
</div>
<div class="row"><div class="form-group col-md-12 required" element="div"><hr></div></div>
<div class="row mt-4">
    <div class="form-group col-md-12">
        <div class="card col-md-12">
            <div class="card-header">
                <div >
                    <label class="mb-0 text-primary">Penanggung Jawab</label>
                    @if($action != 'view')
                    <button type="button" class="btn btn-sm btn-link float-right inline-create-button" id="add_penanggungjawab" onclick="openModal('modal_penanggungjawab')"><span class="la la-plus"></span>Tambah Penanggung Jawab</button>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <div class="form-group col-md-12">
                    <table class="bg-white table table-striped table-hover dataTable" id="table_penanggungjawab" width="100%">
                        <thead>
                            <th width="12px">No</th>
                            <th>Nama</th>
                            <th>Aksi</th>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group col-md-12">
        <div class="card col-md-12">
            <div class="card-header">
                <div >
                    <label class="mb-0 text-primary">Reviewer</label>
                    @if($action != 'view')
                    <button type="button" class="btn btn-sm btn-link float-right inline-create-button" id="add_reviewer" onclick="openModal('modal_reviewer')"><span class="la la-plus"></span>Tambah Reviewer</button>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <div class="form-group col-md-12">
                    <table class="bg-white table table-striped table-hover dataTable" id="table_reviewer" width="100%">
                        <thead>
                            <th>No</th>
                            <th>Nama</th>
                            <th>Aksi</th>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group col-md-12">
        <div class="card col-md-12">
            <div class="card-header">
                <div >
                    <label class="mb-0 text-primary">Penilai</label>
                    @if($action != 'view')
                    <button type="button" class="btn btn-sm btn-link float-right inline-create-button"  id="add_penilai"  onclick="openModal('modal_penilai')"><span class="la la-plus"></span>Tambah Penilai</button>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <div class="form-group col-md-12">
                    <table class="bg-white table table-striped table-hover dataTable" id="table_penilai" width="100%">
                        <thead>
                            <th>No</th>
                            <th>Nama</th>
                            <th>PIC</th>
                            <th>SPV</th>
                            <th>Tek</th>
                            <th>Aksi</th>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group col-md-12">
        <div class="card col-md-12">
            <div class="card-header">
                <div >
                    <label class="mb-0 text-primary">Surveyor / Asisten Penilai</label>
                    @if($action != 'view')
                    <button type="button" class="btn btn-sm btn-link float-right inline-create-button"  id="add_surveyor"  onclick="openModal('modal_surveyor')"><span class="la la-plus"></span>Tambah Surveyor / Asisten Penilai</button>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <div class="form-group col-md-12">
                    <table class="bg-white table table-striped table-hover dataTable" id="table_surveyor" width="100%">
                        <thead>
                            <th>No</th>
                            <th>Nama</th>
                            <th>PIC</th>
                            <th>SPV</th>
                            <th>Tek</th>
                            <th>Aksi</th>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="penanggungjawab" id="penanggungjawab" value="{{ $action != 'create' ? $penanggungjawab != null ? json_encode($penanggungjawab) : json_encode([]) : json_encode([]) }}">
<input type="hidden" name="penilai" id="penilai" value="{{ $action != 'create' ? $penilai != null ?  json_encode($penilai) : json_encode([]) : json_encode([]) }}">
<input type="hidden" name="reviewer" id="reviewer" value="{{ $action != 'create' ? $reviewer != null ?  json_encode($reviewer) : json_encode([]) : json_encode([]) }}">
<input type="hidden" name="surveyor" id="surveyor" value="{{ $action != 'create' ? $surveyor != null ?  json_encode($surveyor) : json_encode([]) : json_encode([]) }}">


@push('modals')
    @if($action != 'view')
        <div class="modal" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" id="modal_penanggungjawab">
            <form>
                @csrf
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Tambah Penanggung Jawab</h4>
                            <button type="button" class="btn-close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="card">
                                <div class="card-body row">
                                    <table class="bg-white table table-striped table-hover dataTable" id="table_user_penanggungjawab" width="100%">
                                        <thead>
                                        <th>No</th>
                                        <th>Nama</th>
                                        <th>Aksi</th>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal"><span class="la la-ban"></span> Cancel</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal"  aria-modal="true" role="dialog" id="modal_reviewer">
            <form>
                @csrf
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Tambah Reviewer</h4>
                            <button type="button" class="btn-close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="card">
                                <div class="card-body row">
                                    <table class="bg-white table table-striped table-hover dataTable" id="table_user_reviewer" width="100%">
                                        <thead>
                                        <th>No</th>
                                        <th>Nama</th>
                                        <th>Aksi</th>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal"><span class="la la-ban"></span> Cancel</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal"  aria-modal="true" role="dialog" id="modal_penilai" >
            <form>
                @csrf
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Tambah Penilai</h4>
                            <button type="button" class="btn-close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="card">
                                <div class="card-body row">
                                    <table class="bg-white table table-striped table-hover dataTable" id="table_user_penilai" width="100%">
                                        <thead>
                                        <th>No</th>
                                        <th>Nama</th>
                                        <th>Aksi</th>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal"><span class="la la-ban"></span> Cancel</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal"  aria-modal="true" role="dialog" id="modal_surveyor">
            <form>
                @csrf
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Tambah Surveyor / Asisten Penilai</h4>
                            <button type="button" class="btn-close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="card">
                                <div class="card-body row">
                                    <table class="bg-white table table-striped table-hover dataTable" id="table_user_surveyor" width="100%">
                                        <thead>
                                        <th>No</th>
                                        <th>Nama</th>
                                        <th>Aksi</th>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal"><span class="la la-ban"></span> Cancel</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    @endif
@endpush

@push('after_scripts')
    <script>

        function closeModal(id){
            $(`#${id}`).modal('hide');
        }

        function openModal(id){
            $(`#${id}`).modal('show');
        }

        // region team
        var arr_penanggungjawab = {!! $action != 'create' ? $penanggungjawab != null ? json_encode($penanggungjawab) : json_encode([]) : json_encode([]) !!} ;
        var table_penanggungjawab = $('#table_penanggungjawab').DataTable({
            "ordering": false,
            "info": false,
            "paging": false,
            "searching": false,
            //"bLengthChange": false,
            data: arr_penanggungjawab,
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btndelete = '-';
                        @if (($action == 'create' || $action == 'edit') ? true : false)
                            btndelete = `<button type="button" class="btn btn-sm btn-danger" onclick="deleteTeam('{{\App\Registry::TEAM_CATEGORY_PENANGGUNGJAWAB}}','`+full.id+`','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;
                        @endif
                            return btndelete;
                    }
                },
            ],
            processing: true,
            serverSide: false,
            order: [[1, 'desc']],
        });
        var table_user_penanggungjawab = $('#table_user_penanggungjawab').DataTable({
            "info": false,
            "searching" : false,
            ajax: "{{ url('api/user/datatable/byrole/1') }}",
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btnchoose = `<button type="button" class="btn btn-sm btn-primary" onclick="addTeam('{{\App\Registry::TEAM_CATEGORY_PENANGGUNGJAWAB}}','`+full.user_id+`','`+full.name+`'); closeModal('modal_penanggungjawab')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Pilih</button>`;
                        return btnchoose;
                    }
                },
            ],
        });

        var arr_reviewer = {!! $action != 'create' ? $reviewer != null ?  json_encode($reviewer) : json_encode([]) : json_encode([]) !!} ;
        var table_reviewer = $('#table_reviewer').DataTable({
            "ordering": false,
            "info": false,
            "paging": false,
            "searching": false,
            "bLengthChange": false,
            data: arr_reviewer,
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btndelete = '-';
                        @if (($action == 'create' || $action == 'edit') ? true : false)
                            btndelete = `<button type="button" class="btn btn-sm btn-danger" onclick="deleteTeam('{{\App\Registry::TEAM_CATEGORY_REVIEWER}}','`+full.user_id+`','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;
                        @endif
                            return btndelete;
                    }
                },
            ],
            processing: true,
            serverSide: false,
            order: [[1, 'desc']],
        });
        var table_user_reviewer = $('#table_user_reviewer').DataTable({
            ajax: "{{ url('api/user/datatable/byrole/2') }}",
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btnchoose = `<button type="button" class="btn btn-sm btn-primary" onclick="addTeam('{{\App\Registry::TEAM_CATEGORY_REVIEWER}}','`+full.user_id+`','`+full.name+`'); closeModal('table_reviewer')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Pilih</button>`;
                        return btnchoose;
                    }
                },
            ],
        });

        var arr_penilai = {!! $action != 'create' ? $penilai != null ?  json_encode($penilai) : json_encode([]) : json_encode([]) !!} ;
        var table_penilai = $('#table_penilai').DataTable({
            //scrollY: true,
            "ordering": false,
            "info": false,
            "paging": false,
            "searching": false,
            "bLengthChange": false,
            data: arr_penilai,
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
                {
                    "data": null,
                    render: function (data, type, full, meta) {
                        let checked = full.role == '{{ \App\Registry::TEAM_ROLE_PIC }}' ? 'checked' : '';
                        return `<input type="radio" value="pic" name="kategori_penilai`+ meta.row +`" `+ checked +` onclick="selectRole('{{\App\Registry::TEAM_CATEGORY_PENILAI}}','{{\App\Registry::TEAM_ROLE_PIC}}','`+full.id+`')">`;
                    }
                },
                {
                    "data": null,
                    render: function (data, type, full, meta) {
                        let checked = full.role == '{{ \App\Registry::TEAM_ROLE_SPV }}' ? 'checked' : '';
                        return `<input type="radio" value="spv" name="kategori_penilai`+ meta.row +`" `+ checked +` onclick="selectRole('{{\App\Registry::TEAM_CATEGORY_PENILAI}}','{{\App\Registry::TEAM_ROLE_SPV}}','`+full.id+`')">`;
                    }
                },
                {
                    "data": null,
                    render: function (data, type, full, meta) {
                        let checked = full.role == '{{ \App\Registry::TEAM_ROLE_TEK }}' ? 'checked' : '';
                        return `<input type="radio" value="tek" name="kategori_penilai`+ meta.row +`" `+ checked +` onclick="selectRole('{{\App\Registry::TEAM_CATEGORY_PENILAI}}','{{\App\Registry::TEAM_ROLE_TEK}}','`+full.id+`')">`;
                    }
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btndelete = '-';
                        @if (($action == 'create' || $action == 'edit') ? true : false)
                            btndelete = `<button type="button" class="btn btn-sm btn-danger" onclick="deleteTeam('{{\App\Registry::TEAM_CATEGORY_PENILAI}}','`+full.user_id+`','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;
                        @endif
                            return btndelete;
                    }
                },
            ],
            processing: true,
            serverSide: false,
            order: [[1, 'desc']],
        });
        var table_user_penilai = $('#table_user_penilai').DataTable({
            ajax: "{{ url('api/user/datatable/byrole/3') }}",
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btnchoose = `<button type="button" class="btn btn-sm btn-primary" onclick="addTeam('{{\App\Registry::TEAM_CATEGORY_PENILAI}}','`+full.user_id+`','`+full.name+`'); closeModal('table_penilai')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Pilih</button>`;
                        return btnchoose;
                    }
                },
            ],
        });

        var arr_surveyor = {!! $action != 'create' ? $surveyor != null ?  json_encode($surveyor) : json_encode([]) : json_encode([]) !!} ;
        var table_surveyor = $('#table_surveyor').DataTable({
            "ordering": false,
            "info": false,
            "paging": false,
            "searching": false,
            "bLengthChange": false,
            data: arr_surveyor,
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
                {
                    "data": null,
                    render: function (data, type, full, meta) {
                        let checked = full.role == '{{ \App\Registry::TEAM_ROLE_PIC }}' ? 'checked' : '';
                        return `<input type="radio" value="pic" name="kategori_surveyor`+ meta.row +`" `+ checked +` onclick="selectRole('{{\App\Registry::TEAM_CATEGORY_SURVEYOR}}','{{\App\Registry::TEAM_ROLE_PIC}}','`+full.id+`')">`;
                    }
                },
                {
                    "data": null,
                    render: function (data, type, full, meta) {
                        let checked = full.role == '{{ \App\Registry::TEAM_ROLE_SPV }}' ? 'checked' : '';
                        return `<input type="radio" value="spv" name="kategori_surveyor`+ meta.row +`" `+ checked +` onclick="selectRole('{{\App\Registry::TEAM_CATEGORY_SURVEYOR}}','{{\App\Registry::TEAM_ROLE_SPV}}','`+full.id+`')">`;
                    }
                },
                {
                    "data": null,
                    render: function (data, type, full, meta) {
                        let checked = full.role == '{{ \App\Registry::TEAM_ROLE_TEK }}' ? 'checked' : '';
                        return `<input type="radio" value="tek" name="kategori_surveyor`+ meta.row +`" `+ checked +` onclick="selectRole('{{\App\Registry::TEAM_CATEGORY_SURVEYOR}}','{{\App\Registry::TEAM_ROLE_TEK}}','`+full.id+`')">`;
                    }
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btndelete = '-';
                        @if (($action == 'create' || $action == 'edit') ? true : false)
                            btndelete = `<button type="button" class="btn btn-sm btn-danger" onclick="deleteTeam('{{\App\Registry::TEAM_CATEGORY_SURVEYOR}}','`+full.user_id+`','`+full.name+`')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Hapus</button>`;
                        @endif
                            return btndelete;
                    }
                },
            ],
            processing: true,
            serverSide: false,
            order: [[1, 'desc']],
        });
        var table_user_surveyor = $('#table_user_surveyor').DataTable({
            ajax: "{{ url('api/user/datatable/byrole/3') }}",
            columns: [
                {
                    "data": null,
                    "width" : "12px",
                    "searchable": false,
                    "orderable": false,
                    render: function (data, type, full, meta) {
                        return +meta.row + 1;
                    }
                },
                {
                    "data": "name",
                },
                {
                    "data": null,
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, full, meta){
                        var btnchoose = `<button type="button" class="btn btn-sm btn-primary" onclick="addTeam('{{\App\Registry::TEAM_CATEGORY_SURVEYOR}}','`+full.user_id+`','`+full.name+`'); closeModal('table_surveyor')"><span class="la la-check" role="presentation" aria-hidden="true"></span> Pilih</button>`;
                        return btnchoose;
                    }
                },
            ],
        });

        function addTeam(modal,id,name){
            var obj = {};
            obj.id = id;
            obj.name = name;
            valid = true;
            switch (modal){
                case '{{\App\Registry::TEAM_CATEGORY_PENANGGUNGJAWAB}}':
                    for (i = arr_penanggungjawab.length - 1; i >= 0; --i) {
                        if (arr_penanggungjawab[i].name === name) {
                            valid = false;
                        }
                    }
                    if(valid){
                        arr_penanggungjawab.push(obj);
                        table_penanggungjawab.clear().draw();
                        table_penanggungjawab.rows.add(arr_penanggungjawab); // Add new data
                        table_penanggungjawab.columns.adjust().draw(); // Redraw the DataTable
                        $('#penanggungjawab').val(JSON.stringify(arr_penanggungjawab));
                    }
                    break;
                case '{{\App\Registry::TEAM_CATEGORY_REVIEWER}}':
                    for (i = arr_reviewer.length - 1; i >= 0; --i) {
                        if (arr_reviewer[i].name === name) {
                            valid = false;
                        }
                    }
                    if(valid) {
                        arr_reviewer.push(obj);
                        table_reviewer.clear().draw();
                        table_reviewer.rows.add(arr_reviewer); // Add new data
                        table_reviewer.columns.adjust().draw(); // Redraw the DataTable
                        $('#reviewer').val(JSON.stringify(arr_reviewer));
                        break;
                    }
                case '{{\App\Registry::TEAM_CATEGORY_PENILAI}}':
                    for (i = arr_penilai.length - 1; i >= 0; --i) {
                        if (arr_penilai[i].name === name) {
                            valid = false;
                        }
                    }
                    if(valid) {
                        arr_penilai.push(obj);
                        table_penilai.clear().draw();
                        table_penilai.rows.add(arr_penilai); // Add new data
                        table_penilai.columns.adjust().draw(); // Redraw the DataTable
                        $('#penilai').val(JSON.stringify(arr_penilai));
                        break;
                    }
                case '{{\App\Registry::TEAM_CATEGORY_SURVEYOR}}':
                    for (i = arr_surveyor.length - 1; i >= 0; --i) {
                        if (arr_surveyor[i].name === name) {
                            valid = false;
                        }
                    }
                    if(valid) {
                        arr_surveyor.push(obj);
                        table_surveyor.clear().draw();
                        table_surveyor.rows.add(arr_surveyor); // Add new data
                        table_surveyor.columns.adjust().draw(); // Redraw the DataTable
                        $('#surveyor').val(JSON.stringify(arr_surveyor));
                        break;
                    }
            }
            toggleModal(modal.toLowerCase());
            if(!valid){
                toastr.warning("Anggota sudah dipilih");
            }
        }

        function deleteTeam(modal,id,name){
            var i = 0;
            switch (modal){
                case '{{\App\Registry::TEAM_CATEGORY_PENANGGUNGJAWAB}}':
                    for (i = arr_penanggungjawab.length - 1; i >= 0; --i) {
                        if (arr_penanggungjawab[i].name === name) {
                            arr_penanggungjawab.splice(i,1);
                            table_penanggungjawab.clear().draw();
                            table_penanggungjawab.rows.add(arr_penanggungjawab); // Add new data
                            table_penanggungjawab.columns.adjust().draw(); // Redraw the DataTable
                        }
                    }
                    $('#penanggung_jawab').val(JSON.stringify(arr_penanggungjawab));
                    break;
                case '{{\App\Registry::TEAM_CATEGORY_REVIEWER}}':
                    for (i = arr_reviewer.length - 1; i >= 0; --i) {
                        if (arr_reviewer[i].name === name) {
                            arr_reviewer.splice(i,1);
                            table_reviewer.clear().draw();
                            table_reviewer.rows.add(arr_reviewer); // Add new data
                            table_reviewer.columns.adjust().draw(); // Redraw the DataTable
                        }
                    }
                    $('#reviewer').val(JSON.stringify(arr_reviewer));
                    break;
                case '{{\App\Registry::TEAM_CATEGORY_PENILAI}}':
                    for (i = arr_penilai.length - 1; i >= 0; --i) {
                        if (arr_penilai[i].name === name) {
                            arr_penilai.splice(i,1);
                            table_penilai.clear().draw();
                            table_penilai.rows.add(arr_penilai); // Add new data
                            table_penilai.columns.adjust().draw(); // Redraw the DataTable
                        }
                    }
                    $('#penilai').val(JSON.stringify(arr_penilai));
                    break;
                case '{{\App\Registry::TEAM_CATEGORY_SURVEYOR}}':
                    for (i = arr_surveyor.length - 1; i >= 0; --i) {
                        if (arr_surveyor[i].name === name) {
                            arr_surveyor.splice(i,1);
                            table_surveyor.clear().draw();
                            table_surveyor.rows.add(arr_surveyor); // Add new data
                            table_surveyor.columns.adjust().draw(); // Redraw the DataTable
                        }
                    }
                    $('#surveyor').val(JSON.stringify(arr_surveyor));
                    break;
            }
        }

        function selectRole(category,role,id){
            console.log(category,role,id);
            var i = 0;
            switch (category){
                case '{{\App\Registry::TEAM_CATEGORY_PENILAI}}':
                    for (i = arr_penilai.length - 1; i >= 0; --i) {
                        if (arr_penilai[i].id === id) {
                            arr_penilai[i].role = role;
                        }
                    }
                    $('#penilai').val(JSON.stringify(arr_penilai));
                    break;
                case '{{\App\Registry::TEAM_CATEGORY_SURVEYOR}}':
                    for (i = arr_surveyor.length - 1; i >= 0; --i) {
                        if (arr_surveyor[i].id === id) {
                            arr_surveyor[i].role = role;
                        }
                    }
                    $('#surveyor').val(JSON.stringify(arr_surveyor));
                    break;
            }
        }

        // endregion team
    </script>
@endpush