@extends('layouts.application-wizard')

@section('step-content')
@php
    $bu        = $application->biayaUsaha->groupBy('section');
    $bh        = $application->biayaHidup->keyBy('kategori');
    $pl        = $application->pendapatanLain;
    $template  = $application->komoditasUtama?->template_biaya_items ?? [];
    $kategoriLabels = App\Models\BiayaUsaha::$kategoriLabels;
    $bhLabels  = App\Models\BiayaHidup::$kategoriLabels;
    $buIdx     = $application->biayaUsaha->count();
@endphp

<form method="POST"
      action="{{ route('applications.step.save', ['id' => $application->id, 'step' => '2c']) }}"
      id="form-step2c" novalidate>
    @csrf
    @if($readOnly ?? false)<fieldset disabled>@endif

    {{-- ── BIAYA USAHA ─────────────────────────────────────────────────── --}}
    <div class="card border-0 bg-light rounded-3 mb-4">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-3" style="color:var(--bpdlh-green);">
                <i class="bi bi-cash-coin me-2"></i>Biaya Usaha
            </h6>

            @error('biaya_usaha')<div class="alert alert-danger py-2">{{ $message }}</div>@enderror

            <div id="biaya-usaha-container">
                @php $globalIdx = 0; @endphp
                @foreach($kategoriLabels as $katKey => $katLabel)
                <div class="mb-3">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="fw-semibold small text-secondary">{{ $katLabel }}</span>
                        <button type="button" class="btn btn-xs btn-outline-success btn-tambah-biaya"
                                data-kategori="{{ $katKey }}" style="font-size:.75rem;padding:2px 8px;">
                            <i class="bi bi-plus"></i> Tambah Item
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0 tbl-biaya" data-kategori="{{ $katKey }}">
                            <thead class="table-light">
                                <tr>
                                    <th>Nama Item</th>
                                    <th style="width:80px">Qty</th>
                                    <th style="width:90px">Satuan</th>
                                    <th style="width:130px">Harga/Satuan (Rp)</th>
                                    <th style="width:110px">Per</th>
                                    <th class="text-end" style="width:130px">Total (Rp)</th>
                                    <th style="width:40px"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($bu->get($katKey, collect()) as $item)
                                <tr class="biaya-row">
                                    <td>
                                        <input type="hidden" name="biaya_usaha[{{ $globalIdx }}][section]" value="{{ $katKey }}">
                                        <input type="text" name="biaya_usaha[{{ $globalIdx }}][nama_item]"
                                               class="form-control form-control-sm"
                                               value="{{ $item->nama_item }}" required>
                                    </td>
                                    <td><input type="number" name="biaya_usaha[{{ $globalIdx }}][qty]" min="0.01" step="0.01"
                                               class="form-control form-control-sm bi-qty"
                                               value="{{ $item->qty }}" required></td>
                                    <td><input type="text" name="biaya_usaha[{{ $globalIdx }}][satuan]"
                                               class="form-control form-control-sm"
                                               value="{{ $item->satuan }}" placeholder="kg/org/ls"></td>
                                    <td><input type="number" name="biaya_usaha[{{ $globalIdx }}][harga_per_satuan]" min="0"
                                               class="form-control form-control-sm bi-harga"
                                               value="{{ $item->harga_per_satuan }}" required></td>
                                    <td>
                                        <select name="biaya_usaha[{{ $globalIdx }}][per_siklus_atau_tahun]"
                                                class="form-select form-select-sm">
                                            <option value="tahun"  {{ $item->per_siklus_atau_tahun === 'tahun'  ? 'selected':'' }}>Per Tahun</option>
                                            <option value="siklus" {{ $item->per_siklus_atau_tahun === 'siklus' ? 'selected':'' }}>Per Siklus</option>
                                        </select>
                                    </td>
                                    <td class="text-end fw-semibold bi-total">
                                        Rp {{ number_format($item->total) }}
                                    </td>
                                    <td><button type="button" class="btn btn-sm btn-outline-danger btn-hapus-bi">
                                        <i class="bi bi-trash"></i>
                                    </button></td>
                                </tr>
                                @php $globalIdx++; @endphp
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- ── PENDAPATAN USAHA LAIN ────────────────────────────────────────── --}}
    <div class="card border-0 bg-light rounded-3 mb-4">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-3" style="color:var(--bpdlh-green);">
                <i class="bi bi-graph-up-arrow me-2"></i>Pendapatan Usaha Lain
                <span class="badge bg-secondary fw-normal ms-1" style="font-size:.7rem;">Opsional</span>
            </h6>
            <div id="pendapatan-lain-list">
                @foreach($pl as $idx => $item)
                <div class="row g-2 mb-2 pl-row">
                    <div class="col-12 col-md-6">
                        <input type="text" name="pendapatan_lain[{{ $idx }}][jenis_usaha]"
                               class="form-control form-control-sm" placeholder="Jenis usaha lain"
                               value="{{ $item->jenis_usaha }}">
                    </div>
                    <div class="col-8 col-md-4">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">Rp</span>
                            <input type="number" name="pendapatan_lain[{{ $idx }}][pendapatan_per_tahun]" min="0"
                                   class="form-control form-control-sm" placeholder="Per tahun"
                                   value="{{ $item->pendapatan_per_tahun }}">
                        </div>
                    </div>
                    <div class="col-4 col-md-2">
                        <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-pl w-100">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
                @endforeach
            </div>
            <button type="button" class="btn btn-sm btn-outline-success mt-2" id="btn-tambah-pl">
                <i class="bi bi-plus-circle me-1"></i>Tambah Sumber Pendapatan Lain
            </button>
        </div>
    </div>

    {{-- ── BIAYA HIDUP BULANAN ──────────────────────────────────────────── --}}
    <div class="card border-0 bg-light rounded-3 mb-4">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-3" style="color:var(--bpdlh-green);">
                <i class="bi bi-house-heart-fill me-2"></i>Biaya Hidup Bulanan
            </h6>
            <div class="row g-3">
                @foreach($bhLabels as $katKey => $katLabel)
                <div class="col-12 col-md-6">
                    <label class="form-label fw-medium">{{ $katLabel }} <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text">Rp</span>
                        <input type="number" name="biaya_hidup[{{ $katKey }}]" min="0"
                               class="form-control bh-input"
                               value="{{ old("biaya_hidup.{$katKey}", $bh->get($katKey)?->nominal_per_bulan ?? 0) }}"
                               required>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- ── RINGKASAN RPC (live preview) ────────────────────────────────── --}}
    <div class="card border-success border-2 rounded-3 mb-4" id="rpc-summary-card">
        <div class="card-header bg-success text-white py-2">
            <i class="bi bi-calculator me-2"></i><strong>Ringkasan Kalkulasi RPC</strong>
        </div>
        <div class="card-body p-3">
            <div class="row text-center g-3">
                <div class="col-6 col-md-3">
                    <div class="small text-muted">Total Pendapatan</div>
                    <div class="fw-bold" id="rpc-pend-usaha">
                        Rp {{ number_format($application->tanamanUtama->first()?->total_pendapatan_tahunan ?? 0) }}
                    </div>
                    <div class="text-muted" id="rpc-pend-usaha-detail" style="font-size:.72rem;"></div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="small text-muted">Total Biaya</div>
                    <div class="fw-bold text-danger" id="rpc-total-biaya">Rp —</div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="small text-muted">RPC (70% selisih)</div>
                    <div class="fw-bold text-primary fs-5" id="rpc-value">Rp —</div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="small text-muted">Maks. Plafond</div>
                    <div class="fw-bold text-success" id="rpc-maks-plafond">Rp —</div>
                </div>
            </div>
            <div id="rpc-warning" class="alert alert-warning py-2 mt-3 d-none">
                <i class="bi bi-exclamation-triangle me-2"></i>
                Plafond yang diajukan (<strong id="rpc-plafond-diajukan"></strong>) melebihi maks. plafond berdasarkan RPC.
                Verifikator akan mencatat hal ini.
            </div>
        </div>
    </div>

    @if($readOnly ?? false)</fieldset>@endif

    {{-- ── Tombol navigasi — satu tombol "Simpan" cerdas ─────────────────── --}}
    @unless($readOnly ?? false)
    <input type="hidden" name="action" id="form-action-2c" value="draft">
    @endunless
    <div class="d-flex align-items-center justify-content-between gap-2 pt-3 border-top mt-2 flex-wrap">
        <a href="{{ route('applications.step', ['id' => $application->id, 'step' => '2b']) }}"
           class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Kembali ke Data Lahan
        </a>
        @unless($readOnly ?? false)
        <div class="d-flex align-items-center gap-2">
            <span class="text-muted small d-none" id="hint-draft">
                <i class="bi bi-info-circle me-1"></i>Akan disimpan sebagai draft
            </span>
            <span class="text-muted small d-none" id="hint-full">
                <i class="bi bi-check-circle text-success me-1"></i>Data lengkap — RPC akan dikalkulasi
            </span>
            <button type="submit" class="btn btn-primary px-4" id="btn-simpan-2c">
                <i class="bi bi-floppy me-1"></i>Simpan
            </button>
        </div>
        @endunless
    </div>
