@extends('layouts.app')
@section('content')
<div class="mx-auto max-w-2xl">
    <a href="{{ route('goals.index') }}" class="text-sm text-slate-500">← Kembali</a>
    <h1 class="mt-3 text-3xl font-extrabold">{{ isset($goal) ? 'Edit Target' : 'Tambah Target Finansial' }}</h1>
    <p class="mt-1 text-slate-500">Tentukan tujuan keuangan yang ingin kamu capai.</p>

    <div class="mt-6 rounded-2xl border bg-white p-6 soft">
        <form id="goalForm" method="POST" action="{{ isset($goal) ? route('goals.update', $goal) : route('goals.store') }}" class="grid gap-4 md:grid-cols-2">
            @csrf
            @if(isset($goal)) @method('PUT') @endif

            <div class="md:col-span-2">
                <label class="text-sm font-bold">Nama Target</label>
                <input name="name" value="{{ old('name', $goal->name ?? '') }}" class="form-control mt-1" placeholder="Contoh: Dana Nikah">
            </div>

            <div>
                <label for="targetAmountDisplay" class="text-sm font-bold">Target</label>
                <div style="position:relative;margin-top:.25rem;">
                    <span aria-hidden="true" style="position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:2;font-size:16px;font-weight:700;color:#94a3b8;pointer-events:none;">Rp</span>
                    <input id="targetAmountDisplay" type="text" inputmode="numeric" autocomplete="off"
                        value="{{ old('target_amount', isset($goal) ? $goal->target_amount : '') }}"
                        class="form-control" style="width:100%;box-sizing:border-box;padding-left:52px;" placeholder="0" aria-label="Target dalam Rupiah">
                    <input id="targetAmount" type="hidden" name="target_amount" value="{{ old('target_amount', isset($goal) ? $goal->target_amount : '') }}">
                </div>
                <div class="mt-1 text-xs text-slate-400">Contoh: Rp 10.000.000</div>
            </div>

            <div>
                <label for="currentAmountDisplay" class="text-sm font-bold">Terkumpul</label>
                <div style="position:relative;margin-top:.25rem;">
                    <span aria-hidden="true" style="position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:2;font-size:16px;font-weight:700;color:#94a3b8;pointer-events:none;">Rp</span>
                    <input id="currentAmountDisplay" type="text" inputmode="numeric" autocomplete="off"
                        value="{{ old('current_amount', isset($goal) ? $goal->current_amount : '') }}"
                        class="form-control" style="width:100%;box-sizing:border-box;padding-left:52px;" placeholder="0" aria-label="Terkumpul dalam Rupiah">
                    <input id="currentAmount" type="hidden" name="current_amount" value="{{ old('current_amount', isset($goal) ? $goal->current_amount : '') }}">
                </div>
                <div class="mt-1 text-xs text-slate-400">Dana yang sudah terkumpul</div>
            </div>

            <div>
                <label for="target_date" class="text-sm font-bold">Target Tanggal</label>
                <input id="target_date" type="date" name="target_date" value="{{ old('target_date', isset($goal) ? $goal->target_date?->format('Y-m-d') : '') }}" class="form-control mt-1">
            </div>

            <div class="md:col-span-2">
                <label class="text-sm font-bold">Catatan</label>
                <textarea name="description" class="form-control mt-1" rows="3">{{ old('description', $goal->description ?? '') }}</textarea>
            </div>

            <div class="md:col-span-2 flex justify-end gap-2">
                <a href="{{ route('goals.index') }}" class="rounded-xl border px-5 py-3 font-bold">Batal</a>
                <button type="submit" class="rounded-xl bg-emerald-600 px-5 py-3 font-bold text-white">Simpan Target</button>
            </div>
        </form>
    </div>
</div>
<script>
(function () {
    function onlyDigits(value) { return String(value == null ? '' : value).replace(/[^0-9]/g, ''); }
    function formatIDR(value) {
        var raw = onlyDigits(value);
        if (!raw) return '';
        return raw.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }
    function setup(displayId, hiddenId) {
        var display = document.getElementById(displayId);
        var hidden = document.getElementById(hiddenId);
        if (!display || !hidden) return;
        function sync() {
            var raw = onlyDigits(display.value);
            hidden.value = raw;
            display.value = formatIDR(raw);
        }
        hidden.value = onlyDigits(hidden.value || display.value);
        display.value = formatIDR(hidden.value);
        display.addEventListener('input', sync);
        display.addEventListener('change', sync);
        display.addEventListener('blur', sync);
    }
    setup('targetAmountDisplay', 'targetAmount');
    setup('currentAmountDisplay', 'currentAmount');
})();
</script>
@endsection