<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>POS</title>
    <link rel="icon" href="data:,">
    @if(app()->getLocale() === 'ar')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css">
    @else
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    @endif
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #0dcaee 0%, #0a8fa5 40%, #064f6b 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        .auth-card {
            width: 100%;
            max-width: 440px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.25);
            overflow: hidden;
        }
        .auth-header {
            background: linear-gradient(135deg, #0dcaee, #0a8fa5);
            padding: 2.5rem 2rem 2rem;
            text-align: center;
            color: #fff;
        }
        .auth-header .brand-icon {
            width: 72px;
            height: 72px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            margin-bottom: 1rem;
            backdrop-filter: blur(6px);
        }
        .auth-body { padding: 2rem 2rem 1.5rem; }
        .form-control {
            border-radius: 10px;
            padding: 0.65rem 1rem;
            border: 1.5px solid #e0e0e0;
            transition: border-color .2s, box-shadow .2s;
        }
        .form-control:focus {
            border-color: #0dcaee;
            box-shadow: 0 0 0 3px rgba(13,202,238,.15);
        }
        .input-group-text {
            border-radius: 10px 0 0 10px;
            background: #f0fbfd;
            border: 1.5px solid #e0e0e0;
            border-right: none;
            color: #0a8fa5;
        }
        .input-group .form-control { border-radius: 0 10px 10px 0; }
        .btn-auth {
            background: linear-gradient(135deg, #0dcaee, #0a8fa5);
            border: none;
            border-radius: 10px;
            padding: .7rem;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: .5px;
            color: #fff;
            transition: opacity .2s, transform .15s;
        }
        .btn-auth:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
        .auth-footer { text-align: center; padding: 0 2rem 1.5rem; }
        .auth-link { color: #0a8fa5; text-decoration: none; font-weight: 500; }
        .auth-link:hover { text-decoration: underline; color: #064f6b; }
    </style>
</head>
<body>
<div class="auth-card">
    <div class="auth-header">
        <div class="brand-icon"><i class="bi bi-shield-lock"></i></div>
        <h4 class="fw-bold mb-1">{{ __('Forgot Password?') }}</h4>
        <p class="mb-0 opacity-75 small">{{ __("Enter your email and we'll send a reset link.") }}</p>
    </div>

    <div class="auth-body">
        @if(session('status'))
            <div class="alert alert-success alert-dismissible fade show py-2 small" role="alert">
                <i class="bi bi-check-circle me-1"></i>{{ session('status') }}
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger py-2 small">
                <ul class="mb-0 ps-3">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="alert alert-info border-0 py-2 small mb-3" style="background:#e8f9fd; color:#0a8fa5;">
            <i class="bi bi-info-circle me-1"></i>
            {{ __("No problem! Just enter your email and we'll send you a password reset link.") }}
        </div>

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

            <div class="mb-4">
                <label class="form-label fw-semibold small text-secondary">{{ __('Email Address') }}</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                    <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror"
                           value="{{ old('email') }}" placeholder="{{ __('you@example.com') }}" required autofocus>
                </div>
            </div>

            <button type="submit" class="btn btn-auth w-100">
                <i class="bi bi-send me-2"></i>{{ __('Send Reset Link') }}
            </button>
        </form>
    </div>

    <div class="auth-footer">
        <p class="mb-0 small text-muted">
            <a href="{{ route('login') }}" class="auth-link">
                <i class="bi bi-arrow-left me-1"></i>{{ __('Back to Sign In') }}
            </a>
        </p>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
