@props(['label', 'name', 'value' => '', 'required' => false, 'placeholder' => ''])

@push('stylesheets')
<style>
    .password-toggle {
        position: relative;
    }
    .password-toggle-btn {
        position: absolute;
        right: 10px;
        top: 75%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #6c757d;
        padding: 5px;
        z-index: 10;
    }
    .password-toggle-btn:hover {
        color: #495057;
    }
</style>
@endpush

<div class="form-group password-toggle">
    <label for="{{ $name }}">{{ $label }} @if($required)<span class="text-danger">*</span>@endif</label>
    <input 
        type="password" 
        name="{{ $name }}" 
        id="{{ $name }}" 
        value="{{ old($name, $value) }}"
        placeholder="{{ $placeholder }}"
        {{ $required ? 'required' : '' }}
        {{ $attributes->merge(['class' => 'form-control' . ($errors->has($name) ? ' is-invalid' : '')]) }}>
    <button type="button" class="password-toggle-btn" onclick="togglePassword('{{ $name }}')">
        <i class="fas fa-eye" id="passwordToggleIcon-{{ $name }}"></i>
    </button>
    @error($name)
        <span class="invalid-feedback d-block">{{ $message }}</span>
    @enderror
</div>