@extends('layouts.apex')

@section('title', 'Panen')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Panen</h1>
            <p class="page-header-subtitle">Pencatatan hasil panen udang</p>
        </div>
        <div style="display: flex; gap: 0.5rem;">
            <button type="button" class="btn btn-warning" onclick="openEditGroupedModal()">
                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                Edit Panen
            </button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#panenModal">
                <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>
                Panen Baru
            </button>
        </div>
    </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 Transaksi</div>
            <div class="stat-value" id="summaryTotalTrans">{{ $summary->total_transactions ?? 0 }}</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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                </svg>
            </div>
            <div class="stat-label">Total Berat</div>
            <div class="stat-value" id="summaryTotalQty">{{ number_format($summary->total_qty ?? 0, 1) }} KG</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon warning">
                <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div class="stat-label">Total Nilai</div>
            <div class="stat-value" id="summaryTotalValue">Rp {{ number_format($summary->total_value ?? 0, 0) }}</div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Riwayat Panen</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="panenTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>No. Bukti</th>
                            <th>Tanggal</th>
                            <th>Customer</th>
                            <th>Total Qty</th>
                            <th>Total Nilai</th>
                            <th>Item Info</th>
                            <th>Status Piutang</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Panen Modal -->
<div id="panenModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width: 1200px;">
        <div class="modal-content">
            <form id="panenForm" action="{{ route('panen.store') }}" method="POST" novalidate>
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="panenModalTitle">Panen 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-3">
                            <div class="form-group">
                                <label class="form-label">Nomor Bukti</label>
                                <input type="text" 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-3">
                            <div class="form-group">
                                <label class="form-label">Tanggal *</label>
                                <input type="date" name="tanggal" id="tanggal" class="form-control" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                        <div class="col-md-3" style="display: none;">
                            <div class="form-group">
                                <label class="form-label">Jam *</label>
                                <input type="time" name="jam" id="jam" class="form-control" value="{{ date('H:i') }}" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Customer *</label>
                                <select name="customer" id="customer" class="form-control form-select select2-customer" required>
                                    <option value="">Pilih Customer</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->nama }}">{{ $customer->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Keterangan</label>
                                <textarea name="keterangan" id="keterangan" class="form-control" rows="1" placeholder="Catatan tambahan..."></textarea>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Total Nilai</label>
                                <div id="totalNilaiDisplay" class="form-control-plaintext" style="padding-top: 0.5rem; font-weight: bold; color: #28a745;">Rp 0</div>
                            </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;">Detail Panen per Kolam</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="addPanenRow()">
                                <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="panenTableForm">
                                <thead>
                                    <tr>
                                        <th style="width: 150px;">Kolam</th>
                                        <th style="width: 100px;">Grade</th>
                                        <th style="width: 120px;">Jenis</th>
                                        <th style="width: 100px;">Size *</th>
                                        <th style="width: 120px;">Qty</th>
                                        <th style="width: 150px;">Harga</th>
                                        <th style="width: 150px;">Subtotal</th>
                                        <th style="width: 50px;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="panenTableBody">
                                    <!-- Rows will be added dynamically -->
                                </tbody>
                                <tfoot>
                                    <tr style="background-color: #f8f9fa; font-weight: bold;">
                                        <td colspan="4" style="text-align: right;">Total:</td>
                                        <td id="grandTotalQty" style="text-align: center; color: #007bff; font-size: 1.1rem;">0</td>
                                        <td></td>
                                        <td id="grandTotal" style="text-align: center; color: #28a745; font-size: 1.1rem;">Rp 0</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" id="masterHargaBtn" onclick="openMasterHargaModal()" style="display: none;">
                        <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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Master Harga
                    </button>
                    <button type="button" class="btn btn-warning" id="autoCalculateBtn" onclick="openAutoCalculateModal()" style="display: none;">
                        <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="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>
                        Auto Calculate Harga
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="submitBtn" formnovalidate>
                        <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 Data Panen
                        </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>

<!-- Auto Calculate Harga Modal -->
<div id="autoCalculateModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width: 1400px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle; margin-right: 0.5rem;">
                        <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>
                    Auto Calculate Harga dari API
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    Harga akan dihitung otomatis dari API menggunakan interpolasi berdasarkan size. Anda bisa mengedit harga sebelum menerapkan ke form.
                </div>

                <div style="overflow-x: auto;">
                    <table class="table table-bordered table-striped" id="autoCalculateTable">
                        <thead>
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th style="width: 120px;">Kolam</th>
                                <th style="width: 100px;">Grade</th>
                                <th style="width: 100px;">Jenis</th>
                                <th style="width: 100px;">Size</th>
                                <th style="width: 120px;">Qty</th>
                                <th style="width: 150px;">Harga (Auto)</th>
                                <th style="width: 150px;">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody id="autoCalculateTableBody">
                            <!-- Rows will be populated dynamically -->
                        </tbody>
                        <tfoot>
                            <tr style="background-color: #f8f9fa; font-weight: bold;">
                                <td colspan="7" style="text-align: right;">Total:</td>
                                <td id="autoCalculateGrandTotal">Rp 0</td>
                            </tr>
                        </tfoot>
                    </table>
                </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="applyAutoCalculatedHarga()">
                    <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>
                    Terapkan Harga
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Input Harga Modal -->
<div id="inputHargaModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Input Harga Manual per Ukuran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    Masukkan harga manual untuk setiap ukuran. Harga ini akan disimpan ke master harga (THARGA).
                </div>

                <form id="inputHargaForm">
                    <input type="hidden" id="hargaNoBukti" name="no_bukti">

                    <div id="hargaListContainer">
                        <!-- Harga items will be loaded here -->
                    </div>

                    <div class="form-group" style="margin-top: 1rem;">
                        <button type="button" class="btn btn-sm btn-primary" onclick="addHargaRow()">
                            <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 Ukuran
                        </button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Master Harga Modal -->
<div id="masterHargaModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width: 1400px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle; margin-right: 0.5rem;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Master Harga (THARGA)
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    Daftar harga master berdasarkan ukuran. Harga ini akan digunakan sebagai referensi saat input panen.
                </div>

                <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                    <div style="flex: 1;">
                        <input type="text" id="searchHarga" class="form-control" placeholder="Cari berdasarkan ukuran..." onkeyup="filterMasterHarga()">
                    </div>
                    <button type="button" class="btn btn-primary" onclick="addMasterHargaRow()">
                        <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 Harga
                    </button>
                    <button type="button" class="btn btn-success" onclick="saveAllMasterHarga()">
                        <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="M5 13l4 4L19 7"/>
                        </svg>
                        Simpan Semua
                    </button>
                </div>

                <div style="overflow-x: auto;">
                    <table class="table table-bordered table-striped" id="masterHargaTable">
                        <thead>
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th style="width: 120px;">Ukuran (Size)</th>
                                <th style="width: 200px;">Harga (Rp)</th>
                                <th style="width: 150px;">Tanggal Update</th>
                                <th style="width: 80px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="masterHargaTableBody">
                            <!-- Data will be loaded here -->
                        </tbody>
                    </table>
                </div>

                <div id="masterHargaPagination" style="margin-top: 1rem; display: flex; justify-content: center; gap: 0.5rem;">
                    <!-- Pagination buttons will be added here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Grouped Panen Modal -->
<div id="editGroupedModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width: 1400px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle; margin-right: 0.5rem;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Edit Data Panen (Grouped)
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Search -->
                <div style="margin-bottom: 1rem;">
                    <input type="text" id="searchGroupedPanen" class="form-control" placeholder="Cari No. Bukti, Customer..." onkeyup="filterGroupedPanen()">
                </div>

                <!-- Grouped Table -->
                <div style="overflow-x: auto;">
                    <table class="table table-bordered table-striped" id="groupedPanenTable">
                        <thead>
                            <tr>
                                <th style="width: 150px;">No. Bukti</th>
                                <th style="width: 120px;">Tanggal</th>
                                <th style="width: 200px;">Customer</th>
                                <th style="width: 120px;">Total Qty</th>
                                <th style="width: 150px;">Total Nilai</th>
                                <th style="width: 80px;">Jml Item</th>
                                <th style="width: 120px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="groupedPanenTableBody">
                            <!-- Data will be loaded here -->
                        </tbody>
                    </table>
                </div>

                <div id="groupedPanenPagination" style="margin-top: 1rem; display: flex; justify-content: center; gap: 0.5rem;">
                    <!-- Pagination buttons will be added here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<style>
