@extends('layouts.app')

@section('content')

<div class="reset-wrapper">

    <div class="reset-card">

        {{-- HEADER --}}
        <div class="text-center mb-4">
            <img src="{{ asset('logo.jpeg') }}" alt="GRUPO AP" class="logo">

            <h2 class="mt-3 title">Recuperar senha</h2>
            <p class="subtitle">Digite o seu email para receber o link de redefinição</p>
        </div>

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

            {{-- EMAIL --}}
            <div class="form-group">
                <label>Email</label>
                <input type="email"
                       name="email"
                       class="form-control"
                       placeholder="exemplo@email.com"
                       required
                       autofocus>
            </div>

            {{-- BUTTON --}}
            <button type="submit" class="btn-reset">
                Enviar link de recuperação
            </button>

        </form>

        {{-- FOOTER --}}
        <p class="footer-text">
            Lembrou a senha?
            <a href="{{ route('login') }}">Voltar ao login</a>
        </p>

    </div>

</div>

@endsection

<style>
/* ================= WRAPPER ================= */
.reset-wrapper{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;

    background: linear-gradient(rgba(2,6,23,0.75), rgba(2,6,23,0.85)),
                url('{{ asset('images/imja.jpg') }}') center/cover no-repeat;

    padding:20px;
}

/* ================= CARD ================= */
.reset-card{
    width:100%;
    max-width:400px;

    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(14px);

    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;

    padding:32px;

    box-shadow:0 25px 60px rgba(0,0,0,0.5);
    color:#fff;
}

/* ================= LOGO ================= */
.logo{
    height:60px;
    object-fit:contain;
}

/* ================= TITLES ================= */
.title{
    font-weight:700;
    font-size:26px;
}

.subtitle{
    color:#94a3b8;
    font-size:14px;
    margin-bottom:0;
}

/* ================= FORM ================= */
.form-group{
    margin-bottom:15px;
}

label{
    font-size:13px;
    color:#cbd5e1;
    margin-bottom:6px;
    display:block;
}

.form-control{
    width:100%;
    padding:12px 14px;

    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);

    background:rgba(2,6,23,0.6);
    color:#fff;

    outline:none;
    transition:.2s;
}

.form-control:focus{
    border-color:#38bdf8;
    box-shadow:0 0 0 3px rgba(56,189,248,0.2);
}

/* ================= BUTTON ================= */
.btn-reset{
    width:100%;
    padding:12px;

    border:none;
    border-radius:12px;

    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color:#fff;

    font-weight:600;
    font-size:15px;

    cursor:pointer;
    transition:.25s;
}

.btn-reset:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 30px rgba(56,189,248,0.25);
}

/* ================= FOOTER ================= */
.footer-text{
    text-align:center;
    margin-top:18px;
    font-size:13px;
    color:#94a3b8;
}

.footer-text a{
    color:#38bdf8;
    text-decoration:none;
    font-weight:600;
}

.footer-text a:hover{
    text-decoration:underline;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 480px){
    .reset-card{
        padding:22px;
    }

    .title{
        font-size:22px;
    }
}
</style>