@extends('layouts.adminlte')
@section('title','Lisensi Engineering')

@section('content')
<style>
    .age-safe {
        background: #d4edda;
    }
    .age-warning {
        background: #fff3cd;
    }
    .age-danger {
        background: #f8d7da;
    }
    .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;
    }
    .dataTables_wrapper .dataTables_scrollHead {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #fff;
    }
</style>
<div id="poNoticeEng" class="alert alert-success" style="display:none; position: fixed; top: 70px; right: 20px; z-index: 1051;">
    Disalin
</div>
<button class="btn btn-primary mb-2" id="btnTambah">Tambah</button>
<button class="btn btn-outline-danger mb-2" id="filterPemusnahan">Filter Suggest Pemusnahan</button>
<button class="btn btn-outline-info mb-2" id="filterUsed">Filter Used</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('lisensi-engineering.export') }}" class="btn btn-success mb-2">Export Excel</a>
<a href="{{ route('lisensi-engineering.export-category-count') }}" class="btn btn-outline-success mb-2" target="_blank">Export Count Category</a>
<a href="{{ route('lisensi-engineering.export-pdf') }}" class="btn btn-outline-secondary mb-2" target="_blank">Export PDF</a>
<a href="{{ route('lisensi-engineering.template') }}" class="btn btn-outline-secondary mb-2">Download Template</a>
<form action="{{ route('lisensi-engineering.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="bulkKategoriInputEng" placeholder="Kategori (bulk)">
    <button class="btn btn-secondary mb-2" id="btnBulkKategoriEng">Bulk Edit Kategori</button>
    <small class="text-muted d-block" style="margin-top:-6px;">Pilih baris via checkbox lalu klik Bulk Edit.</small>
</div>

<div class="table-responsive">
<table class="table table-bordered table-striped" id="tableData" width="100%">
    <thead>
        <tr>
            <th style="width: 36px;"><input type="checkbox" id="checkAllEng" title="Pilih semua"></th>
            <th>ID</th>
            <th>Produk</th>
            <th>Kategori</th>
            <th>Deskripsi</th>
            <th>Qty</th>
            <th>Jenis</th>
            <th>Tahun</th>
            <th>No PO</th>
            <th>Start Subscription</th>
            <th>End Subscription</th>
            <th>Status Used</th>
            <th>Email User</th>
            <th>Serial Number</th>
            <th>Sertifikat</th>
            <th>Aksi</th>
        </tr>
    </thead>
</table>
</div>

<div class="modal fade" id="modalForm">
<div class="modal-dialog modal-lg">
<form id="formData">
@csrf
<input type="hidden" name="id_lisensi_eng" id="id">

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

<div class="modal-body">
<div class="row">
<div class="col-md-6">
<input class="form-control mb-2" name="nama_produk" id="nama_produk" list="namaProdukList" placeholder="Produk" required>
<datalist id="namaProdukList"></datalist>
<input class="form-control mb-2" name="kategori" placeholder="Kategori">
<textarea class="form-control mb-2" name="deskripsi" id="deskripsi" placeholder="Deskripsi"></textarea>
<select class="form-control mb-2" id="deskripsiSuggest">
    <option value="">Pilih deskripsi dari data</option>
</select>
<input class="form-control mb-2" name="qty" placeholder="Qty">
<select class="form-control mb-2" name="jenis_produk" id="jenis_produk_select">
    <option value="">Pilih jenis</option>
    <option value="perpetual">perpetual</option>
    <option value="subscription">subscription</option>
    <option value="yearly">yearly</option>
    <option value="monthly">monthly</option>
    <option value="1 month">1 month</option>
    <option value="2 month">2 month</option>
    <option value="3 month">3 month</option>
</select>
<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">
</div>
<div class="col-md-6">
<input class="form-control mb-2" name="start_subscription" type="date" placeholder="Start Subscription">
<input class="form-control mb-2" name="end_subscription" type="date" placeholder="End Subscription">
<input class="form-control mb-2" name="status_used" placeholder="Status Used">
<input class="form-control mb-2" name="email_user" type="email" placeholder="Email User">
<input class="form-control mb-2" name="serial_number" placeholder="Serial Number">
<input class="form-control mb-2" name="certificate_file" id="certificate_file" type="file" accept="application/pdf">
<div id="certificatePreview" class="mt-2" style="display:none;">
    <iframe id="certificateIframe" src="" style="width:100%; height:300px; border:1px solid #dee2e6;"></iframe>