.swal2-popup-on-top {
    z-index: 99999 !important;
}
.swal2-backdrop-show {
    z-index: 99998 !important;
}
</style>
<script>
// Cache for prices to avoid repeated API calls
const priceCache = {};

// Global variables
let panenTable;
let globalRowCounter = 0;
let lastKnownSequence = null;
let isSubmitting = false;

// Data from server
const kolamOptions = @json($kolams->map(function($kolam) {
    return ['id' => $kolam->id, 'nama' => $kolam->nama, 'id_int' => (int)$kolam->id];
})->toArray());

const customerOptions = @json($customers->map(function($customer) {
    return ['id' => $customer->id, 'nama' => $customer->nama];
})->toArray());

// Helper function to format numbers (Indonesian format - for display only)
function formatNumberID(number, decimals = 2) {
    if (number === null || number === undefined || number === '' || isNaN(number)) {
        return '0';
    }
    return new Intl.NumberFormat('id-ID', {
        minimumFractionDigits: decimals,
        maximumFractionDigits: decimals
    }).format(number);
}

// Format number input - English format (period for decimal, comma for thousands)
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;
}

// Format number with 2 decimals - English format (period for decimal, comma for thousands)
function formatNumberInputFixed(angka, decimals = 2) {
    if (angka === '' || angka === null || angka === undefined || isNaN(angka)) {
        return '0';
    }

    var num = parseFloat(angka);
    if (isNaN(num)) {
        return '0';
    }

    // Format with Intl.NumberFormat for English style
    return new Intl.NumberFormat('en-US', {
        minimumFractionDigits: decimals,
        maximumFractionDigits: decimals
    }).format(num);
}

// Parse number input back to 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;
}

// Keep old function for backward compatibility (alias)
function formatNumber(number, decimals = 2) {
    return formatNumberID(number, decimals);
}

// Keep old function for backward compatibility (alias)
function parseFormattedNumber(formattedStr) {
    return parseNumberInput(formattedStr);
}

// Get harga based on size from tharga table via API
async function getHargaBySize(size, noBukti = null) {
    const sizeNum = parseFloat(size);
    if (isNaN(sizeNum)) return { harga: 0, source: null, method: null };

    // Check cache first (only if no_bukti is provided, as prices are specific to transaction)
    const cacheKey = noBukti ? `${noBukti}_${sizeNum}` : sizeNum;
    if (priceCache[cacheKey] !== undefined) {
        return priceCache[cacheKey];
    }

    try {
        let url = `/panen/price-by-size?size=${sizeNum}`;
        if (noBukti) {
            url += `&no_bukti=${noBukti}`;
        }

        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
            }
        });

        if (!response.ok) {
            console.warn(`Failed to fetch price for size ${sizeNum}:`, response.statusText);
            return { harga: 0, source: null, method: null };
        }

        const data = await response.json();

        if (data.success && data.data) {
            const result = {
                harga: data.data.harga || 0,
                source: data.data.source || null,
                method: data.data.method || null
            };
            // Cache the result
            priceCache[cacheKey] = result;
            return result;
        } else {
            console.warn(`No price found for size ${sizeNum}`);
            return { harga: 0, source: null, method: null };
        }
    } catch (error) {
        console.error(`Error fetching price for size ${sizeNum}:`, error);
        return { harga: 0, source: null, method: null };
    }
}

// Add panen row
function addPanenRow() {
    globalRowCounter++;
    const rowNumber = globalRowCounter;
    const uniqueId = Date.now() + '_' + rowNumber;

    const row = `
        <tr class="panen-row" data-row-number="${rowNumber}">
            <td>
                <select name="items[${rowNumber}][kolam]" id="panen_${uniqueId}_kolam" class="form-control form-select panen-kolam">
                    <option value="">Pilih Kolam</option>
                    ${kolamOptions.map(kolam => `<option value="${kolam.nama}">${kolam.nama}</option>`).join('')}
                </select>
            </td>
            <td>
                <select name="items[${rowNumber}][grade]" id="panen_${uniqueId}_grade" class="form-control form-select select2-grade">
                    <option value="">Pilih</option>
                    <option value="FS">FS</option>
                    <option value="BS">BS</option>
                    <option value="BD">BD</option>
                </select>
            </td>
            <td>
                <select name="items[${rowNumber}][jenis]" id="panen_${uniqueId}_jenis" class="form-control form-select select2-jenis">
                    <option value="">Pilih</option>
                    <option value="PARTIAL">Partial</option>
                    <option value="TOTAL">Total</option>
                </select>
            </td>
            <td>
                <input type="number" name="items[${rowNumber}][size]" id="panen_${uniqueId}_size" class="form-control" placeholder="Size" step="0.01" min="0" required oninput="triggerCalculateRow('${uniqueId}')" onchange="triggerCalculateRow('${uniqueId}')">
            </td>
            <td>
                <input type="text" name="items[${rowNumber}][qty]" id="panen_${uniqueId}_qty_display" class="form-control number-input text-end" placeholder="0" style="text-align: right;" oninput="formatQtyInput('${uniqueId}')" onchange="formatQtyInput('${uniqueId}')" onblur="formatQtyBlur('${uniqueId}')">
                <input type="hidden" name="items[${rowNumber}][qty]" id="panen_${uniqueId}_qty" value="0">
            </td>
            <td>
                <input type="text" name="items[${rowNumber}][harga]" id="panen_${uniqueId}_harga" class="form-control text-end" placeholder="0" oninput="formatHargaInput('${uniqueId}')" onchange="formatHargaInput('${uniqueId}')" onblur="formatHargaBlur('${uniqueId}')">
                <input type="hidden" id="panen_${uniqueId}_harga_value" value="0">
                <small class="text-muted " id="panen_${uniqueId}_harga_source" style="font-size: 0.75rem;display:none"></small>
            </td>
            <td>
                <input type="text" id="panen_${uniqueId}_subtotal" class="form-control" placeholder="Rp 0" readonly>
                <input type="hidden" name="items[${rowNumber}][subtotal]" id="panen_${uniqueId}_subtotal_value" value="0">
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger" onclick="removePanenRow(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>
    `;
    $('#panenTableBody').append(row);

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

    if (newRow.find('.panen-kolam').length) {
        newRow.find('.panen-kolam').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Kolam',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#panenModal')
        });
    }

    if (newRow.find('.select2-grade').length) {
        newRow.find('.select2-grade').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Grade',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#panenModal')
        });
    }

    if (newRow.find('.select2-jenis').length) {
        newRow.find('.select2-jenis').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Jenis',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#panenModal')
        });
    }

    // Size field is now a regular input, no Select2 initialization needed

    // Reset user-edited flag for new row
    newRow.find('[id$="_harga"]').removeData('user-edited');

    updateRowCount();
}

// Trigger calculateRow for inline event handlers
function triggerCalculateRow(uniqueId) {
    calculateRow(uniqueId);
}

// Format qty input - English format (period for decimal, comma for thousands)
function formatQtyInput(uniqueId) {
    const $input = $('#panen_' + uniqueId + '_qty_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);
        $('#panen_' + uniqueId + '_qty').val(angka);
    } else {
        // Empty input
        $input.val('');
        $('#panen_' + uniqueId + '_qty').val('0');
    }

    // Trigger calculation
    calculateRow(uniqueId);
}

// Format qty on blur - always show 2 decimals
function formatQtyBlur(uniqueId) {
    const qtyField = $('#panen_' + uniqueId + '_qty_display');
    const qtyHidden = $('#panen_' + uniqueId + '_qty');
    const value = qtyField.val();

    if (value && value !== '') {
        const num = parseNumberInput(value);
        if (num > 0) {
            qtyField.val(formatNumberInputFixed(num, 2));
            qtyHidden.val(num);
        } else {
            qtyField.val('');
            qtyHidden.val('0');
        }
    } else {
        qtyField.val('');
        qtyHidden.val('0');
    }
    calculateRow(uniqueId);
}

