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

@section('content')
<style>
    .age-safe {
        background: #d4edda;
    }
    .age-warning {
        background: #fff3cd;
    }
    .age-danger {
        background: #f8d7da;
    }
    .table-scroll-x {
        overflow: auto;
        position: relative;
    }
    .dataTables_wrapper .dataTables_scrollHead {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #fff;
    }
    #tableData {
        min-width: 1400px;
    }
    #tableData thead th {
        background: #fff;
    }
    .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="updateNotice" class="alert alert-success" style="display:none; position: fixed; top: 70px; right: 20px; z-index: 1051;">
    Update berhasil
</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-microsoft.export') }}" class="btn btn-success mb-2">Export Excel</a>
<a href="{{ route('lisensi-microsoft.export-category-count') }}" class="btn btn-outline-success mb-2" target="_blank">Export Count Category</a>
<a href="{{ route('lisensi-microsoft.export-pdf') }}" class="btn btn-outline-secondary mb-2" target="_blank">Export PDF</a>
<a href="{{ route('lisensi-microsoft.template') }}" class="btn btn-outline-secondary mb-2">Download Template</a>
<form action="{{ route('lisensi-microsoft.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="bulkKategoriInputMs" placeholder="Kategori (bulk)">
    <button class="btn btn-secondary mb-2" id="btnBulkKategoriMs">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-scroll-x">
<table class="table table-bordered" id="tableData" width="100%">
<thead>
<tr>
<th class="d-none">ID</th>
<th style="width: 36px;"><input type="checkbox" id="checkAllMs" title="Pilih semua"></th>
<th class="sticky-col sticky-col-1">Aksi</th>
<th>Deskripsi Produk</th>
<th>ID Customer</th>
<th>License ID</th>
<th>Part Number</th>
<th>Produk</th>
<th>Kategori</th>
<th>Qty</th>
<th>Jenis</th>
<th>Tahun</th>
<th>No PO</th>
<th>Metode Penggunaan</th>
<th>Serial Number</th>
<th>Email</th>
<th>Start Subscription</th>
<th>End Subscription</th>
<th>Status</th>
<th>Remark</th>
<th>Sertifikat</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_microsoft" 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">
<textarea class="form-control mb-2" name="deskripsi_produk" placeholder="Deskripsi Produk"></textarea>
<input class="form-control mb-2" name="id_customer" id="id_customer_input" list="idCustomerList" placeholder="ID Customer">
<datalist id="idCustomerList"></datalist>
<input class="form-control mb-2" name="license_id" placeholder="License ID">
<input class="form-control mb-2" name="part_number" placeholder="Part Number">
<input class="form-control mb-2" name="nama_produk" placeholder="Produk">
<input class="form-control mb-2" name="kategori" placeholder="Kategori">
<input class="form-control mb-2" name="qty" placeholder="Qty">
<input class="form-control mb-2" name="max_devices_per_seat" placeholder="Max Devices/Seat (default 1)" type="number" min="1">
</div>
<div class="col-md-6">
<select class="form-control mb-2" name="jenis" id="jenis_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">
<input class="form-control mb-2" name="metode_penggunaan" placeholder="Metode Penggunaan">
<input class="form-control mb-2" name="serial_number" placeholder="Serial Number">
<input class="form-control mb-2" name="user_email" type="email" placeholder="Email">
<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">
<textarea class="form-control mb-2" name="remark" placeholder="Remark"></textarea>
<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="modalApplyMs">
<div class="modal-dialog">
<form id="formApplyMs">
@csrf
<input type="hidden" name="type" value="microsoft">
<input type="hidden" name="id_lisensi_microsoft" id="apply_ms_lisensi_id">

<div class="modal-content">
<div class="modal-header"><h5>Apply Lisensi Microsoft ke User</h5></div>
<div class="modal-body">
    <div class="mb-2">
        <small class="text-muted">Lisensi</small>
        <div id="apply_ms_lisensi_label" class="font-weight-bold"></div>
    </div>
    <select class="form-control mb-2" name="id_user" id="apply_ms_user_select" required></select>
    <select class="form-control mb-2" name="id_ms_seat" id="apply_ms_seat_select" required>
        <option value="">Pilih Seat Microsoft</option>
    </select>
    <input class="form-control mb-2" type="text" name="ms_device_name" id="apply_ms_device_name" placeholder="Device ID / Device Name" required>
    <input class="form-control mb-2" type="text" name="ms_device_serial" id="apply_ms_device_serial" placeholder="Device Serial" required>
    <input class="form-control" type="date" name="tanggal_mulai" id="apply_ms_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 customerOptions = null;
