@extends('layouts.apex')

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

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Master Barang</h1>
            <p class="page-header-subtitle">Kelola data barang/produk</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#barangModal">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Tambah Barang
        </button>
        <button type="button" class="btn btn-success" onclick="updateAllStokKalkulasi()">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
            Update Stok Kalkulasi Semua
        </button>
    </div>
</div>

<div class="page-body">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Daftar Barang</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="barangTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Kode</th>
                            <th>Nama Barang</th>
                            <th>Kategori</th>
                            <th>Satuan</th>
                            <th>Stok</th>
                            <th>Harga Beli</th>
                            <th>Harga Jual</th>
                            <th>Lokasi</th>
                            <th>Supplier</th>
                            <th>Kartu Stok</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Barang Modal -->
<div id="barangModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <form id="barangForm" action="{{ route('master.barang.store') }}" method="POST">
                @csrf
                <input type="hidden" name="_method" value="POST" id="barangMethod">
                <input type="hidden" name="barang_id" id="barang_id">
                <div class="modal-header">
                    <h5 class="modal-title" id="barangModalTitle">Tambah Barang Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Kode Barang *</label>
                                <input type="text" name="kode" id="barangKode" class="form-control" placeholder="Contoh: BRG001" required maxlength="20" style="text-transform: uppercase;">
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="form-group">
                                <label class="form-label">Nama Barang *</label>
                                <input type="text" name="nama" class="form-control" placeholder="Nama barang" required maxlength="200">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Kategori</label>
                                <select name="kategori_id" class="form-select select2-barang">
                                    <option value="">Pilih Kategori</option>
                                    @foreach($kategori as $kat)
                                    <option value="{{ $kat->id }}">{{ $kat->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Satuan</label>
                                <select name="satuan_id" class="form-select select2-barang">
                                    <option value="">Pilih Satuan</option>
                                    @foreach($satuan as $sat)
                                    <option value="{{ $sat->id }}">{{ $sat->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Stok</label>
                                <div class="input-group">
                                    <input type="text" id="stok_display" class="form-control number-input" placeholder="0" disabled>
                                    <input type="hidden" name="stok" id="stok" value="0">
                                    <button type="button" class="btn btn-secondary" id="btnKalkulasiStok" onclick="showKalkulasiStok()" title="Kalkulasi Stok" disabled>
                                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Min. Stok</label>
                                <input type="text" id="min_stok_display" class="form-control number-input" placeholder="0">
                                <input type="hidden" name="min_stok" id="min_stok" value="0">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Lokasi</label>
                                <select name="lokasi" class="form-select select2-barang">
                                    <option value="">Pilih Lokasi</option>
                                    @foreach($lokasi as $lok)
                                    <option value="{{ $lok->nama }}">{{ $lok->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Harga Beli</label>
                                <input type="text" id="harga_beli_display" class="form-control currency-input" placeholder="0">
                                <input type="hidden" name="harga_beli" id="harga_beli">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Harga Jual</label>
                                <input type="text" id="harga_jual_display" class="form-control currency-input" placeholder="0">
                                <input type="hidden" name="harga_jual" id="harga_jual">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Supplier</label>
                        <select name="suplier_id" class="form-select select2-barang">
                            <option value="">Pilih Supplier</option>
                            @foreach($supplier as $sup)
                            <option value="{{ $sup->id }}">{{ $sup->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" class="form-control" rows="2" maxlength="500"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Kalkulasi Stok Modal -->
<div id="kalkulasiStokModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Kalkulasi Stok</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="kalkulasi_barang_id">
                <div class="mb-3">
                    <label class="form-label text-muted">Nama Barang</label>
                    <div id="kalkulasi_nama_barang" class="fw-bold">-</div>
                </div>
                <div class="card bg-light mb-3">
                    <div class="card-body py-2">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Total Pembelian:</span>
                            <span id="kalkulasi_pembelian" class="fw-bold text-success">0</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Total Pemakaian:</span>
                            <span id="kalkulasi_pemakaian" class="fw-bold text-danger">0</span>
                        </div>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold">Hasil (Stok):</span>
                            <span id="kalkulasi_hasil" class="fw-bold" style="font-size: 1.2rem;">0</span>
                        </div>
                    </div>
                </div>
                <div class="alert alert-info py-2 small mb-0">
                    <i class="bi bi-info-circle"></i> Stok akan diperbarui menjadi: <strong id="kalkulasi_hasil_preview">0</strong>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" onclick="updateStokFromKalkulasi()">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                    </svg>
                    Update Stok
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Kartu Stok Modal -->
<div id="kartuStokModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl"style="min-width:90%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Kartu Stok - <span id="kartuStokNamaBarang">-</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="kartu_stok_barang_id">

               

                <!-- Stock Summary Per Location -->
                <div class="card mb-3">
                    <div class="card-header py-2">
                        <h6 class="card-title mb-0">Stok Per Lokasi</h6>
                    </div>
                    <div class="card-body py-2">
                        <div id="kartuStokSummary" class="d-flex flex-wrap gap-2">
                            <!-- Summary items will be loaded here -->
                        </div>
                    </div>
                </div>

                 <!-- Filter Section -->
                <div class="card mb-3">
                    <div class="card-body py-2">
                        <div class="row g-2">
                            <div class="col-md-3">
                                <label class="form-label small mb-1">Lokasi</label>
                                <select id="kartu_stok_lokasi" class="form-select form-select-sm">
                                    <option value="">Semua Lokasi</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small mb-1">Tanggal Mulai</label>
                                <input type="date" id="kartu_stok_start_date" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small mb-1">Tanggal Akhir</label>
                                <input type="date" id="kartu_stok_end_date" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-3 d-flex align-items-end">
                                <button type="button" class="btn btn-sm btn-primary w-100" onclick="loadKartuStok()">
                                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom;">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                    </svg>
                                    Tampilkan
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Transaction Table -->
                <div class="card">
                    <div class="card-header py-2">
                        <h6 class="card-title mb-0">Rincian Transaksi</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table id="kartuStokTable" class="table table-striped table-hover mb-0" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Tanggal</th>
                                        <th>No. Bukti</th>
                                        <th>Lokasi</th>
                                        <th>Keterangan</th>
                                        <th class="text-end">Masuk</th>
                                        <th class="text-end">Keluar</th>
                                        <th class="text-end">Harga Beli</th>
                                        <th class="text-end">Saldo</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" onclick="printKartuStok()">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                    </svg>
                    Cetak
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let barangTable;

// Format currency with dot separator
function formatCurrency(value) {
    if (!value || value === '') return '';
    // Remove all non-digit characters
    let number = value.toString().replace(/\D/g, '');
    if (number === '') return '';
    // Add dot as thousand separator
    return number.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

// Parse formatted currency back to number
function parseCurrency(formattedValue) {
    if (!formattedValue || formattedValue === '') return 0;
    return parseFloat(formattedValue.toString().replace(/\./g, '')) || 0;
}

// Handle currency input
$(document).on('input', '.currency-input', function(e) {
    let value = $(this).val();
    let cursorPos = this.selectionStart;
    let originalLength = value.length;

    // Format the value
    let formatted = formatCurrency(value);
    $(this).val(formatted);

    // Update hidden input - remove _display suffix
    let displayId = $(this).attr('id');
    let hiddenId = displayId.replace('_display', '');
    $('#' + hiddenId).val(parseCurrency(formatted));

    // Adjust cursor position
    let newLength = formatted.length;
    this.setSelectionRange(cursorPos + (newLength - originalLength), cursorPos + (newLength - originalLength));
});

// Set currency value
function setCurrencyValue(displayId, value) {
    if (value && value > 0) {
        $('#' + displayId).val(formatCurrency(value));
        let hiddenId = displayId.replace('_display', '');
        $('#' + hiddenId).val(value);
    } else {
        $('#' + displayId).val('');
        let hiddenId = displayId.replace('_display', '');
        $('#' + hiddenId).val(0);
    }
}

// Get currency value
function getCurrencyValue(displayId) {
    return parseCurrency($('#' + displayId).val());
}

// Format number with dot separator (for stok, min_stok)
function formatNumber(value) {
    if (!value || value === '') return '';
    let number = value.toString().replace(/\D/g, '');
    if (number === '') return '';
    return number.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

// Parse formatted number back to integer
function parseNumber(formattedValue) {
    if (!formattedValue || formattedValue === '') return 0;
    return parseInt(formattedValue.toString().replace(/\./g, '')) || 0;
}

// Handle number input (stok, min_stok)
$(document).on('input', '.number-input', function(e) {
    let value = $(this).val();
    let cursorPos = this.selectionStart;
    let originalLength = value.length;

    let formatted = formatNumber(value);
    $(this).val(formatted);

    let displayId = $(this).attr('id');
    let hiddenId = displayId.replace('_display', '');
    $('#' + hiddenId).val(parseNumber(formatted));

    let newLength = formatted.length;
    this.setSelectionRange(cursorPos + (newLength - originalLength), cursorPos + (newLength - originalLength));
});

// Set number value
function setNumberValue(displayId, value) {
    if (value && value > 0) {
        $('#' + displayId).val(formatNumber(value));
        let hiddenId = displayId.replace('_display', '');
        $('#' + hiddenId).val(value);
    } else {
        $('#' + displayId).val('');
        let hiddenId = displayId.replace('_display', '');
        $('#' + hiddenId).val(0);
    }
}

let isEditMode = false;

function showKalkulasiStok() {
    const barangId = $('#barang_id').val();

    if (!barangId) {
        Swal.fire({
            icon: 'warning',
            title: 'Perhatian',
            text: 'Silakan simpan barang terlebih dahulu sebelum menghitung stok!'
        });
        return;
    }

    $.ajax({
        url: '/master/barang/' + barangId + '/kalkulasi-stok',
        method: 'GET',
        success: function(data) {
            $('#kalkulasi_barang_id').val(barangId);
            $('#kalkulasi_nama_barang').text(data.nama_barang || '-');
            $('#kalkulasi_pembelian').text(formatNumber(data.total_pembelian || 0));
            $('#kalkulasi_pemakaian').text(formatNumber(data.total_pemakaian || 0));
            const hasil = (data.total_pembelian || 0) - (data.total_pemakaian || 0);
            $('#kalkulasi_hasil').text(formatNumber(hasil));
            $('#kalkulasi_hasil_preview').text(formatNumber(hasil));

            const modal = new bootstrap.Modal(document.getElementById('kalkulasiStokModal'));
            modal.show();
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: xhr.responseJSON?.message || 'Gagal mengambil data kalkulasi stok!'
            });
        }
    });
}

function updateStokFromKalkulasi() {
    const barangId = $('#kalkulasi_barang_id').val();
    const hasil = parseNumber($('#kalkulasi_hasil').text());

    $.ajax({
        url: '/master/barang/' + barangId + '/update-stok',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            stok: hasil
        },
        success: function(response) {
            const modalEl = document.getElementById('kalkulasiStokModal');
            const modal = bootstrap.Modal.getInstance(modalEl);
            if (modal) modal.hide();

            // Update form fields if still in edit mode
            setNumberValue('stok_display', hasil);
            $('#stok_display').prop('disabled', true);

            $('#barangTable').DataTable().ajax.reload(null, false);

            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: 'Stok berhasil diperbarui!',
                timer: 2000,
                showConfirmButton: false
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: xhr.responseJSON?.message || 'Gagal mengupdate stok!'
            });
        }
    });
}

function updateAllStokKalkulasi() {
    Swal.fire({
        title: 'Update Stok Kalkulasi Semua?',
        html: 'Semua stok barang akan diperbarui dengan rumus:<br><strong>Stok = Total Pembelian - Total Pemakaian</strong><br><br>Lanjutkan?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#198754',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Update Semua!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Memproses...',
                html: 'Sedang menghitung dan memperbarui stok semua barang...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '/master/barang/update-all-stok-kalkulasi',
                method: 'POST',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        html: response.message || 'Semua stok barang berhasil diperbarui!',
                        timer: 3000,
                        showConfirmButton: true
                    });
                    $('#barangTable').DataTable().ajax.reload(null, false);
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Gagal mengupdate stok barang!'
                    });
                }
            });
        }
    });
}

