@extends('layouts.app')
@section('title', 'Biaya Lain Unit')

@section('content')
@include('pembayaran._nav', ['aktif' => 'biaya'])

<div class="row g-3">
    <div class="col-xl-5">
        @include('pembayaran._pilih_unit', [
            'routeName' => 'biaya-unit.form',
            'routeParams' => [],
            'subjudul' => 'unit yang sudah dimiliki / dipesan pembeli',
            'pesanKosong' => 'Belum ada unit yang terjual.',
            'judulDaftar' => 'Unit & total biaya lain',
            'labelTanda' => '',
        ])
    </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 text-center">
                <i class="bi bi-hand-index fs-1"></i>
                <p class="mt-2 mb-1">Pilih perumahan lalu rumah untuk mencatat biaya lain unit.</p>
                <p class="small mb-0">Contoh: administrasi surat menyurat, perbaikan, tagihan air, tagihan listrik.</p>
            </div></div>
        @else
            @php $pj = $terpilih; @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-sm-6"><span class="text-muted">Unit</span><br>{{ $pj->unit->perumahan->nama }}, {{ $pj->unit->label }} · {{ $pj->unit->tipe }}</div>
                        <div class="col-6 col-sm-3"><span class="text-muted">Pemilik</span><br>{{ $pj->pembeli->nama }}</div>
                        <div class="col-6 col-sm-3"><span class="text-muted">Total Biaya Lain</span><br><strong class="text-primary">{{ rupiah($pj->biayaUnit->sum('jumlah')) }}</strong></div>
                    </div>
                </div>
            </div>

            @if($pj->status === 'batal')
                <div class="alert alert-info">Transaksi ini sudah dibatalkan sehingga tidak dapat dibebani biaya baru.</div>
            @elseif($pos->isEmpty())
                <div class="alert alert-warning">
                    Belum ada jenis biaya aktif.
                    @if(auth()->user()->isAdmin())Tambahkan di <a href="{{ route('pos-kas.index', ['jenis' => 'masuk']) }}">Pos Transaksi Kas</a> (pos kas masuk dengan tanda <em>Biaya lain unit rumah</em>).@else Hubungi admin untuk menambahkannya.@endif
                </div>
            @else
            <div class="card border-primary mb-3">
                <div class="card-header bg-primary-subtle fw-semibold d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-receipt-cutoff"></i> Catat Pembayaran Biaya Lain <small class="fw-normal text-muted">— tidak mengurangi tagihan rumah</small></span>
                    @if(auth()->user()->isAdmin())<a href="{{ route('pos-kas.index', ['jenis' => 'masuk']) }}" class="small fw-normal"><i class="bi bi-tags"></i> Atur jenis biaya</a>@endif
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('biaya-unit.store', $pj) }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Jenis Biaya <span class="text-danger">*</span></label>
                            <div class="d-flex flex-wrap gap-2">
                                @foreach($pos as $p)
                                    <input type="radio" class="btn-check" name="pos_kas_id" id="pos_{{ $p->id }}" value="{{ $p->id }}" required data-wajib-ket="{{ $p->wajib_keterangan ? 1 : 0 }}"
                                           @checked(old('pos_kas_id', $pos->count() === 1 ? $p->id : null) == $p->id)>
                                    <label class="btn btn-sm {{ $p->wajib_keterangan ? 'btn-outline-secondary' : 'btn-outline-primary' }}" for="pos_{{ $p->id }}" title="{{ $p->keterangan }}">{{ $p->nama }}</label>
                                @endforeach
                            </div>
                            @error('pos_kas_id')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label small">Jumlah (Rp) <span class="text-danger">*</span></label>
                                <input type="text" inputmode="numeric" data-uang name="jumlah" value="{{ old('jumlah') }}" class="form-control form-control-lg @error('jumlah') is-invalid @enderror" required>
                                @error('jumlah')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="form-label small">Tanggal Bayar <span class="text-danger">*</span></label>
                                <input type="date" name="tanggal" value="{{ old('tanggal', now()->toDateString()) }}" max="{{ now()->toDateString() }}" class="form-control @error('tanggal') is-invalid @enderror" required>
                                @error('tanggal')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="form-label small">Periode Tagihan</label>
                                <input type="month" name="periode" value="{{ old('periode') }}" class="form-control @error('periode') is-invalid @enderror">
                                <div class="form-text">Untuk tagihan bulanan (air, listrik).</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small">Cara Bayar</label>
                                <select name="cara_bayar" class="form-select">
                                    <option value="tunai" @selected(old('cara_bayar') === 'tunai')>Tunai</option>
                                    <option value="transfer" @selected(old('cara_bayar') === 'transfer')>Transfer</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label small">Keterangan <span class="text-danger d-none" id="tandaWajibKet">* sebutkan biaya apa</span></label>
                                <input name="keterangan" id="keterangan" value="{{ old('keterangan') }}" maxlength="255" class="form-control @error('keterangan') is-invalid @enderror" placeholder="mis. Pengurusan balik nama sertifikat / meter air 125 m³">
                                @error('keterangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        <button class="btn btn-primary btn-lg w-100 mt-3"><i class="bi bi-printer"></i> Simpan &amp; Cetak Bukti</button>
                        <div class="form-text text-center">Diterima dari <strong>{{ $pj->pembeli->nama }}</strong> · tercatat di Buku Kas sebagai kas masuk.</div>
                    </form>
                </div>
            </div>
            @endif

            @if($rekap->isNotEmpty())
                <div class="row g-2 mb-3">
                    @foreach($rekap as $r)
                        <div class="col-6 col-md-4">
                            <div class="border rounded bg-white p-2 h-100 small">
                                <div class="text-muted">{{ $r->pos->nama }}</div>
                                <div class="fw-semibold">{{ rupiah($r->total) }}</div>
                                <div class="text-muted">{{ $r->jumlah }}× · terakhir {{ tgl($r->terakhir) }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            <div class="card">
                <div class="card-header bg-white fw-semibold">Riwayat Biaya Lain Unit Ini</div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0 align-middle small">
                        <thead class="table-light"><tr><th class="ps-3">Tanggal</th><th>No. Bukti</th><th>Jenis Biaya</th><th>Keterangan</th><th class="text-end">Jumlah</th><th></th></tr></thead>
                        <tbody>
                        @forelse($pj->biayaUnit->sortByDesc(fn ($k) => $k->tanggal->format('Ymd').str_pad($k->id, 10, '0', STR_PAD_LEFT)) as $k)
                            <tr>
                                <td class="ps-3 text-nowrap">{{ tgl($k->tanggal) }}</td>
                                <td class="text-nowrap">{{ $k->nomor }}<br><span class="font-monospace text-muted">{{ $k->kode_verifikasi_format }}</span></td>
                                <td>{{ $k->uraian_biaya }}</td>
                                <td>{{ $k->keterangan }}
                                    <div class="text-muted">{{ ucfirst($k->cara_bayar) }} · dari {{ $k->pembeli->nama ?? $k->pihak }} · {{ $k->petugas->name ?? '-' }}</div></td>
                                <td class="text-end text-nowrap fw-semibold">{{ rupiah($k->jumlah) }}</td>
                                <td class="text-end text-nowrap pe-2">
                                    <a href="{{ route('kas.bukti', $k) }}" 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()->isAdmin())
                                        <a href="{{ route('hapus-transaksi.konfirmasi', ['kas', $k->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 biaya lain untuk unit ini.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
// Jenis serba guna (mis. Biaya Unit Lain-lain): keterangan wajib diisi
(() => {
    const ket = document.getElementById('keterangan'), tanda = document.getElementById('tandaWajibKet');
    if (!ket) return;
    const contoh = ket.placeholder;
    const atur = () => {
        const wajib = document.querySelector('input[name=pos_kas_id]:checked')?.dataset.wajibKet === '1';
        ket.required = wajib;
        tanda.classList.toggle('d-none', !wajib);
        ket.placeholder = wajib ? 'mis. Biaya pemasangan kanopi / iuran sampah Oktober' : contoh;
    };
    document.querySelectorAll('input[name=pos_kas_id]').forEach(r => r.addEventListener('change', atur));
    atur();
})();
</script>
@endpush