@extends('layouts.apex')

@section('title', 'Pembelian')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Pembelian</h1>
            <p class="page-header-subtitle">Pencatatan pembelian benur udang</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pembelianModal">
            <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>
            Pembelian Baru
        </button>
    </div>
</div>

<div class="page-body">
    <!-- Summary Cards -->
    <div class="stat-grid">
        <div class="stat-card">
            <div class="stat-icon primary">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
            </div>
            <div class="stat-label">Total Pembelian</div>
            <div class="stat-value" id="summaryTotalPembelian">{{ $summary->total_pembelian }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon success">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <div class="stat-label">Total QTY</div>
            <div class="stat-value" id="summaryTotalBenih">{{ number_format($summary->total_benih, 0) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon info">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
            </div>
            <div class="stat-label">Bulan Ini</div>
            <div class="stat-value" id="summaryBulanIni">{{ number_format($summary->bulan_ini, 0) }}</div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Riwayat Pembelian</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="pembelianTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>No. Bukti</th>
                            <th>Tanggal</th>
                            <th>Supplier</th>
                            <th>Total QTY</th>
                            <th>Total Nilai</th>
                            <th>Item Info</th>
                            <th>Dibuat Oleh</th>
                            <th>Status Hutang</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Pembelian Modal -->
<div id="pembelianModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg" style="min-width: 1300px;">
        <div class="modal-content">
            <form id="pembelianForm" action="{{ route('pembelian.store.batch') }}" method="POST">
                @csrf
                <input type="hidden" name="_method" value="POST" id="pembelianMethod">
                <input type="hidden" name="pembelian_id" id="pembelian_id">
                <div class="modal-header">
                    <h5 class="modal-title" id="pembelianModalTitle">Pembelian Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Master Section -->
                    <div class="row" style="margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #dee2e6;">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Nomor Bukti</label>
                                <input type="text"style="width:200px;" name="no_bukti" id="no_bukti" class="form-control" placeholder="Menunggu generate..." readonly>
                                <small class="form-text text-muted" id="no_bukti_help">Pilih tanggal untuk generate nomor bukti otomatis</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Tanggal Pembelian *</label>
                                <input type="date" style="width:200px;"name="tanggal_pembelian" id="tanggal_pembelian" class="form-control" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Supplier *</label>
                                <select name="supplier_id" id="supplier_id" class="form-control form-select" style="width:50%;" required>
                                    <option value="">Pilih Supplier</option>
                                    @foreach($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}">{{ $supplier->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Detail Table Section -->
                    <div style="margin-bottom: 1.5rem;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                            <div style="display: flex; align-items: center; gap: 1rem;">
                                <h6 style="margin: 0;">Data Pembelian per Lokasi</h6>
                                <span class="badge badge-primary" id="rowCount" style="background: #007bff; color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.875rem;">
                                    1 baris
                                </span>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" onclick="addBatchRow()">
                                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle; margin-right: 0.25rem;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                </svg>
                                Tambah Baris
                            </button>
                        </div>

                        <div style="overflow-x: auto;">
                            <table class="table table-bordered" id="batchTable">
                                <thead>
                                    <tr>
                                        <th style="width: 180px;">Lokasi *</th>
                                        <th style="width: 500px;">Jenis Barang *</th>
                                        <th style="width: 140px;">QTY *</th>
                                        <th style="width: 170px;">Harga Barang</th>
                                        <th style="width: 170px;">Sub Total</th>
                                        <th style="width: 50px;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="batchTableBody">
                                    <!-- Rows will be added dynamically -->
                                </tbody>
                                <tfoot>
                                    <tr style="background-color: #f8f9fa; font-weight: bold;">
                                        <td colspan="2" style="text-align: right; padding-right: 1rem;">
                                            <strong>GRAND TOTAL:</strong>
                                        </td>
                                        <td style="text-align: center;">
                                            <span id="grandTotalBenih" style="color: #007bff; font-size: 1.1rem;display:none;">0</span>
                                        </td>
                                        <td></td>
                                        <td style="text-align: center;">
                                            <span id="grandTotalHarga" style="color: #28a745; font-size: 1.1rem;">Rp 0</span>
                                        </td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <!-- Keterangan -->
                    <div class="form-group">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" id="keterangan" class="form-control" rows="2"></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" id="submitBtn">
                        <span id="submitBtnText">
                            <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="M5 13l4 4L19 7"/>
                            </svg>
                            Simpan Semua Data
                        </span>
                        <span id="submitBtnLoading" class="d-none">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="width: 1rem; height: 1rem; border-width: 0.15em; margin-right: 0.5rem; display: inline-block;"></span>
                            <span style="display: inline-block;">Menyimpan...</span>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<style>
/* SweetAlert z-index higher than Bootstrap modal (1055) */
.swal2-popup-on-top {
    z-index: 99999 !important;
}
.swal2-backdrop-show {
    z-index: 99998 !important;
}

/* Required field indicator */
.required-indicator {
    color: #dc3545;
    font-weight: bold;
}
</style>
<script>
// Global functions - declared outside document.ready for onclick access
let pembelianTable;
let pollingInterval = null;
let lastKnownSequence = null;
let isSubmitting = false;

// Lokasi options
const lokasiOptions = @json($lokasis->map(function($lokasi) {
    return ['id' => $lokasi->id, 'nama' => $lokasi->nama];
})->toArray());

// Barang options
const barangOptions = [
    @foreach($barangs as $barang)
    {
        id: {{ $barang->id }},
        nama: '{{ $barang->nama }}',
        kategori: '{{ $barang->kategoriRel->nama ?? '-' }}',
        stok: {{ $barang->stok ?? 0 }},
        satuan: '{{ $barang->satuanRel->nama ?? 'KG' }}'
    }@if(!$loop->last),@endif
    @endforeach
];

// Helper function untuk format Rupiah
function formatRupiah(number) {
    if (number === null || number === undefined || number === '' || isNaN(number)) {
        return '-';
    }
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
    }).format(number);
}

// Helper function untuk format angka dengan pemisah ribuan
function formatNumber(number) {
    if (number === null || number === undefined || number === '' || isNaN(number)) {
        return '0';
    }
    return new Intl.NumberFormat('id-ID').format(number);
}

// Helper function untuk format input sebagai Rupiah saat mengetik
function formatRupiahInput(angka) {
    if (angka === '' || angka === null || angka === undefined || isNaN(angka)) {
        return '';
    }
    var numberString = angka.toString().replace(/[^,\d]/g, '').toString();
    var split = numberString.split(',');
    var sisa = split[0].length % 3;
    var rupiah = split[0].substr(0, sisa);
    var ribuan = split[0].substr(sisa).match(/\d{3}/gi);

    if (ribuan) {
        separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
    }

    rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
    return rupiah;
}

// Helper function untuk parse Rupiah format kembali ke number
function parseRupiah(rupiahString) {
    if (!rupiahString || rupiahString === '' || rupiahString === 'Rp') {
        return 0;
    }
    // Hapus "Rp ", spasi, titik (pemisah ribuan), dan ganti koma dengan titik
    var cleaned = rupiahString.replace(/[^,\d]/g, '').replace(/,/g, '.');
    var result = parseFloat(cleaned);
    return isNaN(result) ? 0 : result;
}

// Helper function untuk format number dengan separator ribuan saat mengetik
// Format English: period (.) untuk desimal, koma (,) untuk ribuan. Contoh: 1,000.22
function formatNumberInput(angka) {
    if (angka === '' || angka === null || angka === undefined) {
        return '';
    }

    var value = angka.toString();
    var hasDecimalDot = value.indexOf('.') !== -1;
    var integerPart, decimalPart;

    if (hasDecimalDot) {
        // Split by dot (decimal separator)
        var parts = value.split('.');
        // Remove commas from integer part (thousand separators that user might have typed)
        integerPart = parts[0].replace(/,/g, '').replace(/[^\d]/g, '');
        // Clean decimal part - only digits, max 2 digits
        decimalPart = parts[1] ? parts[1].replace(/[^\d]/g, '').substring(0, 2) : '';
    } else {
        // No dot, so no decimal part
        // Remove commas and non-digits to get raw number
        integerPart = value.replace(/,/g, '').replace(/[^\d]/g, '');
        decimalPart = '';
    }

    // Handle empty case
    if (!integerPart || integerPart === '') {
        return hasDecimalDot ? '.' : '';
    }

    // Add thousand separators with COMMA (English format: 1,000)
    var formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

    // Build final value
    var result = formattedInteger;
    // Add dot if user typed it (even without decimal digits yet)
    if (hasDecimalDot) {
        result += '.' + decimalPart;
    }

    return result;
}

// Helper function untuk parse number format kembali ke number (English format)
function parseNumberInput(numberString) {
    if (!numberString || numberString === '') {
        return 0;
    }
    // Hapus koma (pemisah ribuan) dan parse
    var cleaned = numberString.replace(/,/g, '');
    var result = parseFloat(cleaned);
    return isNaN(result) ? 0 : result;
}

// Helper function untuk konversi format tanggal ke format HTML5 date input (yyyy-mm-dd)
function convertDateForInput(dateString) {
    if (!dateString || dateString === '' || dateString === '-' || dateString === null) {
        return '';
    }

    // Log untuk debug
    console.log('convertDateForInput input:', dateString, 'type:', typeof dateString);

    // Jika sudah dalam format yyyy-mm-dd atau yyyy-mm-dd hh:mm:ss, langsung ambil 10 karakter pertama
    if (typeof dateString === 'string' && dateString.match(/^\d{4}-\d{2}-\d{2}/)) {
        console.log('Format yyyy-mm-dd detected:', dateString.substring(0, 10));
        return dateString.substring(0, 10);
    }

    // Konversi dari format dd-mm-yyyy ke yyyy-mm-dd (format DataTable)
    if (typeof dateString === 'string' && dateString.match(/^\d{2}-\d{2}-\d{4}$/)) {
        const parts = dateString.split('-');
        const result = parts[2] + '-' + parts[1] + '-' + parts[0];
        console.log('Format dd-mm-yyyy converted to:', result);
        return result;
    }

    // Konversi dari format dd/mm/yyyy ke yyyy-mm-dd (format API single record)
    if (typeof dateString === 'string' && dateString.match(/^\d{2}\/\d{2}\/\d{4}$/)) {
        const parts = dateString.split('/');
        const result = parts[2] + '-' + parts[1] + '-' + parts[0];
        console.log('Format dd/mm/yyyy converted to:', result);
        return result;
    }

    // Jika ada waktu (hh:mm:ss), ambil bagian tanggal saja
    if (typeof dateString === 'string' && dateString.indexOf(' ') !== -1) {
        const datePart = dateString.split(' ')[0];
        console.log('Date part extracted:', datePart);
        return convertDateForInput(datePart);
    }

    // Try parsing with Date object (fallback)
    const date = new Date(dateString);
    if (!isNaN(date.getTime())) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const result = year + '-' + month + '-' + day;
        console.log('Parsed with Date object:', result);
        return result;
    }

    console.log('Could not convert date:', dateString);
    return '';
}

