{{--
    Currency Input Component
    ─────────────────────────
    Input field dengan prefix "Rp" dan auto-formatting ribuan.
    Nilai yang dikirim ke server adalah integer (tanpa format).

    Usage:
        <x-form.currency-input
            name="nilai_permohonan"
            label="Nilai Permohonan"
            :value="old('nilai_permohonan', $pengajuan->nilai_permohonan ?? '')"
            hint="Maksimal Rp 50.000.000"
            required
        />

    Props:
        name      string  required
        label     string  optional
        value     mixed   optional — nilai awal
        hint      string  optional — teks bantuan
        required  bool    default false
        disabled  bool    default false
        max       int     optional — validasi sisi client (dalam rupiah)
--}}
@props([
    'name',
    'label'    => null,
    'value'    => '',
    'hint'     => null,
    'required' => false,
    'disabled' => false,
    'max'      => null,
])

@php
    $inputId     = 'currency_' . $name;
    $hiddenName  = $name;
    $displayName = $name . '_display';
    $initialDisplay = $value ? number_format((float) $value, 0, ',', '.') : '';
@endphp

<div class="mb-3">
    @if($label)
    <label for="{{ $inputId }}" class="form-label fw-medium">
        {{ $label }}
        @if($required) <span class="text-danger">*</span> @endif
    </label>
    @endif

    <div class="input-group">
        <span class="input-group-text bg-white fw-semibold text-muted">Rp</span>
        {{-- Display field: formatted --}}
        <input
            type="text"
            id="{{ $inputId }}"
            name="{{ $displayName }}"
            class="form-control @error($name) is-invalid @enderror"
            value="{{ $initialDisplay }}"
            placeholder="0"
            inputmode="numeric"
            autocomplete="off"
            {{ $disabled ? 'disabled' : '' }}
            {{ $required ? 'required' : '' }}
            data-currency-display="{{ $hiddenName }}"
        >
        {{-- Hidden field: raw integer sent to server --}}
        <input type="hidden" name="{{ $hiddenName }}" id="{{ $inputId }}_raw" value="{{ $value }}">
    </div>

    @if($hint)
    <div class="form-text text-muted">{{ $hint }}</div>
    @endif

    @error($name)
    <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>

@once
@push('scripts')
<script>
// Currency input formatter — runs once, handles all [data-currency-display] inputs
document.addEventListener('input', function (e) {
    const el = e.target;
    if (!el.dataset.currencyDisplay) return;

    // Strip non-digits
    const raw = el.value.replace(/\D/g, '');
    const num = parseInt(raw || '0', 10);

    // Update display
    el.value = num ? num.toLocaleString('id-ID') : '';

    // Update hidden raw field
    const hiddenId = el.id + '_raw';
    const hidden = document.getElementById(hiddenId);
    if (hidden) hidden.value = num || '';
});
</script>
@endpush
@endonce