{{-- Field harga & metode pembayaran, dipakai di form create & edit --}}
@php
    $tglDefault = old('tanggal', optional($penjualan->tanggal)->toDateString() ?? now()->toDateString());
    $mulaiDefault = old('mulai_angsuran', optional($penjualan->mulai_angsuran)->toDateString()
        ?? \Illuminate\Support\Carbon::parse($tglDefault)->addMonthNoOverflow()->toDateString());
@endphp
<div class="row">
    <div class="col-md-4 mb-3">
        <label class="form-label">Tanggal Transaksi <span class="text-danger">*</span></label>
        <input type="date" name="tanggal" id="tanggal" value="{{ $tglDefault }}" class="form-control" required>
    </div>
    <div class="col-md-4 mb-3">
        <label class="form-label">Harga Jual (Rp) <span class="text-danger">*</span></label>
        <input type="text" inputmode="numeric" data-uang name="harga_jual" id="harga_jual" value="{{ old('harga_jual', $penjualan->harga_jual ? (int) $penjualan->harga_jual : '') }}" class="form-control @error('harga_jual') is-invalid @enderror" required>
    </div>
    <div class="col-md-4 mb-3">
        <label class="form-label">Diskon (Rp)</label>
        <input type="text" inputmode="numeric" data-uang name="diskon" id="diskon" value="{{ old('diskon', (int) $penjualan->diskon) }}" class="form-control @error('diskon') is-invalid @enderror">
    </div>
    <div class="col-12 mb-3">
        <div class="alert alert-primary py-2 mb-0 d-flex justify-content-between">
            <span>Total Harga</span><strong id="total_view">Rp 0</strong>
        </div>
    </div>

    <div class="col-12 mb-3">
        <label class="form-label d-block">Metode Pembayaran <span class="text-danger">*</span></label>
        <div class="btn-group w-100" role="group">
            @foreach(\App\Models\Penjualan::METODE as $k => $v)
                <input type="radio" class="btn-check" name="metode" id="metode_{{ $k }}" value="{{ $k }}" @checked(old('metode', $penjualan->metode ?? 'cash') == $k)>
                <label class="btn btn-outline-primary" for="metode_{{ $k }}">
                    <i class="bi {{ ['cash' => 'bi-cash-stack', 'kpr' => 'bi-bank', 'kredit' => 'bi-calendar2-week'][$k] }}"></i> {{ $v }}
                </label>
            @endforeach
        </div>
    </div>

    <div class="col-md-4 mb-3">
        <label class="form-label">Uang Muka / DP (Rp) <span class="text-danger m-kredit">*</span></label>
        <input type="text" inputmode="numeric" data-uang name="uang_muka" id="uang_muka" value="{{ old('uang_muka', (int) $penjualan->uang_muka) }}" class="form-control @error('uang_muka') is-invalid @enderror">
        <div class="mt-1 d-flex gap-1">
            @foreach([10, 20, 30, 50] as $pct)
                <button type="button" class="btn btn-sm btn-outline-secondary py-0 btn-dp" data-pct="{{ $pct }}">{{ $pct }}%</button>
            @endforeach
        </div>
    </div>
    <div class="col-md-4 mb-3 m-kpr">
        <label class="form-label">Bank KPR <span class="text-danger">*</span></label>
        <input name="bank_kpr" value="{{ old('bank_kpr', $penjualan->bank_kpr) }}" class="form-control @error('bank_kpr') is-invalid @enderror" placeholder="mis. BTN, BRI, Mandiri">
    </div>
    <div class="col-md-4 mb-3 m-kpr m-kredit">
        <label class="form-label">Tenor (bulan) <span class="text-danger m-kredit">*</span></label>
        <input type="number" name="tenor_bulan" id="tenor_bulan" min="1" max="360" value="{{ old('tenor_bulan', $penjualan->tenor_bulan) }}" class="form-control @error('tenor_bulan') is-invalid @enderror">
        <div class="mt-1 d-flex flex-wrap gap-1 m-kredit">
            @foreach([12, 24, 36, 60] as $t)
                <button type="button" class="btn btn-sm btn-outline-secondary py-0 btn-tenor" data-tenor="{{ $t }}">{{ $t }} bln</button>
            @endforeach
        </div>
    </div>
    <div class="col-md-4 mb-3 m-kredit">
        <label class="form-label">Angsuran Pertama <span class="text-danger">*</span></label>
        <input type="date" name="mulai_angsuran" id="mulai_angsuran" value="{{ $mulaiDefault }}" class="form-control @error('mulai_angsuran') is-invalid @enderror">
        <small class="text-muted">Jatuh tempo berulang setiap bulan.</small>
    </div>

    <div class="col-12 mb-3 m-kredit">
        <div class="card bg-light border">
            <div class="card-body py-2">
                <div class="row text-center g-2 align-items-center">
                    <div class="col-6 col-md"><div class="small text-muted">DP</div><div class="fw-semibold" id="sim_dp">-</div></div>
                    <div class="col-6 col-md"><div class="small text-muted">Sisa Dicicil</div><div class="fw-semibold" id="sim_pokok">-</div></div>
                    <div class="col-6 col-md"><div class="small text-muted">Tenor</div><div class="fw-semibold" id="sim_tenor">-</div></div>
                    <div class="col-6 col-md"><div class="small text-muted">Angsuran / Bulan</div><div class="fw-bold text-primary fs-5" id="sim_angsuran">-</div></div>
                </div>
                <div class="small text-muted text-center mt-1" id="sim_periode"></div>
            </div>
        </div>
    </div>