// Format harga input - English format (period for decimal, comma for thousands)
function formatHargaInput(uniqueId) {
    const hargaField = $('#panen_' + uniqueId + '_harga');
    const hargaValueField = $('#panen_' + uniqueId + '_harga_value');
    const currentValue = hargaField.val();

    // Format langsung dari value input (bukan dari parsed angka)
    if (currentValue !== '') {
        const formatted = formatNumberInput(currentValue);
        hargaField.val(formatted);

        // Parse untuk update hidden field
        const angka = parseNumberInput(formatted);
        if (angka >= 0) {
            hargaValueField.val(angka);
        } else {
            hargaField.val('');
            hargaValueField.val(0);
        }
    } else {
        hargaField.val('');
        hargaValueField.val(0);
    }

    // Mark as user-edited
    markHargaAsEdited(uniqueId);

    // Trigger calculation
    calculateRow(uniqueId);
}

// Format harga on blur - no decimals for harga
function formatHargaBlur(uniqueId) {
    const hargaField = $('#panen_' + uniqueId + '_harga');
    const hargaValueField = $('#panen_' + uniqueId + '_harga_value');
    const value = hargaField.val();

    if (value && value !== '') {
        const num = parseNumberInput(value);
        if (num >= 0) {
            hargaField.val(formatNumberInputFixed(num, 0));
            hargaValueField.val(num);
        } else {
            hargaField.val('');
            hargaValueField.val(0);
        }
    } else {
        hargaField.val('');
        hargaValueField.val(0);
    }
    calculateRow(uniqueId);
}

// Calculate row subtotal and update harga (NO AUTO-FETCH)
async function calculateRow(uniqueId) {
    const size = $('#panen_' + uniqueId + '_size').val();
    const qtyField = $('#panen_' + uniqueId + '_qty');
    const qty = parseFloat(qtyField.val()) || 0;

    console.log('calculateRow called - size:', size, 'qty:', qty, 'qtyField.val():', qtyField.val());

    // Get current harga value (MANUAL ONLY, NO AUTO-FETCH)
    const hargaField = $('#panen_' + uniqueId + '_harga');
    const hargaValueField = $('#panen_' + uniqueId + '_harga_value');
    const hargaSourceField = $('#panen_' + uniqueId + '_harga_source');

    // Prioritize hidden field value over formatted display value
    let harga = parseFloat(hargaValueField.val()) || 0;

    // If hidden field is 0 but display field has value, parse it
    if (harga === 0 && hargaField.val()) {
        harga = parseFormattedNumber(hargaField.val()) || 0;
        // Sync to hidden field
        hargaValueField.val(harga);
    }

    const isUserEdited = hargaField.data('user-edited') || false;

    // NO AUTO-FETCH FROM API - Manual input only
    // Harga stays at 0 unless manually edited

    // Display source indicator
    if (isUserEdited) {
        hargaSourceField.text('✏️ Manual');
    } else {
        hargaSourceField.text('');
    }

    console.log('Final harga to display:', harga, 'hargaValueField.val():', hargaValueField.val());

    // Store actual harga value for form submission
    hargaValueField.val(harga);

    // Calculate subtotal (qty default to 0 if empty)
    const subtotal = qty * harga;
    console.log('Subtotal calculation:', qty, 'x', harga, '=', subtotal);

    // Display subtotal with English format (no decimals)
    $('#panen_' + uniqueId + '_subtotal').val(subtotal > 0 ? formatNumberInputFixed(subtotal, 0) : '');
    $('#panen_' + uniqueId + '_subtotal_value').val(subtotal);

    updateGrandTotal();
}

// Mark harga as user-edited when manually changed
function markHargaAsEdited(uniqueId) {
    $('#panen_' + uniqueId + '_harga').data('user-edited', true);
}

// Update grand total
function updateGrandTotal() {
    let totalQty = 0;
    let total = 0;
    $('#panenTableBody tr').each(function() {
        const qty = parseFloat($(this).find('[id$="_qty"]').val()) || 0;
        const subtotal = parseFloat($(this).find('[id$="_subtotal_value"]').val()) || 0;
        console.log('Adding to grand total - qty:', qty, 'subtotal:', subtotal);
        totalQty += qty;
        total += subtotal;
    });

    console.log('Final grand total - qty:', totalQty, 'total:', total);
    $('#grandTotalQty').text(formatNumberInputFixed(totalQty, 2));
    $('#grandTotal').text(formatNumberInputFixed(total, 0));

    // Update total nilai display in master section
    $('#totalNilaiDisplay').text(formatNumberInputFixed(total, 0));
}

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

function removePanenRow(button) {
    const row = $(button).closest('tr');

    if ($('#panenTableBody tr').length > 1) {
        row.remove();
        updateRowCount();
        updateGrandTotal();
    } else {
        Swal.fire({
            icon: 'info',
            title: 'Info',
            text: 'Minimal harus ada satu baris data'
        });
    }
}

function resetPanenForm() {
    $('#panenForm')[0].reset();
    $('#panenModalTitle').text('Panen Baru');

    // Reset form action to create mode
    $('#panenForm').attr('action', '{{ route("panen.store") }}');
    $('#panenForm').find('input[name="_method"]').remove();

    // Reset submit button text
    $('#submitBtnText').html(`
        <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 Data Panen
    `);

    // Reset Select2 elements
    $('#customer').val(null).trigger('change');

    $('#panenTableBody').empty();

    // Reset global counter and flags
    globalRowCounter = 0;
    isSubmitting = false;
    lastKnownSequence = null;
    addPanenRow();

    const today = '{{ date('Y-m-d') }}';
    const now = '{{ date('H:i') }}';
    $('#tanggal').val(today);
    $('#jam').val(now);

    // Reset no_bukti field to be editable for create mode
    $('#no_bukti').prop('readonly', false);

    // Generate no_bukti preview
    generateNoBuktiPreview(today);

    // Hide input harga button and auto-calculate button in create mode
    $('#inputHargaBtn').hide();
    $('#autoCalculateBtn').hide();
    $('#masterHargaBtn').hide();

    // Reset user-edited flags and formatted fields
    $('[id$="_harga"]').each(function() {
        $(this).removeData('user-edited');
        $(this).val('');
    });
    $('[id$="_qty"]').each(function() {
        $(this).val('');
    });
    $('[id$="_harga_value"]').val(0);
    $('[id$="_harga_source"]').text('');

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

    // Reset total nilai display
    $('#totalNilaiDisplay').text('Rp 0');
}

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

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

    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;

    $('#no_bukti').val('PN' + tanggalPart + 'XXX');
    $('#no_bukti_help').html('⏳ Loading...');

    $.ajax({
        url: '/panen/get-last-sequence/' + tanggal,
        method: 'GET',
        success: function(response) {
            if (response.error) {
                $('#no_bukti_help').html('❌ ' + response.error);
                return;
            }

            const nextSequence = response.next_sequence;
            const noBuktiPreview = 'PN' + 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;">(Ready)</small>');
        },
        error: function(xhr) {
            const errorMsg = xhr.responseJSON?.error || 'Gagal mengambil nomor urut';
            $('#no_bukti_help').html('❌ ' + errorMsg);
        }
    });
}