// Function untuk update summary cards
function updateSummary() {
    $.ajax({
        url: '/pembelian/summary',
        method: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                const summary = response.data;
                $('#summaryTotalPembelian').text(summary.total_pembelian);
                $('#summaryTotalBenih').text(formatNumber(summary.total_benih));
                $('#summaryBulanIni').text(formatNumber(summary.bulan_ini));
            }
        },
        error: function(xhr) {
            console.error('Gagal mengupdate summary:', xhr);
        }
    });
}

// Function untuk update stok barang di Select2 dropdown setelah pembelian
function updateBarangStockOptions(formData, isEdit = false) {
    // Parse form data untuk mendapatkan barang_id dan qty
    const formDataParams = new URLSearchParams(formData);
    const stockUpdates = {};

    // Loop melalui semua data_pembelian
    for (const [key, value] of formDataParams.entries()) {
        if (key.includes('[barang_id]')) {
            // Extract row index from key (e.g., "data_pembelian[1][barang_id]" -> "1")
            const match = key.match(/data_pembelian\[(\d+)\]\[barang_id\]/);
            if (match) {
                const rowIndex = match[1];
                const qtyKey = `data_pembelian[${rowIndex}][jml_bibit]`;
                const qty = parseInt(formDataParams.get(qtyKey)) || 0;
                stockUpdates[value] = (stockUpdates[value] || 0) + qty;
            }
        }
    }

    // Update barangOptions array
    barangOptions.forEach(function(barang) {
        if (stockUpdates[barang.id]) {
            if (isEdit) {
                // Untuk edit, kita perlu fetch stok terbaru dari server
                // Karena edit bisa berarti menambah atau mengurangi stok
                refreshBarangOptionsFromServer();
            } else {
                // Untuk create baru, tambahkan stok
                barang.stok = (barang.stok || 0) + stockUpdates[barang.id];
            }
        }
    });

    // Refresh all Select2 dropdowns for barang
    if (!isEdit) {
        refreshBarangSelect2Dropdowns();
    }
}

