@push('script')
    <script>
        $(document).ready(function () {

            // sessionStorage.clear();

            function load_skill(params = []) {
                $("table.table").DataTable().destroy()
                $("table.table").DataTable({
                    "deferRender": true,
                    "responsive": true,
                    'serverSide': true,
                    'processing': true,
                    "ordering": false,
                    "ajax": {
                        "url": "{{ route('api.skill.index') }}",
                        "type": "GET",
                        "data": {
                            "sort": "ASC"
                        },
                        "headers": {
                            "Authorization" : getAuthorization()
                        },
                        "dataSrc": "data"
                    },
                    "columns": [
                        {
                            data: null,
                            render: function (data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1 + '.';
                            }
                        },
                        {
                            data: 'name'
                        },
                        {
                            data: null,
                            render: res => {
                                let btn_edit = ''
                                let btn_delete = ''

                                btn_edit = `<a class="btn btn-sm btn-white border-dark mb-1 btn-update-skill" data-id="${res.id}" data-name="${res.name}" href="javascript:void(0);"  data-bs-toggle="modal" data-bs-target="#crudModal">
                                                <i class="bx bx-edit-alt me-1"></i> Edit
                                            </a>`


                                btn_delete = `<a class="btn btn-sm btn-white border-dark mb-1 btn-delete-skill" data-id="${res.id}" data-name="${res.name}" href="javascript:void(0);">
                                                <i class="bx bx-trash me-1"></i> Delete
                                            </a>`


                                    return `
                                        ${btn_edit} <br>
                                        ${btn_delete}
                                    `;
                            }
                        }
                    ],
                    dom: "<'row'<'col-sm-12 mb-2'B>>lfrtip",
                    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    buttons: [
                        {
                            extend: 'excel',
                            text: '<i class="fas fa-download"></i> Download Excel',
                            filename: 'Data Master Skill',
                            title: null,
                            exportOptions: {
                                columns: [ 0, 1 ]
                            }
                        },
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print"></i> Print',
                            title: 'Data Master Skill',
                            exportOptions: {
                                columns: [ 0, 1 ]
                            }
                        },
                    ]
                });
            }

            load_skill();

            $(document).on('click', '.btn-add-skill', function () {
                $('.title-skill-modal').html('Tambah')
                $('.btn-confirm-add-skill').removeClass('d-none')
                $('.btn-confirm-update-skill').addClass('d-none')
                $('#crudModal .skill-name').html('')

                $('#crudModal #name').val('')
            })

            $(document).on('click', '.btn-confirm-add-skill', function () {
                data = {
                    name: $("input#name").val()
                }

                callApi("POST", "{{ route('api.skill.store') }}", data, function (req) {
                    pesan = req.message;
                    if (req.error == true) {
                        Swal.fire(
                        'Gagal ditambahkan!',
                        pesan,
                        'error'
                        )
                    }else{
                        Swal.fire(
                        'Ditambahkan!',
                        pesan,
                        'success'
                        )
                        $("#crudModal .btn-close").trigger('click')
                        load_skill();
                    }
                })
            })

            $(document).on('click', ".btn-update-skill", function () {
                $('.title-skill-modal').html('Edit')
                $('.btn-confirm-update-skill').removeClass('d-none')
                $('.btn-confirm-add-skill').addClass('d-none')
                $('#crudModal .skill-name').html($(this).attr('data-name'))

                $('#crudModal #name').val($(this).attr('data-name'))

                $('.btn-confirm-update-skill').attr('data-id', $(this).attr('data-id'))
            })

            $(document).on('click', '.btn-confirm-update-skill', function () {
                data = {
                    name: $("input#name").val()
                }

                let id = $(this).attr('data-id');

                let url = "{{ route('api.skill.update', ':id') }}";
                url = url.replace(':id', id);

                callApi("PUT", url, data, function (req) {
                    pesan = req.message;
                    if (req.error == true) {
                        Swal.fire(
                        'Gagal diupdate!',
                        pesan,
                        'error'
                        )
                    }else{
                        Swal.fire(
                        'Diupdate!',
                        pesan,
                        'success'
                        )
                        $("#crudModal .btn-close").trigger('click')
                        load_skill();
                    }
                })
            })

            $(document).on('click', ".btn-delete-skill", function () {
                let id = $(this).attr('data-id')
                let name = $(this).attr('data-name')

                Swal.fire({
                title: 'Apakah anda yakin?',
                text: `Anda ingin menghapus data ${name}!`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, hapus!'
                }).then((result) => {
                if (result.isConfirmed) {
                    let url = "{{ route('api.skill.delete', ':id') }}";
                    url = url.replace(':id', id);
                    callApi("DELETE", url, [], function (req) {
                        pesan = req.message;
                        if (req.error == true) {
                            Swal.fire(
                            'Gagal Dihapus!',
                            pesan,
                            'error'
                            )
                        }else{
                            Swal.fire(
                            'Dihapus!',
                            pesan,
                            'success'
                            )
                            load_skill();
                        }
                    })

                }
                })
            })

        })
    </script>
@endpush