let customerLabelMap = {};
function loadCustomerOptions(cb) {
    if (customerOptions !== null) {
        if (cb) cb(customerOptions);
        return;
    }
    $.get("{{ route('lisensi-microsoft.customer-suggest') }}", function (res) {
        customerOptions = (res.customers || []).map(function (c) {
            return { value: c.id_customer || '', label: c.label || c.id_customer || '' };
        });
        customerLabelMap = {};
        customerOptions.forEach(function (o) {
            customerLabelMap[String(o.value)] = o.label;
        });
        if (cb) cb(customerOptions);
    });
}

function resolveCustomerLabel(value) {
    if (!value) return '';
    let key = String(value);
    return customerLabelMap[key] || value;
}

let table = $('#tableData').DataTable({
    scrollX: true,
    scrollY: '60vh',
    scrollCollapse: true,
    autoWidth: false,
    responsive: false,
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'colvis',
            text: 'Show/Hide Kolom'
        }
    ],
    columnDefs: [
        { targets: 0, visible: false },
        { targets: 1, width: '36px', orderable: false, searchable: false },
        { targets: 2, width: '140px', orderable: false, searchable: false },
        { targets: 4, width: '180px' },
        { targets: 19, visible: true, responsivePriority: 1, defaultContent: '' },
        { targets: 20, visible: true, responsivePriority: 1, defaultContent: '' }
    ],
    ajax: {
        url: "{{ route('lisensi-microsoft.data') }}",
        dataSrc: 'data'
    },
    initComplete: function () {
        table.columns.adjust();
    },
    rowCallback: function (row) {
        $(row).find('td.dtr-control').hide();
    },
    columns: [
        { data: 'id_lisensi_microsoft' },
        {
            data: null,
            orderable: false,
            searchable: false,
            className: 'no-inline-edit',
            render: function (data, type, row) {
                return `<input type="checkbox" class="row-check-ms" value="${row.id_lisensi_microsoft}">`;
            }
        },
        {
            data: 'id_lisensi_microsoft',
            className: 'sticky-col sticky-col-1 no-inline-edit',
            render: function (data, type, row) {
                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>
                    <button class="btn btn-success btn-sm apply-ms"
                            data-id="${data}"
                            data-label="${(row.deskripsi_produk || row.nama_produk || '').replace(/"/g, '&quot;')}">
                            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>
                `;
            }
        },
        { data: 'deskripsi_produk' },
        { data: 'id_customer', render: function (data) {
            return resolveCustomerLabel(data);
        }},
        { data: 'license_id' },
        { data: 'part_number' },
        { 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_microsoft}" data-label="${(row.nama_produk || '')}">Buat Form Pemusnahan</button>`
                : '';
            return `${data || ''}${badge}${action}`;
        }},
        { data: 'kategori' },
        { 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' },
        { 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: 'metode_penggunaan' },
        { data: 'serial_number' },
        { data: 'user_email' },
        { data: 'start_subscription' },
        { data: 'end_subscription' },
        { data: 'status_used' },
        { data: 'remark' },
        { data: 'certificate_url', className: 'no-inline-edit', render: function (data) {
            if (!data) return '';
            return `
                <button class="btn btn-sm btn-outline-primary preview-cert" data-url="${data}">
                    Preview
                </button>
            `;
        }},
    ]
});

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

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

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

    $.post("{{ route('lisensi-microsoft.bulk-kategori') }}", {
        _token: "{{ csrf_token() }}",
        ids: ids,
        kategori: kategori
    }).done(function () {
        $('#bulkKategoriInputMs').val('');
        $('#checkAllMs').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);
    });
});

loadCustomerOptions(function () {
    table.rows().invalidate().draw(false);
});

table.on('draw', function () {
    table.columns.adjust();
});

$(window).on('resize', function () {
    table.columns.adjust();
});

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;
});