// Function untuk refresh semua Select2 dropdowns barang
function refreshBarangSelect2Dropdowns() {
    $('.batch-barang').each(function() {
        const $select = $(this);
        const currentValue = $select.val();

        // Rebuild options with updated stock
        let optionsHtml = '<option value="">Pilih Jenis Barang</option>';
        barangOptions.forEach(function(barang) {
            const selected = barang.id == currentValue ? 'selected' : '';
            optionsHtml += `<option value="${barang.id}" data-stok="${barang.stok}" data-satuan="${barang.satuan}" ${selected}>${barang.nama} (${barang.kategori})</option>`;
        });

        $select.html(optionsHtml);
        $select.val(currentValue).trigger('change');
    });
}

// Function untuk refresh barang options dari server
function refreshBarangOptionsFromServer() {
    $.ajax({
        url: '/master/barang/data',
        method: 'GET',
        data: { per_page: 'all' },
        success: function(response) {
            if (response.data) {
                // Update global barangOptions array
                barangOptions.length = 0; // Clear array
                response.data.forEach(function(barang) {
                    // Handle both camelCase (kategoriRel) and snake_case (kategori_rel) from API
                    const kategoriNama = barang.kategori_rel?.nama || barang.kategoriRel?.nama || '-';
                    const satuanNama = barang.satuan_rel?.nama || barang.satuanRel?.nama || 'KG';

                    barangOptions.push({
                        id: barang.id,
                        nama: barang.nama,
                        kategori: kategoriNama,
                        stok: barang.stok || 0,
                        satuan: satuanNama
                    });
                });

                // Refresh Select2 dropdowns
                refreshBarangSelect2Dropdowns();
            }
        },
        error: function(xhr) {
            console.error('Gagal mengupdate barang options:', xhr);
        }
    });
}

// Batch row functions
function addBatchRow() {
    const rowNumber = $('#batchTableBody tr').length + 1;
    const uniqueId = Date.now() + '_' + rowNumber;

    const row = `
        <tr class="batch-row">
            <td>
                <select name="data_pembelian[${rowNumber}][lokasi_id]" id="batch_${uniqueId}_lokasi" class="form-control form-select batch-lokasi" required>
                    <option value="">Pilih</option>
                    ${lokasiOptions.map(lokasi => `<option value="${lokasi.id}">${lokasi.nama}</option>`).join('')}
                </select>
            </td>
            <td>
                <select name="data_pembelian[${rowNumber}][barang_id]" id="batch_${uniqueId}_barang" class="form-control form-select batch-barang" required>
                    <option value="">Pilih Jenis Barang</option>
                    ${barangOptions.map(barang => `<option value="${barang.id}" data-stok="${barang.stok}" data-satuan="${barang.satuan}">${barang.nama} (${barang.kategori})</option>`).join('')}
                </select>
            </td>
            <td>
                <input type="text" name="data_pembelian[${rowNumber}][jml_bibit_display]" id="batch_${uniqueId}_jml_bibit_display" class="form-control number-input" placeholder="0" style="text-align: right;" required oninput="formatNumberInputRow('${uniqueId}')">
                <input type="hidden" name="data_pembelian[${rowNumber}][jml_bibit]" id="batch_${uniqueId}_jml_bibit" value="0">
            </td>
            <td>
                <input type="text" name="data_pembelian[${rowNumber}][harga_satuan_display]" id="batch_${uniqueId}_harga_display" class="form-control rupiah-input" placeholder="Rp 0" style="text-align: right;" oninput="formatRupiahInputRow('${uniqueId}')">
                <input type="hidden" name="data_pembelian[${rowNumber}][harga_satuan]" id="batch_${uniqueId}_harga_satuan" value="0">
            </td>
            <td>
                <input type="text" name="data_pembelian[${rowNumber}][total_display]" id="batch_${uniqueId}_total_display" class="form-control" placeholder="Rp 0" readonly style="background-color: #f8f9fa; font-weight: 500; color: #28a745;">
                <input type="hidden" name="data_pembelian[${rowNumber}][total]" id="batch_${uniqueId}_total" value="0">
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger" onclick="removeBatchRow(this)">
                    <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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </td>
        </tr>
    `;
    $('#batchTableBody').append(row);

    // Initialize Select2 for the new row
    const newRow = $('#batchTableBody tr:last');

    if (newRow.find('.batch-lokasi').length) {
        newRow.find('.batch-lokasi').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Lokasi',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#pembelianModal')
        });
    }

    if (newRow.find('.batch-barang').length) {
        newRow.find('.batch-barang').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Jenis Barang',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#pembelianModal'),
            templateResult: function(data) {
                if (!data.id) {
                    return data.text;
                }

                const option = $(data.element);
                const stok = option.data('stok') || 0;
                const satuan = option.data('satuan') || 'KG';

                return $(
                    '<div style="display: flex; justify-content: space-between; align-items: center;">' +
                        '<div>' + data.text + '</div>' +
                        '<div class="badge" style="background: #17a2b8; color: white;">Stok: ' + formatNumber(stok) + ' ' + satuan + '</div>' +
                    '</div>'
                );
            },
            templateSelection: function(data) {
                return data.text;
            }
        });
    }

    updateRowCount();
}

function updateRowCount() {
    const count = $('#batchTableBody tr').length;
    const rowCountEl = $('#rowCount');
    rowCountEl.text(count + (count === 1 ? ' baris' : ' baris'));

    // Update grand total when row count changes
    updateGrandTotal();
}

function removeBatchRow(button) {
    const row = $(button).closest('tr');
    const pembelianId = row.data('pembelian-id');

    // Cek jika ini adalah record yang sudah ada (punya ID)
    if (pembelianId && pembelianId !== '') {
        // Konfirmasi penghapusan
        Swal.fire({
            title: 'Hapus Baris Ini?',
            html: 'Apakah Anda yakin ingin menghapus baris ini?<br><small>Baris akan dihapus dari database (soft delete).</small>',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Soft delete record dari database
                $.ajax({
                    url: '/pembelian/' + pembelianId,
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // Hapus baris dari form setelah berhasil soft delete
                        if ($('#batchTableBody tr').length > 1) {
                            row.remove();
                            updateRowCount();
                            updateGrandTotal();

                            // Update summary cards dan DataTable
                            $('#pembelianTable').DataTable().ajax.reload(null, false);
                            updateSummary();

                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: 'Baris berhasil dihapus dari database!',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire({
                                icon: 'info',
                                title: 'Info',
                                text: 'Minimal harus ada satu baris data'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: xhr.responseJSON?.message || 'Gagal menghapus baris!'
                        });
                    }
                });
            }
        });
    } else {
        // Ini adalah baris baru (belum ada di database), hapus dari form saja
        if ($('#batchTableBody tr').length > 1) {
            row.remove();
            updateRowCount();
            updateGrandTotal();
        } else {
            Swal.fire({
                icon: 'info',
                title: 'Info',
                text: 'Minimal harus ada satu baris data'
            });
        }
    }
}

