@extends('layouts.adminlte')
@section('title','Penggunaan')

@section('content')
<style>
    #tablePenggunaan thead th {
        position: static !important;
        top: auto !important;
    }
    #tablePenggunaan {
        table-layout: fixed;
        width: 100% !important;
    }
    #tablePenggunaan thead th {
        white-space: nowrap;
    }
    #tablePenggunaan tbody td {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        vertical-align: top;
    }
    #modalAssign .modal-dialog {
        max-width: 920px;
    }
    #modalForm .modal-dialog {
        max-width: 760px;
    }
    #modalAssign .select2-results__option,
    #modalForm .select2-results__option {
        white-space: normal;
        line-height: 1.35;
    }
    #modalAssign .select2-selection__rendered,
    #modalForm .select2-selection__rendered {
        white-space: normal !important;
        line-height: 1.35 !important;
    }
    #modalAssign .modal-body,
    #modalForm .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }
</style>
<button class="btn btn-primary mb-2" id="btnTambah">Tambah</button>
<a href="{{ route('penggunaan.export') }}" class="btn btn-success mb-2">Export Excel</a>
<a href="{{ route('penggunaan.export-pdf') }}" class="btn btn-secondary mb-2" target="_blank">Export PDF</a>

<div class="row mb-2">
    <div class="col-md-4">
        <select id="filterLokasiNama" class="form-control">
            <option value="">Semua Lokasi</option>
            <option value="__NO_LOCATION__">Tanpa Lokasi</option>
            @foreach ($lokasis->pluck('nama_lokasi')->filter()->unique()->sort() as $namaLokasi)
                <option value="{{ $namaLokasi }}">{{ $namaLokasi }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4">
        <select id="filterLokasiRuangan" class="form-control" disabled>
            <option value="">Semua Ruangan</option>
        </select>
    </div>
</div>

<table class="table table-bordered nowrap" id="tablePenggunaan">
    <thead>
        <tr>
            <th>User</th>
            <th title="Daftar hardware yang digunakan user">Hardware</th>
            <th title="Daftar lisensi engineering yang digunakan user">Software Engineer</th>
            <th title="Daftar lisensi Microsoft yang digunakan user">Microsoft</th>
            <th>Aksi</th>
        </tr>
    </thead>
</table>

{{-- MODAL --}}
<div class="modal fade" id="modalForm">
    <div class="modal-dialog modal-lg">
        <form id="formPenggunaan">
            @csrf
            <input type="hidden" name="id_penggunaan" id="id_penggunaan">

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

                <div class="modal-body">
                    <select class="form-control mb-2" name="id_user" id="id_user_select" data-placeholder="Pilih User"></select>
                    <select class="form-control mb-2" name="id_hardware" id="id_hardware_select" data-placeholder="Pilih Hardware"></select>
                    <select class="form-control mb-2" name="id_lokasi" id="id_lokasi_select" data-placeholder="Pilih Lokasi"></select>
                    <select class="form-control mb-2" name="id_lisensi_eng" id="id_lisensi_eng_select" data-placeholder="Pilih Software Engineer"></select>
                    <select class="form-control mb-2" name="id_lisensi_microsoft" id="id_lisensi_microsoft_select" data-placeholder="Pilih Microsoft"></select>
                    <div id="ms_seat_wrapper" style="display:none;">
                        <select class="form-control mb-2" name="id_ms_seat" id="id_ms_seat_select">
                            <option value="">Pilih Seat Microsoft</option>
                        </select>
                        <input type="text" class="form-control mb-2" name="ms_device_name" id="ms_device_name" placeholder="Device Name">
                        <input type="text" class="form-control mb-2" name="ms_device_serial" id="ms_device_serial" placeholder="Device Serial">
                    </div>
                    <input type="date" class="form-control mb-2" name="tanggal_mulai">
                    <input type="date" class="form-control mb-2" name="tanggal_selesai">
                    <input type="number" class="form-control mb-2" name="qty_digunakan" min="1" value="1" readonly>
                    <textarea class="form-control" name="keterangan" placeholder="Keterangan"></textarea>
                </div>

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

{{-- MODAL MANAGE ASSIGNMENT --}}
<div class="modal fade" id="modalAssign">
    <div class="modal-dialog modal-xl">
        <form id="formAssign">
            @csrf
            <input type="hidden" name="id_user" id="assign_user_id">
            <input type="hidden" name="type" id="assign_type">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="assignTitle">Tambah</h5>
                </div>

                <div class="modal-body">
                    <div id="assignSelectWrapper"></div>
                    <input type="number" class="form-control mt-2" name="qty_digunakan" id="assign_qty" min="1" value="1">
                    <div class="mt-3" id="assignList"></div>
                </div>

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

{{-- MODAL MOVE USER --}}
<div class="modal fade" id="modalMoveUser">
    <div class="modal-dialog">
        <form id="formMoveUser">
            @csrf
            <input type="hidden" name="from_user_id" id="from_user_id">

            <div class="modal-content">
                <div class="modal-header">
                    <h5>Pindahkan ke User Lain</h5>
                </div>

                <div class="modal-body">
                    <select class="form-control" name="to_user_id" id="to_user_id" required>
                        <option value="">Pilih User Tujuan</option>
                        @foreach ($users as $u)
                            <option value="{{ $u->id_user }}">
                                {{ $u->nmr_finger }} - {{ $u->nama_orang }}
                                @if (in_array($u->id_user, $usersInPenggunaan->toArray()))
                                    (sudah ada)
                                @endif
                            </option>
                        @endforeach
                    </select>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" id="deactivate_old" name="deactivate_old" value="1">
                        <label class="form-check-label" for="deactivate_old">
                            Nonaktifkan user asal setelah pindah
                        </label>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Pindahkan</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {

    // =========================
    // DATATABLE INIT
    // =========================
    let table = $('#tablePenggunaan').DataTable({
        responsive: {
            details: false
        },
        scrollX: true,
        autoWidth: false,
        ajax: {
            url: "{{ route('penggunaan.data') }}",
            dataSrc: 'data'
        },
        columns: [
            {
                data: 'user_label',
                width: '18%',
                render: function (data, type, row) {
                    return data || '';
                }
            },
            {
                data: 'hardware_list',
                width: '28%',
                render: function (data, type, row) {
                    let list = Array.isArray(data)
                        ? data.map(function (item) {
                            return `<span>${item.label || ''}</span>`;
                        }).join(', ')
                        : '';
                    let colTitle = row.hardware_po ? ` title="PO: ${row.hardware_po}"` : '';
                    return `<span${colTitle}>${list}</span> <span class="badge bg-secondary">${row.hardware_count}</span>
                        <button class="btn btn-xs btn-outline-primary ms-2 add-assign" data-type="hardware" data-user="${row.id_user}">+</button>`;
                }
            },
            {
                data: 'eng_list',
                width: '24%',
                render: function (data, type, row) {
                    let list = Array.isArray(data)
                        ? data.map(function (item) {
                            return `<span>${item.label || ''}</span>`;
                        }).join(', ')
                        : '';
                    let colTitle = row.eng_po ? ` title="PO: ${row.eng_po}"` : '';
                    return `<span${colTitle}>${list}</span> <span class="badge bg-secondary">${row.eng_count}</span>
                        <button class="btn btn-xs btn-outline-primary ms-2 add-assign" data-type="eng" data-user="${row.id_user}">+</button>`;
                }
            },
            {
                data: 'ms_list',
                width: '24%',
                render: function (data, type, row) {
                    let list = Array.isArray(data)
                        ? data.map(function (item) {
                            return `<div class="mb-1">${item.label || ''}</div>`;
                        }).join('')
                        : '';
                    let colTitle = row.ms_po ? ` title="PO: ${row.ms_po}"` : '';
                    return `<span${colTitle}>${list}</span> <span class="badge bg-secondary">${row.ms_count}</span>
                        <button class="btn btn-xs btn-outline-primary ms-2 add-assign" data-type="microsoft" data-user="${row.id_user}">+</button>`;
                }
            },
            {
                data: 'id_user',
                width: '6%',
                render: function (data, type, row) {
                    let auditUrl = "{{ route('jadwal.create') }}" + "?users[]=" + encodeURIComponent(row.id_user);
                    return `
                        <a class="btn btn-xs btn-primary" href="${auditUrl}">Audit</a>
                        <button class="btn btn-xs btn-warning move-user" data-user="${row.id_user}">Pindah User</button>
                    `;
                },
                orderable: false,
                searchable: false
            }
        ]
    });

    // =========================
    // TAMBAH DATA
    // =========================
    $('#btnTambah').click(function () {
        $('#formPenggunaan')[0].reset();
        $('#id_penggunaan').val('');
        $('#ms_seat_wrapper').hide();
        $('#id_ms_seat_select').html('<option value="">Pilih Seat Microsoft</option>');
        $('#id_user_select').val(null).trigger('change');
        $('#id_hardware_select').val(null).trigger('change');
        $('#id_lokasi_select').val(null).trigger('change');
        $('#id_lisensi_eng_select').val(null).trigger('change');
        $('#id_lisensi_microsoft_select').val(null).trigger('change');
        $('#modalForm').modal('show');
    });

    function loadMsSeats(lisensiId, $select, excludePenggunaanId = null) {
        if (!lisensiId) {
            $select.html('<option value="">Pilih Seat Microsoft</option>');
            return;
        }
        $.get("{{ route('penggunaan.microsoft-seats', ['id' => '__id__']) }}".replace('__id__', lisensiId), {
            exclude_penggunaan_id: excludePenggunaanId || ''
        }, function (res) {
            let opts = ['<option value=\"\">Pilih Seat Microsoft</option>'];
            (res.seats || []).forEach(function (s) {
                opts.push(`<option value="${s.id}">${s.label}</option>`);
            });
            $select.html(opts.join(''));
        });
    }

    $('#id_lisensi_microsoft_select').on('change', function () {
        let lisensiId = $(this).val();
        if (lisensiId) {
            $('#ms_seat_wrapper').show();
            loadMsSeats(lisensiId, $('#id_ms_seat_select'));
        } else {
            $('#ms_seat_wrapper').hide();
            $('#id_ms_seat_select').html('<option value="">Pilih Seat Microsoft</option>');
        }
    });

    function initSelect2Ajax($el, url, placeholder) {
        $el.select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: placeholder,
            allowClear: true,
            dropdownParent: $('#modalForm'),
            ajax: {
                url: url,
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return { q: params.term || '' };
                },
                processResults: function (data) {
                    return { results: data.results || [] };
                },
                cache: true
            }
        });
    }

    function initAssignSelect2($el, placeholder) {
        if (!$el || !$el.length) return;

        if ($el.hasClass('select2-hidden-accessible')) {
            $el.select2('destroy');
        }

        $el.select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: placeholder,
            allowClear: true,
            dropdownParent: $('#modalAssign')
        });
    }

    function initMoveUserSelect2() {
        let $el = $('#to_user_id');
        if (!$el.length) return;
        if ($el.hasClass('select2-hidden-accessible')) {
            $el.select2('destroy');
        }
        $el.select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: 'Pilih User Tujuan',
            allowClear: true,
            dropdownParent: $('#modalMoveUser')
        });
    }

    initSelect2Ajax($('#id_user_select'), "{{ route('penggunaan.search-users') }}", 'Pilih User');
    initSelect2Ajax($('#id_hardware_select'), "{{ route('penggunaan.search-hardware') }}", 'Pilih Hardware');
    initSelect2Ajax($('#id_lokasi_select'), "{{ route('penggunaan.search-lokasi') }}", 'Pilih Lokasi');
    initSelect2Ajax($('#id_lisensi_eng_select'), "{{ route('penggunaan.search-eng') }}", 'Pilih Software Engineer');
    initSelect2Ajax($('#id_lisensi_microsoft_select'), "{{ route('penggunaan.search-microsoft') }}", 'Pilih Microsoft');

    const lokasiRows = @json($lokasis->map(function ($l) {
        return [
            'nama_lokasi' => $l->nama_lokasi,
            'ruangan' => $l->ruangan,
        ];
    })->values());

    function loadRuanganByLokasi(namaLokasi) {
        let opts = ['<option value="">Semua Ruangan</option>'];
        if (!namaLokasi || namaLokasi === '__NO_LOCATION__') {
            $('#filterLokasiRuangan').html(opts.join('')).val('').trigger('change.select2');
            $('#filterLokasiRuangan').prop('disabled', true);
            return;
        }

        const rooms = [...new Set(
            (lokasiRows || [])
                .filter(x => String(x.nama_lokasi || '') === String(namaLokasi))
                .map(x => (x.ruangan || '').trim())
                .filter(x => x !== '')
        )].sort((a, b) => a.localeCompare(b));

        rooms.forEach(function (r) {
            opts.push(`<option value="${r}">${r}</option>`);
        });

        $('#filterLokasiRuangan').html(opts.join('')).val('').trigger('change.select2');
        $('#filterLokasiRuangan').prop('disabled', false);
    }

    $('#filterLokasiNama').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Filter Lokasi'
    });

    $('#filterLokasiRuangan').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Filter Ruangan'
    });

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

        const lokasiVal = ($('#filterLokasiNama').val() || '').trim().toLowerCase();
        const roomVal = ($('#filterLokasiRuangan').val() || '').trim().toLowerCase();

        const row = table.row(dataIndex).data();
        if (!row) return true;

        const rowLokasi = String(row.lokasi_nama || '').trim().toLowerCase();
        const rowRuangan = String(row.lokasi_ruangan || '').trim().toLowerCase();

        if (lokasiVal === '__no_location__') {
            return rowLokasi === '';
        }

        if (lokasiVal && rowLokasi !== lokasiVal) {
            return false;
        }
        if (roomVal && rowRuangan !== roomVal) {
            return false;
        }

        return true;
    });

    $('#filterLokasiNama').on('change', function () {
        loadRuanganByLokasi($(this).val() || '');
        table.draw();
    });

    $('#filterLokasiRuangan').on('change', function () {
        table.draw();
    });

    // =========================
    // SIMPAN DATA
    // =========================
    $('#formPenggunaan').submit(function (e) {
        e.preventDefault();

        $.ajax({
            url: "{{ route('penggunaan.store') }}",
            type: "POST",
            data: $(this).serialize(),
            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 buildSelect(type, res, hw) {
        if (type === 'hardware') {
            let options = (hw.hardware || []).map(h => `<option value="${h.id}">${h.label}</option>`);
            return `
                <select class="form-control" name="id_hardware" id="assign_hardware_select">
                    <option value=""></option>
                    ${options.join('')}
                </select>
            `;
        }
        if (type === 'eng') {
            let options = (res.eng || []).map(l => `<option value="${l.id}">${l.label} (sisa ${l.qty_sisa})</option>`);
            return `
                <select class="form-control" name="id_lisensi_eng" id="assign_eng_select">
                    <option value=""></option>
                    ${options.join('')}
                </select>
            `;
        }
        let options = (res.microsoft || []).map(m => `<option value="${m.id}">${m.label} (seat tersedia ${m.available_seats})</option>`);
        return `
            <select class="form-control mb-2" name="id_lisensi_microsoft" id="assign_ms_select">
                <option value=""></option>
                ${options.join('')}
            </select>
            <select class="form-control mb-2" name="id_ms_seat" id="assign_ms_seat">
                <option value="">Pilih Seat Microsoft</option>
            </select>
            <input type="text" class="form-control mb-2" name="ms_device_name" id="assign_ms_device_name" placeholder="Device Name">
            <input type="text" class="form-control mb-2" name="ms_device_serial" id="assign_ms_device_serial" placeholder="Device Serial">
        `;
    }

    function renderAssignList(type, data) {
        let items = data[type] || [];
        if (!items.length) {
            $('#assignList').html('<div class="text-muted">Belum ada data.</div>');
            return;
        }
        let html = items.map(it => {
            let qtyText = (it.qty !== undefined && it.qty !== null) ? ` (qty ${it.qty})` : '';
            return `<div class="d-flex justify-content-between align-items-center mb-1">
                <span>${it.label}${qtyText}</span>
                <div>
                    <button class="btn btn-xs btn-warning edit-assign mr-1" data-id="${it.id_penggunaan}" data-type="${type}">Edit</button>
                    <button class="btn btn-xs btn-danger remove-assign" data-id="${it.id_penggunaan}" data-type="${type}">Hapus</button>
                </div>
            </div>`;
        }).join('');
        $('#assignList').html(html);
    }

    function appendSelectedOption($el, id, text) {
        if (!$el || !$el.length || !id) return;
        let exists = $el.find(`option[value="${id}"]`).length > 0;
        if (!exists) {
            $el.append(new Option(text || id, id, true, true));
        } else {
            $el.val(id);
        }
        $el.trigger('change');
    }

    function openEditPenggunaan(idPenggunaan) {
        $.get("{{ url('transaksi/penggunaan/edit') }}/" + idPenggunaan, function (res) {
            $('#formPenggunaan')[0].reset();
            $('#id_penggunaan').val(res.id_penggunaan || '');
            $('#ms_seat_wrapper').hide();
            $('#id_ms_seat_select').html('<option value="">Pilih Seat Microsoft</option>');

            appendSelectedOption($('#id_user_select'), res.id_user, (res.user_label || ('ID ' + res.id_user)));
            appendSelectedOption($('#id_lokasi_select'), res.id_lokasi, (res.lokasi_label || ('ID ' + res.id_lokasi)));

            if (res.id_hardware) {
                appendSelectedOption($('#id_hardware_select'), res.id_hardware, (res.hardware_label || ('ID ' + res.id_hardware)));
            } else {
                $('#id_hardware_select').val(null).trigger('change');
            }

            if (res.id_lisensi_eng) {
                appendSelectedOption($('#id_lisensi_eng_select'), res.id_lisensi_eng, (res.eng_label || ('ID ' + res.id_lisensi_eng)));
            } else {
                $('#id_lisensi_eng_select').val(null).trigger('change');
            }

            if (res.id_lisensi_microsoft) {
                appendSelectedOption($('#id_lisensi_microsoft_select'), res.id_lisensi_microsoft, (res.microsoft_label || ('ID ' + res.id_lisensi_microsoft)));
                $('#ms_seat_wrapper').show();
                loadMsSeats(res.id_lisensi_microsoft, $('#id_ms_seat_select'), res.id_penggunaan);
                setTimeout(function () {
                    if (res.id_ms_seat) {
                        appendSelectedOption($('#id_ms_seat_select'), res.id_ms_seat, (res.ms_seat_label || ('Seat ' + res.id_ms_seat)));
                    }
                }, 200);
            } else {
                $('#id_lisensi_microsoft_select').val(null).trigger('change');
            }

            $('[name=tanggal_mulai]').val(res.tanggal_mulai || '');
            $('[name=tanggal_selesai]').val(res.tanggal_selesai || '');
            $('[name=qty_digunakan]').val(res.qty_digunakan || 1);
            $('[name=keterangan]').val(res.keterangan || '');
            $('#ms_device_name').val(res.ms_device_name || '');
            $('#ms_device_serial').val(res.ms_device_serial || '');

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

    $(document).on('click', '.add-assign', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let userId = $(this).data('user');
        let type = $(this).data('type');
        $('#assign_user_id').val(userId);
        $('#assign_type').val(type);
        $('#assignTitle').text(`Tambah ${type}`);
        $('#assign_qty').val(1).prop('disabled', type === 'microsoft');

        $.when(
            $.get("{{ route('penggunaan.lisensi-available') }}"),
            $.get("{{ route('penggunaan.hardware-available') }}"),
            $.get("{{ url('transaksi/penggunaan/assignments') }}/" + userId)
        ).done(function (availRes, hwRes, assignRes) {
            let avail = availRes[0] || {};
            let hw = hwRes[0] || {};
            let assign = assignRes[0] || {};
            $('#assignSelectWrapper').html(buildSelect(type, avail, hw));

            if (type === 'hardware') {
                initAssignSelect2($('#assign_hardware_select'), 'Pilih Hardware');
            }

            if (type === 'eng') {
                initAssignSelect2($('#assign_eng_select'), 'Pilih Software Engineer');
            }

            if (type === 'microsoft') {
                let $msSelect = $('#assign_ms_select');
                let $seatSelect = $('#assign_ms_seat');

                initAssignSelect2($msSelect, 'Pilih Microsoft');
                loadMsSeats($msSelect.val(), $seatSelect);

                $msSelect.on('change', function () {
                    loadMsSeats($(this).val(), $seatSelect);
                });
            }
            renderAssignList(type, assign);
            $('#modalAssign').modal('show');
        });
    });

    $(document).on('click', '.move-user', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let userId = $(this).data('user');
        if (!userId) {
            alert('User sumber tidak valid.');
            return;
        }
        $('#from_user_id').val(userId);
        $('#to_user_id').val('');

        $.get("{{ route('penggunaan.users-available') }}", function (res) {
            let opts = ['<option value=\"\">Pilih User Tujuan</option>'];
            (res.users || []).forEach(function (u) {
                let label = u.label + (u.in_use ? ' (sudah ada)' : '');
                opts.push(`<option value="${u.id}">${label}</option>`);
            });
            $('#to_user_id').html(opts.join(''));
            initMoveUserSelect2();
            $('#modalMoveUser').modal('show');
        });
    });

    $('#formMoveUser').submit(function (e) {
        e.preventDefault();
        let fromId = $('#from_user_id').val();
        let toId = $('#to_user_id').val();
        if (!fromId) {
            alert('User sumber tidak valid.');
            return;
        }
        if (!toId) {
            alert('Pilih user tujuan dulu.');
            return;
        }
        if (String(fromId) === String(toId)) {
            alert('User tujuan harus berbeda.');
            return;
        }
        $.ajax({
            url: "{{ route('penggunaan.move-user') }}",
            type: "POST",
            data: $(this).serialize(),
            success: function () {
                $('#modalMoveUser').modal('hide');
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                let message = 'Gagal memindahkan data.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                alert(message);
            }
        });
    });

    $('#formAssign').submit(function (e) {
        e.preventDefault();
        $.ajax({
            url: "{{ route('penggunaan.assign') }}",
            type: "POST",
            data: $(this).serialize(),
            success: function () {
                $('#modalAssign').modal('hide');
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                let message = 'Gagal menyimpan data.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                alert(message);
            }
        });
    });

    $(document).on('click', '.remove-assign', function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (!confirm('Hapus item ini?')) return;
        let id = $(this).data('id');
        let type = $(this).data('type') || $('#assign_type').val();
        $.ajax({
            url: "{{ route('penggunaan.unassign', ['id' => '__id__']) }}".replace('__id__', id),
            type: "POST",
            data: { _token: "{{ csrf_token() }}", _method: "DELETE", type: type },
            success: function () {
                let userId = $('#assign_user_id').val();
                $.get("{{ url('transaksi/penggunaan/assignments') }}/" + userId, function (assign) {
                    let type = $('#assign_type').val();
                    renderAssignList(type, assign);
                });
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                let message = 'Gagal menghapus item.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                alert(message);
            }
        });
    });

    $(document).on('click', '.edit-assign', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let id = $(this).data('id');
        if (!id) return;
        openEditPenggunaan(id);
    });

});
</script>
@endpush