@extends('layouts.app')
@section('title', $jenis === 'denda' ? 'Pembayaran Denda' : 'Deposit / Uang Titipan')

@section('content')
@php $isDenda = $jenis === 'denda'; @endphp

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

<div class="row g-3">
    <div class="col-xl-5">
        @include('pembayaran._pilih_unit', [
            'routeName' => 'transaksi-lain.form',
            'routeParams' => ['jenis' => $jenis],
            'subjudul' => $isDenda ? 'transaksi aktif; yang terlambat ditandai' : 'transaksi aktif atau yang masih punya titipan',
            'pesanKosong' => $isDenda ? 'Tidak ada transaksi aktif.' : 'Tidak ada transaksi.',
            'judulDaftar' => $isDenda ? 'Transaksi aktif' : 'Daftar transaksi',
            'labelTanda' => 'terlambat',
        ])
    </div>

    <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 untuk {{ $isDenda ? 'mencatat pembayaran denda' : 'menyetor atau mengambil deposit' }}.</p>
            </div></div>
        @else
            @php
                $pj = $terpilih;
                $saldo = $pj->saldo_deposit;
                $riwayat = $pj->transaksiLain->whereIn('jenis', $isDenda ? ['denda'] : ['deposit_setor', 'deposit_ambil', 'deposit_pakai'])->sortByDesc('id');
            @endphp

            {{-- Ringkasan transaksi --}}
            <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">Sisa Tagihan Rumah</span><br><strong>{{ rupiah($pj->sisa) }}</strong></div>
                        <div class="col-4"><span class="text-muted">Total Denda Dibayar</span><br><strong class="text-danger">{{ rupiah($pj->total_denda) }}</strong></div>
                        <div class="col-4"><span class="text-muted">Saldo Deposit</span><br><strong class="text-primary">{{ rupiah($saldo) }}</strong></div>
                    </div>
                </div>
            </div>

            @if($isDenda)
                {{-- ===================== DENDA ===================== --}}
                @php $saran = $pj->saranDenda(); @endphp
                @if($pj->status === 'batal')
                    <div class="alert alert-info">Transaksi ini sudah dibatalkan.</div>
                @else
                <div class="card border-danger">
                    <div class="card-header bg-danger-subtle fw-semibold"><i class="bi bi-exclamation-octagon"></i> Pembayaran Denda
                        <small class="fw-normal text-muted">— tidak mengurangi sisa tagihan rumah</small></div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('transaksi-lain.store', $pj) }}">
                            @csrf
                            <input type="hidden" name="kembali" value="denda">
                            <input type="hidden" name="jenis" value="denda">

                            <label class="form-label small">Denda untuk</label>
                            <div class="list-group mb-3">
                                @foreach($saran as $s)
                                    <label class="list-group-item d-flex gap-2 align-items-center">
                                        <input class="form-check-input mt-0 pilih-denda" type="radio" name="angsuran_ke" value="{{ $s->angsuran_ke }}"
                                               data-saran="{{ (int) $s->saran }}" @checked(old('angsuran_ke', $saran->firstWhere('sudah_didenda', false)?->angsuran_ke) == $s->angsuran_ke)>
                                        <span class="flex-grow-1">
                                            Keterlambatan angsuran <strong>ke-{{ $s->angsuran_ke }}</strong>
                                            <span class="text-muted">· jatuh tempo {{ tgl($s->jatuh_tempo) }} · telat <strong class="text-danger">{{ $s->hari }} hari</strong> · sisa {{ rupiah($s->sisa) }}</span>
                                            @if($s->sudah_didenda)<span class="badge text-bg-secondary">sudah pernah didenda</span>@endif
                                        </span>
                                        <span class="text-nowrap small">saran {{ rupiah($s->saran) }}</span>
                                    </label>
                                @endforeach
                                <label class="list-group-item d-flex gap-2 align-items-center">
                                    <input class="form-check-input mt-0 pilih-denda" type="radio" name="angsuran_ke" value="" data-saran=""
                                           @checked($saran->isEmpty() || old('angsuran_ke') === '' || $saran->every->sudah_didenda)>
                                    <span>Denda lain <span class="text-muted">(mis. keterlambatan DP, pelanggaran perjanjian)</span></span>
                                </label>
                            </div>
                            @if($saran->isNotEmpty())
                                <p class="small text-muted mt-n2">Saran denda = {{ rtrim(rtrim(number_format(config('perumahan.denda_persen_per_hari'), 2, ',', ''), '0'), ',') }}% × sisa angsuran × hari terlambat. Nominal boleh diubah.</p>
                            @endif

                            <div class="row g-2">
                                <div class="col-md-6">
                                    <label class="form-label small">Jumlah Denda (Rp)</label>
                                    <input type="text" inputmode="numeric" data-uang name="jumlah" id="jumlah_denda" value="{{ old('jumlah') }}" class="form-control form-control-lg @error('jumlah') is-invalid @enderror" required>
                                </div>
                                <div class="col-md-3">
                                    <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-3">
                                    <label class="form-label small">Cara Bayar</label>
                                    <select name="cara_bayar" class="form-select">
                                        <option value="tunai">Tunai</option>
                                        <option value="transfer">Transfer</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small">Keterangan</label>
                                    <input name="keterangan" value="{{ old('keterangan') }}" class="form-control" placeholder="otomatis, mis. Denda keterlambatan angsuran ke-4 (15 hari)">
                                </div>
                            </div>
                            <button class="btn btn-danger btn-lg w-100 mt-3"><i class="bi bi-printer"></i> Simpan &amp; Cetak Kwitansi Denda</button>
                        </form>
                    </div>
                </div>
                @endif
            @else
                {{-- ===================== DEPOSIT ===================== --}}
                @php $mode = old('jenis', 'deposit_setor'); @endphp
                <div class="card border-primary">
                    <div class="card-header bg-primary-subtle fw-semibold d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-safe"></i> Deposit / Uang Titipan</span>
                        <span>Saldo: <span class="fs-5">{{ rupiah($saldo) }}</span></span>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('transaksi-lain.store', $pj) }}" id="formDeposit">
                            @csrf
                            <input type="hidden" name="kembali" value="deposit">
                            <div class="btn-group w-100 mb-3" role="group">
                                <input type="radio" class="btn-check" name="jenis" id="dep_setor" value="deposit_setor" @checked($mode === 'deposit_setor') @disabled($pj->status === 'batal')>
                                <label class="btn btn-outline-primary" for="dep_setor"><i class="bi bi-box-arrow-in-down"></i> Setor / Titip
                                    <small class="d-block">uang masuk</small></label>
                                <input type="radio" class="btn-check" name="jenis" id="dep_ambil" value="deposit_ambil" @checked($mode === 'deposit_ambil' || $pj->status === 'batal') @disabled($saldo <= 0)>
                                <label class="btn btn-outline-warning" for="dep_ambil"><i class="bi bi-box-arrow-up"></i> Ambil
                                    <small class="d-block">{{ $saldo > 0 ? 'maks '.rupiah($saldo) : 'saldo kosong' }}</small></label>
                            </div>
                            @if($pj->status === 'batal' && $saldo <= 0)
                                <div class="alert alert-info mb-0">Transaksi batal dan tidak ada saldo titipan.</div>
                            @else
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <label class="form-label small">Jumlah (Rp)</label>
                                    <input type="text" inputmode="numeric" data-uang name="jumlah" id="jumlah_deposit" data-saldo="{{ (int) floor($saldo) }}" value="{{ old('jumlah') }}" class="form-control form-control-lg @error('jumlah') is-invalid @enderror" required>
                                    <small class="text-muted" id="info_deposit"></small>
                                </div>
                                <div class="col-md-3">
                                    <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-3">
                                    <label class="form-label small">Cara</label>
                                    <select name="cara_bayar" class="form-select">
                                        <option value="tunai">Tunai</option>
                                        <option value="transfer">Transfer</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small">Keterangan</label>
                                    <input name="keterangan" value="{{ old('keterangan') }}" class="form-control" placeholder="mis. titipan untuk angsuran bulan depan">
                                </div>
                            </div>
                            <button class="btn btn-primary btn-lg w-100 mt-3" id="btn_deposit"><i class="bi bi-printer"></i> Simpan &amp; Cetak Bukti</button>
                            @endif
                        </form>
                    </div>
                </div>
            @endif

            {{-- Riwayat --}}
            <div class="card mt-3">
                <div class="card-header bg-white fw-semibold small">Riwayat {{ $isDenda ? 'Denda' : 'Deposit' }}</div>
                <div class="table-responsive">
                    <table class="table table-sm mb-0 small">
                        <thead class="table-light"><tr><th class="ps-3">No. Bukti</th><th>Tanggal</th><th>Jenis</th><th>Keterangan</th><th class="text-end">Jumlah</th><th></th></tr></thead>
                        @forelse($riwayat as $t)
                            <tr>
                                <td class="ps-3">{{ $t->nomor }}</td>
                                <td class="text-nowrap">{{ tgl($t->tanggal) }}</td>
                                <td><span class="badge text-bg-{{ $t->badge }}">{{ \App\Models\TransaksiLain::JENIS[$t->jenis] }}</span></td>
                                <td>{{ $t->keterangan }}<br><span class="text-muted">{{ ucfirst($t->cara_bayar) }} · {{ $t->petugas->name ?? '-' }}</span></td>
                                <td class="text-end text-nowrap {{ $t->isKeluar() ? 'text-danger' : '' }}">{{ $t->isKeluar() ? '−' : '' }}{{ rupiah($t->jumlah) }}</td>
                                <td class="text-end text-nowrap pe-2">
                                    <a href="{{ route('transaksi-lain.bukti', $t) }}" target="_blank" class="btn btn-sm btn-outline-secondary py-0" title="Cetak ulang bukti"><i class="bi bi-file-earmark-pdf"></i></a>
                                    @if(auth()->user()->role === 'admin' && ! $t->pembayaran_id)
                                        <a href="{{ route('hapus-transaksi.konfirmasi', ['transaksi_lain', $t->id]) }}" class="btn btn-sm btn-outline-danger py-0" title="Hapus transaksi salah input"><i class="bi bi-trash"></i></a>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-center text-muted py-3">Belum ada riwayat.</td></tr>
                        @endforelse
                    </table>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