$(document).ready(function() {
    // Initialize Select2 for customer dropdown
    if ($('#customer').length) {
        $('#customer').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Customer',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#panenModal')
        });
    }

    // Generate initial no_bukti preview
    const today = '{{ date('Y-m-d') }}';
    generateNoBuktiPreview(today);

    addPanenRow();

    // Update preview when tanggal changes
    $('#tanggal').on('change', function() {
        const tanggal = $(this).val();
        generateNoBuktiPreview(tanggal);
    });

    $('#panenForm').on('submit', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();

        if (isSubmitting) {
            return;
        }

        // Validate master section
        const customer = $('#customer').val();
        if (!customer || customer === '') {
            Swal.fire({
                icon: 'error',
                title: 'Validasi Error',
                text: 'Customer harus dipilih'
            });
            return;
        }

        let hasError = false;
        $('#panenTableBody tr').each(function(rowIdx, row) {
            const size = $(row).find('[id$="_size"]').val();

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

        if (hasError) {
            return;
        }

        // Sync all Select2 values before submission
        $('.panen-kolam, .select2-grade, .select2-jenis, #customer').each(function() {
            const select2 = $(this);
            if (select2.data('select2')) {
                // Trigger change to ensure value is synchronized
                select2.trigger('change');
            }
        });

        const form = this;
        const formData = new FormData();

        // Manually build FormData to ensure all fields are included
        $(form).find('input, select, textarea').each(function() {
            const field = $(this);
            const name = field.attr('name');

            if (name) {
                if (field.attr('type') === 'checkbox' || field.attr('type') === 'radio') {
                    if (field.is(':checked')) {
                        formData.append(name, field.val());
                    }
                } else if (field.attr('type') === 'hidden') {
                    // Always include hidden fields
                    formData.append(name, field.val());
                } else {
                    // For select2, get the actual value from the select element
                    if (field.hasClass('panen-kolam') || field.hasClass('select2-grade') ||
                        field.hasClass('select2-jenis') ||
                        field.attr('id') === 'customer') {
                        const value = field.val();
                        if (value !== null && value !== undefined && value !== '') {
                            formData.append(name, value);
                        } else if (field.hasClass('panen-kolam')) {
                            // Explicitly add empty kolam value
                            formData.append(name, '');
                        }
                    } else {
                        // For qty and harga fields, parse formatted numbers
                        const fieldId = field.attr('id') || '';
                        if (fieldId.includes('_qty') || fieldId.includes('_harga')) {
                            const parsedValue = parseFormattedNumber(field.val());
                            formData.append(name, parsedValue);
                        } else {
                            formData.append(name, field.val());
                        }
                    }
                }
            }
        });
        const url = $(this).attr('action');

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

        isSubmitting = true;

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            beforeSend: function(xhr) {
                const csrfToken = formData.get('_token');
                if (csrfToken) {
                    xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
                }
            },
            success: function(response) {
                console.log('Panen save - Success response:', response);
                submitBtn.prop('disabled', false);
                submitBtnText.removeClass('d-none').css('display', 'inline');
                submitBtnLoading.addClass('d-none').css('display', 'none');
                isSubmitting = false;

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

                // Show auto-calculate button after successful save (edit mode)
                if (response.data && response.data.panen && response.data.panen.no_bukti) {
                    // Set no_bukti to read-only and fixed value
                    $('#no_bukti').val(response.data.panen.no_bukti);
                    $('#no_bukti').prop('readonly', true);
                    $('#no_bukti_help').html('✅ No Bukti: <strong>' + response.data.panen.no_bukti + '</strong> <small style="color: #6c757d;">(Fixed)</small>');

                    $('#autoCalculateBtn').show();
                    $('#masterHargaBtn').show();

                    // Update form to edit mode
                    $('#panenForm').attr('action', `/panen/${response.data.panen.no_bukti}`);
                    $('#panenForm').find('input[name="_method"]').remove();
                    $('#panenForm').append('<input type="hidden" name="_method" value="PUT">');

                    // Change modal title
                    $('#panenModalTitle').text(`Edit Panen: ${response.data.panen.no_bukti}`);

                    // Change submit button text
                    $('#submitBtnText').html(`
                        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                        Update Data Panen
                    `);
                } else {
                    // If still in create mode (no no_bukti in response), generate new preview
                    const tanggal = $('#tanggal').val();
                    if (tanggal) {
                        generateNoBuktiPreview(tanggal);
                    }
                }

                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: response.message || 'Data Panen berhasil disimpan!',
                    timer: 2000,
                    showConfirmButton: false
                }).then(function() {
                    // Close modal and reset form
                    const modalEl = document.getElementById('panenModal');
                    const modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) {
                        modal.hide();
                    }
                });
            },
            error: function(xhr, status, error) {
                console.error('Panen save - Error:', {
                    status: status,
                    error: error,
                    response: xhr.responseJSON,
                    responseText: xhr.responseText
                });

                submitBtn.prop('disabled', false);
                submitBtnText.removeClass('d-none').css('display', 'inline');
                submitBtnLoading.addClass('d-none').css('display', 'none');
                isSubmitting = false;

                const errorMsg = xhr.responseJSON?.message || xhr.responseText || 'Terjadi kesalahan!';

                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: errorMsg
                });

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

                isSubmitting = false;
            }
        });
    });

// Function to check which panen items are used in piutang and highlight them
async function checkAndHighlightUsedItems() {
    try {
        const response = await fetch('/piutang/get-used-aktivitas-ids', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
            }
        });

        if (!response.ok) {
            console.warn('Failed to fetch used aktivitas IDs');
            return;
        }

        const result = await response.json();
        if (result.success && result.data && result.data.length > 0) {
            const usedIds = result.data;

            // Highlight rows in the DataTable that are used in piutang
            $('#panenTable tbody tr').each(function() {
                const row = $(this);
                const rowData = $('#panenTable').DataTable().row(row).data();

                if (rowData && rowData.aktivitas_ids) {
                    // Check if any of the item IDs in this row are used in piutang
                    const hasUsedItem = rowData.aktivitas_ids.some(id => usedIds.includes(id));

                    if (hasUsedItem) {
                        // Add red background and warning
                        row.addClass('table-danger');

                        // Add warning icon to the action column
                        const actionCell = row.find('td:last');
                        if (!actionCell.find('.piutang-warning').length) {
                            actionCell.prepend(`
                                <span class="badge badge-danger piutang-warning" style="margin-right: 5px;" title="Item ini sedang digunakan di Piutang">
                                    ⚠️ Dipakai di Piutang
                                </span>
                            `);
                        }
                    }
                }
            });
        }
    } catch (error) {
        console.error('Error checking used items:', error);
    }
}

    panenTable = $('#panenTable').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("panen.data.grouped") }}',
            type: 'GET',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
            },
            error: function(xhr, error, thrown) {
                console.error('DataTable error:', error, thrown);
            }
        },
        columns: [
            { data: 'no_bukti', name: 'no_bukti', searchable: true },
            { data: 'tanggal_format', name: 'tanggal', searchable: false },
            { data: 'customer', name: 'customer', 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: 'piutang_status', name: 'piutang_status', searchable: false, orderable: 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, Customer...",
            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"
            }
        }
    });

    // Check and highlight items used in piutang after table is loaded
    panenTable.on('draw', function() {
        checkAndHighlightUsedItems();
    });

    // Initial check
    checkAndHighlightUsedItems();

    $('#panenModal').on('show.bs.modal', function(e) {
        const relatedTarget = e.relatedTarget;

        if (relatedTarget && $(relatedTarget).attr('data-bs-toggle') === 'modal') {
            resetPanenForm();
        }
    });

    $('#panenModal').on('hidden.bs.modal', function() {
        // Only reset form if we're not in the middle of submitting
        if (!isSubmitting) {
            resetPanenForm();
        }
    });
});

// View panen detail
function viewPanen(noBukti) {
    $.ajax({
        url: `/panen/${noBukti}`,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                const panen = response.data.panen;

                // Create HTML for detail view
                let detailHtml = `
                    <div style="padding: 1.5rem;">
                        <h5 style="margin-bottom: 1rem; border-bottom: 2px solid #dee2e6; padding-bottom: 0.5rem;">Detail Panen: ${panen.no_bukti}</h5>
                        <div class="row" style="margin-bottom: 1rem;">
                            <div class="col-md-6">
                                <strong>Tanggal:</strong> ${panen.tanggal ? new Date(panen.tanggal).toLocaleDateString('id-ID') : '-'}<br>
                                <strong>Jam:</strong> ${panen.jam || '-'}<br>
                                <strong>Customer:</strong> ${panen.customer || '-'}
                            </div>
                            <div class="col-md-6">
                                <strong>Keterangan:</strong> ${panen.keterangan || '-'}<br>
                                <strong>No. Polisi:</strong> ${panen.no_polisi || '-'}<br>
                                <strong>Supir:</strong> ${panen.supir || '-'}
                            </div>
                        </div>
                        <h6 style="margin: 1rem 0 0.5rem 0; border-bottom: 1px solid #dee2e6; padding-bottom: 0.25rem;">Item Panen:</h6>
                        <table class="table table-sm table-striped" style="font-size: 0.875rem;">
                            <thead>
                                <tr>
                                    <th>Kolam</th>
                                    <th>Grade</th>
                                    <th>Jenis</th>
                                    <th>Size</th>
                                    <th>Qty</th>
                                    <th>Harga</th>
                                    <th>Subtotal</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                `;

                if (panen.items && panen.items.length > 0) {
                    panen.items.forEach(function(item) {
                        detailHtml += `
                            <tr>
                                <td>${item.kolam || '-'}</td>
                                <td>${item.grade || '-'}</td>
                                <td>${item.jenis || '-'}</td>
                                <td>${item.size || 0}</td>
                                <td>${item.qty > 0 ? formatNumberInputFixed(item.qty, 2) : '0'}</td>
                                <td>Rp ${formatNumberInputFixed(item.harga || 0, 0)}</td>
                                <td>Rp ${formatNumberInputFixed(item.total || 0, 0)}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-danger" onclick="deletePanenItem(${item.id})" title="Hapus Item Ini">
                                        <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                        </svg>
                                    </button>
                                </td>
                            </tr>
                        `;
                    });
                }

                detailHtml += `
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7" style="text-align: right;"><strong>Total:</strong></td>
                                    <td><strong>Rp ${formatNumberInputFixed(panen.total || 0, 0)}</strong></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                `;

                Swal.fire({
                    title: '',
                    html: detailHtml,
                    width: '800px',
                    showConfirmButton: true,
                    confirmButtonText: 'Tutup',
                    customClass: {
                        popup: 'swal-wide'
                    }
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'Gagal memuat detail panen'
                });
            }
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Gagal memuat detail panen'
            });
        }
    });
}

