@extends('layouts.adminlte')
@section('title','Inventaris Hardware')

@section('content')
<style>
    .age-safe {
        background: #d4edda;
    }
    .age-warning {
        background: #fff3cd;
    }
    .age-danger {
        background: #f8d7da;
    }
    .duplicate-kode {
        background: #f8d7da;
        padding: 2px 6px;
        border-radius: 4px;
        display: inline-block;
    }
    .kode-warning {
        color: #dc3545;
        font-weight: 600;
    }
    .photo-thumb {
        max-height: 42px;
        border-radius: 4px;
    }
    .po-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 6px;
        background: #e9f5ff;
        border: 1px solid #b6dcff;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
    }
    .po-copy {
        color: #0d6efd;
    }
</style>
<div id="poNoticeHw" class="alert alert-success" style="display:none; position: fixed; top: 70px; right: 20px; z-index: 1051;">
    No PO disalin
</div>
@if (session('import_warning'))
    <div class="alert alert-warning">
        {{ session('import_warning') }}
        @if (session('import_failed_file'))
            <a href="{{ route('inventaris-hardware.import-failed') }}" class="btn btn-sm btn-outline-danger ml-2">Download Gagal Import</a>
        @endif
    </div>
@endif
@if (session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif
<button class="btn btn-primary mb-2" id="btnTambah">Tambah Hardware</button>
<button class="btn btn-outline-danger mb-2" id="filterPemusnahan">Filter Suggest Pemusnahan</button>
<button class="btn btn-outline-warning mb-2" id="filterBelumUsed">Filter Belum Used</button>
<button class="btn btn-outline-secondary mb-2" id="filterUncategory">Filter Uncategory</button>
<a href="{{ route('inventaris-hardware.export') }}" class="btn btn-success mb-2">Export Excel</a>
<a href="{{ route('inventaris-hardware.export-category-count') }}" class="btn btn-outline-success mb-2" target="_blank">Export Count Category</a>
<a href="{{ route('inventaris-hardware.export-pdf') }}" class="btn btn-outline-secondary mb-2" target="_blank">Export PDF</a>
<a href="{{ route('inventaris-hardware.template') }}" class="btn btn-outline-secondary mb-2">Download Template</a>
<form action="{{ route('inventaris-hardware.import') }}" method="POST" enctype="multipart/form-data" class="d-inline">
    @csrf
    <input type="file" name="file" required>
    <button class="btn btn-info mb-2">Import</button>
</form>
<div class="d-inline-block ml-2">
    <input class="form-control d-inline-block mb-2" style="width: 220px;" id="bulkKategoriInput" placeholder="Kategori (bulk)">
    <button class="btn btn-secondary mb-2" id="btnBulkKategori">Bulk Edit Kategori</button>
    <small class="text-muted d-block" style="margin-top:-6px;">Pilih baris via checkbox lalu klik Bulk Edit.</small>
</div>

<table class="table table-bordered" id="tableHardware">
    <thead>
        <tr>
            <th style="width: 36px;"><input type="checkbox" id="checkAllHw" title="Pilih semua"></th>
            <th>Kode</th>
            <th>Nama Barang</th>
            <th>Kategori</th>
            <th>Deskripsi</th>
            <th>Tahun</th>
            <th>No PO</th>
            <th>SN Hardware</th>
            <th>Foto</th>
            <th>Qty</th>
            <th>Updated At</th>
            <th>Aksi</th>
        </tr>
    </thead>
</table>

{{-- MODAL --}}
<div class="modal fade" id="modalForm">
    <div class="modal-dialog">
        <form id="formHardware">
            @csrf
            <input type="hidden" name="id_hardware" id="id_hardware">
            <input type="hidden" id="original_kode_inventaris_local" value="">

            <div class="modal-content">
                <div class="modal-header">
                    <h5>Inventaris Hardware</h5>
                </div>

                <div class="modal-body">
                    <input class="form-control mb-2" name="kode_inventaris_local" id="kode_inventaris_local" list="kodeList" placeholder="Kode Inventaris">
                    <datalist id="kodeList"></datalist>
                    <small class="text-muted d-block mb-2" id="kodeInfo"></small>
                    <small class="kode-warning d-block mb-2" id="kodeWarning" style="display:none;">Kode sudah ada (termasuk jika beda spasi). Jika tambah data baru akan ditolak.</small>
                    <input class="form-control mb-2" name="nama_barang" id="nama_barang" list="namaBarangList" placeholder="Nama Barang">
                    <datalist id="namaBarangList"></datalist>
                    <input class="form-control mb-2" name="kategori" placeholder="Kategori">
                    <textarea class="form-control mb-2" name="deskripsi_barang" placeholder="Deskripsi"></textarea>
                    <select class="form-control mb-2" name="tahun_perolehan" id="tahun_perolehan_select"></select>
                    <input class="form-control mb-2" name="no_transaksi_po" placeholder="No PO">
                    <input class="form-control mb-2" name="sn_hardware" placeholder="SN Hardware">
                    <input class="form-control mb-2" type="file" name="photo_file" id="photo_file" accept=".jpg,.jpeg">
                    <small class="text-muted d-block mb-2">Maks 700KB, JPG/JPEG.</small>
                    <div id="photoPreviewWrap" style="display:none;">
                        <img id="photoPreview" class="photo-thumb" src="" alt="Foto">
                    </div>
                    <input class="form-control mb-2" name="qty" placeholder="Qty" value="1" readonly>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Simpan</button>
                </div>
            </div>

        </form>
    </div>
</div>

{{-- MODAL APPLY USER --}}
<div class="modal fade" id="modalApplyUser">
    <div class="modal-dialog">
        <form id="formApplyUser">
            @csrf
            <input type="hidden" id="apply_hardware_id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>Apply Hardware ke User</h5>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <small class="text-muted">Hardware</small>
                        <div id="apply_hardware_label" class="font-weight-bold"></div>
                    </div>
                    <select class="form-control mb-2" name="id_user" id="apply_user_select" required></select>
                    <input type="date" class="form-control" name="tanggal_mulai" id="apply_tanggal_mulai">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success">Apply</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')

<script>
$(function () {

    function ensureYearOptions(selectedYear) {
        let $select = $('#tahun_perolehan_select');
        let currentYear = new Date().getFullYear();
        let startYear = currentYear - 30;
        let yearOptions = '';

        if ($select.find('option').length === 0) {
            for (let year = currentYear; year >= startYear; year--) {
                yearOptions += `<option value="${year}">${year}</option>`;
            }
            $select.html(yearOptions);
        }

        let y = parseInt(selectedYear, 10);
        if (y && $select.find(`option[value="${y}"]`).length === 0) {
            $select.prepend(`<option value="${y}">${y}</option>`);
        }
    }

    let table = $('#tableHardware').DataTable({
        ajax: {
            url: "{{ route('inventaris-hardware.data') }}",
            dataSrc: 'data'
        },
        columns: [
            {
                data: 'id_hardware',
                render: function (data) {
                    return `<input type="checkbox" class="row-check-hw" value="${data}">`;
                },
                orderable: false,
                searchable: false
            },
            { data: 'kode_inventaris_local', render: function (data, type, row) {
                if (row.duplicate_kode) {
                    return `<span class="duplicate-kode">${data || ''}</span> <span class="badge badge-danger">DUPE</span>`;
                }
                return data || '';
            }},
            { data: 'nama_barang', render: function (data, type, row) {
                let badge = row.suggest_pemusnahan
                    ? ' <span class="badge badge-danger">Suggest Pemusnahan</span>'
                    : '';
                let used = row.is_used ? ' <span class="badge badge-warning">Used</span>' : '';
                let borrowed = row.is_borrowed ? ' <span class="badge badge-info">Borrow</span>' : '';
                let action = row.suggest_pemusnahan
                    ? ` <button class="btn btn-outline-danger btn-xs ml-1 pemusnahan" data-id="${row.id_hardware}" data-label="${(row.kode_inventaris_local || '')} - ${(row.nama_barang || '')}">Buat Form Pemusnahan</button>`
                    : '';
                return `${data || ''}${badge}${used}${borrowed}${action}`;
            }},
            { data: 'kategori' },
            { data: 'deskripsi_barang' },
            { data: 'tahun_perolehan', render: function (data) {
                let year = parseInt(data, 10);
                if (!year) return data || '';
                let age = (new Date().getFullYear()) - year;
                if (age > 5) {
                    return `<span class="age-danger d-block p-1">${year}</span>`;
                }
                if (age >= 3) {
                    return `<span class="age-warning d-block p-1">${year}</span>`;
                }
                if (age >= 1) {
                    return `<span class="age-safe d-block p-1">${year}</span>`;
                }
                return `${year}`;
            }},
            { data: 'no_transaksi_po', render: function (data) {
                if (!data) return '';
                let escaped = String(data).replace(/"/g, '&quot;');
                return `
                    <span class="po-tag" data-po="${escaped}" title="Double click to copy">
                        ${data}
                        <i class="far fa-copy po-copy" aria-hidden="true"></i>
                    </span>
                `;
            }},
            { data: 'sn_hardware' },
            { data: 'photo_url', render: function (data) {
                if (!data) return '';
                return `<a href="${data}" target="_blank"><img src="${data}" class="photo-thumb" alt="Foto"></a>`;
            }},
            { data: 'qty' },
            { data: 'updated_at' },
            {
                data: 'id_hardware',
                render: function (data, type, row) {
                    let updateBtn = row.duplicate_kode
                        ? `<button class="btn btn-danger btn-sm edit" data-id="${data}">Butuh Update</button>`
                        : `<button class="btn btn-warning btn-sm edit" data-id="${data}">Edit</button>`;
                return `
                        <a class="btn btn-dark btn-sm" target="_blank" href="{{ url('master/inventaris-hardware/label') }}/${data}?tape_height_mm=12&bar_height_mm=10&label_length_mm=45&show_text=0">Label</a>
                        <button class="btn btn-secondary btn-sm copy" data-id="${data}">Copy</button>
                        ${updateBtn}
                        ${(!row.is_used && !row.is_borrowed) ? `<button class="btn btn-success btn-sm apply-user" data-id="${data}" data-label="${(row.kode_inventaris_local || '')} - ${(row.nama_barang || '')}">Apply</button>` : ''}
                        <button class="btn btn-info btn-sm trace" data-id="${data}">Trace</button>
                        <button class="btn btn-danger btn-sm delete" data-id="${data}">Hapus</button>
                    `;
            },
            orderable: false,
            searchable: false
        }
    ]
});

    function getSelectedHardwareIds() {
        return $('.row-check-hw:checked').map(function () {
            return parseInt($(this).val(), 10);
        }).get().filter(function (v) { return !!v; });
    }

    $('#checkAllHw').on('change', function () {
        let checked = $(this).is(':checked');
        $('.row-check-hw').prop('checked', checked);
    });

    $('#tableHardware').on('draw.dt', function () {
        // reset select-all on redraw (pagination/filter)
        $('#checkAllHw').prop('checked', false);
    });

    $('#btnBulkKategori').click(function () {
        let ids = getSelectedHardwareIds();
        if (!ids.length) {
            alert('Pilih minimal 1 hardware.');
            return;
        }
        let kategori = ($('#bulkKategoriInput').val() || '').trim();
        if (!confirm(`Update kategori untuk ${ids.length} item?`)) return;

        $.ajax({
            url: "{{ route('inventaris-hardware.bulk-kategori') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                ids: ids,
                kategori: kategori
            },
            success: function (res) {
                $('#bulkKategoriInput').val('');
                $('#checkAllHw').prop('checked', false);
                table.ajax.reload(null, false);
                alert(`Berhasil update kategori (${res.updated || 0} baris).`);
            },
            error: function (xhr) {
                let msg = 'Gagal bulk update.';
                if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
                alert(msg);
            }
        });
    });

    let filterSuggest = false;
    let filterBelumUsed = false;
    let filterUncategory = false;

    $('#filterPemusnahan').click(function () {
        filterSuggest = !filterSuggest;
        $(this).toggleClass('btn-outline-danger btn-danger');
        $(this).text(filterSuggest ? 'Filter: Suggest Pemusnahan (ON)' : 'Filter Suggest Pemusnahan');
        table.draw();
    });

    $('#filterBelumUsed').click(function () {
        filterBelumUsed = !filterBelumUsed;
        $(this).toggleClass('btn-outline-warning btn-warning');
        $(this).text(filterBelumUsed ? 'Filter: Belum Used (ON)' : 'Filter Belum Used');
        table.draw();
    });

    $('#filterUncategory').click(function () {
        filterUncategory = !filterUncategory;
        $(this).toggleClass('btn-outline-secondary btn-secondary');
        $(this).text(filterUncategory ? 'Filter: Uncategory (ON)' : 'Filter Uncategory');
        table.draw();
    });

    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        if (settings.nTable.id !== 'tableHardware') return true;
        let rowData = table.row(dataIndex).data();
        if (!rowData) return true;

        if (filterSuggest && !rowData.suggest_pemusnahan) return false;
        if (filterBelumUsed && rowData.is_used) return false;
        if (filterUncategory) {
            let k = (rowData.kategori || '').toString().trim();
            if (k !== '') return false;
        }

        return true;
    });

    $('#btnTambah').click(function () {
        $('#formHardware')[0].reset();
        $('#id_hardware').val('');
        $('#original_kode_inventaris_local').val('');
        $('#kodeInfo').text('');
        $('#kode_inventaris_local').val('');
        $('#kodeWarning').hide();
        $('#tahun_perolehan_select').empty();
        $('#photoPreviewWrap').hide();
        $('#photoPreview').attr('src', '');

        $.get("{{ route('inventaris-hardware.next-kode') }}", function (res) {
            let infoParts = [];
            if (res.last_code) {
                infoParts.push(`Urut terakhir: ${res.last_code}`);
            } else {
                infoParts.push('Belum ada data sebelumnya.');
            }
            if (res.last_codes && res.last_codes.length) {
                infoParts.push(`5 terakhir: ${res.last_codes.join(', ')}`);
            }
            if (res.next_code) {
                infoParts.push(`Next: ${res.next_code}`);
            }
            $('#kodeInfo').text(infoParts.join(' | '));

            if (res.next_code) {
                $('#kode_inventaris_local').val(res.next_code);
                $('#kode_inventaris_local').trigger('change');
            }

            let options = [];
            let seen = {};

            if (res.last_codes && res.last_codes.length) {
                res.last_codes.forEach(function (code) {
                    if (!seen[code]) {
                        seen[code] = true;
                        options.push(`<option value="${code}"></option>`);
                    }
                });
            }

            if (res.next_code && !seen[res.next_code]) {
                seen[res.next_code] = true;
                options.push(`<option value="${res.next_code}"></option>`);
            }

            if (res.all_codes && res.all_codes.length) {
                res.all_codes.forEach(function (code) {
                    if (!seen[code]) {
                        seen[code] = true;
                        options.push(`<option value="${code}"></option>`);
                    }
                });
            }

            $('#kodeList').html(options.join(''));

            let namaOptions = [];
            let namaSeen = {};
            if (res.all_nama_barang && res.all_nama_barang.length) {
                res.all_nama_barang.forEach(function (name) {
                    if (!namaSeen[name]) {
                        namaSeen[name] = true;
                        namaOptions.push(`<option value="${name}"></option>`);
                    }
                });
            }
            $('#namaBarangList').html(namaOptions.join(''));
        });

        ensureYearOptions(null);

        $('#modalForm').modal('show');
    });

    $('#formHardware').submit(function (e) {
        e.preventDefault();

        let formData = new FormData(this);

        $.ajax({
            url: "{{ route('inventaris-hardware.store') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function () {
                $('#modalForm').modal('hide');
                table.ajax.reload();
            },
            error: function (xhr) {
                let message = 'Gagal menyimpan data.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                alert(message);
            }
        });
    });

    function normalizeKodeJs(v) {
        return String(v || '').trim().toLowerCase().replace(/\s+/g, '');
    }

    function checkKode() {
        let kode = ($('#kode_inventaris_local').val() || '').trim();
        let id = $('#id_hardware').val();
        let originalKode = ($('#original_kode_inventaris_local').val() || '').trim();
        if (!kode) {
            $('#kodeWarning').hide();
            return;
        }
        if (id && originalKode && normalizeKodeJs(kode) === normalizeKodeJs(originalKode)) {
            $('#kodeWarning').hide();
            return;
        }
        $.get("{{ route('inventaris-hardware.check-kode') }}", {
            kode_inventaris_local: kode,
            id_hardware: id
        }, function (res) {
            if (res.exists) {
                $('#kodeWarning').show();
            } else {
                $('#kodeWarning').hide();
            }
        });
    }

    $('#kode_inventaris_local').on('blur change keyup', function () {
        checkKode();
    });

    $('#photo_file').on('change', function () {
        const file = this.files && this.files[0];
        if (!file) {
            $('#photoPreviewWrap').hide();
            $('#photoPreview').attr('src', '');
            return;
        }
        const reader = new FileReader();
        reader.onload = function (e) {
            $('#photoPreview').attr('src', e.target.result);
            $('#photoPreviewWrap').show();
        };
        reader.readAsDataURL(file);
    });

    $(document).on('click', '.edit', function () {
        let id = $(this).data('id');

        $.get("{{ url('master/inventaris-hardware/edit') }}/" + id, function (res) {
            $('#id_hardware').val(res.id_hardware);
            $('[name=kode_inventaris_local]').val(res.kode_inventaris_local);
            $('#original_kode_inventaris_local').val(res.kode_inventaris_local || '');
            $('#kodeInfo').text('');
            $('#kodeWarning').hide();
            $('[name=nama_barang]').val(res.nama_barang);
            $('[name=kategori]').val(res.kategori);
            $('[name=deskripsi_barang]').val(res.deskripsi_barang);
            ensureYearOptions(res.tahun_perolehan);
            $('#tahun_perolehan_select').val(res.tahun_perolehan);
            $('[name=no_transaksi_po]').val(res.no_transaksi_po);
            $('[name=sn_hardware]').val(res.sn_hardware);
            $('[name=qty]').val(res.qty);
            if (res.photo_url) {
                $('#photoPreview').attr('src', res.photo_url);
                $('#photoPreviewWrap').show();
            } else {
                $('#photoPreviewWrap').hide();
                $('#photoPreview').attr('src', '');
            }
            $('#modalForm').modal('show');
        });
    });

    $(document).on('click', '.copy', function () {
        let id = $(this).data('id');
        $.get("{{ url('master/inventaris-hardware/edit') }}/" + id, function (res) {
            $('#formHardware')[0].reset();
            $('#id_hardware').val('');
            $('#original_kode_inventaris_local').val('');
            $('#kodeInfo').text('');
            $('#kodeWarning').hide();
            $('[name=kode_inventaris_local]').val(res.kode_inventaris_local);
            $('[name=nama_barang]').val(res.nama_barang);
            $('[name=kategori]').val(res.kategori);
            $('[name=deskripsi_barang]').val(res.deskripsi_barang);
            ensureYearOptions(res.tahun_perolehan);
            $('#tahun_perolehan_select').val(res.tahun_perolehan);
            $('[name=no_transaksi_po]').val(res.no_transaksi_po);
            $('[name=sn_hardware]').val(res.sn_hardware);
            $('[name=qty]').val(res.qty || 1);
            if (res.photo_url) {
                $('#photoPreview').attr('src', res.photo_url);
                $('#photoPreviewWrap').show();
            } else {
                $('#photoPreviewWrap').hide();
                $('#photoPreview').attr('src', '');
            }
            $('#modalForm').modal('show');
        });
    });

    $(document).on('click', '.delete', function () {
        if (confirm('Hapus data?')) {
            $.ajax({
                url: "{{ url('master/inventaris-hardware/delete') }}/" + $(this).data('id'),
                type: "DELETE",
                data: { _token: "{{ csrf_token() }}" },
                success: function () {
                    table.ajax.reload();
                }
            });
        }
    });

    $(document).on('click', '.trace', function () {
        let id = $(this).data('id');
        $.get("{{ route('inventaris-hardware.trace', ['id' => '__id__']) }}".replace('__id__', id), function (res) {
            let rows = (res.data || []).map(function (r, idx) {
                return `
                    <tr>
                        <td>${idx + 1}</td>
                        <td>${r.user || ''}</td>
                        <td>${r.tanggal_mulai || ''}</td>
                        <td>${r.tanggal_selesai || ''}</td>
                        <td>${r.keterangan || ''}</td>
                    </tr>
                `;
            }).join('');
            if (!rows) {
                rows = `<tr><td colspan="5" class="text-center text-muted">Belum ada history.</td></tr>`;
            }
            $('#traceBody').html(rows);
            $('#modalTrace').modal('show');
        });
    });

    $(document).on('click', '.pemusnahan', function () {
        let label = $(this).data('label') || '';
        alert('Buat Form Pemusnahan untuk: ' + label);
    });

    function initApplyUserSelect() {
        if ($('#apply_user_select').hasClass('select2-hidden-accessible')) {
            $('#apply_user_select').select2('destroy');
        }
        $('#apply_user_select').select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: 'Pilih User',
            allowClear: true,
            dropdownParent: $('#modalApplyUser'),
            ajax: {
                url: "{{ route('penggunaan.search-users') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return { q: params.term || '' };
                },
                processResults: function (data) {
                    return { results: data.results || [] };
                },
                cache: true
            }
        });
    }

    $(document).on('click', '.apply-user', function () {
        let hardwareId = $(this).data('id');
        let label = $(this).data('label') || '';
        $('#apply_hardware_id').val(hardwareId);
        $('#apply_hardware_label').text(label);
        $('#apply_tanggal_mulai').val(new Date().toISOString().slice(0, 10));
        $('#apply_user_select').val(null).trigger('change');
        initApplyUserSelect();
        $('#modalApplyUser').modal('show');
    });

    $('#formApplyUser').on('submit', function (e) {
        e.preventDefault();
        let hardwareId = $('#apply_hardware_id').val();
        if (!hardwareId) return;

        $.ajax({
            url: "{{ route('inventaris-hardware.apply-user', ['id' => '__id__']) }}".replace('__id__', hardwareId),
            type: "POST",
            data: $(this).serialize(),
            success: function () {
                $('#modalApplyUser').modal('hide');
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                let message = 'Gagal apply hardware ke user.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                alert(message);
            }
        });
    });

    /* ===============================
       DOUBLE CLICK INLINE EDIT
    =============================== */
    $('#tableHardware tbody').on('dblclick', 'td', function () {

        let cell = table.cell(this);
        let rowData = table.row(this).data();
        let colIndex = cell.index().column;
        let colCount = table.columns().count();
        let dataSrc = table.column(colIndex).dataSrc();

        // Kolom checkbox & aksi jangan diedit
        if (colIndex === 0 || colIndex === (colCount - 1)) return;

        // Kolom yang tidak bisa diedit
        let nonEditable = new Set(['photo_url', 'qty', 'updated_at']);
        if (nonEditable.has(String(dataSrc || ''))) return;

        if ($(this).find('.edit-cell').length) return;

        let oldValue = (rowData && dataSrc && typeof dataSrc === 'string') ? (rowData[dataSrc] ?? '') : cell.data();
        oldValue = (oldValue === null || oldValue === undefined) ? '' : String(oldValue);

        let editor;

        if (dataSrc === 'tahun_perolehan') {
            let currentYear = new Date().getFullYear();
            let startYear = currentYear - 30;
            let options = '';
            let existingYear = parseInt(oldValue, 10);

            for (let year = currentYear; year >= startYear; year--) {
                let selected = (String(year) === String(oldValue)) ? 'selected' : '';
                options += `<option value="${year}" ${selected}>${year}</option>`;
            }

            if (existingYear && $(`option[value="${existingYear}"]`, $('<select>' + options + '</select>')).length === 0) {
                options = `<option value="${existingYear}" selected>${existingYear}</option>` + options;
            }

            $(this).html(`
                <select class="form-control form-control-sm edit-cell">
                    ${options}
                </select>
            `);
        } else if (dataSrc === 'deskripsi_barang') {
            $(this).html(`
                <textarea class="form-control form-control-sm edit-cell" rows="2">${oldValue}</textarea>
            `);
        } else {
            $(this).html(`
                <input type="text" class="form-control form-control-sm edit-cell"
                       value="${oldValue}">
            `);
        }

        editor = $(this).find('.edit-cell');
        editor.focus().select();

        function saveValue() {
            let newValue = editor.val();
            let field = dataSrc;
            if (!field || typeof field !== 'string') {
                table.row(cell.index().row).invalidate().draw(false);
                return;
            }

            // Optimistic update local row data (will be re-rendered after success)
            let prev = rowData ? rowData[field] : oldValue;
            if (rowData) rowData[field] = newValue;

            $.post("{{ route('inventaris-hardware.store') }}", {
                _token: "{{ csrf_token() }}",
                id_hardware: rowData.id_hardware,
                [field]: newValue
            }).done(function () {
                table.row(cell.index().row).data(rowData).invalidate().draw(false);
            }).fail(function (xhr) {
                let message = 'Gagal menyimpan perubahan.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                alert(message);
                if (rowData) rowData[field] = prev;
                table.row(cell.index().row).data(rowData).invalidate().draw(false);
            }).always(function () {
                $('#checkAllHw').prop('checked', false);
            });
        }

        editor.on('blur', saveValue);

        editor.on('keydown', function(e){
            if(e.key === 'Enter'){
                e.preventDefault();
                saveValue();
            }
        });

    });

    function copyTextToClipboardHw(text) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            return navigator.clipboard.writeText(text);
        }
        return new Promise(function (resolve) {
            const temp = $('<textarea>').val(text).appendTo('body').select();
            document.execCommand('copy');
            temp.remove();
            resolve();
        });
    }

    $(document).on('dblclick', '.po-tag', function (e) {
        e.preventDefault();
        e.stopPropagation();
        const po = $(this).data('po') || '';
        if (!po) return;
        copyTextToClipboardHw(po).then(function () {
            $('#poNoticeHw').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
        });
    });

    $(document).on('click', '.po-copy', function (e) {
        e.preventDefault();
        e.stopPropagation();
        const po = $(this).closest('.po-tag').data('po') || '';
        if (!po) return;
        copyTextToClipboardHw(po).then(function () {
            $('#poNoticeHw').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
        });
    });

});
</script>
@endpush

{{-- MODAL TRACE --}}
<div class="modal fade" id="modalTrace">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5>History Penggunaan Hardware</h5>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>User</th>
                            <th>Tanggal Mulai</th>
                            <th>Tanggal Selesai</th>
                            <th>Keterangan</th>
                        </tr>
                    </thead>
                    <tbody id="traceBody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>