@extends('auth.template.layout')

@push('styles')
    <!-- Inclua a biblioteca Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        .forgot-password-container {
            background-color: rgba(197, 211, 238, 0.041);
            border-radius: 5px;
            color: rgba(0, 0, 0, 0.863);
            width: 100%;
            max-width: 400px;
            padding: 20px;
            text-align: justify;
        }

        .forgot-password-container h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .campo-input {
            padding: 5px;
            position: relative;
        }

        .campo-input input {
            width: 100%;
            padding: 10px 10px 10px 40px;
            /* Ajuste o padding para dar espaço ao ícone */
            margin-top: 5px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .campo-input i {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(0, 0, 0, 0.5);
        }

        .forgot-password-container .text-sm {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            color: black;
            margin-bottom: 20px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.863);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        a {
            text-align: center;
            text-decoration: none;
            display: block;
            margin-top: 10px;
            color: rgba(0, 0, 0, 0.863);
        }

        .forgot-password-container .alert {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid transparent;
            border-radius: 5px;
        }

        .forgot-password-container .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }
    </style>
@endpush

@section('conteudo')
    <div class="forgot-password-container">
        @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        @endif
        <div class="text-sm text-gray-600">
            Esqueceu sua senha? Sem problemas. Basta nos informar seu endereço de e-mail e enviaremos por e-mail um link de
            redefinição de senha que permitirá que você escolha uma nova.
        </div>

        <!-- Session Status -->


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

            <!-- Email Address -->
            <div class="campo-input">
                <label for="email">Email</label>
                <div class="position-relative">
                    <i class="fa-solid fa-envelope"></i>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus>
                </div>
                @error('email')
                    <span class="text-red-500 text-sm">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="flex items-center justify-end mt-4">
                <button type="submit" class="btn btn-primary">
                    Enviar Link de Redefinição de Senha
                </button>
                <a class="link-dark" href="{{ route('login') }}">
                    <i class="fa-solid fa-sign-in-alt"></i> Login
                </a>
            </div>
        </form>
    </div>
@endsection