@props([
    'name' => 'password',
    'id' => null,
    'label' => null,
    'required' => true,
    'value' => '',
    'placeholder' => '',
])

@php($inputId = $id ?? $name)

<div class="form-group">
    @if($label)
        <label for="{{ $inputId }}">{{ $label }}</label>
    @endif
    <div class="controls position-relative">
        <input type="password"
            name="{{ $name }}"
            id="{{ $inputId }}"
            class="form-control password-toggle-input"
            value="{{ $value }}"
            placeholder="{{ $placeholder }}"
            @if($required) required data-validation-required-message="{{ __('admin.this_field_is_required') }}" @endif
            autocomplete="new-password">
        <button type="button"
            class="btn btn-link password-toggle-btn p-0"
            data-target="#{{ $inputId }}"
            aria-label="{{ __('admin.password') }}">
            <i class="feather icon-eye"></i>
        </button>
    </div>
</div>

@once
    @push('css')
        <style>
            .password-toggle-input { padding-inline-end: 2.75rem; }
            .password-toggle-btn {
                position: absolute;
                top: 50%;
                inset-inline-end: 0.75rem;
                transform: translateY(-50%);
                color: #6e6b7b;
                line-height: 1;
            }
            .password-toggle-btn:hover { color: #475569; text-decoration: none; }
        </style>
    @endpush
    @push('js')
        <script>
            $(document).on('click', '.password-toggle-btn', function () {
                var $input = $($(this).data('target'));
                var $icon = $(this).find('i');
                if ($input.attr('type') === 'password') {
                    $input.attr('type', 'text');
                    $icon.removeClass('icon-eye').addClass('icon-eye-off');
                } else {
                    $input.attr('type', 'password');
                    $icon.removeClass('icon-eye-off').addClass('icon-eye');
                }
            });
        </script>
    @endpush
@endonce