function formatRupiahInputRow(uniqueId) {
    const value = $('#batch_' + uniqueId + '_harga_display').val();
    const angka = parseRupiah(value);

    // Format kembali ke Rupiah
    if (value !== '') {
        const formatted = 'Rp ' + formatRupiahInput(angka);
        $('#batch_' + uniqueId + '_harga_display').val(formatted);
    }

    // Update hidden field dan kalkulasi ulang total
    $('#batch_' + uniqueId + '_harga_satuan').val(angka);
    calculateRowTotal(uniqueId);
}

function formatNumberInputRow(uniqueId) {
    const $input = $('#batch_' + uniqueId + '_jml_bibit_display');
    const value = $input.val();

    // Format langsung dari value input (bukan dari parsed angka)
    // Ini untuk mempertahankan titik desimal yang baru diketik
    if (value !== '') {
        // Simpan posisi kursor sebelum format
        const cursorPosition = $input[0].selectionStart;

        const formatted = formatNumberInput(value);
        $input.val(formatted);

        // Hitung posisi kursor baru setelah format
        let newCursorPosition = 0;
        let hasDecimalDot = formatted.indexOf('.') !== -1;

        if (hasDecimalDot) {
            // Jika ada titik, hitung posisi berdasarkan digit desimal
            const decimalIndex = formatted.indexOf('.');
            const decimalDigits = decimalIndex >= 0 ? formatted.substring(decimalIndex + 1).length : 0;

            if (cursorPosition > decimalIndex) {
                // Kursor di bagian desimal
                newCursorPosition = decimalIndex + 1 + Math.min(decimalDigits, cursorPosition - (decimalIndex + 1));
            } else {
                // Kursor di bagian integer - hitung digit dari posisi kursor
                const integerBeforeCursor = value.substring(0, cursorPosition).replace(/,/g, '').replace(/[^\d]/g, '').length;
                const formattedInteger = formatted.split('.')[0].replace(/,/g, '');

                // Cari posisi berdasarkan jumlah digit
                let digitCount = 0;
                for (let i = 0; i < formattedInteger.length; i++) {
                    if (formattedInteger[i] !== ',') {
                        digitCount++;
                    }
                    if (digitCount === integerBeforeCursor) {
                        newCursorPosition = i + 1;
                        break;
                    }
                }
                if (newCursorPosition === 0) newCursorPosition = formatted.length;
            }
        } else {
            // Tidak ada desimal, hitung posisi berdasarkan digit integer
            const digitsBeforeCursor = value.substring(0, cursorPosition).replace(/,/g, '').replace(/[^\d]/g, '').length;
            const formattedInteger = formatted.replace(/,/g, '');

            // Cari posisi berdasarkan jumlah digit
            let digitCount = 0;
            for (let i = 0; i < formattedInteger.length; i++) {
                if (formattedInteger[i] !== ',') {
                    digitCount++;
                }
                if (digitCount === digitsBeforeCursor) {
                    newCursorPosition = i + 1;
                    break;
                }
            }
            if (newCursorPosition === 0) newCursorPosition = formatted.length;
        }

        // Set posisi kursor
        $input[0].setSelectionRange(newCursorPosition, newCursorPosition);

        // Parse untuk update hidden field
        const angka = parseNumberInput(formatted);
        $('#batch_' + uniqueId + '_jml_bibit').val(angka);
        calculateRowTotal(uniqueId);
    }
}

function calculateRowTotal(uniqueId) {
    const jmlBibit = parseFloat($('#batch_' + uniqueId + '_jml_bibit').val()) || 0;
    const harga = parseFloat($('#batch_' + uniqueId + '_harga_satuan').val()) || 0;
    const total = jmlBibit * harga;

    // Simpan nilai asli total di hidden field
    $('#batch_' + uniqueId + '_total').val(total.toFixed(2));

    // Tampilkan format Rupiah di display field
    if (total > 0) {
        $('#batch_' + uniqueId + '_total_display').val(formatRupiah(total));
    } else {
        $('#batch_' + uniqueId + '_total_display').val('Rp 0');
    }

    // Update grand total
    updateGrandTotal();
}

function updateGrandTotal() {
    let totalBenih = 0;
    let totalHarga = 0;

    $('#batchTableBody tr').each(function() {
        const jmlBibit = parseFloat($(this).find('[id$="_jml_bibit"]').val()) || 0;
        const total = parseFloat($(this).find('[id$="_total"]').val()) || 0;

        totalBenih += jmlBibit;
        totalHarga += total;
    });

    // Update grand total display
    $('#grandTotalBenih').text(formatNumber(totalBenih));
    $('#grandTotalHarga').text(formatRupiah(totalHarga));
}