</form>

@push('scripts')
<script>
// ── Data dari PHP ─────────────────────────────────────────────────────
const templateBiaya = @json($template);
const plafondDiajukan = {{ $application->plafond_diajukan ?? 0 }};
const tenorBulan = {{ $application->tenor_bulan ?? 0 }};
const bungaFlat  = 4;
const pendUsaha  = {{ $application->tanamanUtama->first()?->total_pendapatan_tahunan ?? 0 }};
let   globalBiayaIdx = {{ $buIdx }};

function formatRp(n) { return 'Rp ' + Math.round(n || 0).toLocaleString('id-ID'); }

// ── Cek kelengkapan untuk menentukan draft vs full save ───────────────
function cekLengkapStep2c() {
    const rows = document.querySelectorAll('.biaya-row');
    let adaRowValid = false;
    rows.forEach(row => {
        const nama = row.querySelector('[name*="[nama_item]"]')?.value?.trim();
        const qty  = parseFloat(row.querySelector('.bi-qty')?.value) || 0;
        if (nama && qty >= 0.01) adaRowValid = true;
    });
    return adaRowValid;
}

// ── Update hint + action saat form input berubah ──────────────────────
function updateHintSimpan() {
    const lengkap = cekLengkapStep2c();
    document.getElementById('hint-draft').classList.toggle('d-none', lengkap);
    document.getElementById('hint-full').classList.toggle('d-none', !lengkap);
}
document.querySelectorAll('.bi-qty, .bi-harga, [name*="[nama_item]"]')
    .forEach(el => el.addEventListener('input', updateHintSimpan));
