@extends('layouts.app')
@section('title', 'Take Over '.$pj->kode)

@section('content')
@php
    $kredit = $pj->isKredit();
    $opsi = old('opsi', 'lanjut');
    $lamaPilih = old('pembeli_baru_id') ? \App\Models\Pembeli::find(old('pembeli_baru_id')) : null;
@endphp

<div class="mb-3 d-flex gap-2">
    <a href="{{ route('take-over.index') }}" class="btn btn-light"><i class="bi bi-arrow-left"></i> Menu Take Over</a>
    <a href="{{ route('penjualan.show', $pj) }}" class="btn btn-outline-secondary"><i class="bi bi-eye"></i> Detail Transaksi</a>
</div>

<div class="row g-3">
    <div class="col-lg-5">
        <div class="card mb-3">
            <div class="card-header bg-white fw-semibold"><i class="bi bi-house-door"></i> Posisi Transaksi Saat Ini</div>
            <table class="table table-sm mb-0">
                <tr><th class="ps-3 w-50">No. Transaksi</th><td>{{ $pj->kode }} <span class="badge text-bg-{{ $pj->badge }}">{{ \App\Models\Penjualan::STATUS[$pj->status] }}</span></td></tr>
                <tr><th class="ps-3">Unit</th><td>{{ $pj->unit->perumahan->nama }} — {{ $pj->unit->label }} ({{ $pj->unit->tipe }})</td></tr>
                <tr class="table-warning"><th class="ps-3">Pemilik Sekarang</th><td><strong>{{ $pj->pembeli->nama }}</strong><br><small>NIK {{ $pj->pembeli->nik }}</small></td></tr>
                <tr><th class="ps-3">Metode</th><td>{{ \App\Models\Penjualan::METODE[$pj->metode] }}</td></tr>
                <tr><th class="ps-3">Total Harga</th><td>{{ rupiah($pos['total']) }}</td></tr>
                <tr><th class="ps-3">Sudah Dibayar</th><td class="text-success">{{ rupiah($pos['terbayar']) }}</td></tr>
                <tr class="table-light"><th class="ps-3">Sisa Tagihan Dialihkan</th><td class="fw-bold">{{ rupiah($pos['sisa']) }}</td></tr>
                @if($pos['sisa_dp'] > 0)<tr><th class="ps-3">— termasuk sisa DP</th><td class="text-danger">{{ rupiah($pos['sisa_dp']) }}</td></tr>@endif
                @if($kredit)
                    <tr><th class="ps-3">Angsuran</th><td>{{ rupiah($pj->angsuran_bulanan) }} × {{ $pj->tenor_bulan }} bulan</td></tr>
                    <tr><th class="ps-3">Lunas / Sisa</th><td>{{ $pos['lunas'] }} lunas · <strong>{{ $pos['belum'] }}</strong> belum lunas
                        @if($pos['terlambat'])<br><span class="text-danger small"><i class="bi bi-exclamation-triangle"></i> {{ $pos['terlambat'] }} angsuran terlambat (ikut dialihkan)</span>@endif</td></tr>
                    @if($pos['berikut'])<tr><th class="ps-3">Angsuran Berikut</th><td>Ke-{{ $pos['berikut']->angsuran_ke }}, jatuh tempo {{ tgl($pos['berikut']->jatuh_tempo) }}</td></tr>@endif
                @endif
                <tr><th class="ps-3">Saldo Deposit</th><td>{{ rupiah($pj->saldo_deposit) }}</td></tr>
            </table>
        </div>

        @if($pj->takeOver->isNotEmpty())
        <div class="card mb-3">
            <div class="card-header bg-white fw-semibold"><i class="bi bi-people"></i> Riwayat Kepemilikan</div>
            <ul class="list-group list-group-flush">
                @foreach($pj->riwayatPemilik() as $r)
                    <li class="list-group-item small">{{ $loop->iteration }}. <strong>{{ $r->pembeli->nama }}</strong>
                        <span class="text-muted">· {{ tgl($r->dari) }} – {{ $r->sampai ? tgl($r->sampai) : 'sekarang' }}</span></li>
                @endforeach
            </ul>
        </div>
        @endif
    </div>

    <div class="col-lg-7">
        @if($hambatan)
            <div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> {{ $hambatan }}</div>
        @else
        <div class="card">
            <div class="card-header bg-primary-subtle fw-semibold"><i class="bi bi-arrow-left-right"></i> Take Over / Pengalihan Hak Unit</div>
            <form method="POST" action="{{ route('take-over.store', $pj) }}" class="card-body" id="formTakeOver">
                @csrf
                <div class="row g-3">
                    <div class="col-md-8">
                        <label class="form-label">Pembeli Baru (penerima pengalihan) <span class="text-danger">*</span></label>
                        <select name="pembeli_baru_id" id="pembeli_baru_id" class="form-select @error('pembeli_baru_id') is-invalid @enderror" required
                                data-cari="{{ route('pembeli.cari') }}" data-kecuali="{{ $pj->pembeli_id }}" placeholder="Ketik nama atau NIK pembeli…">
                            <option value="">— Cari pembeli —</option>
                            @if($lamaPilih)<option value="{{ $lamaPilih->id }}" data-nik="{{ $lamaPilih->nik }}" data-telepon="{{ $lamaPilih->telepon }}" selected>{{ $lamaPilih->nama }}</option>@endif
                        </select>
                        @error('pembeli_baru_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        <div class="form-text">Belum terdaftar? <a href="{{ route('pembeli.create') }}" target="_blank">Tambah pembeli baru</a> lalu cari di sini.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tanggal Take Over <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-12">
                        <label class="form-label">Ketentuan Pembayaran untuk Pembeli Baru <span class="text-danger">*</span></label>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="opsi" value="lanjut" id="opsi_lanjut" @checked($opsi === 'lanjut')>
                                <label class="btn btn-outline-primary w-100 text-start h-100" for="opsi_lanjut">
                                    <div class="fw-semibold"><i class="bi bi-arrow-right-circle"></i> Melanjutkan Angsuran</div>
                                    <small>Jadwal, nominal & jatuh tempo tetap. Pembeli baru meneruskan
                                        @if($kredit){{ $pos['belum'] }} angsuran tersisa @if($pos['sisa_dp'] > 0)+ sisa DP @endif@else sisa pembayaran @endif.</small>
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="opsi" value="baru" id="opsi_baru" @checked($opsi === 'baru') @disabled(! $kredit)>
                                <label class="btn btn-outline-primary w-100 text-start h-100" for="opsi_baru">
                                    <div class="fw-semibold"><i class="bi bi-sliders"></i> Atur Angsuran & Tenor Baru</div>
                                    <small>@if($kredit)Sisa pokok {{ rupiah($pos['sisa_kredit']) }} dijadwal ulang dengan tenor & tanggal mulai baru.@else Hanya untuk transaksi kredit.@endif</small>
                                </label>
                            </div>
                        </div>
                        @error('opsi')<div class="text-danger small">{{ $message }}</div>@enderror
                    </div>

                    @if($kredit)
                    <div class="col-12" id="bagianBaru" @if($opsi !== 'baru') hidden @endif>
                        <div class="border rounded p-3 bg-light">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Tenor Baru (bulan)</label>
                                    <input type="number" name="tenor_baru" id="tenor_baru" min="1" max="{{ \App\Models\TakeOver::TENOR_MAKS }}"
                                           value="{{ old('tenor_baru', max(1, $pos['belum'])) }}" class="form-control @error('tenor_baru') is-invalid @enderror">
                                    @error('tenor_baru')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Mulai Angsuran Baru</label>
                                    <input type="date" name="mulai_baru" value="{{ old('mulai_baru', now()->addMonthNoOverflow()->startOfMonth()->addDays(9)->toDateString()) }}"
                                           class="form-control @error('mulai_baru') is-invalid @enderror">
                                    @error('mulai_baru')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Angsuran / Bulan</label>
                                    <div class="form-control bg-white fw-bold text-primary" id="angsuranBaru">-</div>
                                </div>
                            </div>
                            <div class="small text-muted mt-2">
                                Sisa pokok angsuran <strong>{{ rupiah($pos['sisa_kredit']) }}</strong> dibagi rata (dibulatkan ke atas per Rp 100, selisih di angsuran terakhir).
                                Angsuran yang sudah lunas tetap tercatat; angsuran terlambat ikut dijadwal ulang.
                                @if($pos['sisa_dp'] > 0)Sisa DP {{ rupiah($pos['sisa_dp']) }} tetap harus dilunasi terlebih dahulu.@endif
                            </div>
                        </div>
                    </div>
                    @endif

                    <div class="col-md-5">
                        <label class="form-label">Biaya Administrasi Take Over</label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="text" inputmode="numeric" data-uang name="biaya_admin" value="{{ old('biaya_admin', 0) }}" class="form-control @error('biaya_admin') is-invalid @enderror">
                        </div>
                        @error('biaya_admin')<div class="text-danger small">{{ $message }}</div>@enderror
                        <div class="form-text">Opsional. Bila diisi, otomatis tercatat di Buku Kas (kas masuk).</div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Cara Bayar Biaya</label>
                        <select name="cara_bayar" class="form-select">
                            <option value="tunai" @selected(old('cara_bayar') !== 'transfer')>Tunai</option>
                            <option value="transfer" @selected(old('cara_bayar') === 'transfer')>Transfer</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Catatan</label>
                        <textarea name="catatan" rows="2" maxlength="1000" class="form-control" placeholder="mis. Alasan pengalihan, kesepakatan kompensasi antar pihak, nomor akta / surat pernyataan">{{ old('catatan') }}</textarea>
                    </div>
                    <div class="col-12">
                        <div class="form-check">
                            <input type="checkbox" name="setuju" value="1" id="setuju" class="form-check-input @error('setuju') is-invalid @enderror" required>
                            <label class="form-check-label" for="setuju">Pemilik lama (<strong>{{ $pj->pembeli->nama }}</strong>) dan pembeli baru telah menyetujui pengalihan hak ini.
                                Seluruh pembayaran sebelumnya tetap tercatat atas nama pemilik lama sebagai riwayat.</label>
                            @error('setuju')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary mt-3" data-confirm-submit><i class="bi bi-arrow-left-right"></i> Proses Take Over &amp; Cetak Berita Acara</button>
            </form>
        </div>
        @endif
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<script>
(() => {
    // Pilih pembeli baru (pemilik sekarang dikecualikan)
    const el = document.getElementById('pembeli_baru_id');
    if (el && typeof TomSelect !== 'undefined') {
        const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
        const kecuali = el.dataset.kecuali;
        const awal = [...el.options].filter(o => o.value).map(o => ({ id: o.value, nama: o.text, nik: o.dataset.nik, telepon: o.dataset.telepon }));
        new TomSelect(el, {
            valueField: 'id', labelField: 'nama', searchField: ['nama', 'nik', 'telepon'],
            options: awal, maxOptions: 50, loadThrottle: 250, preload: 'focus',
            load(query, callback) {
                fetch(el.dataset.cari + '?q=' + encodeURIComponent(query), { headers: { Accept: 'application/json' } })
                    .then(r => r.json()).then(d => callback(d.filter(p => String(p.id) !== kecuali))).catch(() => callback());
            },
            render: {
                option: d => `<div><div class="fw-semibold">${esc(d.nama)}</div><small class="text-muted">NIK ${esc(d.nik)}${d.telepon ? ' · ' + esc(d.telepon) : ''}</small></div>`,
                item: d => `<div>${esc(d.nama)} <small class="text-muted ms-1">NIK ${esc(d.nik)}</small></div>`,
                no_results: () => '<div class="no-results text-muted p-2">Pembeli tidak ditemukan.</div>',
            },
        });
    }

    // Opsi angsuran baru + pratinjau nominal
    const bagian = document.getElementById('bagianBaru');
    const tenor = document.getElementById('tenor_baru');
    const sisa = {{ (float) $pos['sisa_kredit'] }};
    const hitung = () => {
        const n = parseInt(tenor?.value, 10);
        const out = document.getElementById('angsuranBaru');
        if (!out) return;
        out.textContent = n > 0 ? 'Rp ' + (Math.ceil(sisa / n / 100) * 100).toLocaleString('id-ID') : '-';
    };
    document.querySelectorAll('[name=opsi]').forEach(r => r.addEventListener('change', () => {
        if (bagian) bagian.hidden = document.querySelector('[name=opsi]:checked').value !== 'baru';
    }));
    tenor?.addEventListener('input', hitung);
    hitung();

    document.getElementById('formTakeOver')?.addEventListener('submit', e => {
        const nama = document.querySelector('#pembeli_baru_id option:checked')?.textContent?.trim() || 'pembeli baru';
        if (!confirm('Alihkan unit ini kepada ' + nama + '? Proses ini tidak dapat dibatalkan.')) e.preventDefault();
    });
})();
</script>
@endpush