@extends('layouts.auth')
@section('title', 'Reset password')
@section('auth_title', 'Set a new password')
@section('auth_subtitle', 'Choose a new secure password for your account.')

@section('content')

@php
    $svgMail = '<svg class="bi-lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M22 6l-10 7L2 6"/></svg>';
    $svgLock = '<svg class="bi-lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>';
    $svgErr  = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>';
@endphp

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

    <div class="auth-group">
        <label for="email" class="auth-label">Email address</label>
        <div class="auth-input-wrap">
            {!! $svgMail !!}
            <input type="email" id="email" name="email" value="{{ old('email', $request->email) }}"
                   class="auth-input @error('email') is-invalid @enderror"
                   required autofocus autocomplete="username">
        </div>
        @error('email')<div class="auth-error">{!! $svgErr !!}{{ $message }}</div>@enderror
    </div>

    <div class="auth-group">
        <label for="password" class="auth-label">New password</label>
        <div class="auth-input-wrap">
            {!! $svgLock !!}
            <input type="password" id="password" name="password"
                   class="auth-input has-trailing @error('password') is-invalid @enderror"
                   placeholder="At least 8 characters"
                   required autocomplete="new-password">
            <button type="button" class="auth-trailing-btn" id="togglePassword" tabindex="-1" aria-label="Toggle password visibility">
                <svg id="toggleIconOn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                <svg id="toggleIconOff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="display:none;"><path d="M17.94 17.94A10.94 10.94 0 0112 20c-7 0-11-8-11-8a21.77 21.77 0 015.06-5.94M9.9 4.24A10.94 10.94 0 0112 4c7 0 11 8 11 8a21.77 21.77 0 01-3.17 4.25M1 1l22 22"/></svg>
            </button>
        </div>
        @error('password')<div class="auth-error">{!! $svgErr !!}{{ $message }}</div>@enderror
    </div>

    <div class="auth-group">
        <label for="password_confirmation" class="auth-label">Confirm new password</label>
        <div class="auth-input-wrap">
            {!! $svgLock !!}
            <input type="password" id="password_confirmation" name="password_confirmation"
                   class="auth-input has-trailing @error('password_confirmation') is-invalid @enderror"
                   placeholder="Re-enter new password"
                   required autocomplete="new-password">
            <button type="button" class="auth-trailing-btn" id="toggleConfirm" tabindex="-1" aria-label="Toggle password visibility">
                <svg id="toggleConfirmOn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                <svg id="toggleConfirmOff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="display:none;"><path d="M17.94 17.94A10.94 10.94 0 0112 20c-7 0-11-8-11-8a21.77 21.77 0 015.06-5.94M9.9 4.24A10.94 10.94 0 0112 4c7 0 11 8 11 8a21.77 21.77 0 01-3.17 4.25M1 1l22 22"/></svg>
            </button>
        </div>
        @error('password_confirmation')<div class="auth-error">{!! $svgErr !!}{{ $message }}</div>@enderror
    </div>

    <button type="submit" class="auth-submit">
        Reset password
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
    </button>
</form>

@endsection

@push('scripts')
<script>
function toggleVis(inputId, onId, offId) {
    var pw = document.getElementById(inputId);
    var on = document.getElementById(onId);
    var off = document.getElementById(offId);
    if (pw.type === 'password') { pw.type = 'text'; on.style.display = 'none'; off.style.display = 'block'; }
    else { pw.type = 'password'; on.style.display = 'block'; off.style.display = 'none'; }
}
document.getElementById('togglePassword').addEventListener('click', function () { toggleVis('password', 'toggleIconOn', 'toggleIconOff'); });
document.getElementById('toggleConfirm').addEventListener('click', function () { toggleVis('password_confirmation', 'toggleConfirmOn', 'toggleConfirmOff'); });
</script>
@endpush