updateHintSimpan();

// ── Submit: set biaya_hidup kosong → 0, tentukan action ───────────────
document.getElementById('form-step2c')?.addEventListener('submit', function () {
    const bhCategories = ['rumah_tangga', 'listrik_air', 'transport', 'pendidikan', 'angsuran_lain', 'lainnya'];
    bhCategories.forEach(cat => {
        const input = document.querySelector(`[name="biaya_hidup[${cat}]"]`);
        if (input && (input.value === '' || input.value === null)) {
            input.value = '0';
        }
    });
    document.getElementById('form-action-2c').value = cekLengkapStep2c() ? 'next' : 'draft';
});

// ── Template biaya item dropdown ──────────────────────────────────────
document.querySelectorAll('.btn-tambah-biaya').forEach(btn => {
    btn.addEventListener('click', () => {
        const kategori = btn.dataset.kategori;
        const items    = (templateBiaya[kategori] || []).map(i => `<option>${i}</option>`).join('');
        const tbody    = document.querySelector(`.tbl-biaya[data-kategori="${kategori}"] tbody`);
        const idx      = globalBiayaIdx++;
        tbody.insertAdjacentHTML('beforeend', `<tr class="biaya-row">
            <td>
                <input type="hidden" name="biaya_usaha[${idx}][section]" value="${kategori}">
                <input type="text" name="biaya_usaha[${idx}][nama_item]"
                       class="form-control form-control-sm" list="list-${idx}" required placeholder="Nama item">
                <datalist id="list-${idx}">${items}</datalist>
            </td>
            <td><input type="number" name="biaya_usaha[${idx}][qty]" min="0.01" step="0.01" value="1" class="form-control form-control-sm bi-qty" required></td>
            <td><input type="text" name="biaya_usaha[${idx}][satuan]" class="form-control form-control-sm" placeholder="kg/org/ls"></td>
            <td><input type="number" name="biaya_usaha[${idx}][harga_per_satuan]" min="0" value="0" class="form-control form-control-sm bi-harga" required></td>
            <td><select name="biaya_usaha[${idx}][per_siklus_atau_tahun]" class="form-select form-select-sm">
                <option value="tahun">Per Tahun</option><option value="siklus">Per Siklus</option>
            </select></td>
            <td class="text-end fw-semibold bi-total">Rp 0</td>
            <td><button type="button" class="btn btn-sm btn-outline-danger btn-hapus-bi"><i class="bi bi-trash"></i></button></td>
        </tr>`);
        bindBiayaEvents();
        hitungRpc();
        updateHintSimpan();
    });
});

