@extends('layouts.auth')

@section('content')
    <div class="login-image">
        <div class="welcome-text">
            <h2>Redefinição de Senha</h2>
            <p>Defina sua nova senha de acesso</p>
        </div>
    </div>

    <div class="login-form">
        <div class="logo-wrapper text-center">
            <img src="{{ asset('img/logo-promu.png') }}" alt="Logo Procuradoria da Mulher" class="logo">
        </div>

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

            <!-- Password Reset Token -->
            <input type="hidden" name="token" value="{{ $request->route('token') }}">

            <!-- Email Address -->
            <div class="form-floating">
                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                    name="email" placeholder="nome@exemplo.com" value="{{ old('email', $request->email) }}" required
                    autofocus autocomplete="username">
                <label for="email">Email</label>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="input-icon" fill="#b56297"
                    viewBox="0 0 256 256" @error('email') style="display:none" @enderror>
                    <path
                        d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z" />
                </svg>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Password -->
            <div class="form-floating">
                <input type="password" class="form-control @error('password') is-invalid @enderror" id="password"
                    name="password" placeholder="Nova senha" required autocomplete="new-password">
                <label for="password">Nova senha</label>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="input-icon" fill="#b56297"
                    viewBox="0 0 256 256" @error('password') style="display:none" @enderror>
                    <path
                        d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z" />
                </svg>
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Confirm Password -->
            <div class="form-floating">
                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation"
                    placeholder="Confirme sua nova senha" required autocomplete="new-password">
                <label for="password_confirmation">Confirme sua nova senha</label>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="input-icon" fill="#b56297"
                    viewBox="0 0 256 256">
                    <path
                        d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z" />
                </svg>
            </div>

            <button type="submit" class="btn btn-login text-white">
                Redefinir Senha
            </button>

            <div class="text-center mt-4">
                <a href="{{ route('login') }}" class="forgot-password">
                    Voltar para o Login
                </a>
            </div>
        </form>
    </div>
@endsection