// Delete panen
function deletePanen(noBukti) {
    Swal.fire({
        title: 'Hapus Data Panen?',
        text: `Anda yakin ingin menghapus data panen ${noBukti}? Tindakan ini tidak dapat dibatalkan.`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `/panen/${noBukti}`,
                type: 'POST',
                data: {
                    _method: 'DELETE',
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Terhapus!',
                        text: 'Data panen berhasil dihapus.',
                        timer: 2000,
                        showConfirmButton: false
                    });

                    // Reload table
                    $('#panenTable').DataTable().ajax.reload(null, false);
                },
                error: function(xhr) {
                    const errorMsg = xhr.responseJSON?.message || 'Gagal menghapus data panen';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: errorMsg
                    });
                }
            });
        }
    });
}

// Edit panen
function editPanen(noBukti) {
    $.ajax({
        url: `/panen/${noBukti}`,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                const panen = response.data.panen;

                // Set form values
                // Set tanggal WITHOUT triggering change to prevent regenerating no_bukti
                $('#tanggal').val(panen.tanggal);
                $('#jam').val(panen.jam);
                $('#customer').val(panen.customer).trigger('change');
                $('#keterangan').val(panen.keterangan || '');

                // Set no_bukti field (keep existing no_bukti, don't regenerate)
                $('#no_bukti').val(noBukti);
                $('#no_bukti').prop('readonly', true);
                $('#no_bukti_help').html('✅ No Bukti: <strong>' + noBukti + '</strong> <small style="color: #6c757d;">(Fixed)</small>');

                // Clear existing rows
                $('#panenTableBody').empty();
                globalRowCounter = 0;

                // Add items to form
                if (panen.items && panen.items.length > 0) {
                    panen.items.forEach(function(item) {
                        addPanenRow();

                        // Set row values
                        const lastRow = $('#panenTableBody tr:last');
                        const uniqueId = lastRow.find('[id^="panen_"]').first().attr('id').match(/panen_(.+)_(kolam|grade)/)[1];

                        if (item.kolam) {
                            lastRow.find(`#panen_${uniqueId}_kolam`).val(item.kolam).trigger('change');
                        }
                        lastRow.find(`#panen_${uniqueId}_grade`).val(item.grade).trigger('change');
                        lastRow.find(`#panen_${uniqueId}_jenis`).val(item.jenis).trigger('change');
                        lastRow.find(`#panen_${uniqueId}_size`).val(item.size).trigger('change');

                        // Format qty with thousand separator (English format)
                        const qty = parseFloat(item.qty) || 0;
                        if (qty > 0) {
                            // Format with English style (comma thousands, period decimal)
                            const qtyFormatted = formatNumberInputFixed(qty, 2);
                            lastRow.find(`#panen_${uniqueId}_qty_display`).val(qtyFormatted);
                        } else {
                            lastRow.find(`#panen_${uniqueId}_qty_display`).val('');
                        }
                        lastRow.find(`#panen_${uniqueId}_qty`).val(qty);

                        // Format harga with thousand separator
                        const harga = parseFloat(item.harga) || 0;
                        if (harga > 0) {
                            lastRow.find(`#panen_${uniqueId}_harga`).val(formatNumberInputFixed(harga, 0));
                        }
                        lastRow.find(`#panen_${uniqueId}_harga_value`).val(harga);

                        // Mark as user-edited since this is existing data
                        lastRow.find(`#panen_${uniqueId}_harga`).data('user-edited', true);
                        lastRow.find(`#panen_${uniqueId}_harga_source`).text('✏️ Manual');

                        // Trigger calculation
                        triggerCalculateRow(uniqueId);
                    });
                }

                // Update form to edit mode
                $('#panenForm').attr('action', `/panen/${noBukti}`);
                $('#panenForm').find('input[name="_method"]').remove();
                $('#panenForm').append('<input type="hidden" name="_method" value="PUT">');

                // Change modal title
                $('#panenModalTitle').text(`Edit Panen: ${noBukti}`);

                // Change submit button text
                $('#submitBtnText').html(`
                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Update Data Panen
                `);

                // Open modal
                const modalEl = document.getElementById('panenModal');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'Gagal memuat data panen'
                });
            }
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Gagal memuat data panen'
            });
        }
    });
}

// Delete single panen item
function deletePanenItem(itemId) {
    Swal.fire({
        title: 'Hapus Item Ini?',
        text: 'Anda yakin ingin menghapus item ini saja?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `/panen/item/${itemId}`,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Terhapus!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });

                    // Reload table
                    $('#panenTable').DataTable().ajax.reload(null, false);
                },
                error: function(xhr) {
                    const errorMsg = xhr.responseJSON?.message || 'Gagal menghapus item';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: errorMsg
                    });
                }
            });
        }
    });
}

// Input Harga Modal Functions
let hargaList = [];
let hargaRowCounter = 0;

function openInputHargaModal() {
    const noBukti = $('#no_bukti').val();

    if (!noBukti || noBukti.includes('XXX')) {
        Swal.fire({
            icon: 'warning',
            title: 'Peringatan',
            text: 'Silakan simpan data panen terlebih dahulu sebelum input harga'
        });
        return;
    }

    $('#hargaNoBukti').val(noBukti);

    // Load existing prices
    $.ajax({
        url: `/panen/harga/${noBukti}`,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                hargaList = response.data || [];
                renderHargaList();
            }
        },
        error: function(xhr) {
            console.error('Error loading prices:', xhr);
            hargaList = [];
            renderHargaList();
        }
    });

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

function renderHargaList() {
    const container = $('#hargaListContainer');
    container.empty();

    if (hargaList.length === 0) {
        container.html('<p class="text-muted text-center">Belum ada harga. Silakan tambah ukuran.</p>');
        return;
    }

    let tableHtml = `
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width: 100px;">Ukuran</th>
                    <th style="width: 150px;">Harga</th>
                    <th style="width: 50px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
    `;

    hargaList.forEach(function(item, index) {
        tableHtml += `
            <tr data-index="${index}">
                <td>
                    <input type="number" class="form-control" value="${item.ukuran}"
                           onchange="updateHargaItem(${index}, 'ukuran', this.value)"
                           step="0.1" min="0">
                </td>
                <td>
                    <input type="text" class="form-control text-end" value="${item.harga > 0 ? formatNumberInputFixed(item.harga, 0) : ''}"
                           onchange="updateHargaItem(${index}, 'harga', this.value)">
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger" onclick="deleteHargaItem(${index})">
                        <svg width="12" height="12" 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>
        `;
    });

    tableHtml += `
            </tbody>
        </table>
    `;

    container.html(tableHtml);
}

function addHargaRow() {
    hargaList.push({
        id: null,
        no_bukti: $('#hargaNoBukti').val(),
        ukuran: 0,
        harga: 0
    });
    renderHargaList();
}

function updateHargaItem(index, field, value) {
    if (field === 'harga') {
        hargaList[index][field] = parseFormattedNumber(value) || 0;
    } else {
        hargaList[index][field] = parseFloat(value) || 0;
    }

    // Only auto-save if both ukuran and harga have valid values
    const item = hargaList[index];
    if (item.ukuran > 0 && item.harga >= 0) {
        saveHargaItem(item);
    }
}

