$(document).ready(function () {

            $(document).on('click', '.hardware-button', function () {
                let row = $(this).closest('tr');

                // kalau sudah ada baris edit, hapus dulu
                $('.edit-row').remove();

                let id   = $(this).data('id');
                let nama = $(this).data('nama');
                $.ajax({
                    url: "{{ route('hardware.show', '') }}/" + id,
                    type: 'GET',
                    success: function (r) {
                        console.log(r);

                        let colSpan = row.children('td').length;

                        // Field yang mau ditampilkan (pilih sendiri mau yang mana)
                        let fields = [
                            ['printer1_avail', 'Printer Status'],
                            ['printer1_conn', 'Printer Connection'],
                            ['printer1_spd', 'Printer Speed/Baudrate'],
                            ['video1_avail', 'Kamera Status'],
                            ['video1_conn', 'Kamera URL/Path'],
                            ['sound_avail', 'Sound Status'],
                            ['bg_avail', 'BGate Status'],
                            ['bg_conn', 'BGate Connection'],
                            ['bank_reader_avail', 'Reader BANK Status'],
                            ['bank_reader_comm', 'Reader BANK Connection'],
                            ['bank_reader_key', 'Reader BANK Key/Parameter'],
                        ];

                        let rows = '';

                        for (let i = 0; i < fields.length; i ++) {

                            let f1 = fields[i];

                            rows += `
                                <tr>
                                    <td class="fw-semibold text-muted text-label"><strong>${f1[1]}</strong></td>
                                    <td>
                                        <span class="view-mode">${formatValue(f1[0], r[f1[0]])}</span>
                                        <input type="text"
                                            class="form-control form-control-sm edit-mode d-none"
                                            data-key="${f1[0]}"
                                            value="${r[f1[0]] ?? ''}">
                                    </td>
                                </tr>
                            `;
                        }

                        let editHtml = `
                        <tr class="edit-row" data-id="${id}">
                            <td colspan="${colSpan}">
                                <div class="card shadow-sm">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <strong>Hardware Configuration</strong>
                                        <div>
                                            <button class="btn btn-sm btn-primary btn-edit">Edit</button>
                                            <button class="btn btn-sm btn-success btn-save d-none">Save</button>
                                            <button class="btn btn-sm btn-secondary btn-cancel d-none">Cancel</button>
                                        </div>
                                    </div>
                                    <div class="card-body p-2">
                                        <table class="table table-bordered table-sm align-middle mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th width="15%">Setting</th>
                                                    <th width="85%">Value</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                ${rows}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        `;

                        row.after(editHtml);
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                    }        
                });
            });

            // MODE EDIT
            $(document).on('click', '.btn-edit', function () {

                $('.view-mode').addClass('d-none');
                $('.edit-mode').removeClass('d-none');

                $('.btn-edit').addClass('d-none');
                $('.btn-save, .btn-cancel').removeClass('d-none');
            });

            // CANCEL
            $(document).on('click', '.btn-cancel', function () {

                $('.edit-mode').addClass('d-none');
                $('.view-mode').removeClass('d-none');

                $('.btn-save, .btn-cancel').addClass('d-none');
                $('.btn-edit').removeClass('d-none');
            });

            // SAVE
            $(document).on('click', '.btn-save', function () {

                let dataToSend = {};

                $('.edit-mode').each(function () {
                    let key = $(this).data('key');
                    dataToSend[key] = $(this).val();
                });

                console.log(dataToSend);
                let gateId = $('.edit-row').data('id');

                $.ajax({
                    url: "{{ route('hardware.update', '') }}/" + gateId,
                    type: "PUT",
                    data: {
                        _token: "{{ csrf_token() }}",
                        data: dataToSend
                    },
                    success: function () {

                        $('.edit-mode').each(function () {
                            let val = $(this).val();
                            $(this).siblings('.view-mode').text(val);
                        });

                        $('.btn-cancel').click();
                        alert('Berhasil disimpan 🔥');
                    }
                });
            });

            function formatValue(key, value) {

                // kalau field *_avail kita kasih badge
                if (key.includes('_avail')) {

                    if (value == 1) {
                        return `<span class="badge rounded-pill bg-success px-3">ON</span>`;
                    } else {
                        return `<span class="badge rounded-pill bg-danger px-3">OFF</span>`;
                    }
                }

                // default
                return value ?? '-';
            }
        });