</div>
</div>
</div>
</div>

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

<div class="modal fade" id="modalApplyEng">
<div class="modal-dialog">
<form id="formApplyEng">
@csrf
<input type="hidden" name="type" value="eng">
<input type="hidden" name="id_lisensi_eng" id="apply_eng_lisensi_id">

<div class="modal-content">
<div class="modal-header"><h5>Apply Lisensi Engineering ke User</h5></div>
<div class="modal-body">
    <div class="mb-2">
        <small class="text-muted">Lisensi</small>
        <div id="apply_eng_lisensi_label" class="font-weight-bold"></div>
    </div>
    <select class="form-control mb-2" name="id_user" id="apply_eng_user_select" required></select>
    <input class="form-control mb-2" type="number" min="1" name="qty_digunakan" id="apply_eng_qty" value="1" required>
    <input class="form-control" type="date" name="tanggal_mulai" id="apply_eng_tanggal_mulai">
</div>
<div class="modal-footer">
<button class="btn btn-success">Apply</button>
</div>
</div>
</form>
</div>
</div>
@endsection

@push('scripts')

<script>
$(function () {

let table = $('#tableData').DataTable({
    scrollX: true,
    scrollY: '60vh',
    scrollCollapse: true,
    responsive: true,
    ajax: {
        url: "{{ route('lisensi-engineering.data') }}",
        dataSrc: 'data'
    },
    columns: [
        {
            data: null,
            orderable: false,
            searchable: false,
            className: 'no-inline-edit',
            render: function (data, type, row) {
                return `<input type="checkbox" class="row-check-eng" value="${row.id_lisensi_eng}">`;
            }
        },
        { data: 'id_lisensi_eng', className: 'no-inline-edit' },
        { data: 'nama_produk', render: function (data, type, row) {
            let badge = row.suggest_pemusnahan
                ? ' <span class="badge badge-danger">Suggest Pemusnahan</span>'
                : '';
            let action = row.suggest_pemusnahan
                ? ` <button class="btn btn-outline-danger btn-xs ml-1 pemusnahan" data-id="${row.id_lisensi_eng}" data-label="${(row.nama_produk || '')}">Buat Form Pemusnahan</button>`
                : '';
            return `${data || ''}${badge}${action}`;
        }},
        { data: 'kategori' },
        { data: 'deskripsi' },
        { data: 'qty', render: function (data, type, row) {
            let used = row.used_count || 0;
            let badge = used === 0 ? 'badge-warning' : 'badge-info';
            return `${data || 0} <span class="badge ${badge} ml-1">used ${used}</span>`;
        }},
        { data: 'jenis_produk' },
        { 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: 'start_subscription' },
        { data: 'end_subscription' },
        { data: 'status_used' },
        { data: 'email_user' },
        { data: 'serial_number', 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: 'certificate_url', className: 'no-inline-edit', render: function (data) {
            if (!data) return '';
            return `<a href="${data}" target="_blank">Lihat</a>`;
        }},
        {
            data: 'id_lisensi_eng',
            className: 'no-inline-edit',
            render: function (data, type, row) {
                let used = parseInt(row.used_count || 0, 10);
                let qty = parseInt(row.qty || 0, 10);
                let remaining = Math.max(0, qty - used);
                let applyBtn = remaining > 0
                    ? `<button class="btn btn-success btn-sm apply-eng"
                            data-id="${data}"
                            data-label="${(row.nama_produk || '').replace(/"/g, '&quot;')}"
                            data-remaining="${remaining}">
                            Apply
                       </button>`
                    : '';
                return `
                    <button class="btn btn-secondary btn-sm copy" data-id="${data}">Copy</button>
                    <button class="btn btn-warning btn-sm edit" data-id="${data}">Edit</button>
                    ${applyBtn}
                    <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>
                `;
            }
        }
    ]
});

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

$(document).on('change', '.row-check-eng', function () {
    if (!$(this).is(':checked')) {
        $('#checkAllEng').prop('checked', false);
    }
});

$('#btnBulkKategoriEng').click(function () {
    let ids = $('.row-check-eng:checked').map(function () { return $(this).val(); }).get();
    if (!ids.length) {
        alert('Pilih minimal 1 baris.');
        return;
    }
    let kategori = ($('#bulkKategoriInputEng').val() || '').trim();

    $.post("{{ route('lisensi-engineering.bulk-kategori') }}", {
        _token: "{{ csrf_token() }}",
        ids: ids,
        kategori: kategori
    }).done(function () {
        $('#bulkKategoriInputEng').val('');
        $('#checkAllEng').prop('checked', false);
        table.ajax.reload(null, false);
    }).fail(function (xhr) {
        let message = 'Gagal bulk update kategori.';
        if (xhr.responseJSON && xhr.responseJSON.message) {
            message = xhr.responseJSON.message;
        }
        alert(message);
    });
});

function loadSuggestionsEng() {
    $('#namaProdukList').empty();
    $('#deskripsiSuggest').empty().append('<option value="">Pilih deskripsi dari data</option>');
    $.get("{{ route('lisensi-engineering.nama-produk') }}", function (res) {
        if (res.nama_produk && res.nama_produk.length) {
            let options = res.nama_produk.map(function (name) {
                return `<option value="${name}"></option>`;
            });
            $('#namaProdukList').html(options.join(''));
        }
    });

    $.get("{{ route('lisensi-engineering.deskripsi') }}", function (res) {
        if (res.deskripsi && res.deskripsi.length) {
            let options = res.deskripsi.map(function (desc) {
                return `<option value="${desc}">${desc}</option>`;
            });
            $('#deskripsiSuggest').append(options.join(''));
        }
    });
}

function fillYearOptionsEng(selectedYear) {
    let currentYear = new Date().getFullYear();
    let startYear = currentYear - 30;
    let yearOptions = '';
    for (let year = currentYear; year >= startYear; year--) {
        let selected = (String(year) === String(selectedYear)) ? 'selected' : '';
        yearOptions += `<option value="${year}" ${selected}>${year}</option>`;
    }
    $('#tahun_perolehan_select').html(yearOptions);
}

$('#btnTambah').click(function () {
    $('#formData')[0].reset();
    $('#id').val('');
    $('#certificateIframe').attr('src', '');
    $('#certificatePreview').hide();
    loadSuggestionsEng();
    fillYearOptionsEng();
    $('#modalForm').modal('show');
});

$('#certificate_file').on('change', function () {
    const file = this.files && this.files[0];
    if (!file) {
        $('#certificateIframe').attr('src', '');
        $('#certificatePreview').hide();
        return;
    }
    if (file.type !== 'application/pdf') {
        alert('File harus PDF.');
        $(this).val('');
        $('#certificateIframe').attr('src', '');
        $('#certificatePreview').hide();
        return;
    }
    const url = URL.createObjectURL(file);
    $('#certificateIframe').attr('src', url);
    $('#certificatePreview').show();
});

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

    if (this.checkValidity && !this.checkValidity()) {
        this.reportValidity();
        return;
    }

    $.ajax({
        url: "{{ route('lisensi-engineering.store') }}",
        type: "POST",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function () {
            $('#modalForm').modal('hide');
            table.ajax.reload();
        }
    });
});