</div>
<div class="mb-3">
    <label class="form-label">Catatan</label>
    <textarea name="catatan" rows="2" class="form-control">{{ old('catatan', $penjualan->catatan) }}</textarea>
</div>

@push('scripts')
<script>
(() => {
    const fmt = n => 'Rp ' + Math.round(n).toLocaleString('id-ID');
    const $ = id => document.getElementById(id);
    const metode = () => document.querySelector('input[name=metode]:checked')?.value || 'cash';
    const total = () => Math.max(0, nilaiUang($('harga_jual')) - nilaiUang($('diskon')));

    const hitung = () => {
        const t = total();
        $('total_view').textContent = fmt(t);

        // Rumus sama dengan Penjualan::hitungAngsuran() di server
        const dp = nilaiUang($('uang_muka'));
        const tenor = +$('tenor_bulan').value || 0;
        const pokok = Math.max(0, t - dp);
        const angsuran = tenor ? Math.ceil(pokok / tenor / 100) * 100 : 0;

        $('sim_dp').textContent = fmt(dp) + (t ? ` (${Math.round(dp / t * 100)}%)` : '');
        $('sim_pokok').textContent = fmt(pokok);
        $('sim_tenor').textContent = tenor ? tenor + ' bulan' : '-';
        $('sim_angsuran').textContent = tenor ? fmt(angsuran) : '-';

        const mulai = $('mulai_angsuran').value;
        if (tenor && mulai) {
            const akhir = new Date(mulai); akhir.setMonth(akhir.getMonth() + tenor - 1);
            const f = d => d.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' });
            $('sim_periode').textContent = `Angsuran ${f(new Date(mulai))} s/d ${f(akhir)}`;
        } else {
            $('sim_periode').textContent = '';
        }
    };

    const toggle = () => {
        const m = metode();
        document.querySelectorAll('.m-kpr, .m-kredit').forEach(e => {
            const show = (e.classList.contains('m-kpr') && m === 'kpr') || (e.classList.contains('m-kredit') && m === 'kredit');
            e.classList.toggle('d-none', !show);
        });
        hitung();
    };

    ['harga_jual', 'diskon', 'uang_muka', 'tenor_bulan', 'mulai_angsuran'].forEach(id => $(id).addEventListener('input', hitung));
    document.querySelectorAll('input[name=metode]').forEach(r => r.addEventListener('change', toggle));
    document.querySelectorAll('.btn-dp').forEach(b => b.addEventListener('click', () => {
        setUang($('uang_muka'), total() * b.dataset.pct / 100); hitung();
    }));
    document.querySelectorAll('.btn-tenor').forEach(b => b.addEventListener('click', () => {
        $('tenor_bulan').value = b.dataset.tenor; hitung();
    }));
    $('tanggal').addEventListener('change', () => {
        if (!$('mulai_angsuran').dataset.touched) {
            const d = new Date($('tanggal').value); d.setMonth(d.getMonth() + 1);
            if (!isNaN(d)) $('mulai_angsuran').value = d.toISOString().slice(0, 10);
            hitung();
        }
    });
    $('mulai_angsuran').addEventListener('change', e => e.target.dataset.touched = 1);

    window.hitungTotal = hitung;
    toggle();
})();
</script>
@endpush