@props([
    'type' => 'text',
    'name',
    'id' => null,
    'label' => null,
    'value' => null,
    'placeholder' => null,
    'required' => false,
    'disabled' => false,
    'errorMassage' => null,
    'icon' => null, // icon classes, e.g. "fa-solid fa-envelope"; if null = no icon
    'showPasswordToggle' => false, // show password toggle button on the right
    'maxlength' => 255,
])

@php
    $id = $id ?? $name;
    $isRequired = filter_var($required, FILTER_VALIDATE_BOOLEAN) || $attributes->has('required');
@endphp

@if ($label)
    <x-frontend::forms.label :for="$id" :required="$isRequired">
        {{ $label }}
    </x-frontend::forms.label>
@endif

@php
    $hasIcon = !empty($icon);
    $hasToggle = $type === 'password' || $showPasswordToggle;
    $needsWrapper = $hasIcon || $hasToggle;
    $inputClasses = 'med-input border border-gray-300 rounded-md px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500';

    if ($hasIcon) {
        $inputClasses .= ' med-input-icon';
    }
    if ($type === 'password' || $hasToggle) {
        $inputClasses .= ' med-input-password';
    }

    if ($type === 'tel') {
        $inputClasses .= ' tel-number';
    }
@endphp

@if ($needsWrapper)
    <div class="relative">
        @if ($hasIcon)
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-med-secondary med-input-icon-wrapper">
                <i class="{{ $icon }}"></i>
            </span>
        @endif
        <input id="{{ $id }}" name="{{ $name }}" type="{{ $type }}" @if (!is_null($value)) value="{{ old($name, $value) }}" @else value="{{ old($name) }}" @endif @if ($placeholder) placeholder="{{ $placeholder }}" @endif {{ $attributes->class($inputClasses) }} @if ($disabled) disabled @endif maxlength="{{ $maxlength }}" />
        @if ($hasToggle)
            <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-med-primary focus:outline-none cursor-pointer transition-colors duration-200 z-10" type="button" onclick="togglePassword('{{ $id }}')">
                <i class="fa-regular fa-eye"></i>
            </button>
        @endif
    </div>
@else
    <input id="{{ $id }}" name="{{ $name }}" type="{{ $type }}" @if (!is_null($value)) value="{{ old($name, $value) }}" @else value="{{ old($name) }}" @endif @if ($placeholder) placeholder="{{ $placeholder }}" @endif {{ $attributes->class($inputClasses) }} @if ($disabled) disabled @endif maxlength="{{ $maxlength }}" />
@endif

<x-frontend::forms.error :name="$name" :message="$errorMassage" />