function editBarang(id) {
    isEditMode = true; // Set flag untuk mencegah reset saat show.bs.modal

    $.ajax({
        url: '/master/barang/' + id,
        method: 'GET',
        success: function(data) {
            $('#barangModalTitle').text('Edit Barang');
            $('#barangMethod').val('PUT');
            $('#barang_id').val(id);
            $('#barangForm').attr('action', '/master/barang/' + id);
            $('#barangKode').val(data.kode).prop('readonly', true);
            $('input[name="nama"]').val(data.nama);
            $('select[name="kategori_id"]').val(data.kategori_id || '').trigger('change');
            $('select[name="satuan_id"]').val(data.satuan_id || '').trigger('change');
            setNumberValue('stok_display', data.stok);
            $('#stok_display').prop('disabled', true);
            // Enable kalkulasi button when in edit mode
            $('#btnKalkulasiStok').prop('disabled', false).removeClass('btn-secondary').addClass('btn-info');
            setNumberValue('min_stok_display', data.min_stok);
            $('select[name="lokasi"]').val(data.lokasi || '').trigger('change');
            setCurrencyValue('harga_beli_display', data.harga_beli);
            setCurrencyValue('harga_jual_display', data.harga_jual);
            $('select[name="suplier_id"]').val(data.suplier_id || '').trigger('change');
            $('textarea[name="keterangan"]').val(data.keterangan || '');

            const modal = new bootstrap.Modal(document.getElementById('barangModal'));
            modal.show();
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data barang!'
            });
        }
    });
}