let filterSuggest = false;
let filterUsed = 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();
});

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

$('#filterBelumUsed').click(function () {
    filterBelumUsed = !filterBelumUsed;
    if (filterBelumUsed) {
        filterUsed = false;
        $('#filterUsed').removeClass('btn-info').addClass('btn-outline-info').text('Filter Used');
    }
    $(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 !== 'tableData') return true;
    let rowData = table.row(dataIndex).data();
    if (!rowData) return true;

    if (filterSuggest && !rowData.suggest_pemusnahan) return false;
    let usedCount = parseInt(rowData.used_count || 0, 10);
    if (filterUsed && usedCount <= 0) return false;
    if (filterBelumUsed && usedCount > 0) return false;
    if (filterUncategory) {
        let kategori = (rowData.kategori || '').toString().trim();
        if (kategori !== '') return false;
    }

    return true;
});

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

    $.get("{{ url('master/lisensi-engineering/edit') }}/" + id, function (res) {
        $('#id').val(res.id_lisensi_eng);
        $('[name=nama_produk]').val(res.nama_produk);
        $('[name=kategori]').val(res.kategori);
        $('[name=deskripsi]').val(res.deskripsi);
        $('[name=qty]').val(res.qty);
        $('#jenis_produk_select').val(res.jenis_produk);
        fillYearOptionsEng(res.tahun_perolehan);
        $('[name=no_transaksi_po]').val(res.no_transaksi_po);
        $('[name=start_subscription]').val(res.start_subscription);
        $('[name=end_subscription]').val(res.end_subscription);
        $('[name=status_used]').val(res.status_used);
        $('[name=email_user]').val(res.email_user);
        $('[name=serial_number]').val(res.serial_number);
        $('#certificate_file').val('');
        if (res.certificate_url) {
            $('#certificateIframe').attr('src', res.certificate_url);
            $('#certificatePreview').show();
        } else {
            $('#certificateIframe').attr('src', '');
            $('#certificatePreview').hide();
        }
        $('#modalForm').modal('show');
    });
});

