@extends('eliteadmin::layouts.auth')

@section('title', 'Reset Password')
@section('brand_heading', 'Create a new password')
@section('brand_description', 'Choose a strong password that you have not used before on this account.')

@section('content')
    <div class="auth-card">
        <div class="auth-card-header">
            <div class="auth-icon">
                <i class="bi bi-shield-lock"></i>
            </div>
            <h1 class="auth-title">Set new password</h1>
            <p class="auth-subtitle">Your new password must be different from previously used passwords.</p>
        </div>

        <form class="auth-form" action="{{ route('password.update') }}" method="POST" novalidate>
            @csrf
            <input type="hidden" name="token" value="{{ $token ?? request()->route('token') }}">

            <div class="form-group">
                <label for="email" class="form-label">Email address</label>
                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email"
                       value="{{ old('email', $email ?? '') }}" required autofocus>
                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label for="password" class="form-label">New password</label>
                <div class="input-group">
                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password"
                           name="password" placeholder="Enter new password" required minlength="8">
                    <button class="btn btn-outline-secondary" type="button" data-toggle-password>
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
                <div class="form-text">Must be at least 8 characters.</div>
                @error('password')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label for="password_confirmation" class="form-label">Confirm password</label>
                <div class="input-group">
                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation"
                           placeholder="Confirm new password" required>
                    <button class="btn btn-outline-secondary" type="button" data-toggle-password>
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>

            <button type="submit" class="btn btn-primary btn-block">Reset password</button>
        </form>

        <p class="auth-footer-text">
            <a href="{{ route('login') }}" class="auth-link">
                <i class="bi bi-arrow-left"></i> Back to login
            </a>
        </p>
    </div>
@endsection