function viewBarang(id) {
    $.ajax({
        url: '/master/barang/' + id,
        method: 'GET',
        success: function(data) {
            var htmlContent = '<div style="text-align: left;">' +
                '<p><strong>Kode:</strong> ' + data.kode + '</p>' +
                '<p><strong>Nama:</strong> ' + data.nama + '</p>' +
                '<p><strong>Kategori:</strong> ' + (data.kategori_rel?.nama || '-') + '</p>' +
                '<p><strong>Satuan:</strong> ' + (data.satuan_rel?.nama || '-') + '</p>' +
                '<p><strong>Stok:</strong> ' + ((data.stok || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")) + '</p>' +
                '<p><strong>Min. Stok:</strong> ' + ((data.min_stok || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")) + '</p>' +
                '<p><strong>Lokasi:</strong> ' + (data.lokasi || '-') + '</p>' +
                '<p><strong>Harga Beli:</strong> Rp ' + ((data.harga_beli || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")) + '</p>' +
                '<p><strong>Harga Jual:</strong> Rp ' + ((data.harga_jual || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")) + '</p>' +
                '<p><strong>Supplier:</strong> ' + (data.supplier_rel?.nama || '-') + '</p>' +
                '<p><strong>Keterangan:</strong> ' + (data.keterangan || '-') + '</p>' +
                '</div>';

            Swal.fire({
                title: 'Detail Barang',
                html: htmlContent,
                icon: 'info',
                confirmButtonText: 'Tutup',
                confirmButtonColor: '#435ebe'
            });
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data barang!'
            });
        }
    });
}

function deleteBarang(id) {
    Swal.fire({
        title: 'Hapus Barang?',
        text: 'Apakah Anda yakin ingin menghapus barang ini?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '/master/barang/' + id,
                method: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    $('#barangTable').DataTable().ajax.reload(null, false);
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Barang berhasil dihapus!',
                        timer: 2000,
                        showConfirmButton: false
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Gagal menghapus barang!'
                    });
                }
            });
        }
    });
}