function saveHargaItem(item) {
    // Validate before saving
    if (!item.ukuran || item.ukuran <= 0) {
        console.warn('Skipping save: ukuran is invalid', item);
        return;
    }

    if (item.harga === null || item.harga === undefined || item.harga < 0) {
        console.warn('Skipping save: harga is invalid', item);
        return;
    }

    $.ajax({
        url: '/panen/harga',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            id: item.id || null,
            no_bukti: item.no_bukti,
            ukuran: item.ukuran,
            harga: item.harga
        },
        success: function(response) {
            if (response.success) {
                // Update item ID if it's new - using new response format from THARGA
                if (!item.id && response.data.id) {
                    item.id = response.data.id;
                }

                // Update item fields if response provides updated values
                if (response.data.ukuran !== undefined) {
                    item.ukuran = response.data.ukuran;
                }
                if (response.data.harga !== undefined) {
                    item.harga = response.data.harga;
                }
                if (response.data.updated_at) {
                    item.updated_at = response.data.updated_at;
                }

                // Clear price cache so new prices will be used
                Object.keys(priceCache).forEach(key => {
                    if (key.startsWith(item.no_bukti)) {
                        delete priceCache[key];
                    }
                });

                // Show success indicator
                Swal.fire({
                    icon: 'success',
                    title: 'Tersimpan',
                    text: 'Harga berhasil disimpan ke Master Harga',
                    timer: 1000,
                    showConfirmButton: false
                });
            }
        },
        error: function(xhr) {
            const errorMsg = xhr.responseJSON?.message || 'Gagal menyimpan harga';
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: errorMsg
            });
        }
    });
}

function deleteHargaItem(index) {
    const item = hargaList[index];

    if (item.id) {
        Swal.fire({
            title: 'Hapus Harga?',
            text: `Anda yakin ingin menghapus harga untuk ukuran ${item.ukuran}?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/panen/harga/${item.id}`,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        hargaList.splice(index, 1);
                        renderHargaList();

                        // Clear price cache so deleted prices won't be used
                        Object.keys(priceCache).forEach(key => {
                            if (key.startsWith(item.no_bukti)) {
                                delete priceCache[key];
                            }
                        });

                        Swal.fire({
                            icon: 'success',
                            title: 'Terhapus!',
                            text: 'Harga berhasil dihapus dari Master Harga',
                            timer: 1500,
                            showConfirmButton: false
                        });
                    },
                    error: function(xhr) {
                        const errorMsg = xhr.responseJSON?.message || 'Gagal menghapus harga';
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: errorMsg
                        });
                    }
                });
            }
        });
    } else {
        // Just remove from list if it's not saved yet
        hargaList.splice(index, 1);
        renderHargaList();
    }
}

// Auto Calculate Harga Modal Functions
let autoCalculatedData = [];

async function openAutoCalculateModal() {
    const noBukti = $('#no_bukti').val();

    if (!noBukti || noBukti.includes('XXX')) {
        Swal.fire({
            icon: 'warning',
            title: 'Peringatan',
            text: 'Simpan data panen terlebih dahulu sebelum menggunakan auto calculate harga'
        });
        return;
    }

    // Show loading
    Swal.fire({
        title: 'Memuat Harga...',
        text: 'Menghitung harga otomatis dari API',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    try {
        // Get all rows from form
        autoCalculatedData = [];
        const rows = $('#panenTableBody tr');

        for (let i = 0; i < rows.length; i++) {
            const row = $(rows[i]);
            const uniqueId = row.find('[id^="panen_"]').first().attr('id').match(/panen_(.+)_(kolam|grade)/)[1];

            const kolam = row.find(`#panen_${uniqueId}_kolam`).val() || '';
            const grade = row.find(`#panen_${uniqueId}_grade`).val() || '';
            const jenis = row.find(`#panen_${uniqueId}_jenis`).val() || '';
            const size = parseFloat(row.find(`#panen_${uniqueId}_size`).val()) || 0;
            const qty = parseFloat(row.find(`#panen_${uniqueId}_qty`).val()) || 0;
            const currentHarga = parseFormattedNumber(row.find(`#panen_${uniqueId}_harga`).val()) || 0;

            if (size > 0) {
                // Fetch harga from API
                const result = await getHargaBySize(size, noBukti);

                autoCalculatedData.push({
                    rowIndex: i,
                    uniqueId: uniqueId,
                    kolam: kolam,
                    grade: grade,
                    jenis: jenis,
                    size: size,
                    qty: qty,
                    harga: result.harga || 0,
                    source: result.source || 'Unknown',
                    method: result.method || 'Unknown',
                    subtotal: qty * (result.harga || 0)
                });
            }
        }

        Swal.close();

        // Render table
        renderAutoCalculateTable();

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

    } catch (error) {
        Swal.close();
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Gagal menghitung harga otomatis: ' + error.message
        });
    }
}

function renderAutoCalculateTable() {
    const tbody = $('#autoCalculateTableBody');
    tbody.empty();

    let total = 0;

    autoCalculatedData.forEach(function(item, index) {
        total += item.subtotal;

        const sourceIcon = item.source === 'TPANEN' ? '📊' :
                          item.source === 'THARGA' ? '📋' : '✏️';
        const sourceText = item.source === 'TPANEN' ? 'Harga Panen' :
                          item.source === 'THARGA' ? 'Master Harga' : 'Manual';

        const row = `
            <tr data-index="${index}">
                <td>${index + 1}</td>
                <td>${item.kolam || '-'}</td>
                <td>${item.grade || '-'}</td>
                <td>${item.jenis || '-'}</td>
                <td>${item.size}</td>
                <td>${item.qty > 0 ? formatNumberInputFixed(item.qty, 2) : '0'}</td>
                <td>
                    <input type="text" class="form-control auto-harga-input text-end"
                           value="${item.harga > 0 ? formatNumberInputFixed(item.harga, 0) : ''}"
                           data-index="${index}"
                           onchange="updateAutoCalculateHarga(${index}, this.value)">
                </td>
                <td id="auto-subtotal-${index}">Rp ${formatNumberInputFixed(item.subtotal, 0)}</td>
            </tr>
        `;

        tbody.append(row);
    });

    $('#autoCalculateGrandTotal').text('Rp ' + formatNumberInputFixed(total, 0));
}

function updateAutoCalculateHarga(index, newHarga) {
    const harga = parseNumberInput(newHarga) || 0;
    autoCalculatedData[index].harga = harga;
    autoCalculatedData[index].subtotal = autoCalculatedData[index].qty * harga;

    // Update subtotal display
    $(`#auto-subtotal-${index}`).text('Rp ' + formatNumberInputFixed(autoCalculatedData[index].subtotal, 0));

    // Update grand total
    const total = autoCalculatedData.reduce((sum, item) => sum + item.subtotal, 0);
    $('#autoCalculateGrandTotal').text('Rp ' + formatNumberInputFixed(total, 0));
}

function applyAutoCalculatedHarga() {
    // Apply all calculated harga to the form
    autoCalculatedData.forEach(function(item) {
        const hargaField = $(`#panen_${item.uniqueId}_harga`);
        const hargaValueField = $(`#panen_${item.uniqueId}_harga_value`);
        const hargaSourceField = $(`#panen_${item.uniqueId}_harga_source`);

        // Set harga values with formatting
        if (item.harga > 0) {
            hargaField.val(formatNumberInputFixed(item.harga, 0));
        } else {
            hargaField.val('');
        }
        hargaValueField.val(item.harga);

        // Mark as user-edited
        hargaField.data('user-edited', true);
        // hargaSourceField.text('✏️ Manual');

        // Recalculate row
        calculateRow(item.uniqueId);
    });

    // Close modal
    const modalEl = document.getElementById('autoCalculateModal');
    const modal = bootstrap.Modal.getInstance(modalEl);
    modal.hide();

    Swal.fire({
        icon: 'success',
        title: 'Berhasil',
        text: 'Harga otomatis telah diterapkan',
        timer: 1500,
        showConfirmButton: false
    });
}

