@extends('layouts.master')

@section('title', 'Barang')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    #tblBarang_wrapper .dataTables_filter input {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 10px;
    }
    #tblBarang_wrapper .dataTables_filter input:focus {
        border-color: #a15adf !important;
        box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important;
    }
    #tblBarang_wrapper .dataTables_length select {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 70px;
    }
    #tblBarang_wrapper .dataTables_filter label,
    #tblBarang_wrapper .dataTables_length label {
        font-size: .875rem;
        color: #6c757d;
    }
    #tblBarang_wrapper .dataTables_info {
        font-size: .8rem;
        color: #6c757d;
    }
    #tblBarang td.aksi-col { white-space: nowrap; }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Barang</p>
            <span class="fs-13 text-muted">Data Induk &rarr; Barang</span>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="card-title mb-0">Daftar Barang</div>
                    <div class="d-flex gap-2 flex-wrap">
                        @can('barang.view')
                        <a href="{{ route('data-induk.barang.export-excel') }}" class="btn btn-success btn-sm">
                            <i class="bx bx-download me-1"></i> Unduh Excel
                        </a>
                        @endcan
                        @can('barang.create')
                        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalImport">
                            <i class="bx bx-upload me-1"></i> Import
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" onclick="openTambah()">
                            <i class="bx bx-plus me-1"></i> Tambah Barang
                        </button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblBarang" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width:45px">No</th>
                                    <th class="text-center" style="width:120px">Aksi</th>
                                    <th style="width:80px">Kode</th>
                                    <th style="min-width:180px">Nama</th>
                                    <th style="width:160px">Jenis Barang</th>
                                    <th style="width:90px">Kode Ref</th>
                                    <th style="width:120px">Merek</th>
                                    <th style="width:160px">NIE</th>
                                    <th style="width:100px">Masa Aktif NIE</th>
                                    <th class="text-center" style="width:130px">Satuan</th>
                                    <th class="text-center" style="width:75px">Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Modal Tambah / Edit --}}
<div class="modal fade" id="modalForm" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalFormTitle">Tambah Barang</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="formId">

                <div class="row g-3">
                    <div class="col-md-8">
                        <label class="form-label fw-semibold">Nama <span class="text-danger">*</span></label>
                        <input type="text" id="formNama" class="form-control text-uppercase" placeholder="Nama barang" style="text-transform:uppercase">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="invalid-feedback d-block" id="errNama"></div>
                            <small id="counterNama" class="text-muted ms-auto" style="white-space:nowrap">0 karakter</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Kode Ref <small class="text-muted">(opsional)</small></label>
                        <input type="text" id="formKodeRef" class="form-control" maxlength="50" placeholder="Kode referensi eksternal">
                        <div class="invalid-feedback" id="errKodeRef"></div>
                    </div>
                    <div class="col-md-7">
                        <label class="form-label fw-semibold">Jenis Barang <span class="text-danger">*</span></label>
                        <select id="formJenisBarangId" class="form-select">
                            <option value="">-- Pilih Jenis Barang --</option>
                            @foreach($jenisOptions as $j)
                            <option value="{{ $j->id }}">{{ $j->grup }} — {{ $j->nama }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback" id="errJenisBarangId"></div>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label fw-semibold">Merek</label>
                        <select id="formMerekBarangId" class="form-select">
                            <option value="">-- Opsional --</option>
                            @foreach($merekOptions as $m)
                            <option value="{{ $m->id }}">{{ $m->nama }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback" id="errMerekBarangId"></div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Ukuran</label>
                        <input type="text" id="formUkuran" class="form-control" maxlength="50" placeholder="Contoh: 3.0x18mm">
                        <div class="invalid-feedback" id="errUkuran"></div>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label fw-semibold">Manufaktur</label>
                        <input type="text" id="formManufaktur" class="form-control" maxlength="150" placeholder="Nama pabrik/produsen barang (opsional)">
                        <div class="invalid-feedback" id="errManufaktur"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Satuan Beli <span class="text-danger">*</span></label>
                        <input type="text" id="formSatuanBeli" class="form-control text-uppercase" maxlength="20" placeholder="BOX" style="text-transform:uppercase">
                        <div class="invalid-feedback" id="errSatuanBeli"></div>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-semibold">Konversi <span class="text-danger">*</span></label>
                        <input type="number" id="formKonversi" class="form-control" min="1" step="1" placeholder="1">
                        <div class="invalid-feedback" id="errKonversi"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Satuan Jual <span class="text-danger">*</span></label>
                        <input type="text" id="formSatuanJual" class="form-control text-uppercase" maxlength="20" placeholder="PCS" style="text-transform:uppercase">
                        <div class="invalid-feedback" id="errSatuanJual"></div>
                    </div>
                    <div class="col-12">
                        <hr class="my-1">
                        <p class="fw-semibold mb-1" style="font-size:.8rem;color:#6c757d;text-transform:uppercase;letter-spacing:.05em">Nomor Ijin Edar (NIE) <span class="text-muted fw-normal text-lowercase" style="letter-spacing:0">— opsional, jika kosong mengikuti merek</span></p>
                        <div class="row g-3">
                            <div class="col-md-2">
                                <label class="form-label fw-semibold">Jenis NIE</label>
                                <select id="formJenisNie" class="form-select">
                                    <option value="">-- Pilih --</option>
                                    <option value="AKL">AKL</option>
                                    <option value="AKD">AKD</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">No. NIE</label>
                                <input type="text" id="formNoNie" class="form-control" maxlength="100" placeholder="Nomor izin edar">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Masa Aktif NIE</label>
                                <input type="text" id="formMasaAktifNie" class="form-control flatpickr-nie" placeholder="dd-mm-yyyy" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label fw-semibold">Catatan</label>
                        <textarea id="formCatatan" class="form-control" rows="2" placeholder="Opsional"></textarea>
                        <div class="invalid-feedback" id="errCatatan"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="simpan()">
                    <i class="bx bx-save me-1"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Lihat --}}
