@extends('layouts.auth-app')

@push('style')
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    body {
        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background-color: #000;
        color: #fff;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .card {
        width: 100%;
        max-width: 380px;
        background: #1c1c1e;
        border-radius: 14px;
        padding: 32px 28px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    .card-icon {
        width: 48px;
        height: 48px;
        background: #8b5cf6;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
    }

    .card-icon img { width: 26px; height: 26px; display: block; }

    .card-header { text-align: center; margin-bottom: 28px; }

    .card-header h1 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }

    .card-header p { font-size: 13px; color: #8a8a8e; line-height: 1.6; }

    .form-group { margin-bottom: 18px; }

    .form-group label { display: block; font-size: 13px; color: #c7c7cc; margin-bottom: 8px; }

    .form-group input {
        width: 100%;
        background: #0e0e10;
        border: 1px solid transparent;
        border-radius: 30px;
        padding: 14px 18px;
        color: #fff;
        font-size: 14px;
        outline: none;
        transition: border-color 0.25s, background-color 0.25s;
    }

    .form-group input::placeholder { color: #6e6e73; }
    .form-group input:focus { border-color: #8b5cf6; background: #131316; }

    .btn-reset {
        width: 100%;
        background: #8b5cf6;
        color: #fff;
        border: none;
        border-radius: 30px;
        padding: 14px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
        margin-bottom: 16px;
    }

    .btn-reset:hover { background: #7c3aed; }
    .btn-reset:active { transform: scale(0.99); }

    .back-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: #bababa;
        font-size: 13px;
        text-decoration: none;
        transition: opacity 0.2s;
    }

    .back-link:hover { opacity: 0.8; }

    @media (max-width: 420px) {
        .card { padding: 26px 20px; border-radius: 12px; }
        .card-header h1 { font-size: 20px; }
    }

    @media (max-width: 340px) {
        .form-group input { padding: 12px 16px; font-size: 13px; }
    }
</style>
@endpush

@section('content')
<div class="card">

    <div class="card-header">
        <div class="card-icon">
            <img src="{{ asset('images/logo-img.png') }}" alt="">
        </div>
        <h1>Forgot Password</h1>
        <p>Enter the email address associated with your account and we'll send you a link to reset your password.</p>
    </div>
    {{-- status message --}}
    @if (session('status'))
    <span style="color:green; font-size:18px; margin-top:6px; display:block;">{{ session('status') }}</span>
        
    @endif
        <br>
    <form method="POST" action="{{ route('password.email') }}">
        @csrf

        <div class="form-group">
            <label for="email">Email Address / User ID</label>
            <input
                type="email"
                id="email"
                name="email"
                placeholder="example@gmail.com"
                value="{{ old('email') }}"
                required
                autocomplete="email"
                autofocus
            >
            @error('email')
                <span style="color:#ff453a; font-size:12px; margin-top:6px; display:block;">{{ $message }}</span>
            @enderror
        </div>

        <button type="submit" class="btn-reset">Reset Password</button>

    </form>

    <a href="{{ route('login') }}" class="back-link">
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
            <path d="M2.86875 6.75L7.06875 10.95L6 12L0 6L6 0L7.06875 1.05L2.86875 5.25H12V6.75H2.86875Z" fill="#BABABA"/>
        </svg>
        Back to Login
    </a>

</div>
@endsection