// Update editPanen function to show input harga button
const originalEditPanen = editPanen;
editPanen = function(noBukti) {
    $.ajax({
        url: `/panen/${noBukti}`,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                const panen = response.data.panen;

                // Set form values
                // Set tanggal WITHOUT triggering change to prevent regenerating no_bukti
                $('#tanggal').val(panen.tanggal);
                $('#jam').val(panen.jam);
                $('#customer').val(panen.customer).trigger('change');
                $('#keterangan').val(panen.keterangan || '');

                // Set no_bukti field (keep existing no_bukti, don't regenerate)
                $('#no_bukti').val(noBukti);
                $('#no_bukti').prop('readonly', true);
                $('#no_bukti_help').html('✅ No Bukti: <strong>' + noBukti + '</strong> <small style="color: #6c757d;">(Fixed)</small>');

                // Clear existing rows
                $('#panenTableBody').empty();
                globalRowCounter = 0;

                // Add items to form
                if (panen.items && panen.items.length > 0) {
                    panen.items.forEach(function(item) {
                        addPanenRow();

                        // Set row values
                        const lastRow = $('#panenTableBody tr:last');
                        const uniqueId = lastRow.find('[id^="panen_"]').first().attr('id').match(/panen_(.+)_(kolam|grade)/)[1];

                        if (item.kolam) {
                            lastRow.find(`#panen_${uniqueId}_kolam`).val(item.kolam).trigger('change');
                        }
                        lastRow.find(`#panen_${uniqueId}_grade`).val(item.grade).trigger('change');
                        lastRow.find(`#panen_${uniqueId}_jenis`).val(item.jenis).trigger('change');
                        lastRow.find(`#panen_${uniqueId}_size`).val(item.size).trigger('change');

                        // Format qty with thousand separator (English format)
                        const qty = parseFloat(item.qty) || 0;
                        if (qty > 0) {
                            // Format with English style (comma thousands, period decimal)
                            const qtyFormatted = formatNumberInputFixed(qty, 2);
                            lastRow.find(`#panen_${uniqueId}_qty_display`).val(qtyFormatted);
                        } else {
                            lastRow.find(`#panen_${uniqueId}_qty_display`).val('');
                        }
                        lastRow.find(`#panen_${uniqueId}_qty`).val(qty);

                        // Format harga with thousand separator
                        const harga = parseFloat(item.harga) || 0;
                        if (harga > 0) {
                            lastRow.find(`#panen_${uniqueId}_harga`).val(formatNumberInputFixed(harga, 0));
                        }
                        lastRow.find(`#panen_${uniqueId}_harga_value`).val(harga);

                        // Mark as user-edited since this is existing data
                        lastRow.find(`#panen_${uniqueId}_harga`).data('user-edited', true);
                        // lastRow.find(`#panen_${uniqueId}_harga_source`).text('✏️ Manual');

                        // Trigger calculation
                        triggerCalculateRow(uniqueId);
                    });
                }

                // Update form to edit mode
                $('#panenForm').attr('action', `/panen/${noBukti}`);
                $('#panenForm').find('input[name="_method"]').remove();
                $('#panenForm').append('<input type="hidden" name="_method" value="PUT">');

                // Change modal title
                $('#panenModalTitle').text(`Edit Panen: ${noBukti}`);

                // Change submit button text
                $('#submitBtnText').html(`
                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Update Data Panen
                `);

                // Show auto-calculate button in edit mode
                $('#autoCalculateBtn').show();

                // Show master harga button in edit mode
                $('#masterHargaBtn').show();

                // Open modal
                const modalEl = document.getElementById('panenModal');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'Gagal memuat data panen'
                });
            }
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Gagal memuat data panen'
            });
        }
    });
};

// Master Harga Modal Functions
let masterHargaList = [];
let masterHargaCurrentPage = 1;
let masterHargaPerPage = 10;
let currentNoBukti = '';

