@extends('layouts.app')
@section('title', 'Create Shipment')

@section('css')
    <link href="{{ asset('assets/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
    <style>
        .form-control:disabled {
            background-color: #f8f9fa !important;
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
@endsection

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Create New Shipment</h4>

                    <form id="createShipmentForm" action="{{ route('shipments.store') }}" method="POST">
                        @csrf

                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="customer_id">Marking Code <span class="text-danger">*</span></label>
                                    <select class="form-control select2 @error('customer_id') is-invalid @enderror"
                                        id="customer_id" name="customer_id" required>
                                        <option value="">-- Select Marking Code --</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                                                {{ $customer->user->name }} - {{ $customer->company_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('customer_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="rate_plan_id">Rate Plan <span class="text-danger">*</span></label>
                                    <select class="form-control select2 @error('rate_plan_id') is-invalid @enderror"
                                        id="rate_plan_id" name="rate_plan_id" required>
                                        <option value="">-- Select Rate Plan --</option>
                                        @foreach($ratePlans as $ratePlan)
                                            <option value="{{ $ratePlan->id }}" data-price-cbm="{{ $ratePlan->price_per_cbm }}"
                                                data-price-kg="{{ $ratePlan->price_per_kg }}"
                                                {{ old('rate_plan_id') == $ratePlan->id ? 'selected' : '' }}>
                                                {{ $ratePlan->name }} (CBM: {{ number_format($ratePlan->price_per_cbm, 2) }}, KG: {{ number_format($ratePlan->price_per_kg, 2) }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('rate_plan_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="resi_number">{{ __('invoice_page.resi') }} Number <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('resi_number') is-invalid @enderror"
                                        id="resi_number" name="resi_number" value="{{ old('resi_number') }}" placeholder="Enter resi number manually" required>
                                    <small class="form-text text-muted">Enter a unique resi number manually</small>
                                    @error('resi_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="discount_amount">Discount Amount</label>
                                    <input type="number" step="0.01" class="form-control @error('discount_amount') is-invalid @enderror"
                                        id="discount_amount" name="discount_amount" value="{{ old('discount_amount', 0) }}">
                                    @error('discount_amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="date_received">Date Received <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('date_received') is-invalid @enderror"
                                        id="date_received" name="date_received" value="{{ old('date_received', date('Y-m-d')) }}" required>
                                    @error('date_received')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h5>Shipment Items</h5>

                        <div id="items-container">
                            <!-- Item template will be added here dynamically -->
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-12 text-right">
                                <button type="button" class="btn btn-info" id="add-item-btn">
                                    <i class="mdi mdi-plus"></i> Add Item
                                </button>
                            </div>
                        </div>

                        <!-- Total Calculation Section -->
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div class="card border-primary">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0"><i class="mdi mdi-calculator"></i> Perhitungan Total Biaya</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Total Volume (CBM)</label>
                                            <input type="text" class="form-control" id="total-volume" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Total Weight (KG)</label>
                                            <input type="text" class="form-control" id="total-weight" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Berat Tercover (CBM × 600kg)</label>
                                            <input type="text" class="form-control" id="volume-weight" readonly>
                                            <small class="text-muted">Berat maksimal yang tercover oleh volume</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><strong>Hasil CBM (Volume + Kelebihan)</strong></label>
                                            <input type="text" class="form-control font-weight-bold" id="chargeable-weight" readonly>
                                            <small class="text-muted">Volume asli + kelebihan dari berat</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Harga per CBM (Rate Plan)</label>
                                            <input type="text" class="form-control" id="cost-per-cbm" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Harga per KG (Calculated)</label>
                                            <input type="text" class="form-control" id="cost-per-kg" readonly>
                                            <small class="text-muted">Dihitung: (Hasil CBM × Harga CBM) ÷ Total Berat</small>
                                        </div>
                                    </div>
                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label>Biaya CBM (Hasil CBM × Rate)</label>
                                                            <input type="text" class="form-control" id="volume-cost" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label>Biaya KG (Total Berat × Rate KG)</label>
                                                            <input type="text" class="form-control" id="weight-cost" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label><strong>Total Biaya Akhir</strong></label>
                                                            <input type="text" class="form-control font-weight-bold" id="chargeable-cost" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label><strong>Biaya Asuransi</strong></label>
                                                            <input type="text" class="form-control" id="insurance-cost" readonly>
                                                            <small class="text-muted">Asuransi untuk nilai barang > 20jt/CBM</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Discount Amount</label>
                                                    <input type="text" class="form-control" id="discount-display" readonly>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label><strong>Sub Total</strong></label>
                                                    <input type="text" class="form-control font-weight-bold" id="sub-total" readonly>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="total_charge"><strong>{{ __('invoice_page.total') }} PEMBAYARAN</strong></label>
                                                    <input type="number" step="0.01" class="form-control font-weight-bold text-primary @error('total_charge') is-invalid @enderror"
                                                           id="total_charge" name="total_charge" value="{{ old('total_charge', 0) }}" style="font-size: 18px;">
                                                    <small class="form-text text-muted">Total yang harus dibayar customer</small>
                                                    @error('total_charge')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <small class="text-muted">
                                                    <i class="mdi mdi-information"></i>
                                                    <strong>Cara Perhitungan:</strong>
                                                </small>
                                                <ul class="small text-muted mb-0">
                                                    <li><strong>Rumus Baru (1 CBM = Maks 600kg):</strong></li>
                                                    <li><strong>Total Volume:</strong> Volume per unit × Cartons</li>
                                                    <li><strong>Total Weight:</strong> Weight per unit × Cartons</li>
                                                    <li><strong>Berat Tercover:</strong> Total CBM × 600kg</li>
                                                    <li><strong>Selisih Berat:</strong> Total Berat - Berat Tercover (jika positif)</li>
                                                    <li><strong>Kelebihan CBM:</strong> Selisih Berat ÷ 2000</li>
                                                    <li><strong>Hasil CBM:</strong> Total Volume + Kelebihan CBM</li>
                                                    <li><strong>Harga per KG:</strong> (Hasil CBM × Harga Per CBM) ÷ Total Berat</li>
                                                    <li><strong>Jika Berat > 600kg/CBM:</strong> Gunakan harga per KG langsung</li>
                                                    <li class="text-warning"><strong>Asuransi:</strong> Nilai > 20jt IDR/CBM dikenakan tambahan 1% per kelipatan 10jt</li>
                                                    <li class="text-info"><strong>Quantity:</strong> HANYA untuk data per karton, TIDAK mempengaruhi perhitungan biaya</li>
                                                    <li class="text-success"><strong>Cartons:</strong> Mempengaruhi perhitungan volume dan berat total</li>
                                                    <li><strong>Total Final:</strong> Biaya Pengiriman + Biaya Asuransi - Discount</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <div class="row mt-4">
                            <div class="col-md-12 text-right">
                                <a href="{{ route('shipments.index') }}" class="btn btn-secondary">{{ __('buttons.cancel') }}</a>
                                <button type="submit" class="btn btn-primary">Create Shipment</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Item Template (Hidden) -->
<template id="item-template">
    <div class="item-row border p-3 mb-3 rounded bg-light">
        <div class="row">
            <div class="col-md-11">
                <h6>Item <span class="item-number"></span></h6>
            </div>
            <div class="col-md-1 text-right">
                <button type="button" class="btn btn-sm btn-danger remove-item-btn">
                    <i class="mdi mdi-delete"></i>
                </button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label>Description <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" name="items[__index__][description]" required>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="">Product Name</label>
                    <input type="text" class="form-control" name="items[__index__][product_name]" placeholder="Enter product name">
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label for="">Category</label>
                    <select name="items[__index__][category_id]" class="form-control">
                        <option value="" selected disabled>===== Choose Category =====</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>{{ __('invoice_page.barcode') }}</label>
                    <input type="text" class="form-control" name="items[__index__][barcode]" placeholder="Enter {{ __('invoice_page.barcode') }}">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Cartons</label>
                    <input type="number" class="form-control" name="items[__index__][cartons]" min="0" placeholder="Number of cartons">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label>RMB</label>
                    <input type="number" step="0.01" class="form-control" name="items[__index__][rmb]" min="0" placeholder="RMB value">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label>Length (cm) <span class="text-danger">*</span></label>
                    <input type="number" class="form-control dimension-input" name="items[__index__][length_m]" min="0" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Width (cm) <span class="text-danger">*</span></label>
                    <input type="number" class="form-control dimension-input" name="items[__index__][width_m]" min="0" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Height (cm) <span class="text-danger">*</span></label>
                    <input type="number" class="form-control dimension-input" name="items[__index__][height_m]" min="0" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Volume (CBM) - Total per Item</label>
                    <input type="text" class="form-control volume-display" readonly>
                    <small class="form-text text-muted">Calculated: (L×W×H÷1,000,000) × Cartons</small>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label>Weight per Unit (kg) <span class="text-danger">*</span></label>
                    <input type="number" class="form-control weight-input" name="items[__index__][weight_kg]" min="0" step="0.01" required>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>Quantity (for data only) <span class="text-danger">*</span></label>
                    <input type="number" class="form-control quantity-input" name="items[__index__][quantity]" min="1" value="1" required>
                    <small class="form-text text-muted">Hanya untuk pendataan per karton</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>Total Weight (kg) for Calculation</label>
                    <input type="number" class="form-control total-weight-display" step="0.01" readonly>
                    <small class="form-text text-muted">Weight per unit × Cartons</small>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Price Per CBM (Auto from Rate Plan)</label>
                    <div class="input-group">
                        <input type="number" step="0.01" class="form-control item-price-cbm" name="items[__index__][price_per_cbm]" readonly>
                        <div class="input-group-append">
                            <span class="input-group-text bg-secondary text-white"><i class="mdi mdi-lock"></i></span>
                        </div>
                    </div>
                    <small class="form-text text-muted">Auto-filled from selected rate plan</small>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label>Price Per KG (Auto-calculated)</label>
                    <div class="input-group">
                        <input type="number" step="0.01" class="form-control item-price-kg" name="items[__index__][price_per_kg]" readonly>
                        <div class="input-group-append">
                            <span class="input-group-text bg-secondary text-white"><i class="mdi mdi-lock"></i></span>
                        </div>
                    </div>
                    <small class="form-text text-muted">Auto-calculated using formula: (Hasil CBM × CBM Price) ÷ Total Weight</small>
                </div>
            </div>
        </div>
    </div>
</template>
@endsection

@section('footer')
<script>
    $(document).ready(function() {
        // Initialize Select2
        $('.select2').select2();

        // Rate plan change event (removed - now handled below)

        // Item counter
        let itemCount = 0;

        // Add first item by default
        addItem();

        // Add item button handler
        $('#add-item-btn').click(function() {
            addItem();
        });

        // Remove item button handler (delegated)
        $(document).on('click', '.remove-item-btn', function() {
            if ($('.item-row').length > 1) {
                $(this).closest('.item-row').remove();
                renumberItems();
            } else {
                alert('At least one item is required.');
            }
        });

        // Calculate volume when dimensions or cartons change (delegated)
        $(document).on('input', '.dimension-input, input[name$="[cartons]"]', function() {
            const row = $(this).closest('.item-row');
            calculateVolume(row);
            calculateTotalCost();
        });

        // Calculate total weight when weight or cartons changes
        $(document).on('input', '.weight-input, input[name$="[cartons]"]', function() {
            const row = $(this).closest('.item-row');
            calculateTotalWeight(row);
            calculateTotalCost();
        });

        // Update total weight display when quantity changes (HANYA untuk display, TIDAK untuk perhitungan)
        $(document).on('input', '.quantity-input', function() {
            const row = $(this).closest('.item-row');
            // Quantity tidak mempengaruhi calculation lagi
        });

        // Calculate total when weight, pricing, cartons, or RMB changes
        $(document).on('input', '.weight-input, .item-price-cbm, .item-price-kg, input[name$="[rmb]"], input[name$="[cartons]"]', function() {
            calculateTotalCost();
        });

        // Track when user manually modifies price per kg field
        $(document).on('input focus', '.item-price-kg', function() {
            $(this).data('user-modified', true);
        });

        // Reset user-modified flag when clear button is used
        $(document).on('click', '.clear-item-kg-btn', function() {
            const input = $(this).closest('.input-group').find('.item-price-kg');
            input.removeData('user-modified');
            input.val('').trigger('input');

            // Auto-fill with rate plan price if available
            const ratePlanOption = $('#rate_plan_id').find('option:selected');
            const ratePlanKg = parseFloat(ratePlanOption.data('price-kg')) || 0;
            if (ratePlanKg > 0) {
                input.val(ratePlanKg);
            }
        });

        // Recalculate when discount changes
        $('#discount_amount').on('input', function() {
            calculateTotalCost();
        });

        // Variable to store current exchange rate (same default as ExchangeRateService getFallbackRate)
        let currentRmbToIdrRate = 2300; // Default fallback rate (same as ExchangeRateService ultimate fallback)

        // Function to get real-time RMB to IDR exchange rate
        async function getCurrentExchangeRate() {
            try {
                // Use the same endpoint as ExchangeRateService (same as InsuranceService uses)
                const response = await fetch('/api/exchange-rate/rmb-to-idr');
                if (response.ok) {
                    const data = await response.json();
                    if (data.success && data.data && data.data.rate) {
                        currentRmbToIdrRate = parseFloat(data.data.rate);
                        console.log('Updated exchange rate (exactly matching ExchangeRateService):', currentRmbToIdrRate);
                        return currentRmbToIdrRate;
                    }
                }
            } catch (error) {
                console.warn('Failed to fetch exchange rate, using fallback (matching ExchangeRateService):', error);
            }
            return currentRmbToIdrRate;
        }

        // Get exchange rate on page load and log detailed info
        getCurrentExchangeRate().then(() => {
            console.log('=== EXCHANGE RATE DEBUGGING ===');
            console.log('Current exchange rate being used:', currentRmbToIdrRate);
            console.log('This should match ExchangeRateService::getRmbToIdrRate()');

            // Test calculation with known values to match InsuranceService
            const testRmb = 200000;
            const testVolume = 0.00625; // 50*50*50/1000000 * 50 cartons
            const testValueInIdr = testRmb * currentRmbToIdrRate;
            const testValuePerCbm = testValueInIdr / testVolume;
            console.log('Test calculation preview:');
            console.log('RMB:', testRmb, 'Volume:', testVolume, 'CBM');
            console.log('Value in IDR:', testValueInIdr);
            console.log('Value per CBM:', testValuePerCbm);
            console.log('Expected InsuranceService result should be around: 19779840.0');
        });

        // Update exchange rate every 5 minutes
        setInterval(getCurrentExchangeRate, 300000); // 5 minutes

        // Recalculate when rate plan changes
        $('#rate_plan_id').change(function() {
            updateItemPrices();
            updatePlaceholders();
            calculateTotalCost();
        }).trigger('change');

        // Clear button handlers for item pricing
        $(document).on('click', '.clear-item-cbm-btn', function() {
            const input = $(this).closest('.input-group').find('.item-price-cbm');
            input.val('').trigger('input');

            // Auto-fill with rate plan price if available
            const ratePlanOption = $('#rate_plan_id').find('option:selected');
            const ratePlanCbm = parseFloat(ratePlanOption.data('price-cbm')) || 0;
            if (ratePlanCbm > 0) {
                input.val(ratePlanCbm);
            }
        });

        // Function to calculate total cost
        function calculateTotalCost() {
            let totalVolume = 0;
            let totalWeight = 0;
            let totalChargeableCost = 0;
            let totalInsuranceCost = 0;

            // Get rate plan prices
            const ratePlanOption = $('#rate_plan_id').find('option:selected');
            const ratePlanCbm = parseFloat(ratePlanOption.data('price-cbm')) || 0;
            const ratePlanKg = parseFloat(ratePlanOption.data('price-kg')) || 0;

            // Calculate totals from all items
            $('.item-row').each(function() {
                const length = parseFloat($(this).find('input[name$="[length_m]"]').val()) || 0;
                const width = parseFloat($(this).find('input[name$="[width_m]"]').val()) || 0;
                const height = parseFloat($(this).find('input[name$="[height_m]"]').val()) || 0;
                const weight = parseFloat($(this).find('input[name$="[weight_kg]"]').val()) || 0;
                const quantity = parseFloat($(this).find('input[name$="[quantity]"]').val()) || 1;
                const cartons = parseFloat($(this).find('input[name$="[cartons]"]').val()) || 1;

                // Calculate volume in cubic meters (CBM) - panjang × lebar × tinggi dalam CM, dibagi 1.000.000
                const itemVolume = (length * width * height) / 1000000; // CBM per unit

                // REVISI: Cartons × Volume = Total Volume
                const itemTotalVolume = itemVolume * cartons;
                totalVolume += itemTotalVolume;

                // REVISI: Weight per Unit × Cartons = Total Weight
                const itemTotalWeight = weight * cartons;
                totalWeight += itemTotalWeight;

                // Apply new calculation logic per item - REVISI: Cartons mempengaruhi perhitungan
                // const itemTotalVolume = itemVolume * quantity; // Volume boleh dikali quantity
                // const itemTotalWeight = weight; // Weight TIDAK dikali quantity untuk perhitungan biaya

                // Check if weight exceeds 600kg per CBM
                const weightPerCbm = itemTotalVolume > 0 ? itemTotalWeight / itemTotalVolume : 0;

                // Calculate the price per kg based on the formula
                let calculatedPricePerKg = 0;
                let itemChargeableCost = 0;

                // Get item-specific CBM pricing or use rate plan default
                const itemCbmPrice = parseFloat($(this).find('.item-price-cbm').val()) || ratePlanCbm;

                // Debug logging untuk memastikan cartons mempengaruhi perhitungan
                console.log('Item Calculation Debug:', {
                    itemIndex: $(this).index(),
                    length: length,
                    width: width,
                    height: height,
                    weight: weight + ' kg (per unit)',
                    quantity: quantity + ' (untuk data pendataan)',
                    cartons: cartons + ' (mempengaruhi calculation)',
                    itemVolume: itemVolume.toFixed(4) + ' CBM per unit',
                    itemTotalVolume: itemTotalVolume.toFixed(4) + ' CBM total (volume × cartons)',
                    itemTotalWeight: itemTotalWeight.toFixed(2) + ' kg total (weight × cartons)',
                    weightPerCbm: weightPerCbm.toFixed(2) + ' kg/CBM'
                });

                if (weightPerCbm > 600) {
                    // If weight > 600kg/cbm, use rate plan KG pricing directly
                    calculatedPricePerKg = ratePlanKg;
                    itemChargeableCost = itemTotalWeight * calculatedPricePerKg;
                } else {
                    // Use CBM-based calculation with new formula to derive price per kg
                    // 1. Berat Tercover = Volume × 600kg
                    const beratTercover = itemTotalVolume * 600;

                    // 2. Selisih Berat = Total Berat - Berat Tercover
                    const selisihBerat = Math.max(0, itemTotalWeight - beratTercover);

                    // 3. Kelebihan CBM = Selisih Berat ÷ 2000
                    const kelebihanCbm = selisihBerat / 2000;

                    // 4. Hasil CBM = Total Volume + Kelebihan CBM
                    const hasilCbm = itemTotalVolume + kelebihanCbm;

                    // 5. Calculate cost based on CBM
                    itemChargeableCost = hasilCbm * itemCbmPrice;

                    // 6. Calculate price per kg: (Hasil CBM × Harga Per CBM) ÷ Total Berat
                    if (itemTotalWeight > 0) {
                        calculatedPricePerKg = itemChargeableCost / itemTotalWeight;
                    }
                }

                // Auto-populate the price per kg field with calculated value
                const kgPriceInput = $(this).find('.item-price-kg');
                if (!kgPriceInput.data('user-modified')) {
                    kgPriceInput.val(calculatedPricePerKg.toFixed(2));
                }

                // Use the calculated or user-entered price per kg for final calculation
                const finalItemKgPrice = parseFloat(kgPriceInput.val()) || calculatedPricePerKg;

                // Debug logging for price per kg calculation
                console.log('Item Price Per KG Calculation:', {
                    itemIndex: $(this).index(),
                    weightPerCbm: weightPerCbm.toFixed(2),
                    useKgDirectly: weightPerCbm > 600,
                    itemTotalVolume: itemTotalVolume.toFixed(4),
                    itemTotalWeight: itemTotalWeight.toFixed(2),
                    itemCbmPrice: itemCbmPrice,
                    calculatedPricePerKg: calculatedPricePerKg.toFixed(2),
                    finalItemKgPrice: finalItemKgPrice.toFixed(2),
                    itemChargeableCost: itemChargeableCost.toFixed(2)
                });

                totalChargeableCost += itemChargeableCost;

                // Calculate insurance cost using same logic as InsuranceService
                const rmbValue = parseFloat($(this).find('input[name$="[rmb]"]').val()) || 0;

                if (rmbValue > 0 && itemTotalVolume > 0) {
                    // Convert RMB to IDR using current exchange rate
                    const valueInIdr = rmbValue * currentRmbToIdrRate;

                    // Calculate value per CBM dalam IDR
                    const valuePerCbmIdr = valueInIdr / itemTotalVolume;

                    // Standard threshold: 20,000,000 IDR per CBM (same as InsuranceService)
                    const standardThreshold = 20000000; // 20 juta IDR

                    console.log('Insurance Calculation Debug:', {
                        rmbValue: rmbValue,
                        exchangeRate: currentRmbToIdrRate,
                        valueInIdr: valueInIdr,
                        itemTotalVolume: itemTotalVolume,
                        valuePerCbmIdr: valuePerCbmIdr,
                        standardThreshold: standardThreshold,
                        exceedsThreshold: valuePerCbmIdr > standardThreshold,
                        // Additional debugging for comparison with InsuranceService
                        volumeDebug: {
                            length: parseFloat($(this).find('input[name$="[length_m]"]').val()),
                            width: parseFloat($(this).find('input[name$="[width_m]"]').val()),
                            height: parseFloat($(this).find('input[name$="[height_m]"]').val()),
                            cartons: parseFloat($(this).find('input[name$="[cartons]"]').val()),
                            volumePerUnit: (parseFloat($(this).find('input[name$="[length_m]"]').val()) * parseFloat($(this).find('input[name$="[width_m]"]').val()) * parseFloat($(this).find('input[name$="[height_m]"]').val())) / 1000000,
                            totalVolumeCalc: itemTotalVolume
                        }
                    });

                    if (valuePerCbmIdr > standardThreshold) {
                        // Calculate excess amount (same logic as InsuranceService)
                        const excessAmount = valuePerCbmIdr - standardThreshold;

                        // Calculate how many 10 million IDR increments (same as InsuranceService)
                        const incrementSize = 10000000; // 10 juta IDR
                        const increments = Math.ceil(excessAmount / incrementSize);

                        // Calculate percentage: 1% per increment (same as InsuranceService)
                        const percentageRate = increments * 0.01; // 1% per increment

                        // Calculate insurance cost per CBM (FIXED: same as InsuranceService)
                        const insuranceCostPerCbm = excessAmount * percentageRate;

                        // Calculate total insurance cost for this item (same as InsuranceService)
                        const itemInsuranceCost = insuranceCostPerCbm * itemTotalVolume;
                        totalInsuranceCost += itemInsuranceCost;

                        console.log('Insurance Cost Calculated (matching InsuranceService):', {
                            excessAmount: excessAmount,
                            increments: increments,
                            percentageRate: (percentageRate * 100) + '%',
                            insuranceCostPerCbm: insuranceCostPerCbm,
                            itemInsuranceCost: itemInsuranceCost,
                            calculationFormula: 'excessAmount * percentageRate * itemTotalVolume',
                            // Detailed breakdown for comparison with InsuranceService
                            detailedCalculation: {
                                step1: 'RMB to IDR: ' + rmbValue + ' * ' + currentRmbToIdrRate + ' = ' + valueInIdr,
                                step2: 'Value per CBM: ' + valueInIdr + ' / ' + itemTotalVolume + ' = ' + valuePerCbmIdr,
                                step3: 'Excess amount: ' + valuePerCbmIdr + ' - ' + standardThreshold + ' = ' + excessAmount,
                                step4: 'Increments: ceil(' + excessAmount + ' / 10000000) = ' + increments,
                                step5: 'Percentage rate: ' + increments + ' * 0.01 = ' + percentageRate,
                                step6: 'Insurance cost per CBM: ' + excessAmount + ' * ' + percentageRate + ' = ' + insuranceCostPerCbm,
                                step7: 'Total insurance cost: ' + insuranceCostPerCbm + ' * ' + itemTotalVolume + ' = ' + itemInsuranceCost
                            }
                        });
                    }
                }
            });

            // Calculate overall metrics for display menggunakan rumus yang BENAR
            // RUMUS BENAR:
            // 1. Berat Tercover = Total Volume × 600kg
            const totalBeratTercover = totalVolume * 600;

            // 2. Selisih Berat = Total Berat Barang - Berat Tercover
            const totalSelisihBerat = Math.max(0, totalWeight - totalBeratTercover);

            // 3. Kelebihan CBM = Selisih Berat ÷ 2000
            const totalKelebihanCbm = totalSelisihBerat / 2000;

            // 4. Hasil CBM = Total Volume + Kelebihan CBM
            const totalHasilCbm = totalVolume + totalKelebihanCbm;

            // 5. Total Tagihan = Hasil CBM × Harga Per CBM
            const totalTagihan = totalHasilCbm * ratePlanCbm;

            // 6. Harga Per KG = Total Tagihan ÷ Berat Barang
            const calculatedPricePerKg = totalWeight > 0 ? totalTagihan / totalWeight : 0;

            // Override total chargeable cost dengan calculation yang benar
            totalChargeableCost = totalTagihan;

            console.log('RUMUS PERHITUNGAN YANG BENAR:', {
                step1_BeratTercover: totalBeratTercover.toFixed(2) + ' kg (Total Volume × 600kg)',
                step2_SelisihBerat: totalSelisihBerat.toFixed(2) + ' kg (Total Berat - Berat Tercover)',
                step3_KelebihanCBM: totalKelebihanCbm.toFixed(4) + ' CBM (Selisih Berat ÷ 2000)',
                step4_HasilCBM: totalHasilCbm.toFixed(4) + ' CBM (Total Volume + Kelebihan CBM)',
                step5_TotalTagihan: totalTagihan.toFixed(2) + ' (Hasil CBM × Harga Per CBM)',
                step6_HargaPerKG: calculatedPricePerKg.toFixed(2) + ' (Total Tagihan ÷ Berat Barang)',
                totalVolume: totalVolume.toFixed(4) + ' CBM (volume × cartons)',
                totalWeight: totalWeight.toFixed(2) + ' kg (weight × cartons)',
                ratePlanCbm: ratePlanCbm
            });

            // Get discount
            const discountAmount = parseFloat($('#discount_amount').val()) || 0;
            const subTotal = totalChargeableCost + totalInsuranceCost;
            const finalTotal = Math.max(0, subTotal - discountAmount);

            // Update display fields dengan hasil perhitungan yang BENAR
            $('#total-volume').val(totalVolume.toFixed(4));
            $('#total-weight').val(totalWeight.toFixed(2)); // weight × cartons
            $('#volume-weight').val(totalBeratTercover.toFixed(2)); // Berat Tercover (600kg/CBM)
            $('#chargeable-weight').val(totalHasilCbm.toFixed(4)); // Hasil CBM (sesuai rumus)
            $('#cost-per-cbm').val('Rp ' + formatNumber(ratePlanCbm));
            $('#cost-per-kg').val('Rp ' + formatNumber(calculatedPricePerKg)); // Harga per KG sesuai rumus
            $('#volume-cost').val('Rp ' + formatNumber(totalHasilCbm * ratePlanCbm)); // CBM Cost
            $('#weight-cost').val('Rp ' + formatNumber(totalWeight * calculatedPricePerKg)); // Weight Cost
            $('#chargeable-cost').val('Rp ' + formatNumber(totalChargeableCost)); // Total tagihan sesuai rumus
            $('#insurance-cost').val('Rp ' + formatNumber(totalInsuranceCost));
            $('#discount-display').val('Rp ' + formatNumber(discountAmount));
            $('#sub-total').val('Rp ' + formatNumber(subTotal));
            $('#total_charge').val(finalTotal.toFixed(2));

            // Update additional info displays (untuk debugging dan transparansi)
            console.log('=== PERHITUNGAN AKHIR (CARTONS MEMPENGARUHI CALCULATION) ===', {
                rumus: 'Volume × Cartons = Total Volume, Weight × Cartons = Total Weight, Berat Tercover = Volume × 600kg → Selisih = Berat - Tercover → Kelebihan CBM = Selisih ÷ 2000 → Hasil CBM = Volume + Kelebihan → Tagihan = Hasil CBM × Harga CBM → Harga/KG = Tagihan ÷ Berat',
                totalVolume: totalVolume.toFixed(4) + ' CBM (volume × cartons)',
                totalWeight: totalWeight.toFixed(2) + ' KG (weight × cartons)',
                beratTercover: totalBeratTercover.toFixed(2) + ' KG (Volume × 600kg)',
                selisihBerat: totalSelisihBerat.toFixed(2) + ' KG',
                kelebihanCbm: totalKelebihanCbm.toFixed(4) + ' CBM',
                hasilCbm: totalHasilCbm.toFixed(4) + ' CBM',
                hargaCbm: 'Rp ' + formatNumber(ratePlanCbm),
                totalTagihan: 'Rp ' + formatNumber(totalChargeableCost),
                hargaPerKg: 'Rp ' + formatNumber(calculatedPricePerKg) + '/KG',
                totalInsuranceCost: 'Rp ' + formatNumber(totalInsuranceCost) + ' (calculated using InsuranceService logic)',
                subTotal: 'Rp ' + formatNumber(subTotal),
                finalTotal: 'Rp ' + formatNumber(finalTotal)
            });
        }

        // Function to add new item
        function addItem() {
            const template = $('#item-template').html();
            const newItem = template.replace(/__index__/g, itemCount);
            $('#items-container').append(newItem);

            // Update item number
            $('.item-row').last().find('.item-number').text(itemCount + 1);

            // Auto-fill rate plan prices for new item
            updateItemPrices($('.item-row').last());

            // Update placeholders for new item
            updatePlaceholders($('.item-row').last());

            // Initialize total weight calculation for new item
            calculateTotalWeight($('.item-row').last());

            itemCount++;
            calculateTotalCost();
        }

        // Function to renumber items
        function renumberItems() {
            $('.item-row').each(function(index) {
                $(this).find('.item-number').text(index + 1);

                // Update input names with correct index
                $(this).find('input').each(function() {
                    const name = $(this).attr('name');
                    if (name) {
                        $(this).attr('name', name.replace(/items\[\d+\]/g, `items[${index}]`));
                    }
                });
            });
            calculateTotalCost();
        }

        // Function to calculate volume
        function calculateVolume(row) {
            const length = parseFloat(row.find('input[name$="[length_m]"]').val()) || 0;
            const width = parseFloat(row.find('input[name$="[width_m]"]').val()) || 0;
            const height = parseFloat(row.find('input[name$="[height_m]"]').val()) || 0;
            const cartons = parseFloat(row.find('input[name$="[cartons]"]').val()) || 1;

            // Calculate volume per unit in cubic meters (CBM) - jika input dalam CM, dibagi 1.000.000
            const volumePerUnit = (length * width * height) / 1000000;

            // REVISI: Cartons × Volume = Total Volume
            const totalVolume = volumePerUnit * cartons;

            if (totalVolume > 0) {
                row.find('.volume-display').val(totalVolume.toFixed(4));
                row.find('.volume-display').attr('title', `${volumePerUnit.toFixed(4)} CBM × ${cartons} cartons = ${totalVolume.toFixed(4)} CBM`);
            } else {
                row.find('.volume-display').val('');
            }
        }

        // Function to calculate total weight (now uses cartons as multiplier)
        function calculateTotalWeight(row) {
            const weight = parseFloat(row.find('input[name$="[weight_kg]"]').val()) || 0;
            const cartons = parseFloat(row.find('input[name$="[cartons]"]').val()) || 1;

            // REVISI: Weight per Unit × Cartons = Total Weight
            const totalWeight = weight * cartons;
            row.find('.total-weight-display').val(totalWeight.toFixed(2));

            // Add note to clarify
            const noteText = `${weight.toFixed(2)} kg × ${cartons} cartons = ${totalWeight.toFixed(2)} kg`;
            row.find('.total-weight-display').attr('title', noteText);
        }

        // Function to update placeholders based on selected rate plan
        function updatePlaceholders(targetRow = null) {
            // Get rate plan prices
            const ratePlanOption = $('#rate_plan_id').find('option:selected');
            const ratePlanCbm = parseFloat(ratePlanOption.data('price-cbm')) || 0;
            // const ratePlanKg = parseFloat(ratePlanOption.data('price-kg')) || 0;

            // If targetRow is specified, update only that row, otherwise update all rows
            const rowsToUpdate = targetRow ? targetRow : $('.item-row');

            rowsToUpdate.each(function() {
                const $row = $(this);

                const cbmInput = $row.find('.item-price-cbm');
                const kgInput = $row.find('.item-price-kg');

                // Update placeholders to show current rate plan prices
                if (ratePlanCbm > 0) {
                    cbmInput.attr('placeholder', `Rate plan: ${ratePlanCbm}`);
                } else {
                    cbmInput.attr('placeholder', 'Leave empty to use rate plan price');
                }

                // KG price is now calculated automatically
                kgInput.attr('placeholder', 'Auto-calculated from formula');
            });
        }

        // Function to update item prices based on selected rate plan
        function updateItemPrices(targetRow = null, forceUpdate = false) {
            // Get rate plan prices
            const ratePlanOption = $('#rate_plan_id').find('option:selected');
            const ratePlanCbm = parseFloat(ratePlanOption.data('price-cbm')) || 0;
            const ratePlanKg = parseFloat(ratePlanOption.data('price-kg')) || 0;

            console.log('Updating item prices:', {
                ratePlanCbm: ratePlanCbm,
                ratePlanKg: ratePlanKg,
                targetRow: targetRow ? 'specified' : 'all',
                forceUpdate: forceUpdate
            });

            // If targetRow is specified, update only that row, otherwise update all rows
            const rowsToUpdate = targetRow ? targetRow : $('.item-row');

            rowsToUpdate.each(function() {
                const $row = $(this);

                const cbmInput = $row.find('.item-price-cbm');
                const kgInput = $row.find('.item-price-kg');

                // Always auto-fill CBM price from rate plan (since it's readonly)
                if (ratePlanCbm > 0) {
                    cbmInput.val(ratePlanCbm);
                    console.log('Updated CBM price to:', ratePlanCbm);
                }

                // Auto-calculate KG price based on formula (will be calculated in calculateTotalCost)
                // This is just a placeholder, actual calculation happens in calculateTotalCost

                // For KG price, reset the user-modified flag and let the calculation handle it
                if (targetRow || forceUpdate) {
                    kgInput.removeData('user-modified');
                    // The calculateTotalCost function will auto-populate this based on the formula
                }
            });

            // Trigger recalculation to auto-populate KG prices based on formula
            calculateTotalCost();
        }

        // Helper function to format numbers
        function formatNumber(num) {
            return new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 2
            }).format(num);
        }
    });
</script>
@endsection