document.addEventListener('alpine:init', () => {
    Alpine.data('settingsPage', () => ({
        // 1. Inisialisasi Start
        showDialogAdd: false,
        objAddForm: {
            // idJenis 1
            port: '',
            idInterface: -1,
            namaInterface: '',
            idInstrument: -1,
            namaInstrument: '',
        },
        dataSetting: [
            {
                idSetting: 1,
                idJenis: 1,
                namaJenis: 'TCP Server',
                info: 'Port 5001',
                port: '5001',
                idInterface: 1,
                namaInterface: 'XN550',
                idInstrument: 1,
                namaInstrument: 'Hema 01',
            },
            {
                idSetting: 2,
                idJenis: 2,
                namaJenis: 'TCP Client',
                info: 'Server 192.168.0.1, Port 4000',
                port: 'Server 192.168.0.1, Port 4000',
                idInterface: 2,
                namaInterface: 'Axsym',
                idInstrument: 2,
                namaInstrument: 'Axsym',
            },
            {
                idSetting: 3,
                idJenis: 3,
                namaJenis: 'RS232',
                info: 'ttyS01, 9600, N, 8, 1',
                port: 'ttyS01, 9600, N, 8, 1',
                idInterface: 3,
                namaInterface: 'C311',
                idInstrument: 3,
                namaInstrument: 'Cobas C311',
            },
        ],
        selectedJenis: {
            idJenis: -1,
            namaJenis: 'Jenis'
        },
        openJenis: false,
        dataJenis: [
            {
                idJenis: 1,
                namaJenis: 'TCP Server',
            },
            {
                idJenis: 2,
                namaJenis: 'TCP Client',
            },
            {
                idJenis: 3,
                namaJenis: 'RS232',
            },
        ],
        selectedInterface: {
            idInterface: -1,
            namaInterface: 'Interface'
        },
        openInterface: false,
        dataInterface: [
            {
                idInterface: 1,
                namaInterface: 'XN550',
            },
            {
                idInterface: 2,
                namaInterface: 'Axsym',
            },
            {
                idInterface: 3,
                namaInterface: 'C311',
            },
        ],
        selectedInstrument: {
            idInstrument: -1,
            namaInstrument: 'Instrument'
        },
        openInstrument: false,
        dataInstrument: [
            {
                idInstrument: 1,
                namaInstrument: 'Hema 01',
            },
            {
                idInstrument: 2,
                namaInstrument: 'Axsym',
            },
            {
                idInstrument: 3,
                namaInstrument: 'Cobas C311',
            },
        ],
        // 1. Inisialisasi End
        // 2. Fungsi Start
        onChangeJenis(item) {
            this.openJenis = false;
            this.selectedJenis = item;
            // clear form
            this.objAddForm = {
                port: '',
                idInterface: -1,
                namaInterface: '',
                idInstrument: -1,
                namaInstrument: '',
            };
        },
        // 2. Fungsi End
    }))
})