{{-- Reusable password + confirm block. Pass $color (e.g. 'green') --}}
@php $color = $color ?? 'green'; @endphp
<div x-data="{ showPwd: false, showConfirm: false }">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                Password <span class="text-red-500">*</span>
            </label>
            <div class="relative">
                <input :type="showPwd ? 'text' : 'password'"
                       id="password" name="password"
                       class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-{{ $color }}-500 focus:border-{{ $color }}-500 transition"
                       placeholder="Minimum 8 characters" required>
                <button type="button" @click="showPwd = !showPwd"
                        class="absolute inset-y-0 right-0 px-4 text-gray-400 hover:text-gray-600">
                    <i :class="showPwd ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                </button>
            </div>
            @error('password')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-2">
                Confirm Password <span class="text-red-500">*</span>
            </label>
            <div class="relative">
                <input :type="showConfirm ? 'text' : 'password'"
                       id="password_confirmation" name="password_confirmation"
                       class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-{{ $color }}-500 focus:border-{{ $color }}-500 transition"
                       placeholder="Re-enter your password" required>
                <button type="button" @click="showConfirm = !showConfirm"
                        class="absolute inset-y-0 right-0 px-4 text-gray-400 hover:text-gray-600">
                    <i :class="showConfirm ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                </button>
            </div>
        </div>
    </div>
</div>