function editPembelian(id) {
    console.log('editPembelian called with id:', id);

    // Stop any ongoing polling
    stopRealtimePolling();

    $.ajax({
        url: '/pembelian/' + id,
        method: 'GET',
        success: function(response) {
            console.log('Pembelian data received:', response);
            const pembelian = response.data;

            // Load all records with the same no_bukti
            $.ajax({
                url: '/pembelian/batch/' + pembelian.no_bukti,
                method: 'GET',
                success: function(batchResponse) {
                    console.log('Batch data received:', batchResponse);
                    const batchData = batchResponse.data;

                    $('#pembelianModalTitle').text('Edit Pembelian - ' + pembelian.no_bukti);
                    $('#pembelianMethod').val('PUT');
                    $('#pembelian_id').val(id);
                    $('#pembelianForm').attr('action', '/pembelian/batch/' + pembelian.no_bukti);

                    // Set master field values
                    $('#no_bukti').val(pembelian.no_bukti || '');
                    $('#no_bukti_help').html('✅ No Bukti: <strong>' + pembelian.no_bukti + '</strong> (Read-only)');

                    // Set field values - tanggal dan supplier bisa diedit
                    // Gunakan tanggal_pembelian atau tanggal_format sebagai fallback
                    const tanggalValue = pembelian.tanggal_pembelian || pembelian.tanggal_format || '';
                    console.log('Setting tanggal_pembelian to:', tanggalValue);
                    $('#tanggal_pembelian').val(convertDateForInput(tanggalValue)).prop('disabled', false);
                    $('#supplier_id').val(pembelian.supplier_id || '').trigger('change.select2').prop('disabled', false);
                    $('#keterangan').val(pembelian.keterangan || '');

                    // Clear batch table and populate with existing data
                    $('#batchTableBody').empty();

                    if (batchData && batchData.length > 0) {
                        batchData.forEach(function(item, index) {
                            addBatchRowWithData(item, index + 1);
                        });
                    } else {
                        // If no batch data, add single row with current data
                        addBatchRowWithData(pembelian, 1);
                    }

                    // Show modal using Bootstrap 5 API
                    const modal = new bootstrap.Modal(document.getElementById('pembelianModal'));
                    modal.show();
                    console.log('Modal opened for edit');
                },
                error: function(xhr) {
                    console.error('Error fetching batch data:', xhr);
                    // If batch fetch fails, show single record in form
                    $('#pembelianModalTitle').text('Edit Pembelian');
                    $('#pembelianMethod').val('PUT');
                    $('#pembelian_id').val(id);
                    $('#pembelianForm').attr('action', '/pembelian/' + id);

                    $('#no_bukti').val(pembelian.no_bukti || '');
                    $('#no_bukti_help').html('✅ No Bukti: <strong>' + pembelian.no_bukti + '</strong> (Read-only)');
                    // Gunakan tanggal_pembelian atau tanggal_format sebagai fallback
                    const tanggalValue = pembelian.tanggal_pembelian || pembelian.tanggal_format || '';
                    console.log('Setting tanggal_pembelian to:', tanggalValue);
                    $('#tanggal_pembelian').val(convertDateForInput(tanggalValue)).prop('disabled', false);
                    $('#supplier_id').val(pembelian.supplier_id || '').trigger('change.select2').prop('disabled', false);
                    $('#keterangan').val(pembelian.keterangan || '');

                    $('#batchTableBody').empty();
                    addBatchRowWithData(pembelian, 1);

                    const modal = new bootstrap.Modal(document.getElementById('pembelianModal'));
                    modal.show();
                }
            });
        },
        error: function(xhr) {
            console.error('Error fetching pembelian:', xhr);
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data pembelian!'
            });
        }
    });
}

function addBatchRowWithData(data, rowNumber) {
    const uniqueId = Date.now() + '_' + rowNumber + '_' + Math.random().toString(36).substr(2, 9);

    const row = `
        <tr class="batch-row" data-pembelian-id="${data.id || ''}">
            <td>
                <input type="hidden" name="data_pembelian[${rowNumber}][id]" value="${data.id || ''}">
                <select name="data_pembelian[${rowNumber}][lokasi_id]" id="batch_${uniqueId}_lokasi" class="form-control form-select batch-lokasi" required>
                    <option value="">Pilih</option>
                    ${lokasiOptions.map(lokasi => `<option value="${lokasi.id}" ${data.lokasi_id == lokasi.id ? 'selected' : ''}>${lokasi.nama}</option>`).join('')}
                </select>
            </td>
            <td>
                <select name="data_pembelian[${rowNumber}][barang_id]" id="batch_${uniqueId}_barang" class="form-control form-select batch-barang" required>
                    <option value="">Pilih Jenis Barang</option>
                    ${barangOptions.map(barang => `<option value="${barang.id}" data-stok="${barang.stok}" data-satuan="${barang.satuan}" ${data.barang_id == barang.id ? 'selected' : ''}>${barang.nama} (${barang.kategori})</option>`).join('')}
                </select>
            </td>
            <td>
                <input type="text" name="data_pembelian[${rowNumber}][jml_bibit_display]" id="batch_${uniqueId}_jml_bibit_display" class="form-control number-input" placeholder="0" style="text-align: right;" required oninput="formatNumberInputRow('${uniqueId}')" value="${data.qty > 0 ? formatNumber(data.qty) : '0'}">
                <input type="hidden" name="data_pembelian[${rowNumber}][jml_bibit]" id="batch_${uniqueId}_jml_bibit" value="${data.qty || 0}">
            </td>
            <td>
                <input type="text" name="data_pembelian[${rowNumber}][harga_satuan_display]" id="batch_${uniqueId}_harga_display" class="form-control rupiah-input" placeholder="Rp 0" style="text-align: right;" oninput="formatRupiahInputRow('${uniqueId}')" value="${data.harga_satuan > 0 ? formatRupiah(data.harga_satuan) : 'Rp 0'}">
                <input type="hidden" name="data_pembelian[${rowNumber}][harga_satuan]" id="batch_${uniqueId}_harga_satuan" value="${data.harga_satuan || 0}">
            </td>
            <td>
                <input type="text" name="data_pembelian[${rowNumber}][total_display]" id="batch_${uniqueId}_total_display" class="form-control" placeholder="Rp 0" readonly style="background-color: #f8f9fa; font-weight: 500; color: #28a745;" value="${data.total > 0 ? formatRupiah(data.total) : 'Rp 0'}">
                <input type="hidden" name="data_pembelian[${rowNumber}][total]" id="batch_${uniqueId}_total" value="${data.total || 0}">
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger" onclick="removeBatchRow(this)">
                    <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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </td>
        </tr>
    `;
    $('#batchTableBody').append(row);

    // Initialize Select2 for the new row
    const newRow = $('#batchTableBody tr:last');

    if (newRow.find('.batch-lokasi').length) {
        newRow.find('.batch-lokasi').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Lokasi',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#pembelianModal')
        });
    }

    if (newRow.find('.batch-barang').length) {
        newRow.find('.batch-barang').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Jenis Barang',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#pembelianModal'),
            templateResult: function(data) {
                if (!data.id) {
                    return data.text;
                }

                const option = $(data.element);
                const stok = option.data('stok') || 0;
                const satuan = option.data('satuan') || 'KG';

                return $(
                    '<div style="display: flex; justify-content: space-between; align-items: center;">' +
                        '<div>' + data.text + '</div>' +
                        '<div class="badge" style="background: #17a2b8; color: white;">Stok: ' + formatNumber(stok) + ' ' + satuan + '</div>' +
                    '</div>'
                );
            },
            templateSelection: function(data) {
                return data.text;
            }
        });
    }

    updateRowCount();
    updateGrandTotal();
}

