@extends('layouts.master')

@section('title', 'Jenis Barang')

@section('styles')
<style>
    #tblJenis_wrapper .dataTables_filter input {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 10px;
    }
    #tblJenis_wrapper .dataTables_filter input:focus {
        border-color: #a15adf !important;
        box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important;
    }
    #tblJenis_wrapper .dataTables_length select {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 70px;
    }
    #tblJenis_wrapper .dataTables_filter label,
    #tblJenis_wrapper .dataTables_length label {
        font-size: .875rem;
        color: #6c757d;
    }
    #tblJenis_wrapper .dataTables_info {
        font-size: .8rem;
        color: #6c757d;
    }
    #tblJenis 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">Jenis Barang</p>
            <span class="fs-13 text-muted">Data Induk &rarr; Jenis 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 Jenis Barang</div>
                    <div class="d-flex gap-2 flex-wrap">
                        @can('jenis_barang.view')
                        <a href="{{ route('data-induk.jenis-barang.export-excel') }}" class="btn btn-success btn-sm">
                            <i class="bx bx-download me-1"></i> Unduh Excel
                        </a>
                        @endcan
                        @can('jenis_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 Jenis Barang
                        </button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblJenis" 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>Grup</th>
                                    <th>Kode</th>
                                    <th>Nama</th>
                                    <th class="text-center" style="width:90px">Status</th>
                                    <th>Catatan</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">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalFormTitle">Tambah Jenis 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="mb-3">
                    <label class="form-label fw-semibold">Grup <span class="text-danger">*</span></label>
                    <input type="text" id="formGrup" class="form-control text-uppercase" maxlength="100"
                           list="datalistGrup" placeholder="Ketik atau pilih grup yang ada"
                           style="text-transform:uppercase" autocomplete="off">
                    <datalist id="datalistGrup">
                        @foreach($grupOptions as $g)
                        <option value="{{ strtoupper($g) }}">
                        @endforeach
                    </datalist>
                    <div class="form-text text-muted" style="font-size:.78rem">Isi bebas atau pilih dari daftar grup yang sudah ada.</div>
                    <div class="invalid-feedback" id="errGrup"></div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Nama <span class="text-danger">*</span></label>
                    <input type="text" id="formNama" class="form-control text-uppercase" maxlength="255" placeholder="Nama jenis barang" style="text-transform:uppercase">
                    <div class="invalid-feedback" id="errNama"></div>
                </div>

                <div class="mb-1">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea id="formCatatan" class="form-control" rows="3" placeholder="Opsional"></textarea>
                    <div class="invalid-feedback" id="errCatatan"></div>
                </div>

                <div id="editWarning" class="alert alert-warning d-flex align-items-start gap-2 mt-3 mb-0 py-2 d-none" style="font-size:.85rem">
                    <i class="bx bx-info-circle fs-16 mt-1 flex-shrink-0"></i>
                    <span></span>
                </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 Jenis 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">Grup</td><td id="vGrup"></td></tr>
                    <tr><td class="text-muted">Kode</td><td id="vKode"></td></tr>
                    <tr><td class="text-muted">Nama</td><td id="vNama"></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>
                </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'         => 'Jenis Barang',
    'importRoute'   => 'data-induk.jenis-barang.import',
    'templateRoute' => 'data-induk.jenis-barang.template-excel',
])
@endsection

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

let dt;

$(function () {
    dt = $('#tblJenis').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: 'grup' },
            { data: 'kode' },
            { data: 'nama' },
            {
                data: 'is_active', className: 'text-center',
                render: function (val) {
                    return val
                        ? '<span class="badge bg-success-transparent text-success">Aktif</span>'
                        : '<span class="badge bg-danger-transparent text-danger">Nonaktif</span>';
                }
            },
            { data: 'catatan', defaultContent: '-', render: d => d ? (d.length > 60 ? d.substring(0,60)+'…' : d) : '-' },
        ],
        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']],
    });
});

function clearErrors() {
    ['Grup','Nama','Catatan'].forEach(f => {
        $('#form'+f).removeClass('is-invalid');
        $('#err'+f).text('');
    });
}

function showErrors(errors) {
    if (errors.grup)    { $('#formGrup').addClass('is-invalid');    $('#errGrup').text(errors.grup[0]); }
    if (errors.nama)    { $('#formNama').addClass('is-invalid');    $('#errNama').text(errors.nama[0]); }
    if (errors.catatan) { $('#formCatatan').addClass('is-invalid'); $('#errCatatan').text(errors.catatan[0]); }
}

function openTambah() {
    clearErrors();
    $('#formId').val('');
    $('#modalFormTitle').text('Tambah Jenis Barang');
    $('#formGrup').val('').removeClass('is-invalid');
    $('#formNama').val('');
    $('#formCatatan').val('');
    $('#editWarning').addClass('d-none');
    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 Jenis Barang');
        $('#formGrup').val(d.grup);
        $('#formNama').val(d.nama);
        $('#formCatatan').val(d.catatan ?? '');

        $.get(URL_BASE + '/' + id + '/usage-count', function (u) {
            if (u.count > 0) {
                $('#editWarning span').text(`Jenis ini digunakan oleh ${u.count} barang. Perubahan nama akan berlaku otomatis untuk semua barang tersebut.`);
                $('#editWarning').removeClass('d-none');
            } else {
                $('#editWarning').addClass('d-none');
            }
        });

        new bootstrap.Modal('#modalForm').show();
    });
}

function openLihat(id) {
    $.get(URL_BASE + '/' + id, function (res) {
        const d = res.data;
        $('#vGrup').text(d.grup);
        $('#vKode').text(d.kode);
        $('#vNama').text(d.nama);
        $('#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 ?? '-');
        $('#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: {
            grup:    $('#formGrup').val().toUpperCase(),
            nama:    $('#formNama').val().toUpperCase(),
            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) {
    $.get(URL_BASE + '/' + id + '/usage-count', function (u) {
        if (u.count > 0) {
            Swal.fire({ icon: 'error', title: 'Tidak Dapat Dihapus', text: `Jenis ini digunakan oleh ${u.count} barang.` });
            return;
        }
        Swal.fire({
            title: 'Hapus jenis 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