<!-- <script src="{{asset('/')}}modules/pkl/xx/xx.js"></script> -->
<script>
    var targetID = '';
    $(() => {
        APP.combov1({
            el: ['#kelas_id'],
            url: `${BASE_API_MENU}/combox/kelas`,
            fild_id: 'id',
            fild_name: 'name',
            select2: true,
            dropdownParent: '#mainModal',
        })
        mainTable();
    })

    tableSiswa = () => {
        APP.initTable({
            el: '#table-siswa',
            url: BASE_API_MENU + '/table-siswa',
            index: 1,
            data: {
                id: targetID
            },
            columnDefs: [{
                    targets: 1,
                    data: 'nama',
                    render: function(data, type, full, meta) {
                        return `
                    <div class="d-flex justify-content-left align-items-center">
                        <div class="avatar-wrapper">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded-circle bg-label-info">${getInitials(full['nama'])}</span>
                            </div>
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="text-truncate mb-0">${full['nama']}</h6>
                            <small class="text-truncate">${full['nis'] == null ? '[-]' : '['+full['nis']+']'}</small>
                        </div>
                    </div>
                    `
                    },
                },
                {
                    targets: 2,
                    data: 'romawi',
                    render: function(data, type, full, meta) {
                        return full['romawi'];
                    },
                },
                {
                    targets: 3,
                    render: function(data, type, full, meta) {
                        return full['rombel_name'];
                    },
                },
                {
                    targets: 4,
                    width: "50px",
                    render: function(data, type, full, meta) {
                        return full['status'];
                    },
                },
                {
                    targets: -1,
                    width: "50px",
                    // data: 'name',
                    render: function(data, type, full, meta) {
                        return full['action'];
                    },
                }
            ]
        });
    }

    mainTable = () => {
        APP.initTable({
            el: '#maintable', // ID atau kelas elemen tabel HTML
            url: BASE_API_MENU + '/main-table', // URL endpoint API untuk mengambil data
            index: 1, // Kolom yang diurutkan
            dom: `
        <"card-header d-flex flex-wrap py-0 flex-column flex-sm-row"<f>
            <"d-flex justify-content-center justify-content-md-end align-items-baseline"
            <"dt-action-buttons d-flex justify-content-center flex-md-row align-items-baseline"B>>>t
        <"row mx-1"<"col-sm-12 col-md-6 d-flex align-items-center length-menu-no-margin"li><"col-sm-12 col-md-6"p>>`,
            buttons: [{
                text: '<i class="ti ti-plus ti-xs me-0 me-sm-2"></i><span class="d-none d-sm-inline-block">Upload Siswa</span>',
                className: "add-new btn btn-primary ms-2 waves-effect waves-light",
                action: function(e, dt, node, config) {
                    newData()
                },
            }],
            columnDefs: [{
                    targets: 1,
                    data: 'original_name',
                    render: function(data, type, full, meta) {
                        return full['original_name'];
                    },
                },
                {
                    targets: 2,
                    data: 'jurusan_name',
                    visible: false,
                    render: function(data, type, full, meta) {
                        return full['jurusan_name'];
                    },
                },
                {
                    targets: 3,
                    data: 'name',
                    width: "80px",
                    // visible: false,
                    render: function(data, type, full, meta) {
                        return full['name'];
                    },
                },
                {
                    targets: 4,
                    data: 'row_count',
                    visible: false,
                    render: function(data, type, full, meta) {
                        return full['row_count'];
                    },
                },
                {
                    targets: 5,
                    width: "50px",
                    render: function(data, type, full, meta) {
                        return full['status'];
                    },
                },
                {
                    targets: -1,
                    width: "50px",
                    // data: 'name',
                    render: function(data, type, full, meta) {
                        return full['action'];
                    },
                }
            ]
        });
    }

    newData = () => {
        targetID = '';
        $('#formMain').trigger('reset');
        $('#mainModal').modal('show');
    }

    onDetails = (el) => {
        var data = $(el).data('params')
        data = JSON.parse(atob(data));
        var errorsArray = JSON.parse(data.errors);

        targetID = data['id'];
        $.each(data, (i, v) => {
            $(`[name="${i}"]`).val(v);
        })

        $('#page-main').fadeOut('slow', () => {
            $(`#page-detail`).fadeIn();
            setTimeout(() => {
                tableSiswa();
            }, 400);
        });
    }

    onBack = () => {
        $('#page-detail').fadeOut('slow', () => {
            targetID = '';
            $(`#page-main`).fadeIn();
        });
    }

    doSave = (name) => {
        APP.block();
        var form = $(`#${name}`)[0];
        var formData = new FormData(form);
        var action = 'upload';

        APP.axiosRequest({
            url: `${BASE_API_MENU}/${action}`,
            data: formData,
        }).then(data => {
            APP.reloadTable();
            $('#mainModal').modal('hide');
            APP.showToast({
                type: data.status,
                message: data.message,
            });
            APP.unblock();
        }).catch(error => {
            console.error("Fetch error:", error);
            APP.unblock();
        });
    }

    onEditSiswa = (el) => {
        var data = $(el).data('params')
        data = JSON.parse(atob(data));
        APP.combov1({
            el: ['#kelas_siswa'],
            url: `${BASE_API_MENU}/combo/kelas`,
            fild_id: 'id',
            fild_name: 'name',
            select2: true,
            data: {
                jurusan_id: data['jurusan_id'],
                tingkat_id: data['tingkat_id'],
            },
            dropdownParent: '#modalKelasSiswa',
        })
        $(`[name="taskSiswaID"]`).val(data['id']);
        $.each(data, (i, v) => {
            $(`[name="${i}"]`).val(v);
        })
        $('#modalKelasSiswa').modal('show');

    }

    saveIt = (name) => {
        APP.block();
        var form = $(`#${name}`)[0];
        var formData = new FormData(form);
        var action = 'update';

        APP.axiosRequest({
            url: `${BASE_API_MENU}/${action}`,
            data: formData,
        }).then(data => {
            APP.reloadTable({
                el: '#table-siswa'
            });
            $('#modalKelasSiswa').modal('hide');
            APP.showToast({
                type: data.status,
                message: data.message,
            });
            APP.unblock();
        }).catch(error => {
            console.error("Fetch error:", error);
            APP.unblock();
        });
    }

    onDelete = (el) => {
        var data = $(el).data('params')
        data = JSON.parse(atob(data));
        APP.confirm({
            title: 'Are you sure?',
            text: 'Do you want to delete this item?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                APP.axiosRequest({
                    url: `${BASE_API_MENU}/delete`,
                    data: {
                        id: data['id']
                    },
                }).then(data => {
                    APP.reloadTable();
                    APP.showToast({
                        type: data.status,
                        message: data.message,
                    });
                }).catch(error => {
                    console.error("Fetch error:", error);
                });
            }
        });
    }

    onDownload = (el) => {
        var data = $(el).data('params')
        data = JSON.parse(atob(data));
        const downloadLink = document.createElement('a');
        downloadLink.href = `${BASE_API_MENU}/download/` + data['id'];
        // downloadLink.download = 'example.txt';
        document.body.appendChild(downloadLink);
        downloadLink.click();
    }
</script>