function deletePembelian(id) {
    console.log('deletePembelian called with id:', id);

    // Fetch the pembelian data to check if it's part of a batch
    $.ajax({
        url: '/pembelian/' + id,
        method: 'GET',
        success: function(response) {
            const pembelian = response.data;
            const noBukti = pembelian.no_bukti;

            // Check if there are other records with the same no_bukti
            $.ajax({
                url: '/pembelian/check-no-bukti-usage/' + noBukti + '/' + id,
                method: 'GET',
                success: function(checkResponse) {
                    let confirmText = 'Apakah Anda yakin ingin menghapus data pembelian ini?';

                    if (checkResponse.count > 0) {
                        confirmText = `Data ini bagian dari batch ${noBukti} dengan ${checkResponse.count} record lainnya. Hapus hanya record ini atau seluruh batch?`;

                        Swal.fire({
                            title: 'Hapus Data Pembelian?',
                            text: confirmText,
                            icon: 'warning',
                            showCancelButton: true,
                            showDenyButton: true,
                            confirmButtonColor: '#d33',
                            denyButtonColor: '#3085d6',
                            cancelButtonColor: '#6c757d',
                            confirmButtonText: 'Hapus Semua Batch',
                            denyButtonText: 'Hapus Ini Saja',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Delete all records with the same no_bukti
                                deleteAllBatch(noBukti);
                            } else if (result.isDenied) {
                                // Delete only this record
                                deleteSingleRecord(id);
                            }
                        });
                    } else {
                        // Single record, show simple confirmation
                        Swal.fire({
                            title: 'Hapus Data Pembelian?',
                            text: confirmText,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Ya, hapus!',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                deleteSingleRecord(id);
                            }
                        });
                    }
                },
                error: function(xhr) {
                    // If checking fails, proceed with simple delete
                    deleteSingleRecord(id);
                }
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data pembelian!'
            });
        }
    });
}

function deleteSingleRecord(id) {
    $.ajax({
        url: '/pembelian/' + id,
        method: 'DELETE',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#pembelianTable').DataTable().ajax.reload(null, false);
            updateSummary();
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: 'Pembelian benur berhasil dihapus!',
                timer: 2000,
                showConfirmButton: false
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: xhr.responseJSON?.message || 'Gagal menghapus pembelian benur!'
            });
        }
    });
}

function deleteAllBatch(noBukti) {
    $.ajax({
        url: '/pembelian/batch/' + noBukti,
        method: 'DELETE',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#pembelianTable').DataTable().ajax.reload(null, false);
            updateSummary();
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: 'Seluruh batch pembelian benur berhasil dihapus!',
                timer: 2000,
                showConfirmButton: false
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: xhr.responseJSON?.message || 'Gagal menghapus batch pembelian benur!'
            });
        }
    });
}

function resetPembelianForm() {
    console.log('resetPembelianForm called');

    // Reset form elements
    $('#pembelianForm')[0].reset();
    $('#pembelianModalTitle').text('Pembelian Baru');
    $('#pembelianMethod').val('POST');
    $('#pembelian_id').val('');
    $('#pembelianForm').attr('action', '{{ route('pembelian.store.batch') }}');

    // Stop polling
    stopRealtimePolling();
    lastKnownSequence = null;
    isSubmitting = false;

    // Reset Select2 properly
    $('#supplier_id').val(null).trigger('change');
    $('#supplier_id').trigger('change.select2');

    // Enable master fields that were disabled in edit mode
    $('#tanggal_pembelian').prop('disabled', false);
    $('#supplier_id').prop('disabled', false);

    // Clear batch table and add one empty row
    $('#batchTableBody').empty();
    addBatchRow();

    // Reset no_bukti - clear immediately
    $('#no_bukti').val('');
    $('#no_bukti_help').text('Pilih tanggal untuk generate nomor bukti otomatis');

    // Set tanggal ke hari ini dan generate preview (tanpa delay)
    const today = '{{ date('Y-m-d') }}';
    $('#tanggal_pembelian').val(today);
    console.log('Setting tanggal to:', today);

    // Generate no_bukti preview untuk hari ini (immediate call)
    console.log('Calling generateNoBuktiPreview...');
    generateNoBuktiPreview(today);

    // Reset grand total
    $('#grandTotalBenih').text('0');
    $('#grandTotalHarga').text('Rp 0');

    // Reset tombol submit
    $('#submitBtn').prop('disabled', false);
    $('#submitBtnText').removeClass('d-none').css('display', 'inline');
    $('#submitBtnLoading').addClass('d-none').css('display', 'none');
}

// Fungsi untuk generate preview no_bukti
function generateNoBuktiPreview(tanggal) {
    console.log('generateNoBuktiPreview called with tanggal:', tanggal);

    if (!tanggal) {
        $('#no_bukti').val('');
        $('#no_bukti_help').text('Pilih tanggal untuk generate nomor bukti otomatis');
        return;
    }

    // Parse tanggal dari format yyyy-mm-dd (HTML5 date input)
    const dateParts = tanggal.split('-');
    const tanggalObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);

    if (isNaN(tanggalObj.getTime())) {
        $('#no_bukti_help').html('❌ Format tanggal tidak valid');
        return;
    }

    // Generate tanggal part (YYMMDD)
    const yy = tanggalObj.getFullYear().toString().slice(-2);
    const mm = String(tanggalObj.getMonth() + 1).padStart(2, '0');
    const dd = String(tanggalObj.getDate()).padStart(2, '0');
    const tanggalPart = yy + mm + dd;

    // Tampilkan preview dengan nomor urut sementara
    $('#no_bukti').val('LPB' + tanggalPart + 'XXX');
    $('#no_bukti_help').html('⏳ Loading...');

    // Ambil nomor urut terakhir untuk tanggal ini dari database
    $.ajax({
        url: '/pembelian/get-last-sequence/' + tanggal,
        method: 'GET',
        success: function(response) {
            console.log('getLastSequence response:', response);

            if (response.error) {
                $('#no_bukti_help').html('❌ ' + response.error);
                return;
            }

            const nextSequence = response.next_sequence;
            const noBuktiPreview = 'LPB' + tanggalPart + String(nextSequence).padStart(3, '0');

            lastKnownSequence = {
                next_sequence: nextSequence,
                no_bukti: noBuktiPreview,
                timestamp: response.timestamp
            };

            $('#no_bukti').val(noBuktiPreview);
            $('#no_bukti_help').html('✅ No Bukti: <strong>' + noBuktiPreview + '</strong> <small style="color: #6c757d;">(Real-time)</small>');

            // Start polling untuk update real-time
            startRealtimePolling(tanggal);
        },
        error: function(xhr) {
            console.error('Error getting last sequence:', xhr);
            // Jika error, tampilkan pesan error
            const errorMsg = xhr.responseJSON?.error || 'Gagal mengambil nomor urut';
            $('#no_bukti_help').html('❌ ' + errorMsg);
        }
    });
}