<div class="modal fade" id="modalLihat" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Detail Barang</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-sm table-borderless mb-0">
                    <tr><td class="text-muted" width="130">Kode</td><td id="vKode"></td></tr>
                    <tr><td class="text-muted">Kode Ref</td><td id="vKodeRef"></td></tr>
                    <tr><td class="text-muted">Nama</td><td id="vNama"></td></tr>
                    <tr><td class="text-muted">Jenis Barang</td><td id="vJenis"></td></tr>
                    <tr><td class="text-muted">Ukuran</td><td id="vUkuran"></td></tr>
                    <tr><td class="text-muted">Merek</td><td id="vMerek"></td></tr>
                    <tr><td class="text-muted">Manufaktur</td><td id="vManufaktur"></td></tr>
                    <tr><td class="text-muted">Satuan Beli</td><td id="vSatuanBeli"></td></tr>
                    <tr><td class="text-muted">Satuan Jual</td><td id="vSatuanJual"></td></tr>
                    <tr><td class="text-muted">Konversi</td><td id="vKonversi"></td></tr>
                    <tr><td class="text-muted">Status</td><td id="vStatus"></td></tr>
                    <tr><td class="text-muted">Catatan</td><td id="vCatatan"></td></tr>
                    <tr><td colspan="2"><hr class="my-1"><small class="text-muted fw-semibold text-uppercase" style="letter-spacing:.05em">Nomor Ijin Edar (NIE)</small></td></tr>
                    <tr><td class="text-muted">Jenis NIE</td><td id="vJenisNie"></td></tr>
                    <tr><td class="text-muted">No. NIE</td><td id="vNoNie"></td></tr>
                    <tr><td class="text-muted">Masa Aktif NIE</td><td id="vMasaAktifNie"></td></tr>
                </table>
                <hr class="my-2">
                <div class="row text-muted" style="font-size:0.8rem">
                    <div class="col-6">
                        <i class="bx bx-user-plus me-1"></i>Dibuat oleh: <span id="vAuditCreatedBy">—</span><br>
                        <span id="vAuditCreatedAt" class="ms-3"></span>
                    </div>
                    <div class="col-6">
                        <i class="bx bx-edit me-1"></i>Diubah oleh: <span id="vAuditUpdatedBy">—</span><br>
                        <span id="vAuditUpdatedAt" class="ms-3"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@include('data-induk._modal-import', [
    'label'         => 'Barang',
    'importRoute'   => 'data-induk.barang.import',
    'templateRoute' => 'data-induk.barang.template-excel',
])
@endsection