function resetBarangForm() {
    $('#barangForm')[0].reset();
    $('.select2-barang').val(null).trigger('change');
    $('.currency-input').val('');
    $('.number-input').val('');
    $('#harga_beli').val(0);
    $('#harga_jual').val(0);
    $('#stok').val(0);
    $('#stok_display').prop('disabled', false);
    $('#min_stok').val(0);
    $('#barangModalTitle').text('Tambah Barang Baru');
    $('#barangMethod').val('POST');
    $('#barang_id').val('');
    $('#barangForm').attr('action', '{{ route("master.barang.store") }}');
    $('#barangKode').prop('readonly', false);
    // Disable kalkulasi button when in add mode
    $('#btnKalkulasiStok').prop('disabled', true).removeClass('btn-info').addClass('btn-secondary');
}

$(document).ready(function() {
    // Initialize Select2 for dropdowns
    $('.select2-barang').select2({
        theme: 'bootstrap4',
        placeholder: 'Pilih',
        allowClear: true,
        width: '100%'
    });

    barangTable = $('#barangTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        responsive: true,
        dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex gap-2"B><"d-flex gap-2"lf>>rt<"d-flex justify-content-between align-items-center mt-3"<"info"i><"pagination"p>>',
        buttons: [
            {
                extend: 'copy',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> Copy',
                className: 'btn btn-sm'
            },
            {
                extend: 'csv',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> CSV',
                className: 'btn btn-sm'
            },
            {
                extend: 'excel',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> Excel',
                className: 'btn btn-sm'
            },
            {
                extend: 'pdf',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg> PDF',
                className: 'btn btn-sm'
            },
            {
                extend: 'print',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Print',
                className: 'btn btn-sm'
            }
        ],
        ajax: {
            url: '{{ route("master.barang.data") }}',
            type: 'GET',
            data: function(d) { d._token = '{{ csrf_token() }}'; }
        },
        columns: [
            { data: 'kode', name: 'kode' },
            { data: 'nama', name: 'nama' },
            { data: 'kategori_nama', name: 'kategori_id' },
            { data: 'satuan_nama', name: 'satuan_id' },
            { data: 'stok_format', name: 'stok' },
            { data: 'harga_beli_format', name: 'harga_beli' },
            { data: 'harga_jual_format', name: 'harga_jual' },
            { data: 'lokasi_nama', name: 'lokasi' },
            { data: 'supplier_nama', name: 'suplier_id' },
            { data: 'kartu_stok', orderable: false, searchable: false },
            { data: 'action', orderable: false, searchable: false }
        ],
        order: [[0, 'asc']],
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' }
    });

    $('input[name="kode"]').on('input', function() { this.value = this.value.toUpperCase(); });

    $('#barangForm').on('submit', function(e) {
        e.preventDefault();
        const method = $('#barangMethod').val();
        const url = $(this).attr('action');

        $.ajax({
            url: url,
            method: method === 'PUT' ? 'PUT' : 'POST',
            data: $(this).serialize(),
            success: function(response) {
                const modalEl = document.getElementById('barangModal');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) modal.hide();
                $('#barangTable').DataTable().ajax.reload(null, false);
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: method === 'PUT' ? 'Barang berhasil diperbarui!' : 'Barang berhasil ditambahkan!',
                    timer: 2000,
                    showConfirmButton: false
                });
                resetBarangForm();
            },
            error: function(xhr) {
                const errorMsg = xhr.responseJSON?.message || 'Terjadi kesalahan!';
                Swal.fire({ icon: 'error', title: 'Gagal', text: errorMsg });
            }
        });
    });

    $('#barangModal').on('hidden.bs.modal', function() {
        resetBarangForm();
        isEditMode = false; // Reset flag saat modal ditutup
    });

    // Reset form when modal is opened from "Tambah Barang" button
    $('#barangModal').on('show.bs.modal', function(e) {
        // Only reset if NOT in edit mode (opened from "Tambah Barang" button)
        if (!isEditMode) {
            resetBarangForm();
        }
        // Reset flag after checking
        isEditMode = false;
    });
});