function bindBiayaEvents() {
    document.querySelectorAll('.biaya-row').forEach(row => {
        const qty   = row.querySelector('.bi-qty');
        const harga = row.querySelector('.bi-harga');
        const total = row.querySelector('.bi-total');
        function update() {
            const t = Math.round((parseFloat(qty?.value) || 0) * (parseInt(harga?.value) || 0));
            if (total) total.textContent = formatRp(t);
            hitungRpc();
        }
        qty?.addEventListener('input', update);
        harga?.addEventListener('input', update);
        row.querySelector('[name*="[nama_item]"]')?.addEventListener('input', updateHintSimpan);
        row.querySelector('.btn-hapus-bi')?.addEventListener('click', () => { row.remove(); hitungRpc(); updateHintSimpan(); });
    });
}
bindBiayaEvents();

// ── Biaya hidup live total ────────────────────────────────────────────
document.querySelectorAll('.bh-input').forEach(el => el.addEventListener('input', hitungRpc));

// ── Pendapatan lain ───────────────────────────────────────────────────
let plIdx = {{ $pl->count() }};
document.getElementById('btn-tambah-pl').addEventListener('click', () => {
    document.getElementById('pendapatan-lain-list').insertAdjacentHTML('beforeend',
        `<div class="row g-2 mb-2 pl-row">
            <div class="col-12 col-md-6"><input type="text" name="pendapatan_lain[${plIdx}][jenis_usaha]" class="form-control form-control-sm" placeholder="Jenis usaha lain"></div>
            <div class="col-8 col-md-4"><div class="input-group input-group-sm"><span class="input-group-text">Rp</span>
                <input type="number" name="pendapatan_lain[${plIdx}][pendapatan_per_tahun]" min="0" class="form-control form-control-sm pl-amount" placeholder="Per tahun"></div></div>
            <div class="col-4 col-md-2"><button type="button" class="btn btn-sm btn-outline-danger btn-hapus-pl w-100"><i class="bi bi-trash"></i></button></div>
        </div>`);
    plIdx++;
    bindPlEvents();
    hitungRpc();
});
function bindPlEvents() {
    document.querySelectorAll('.btn-hapus-pl').forEach(btn => {
        btn.addEventListener('click', () => { btn.closest('.pl-row').remove(); hitungRpc(); });
    });
    document.querySelectorAll('.pl-amount').forEach(el => el.addEventListener('input', hitungRpc));
}
bindPlEvents();

// ── Hitung RPC live ───────────────────────────────────────────────────
function hitungRpc() {
    // Total biaya usaha
    let totalBiaya = 0;
    document.querySelectorAll('.biaya-row').forEach(row => {
        const qty   = parseFloat(row.querySelector('.bi-qty')?.value) || 0;
        const harga = parseInt(row.querySelector('.bi-harga')?.value) || 0;
        totalBiaya += Math.round(qty * harga);
    });

    // Total biaya hidup tahunan
    let totalBH = 0;
    document.querySelectorAll('.bh-input').forEach(el => totalBH += (parseInt(el.value) || 0) * 12);

    // Pendapatan lain
    let pendLain = 0;
    document.querySelectorAll('[name*="[pendapatan_per_tahun]"]').forEach(el => pendLain += parseInt(el.value) || 0);
const pengeluaran = totalBiaya + totalBH;
    const totalPend   = pendUsaha + pendLain;
    const rpc         = Math.max(0, Math.round(0.70 * (totalPend - pengeluaran)));
    const jw          = tenorBulan / 12;
    const maksPlafond = (jw > 0 && rpc > 0)
        ? Math.round((100 * rpc * jw) / (100 + jw * bungaFlat))
        : 0;

    document.getElementById('rpc-pend-usaha').textContent     = formatRp(totalPend);
    // Tampilkan rincian jika ada pendapatan lain
    const detail = document.getElementById('rpc-pend-usaha-detail');
    if (pendLain > 0) {
        detail.textContent = `Usaha: ${formatRp(pendUsaha)} + Lain: ${formatRp(pendLain)}`;
        detail.classList.remove('d-none');
    } else {
        detail.classList.add('d-none');
    }
    document.getElementById('rpc-total-biaya').textContent   = formatRp(pengeluaran);
    document.getElementById('rpc-value').textContent          = formatRp(rpc);
    document.getElementById('rpc-maks-plafond').textContent   = formatRp(maksPlafond);

    const warning = document.getElementById('rpc-warning');
    if (plafondDiajukan > 0 && maksPlafond > 0 && plafondDiajukan > maksPlafond) {
        document.getElementById('rpc-plafond-diajukan').textContent = formatRp(plafondDiajukan);
        warning.classList.remove('d-none');
    } else {
        warning.classList.add('d-none');
    }
}
hitungRpc();
</script>
@endpush
@endsection