function fillYearOptionsMs(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('');
    $('#certificate_file').val('');
    $('#certificateIframe').attr('src', '');
    $('#certificatePreview').hide();
    loadCustomerList();
    fillYearOptionsMs();
    $('#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();

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

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

    $.get("{{ url('master/lisensi-microsoft/edit') }}/" + id, function (res) {
        loadCustomerList();
        $('#id').val(res.id_lisensi_microsoft);
        $('[name=deskripsi_produk]').val(res.deskripsi_produk);
        $('[name=id_customer]').val(res.id_customer);
        $('[name=license_id]').val(res.license_id);
        $('[name=part_number]').val(res.part_number);
        $('[name=nama_produk]').val(res.nama_produk);
        $('[name=kategori]').val(res.kategori);
        $('[name=qty]').val(res.qty);
        $('[name=max_devices_per_seat]').val(res.max_devices_per_seat || 1);
        $('#jenis_select').val(res.jenis);
        fillYearOptionsMs(res.tahun_perolehan);
        $('[name=no_transaksi_po]').val(res.no_transaksi_po);
        $('[name=metode_penggunaan]').val(res.metode_penggunaan);
        $('[name=serial_number]').val(res.serial_number);
        $('[name=user_email]').val(res.user_email);
        $('[name=start_subscription]').val(res.start_subscription);
        $('[name=end_subscription]').val(res.end_subscription);
        $('[name=status_used]').val(res.status_used);
        $('[name=remark]').val(res.remark);
        $('#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-microsoft/edit') }}/" + id, function (res) {
        loadCustomerList();
        $('#formData')[0].reset();
        $('#id').val('');
        $('[name=deskripsi_produk]').val(res.deskripsi_produk);
        $('[name=id_customer]').val(res.id_customer);
        $('[name=license_id]').val(res.license_id);
        $('[name=part_number]').val(res.part_number);
        $('[name=nama_produk]').val(res.nama_produk);
        $('[name=kategori]').val(res.kategori);
        $('[name=qty]').val(res.qty);
        $('[name=max_devices_per_seat]').val(res.max_devices_per_seat || 1);
        $('#jenis_select').val(res.jenis);
        fillYearOptionsMs(res.tahun_perolehan);
        $('[name=no_transaksi_po]').val(res.no_transaksi_po);
        $('[name=metode_penggunaan]').val(res.metode_penggunaan);
        $('[name=serial_number]').val(res.serial_number);
        $('[name=user_email]').val(res.user_email);
        $('[name=start_subscription]').val(res.start_subscription);
        $('[name=end_subscription]').val(res.end_subscription);
        $('[name=status_used]').val(res.status_used);
        $('[name=remark]').val(res.remark);
        $('#certificate_file').val('');
        if (res.certificate_url) {
            $('#certificateIframe').attr('src', res.certificate_url);
            $('#certificatePreview').show();
        } else {
            $('#certificateIframe').attr('src', '');
            $('#certificatePreview').hide();
        }
        $('#modalForm').modal('show');
    });
});

function loadCustomerList() {
    $('#idCustomerList').empty();
    $.get("{{ route('lisensi-microsoft.customer-suggest') }}", function (res) {
        let options = (res.customers || []).map(function (c) {
            let label = c.label || c.id_customer || '';
            let value = c.id_customer || '';
            return `<option value="${value}">${label}</option>`;
        });
        $('#idCustomerList').html(options.join(''));
    });
}

$(document).on('click', '.delete', function () {
    if (confirm('Hapus data?')) {
        $.ajax({
            url: "{{ url('master/lisensi-microsoft/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');
    $('#traceMsBody').html('<tr><td colspan="3" class="text-muted text-center">Memuat...</td></tr>');
    $('#modalTraceMs').modal('show');
    $.get("{{ route('lisensi-microsoft.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>';
        }
        $('#traceMsBody').html(rows);
    });
});

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

$(document).on('click', '.preview-cert', function () {
    let url = $(this).data('url') || '';
    if (!url) return;
    $('#previewCertIframe').attr('src', url);
    $('#modalPreviewCert').modal('show');
});

$('#modalPreviewCert').on('hidden.bs.modal', function () {
    $('#previewCertIframe').attr('src', '');
});

function initApplyMsUserSelect() {
    if ($('#apply_ms_user_select').hasClass('select2-hidden-accessible')) {
        $('#apply_ms_user_select').select2('destroy');
    }
    $('#apply_ms_user_select').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Pilih User',
        allowClear: true,
        dropdownParent: $('#modalApplyMs'),
        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
        }
    });
}

function loadApplyMsSeats(lisensiId) {
    $('#apply_ms_seat_select').html('<option value="">Memuat seat...</option>');
    $.get("{{ route('penggunaan.microsoft-seats', ['id' => '__id__']) }}".replace('__id__', lisensiId), function (res) {
        let opts = ['<option value="">Pilih Seat Microsoft</option>'];
        (res.seats || []).forEach(function (s) {
            opts.push(`<option value="${s.id}">${s.label}</option>`);
        });
        $('#apply_ms_seat_select').html(opts.join(''));
    });
}