$(document).on('click', '.copy', function () {
    let id = $(this).data('id');
    $.get("{{ url('master/lisensi-engineering/edit') }}/" + id, function (res) {
        $('#formData')[0].reset();
        $('#id').val('');
        $('[name=nama_produk]').val(res.nama_produk);
        $('[name=kategori]').val(res.kategori);
        $('[name=deskripsi]').val(res.deskripsi);
        $('[name=qty]').val(res.qty);
        $('#jenis_produk_select').val(res.jenis_produk);
        fillYearOptionsEng(res.tahun_perolehan);
        $('[name=no_transaksi_po]').val(res.no_transaksi_po);
        $('[name=start_subscription]').val(res.start_subscription);
        $('[name=end_subscription]').val(res.end_subscription);
        $('[name=status_used]').val(res.status_used);
        $('[name=email_user]').val(res.email_user);
        $('[name=serial_number]').val(res.serial_number);
        $('#certificate_file').val('');
        if (res.certificate_url) {
            $('#certificateIframe').attr('src', res.certificate_url);
            $('#certificatePreview').show();
        } else {
            $('#certificateIframe').attr('src', '');
            $('#certificatePreview').hide();
        }
        loadSuggestionsEng();
        $('#modalForm').modal('show');
    });
});

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

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

$(document).on('click', '.trace', function () {
    let id = $(this).data('id');
    $('#traceBody').html('<tr><td colspan="3" class="text-muted text-center">Memuat...</td></tr>');
    $('#modalTrace').modal('show');
    $.get("{{ route('lisensi-engineering.trace', ['id' => '__id__']) }}".replace('__id__', id), function (res) {
        let rows = (res.data || []).map(function (r, i) {
            return `<tr>
                <td>${i + 1}</td>
                <td>${r.label || ''}</td>
                <td>${r.jabatan || ''}</td>
            </tr>`;
        }).join('');
        if (!rows) {
            rows = '<tr><td colspan="3" class="text-muted text-center">Tidak ada pengguna.</td></tr>';
        }
        $('#traceBody').html(rows);
    });
});

function initApplyEngUserSelect() {
    if ($('#apply_eng_user_select').hasClass('select2-hidden-accessible')) {
        $('#apply_eng_user_select').select2('destroy');
    }
    $('#apply_eng_user_select').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Pilih User',
        allowClear: true,
        dropdownParent: $('#modalApplyEng'),
        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-eng', function () {
    let id = $(this).data('id');
    let label = $(this).data('label') || '';
    let remaining = parseInt($(this).data('remaining') || 1, 10);

    $('#apply_eng_lisensi_id').val(id);
    $('#apply_eng_lisensi_label').text(label + ` (sisa ${remaining})`);
    $('#apply_eng_qty').attr('max', remaining).val(1);
    $('#apply_eng_tanggal_mulai').val(new Date().toISOString().slice(0, 10));
    initApplyEngUserSelect();
    $('#apply_eng_user_select').val(null).trigger('change');
    $('#modalApplyEng').modal('show');
});

$('#formApplyEng').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        url: "{{ route('penggunaan.assign') }}",
        type: "POST",
        data: $(this).serialize(),
        success: function () {
            $('#modalApplyEng').modal('hide');
            table.ajax.reload(null, false);
            alert('Lisensi engineering berhasil di-apply ke user.');
        },
        error: function (xhr) {
            let message = 'Gagal apply lisensi engineering ke user.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                message = xhr.responseJSON.message;
            }
            alert(message);
        }
    });
});

$('#deskripsiSuggest').on('change', function () {
    let val = $(this).val();
    if (val) {
        $('#deskripsi').val(val);
    }
});

