{{-- ═══════════════════════════════════════════════════════════════ --}}
{{-- SEKSI 4 — Verifikasi Biaya & Pendapatan                        --}}
{{-- Tab pane: #section4                                            --}}
{{-- ═══════════════════════════════════════════════════════════════ --}}
<div class="tab-pane fade" id="section4" role="tabpanel">

    <form method="POST" action="{{ route('fa.saveSection', $application->id) }}" id="section4Form">
        @csrf
        <input type="hidden" name="section" value="4">

        {{-- ── Panel RPC Live (sticky dalam seksi ini) ── --}}
        <div class="alert alert-info d-flex gap-3 align-items-start mb-4" id="rpcPanel"
             style="border-left:4px solid #0dcaf0 !important; position:sticky; top:72px; z-index:100;">
            <i class="bi bi-lightning-charge-fill fs-4 mt-1" style="color:#0dcaf0;"></i>
            <div class="flex-fill">
                <div class="fw-bold mb-1">RPC Aktual <span class="fw-normal text-muted small">(diperbarui otomatis setelah koreksi lapangan)</span></div>
                <div class="row g-2">
                    <div class="col-auto">
                        <span class="text-muted small">RPC:</span>
                        <span id="rpcValue" class="fw-bold ms-1">
                            {{ $fa->rpc_aktual ? 'Rp ' . number_format($fa->rpc_aktual, 0, ',', '.') : '—' }}
                        </span>
                    </div>
                    <div class="col-auto">
                        <span class="text-muted small">Maks. Plafond:</span>
                        <span id="plafondValue" class="fw-bold ms-1">
                            {{ $fa->maks_plafond_aktual ? 'Rp ' . number_format($fa->maks_plafond_aktual, 0, ',', '.') : '—' }}
                        </span>
                    </div>
                    <div class="col-auto">
                        <span id="rpcSpinner" class="spinner-border spinner-border-sm text-info d-none" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- B. Kesesuaian Biaya Siklus Usaha                       --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @php
            $savedBiayaUsaha = collect($fa->section4_data['biaya_usaha'] ?? []);
        @endphp
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-light">
                <h6 class="mb-0 fw-semibold">
                    <i class="bi bi-cash-stack me-2" style="color:var(--bpdlh-green);"></i>
                    B. Kesesuaian Biaya Siklus Usaha
                </h6>
            </div>
            <div class="card-body p-0">
                @if($application->biayaUsaha->count())
                <div class="table-responsive">
                    <table class="table table-bordered mb-0 align-middle table-sm">
                        <thead class="table-light">
                            <tr>
                                <th>Item Biaya</th>
                                <th class="text-end" style="width:160px;">Nilai di Sistem</th>
                                <th style="width:200px;">Hasil Verifikasi</th>
                                <th class="text-end" style="width:180px;">Nilai Aktual (Rp)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($application->biayaUsaha as $biaya)
                                @php
                                    $savedBiaya = $savedBiayaUsaha->get($biaya->id) ?? [];
                                    $savedHasil = $savedBiaya['hasil'] ?? 'sesuai';
                                    $savedAktual = $savedBiaya['nilai_aktual'] ?? $biaya->total;
                                @endphp
                                <tr>
                                    <td>{{ $biaya->nama_item }}</td>
                                    <td class="text-end fw-semibold">
                                        Rp {{ number_format($biaya->total, 0, ',', '.') }}
                                    </td>
                                    <td>
                                        <div class="d-flex gap-3">
                                            <div class="form-check">
                                                <input class="form-check-input hasil-radio"
                                                       type="radio"
                                                       name="biaya_usaha[{{ $biaya->id }}][hasil]"
                                                       value="sesuai"
                                                       id="bu_sesuai_{{ $biaya->id }}"
                                                       data-id="{{ $biaya->id }}"
                                                       @checked($savedHasil === 'sesuai')>
                                                <label class="form-check-label text-success fw-semibold"
                                                       for="bu_sesuai_{{ $biaya->id }}">Sesuai</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input hasil-radio"
                                                       type="radio"
                                                       name="biaya_usaha[{{ $biaya->id }}][hasil]"
                                                       value="tidak_sesuai"
                                                       id="bu_tidak_{{ $biaya->id }}"
                                                       data-id="{{ $biaya->id }}"
                                                       @checked($savedHasil === 'tidak_sesuai')>
                                                <label class="form-check-label text-danger fw-semibold"
                                                       for="bu_tidak_{{ $biaya->id }}">Beda</label>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <input type="number"
                                               name="biaya_usaha[{{ $biaya->id }}][nilai_aktual]"
                                               id="bu_aktual_{{ $biaya->id }}"
                                               class="form-control form-control-sm text-end rpc-trigger"
                                               value="{{ $savedAktual }}"
                                               min="0" step="1000"
                                               style="{{ $savedHasil === 'sesuai' ? 'display:none;' : '' }}"
                                               placeholder="Masukkan nilai aktual">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="p-3 text-muted small">Tidak ada data biaya siklus usaha.</div>
                @endif
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- C. Kesesuaian Pendapatan Utama                         --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @php
            $savedPU = $fa->section4_data['pendapatan_utama'] ?? [];
            $tanamanUtama = $application->tanamanUtama->first();
            $totalVolume = $application->tanamanUtama->sum(function ($t) {
                return $t->produksiBulanan->sum('jumlah_panen_kg');
            });
            $hargaSistem = $tanamanUtama?->harga_jual_per_kg ?? 0;
        @endphp
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-light">
                <h6 class="mb-0 fw-semibold">
                    <i class="bi bi-graph-up me-2" style="color:var(--bpdlh-green);"></i>
                    C. Kesesuaian Pendapatan Utama
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12 col-md-6">
                        <label class="form-label fw-semibold">
                            Harga/kg Aktual (Rp)
                            <span class="text-muted fw-normal small">
                                — Sistem: Rp {{ number_format($hargaSistem, 0, ',', '.') }}/kg
                            </span>
                        </label>
                        <input type="number"
                               name="pendapatan_utama[harga_per_kg]"
                               id="pu_harga"
                               class="form-control rpc-trigger"
                               value="{{ $savedPU['harga_per_kg'] ?? $hargaSistem }}"
                               min="0" step="100"
                               placeholder="Harga per kg aktual">
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label fw-semibold">
                            Volume Produksi Aktual (kg/tahun)
                            <span class="text-muted fw-normal small">
                                — Sistem: {{ number_format($totalVolume, 1) }} kg
                            </span>
                        </label>
                        <input type="number"
                               name="pendapatan_utama[volume_kg]"
                               id="pu_volume"
                               class="form-control rpc-trigger"
                               value="{{ $savedPU['volume_kg'] ?? $totalVolume }}"
                               min="0" step="1"
                               placeholder="Volume produksi aktual (kg/tahun)">
                    </div>
                    <div class="col-12">
                        <div class="alert alert-light border mb-0 py-2 px-3">
                            <span class="small text-muted">Estimasi pendapatan utama aktual:</span>
                            <span class="fw-bold ms-2" id="estimasiPendapatanUtama">
                                @php
                                    $hargaAktual  = $savedPU['harga_per_kg'] ?? $hargaSistem;
                                    $volumeAktual = $savedPU['volume_kg'] ?? $totalVolume;
                                    $estimasi = $hargaAktual * $volumeAktual;
                                @endphp
                                Rp {{ number_format($estimasi, 0, ',', '.') }}/tahun
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- D. Pendapatan Lainnya                                  --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @php
            $savedPL = collect($fa->section4_data['pendapatan_lain'] ?? []);
        @endphp
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-light">
                <h6 class="mb-0 fw-semibold">
                    <i class="bi bi-wallet2 me-2" style="color:var(--bpdlh-green);"></i>
                    D. Pendapatan Lainnya
                </h6>
            </div>
            <div class="card-body p-0">
                @if($application->pendapatanLain->count())
                <div class="table-responsive">
                    <table class="table table-bordered mb-0 align-middle table-sm">
                        <thead class="table-light">
                            <tr>
                                <th>Sumber Pendapatan</th>
                                <th class="text-end" style="width:160px;">Nilai Sistem (Rp/tahun)</th>
                                <th style="width:200px;">Hasil Verifikasi</th>
                                <th class="text-end" style="width:180px;">Nilai Aktual (Rp/tahun)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($application->pendapatanLain as $pl)
                                @php
                                    $savedPlItem = $savedPL->get($pl->id) ?? [];
                                    $plHasil     = $savedPlItem['hasil'] ?? 'sesuai';
                                    $plAktual    = $savedPlItem['nilai_aktual'] ?? $pl->pendapatan_per_tahun;
                                @endphp
                                <tr>
                                    <td>{{ $pl->jenis_usaha }}</td>
                                    <td class="text-end fw-semibold">
                                        Rp {{ number_format($pl->pendapatan_per_tahun, 0, ',', '.') }}
                                    </td>
                                    <td>
                                        <div class="d-flex gap-3">
                                            <div class="form-check">
                                                <input class="form-check-input hasil-radio"
                                                       type="radio"
                                                       name="pendapatan_lain[{{ $pl->id }}][hasil]"
                                                       value="sesuai"
                                                       id="pl_sesuai_{{ $pl->id }}"
                                                       data-id="{{ $pl->id }}"
                                                       data-prefix="pl"
                                                       @checked($plHasil === 'sesuai')>
                                                <label class="form-check-label text-success fw-semibold"
                                                       for="pl_sesuai_{{ $pl->id }}">Sesuai</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input hasil-radio"
                                                       type="radio"
                                                       name="pendapatan_lain[{{ $pl->id }}][hasil]"
                                                       value="tidak_sesuai"
                                                       id="pl_tidak_{{ $pl->id }}"
                                                       data-id="{{ $pl->id }}"
                                                       data-prefix="pl"
                                                       @checked($plHasil === 'tidak_sesuai')>
                                                <label class="form-check-label text-danger fw-semibold"
                                                       for="pl_tidak_{{ $pl->id }}">Beda</label>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <input type="number"
                                               name="pendapatan_lain[{{ $pl->id }}][nilai_aktual]"
                                               id="pl_aktual_{{ $pl->id }}"
                                               class="form-control form-control-sm text-end rpc-trigger"
                                               value="{{ $plAktual }}"
                                               min="0" step="1000"
                                               style="{{ $plHasil === 'sesuai' ? 'display:none;' : '' }}"
                                               placeholder="Nilai aktual">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="p-3 text-muted small">Tidak ada data pendapatan lain.</div>
                @endif
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- E. Biaya Hidup                                         --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @php
            $biayaHidupSistem = $application->biayaHidup->sum('nominal_per_bulan');
            $savedBH          = $fa->section4_data['biaya_hidup_total'] ?? $biayaHidupSistem;
        @endphp
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-light">
                <h6 class="mb-0 fw-semibold">
                    <i class="bi bi-house me-2" style="color:var(--bpdlh-green);"></i>
                    E. Biaya Hidup
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-3 align-items-end">
                    <div class="col-12 col-md-6">
                        <label class="form-label fw-semibold">
                            Total Biaya Hidup Aktual (Rp/bulan)
                            <span class="text-muted fw-normal small">
                                — Sistem: Rp {{ number_format($biayaHidupSistem, 0, ',', '.') }}/bulan
                            </span>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="number"
                                   name="biaya_hidup_total"
                                   id="bh_total"
                                   class="form-control rpc-trigger"
                                   value="{{ $savedBH }}"
                                   min="0" step="10000"
                                   placeholder="Total biaya hidup per bulan">
                            <span class="input-group-text">/bulan</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label fw-semibold">Catatan Biaya Hidup</label>
                        <input type="text"
                               name="catatan_biaya_hidup"
                               class="form-control"
                               value="{{ $fa->section4_data['catatan_biaya_hidup'] ?? '' }}"
                               placeholder="Catatan perbedaan biaya hidup (jika ada)">
                    </div>
                </div>
            </div>
        </div>

        {{-- Footer Nav --}}
        <div class="d-flex justify-content-between mt-3">
            <button type="button" class="btn btn-outline-secondary"
                    onclick="document.querySelector('#faTabs button[data-bs-target=\'#section3\']').click()">
                <i class="bi bi-arrow-left me-1"></i>Sebelumnya
            </button>
            <button type="submit" class="btn btn-success">
                Simpan & Lanjut <i class="bi bi-arrow-right ms-1"></i>
            </button>
        </div>

    </form>
</div>

@push('scripts')
<script>
(function () {
    const CSRF_TOKEN      = @json(csrf_token());
    const RPC_PREVIEW_URL = "{{ route('fa.rpcPreview', $application->id) }}";

    // ── Debounce utility ──
    function debounce(fn, ms) {
        let timer;
        return function (...args) {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), ms);
        };
    }

    // ── Show / hide nilai_aktual berdasarkan radio hasil ──
    function initHasilRadio() {
        document.querySelectorAll('.hasil-radio').forEach(function (radio) {
            radio.addEventListener('change', function () {
                const id     = this.dataset.id;
                const prefix = this.dataset.prefix || 'bu';
                const aktualInput = document.getElementById(prefix + '_aktual_' + id);
                if (!aktualInput) return;
                if (this.value === 'tidak_sesuai') {
                    aktualInput.style.display = '';
                    aktualInput.focus();
                } else {
                    aktualInput.style.display = 'none';
                }
                triggerRpcUpdate();
            });
        });
    }

    // ── Update estimasi pendapatan utama ──
    function updateEstimasi() {
        const harga  = parseFloat(document.getElementById('pu_harga')?.value  || 0);
        const volume = parseFloat(document.getElementById('pu_volume')?.value || 0);
        const el = document.getElementById('estimasiPendapatanUtama');
        if (el) {
            el.textContent = 'Rp ' + Math.round(harga * volume).toLocaleString('id-ID') + '/tahun';
        }
    }

    // ── AJAX RPC Preview ──
    function fetchRpcPreview() {
        const form    = document.getElementById('section4Form');
        const spinner = document.getElementById('rpcSpinner');
        if (!form) return;
        spinner?.classList.remove('d-none');

        const formData = new FormData(form);

        fetch(RPC_PREVIEW_URL, {
            method:  'POST',
            headers: { 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json' },
            body:    formData
        })
        .then(r => r.json())
        .then(data => {
            const rpcEl     = document.getElementById('rpcValue');
            const plafondEl = document.getElementById('plafondValue');
            if (rpcEl     && data.rpc_fmt)     rpcEl.textContent     = data.rpc_fmt;
            if (plafondEl && data.plafond_fmt) plafondEl.textContent = data.plafond_fmt;
        })
        .catch(err => console.warn('RPC preview error', err))
        .finally(() => spinner?.classList.add('d-none'));
    }

    const triggerRpcUpdate = debounce(function () {
        updateEstimasi();
        fetchRpcPreview();
    }, 500);

    // ── Init: bind all rpc-trigger inputs ──
    document.addEventListener('DOMContentLoaded', function () {
        initHasilRadio();

        document.querySelectorAll('.rpc-trigger').forEach(function (input) {
            input.addEventListener('input', triggerRpcUpdate);
        });

        ['pu_harga', 'pu_volume'].forEach(function (id) {
            const el = document.getElementById(id);
            if (el) el.addEventListener('input', updateEstimasi);
        });
    });
})();
</script>
@endpush