// Fungsi untuk polling real-time setiap detik
function startRealtimePolling(tanggal) {
    // Stop polling yang ada sebelumnya
    if (pollingInterval) {
        clearInterval(pollingInterval);
    }

    // Polling setiap 1 detik
    pollingInterval = setInterval(function() {
        if (!tanggal || isSubmitting) {
            return;
        }

        $.ajax({
            url: '/pembelian/get-last-sequence/' + tanggal,
            method: 'GET',
            success: function(response) {
                if (response.error) {
                    console.log('Polling error:', response.error);
                    return;
                }

                const currentSequence = response.next_sequence;

                // Parse tanggal untuk generate no_bukti
                const dateParts = tanggal.split('-');
                const dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
                const yy = dateObj.getFullYear().toString().slice(-2);
                const mm = String(dateObj.getMonth() + 1).padStart(2, '0');
                const dd = String(dateObj.getDate()).padStart(2, '0');
                const tanggalPart = yy + mm + dd;
                const noBuktiPreview = 'LPB' + tanggalPart + String(currentSequence).padStart(3, '0');

                // Update tampilan jika ada perubahan
                if (!lastKnownSequence || currentSequence !== lastKnownSequence.next_sequence) {
                    $('#no_bukti').val(noBuktiPreview);

                    // Tampilkan warning jika nomor urut berubah
                    if (lastKnownSequence && currentSequence > lastKnownSequence.next_sequence) {
                        $('#no_bukti_help').html('⚠️ Nomor urut berubah! <strong>' + noBuktiPreview + '</strong> <small style="color: #dc3545;">(Update baru)</small>');
                    } else {
                        $('#no_bukti_help').html('✅ No Bukti: <strong>' + noBuktiPreview + '</strong> <small style="color: #6c757d;">(Real-time)</small>');
                    }

                    lastKnownSequence = {
                        next_sequence: currentSequence,
                        no_bukti: noBuktiPreview,
                        timestamp: response.timestamp
                    };
                }
            },
            error: function(xhr) {
                const errorMsg = xhr.responseJSON?.error || 'Polling error';
                console.log('Polling error:', errorMsg);
            }
        });
    }, 1000);
}

// Fungsi untuk stop polling
function stopRealtimePolling() {
    if (pollingInterval) {
        clearInterval(pollingInterval);
        pollingInterval = null;
    }
}