// Kartu Stok Functions
let kartuStokData = null;

// Format date to DD-MM-YYYY
function formatDateIndo(dateString) {
    if (!dateString) return '-';
    const date = new Date(dateString);
    const day = String(date.getDate()).padStart(2, '0');
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const year = date.getFullYear();
    return day + '-' + month + '-' + year;
}

// Format datetime to DD-MM-YYYY HH:mm
function formatDateTimeIndo(dateString) {
    if (!dateString) return '-';
    const date = new Date(dateString);
    const day = String(date.getDate()).padStart(2, '0');
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const year = date.getFullYear();
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return day + '-' + month + '-' + year + ' ' + hours + ':' + minutes;
}

function showKartuStok(barangId, barangNama = null) {
    // First get barang info if nama not provided
    if (!barangNama) {
        $.ajax({
            url: '/master/barang/' + barangId,
            method: 'GET',
            success: function(data) {
                showKartuStok(barangId, data.nama);
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: 'Gagal mengambil data barang!'
                });
            }
        });
        return;
    }

    $('#kartu_stok_barang_id').val(barangId);
    $('#kartuStokNamaBarang').text(barangNama);

    // Reset filters
    $('#kartu_stok_lokasi').val('');
    $('#kartu_stok_start_date').val('');
    $('#kartu_stok_end_date').val('');

    // Load lokasi options
    $.ajax({
        url: '{{ route("master.lokasi.all") }}',
        method: 'GET',
        success: function(response) {
            let options = '<option value="">Semua Lokasi</option>';
            if (response.data) {
                response.data.forEach(function(lokasi) {
                    options += '<option value="' + lokasi.id + '">' + lokasi.nama + '</option>';
                });
            }
            $('#kartu_stok_lokasi').html(options).select2({
                theme: 'bootstrap4',
                placeholder: 'Pilih Lokasi',
                allowClear: true,
                width: '100%'
            });
        },
        error: function() {
            console.log('Gagal mengambil data lokasi');
        }
    });

    // Load kartu stok data
    loadKartuStok();

    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('kartuStokModal'));
    modal.show();
}