$(document).on('click', '.apply-ms', function () {
    let id = $(this).data('id');
    let label = $(this).data('label') || '';
    $('#apply_ms_lisensi_id').val(id);
    $('#apply_ms_lisensi_label').text(label);
    $('#apply_ms_device_name').val('');
    $('#apply_ms_device_serial').val('');
    $('#apply_ms_tanggal_mulai').val(new Date().toISOString().slice(0, 10));
    initApplyMsUserSelect();
    $('#apply_ms_user_select').val(null).trigger('change');
    loadApplyMsSeats(id);
    $('#modalApplyMs').modal('show');
});

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

/* ===============================
   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 thisCell = this;
    let dataSrc = table.column(colIndex).dataSrc();

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

    let oldValue = cell.data();

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

    let editor;

    function bindEditor(editEl) {
        editor = editEl;
        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 === 'user_email') {
                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-microsoft.store') }}", {
                _token: "{{ csrf_token() }}",
                id_lisensi_microsoft: rowData.id_lisensi_microsoft,
                [field]: newValue
            }).done(function () {
                $('#updateNotice').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
            }).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('change', saveValue);
        editor.on('keydown', function(e){
            if(e.key === 'Enter' && this.tagName !== 'TEXTAREA'){
                e.preventDefault();
                saveValue();
            }
        });
    }

    if (dataSrc === 'deskripsi_produk' || dataSrc === 'remark') {
        $(this).html(`
            <textarea class="form-control form-control-sm edit-cell" rows="2">${(oldValue === null || oldValue === undefined) ? '' : oldValue}</textarea>
        `);
        bindEditor($(this).find('.edit-cell'));
    } else if (dataSrc === 'id_customer') {
        loadCustomerOptions(function (opts) {
            let options = (opts || []).map(function (o) {
                return `<option value="${o.value}">${o.label}</option>`;
            }).join('');
            $('#idCustomerList').html(options);
            $(thisCell).html(`
                <input class="form-control form-control-sm edit-cell" list="idCustomerList"
                       value="${(oldValue === null || oldValue === undefined) ? '' : oldValue}">
            `);
            bindEditor($(thisCell).find('.edit-cell'));
        });
        return;
    } else if (dataSrc === 'jenis') {
        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>
        `);
        bindEditor($(this).find('.edit-cell'));
    } 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>
        `);
        bindEditor($(this).find('.edit-cell'));
    } 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}">
        `);
        bindEditor($(this).find('.edit-cell'));
    } else if (dataSrc === 'status_used') {
        let options = [
            { value: 'Active', label: 'Active' },
            { value: 'Not Active', label: 'Not Active' },
            { value: 'Expire', label: 'Expire' },
            { value: 'Other', label: 'Other' }
        ];
        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 status</option>
                ${htmlOptions}
            </select>
        `);
        bindEditor($(this).find('.edit-cell'));
    } else if (dataSrc === 'user_email') {
        $(this).html(`
            <input type="email" class="form-control form-control-sm edit-cell"
                   value="${(oldValue === null || oldValue === undefined) ? '' : oldValue}">
        `);
        bindEditor($(this).find('.edit-cell'));
    } else if (dataSrc === 'qty' || dataSrc === 'max_devices_per_seat') {
        $(this).html(`
            <input type="number" min="0" class="form-control form-control-sm edit-cell"
                   value="${(oldValue === null || oldValue === undefined) ? '' : oldValue}">
        `);
        bindEditor($(this).find('.edit-cell'));
    } else {
        $(this).html(`
            <input type="text" class="form-control form-control-sm edit-cell"
                   value="${(oldValue === null || oldValue === undefined) ? '' : oldValue}">
        `);
        bindEditor($(this).find('.edit-cell'));
    }

});

function copyTextToClipboard(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();
    const po = $(this).data('po') || '';
    if (!po) return;
    copyTextToClipboard(po).then(function () {
        $('#updateNotice').text('No PO disalin').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;
    copyTextToClipboard(po).then(function () {
        $('#updateNotice').text('No PO disalin').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
    });
});

});
</script>
@endpush

<div class="modal fade" id="modalTraceMs">
    <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="traceMsBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalPreviewCert">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Preview Sertifikat</h5>
            </div>
            <div class="modal-body">
                <iframe id="previewCertIframe" src="" style="width:100%; height:70vh; border:1px solid #dee2e6;"></iframe>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>