$(document).ready(function() {
    console.log('Document ready! Initializing...');

    // Initialize Select2 for supplier
    $('#supplier_id').select2({
        theme: 'bootstrap4',
        placeholder: 'Pilih Supplier',
        allowClear: true,
        width: '100%',
        dropdownParent: $('#pembelianModal')
    });

    // Initialize batch table with one row
    addBatchRow();

    // Initialize Select2 for the first batch row
    initSelect2ForBatchRows();

    // Initialize grand total
    updateGrandTotal();

    // Auto-generate no_bukti preview saat tanggal berubah
    $('#tanggal_pembelian').on('change', function() {
        const tanggal = $(this).val();
        generateNoBuktiPreview(tanggal);
    });

    pembelianTable = $('#pembelianTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        scrollX: true,
        dom: 'Bfrtip',
        buttons: [
            'copy',
            'csv',
            'excel',
            'pdf',
            'print'
        ],
        ajax: {
            url: '{{ route("pembelian.data.grouped") }}',
            type: 'GET',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
                // Ensure search parameters are properly sent
                if (d.search && d.search.value) {
                    d.search = d.search;
                }
            },
            error: function(xhr, error, thrown) {
                console.error('DataTable error:', error, thrown);
                console.error('Response:', xhr.responseText);
            }
        },
        columns: [
            { data: 'no_bukti', name: 'no_bukti', searchable: true },
            { data: 'tanggal_format', name: 'tanggal_pembelian', searchable: false },
            { data: 'supplier_nama', name: 'supplier_id', searchable: true },
            { data: 'total_qty_format', name: 'total_qty', searchable: false },
            { data: 'total_value_format', name: 'total_value', searchable: false },
            { data: 'item_info', name: 'item_info', searchable: false, orderable: false },
            { data: 'pembuat', name: 'created_by', searchable: true },
            { data: 'hutang_status', orderable: false, searchable: false },
            { data: 'action', orderable: false, searchable: false }
        ],
        order: [[0, 'desc']],
        language: {
            sEmptyTable: "Tidak ada data tersedia",
            sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
            sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
            sInfoFiltered: "(difilter dari _MAX_ total data)",
            sInfoPostFix: "",
            sInfoThousands: ",",
            sLengthMenu: "Tampilkan _MENU_ data",
            sLoadingRecords: "Memuat...",
            sProcessing: "Memproses...",
            sSearch: "Cari:",
            sSearchPlaceholder: "Cari berdasarkan No. Bukti atau Supplier...",
            sZeroRecords: "Tidak ditemukan data yang cocok",
            oPaginate: {
                sFirst: "Pertama",
                sLast: "Terakhir",
                sNext: "Selanjutnya",
                sPrevious: "Sebelumnya"
            },
            oAria: {
                sSortAscending: ": aktifkan untuk mengurutkan kolom secara ascending",
                sSortDescending: ": aktifkan untuk mengurutkan kolom secara descending"
            }
        }
    });

    $('#pembelianForm').on('submit', function(e) {
        e.preventDefault();
        console.log('Form submit triggered!');

        // Cegah double submit
        if (isSubmitting) {
            console.log('Already submitting, skipping...');
            return;
        }

        // Validasi form
        const supplierVal = $('#supplier_id').val();
        if (!supplierVal || supplierVal === '') {
            Swal.fire({
                icon: 'error',
                title: 'Validasi Error',
                text: 'Supplier harus dipilih!'
            });
            return;
        }

        // Validasi setiap baris
        let hasError = false;
        let lokasiList = []; // Track lokasi_id and row numbers
        let lokasiNames = {}; // Map lokasi_id to name for better error message

        // First pass: collect all lokasi values and names
        $('#batchTableBody tr').each(function(rowIdx, row) {
            const $lokasiSelect = $(row).find('.batch-lokasi');
            const lokasiId = $lokasiSelect.val();
            const lokasiName = $lokasiSelect.find('option:selected').text() || '';

            if (lokasiId && lokasiId !== '') {
                const lokasiIdStr = String(lokasiId);
                if (!lokasiList[lokasiIdStr]) {
                    lokasiList[lokasiIdStr] = [];
                }
                lokasiList[lokasiIdStr].push(rowIdx + 1);
                lokasiNames[lokasiIdStr] = lokasiName;
            }
        });

        // Check for duplicates first
        // let duplicateFound = false;
        // for (const [lokasiId, rows] of Object.entries(lokasiList)) {
        //     if (rows.length > 1) {
        //         const lokasiName = lokasiNames[lokasiId];
        //         Swal.fire({
        //             icon: 'error',
        //             title: 'Validasi Error',
        //             text: `Lokasi "${lokasiName}" dipilih di baris ${rows.join(', ')}. Lokasi tidak boleh dipilih lebih dari sekali!`
        //         });
        //         hasError = true;
        //         duplicateFound = true;
        //         break; // Exit the for loop
        //     }
        // }

        // if (duplicateFound) {
        //     return; // Exit form submission
        // }l

        // Second pass: validate each row
        let rowValidationFailed = false;
        $('#batchTableBody tr').each(function(rowIdx, row) {
            if (rowValidationFailed) return false; // Skip if error already found

            const lokasiId = $(row).find('.batch-lokasi').val();
            const barangId = $(row).find('.batch-barang').val();
            const jmlBibit = parseInt($(row).find('[id$="_jml_bibit"]').val()) || 0;

            if (!lokasiId || lokasiId === '') {
                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Error',
                    text: 'Lokasi harus dipilih di baris ' + (rowIdx + 1)
                });
                hasError = true;
                rowValidationFailed = true;
                return false;
            }

            if (!barangId || barangId === '') {
                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Error',
                    text: 'Jenis Barang harus dipilih di baris ' + (rowIdx + 1)
                });
                hasError = true;
                rowValidationFailed = true;
                return false;
            }

            if (jmlBibit < 0.01) {
                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Error',
                    text: 'QTY minimal 0.01 di baris ' + (rowIdx + 1)
                });
                hasError = true;
                rowValidationFailed = true;
                return false;
            }
        });

        if (hasError) {
            return;
        }

        // Prepare form data - temporarily enable disabled fields for submission
        const disabledFields = $('#pembelianForm').find(':disabled').prop('disabled', false);
        const formData = $(this).serialize();
        disabledFields.prop('disabled', true);
        const url = $(this).attr('action');
        const method = $('#pembelianMethod').val(); // 'POST' or 'PUT'

        submitFormData(formData, url, method);
    });

    function submitFormData(formData, url, method) {
        console.log('=== SUBMIT FORM DATA CALLED ===');
        console.log('URL:', url);
        console.log('Method:', method);
        console.log('FormData:', formData);

        // Set flag submitting
        isSubmitting = true;

        // Disable tombol dan tampilkan loading
        const submitBtn = $('#submitBtn');
        const submitBtnText = $('#submitBtnText');
        const submitBtnLoading = $('#submitBtnLoading');

        submitBtn.prop('disabled', true);
        submitBtnText.addClass('d-none').css('display', 'none');
        submitBtnLoading.removeClass('d-none').css('display', 'inline-block');

        $.ajax({
            url: url,
            method: method, // Use actual method (POST or PUT)
            data: formData,
            beforeSend: function(xhr) {
                xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
            },
            success: function(response) {
                console.log('=== SUCCESS ===');
                console.log('Response:', response);

                // Re-enable tombol
                submitBtn.prop('disabled', false);
                submitBtnText.removeClass('d-none').css('display', 'inline');
                submitBtnLoading.addClass('d-none').css('display', 'none');

                isSubmitting = false;

                // Update stok barang di Select2 dropdown
                const isEdit = method === 'PUT';
                updateBarangStockOptions(formData, isEdit);

                // Reload DataTable
                $('#pembelianTable').DataTable().ajax.reload(null, false);

                // Update summary cards
                updateSummary();

                // Tampilkan SweetAlert
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: isEdit
                        ? `Pembelian benur berhasil diperbarui! ${response.records_count ? response.records_count + ' records' : ''}`
                        : `Pembelian benur berhasil disimpan dengan No. Bukti: ${response.no_bukti}!`,
                    timer: 2000,
                    showConfirmButton: false,
                    backdrop: false,
                    customClass: {
                        popup: 'swal2-popup-on-top'
                    }
                }).then(function() {
                    // Tutup modal dan reset form
                    const modalEl = document.getElementById('pembelianModal');
                    const modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) {
                        modal.hide();
                    }
                    resetPembelianForm();
                });
            },
            error: function(xhr) {
                console.error('Error:', xhr);
                const errorMsg = xhr.responseJSON?.message || (xhr.responseJSON?.errors ? Object.values(xhr.responseJSON.errors).join(', ') : 'Terjadi kesalahan!');
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: errorMsg
                });

                // Re-enable tombol
                submitBtn.prop('disabled', false);
                submitBtnText.removeClass('d-none').css('display', 'inline');
                submitBtnLoading.addClass('d-none').css('display', 'none');

                isSubmitting = false;
            }
        });
    }

    // Reset form when modal is shown (for new entry)
    $('#pembelianModal').on('show.bs.modal', function(e) {
        const relatedTarget = e.relatedTarget;

        // Jika modal dibuka dari tombol "Pembelian Baru" (bukan dari fungsi editPembelian)
        if (relatedTarget && $(relatedTarget).attr('data-bs-toggle') === 'modal') {
            // Ini tombol "Pembelian Baru", reset form
            console.log('Opening modal for new entry - resetting form');
            resetPembelianForm();
        } else {
            // Ini dari fungsi editPembelian, jangan reset form
            console.log('Opening modal for edit');
        }
    });

    // Reset form when modal is closed
    $('#pembelianModal').on('hidden.bs.modal', function() {
        stopRealtimePolling();
        resetPembelianForm();
    });
});

// Helper function to initialize Select2 for batch rows
function initSelect2ForBatchRows() {
    $('#batchTableBody').find('.batch-lokasi').each(function() {
        $(this).select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Lokasi',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#pembelianModal')
        });
    });

    $('#batchTableBody').find('.batch-barang').each(function() {
        $(this).select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Jenis Barang',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#pembelianModal'),
            templateResult: function(data) {
                if (!data.id) {
                    return data.text;
                }

                const option = $(data.element);
                const stok = option.data('stok') || 0;
                const satuan = option.data('satuan') || 'KG';

                return $(
                    '<div style="display: flex; justify-content: space-between; align-items: center;">' +
                        '<div>' + data.text + '</div>' +
                        '<div class="badge" style="background: #17a2b8; color: white;">Stok: ' + formatNumber(stok) + ' ' + satuan + '</div>' +
                    '</div>'
                );
            },
            templateSelection: function(data) {
                return data.text;
            }
        });
    });
}
</script>
@endpush
@endsection