function loadKartuStok() {
    const barangId = $('#kartu_stok_barang_id').val();
    const lokasiId = $('#kartu_stok_lokasi').val();
    const startDate = $('#kartu_stok_start_date').val();
    const endDate = $('#kartu_stok_end_date').val();

    $.ajax({
        url: '/master/barang/' + barangId + '/kartu-stok',
        method: 'GET',
        data: {
            lokasi_id: lokasiId || null,
            start_date: startDate || null,
            end_date: endDate || null
        },
        success: function(response) {
            kartuStokData = response;
            renderKartuStok(response);
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: xhr.responseJSON?.message || 'Gagal mengambil data kartu stok!'
            });
        }
    });
}

function renderKartuStok(data) {
    // Render stock summary per location
    let summaryHtml = '';
    if (data.stock_per_location && data.stock_per_location.length > 0) {
        data.stock_per_location.forEach(function(item) {
            const badgeClass = item.stok > 0 ? 'success' : (item.stok < 0 ? 'danger' : 'secondary');
            summaryHtml += '<div class="card bg-light" style="min-width: 150px;">' +
                '<div class="card-body py-2 px-3">' +
                    '<div class="small text-muted mb-1">' + item.lokasi_nama + '</div>' +
                    '<div class="h5 mb-0 text-' + badgeClass + '">' + formatNumber(item.stok) + '</div>' +
                '</div>' +
            '</div>';
        });
    } else {
        summaryHtml = '<div class="text-muted">Belum ada data stok</div>';
    }
    $('#kartuStokSummary').html(summaryHtml);

    // Prepare transaction data for DataTables
    let runningBalance = 0;
    let allTransactions = [];

    // Combine pembelian and pemakaian transactions
    if (data.pembelians) {
        data.pembelians.forEach(function(p) {
            allTransactions.push({
                type: 'masuk',
                date: p.tanggal_pembelian,
                no_bukti: p.no_bukti,
                lokasi: p.lokasi ? p.lokasi.nama : '-',
                keterangan: 'Pembelian dari ' + (p.supplier ? p.supplier.nama : '-'),
                qty: p.qty,
                harga: p.harga_satuan
            });
        });
    }

    if (data.pemakaian) {
        data.pemakaian.forEach(function(p) {
            const lokasiNama = p.tujuanLokasi ? p.tujuanLokasi.nama : (p.dariLokasi ? p.dariLokasi.nama : '-');
            allTransactions.push({
                type: 'keluar',
                date: p.tanggal,
                no_bukti: p.no_bukti,
                lokasi: lokasiNama,
                keterangan: p.keterangan || 'Pemakaian Barang',
                qty: p.jumlah,
                harga: 0
            });
        });
    }

    // Sort by date
    allTransactions.sort(function(a, b) {
        return new Date(a.date) - new Date(b.date);
    });

    // Build table data
    let tableData = [];
    allTransactions.forEach(function(tx) {
        const dateFormatted = tx.date ? formatDateIndo(tx.date) : '-';
        const masuk = tx.type === 'masuk' ? tx.qty : 0;
        const keluar = tx.type === 'keluar' ? tx.qty : 0;
        runningBalance += (masuk - keluar);
        const hargaFormatted = tx.harga ? 'Rp ' + formatCurrency(tx.harga) : '-';

        tableData.push({
            tanggal: dateFormatted,
            no_bukti: tx.no_bukti || '-',
            lokasi: tx.lokasi,
            keterangan: tx.keterangan,
            masuk: masuk > 0 ? formatNumber(masuk) : '-',
            keluar: keluar > 0 ? formatNumber(keluar) : '-',
            harga: hargaFormatted,
            saldo: runningBalance
        });
    });

    // Destroy existing DataTable if any
    if ($.fn.DataTable.isDataTable('#kartuStokTable')) {
        $('#kartuStokTable').DataTable().destroy();
    }

    // Initialize DataTable
    $('#kartuStokTable').DataTable({
        data: tableData,
        columns: [
            { data: 'tanggal' },
            { data: 'no_bukti' },
            { data: 'lokasi' },
            { data: 'keterangan' },
            { data: 'masuk', className: 'text-end text-success fw-semibold' },
            { data: 'keluar', className: 'text-end text-danger fw-semibold' },
            { data: 'harga', className: 'text-end' },
            { data: 'saldo', className: 'text-end fw-bold' }
        ],
        paging: true,
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Semua"]],
        searching: true,
        info: true,
        order: [[0, 'asc']],
        dom: '<"d-flex justify-content-between align-items-center mb-2"<"d-flex gap-2"l><"d-flex gap-2"f>>rt<"d-flex justify-content-between align-items-center mt-2"<"info"i><"pagination"p>>',
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/id.json',
            emptyTable: 'Belum ada transaksi',
            zeroRecords: 'Tidak ditemukan data transaksi'
        },
        columnDefs: [
            {
                targets: [4, 5, 6, 7],
                orderable: true
            }
        ]
    });
}