/* ===============================
   DOUBLE CLICK INLINE EDIT
=============================== */
$(document).on('dblclick', '#tableData tbody td', function (e) {
    e.stopPropagation();

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

    if (!rowData) return;
    if ($(this).hasClass('no-inline-edit')) return;
    if (!dataSrc || dataSrc === 'id_lisensi_eng' || dataSrc === 'certificate_url') return;

    let oldValue = cell.data();

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

    let editor;

    if (dataSrc === 'deskripsi') {
        $(this).html(`
            <textarea class="form-control form-control-sm edit-cell" rows="2">${(oldValue === null || oldValue === undefined) ? '' : oldValue}</textarea>
        `);
    } else if (dataSrc === 'tahun_perolehan') {
        let currentYear = new Date().getFullYear();
        let startYear = currentYear - 30;
        let options = '';

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

        $(this).html(`
            <select class="form-control form-control-sm edit-cell">
                ${options}
            </select>
        `);
    } else if (dataSrc === 'jenis_produk') {
        let options = [
            { value: 'perpetual', label: 'perpetual' },
            { value: 'subscription', label: 'subscription' },
            { value: 'yearly', label: 'yearly' },
            { value: 'monthly', label: 'monthly' },
            { value: '1 month', label: '1 month' },
            { value: '2 month', label: '2 month' },
            { value: '3 month', label: '3 month' }
        ];

        let htmlOptions = options.map(function (opt) {
            let selected = (String(opt.value) === String(oldValue)) ? 'selected' : '';
            return `<option value="${opt.value}" ${selected}>${opt.label}</option>`;
        }).join('');

        $(this).html(`
            <select class="form-control form-control-sm edit-cell">
                <option value="">Pilih jenis</option>
                ${htmlOptions}
            </select>
        `);
    } else if (dataSrc === 'start_subscription' || dataSrc === 'end_subscription') {
        let dateValue = (oldValue === null || oldValue === undefined) ? '' : String(oldValue).substring(0, 10);
        $(this).html(`
            <input type="date" class="form-control form-control-sm edit-cell"
                   value="${dateValue}">
        `);
    } else if (dataSrc === 'email_user') {
        $(this).html(`
            <input type="email" class="form-control form-control-sm edit-cell"
                   value="${(oldValue === null || oldValue === undefined) ? '' : oldValue}">
        `);
    } else if (dataSrc === 'qty') {
        $(this).html(`
            <input type="number" min="0" class="form-control form-control-sm edit-cell"
                   value="${(oldValue === null || oldValue === undefined) ? '' : oldValue}">
        `);
    } else {
        $(this).html(`
            <input type="text" class="form-control form-control-sm edit-cell"
                   value="${(oldValue === null || oldValue === undefined) ? '' : oldValue}">
        `);
    }

    editor = $(this).find('.edit-cell');
    editor.focus().select();
    editor.on('mousedown click', function(ev){ ev.stopPropagation(); });

    function saveValue() {
        let newValue = editor.val();

        cell.data(newValue).draw(false);

        let field = dataSrc;

        if (field === 'email_user') {
            let value = (newValue || '').trim();
            if (value.length) {
                let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(value)) {
                    alert('Format email tidak valid.');
                    cell.data(oldValue).draw(false);
                    return;
                }
            }
        }

        $.post("{{ route('lisensi-engineering.store') }}", {
            _token: "{{ csrf_token() }}",
            id_lisensi_eng: rowData.id_lisensi_eng,
            [field]: newValue
        }).fail(function (xhr) {
            let message = 'Gagal menyimpan perubahan.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                message = xhr.responseJSON.message;
            }
            alert(message);
            cell.data(oldValue).draw(false);
        });
    }

    editor.on('blur', saveValue);

    editor.on('keydown', function(e){
        if(e.key === 'Enter' && this.tagName !== 'TEXTAREA'){
            e.preventDefault();
            saveValue();
        }
    });

});

function copyTextToClipboardEng(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;
    copyTextToClipboardEng(po).then(function () {
        $('#poNoticeEng').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;
    copyTextToClipboardEng(po).then(function () {
        $('#poNoticeEng').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
    });
});

});
</script>
@endpush

<div class="modal fade" id="modalTrace">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Pengguna Lisensi</h5>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Orang</th>
                                <th>Jabatan</th>
                            </tr>
                        </thead>
                        <tbody id="traceBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>