{{-- ── Voice Input ─────────────────────────────────────────────── --}}
<div id="voice-bar" style="margin-bottom:18px;">
    <div
        style="display:flex; align-items:center; gap:12px; padding:13px 16px;
                background:var(--surface,#F8FAFC); border:1.5px dashed var(--border,#E2E8F0);
                border-radius:10px;">
        <button type="button" id="mic-btn" onclick="voiceToggle()" title="Tap to speak"
            style="flex-shrink:0; width:40px; height:40px; border-radius:50%; border:none;
                   background:#6366F1; color:#fff; cursor:pointer; display:flex;
                   align-items:center; justify-content:center; transition:background .2s, transform .15s;">
            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4
                         M12 3a4 4 0 014 4v4a4 4 0 01-8 0V7a4 4 0 014-4z" />
            </svg>
        </button>
        <div style="min-width:0;">
            <div style="font-size:.77rem; font-weight:600; color:var(--t2,#475569); margin-bottom:1px;">Voice Input
            </div>
            <div id="mic-status"
                style="font-size:.74rem; color:var(--t3,#94A3B8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                Tap mic — ucapkan mis. <em>"beli makan 50 ribu"</em> atau <em>"gaji 5 juta"</em>
            </div>
        </div>
    </div>
</div>

{{-- ── Fields ───────────────────────────────────────────────────── --}}
<div class="form-grid">
    <div class="form-group">
        <label class="form-label" for="type">Type</label>
        <select name="type" id="type" class="form-control" required>
            <option value="">— Select —</option>
            <option value="income" {{ old('type', $transaction->type ?? '') == 'income' ? 'selected' : '' }}>Income
            </option>
            <option value="expense" {{ old('type', $transaction->type ?? '') == 'expense' ? 'selected' : '' }}>Expense
            </option>
        </select>
        @error('type')
            <div class="form-error">{{ $message }}</div>
        @enderror
    </div>
    <div class="form-group">
        <label class="form-label" for="date">Date</label>
        <input type="date" name="date" id="date" class="form-control"
            value="{{ old('date', isset($transaction) && $transaction->date ? $transaction->date->format('Y-m-d') : '') }}"
            required>
        @error('date')
            <div class="form-error">{{ $message }}</div>
        @enderror
    </div>
</div>

<div class="form-grid">
    <div class="form-group">
        <label class="form-label" for="title">Description</label>
        <input type="text" name="title" id="title" class="form-control"
            value="{{ old('title', $transaction->title ?? '') }}" placeholder="e.g. Salary, Groceries" required>
        @error('title')
            <div class="form-error">{{ $message }}</div>
        @enderror
    </div>
    <div class="form-group">
        <label class="form-label" for="amount">Amount</label>
        <input type="number" name="amount" id="amount" class="form-control" step="0.01" min="0.01"
            value="{{ old('amount', $transaction->amount ?? '') }}" placeholder="0.00" required>
        @error('amount')
            <div class="form-error">{{ $message }}</div>
        @enderror
    </div>
</div>

<div class="form-group">
    <label class="form-label" for="note">Note
        <span style="font-weight:400; color:var(--t3);">(optional)</span>
    </label>
    <textarea name="note" id="note" class="form-control" rows="3" placeholder="Add any relevant details…">{{ old('note', $transaction->note ?? '') }}</textarea>
    @error('note')
        <div class="form-error">{{ $message }}</div>
    @enderror
</div>

{{-- ── Voice JS ─────────────────────────────────────────────────── --}}
<script>
    (function() {
        var SR = window.SpeechRecognition || window.webkitSpeechRecognition;
        if (!SR) {
            document.getElementById('voice-bar').style.display = 'none';
            return;
        }

        var rec = new SR();
        rec.lang = 'id-ID';
        rec.interimResults = false;
        rec.maxAlternatives = 1;
        var running = false;

        function parseMoney(text) {
            var t = text.toLowerCase().replace(/,/g, '');
            var m = t.match(/(\d+(?:\.\d+)?)\s*(miliar|milyard|juta|jt|ribu|rb|k)?/i);
            if (!m) return null;
            var n = parseFloat(m[1]),
                u = (m[2] || '').toLowerCase();
            if (u === 'miliar' || u === 'milyard') n *= 1e9;
            else if (u === 'juta' || u === 'jt') n *= 1e6;
            else if (u === 'ribu' || u === 'rb' || u === 'k') n *= 1e3;
            return n > 0 ? n : null;
        }

        function detectType(text) {
            var t = text.toLowerCase();
            var inc = ['gaji', 'terima', 'dapat', 'masuk', 'bonus', 'penghasilan', 'pendapatan', 'pemasukan',
                'income', 'salary', 'jual', 'penjualan', 'untung', 'freelance'
            ];
            var exp = ['beli', 'bayar', 'makan', 'minum', 'transport', 'bensin', 'cicilan', 'tagihan', 'jajan',
                'belanja', 'keluar', 'biaya', 'sewa', 'ongkos', 'bayarkan', 'pengeluaran', 'expense',
                'langganan', 'iuran'
            ];
            for (var i = 0; i < inc.length; i++)
                if (t.includes(inc[i])) return 'income';
            for (var i = 0; i < exp.length; i++)
                if (t.includes(exp[i])) return 'expense';
            return '';
        }

        function cleanTitle(text) {
            return text.replace(/\b\d+(?:[.,]\d+)?\s*(?:miliar|milyard|juta|jt|ribu|rb|k)?\b/gi, '').replace(/\s+/g,
                ' ').trim();
        }

        function fillForm(transcript) {
            var type = detectType(transcript),
                amount = parseMoney(transcript),
                title = cleanTitle(transcript);
            if (type) document.getElementById('type').value = type;
            if (amount) document.getElementById('amount').value = amount.toFixed(2);
            if (title) document.getElementById('title').value = title;
            var d = document.getElementById('date');
            if (!d.value) d.value = new Date().toISOString().slice(0, 10);
        }

        var btn = document.getElementById('mic-btn');
        var stat = document.getElementById('mic-status');

        function setUI(on) {
            running = on;
            btn.style.background = on ? '#EF4444' : '#6366F1';
            btn.style.transform = on ? 'scale(1.1)' : 'scale(1)';
            stat.innerHTML = on ? '🎙 Mendengarkan…' :
                'Tap mic — ucapkan mis. <em>"beli makan 50 ribu"</em> atau <em>"gaji 5 juta"</em>';
        }

        rec.onresult = function(e) {
            var t = e.results[0][0].transcript;
            stat.textContent = '✓ "' + t + '"';
            fillForm(t);
            setUI(false);
        };
        rec.onerror = function(e) {
            stat.textContent = '⚠ ' + (e.error === 'not-allowed' ? 'Akses mikrofon ditolak.' : 'Gagal: ' + e
                .error);
            setUI(false);
        };
        rec.onend = function() {
            if (running) setUI(false);
        };

        window.voiceToggle = function() {
            running ? (rec.stop(), setUI(false)) : (rec.start(), setUI(true));
        };
    })();
</script>