@props([
    'name' => '',
    'id' => null,
    'value' => '',
    'label' => '',
    'placeholder' => '0',
    'required' => false,
    'disabled' => false,
    'readonly' => false,
    'error' => null,
    'currency' => 'Rp',
    'precision' => 0,
    'allowNegative' => false,
    'max' => null,
    'min' => 0,
    'hint' => null,
    'class' => ''
])

@php
    $inputId = $id ?? $name;
    $hasError = $error || $errors->has($name);
    $formattedValue = old($name, $value);
    
    if (is_numeric($formattedValue)) {
        $formattedValue = number_format((float) $formattedValue, $precision, ',', '.');
    }
@endphp

<div class="form-group {{ $class }}" x-data="currencyInput('{{ $formattedValue }}', {{ $precision }}, '{{ $currency }}', {{ $allowNegative ? 'true' : 'false' }})">
    @if($label)
        <label for="{{ $inputId }}" class="label-field {{ $required ? 'required' : '' }}">
            {{ $label }}
        </label>
    @endif
    
    <div class="relative rounded-md shadow-sm">
        <!-- Currency Symbol -->
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <span class="text-gray-500 dark:text-gray-400 sm:text-sm font-medium">
                {{ $currency }}
            </span>
        </div>
        
        <!-- Input Field -->
        <input type="text"
               name="{{ $name }}"
               id="{{ $inputId }}"
               value="{{ $formattedValue }}"
               placeholder="{{ $placeholder }}"
               @if($required) required @endif
               @if($disabled) disabled @endif
               @if($readonly) readonly @endif
               x-model="displayValue"
               @input="handleInput"
               @blur="handleBlur"
               @focus="handleFocus"
               x-ref="input"
               class="input-field pl-12 {{ $hasError ? 'input-error' : '' }}"
               {{ $attributes }}>
               
        <!-- Loading Spinner (for AJAX) -->
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none" x-show="loading" x-cloak>
            <div class="spinner-sm"></div>
        </div>
    </div>
    
    <!-- Error Message -->
    @if($hasError)
        <p class="mt-1 text-sm text-danger-600">
            {{ $error ?? $errors->first($name) }}
        </p>
    @endif
    
    <!-- Hint Text -->
    @if($hint)
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
            {{ $hint }}
        </p>
    @endif
</div>

@push('scripts')
<script>
function currencyInput(initialValue, precision, currency, allowNegative) {
    return {
        displayValue: initialValue,
        numericValue: 0,
        loading: false,
        
        init() {
            this.updateNumericValue();
        },
        
        handleInput(event) {
            let value = event.target.value;
            
            // Remove all non-digit characters except minus and decimal separator
            let cleaned = value.replace(/[^\d\-]/g, '');
            
            // Handle negative sign
            if (!allowNegative) {
                cleaned = cleaned.replace('-', '');
            } else {
                // Only allow negative sign at the beginning
                if (cleaned.indexOf('-') > 0) {
                    cleaned = cleaned.replace(/-/g, '');
                }
                if (cleaned.startsWith('-') && cleaned.length > 1) {
                    cleaned = '-' + cleaned.slice(1).replace(/-/g, '');
                }
            }
            
            // Format number
            if (cleaned && cleaned !== '-') {
                let number = parseFloat(cleaned.replace(/[^\d-]/g, ''));
                if (!isNaN(number)) {
                    this.displayValue = this.formatNumber(number);
                    this.numericValue = number;
                }
            } else {
                this.displayValue = cleaned === '-' ? '-' : '';
                this.numericValue = 0;
            }
            
            // Dispatch custom event
            this.$dispatch('currency-input-change', {
                name: '{{ $name }}',
                value: this.numericValue,
                formatted: this.displayValue
            });
        },
        
        handleBlur() {
            if (this.displayValue && this.displayValue !== '-') {
                let number = parseFloat(this.displayValue.replace(/[^\d-]/g, ''));
                if (!isNaN(number)) {
                    this.displayValue = this.formatNumber(number);
                }
            } else {
                this.displayValue = '';
                this.numericValue = 0;
            }
            
            // Validate min/max
            let min = {{ $min ?? 0 }};
            let max = {{ $max ?? 'null' }};
            
            if (max !== null && this.numericValue > max) {
                this.displayValue = this.formatNumber(max);
                this.numericValue = max;
            }
            
            if (this.numericValue < min) {
                this.displayValue = this.formatNumber(min);
                this.numericValue = min;
            }
        },
        
        handleFocus() {
            // Remove formatting on focus for easy editing
            if (this.displayValue) {
                this.displayValue = this.numericValue.toString();
            }
        },
        
        formatNumber(number) {
            if (isNaN(number)) return '';
            
            // Split into integer and decimal parts
            let parts = number.toFixed(precision).split('.');
            let integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            
            if (precision > 0 && parts[1]) {
                return integerPart + ',' + parts[1];
            }
            
            return integerPart;
        },
        
        updateNumericValue() {
            if (this.displayValue) {
                let cleaned = this.displayValue.replace(/[^\d-]/g, '');
                this.numericValue = parseFloat(cleaned) || 0;
            }
        },
        
        getValue() {
            return this.numericValue;
        },
        
        setValue(value) {
            this.numericValue = value;
            this.displayValue = this.formatNumber(value);
        },
        
        async calculateAsync(callback) {
            this.loading = true;
            try {
                await callback(this.numericValue);
            } finally {
                this.loading = false;
            }
        }
    };
}
</script>
@endpush