(() => {
    const fmt = n => 'Rp ' + Math.round(n).toLocaleString('id-ID');

    // Denda: isi nominal dari saran angsuran yang dipilih
    const jumlahDenda = document.getElementById('jumlah_denda');
    if (jumlahDenda) {
        const isi = () => {
            const r = document.querySelector('.pilih-denda:checked');
            if (r && r.dataset.saran && !jumlahDenda.dataset.diubah) setUang(jumlahDenda, +r.dataset.saran);
        };
        document.querySelectorAll('.pilih-denda').forEach(r => r.addEventListener('change', () => { delete jumlahDenda.dataset.diubah; isi(); }));
        jumlahDenda.addEventListener('input', () => jumlahDenda.dataset.diubah = 1);
        if (!jumlahDenda.value) isi();
    }

    // Deposit: batasi pengambilan sesuai saldo
    const jumlahDep = document.getElementById('jumlah_deposit');
    if (jumlahDep) {
        const saldo = +jumlahDep.dataset.saldo;
        const update = () => {
            const ambil = document.getElementById('dep_ambil')?.checked;
            if (ambil && !jumlahDep.value) setUang(jumlahDep, saldo);
            const n = nilaiUang(jumlahDep);
            jumlahDep.setCustomValidity(ambil && n > saldo ? 'Melebihi saldo deposit (' + fmt(saldo) + ').' : '');
            document.getElementById('info_deposit').textContent = 'Saldo setelah transaksi: ' + fmt(ambil ? saldo - n : saldo + n);
            const btn = document.getElementById('btn_deposit');
            btn.className = 'btn btn-lg w-100 mt-3 ' + (ambil ? 'btn-warning' : 'btn-primary');
        };
        document.querySelectorAll('#formDeposit input[name=jenis]').forEach(r => r.addEventListener('change', update));
        jumlahDep.addEventListener('input', update);
        update();
    }
})();
</script>
@endpush