function openMasterHargaModal() {
    const noBukti = $('#no_bukti').val();

    if (!noBukti || noBukti.includes('XXX')) {
        Swal.fire({
            icon: 'warning',
            title: 'Peringatan',
            text: 'Silakan simpan data panen terlebih dahulu sebelum mengelola master harga'
        });
        return;
    }

    currentNoBukti = noBukti;
    loadMasterHarga(noBukti);

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

async function loadMasterHarga(noBukti) {
    try {
        const response = await fetch(`/panen/master-harga/${noBukti}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
            }
        });

        if (!response.ok) {
            throw new Error('Failed to fetch master harga');
        }

        const result = await response.json();

        if (result.success) {
            masterHargaList = result.data || [];
            masterHargaCurrentPage = 1;
            renderMasterHargaTable();
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: result.message || 'Gagal memuat master harga'
            });
        }
    } catch (error) {
        console.error('Error loading master harga:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Gagal memuat master harga'
        });
    }
}

function renderMasterHargaTable() {
    const tbody = $('#masterHargaTableBody');
    tbody.empty();

    // Filter data based on search
    const searchTerm = $('#searchHarga').val().toLowerCase();
    let filteredData = masterHargaList;

    if (searchTerm) {
        filteredData = masterHargaList.filter(item =>
            item.ukuran.toString().includes(searchTerm) ||
            item.harga.toString().includes(searchTerm)
        );
    }

    // Pagination
    const startIndex = (masterHargaCurrentPage - 1) * masterHargaPerPage;
    const endIndex = startIndex + masterHargaPerPage;
    const paginatedData = filteredData.slice(startIndex, endIndex);

    if (paginatedData.length === 0) {
        tbody.html('<tr><td colspan="5" class="text-center text-muted">Tidak ada data harga</td></tr>');
        return;
    }

    paginatedData.forEach(function(item, index) {
        const actualIndex = startIndex + index;
        const row = `
            <tr data-index="${actualIndex}">
                <td>${startIndex + index + 1}</td>
                <td>
                    <input type="number" class="form-control" value="${item.ukuran}"
                           step="0.1" min="0"
                           onchange="updateMasterHargaItem(${actualIndex}, 'ukuran', this.value)">
                </td>
                <td>
                    <input type="text" class="form-control text-end" value="${item.harga > 0 ? formatNumberInputFixed(item.harga, 0) : ''}"
                           onchange="updateMasterHargaItem(${actualIndex}, 'harga', this.value)">
                </td>
                <td>
                    <small class="text-muted">${item.updated_at || '-'}</small>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger" onclick="deleteMasterHargaItem(${actualIndex})">
                        <svg width="12" height="12" 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>
        `;
        tbody.append(row);
    });

    renderMasterHargaPagination(filteredData.length);
}

function renderMasterHargaPagination(totalItems) {
    const totalPages = Math.ceil(totalItems / masterHargaPerPage);
    const pagination = $('#masterHargaPagination');
    pagination.empty();

    if (totalPages <= 1) return;

    // Previous button
    const prevDisabled = masterHargaCurrentPage === 1 ? 'disabled' : '';
    pagination.append(`
        <button class="btn btn-sm btn-outline-secondary" ${prevDisabled} onclick="changeMasterHargaPage(${masterHargaCurrentPage - 1})">
            Previous
        </button>
    `);

    // Page numbers
    for (let i = 1; i <= totalPages; i++) {
        const active = i === masterHargaCurrentPage ? 'active' : '';
        pagination.append(`
            <button class="btn btn-sm ${active ? 'btn-primary' : 'btn-outline-secondary'}" onclick="changeMasterHargaPage(${i})">
                ${i}
            </button>
        `);
    }

    // Next button
    const nextDisabled = masterHargaCurrentPage === totalPages ? 'disabled' : '';
    pagination.append(`
        <button class="btn btn-sm btn-outline-secondary" ${nextDisabled} onclick="changeMasterHargaPage(${masterHargaCurrentPage + 1})">
            Next
        </button>
    `);
}

function changeMasterHargaPage(page) {
    masterHargaCurrentPage = page;
    renderMasterHargaTable();
}

function filterMasterHarga() {
    masterHargaCurrentPage = 1;
    renderMasterHargaTable();
}

function addMasterHargaRow() {
    masterHargaList.push({
        id: null,
        ukuran: 0,
        harga: 0,
        updated_at: null
    });

    // Go to last page
    const totalPages = Math.ceil(masterHargaList.length / masterHargaPerPage);
    masterHargaCurrentPage = totalPages;

    renderMasterHargaTable();
}

async function saveAllMasterHarga() {
    // Filter items that need to be saved - must have valid ukuran and harga
    const itemsToSave = masterHargaList.filter(item => {
        const hasValidUkuran = item.ukuran !== undefined && item.ukuran !== null && item.ukuran > 0;
        const hasValidHarga = item.harga !== undefined && item.harga !== null && item.harga >= 0;
        return hasValidUkuran && hasValidHarga;
    });

    if (itemsToSave.length === 0) {
        Swal.fire({
            icon: 'info',
            title: 'Info',
            text: 'Tidak ada data valid untuk disimpan. Pastikan ukuran dan harga terisi dengan benar.'
        });
        return;
    }

    try {
        Swal.fire({
            title: 'Menyimpan...',
            text: 'Menyimpan data harga master',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        for (const item of itemsToSave) {
            const response = await fetch('/panen/master-harga', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                },
                body: JSON.stringify({
                    id: item.id,
                    no_bukti: currentNoBukti,
                    ukuran: item.ukuran,
                    harga: item.harga
                })
            });

            const result = await response.json();

            if (!response.ok || !result.success) {
                const errorMsg = result?.message || result?.errors?.join(', ') || 'Gagal menyimpan data';
                throw new Error(errorMsg);
            }

            if (result.data) {
                // Update the item with the returned ID
                if (!item.id && result.data.id) {
                    item.id = result.data.id;
                }
                item.updated_at = result.data.updated_at;
            }
        }

        Swal.close();

        Swal.fire({
            icon: 'success',
            title: 'Berhasil',
            text: 'Semua harga berhasil disimpan',
            timer: 2000,
            showConfirmButton: false
        });

        // Reload to get fresh data
        loadMasterHarga(currentNoBukti);

        // Clear price cache
        Object.keys(priceCache).forEach(key => {
            delete priceCache[key];
        });

    } catch (error) {
        Swal.close();
        console.error('Error saving master harga:', error);
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: 'Gagal menyimpan data harga'
        });
    }
}

function updateMasterHargaItem(index, field, value) {
    if (field === 'harga') {
        masterHargaList[index][field] = parseFormattedNumber(value) || 0;
    } else {
        masterHargaList[index][field] = parseFloat(value) || 0;
    }
}

async function deleteMasterHargaItem(index) {
    const item = masterHargaList[index];

    if (item.id) {
        Swal.fire({
            title: 'Hapus Harga?',
            text: `Anda yakin ingin menghapus harga untuk ukuran ${item.ukuran}?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal'
        }).then(async (result) => {
            if (result.isConfirmed) {
                try {
                    const response = await fetch(`/panen/master-harga/${item.id}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                        }
                    });

                    if (!response.ok) {
                        throw new Error('Failed to delete');
                    }

                    const result = await response.json();

                    if (result.success) {
                        masterHargaList.splice(index, 1);

                        // Adjust page if needed
                        const totalPages = Math.ceil(masterHargaList.length / masterHargaPerPage);
                        if (masterHargaCurrentPage > totalPages && masterHargaCurrentPage > 1) {
                            masterHargaCurrentPage--;
                        }

                        renderMasterHargaTable();

                        Swal.fire({
                            icon: 'success',
                            title: 'Terhapus!',
                            text: 'Harga berhasil dihapus',
                            timer: 1500,
                            showConfirmButton: false
                        });

                        // Clear price cache
                        Object.keys(priceCache).forEach(key => {
                            delete priceCache[key];
                        });
                    } else {
                        throw new Error(result.message || 'Failed to delete');
                    }
                } catch (error) {
                    console.error('Error deleting master harga:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: 'Gagal menghapus harga'
                    });
                }
            }
        });
    } else {
        // Just remove from list if it's not saved yet
        masterHargaList.splice(index, 1);
        renderMasterHargaTable();
    }
}

// ==================== GROUPED PANEN FUNCTIONS ====================
let groupedPanenList = [];
let groupedPanenCurrentPage = 1;
let groupedPanenPerPage = 10;

// Open Edit Grouped Modal
function openEditGroupedModal() {
    loadGroupedPanen();

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

// Load Grouped Panen Data
async function loadGroupedPanen() {
    try {
        const response = await fetch('/panen/grouped', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
            }
        });

        if (!response.ok) {
            throw new Error('Failed to fetch grouped panen');
        }

        const result = await response.json();

        if (result.success) {
            groupedPanenList = result.data || [];
            groupedPanenCurrentPage = 1;
            renderGroupedPanenTable();
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: result.message || 'Gagal memuat data panen'
            });
        }
    } catch (error) {
        console.error('Error loading grouped panen:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Gagal memuat data panen'
        });
    }
}

// Render Grouped Panen Table
function renderGroupedPanenTable() {
    const tbody = $('#groupedPanenTableBody');
    tbody.empty();

    // Filter data based on search
    const searchTerm = $('#searchGroupedPanen').val().toLowerCase();
    let filteredData = groupedPanenList;

    if (searchTerm) {
        filteredData = groupedPanenList.filter(item =>
            (item.no_bukti || '').toLowerCase().includes(searchTerm) ||
            (item.customer || '').toLowerCase().includes(searchTerm)
        );
    }

    // Pagination
    const startIndex = (groupedPanenCurrentPage - 1) * groupedPanenPerPage;
    const endIndex = startIndex + groupedPanenPerPage;
    const paginatedData = filteredData.slice(startIndex, endIndex);

    if (paginatedData.length === 0) {
        tbody.html('<tr><td colspan="7" class="text-center text-muted">Tidak ada data panen</td></tr>');
        return;
    }

    paginatedData.forEach(function(item, index) {
        const actualIndex = startIndex + index;

        // Format tanggal
        const tanggal = item.tanggal ? new Date(item.tanggal).toLocaleDateString('id-ID') : '-';

        const row = `
            <tr data-index="${actualIndex}">
                <td><strong>${item.no_bukti || '-'}</strong></td>
                <td>${tanggal}</td>
                <td>${item.customer || '-'}</td>
                <td style="text-align: center;">${formatNumberInputFixed(item.total_qty || 0, 2)}</td>
                <td style="text-align: right;">Rp ${formatNumberInputFixed(item.total_value || 0, 0)}</td>
                <td style="text-align: center;">${item.item_count || 0}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" onclick="editPanenFromGrouped('${item.no_bukti}')" title="Edit Detail">
                        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                        Edit Detail
                    </button>
                </td>
            </tr>
        `;
        tbody.append(row);
    });

    renderGroupedPanenPagination(filteredData.length);
}

// Render Grouped Panen Pagination
function renderGroupedPanenPagination(totalItems) {
    const totalPages = Math.ceil(totalItems / groupedPanenPerPage);
    const pagination = $('#groupedPanenPagination');
    pagination.empty();

    if (totalPages <= 1) return;

    // Previous button
    const prevDisabled = groupedPanenCurrentPage === 1 ? 'disabled' : '';
    pagination.append(`
        <button class="btn btn-sm btn-outline-secondary" ${prevDisabled} onclick="changeGroupedPanenPage(${groupedPanenCurrentPage - 1})">
            Previous
        </button>
    `);

    // Page numbers
    for (let i = 1; i <= totalPages; i++) {
        const active = i === groupedPanenCurrentPage ? 'active' : '';
        pagination.append(`
            <button class="btn btn-sm ${active ? 'btn-primary' : 'btn-outline-secondary'}" onclick="changeGroupedPanenPage(${i})">
                ${i}
            </button>
        `);
    }

    // Next button
    const nextDisabled = groupedPanenCurrentPage === totalPages ? 'disabled' : '';
    pagination.append(`
        <button class="btn btn-sm btn-outline-secondary" ${nextDisabled} onclick="changeGroupedPanenPage(${groupedPanenCurrentPage + 1})">
            Next
        </button>
    `);
}

// Change Grouped Panen Page
function changeGroupedPanenPage(page) {
    groupedPanenCurrentPage = page;
    renderGroupedPanenTable();
}

// Filter Grouped Panen
function filterGroupedPanen() {
    groupedPanenCurrentPage = 1;
    renderGroupedPanenTable();
}

// Edit Panen from Grouped Modal (this replaces the old editPanen function)
function editPanenFromGrouped(noBukti) {
    // Close grouped modal first
    const groupedModalEl = document.getElementById('editGroupedModal');
    const groupedModal = bootstrap.Modal.getInstance(groupedModalEl);
    if (groupedModal) {
        groupedModal.hide();
    }

    // Now call the original editPanen function
    editPanen(noBukti);
}
</script>
@endpush
@endsection