@extends('layouts.auth')

@section('content')
<div class="reset-wrapper">
    <div class="reset-container">
        <div class="reset-card">
            <div class="reset-header">
                <h3 class="reset-title">{{ __('Create New Password') }}</h3>
                <p class="reset-subtitle">{{ __('Enter your new password below') }}</p>
            </div>

            <div class="reset-body">
                <form method="POST" action="{{ route('password.update') }}" class="reset-form">
                    @csrf

                    <input type="hidden" name="token" value="{{ $token ?? '' }}">

                    <div class="form-group">
                        <div class="form-floating">
                            <input id="email" 
                                   type="email" 
                                   class="@error('email') is-invalid @enderror"
                                   name="email" 
                                   value="{{ $email ?? old('email') }}" 
                                   required 
                                   autocomplete="email" 
                                   @if(isset($email)) readonly @endif
                                   placeholder=" ">
                            <label for="email">
                                <i class="bi bi-envelope"></i>
                                {{ __('Email Address') }}
                            </label>
                            @error('email')
                                <span class="error-message" role="alert">
                                    <i class="bi bi-exclamation-circle"></i>
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-floating">
                            <input id="password" 
                                   type="password" 
                                   class="@error('password') is-invalid @enderror"
                                   name="password" 
                                   required 
                                   autocomplete="new-password"
                                   placeholder=" ">
                            <label for="password">
                                <i class="bi bi-lock"></i>
                                {{ __('New Password') }}
                            </label>
                            <button type="button" class="password-toggle" onclick="togglePassword('password', 'toggleIcon1')">
                                <i class="bi bi-eye-slash" id="toggleIcon1"></i>
                            </button>
                            @error('password')
                                <span class="error-message" role="alert">
                                    <i class="bi bi-exclamation-circle"></i>
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-floating">
                            <input id="password-confirm" 
                                   type="password" 
                                   class="form-control"
                                   name="password_confirmation" 
                                   required 
                                   autocomplete="new-password"
                                   placeholder=" ">
                            <label for="password-confirm">
                                <i class="bi bi-check-circle"></i>
                                {{ __('Confirm New Password') }}
                            </label>
                            <button type="button" class="password-toggle" onclick="togglePassword('password-confirm', 'toggleIcon2')">
                                <i class="bi bi-eye-slash" id="toggleIcon2"></i>
                            </button>
                        </div>
                    </div>

                    <button type="submit" class="reset-button">
                        <span>{{ __('Reset Password') }}</span>
                        <i class="bi bi-arrow-right"></i>
                    </button>

                    <div class="reset-footer">
                        <p class="login-text">
                            {{ __("Remember your password?") }}
                            <a href="{{ route('login') }}" class="login-link">{{ __('Sign in') }}</a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function togglePassword(fieldId, iconId) {
    const passwordInput = document.getElementById(fieldId);
    const toggleIcon = document.getElementById(iconId);
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleIcon.classList.remove('bi-eye-slash');
        toggleIcon.classList.add('bi-eye');
    } else {
        passwordInput.type = 'password';
        toggleIcon.classList.remove('bi-eye');
        toggleIcon.classList.add('bi-eye-slash');
    }
}
</script>
@endpush
@endsection