function printKartuStok() {
    if (!kartuStokData) return;

    const barang = kartuStokData.barang;
    const lokasiId = $('#kartu_stok_lokasi').val();
    // Get lokasi text from select2
    const lokasiText = lokasiId ? $('#kartu_stok_lokasi option:selected').text() : 'Semua Lokasi';
    const startDate = $('#kartu_stok_start_date').val();
    const endDate = $('#kartu_stok_end_date').val();

    let printContent = '<div style="font-family: Arial, sans-serif;">';
    printContent += '<h2 style="text-align: center;">KARTU STOK</h2>';
    printContent += '<h3 style="text-align: center;">' + barang.nama + ' (' + barang.kode + ')</h3>';
    printContent += '<p style="text-align: center;">Satuan: ' + (barang.satuan_rel ? barang.satuan_rel.nama : '-') + '</p>';

    if (lokasiId || startDate || endDate) {
        printContent += '<p><strong>Filter:</strong> ';
        let filters = [];
        if (lokasiId) filters.push('Lokasi: ' + lokasiText);
        if (startDate) filters.push('Dari: ' + startDate);
        if (endDate) filters.push('Sampai: ' + endDate);
        printContent += filters.join(' | ') + '</p>';
    }

    // Stock summary
    printContent += '<h4>Stok Per Lokasi:</h4><table border="1" cellpadding="5" style="width: 100%; border-collapse: collapse;">';
    printContent += '<tr><th>Lokasi</th><th>Stok</th></tr>';
    if (kartuStokData.stock_per_location && kartuStokData.stock_per_location.length > 0) {
        kartuStokData.stock_per_location.forEach(function(item) {
            printContent += '<tr><td>' + item.lokasi_nama + '</td><td>' + formatNumber(item.stok) + '</td></tr>';
        });
    }
    printContent += '</table><br>';

    // Transaction table
    printContent += '<h4>Rincian Transaksi:</h4><table border="1" cellpadding="5" style="width: 100%; border-collapse: collapse;">';
    printContent += '<tr><th>Tanggal</th><th>No. Bukti</th><th>Lokasi</th><th>Keterangan</th><th>Masuk</th><th>Keluar</th><th>Harga Beli</th><th>Saldo</th></tr>';

    let runningBalance = 0;
    let allTransactions = [];

    if (kartuStokData.pembelians) {
        kartuStokData.pembelians.forEach(function(p) {
            allTransactions.push({
                type: 'masuk',
                date: p.tanggal_pembelian,
                no_bukti: p.no_bukti,
                lokasi: p.lokasi ? p.lokasi.nama : '-',
                keterangan: 'Pembelian dari ' + (p.supplier ? p.supplier.nama : '-'),
                qty: p.qty,
                harga: p.harga_satuan
            });
        });
    }

    if (kartuStokData.pemakaian) {
        kartuStokData.pemakaian.forEach(function(p) {
            const lokasiNama = p.tujuanLokasi ? p.tujuanLokasi.nama : (p.dariLokasi ? p.dariLokasi.nama : '-');
            allTransactions.push({
                type: 'keluar',
                date: p.tanggal,
                no_bukti: p.no_bukti,
                lokasi: lokasiNama,
                keterangan: p.keterangan || 'Pemakaian Barang',
                qty: p.jumlah,
                harga: 0
            });
        });
    }

    allTransactions.sort(function(a, b) {
        return new Date(a.date) - new Date(b.date);
    });

    allTransactions.forEach(function(tx) {
        const dateFormatted = tx.date ? formatDateIndo(tx.date) : '-';
        const masuk = tx.type === 'masuk' ? tx.qty : 0;
        const keluar = tx.type === 'keluar' ? tx.qty : 0;
        runningBalance += (masuk - keluar);
        const hargaFormatted = tx.harga ? 'Rp ' + formatCurrency(tx.harga) : '-';

        printContent += '<tr>';
        printContent += '<td>' + dateFormatted + '</td>';
        printContent += '<td>' + (tx.no_bukti || '-') + '</td>';
        printContent += '<td>' + tx.lokasi + '</td>';
        printContent += '<td>' + tx.keterangan + '</td>';
        printContent += '<td>' + (masuk > 0 ? formatNumber(masuk) : '-') + '</td>';
        printContent += '<td>' + (keluar > 0 ? formatNumber(keluar) : '-') + '</td>';
        printContent += '<td>' + hargaFormatted + '</td>';
        printContent += '<td><strong>' + formatNumber(runningBalance) + '</strong></td>';
        printContent += '</tr>';
    });

    printContent += '</table>';
    printContent += '<p style="margin-top: 20px; font-size: 12px;">Dicetak pada: ' + formatDateTimeIndo(new Date()) + '</p>';
    printContent += '</div>';

    const printWindow = window.open('', '_blank');
    printWindow.document.write(printContent);
    printWindow.document.close();
    printWindow.print();
}
</script>
@endpush
@endsection