@push('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const URL_DATA  = '{{ route("data-induk.barang.data") }}';
const URL_STORE = '{{ route("data-induk.barang.store") }}';
const URL_BASE  = '{{ url("data-induk/barang") }}';
const CSRF      = '{{ csrf_token() }}';
@include('data-induk._import-js')
const CAN_EDIT   = {{ Auth::guard('internal')->user()->can('barang.edit')   ? 'true' : 'false' }};
const CAN_DELETE = {{ Auth::guard('internal')->user()->can('barang.delete') ? 'true' : 'false' }};

let dt;

$(function () {
    dt = $('#tblBarang').DataTable({
        ajax: { url: URL_DATA, dataSrc: 'data' },
        columns: [
            { data: null, orderable: false, searchable: false, className: 'text-center' },
            {
                data: null, orderable: false, searchable: false, className: 'text-center aksi-col',
                render: function (data, type, row) {
                    let btns = `<button class="btn btn-info btn-sm px-2 py-1 me-1" title="Lihat" onclick="openLihat(${row.id})"><i class="bx bx-show fs-14"></i></button>`;
                    if (CAN_EDIT) {
                        const toggleIcon  = row.is_active ? 'bx-toggle-right' : 'bx-toggle-left';
                        const toggleClass = row.is_active ? 'btn-success' : 'btn-danger';
                        const toggleTitle = row.is_active ? 'Nonaktifkan' : 'Aktifkan';
                        btns += `<button class="btn ${toggleClass} btn-sm px-2 py-1 me-1" title="${toggleTitle}" onclick="toggleStatus(${row.id})"><i class="bx ${toggleIcon} fs-14"></i></button>`;
                        btns += `<button class="btn btn-warning btn-sm px-2 py-1 me-1" title="Edit" onclick="openEdit(${row.id})"><i class="bx bx-pencil fs-14"></i></button>`;
                    }
                    if (CAN_DELETE) btns += `<button class="btn btn-danger btn-sm px-2 py-1" title="Hapus" onclick="hapus(${row.id})"><i class="bx bx-trash fs-14"></i></button>`;
                    return btns;
                }
            },
            { data: 'kode' },
            { data: 'nama' },
            { data: 'jenis_nama', defaultContent: '-' },
            { data: 'kode_ref', defaultContent: '-' },
            { data: 'merek_nama', defaultContent: '-' },
            {
                data: null, orderable: false, searchable: false,
                render: function (data, type, row) {
                    const nie = row.nie_jenis || row.nie_no
                        ? [row.nie_jenis, row.nie_no].filter(Boolean).join(' — ')
                        : '-';
                    return nie;
                }
            },
            {
                data: 'nie_masa_aktif', defaultContent: '-',
                render: val => val ? val.split('-').reverse().join('-') : '-'
            },
            {
                data: null, className: 'text-center', orderable: false, searchable: false,
                render: function (data, type, row) {
                    if (row.satuan_beli === row.satuan_jual) return row.satuan_jual || '-';
                    const k = parseFloat(row.konversi);
                    const kStr = Number.isInteger(k) ? k : k.toLocaleString('id-ID', {maximumFractionDigits: 4});
                    return `1 ${row.satuan_beli} = ${kStr} ${row.satuan_jual}`;
                }
            },
            {
                data: 'is_active', className: 'text-center',
                render: val => val
                    ? '<span class="badge bg-success-transparent text-success">Aktif</span>'
                    : '<span class="badge bg-danger-transparent text-danger">Nonaktif</span>'
            },
        ],
        drawCallback: function () {
            const api   = this.api();
            const start = api.page.info().start;
            api.rows({ page: 'current', order: 'applied' }).nodes().each(function (row, i) {
                $('td:first-child', row).html(start + i + 1);
            });
        },
        language: { url: '//cdn.datatables.net/plug-ins/1.12.1/i18n/id.json' },
        pageLength: 25,
        order: [[2, 'asc']],
    });
});

const URL_MEREK = '{{ url("data-induk/merek-barang") }}';
let fpNie;

$(function () {
    fpNie = flatpickr('#formMasaAktifNie', { dateFormat: 'd-m-Y', allowInput: true });

    $('#formNama').on('input', function () { updateNamaCounter($(this).val()); });

    $('#formMerekBarangId').on('change', function () {
        if ($(this).data('skip-nie')) { $(this).removeData('skip-nie'); return; }
        const merekId = $(this).val();
        if (!merekId) {
            setNieReadonly(false);
            return;
        }
        $.get(URL_MEREK + '/' + merekId, function (res) {
            const d = res.data;
            if (!$('#formJenisNie').val()) $('#formJenisNie').val(d.jenis_nie ?? '');
            if (!$('#formNoNie').val()) $('#formNoNie').val(d.no_nie ?? '');
            if (fpNie && !fpNie.selectedDates.length && d.masa_aktif_nie) {
                fpNie.setDate(d.masa_aktif_nie.split('-').reverse().join('-'));
            }
        });
    });
});

function setNieReadonly(on) {
    const $j = $('#formJenisNie');
    const $n = $('#formNoNie');
    const $m = $('#formMasaAktifNie');
    if (on) {
        $j.css('pointer-events','none').css('background','#e9ecef');
        $n.prop('readonly', true).css('background','#e9ecef');
        $m.prop('readonly', true).css('background','#e9ecef');
    } else {
        $j.css('pointer-events','').css('background','');
        $n.prop('readonly', false).css('background','');
        $m.prop('readonly', false).css('background','');
    }
}

function clearErrors() {
    ['Nama','KodeRef','JenisBarangId','Ukuran','MerekBarangId','Manufaktur','SatuanBeli','SatuanJual','Konversi','Catatan'].forEach(f => {
        $('#form'+f).removeClass('is-invalid');
        $('#err'+f).text('');
    });
}

function showErrors(errors) {
    if (errors.nama)            { $('#formNama').addClass('is-invalid');           $('#errNama').text(errors.nama[0]); }
    if (errors.kode_ref)        { $('#formKodeRef').addClass('is-invalid');        $('#errKodeRef').text(errors.kode_ref[0]); }
    if (errors.jenis_barang_id) { $('#formJenisBarangId').addClass('is-invalid'); $('#errJenisBarangId').text(errors.jenis_barang_id[0]); }
    if (errors.ukuran)          { $('#formUkuran').addClass('is-invalid');         $('#errUkuran').text(errors.ukuran[0]); }
    if (errors.merek_barang_id) { $('#formMerekBarangId').addClass('is-invalid'); $('#errMerekBarangId').text(errors.merek_barang_id[0]); }
    if (errors.manufaktur)      { $('#formManufaktur').addClass('is-invalid');    $('#errManufaktur').text(errors.manufaktur[0]); }
    if (errors.satuan_beli)     { $('#formSatuanBeli').addClass('is-invalid');    $('#errSatuanBeli').text(errors.satuan_beli[0]); }
    if (errors.satuan_jual)     { $('#formSatuanJual').addClass('is-invalid');    $('#errSatuanJual').text(errors.satuan_jual[0]); }
    if (errors.konversi)        { $('#formKonversi').addClass('is-invalid');      $('#errKonversi').text(errors.konversi[0]); }
    if (errors.catatan)         { $('#formCatatan').addClass('is-invalid');       $('#errCatatan').text(errors.catatan[0]); }
}

function updateNamaCounter(val) {
    const len = (val || '').length;
    $('#counterNama').text(len + ' karakter');
}

function resetBarangForm() {
    $('#formNama').val('');
    updateNamaCounter('');
    $('#formKodeRef').val('');
    $('#formJenisBarangId').val('');
    $('#formUkuran').val('');
    $('#formMerekBarangId').val('');
    $('#formManufaktur').val('');
    $('#formSatuanBeli').val('PCS');
    $('#formSatuanJual').val('PCS');
    $('#formKonversi').val(1);
    $('#formCatatan').val('');
    $('#formJenisNie').val('');
    $('#formNoNie').val('');
    if (fpNie) fpNie.clear();
}

function openTambah() {
    clearErrors();
    $('#formId').val('');
    $('#modalFormTitle').text('Tambah Barang');
    resetBarangForm();
    new bootstrap.Modal('#modalForm').show();
}

function openEdit(id) {
    clearErrors();
    $.get(URL_BASE + '/' + id, function (res) {
        const d = res.data;
        $('#formId').val(d.id);
        $('#modalFormTitle').text('Edit Barang');
        $('#formNama').val(d.nama);
        updateNamaCounter(d.nama);
        $('#formKodeRef').val(d.kode_ref ?? '');
        $('#formJenisBarangId').val(d.jenis_barang_id);
        $('#formUkuran').val(d.ukuran ?? '');
        $('#formJenisNie').val(d.jenis_nie ?? '');
        $('#formNoNie').val(d.no_nie ?? '');
        if (fpNie) fpNie.setDate(d.masa_aktif_nie ?? null);
        $('#formMerekBarangId').data('skip-nie', true).val(d.merek_barang_id ?? '').trigger('change');
        $('#formManufaktur').val(d.manufaktur ?? '');
        $('#formSatuanBeli').val(d.satuan_beli ?? 'PCS');
        $('#formSatuanJual').val(d.satuan_jual ?? 'PCS');
        $('#formKonversi').val(d.konversi ?? 1);
        $('#formCatatan').val(d.catatan ?? '');
        new bootstrap.Modal('#modalForm').show();
    });
}

function openLihat(id) {
    $.get(URL_BASE + '/' + id, function (res) {
        const d = res.data;
        $('#vKode').text(d.kode);
        $('#vKodeRef').text(d.kode_ref ?? '-');
        $('#vNama').text(d.nama);
        $('#vJenis').text(d.jenis_grup ? d.jenis_grup + ' — ' + d.jenis_nama : (d.jenis_nama ?? '-'));
        $('#vUkuran').text(d.ukuran ?? '-');
        $('#vMerek').text(d.merek_nama ?? '-');
        $('#vManufaktur').text(d.manufaktur ?? '-');
        $('#vSatuanBeli').text(d.satuan_beli ?? '-');
        $('#vSatuanJual').text(d.satuan_jual ?? '-');
        const k = parseFloat(d.konversi ?? 1);
        $('#vKonversi').text(`1 ${d.satuan_beli} = ${Number.isInteger(k) ? k : k} ${d.satuan_jual}`);
        $('#vStatus').html(d.is_active
            ? '<span class="badge bg-success-transparent text-success">Aktif</span>'
            : '<span class="badge bg-danger-transparent text-danger">Nonaktif</span>');
        $('#vCatatan').text(d.catatan ?? '-');
        $('#vJenisNie').text(d.nie_jenis ?? '-');
        $('#vNoNie').text(d.nie_no ?? '-');
        $('#vMasaAktifNie').text(d.nie_masa_aktif ?? '-');
        $('#vAuditCreatedBy').text(d.audit_created_by ?? '—');
        $('#vAuditCreatedAt').text(d.audit_created_at ?? '');
        $('#vAuditUpdatedBy').text(d.audit_updated_by ?? '—');
        $('#vAuditUpdatedAt').text(d.audit_updated_at ?? '');
        new bootstrap.Modal('#modalLihat').show();
    });
}

function simpan() {
    clearErrors();
    const id     = $('#formId').val();
    const isEdit = !!id;
    const url    = isEdit ? URL_BASE + '/' + id : URL_STORE;
    const method = isEdit ? 'PUT' : 'POST';

    $.ajax({
        url, method,
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: {
            nama:            $('#formNama').val().toUpperCase(),
            kode_ref:        $('#formKodeRef').val() || null,
            jenis_barang_id: $('#formJenisBarangId').val(),
            ukuran:          $('#formUkuran').val(),
            merek_barang_id: $('#formMerekBarangId').val() || null,
            manufaktur:      $('#formManufaktur').val(),
            satuan_beli:     $('#formSatuanBeli').val().toUpperCase(),
            satuan_jual:     $('#formSatuanJual').val().toUpperCase(),
            konversi:        $('#formKonversi').val(),
            jenis_nie:       $('#formJenisNie').val() || null,
            no_nie:          $('#formNoNie').val() || null,
            masa_aktif_nie:  fpNie && fpNie.selectedDates[0] ? fpNie.formatDate(fpNie.selectedDates[0], 'Y-m-d') : null,
            catatan:         $('#formCatatan').val(),
        },
        success: function (res) {
            if (res.success) {
                bootstrap.Modal.getInstance('#modalForm').hide();
                dt.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1800, showConfirmButton: false });
            }
        },
        error: function (xhr) {
            if (xhr.status === 422) showErrors(xhr.responseJSON.errors);
        }
    });
}

function toggleStatus(id) {
    $.ajax({
        url: URL_BASE + '/' + id + '/toggle-status',
        method: 'PATCH',
        headers: { 'X-CSRF-TOKEN': CSRF },
        success: function (res) {
            if (res.success) {
                dt.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1500, showConfirmButton: false });
            }
        }
    });
}

function hapus(id) {
    Swal.fire({
        title: 'Hapus barang ini?',
        text: 'Data yang sudah dihapus tidak bisa dikembalikan.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
    }).then(result => {
        if (!result.isConfirmed) return;
        $.ajax({
            url: URL_BASE + '/' + id,
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF },
            success: function (res) {
                if (res.success) {
                    dt.ajax.reload(null, false);
                    Swal.fire({ icon: 'success', title: 'Dihapus', text: res.message, timer: 1500, showConfirmButton: false });
                }
            }
        });
    });
}
</script>
@endpush