@extends('layouts.app')
@section('title', $jenis === 'dp' ? 'Pembayaran DP' : 'Pembayaran Angsuran')

@section('content')
@php $isDp = $jenis === 'dp'; @endphp

@include('pembayaran._nav', ['aktif' => $jenis])

<div class="row g-3">
    {{-- Langkah 1: pilih perumahan, lalu rumah/unit --}}
    <div class="col-xl-5">
        @include('pembayaran._pilih_unit', [
            'routeName' => 'pembayaran.bayar',
            'routeParams' => ['jenis' => $jenis],
            'subjudul' => $isDp ? 'hanya unit yang DP-nya belum lunas' : 'hanya kredit dengan DP lunas & angsuran berjalan',
            'pesanKosong' => $isDp ? 'Tidak ada transaksi dengan DP yang belum lunas.' : 'Tidak ada angsuran kredit yang perlu dibayar.',
            'judulDaftar' => $isDp ? 'Unit dengan DP belum lunas' : 'Unit dengan angsuran berjalan',
            'labelTanda' => 'menunggak',
        ])
    </div>

    {{-- Langkah 2: form pembayaran --}}
    <div class="col-xl-7">
        @if(! $terpilih)
            <div class="card h-100"><div class="card-body d-flex flex-column justify-content-center align-items-center text-muted py-5">
                <i class="bi bi-hand-index fs-1"></i>
                <p class="mt-2 mb-0">Pilih perumahan lalu rumah yang akan dibayar {{ $isDp ? 'DP' : 'angsuran' }}-nya.</p>
            </div></div>
        @else
            @php
                $pj = $terpilih;
                $sisaDp = $pj->sisa_dp;
                $belumLunas = $pj->jadwal->where('status', '!=', 'lunas')->values();
                $tertutup = in_array($pj->status, ['lunas', 'batal']);
                $bisa = ! $tertutup && ($isDp ? $sisaDp > 0 : ($pj->isKredit() && $sisaDp <= 0 && $belumLunas->isNotEmpty()));
            @endphp
            <div class="card mb-3">
                <div class="card-header bg-white d-flex justify-content-between">
                    <span class="fw-semibold">2. {{ $pj->pembeli->nama }} — <a href="{{ route('penjualan.show', $pj) }}">{{ $pj->kode }}</a></span>
                    <span class="badge text-bg-{{ $pj->badge }}">{{ \App\Models\Penjualan::STATUS[$pj->status] }}</span>
                </div>
                <div class="card-body py-2">
                    <div class="row small g-2">
                        <div class="col-6"><span class="text-muted">Unit</span><br>{{ $pj->unit->perumahan->nama }}, {{ $pj->unit->label }}</div>
                        <div class="col-6"><span class="text-muted">Metode</span><br>{{ \App\Models\Penjualan::METODE[$pj->metode] }}</div>
                        <div class="col-4"><span class="text-muted">Total Harga</span><br><strong>{{ rupiah($pj->total) }}</strong></div>
                        <div class="col-4"><span class="text-muted">Terbayar</span><br><strong class="text-success">{{ rupiah($pj->terbayar) }}</strong></div>
                        <div class="col-4"><span class="text-muted">Sisa Tagihan</span><br><strong class="text-danger">{{ rupiah($pj->sisa) }}</strong></div>
                        <div class="col-4"><span class="text-muted">DP</span><br>{{ rupiah($pj->uang_muka) }}</div>
                        <div class="col-4"><span class="text-muted">Sisa DP</span><br><strong class="{{ $sisaDp > 0 ? 'text-danger' : 'text-success' }}">{{ $sisaDp > 0 ? rupiah($sisaDp) : 'Lunas ✓' }}</strong></div>
                        @if($pj->isKredit())
                            <div class="col-4"><span class="text-muted">Angsuran</span><br>{{ rupiah($pj->angsuran_bulanan) }} × {{ $pj->tenor_bulan }}</div>
                        @endif
                    </div>
                </div>
            </div>

            @if(! $bisa)
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    @if($tertutup)
                        Transaksi ini sudah {{ strtolower(\App\Models\Penjualan::STATUS[$pj->status]) }}.
                    @elseif($isDp)
                        DP transaksi ini sudah lunas.
                        @if($pj->isKredit() && $belumLunas->isNotEmpty())
                            <a href="{{ route('pembayaran.bayar', ['jenis' => 'angsuran', 'penjualan_id' => $pj->id]) }}" class="alert-link">Lanjut ke Bayar Angsuran →</a>
                        @endif
                    @elseif(! $pj->isKredit())
                        Transaksi ini bukan kredit, jadi tidak memiliki angsuran.
                    @elseif($sisaDp > 0)
                        DP belum lunas (sisa {{ rupiah($sisaDp) }}).
                        <a href="{{ route('pembayaran.bayar', ['jenis' => 'dp', 'penjualan_id' => $pj->id]) }}" class="alert-link">Bayar DP dahulu →</a>
                    @else
                        Semua angsuran sudah lunas.
                    @endif
                </div>
            @else
                <div class="card border-success">
                    <div class="card-header bg-success-subtle fw-semibold">
                        <i class="bi {{ $isDp ? 'bi-wallet2' : 'bi-calendar-check' }}"></i> {{ $isDp ? 'Pembayaran DP' : 'Pembayaran Angsuran' }}
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('pembayaran.store', $pj) }}">
                            @csrf
                            <input type="hidden" name="kembali" value="{{ $jenis }}">
                            <input type="hidden" name="jenis" value="{{ $isDp ? 'uang_muka' : 'angsuran' }}">
                            <div class="row g-2">
                                @if($isDp)
                                    <div class="col-12">
                                        <label class="form-label small">Jumlah DP Dibayar (Rp)</label>
                                        <input type="text" inputmode="numeric" data-uang name="jumlah" value="{{ old('jumlah', (int) ceil($sisaDp)) }}" class="form-control form-control-lg @error('jumlah') is-invalid @enderror" required>
                                        <small class="text-muted">Maksimal sisa DP {{ rupiah($sisaDp) }}. DP boleh dibayar bertahap.</small>
                                    </div>
                                @else
                                    @php $mode = old('mode', 'jadwal'); $sisaKredit = $belumLunas->sum(fn ($j) => $j->sisa); @endphp
                                    <div class="col-12">
                                        <div class="btn-group w-100" role="group">
                                            <input type="radio" class="btn-check" name="mode" id="mode_jadwal" value="jadwal" @checked($mode === 'jadwal')>
                                            <label class="btn btn-outline-primary" for="mode_jadwal"><i class="bi bi-calendar-check"></i> Sesuai Jadwal</label>
                                            <input type="radio" class="btn-check" name="mode" id="mode_bebas" value="bebas" @checked($mode === 'bebas')>
                                            <label class="btn btn-outline-primary" for="mode_bebas"><i class="bi bi-pencil-square"></i> Nominal Lain</label>
                                        </div>
                                    </div>
                                    <div class="col-12 mode-bebas">
                                        <label class="form-label small">Nominal Dibayar (Rp)</label>
                                        <input type="text" inputmode="numeric" data-uang name="jumlah" id="jumlah_bebas"
                                               value="{{ old('jumlah', (int) ceil($belumLunas->first()->sisa)) }}" class="form-control form-control-lg @error('jumlah') is-invalid @enderror">
                                        <small class="text-muted">Boleh kurang atau lebih dari angsuran bulanan; maksimal sisa angsuran {{ rupiah($sisaKredit) }}.</small>
                                        <div class="alert alert-light border small mt-2 mb-0" id="alokasi"></div>
                                    </div>
                                    <div class="col-md-7 mode-jadwal">
                                        <label class="form-label small">Bayar untuk</label>
                                        <select name="jumlah_bulan" id="jumlah_bulan" class="form-select">
                                            @php $kumulatif = 0; @endphp
                                            @foreach($belumLunas as $i => $j)
                                                @php $kumulatif += $j->sisa; @endphp
                                                <option value="{{ $i + 1 }}" data-total="{{ $kumulatif }}" @selected(old('jumlah_bulan', 1) == $i + 1)>
                                                    {{ $i + 1 }} bulan — s/d ke-{{ $j->angsuran_ke }} ({{ tgl($j->jatuh_tempo) }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-5 mode-jadwal">
                                        <label class="form-label small">Jumlah Dibayar</label>
                                        <div class="form-control bg-light fw-bold text-primary" id="total_angsuran">-</div>
                                    </div>
                                @endif
                                <div class="col-md-4">
                                    <label class="form-label small">Tanggal</label>
                                    <input type="date" name="tanggal" value="{{ old('tanggal', now()->toDateString()) }}" class="form-control" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">Cara Bayar</label>
                                    @php $saldoDeposit = $isDp ? 0 : $pj->saldo_deposit; @endphp
                                    <select name="cara_bayar" id="cara_bayar" class="form-select @error('cara_bayar') is-invalid @enderror" data-saldo="{{ $saldoDeposit }}">
                                        <option value="transfer" @selected(old('cara_bayar') === 'transfer')>Transfer</option>
                                        <option value="tunai" @selected(old('cara_bayar') === 'tunai')>Tunai</option>
                                        @if($saldoDeposit > 0)
                                            <option value="deposit" @selected(old('cara_bayar') === 'deposit')>Potong Saldo Deposit ({{ rupiah($saldoDeposit) }})</option>
                                        @endif
                                    </select>
                                </div>
                                @if($saldoDeposit > 0)
                                    <div class="col-12">
                                        <div class="alert alert-primary py-2 mb-0 small d-flex flex-wrap justify-content-between align-items-center gap-2">
                                            <span><i class="bi bi-safe"></i> Pembeli memiliki saldo deposit <strong>{{ rupiah($saldoDeposit) }}</strong>.
                                                <span id="info_potong"></span></span>
                                            <button type="button" class="btn btn-sm btn-primary" id="pakai_semua_deposit"
                                                    data-nominal="{{ (int) floor(min($saldoDeposit, $sisaKredit)) }}">
                                                Bayar dengan seluruh saldo ({{ rupiah(floor(min($saldoDeposit, $sisaKredit))) }})
                                            </button>
                                        </div>
                                    </div>
                                @endif
                                <div class="col-md-4">
                                    <label class="form-label small">Keterangan</label>
                                    <input name="keterangan" value="{{ old('keterangan') }}" class="form-control" placeholder="otomatis">
                                </div>
                            </div>
                            <button class="btn btn-success btn-lg w-100 mt-3"><i class="bi bi-printer"></i> Simpan &amp; Cetak Kwitansi PDF</button>
                        </form>
                    </div>
                </div>

                @if(! $isDp)
                    <div class="card mt-3">
                        <div class="card-header bg-white fw-semibold small">Angsuran Belum Lunas</div>
                        <div class="table-responsive" style="max-height: 240px">
                            <table class="table table-sm mb-0 small">
                                <thead class="table-light sticky-top"><tr><th class="ps-3">Ke</th><th>Jatuh Tempo</th><th class="text-end">Sisa</th><th>Status</th></tr></thead>
                                @foreach($belumLunas as $j)
                                    @php [$label, $warna] = \App\Models\JadwalAngsuran::STATUS[$j->status]; @endphp
                                    <tr @class(['table-danger' => $j->status === 'terlambat'])>
                                        <td class="ps-3">{{ $j->angsuran_ke }}</td><td>{{ tgl($j->jatuh_tempo) }}</td>
                                        <td class="text-end">{{ rupiah($j->sisa) }}</td>
                                        <td><span class="badge text-bg-{{ $warna }}">{{ $label }}</span></td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                @endif
            @endif

            {{-- Kwitansi sebelumnya untuk cetak ulang --}}
            @php $riwayat = $pj->pembayaran->whereIn('jenis', $isDp ? ['booking_fee', 'uang_muka'] : ['angsuran'])->sortByDesc('id')->take(5); @endphp
            @if($riwayat->isNotEmpty())
                <div class="card mt-3">
                    <div class="card-header bg-white fw-semibold small">Pembayaran {{ $isDp ? 'DP' : 'Angsuran' }} Sebelumnya</div>
                    <ul class="list-group list-group-flush small">
                        @foreach($riwayat as $b)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>{{ tgl($b->tanggal) }} · {{ $b->keterangan ?: \App\Models\Pembayaran::JENIS[$b->jenis] }}</span>
                                <span>{{ rupiah($b->jumlah) }}
                                    <a href="{{ route('pembayaran.kwitansi', $b) }}" target="_blank" class="btn btn-sm btn-outline-secondary ms-2" title="Cetak ulang kwitansi"><i class="bi bi-file-earmark-pdf"></i></a></span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
(() => {
    const sel = document.getElementById('jumlah_bulan');
    if (!sel) return;
    const fmt = n => 'Rp ' + Math.round(n).toLocaleString('id-ID');
    const inputBebas = document.getElementById('jumlah_bebas');
    // Angsuran belum lunas (urut tertua) untuk pratinjau alokasi
    const angsuran = @json(isset($belumLunas) ? $belumLunas->map(fn ($j) => ['ke' => $j->angsuran_ke, 'sisa' => $j->sisa, 'tempo' => tgl($j->jatuh_tempo)])->values() : []);

    const alokasi = () => {
        let dana = nilaiUang(inputBebas);
        const baris = [];
        for (const a of angsuran) {
            if (dana <= 0) break;
            const bayar = Math.min(dana, a.sisa);
            dana -= bayar;
            const lunas = bayar >= a.sisa - 0.001;
            baris.push(`<div class="d-flex justify-content-between"><span>Ke-${a.ke} <span class="text-muted">(${a.tempo})</span></span>
                <span>${fmt(bayar)} <span class="badge text-bg-${lunas ? 'success' : 'info'}">${lunas ? 'Lunas' : 'Sebagian, kurang ' + fmt(a.sisa - bayar)}</span></span></div>`);
        }
        document.getElementById('alokasi').innerHTML = baris.length
            ? '<div class="fw-semibold mb-1">Dialokasikan ke:</div>' + baris.join('')
            : '<span class="text-muted">Isi nominal untuk melihat alokasi.</span>';
    };

    const update = () => {
        const bebas = document.querySelector('input[name=mode]:checked')?.value === 'bebas';
        document.querySelectorAll('.mode-bebas').forEach(e => e.classList.toggle('d-none', !bebas));
        document.querySelectorAll('.mode-jadwal').forEach(e => e.classList.toggle('d-none', bebas));
        inputBebas.disabled = !bebas;
        sel.disabled = bebas;
        document.getElementById('total_angsuran').textContent = fmt(+sel.selectedOptions[0].dataset.total);
        alokasi();
    };
    sel.addEventListener('change', update);
    inputBebas.addEventListener('input', alokasi);
    document.querySelectorAll('input[name=mode]').forEach(r => r.addEventListener('change', update));
    update();
})();
</script>
@endpush

@push('scripts')
<script>
// Bayar angsuran dari saldo deposit
(() => {
    const cara = document.getElementById('cara_bayar');
    const tombol = document.getElementById('pakai_semua_deposit');
    if (!cara || !tombol) return;
    const saldo = +cara.dataset.saldo;
    const fmt = n => 'Rp ' + Math.round(n).toLocaleString('id-ID');
    const nominal = () => {
        const bebas = document.querySelector('input[name=mode]:checked')?.value === 'bebas';
        if (bebas) return nilaiUang(document.getElementById('jumlah_bebas'));
        return +(document.getElementById('jumlah_bulan')?.selectedOptions[0]?.dataset.total || 0);
    };
    const info = () => {
        const el = document.getElementById('info_potong');
        if (cara.value !== 'deposit') { el.textContent = ''; return; }
        const n = nominal();
        el.innerHTML = n > saldo + 0.001
            ? `<span class="text-danger fw-semibold">Saldo tidak cukup untuk ${fmt(n)}.</span>`
            : `Sisa saldo setelah bayar: <strong>${fmt(saldo - n)}</strong>.`;
    };
    tombol.addEventListener('click', () => {
        document.getElementById('mode_bebas').checked = true;
        document.getElementById('mode_bebas').dispatchEvent(new Event('change'));
        const input = document.getElementById('jumlah_bebas');
        setUang(input, Math.floor(+tombol.dataset.nominal));
        input.dispatchEvent(new Event('input'));
        cara.value = 'deposit';
        info();
    });
    cara.addEventListener('change', info);
    document.getElementById('jumlah_bebas')?.addEventListener('input', info);
    document.getElementById('jumlah_bulan')?.addEventListener('change', info);
    document.querySelectorAll('input[name=mode]').forEach(r => r.addEventListener('change', info));
    info();
})();
</script>
@endpush