@extends('layouts.auth')

@section('title', 'Reset Password')
@section('auth-title', 'Reset Kata Sandi')
@section('auth-subtitle', 'Buat kata sandi baru untuk akun Anda')

@section('content')
<form method="POST" action="{{ route('password.update') }}">
    @csrf

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

    <div class="form-group">
        <label for="email">Alamat Email</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-envelope"></i></span>
            </div>
            <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" 
                   value="{{ $email ?? old('email') }}" placeholder="Masukkan email" required>
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="form-group">
        <label for="password">Kata Sandi Baru</label>
        <div class="input-group" style="position: relative;">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-lock"></i></span>
            </div>
            <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" 
                   placeholder="Minimal 8 karakter" required>
            <span class="password-toggle" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10; color: #888;">
                <i class="fa fa-eye"></i>
            </span>
            @error('password')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="form-group">
        <label for="password_confirmation">Konfirmasi Kata Sandi</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-check-circle"></i></span>
            </div>
            <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" 
                   placeholder="Konfirmasi kata sandi" required>
        </div>
    </div>

    <button type="submit" class="btn btn-login">
        <i class="fa fa-save"></i> Reset Password
    </button>
</form>
@endsection