@extends('layouts.app')

@section('title', 'Forgot Password')

@section('content')
    <div class="login-wrapper">
        <div class="login-card">
            <div class="login-header">
                <div class="login-logo" style="display: flex;justify-content: center">
                    <img style="width: 70%;" src="{{ asset('website/assets/images/footer-logo.png') }}" alt="">
                </div>
                <h1 class="login-title">Forgot password?</h1>
                <p class="login-subtitle">Enter your email and we'll send you a reset link</p>
            </div>

            @if (session('status'))
                <div class="alert-success">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                    {{ session('status') }}
                </div>
            @endif

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

                <div class="form-group">
                    <label for="email">Email address</label>
                    <div class="input-wrapper">
                        <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                            <polyline points="22,6 12,13 2,6"/>
                        </svg>
                        <input type="email" id="email" name="email" class="form-control" value="{{ old('email') }}"
                            required autofocus placeholder="you@example.com">
                    </div>
                    @error('email')
                        <span class="error">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                            {{ $message }}
                        </span>
                    @enderror
                </div>

                <button type="submit" class="btn btn-submit" data-loading-text="Sending reset link...">
                    Send reset link
                </button>

                <div class="divider"><span>or</span></div>

                <div class="form-footer">
                    <a href="{{ route('login') }}" class="back-link">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12,19 5,12 12,5"/></svg>
                        Back to login
                    </a>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

        .login-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
        }

        .login-card {
            width: 100%;
            max-width: 420px;
            background: #ffffff;
            border-radius: 16px;
            padding: 2.5rem;
            border: 1px solid rgba(0,0,0,0.06);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
            font-family: 'Geist', system-ui, sans-serif;
        }

        /* Header */
        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .login-logo {
            display: inline-flex;
            margin-bottom: 1.25rem;
        }

        .login-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #0f0f0f;
            margin: 0 0 0.375rem;
            letter-spacing: -0.02em;
        }

        .login-subtitle {
            font-size: 0.875rem;
            color: #6b7280;
            margin: 0;
        }

        /* Success Alert */
        .alert-success {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #15803d;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
        }

        /* Form Group */
        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 1.25rem;
        }

        .form-group label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
        }

        /* Input */
        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 0.875rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            pointer-events: none;
            flex-shrink: 0;
        }

        .form-control {
            width: 100%;
            padding: 0.6875rem 1rem 0.6875rem 2.625rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.9375rem;
            color: #0f0f0f;
            background: #fafafa;
            transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
            font-family: inherit;
            box-sizing: border-box;
        }

        .form-control::placeholder {
            color: #b0b7c3;
        }

        .form-control:focus {
            outline: none;
            border-color: #e8192c;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(232,25,44,0.08);
        }

        /* Error */
        .error {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            color: #dc2626;
            font-size: 0.8125rem;
            margin-top: 0.375rem;
            font-weight: 500;
        }

        /* Submit Button */
        .btn-submit {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            background: #e8192c;
            color: #ffffff;
            font-size: 0.9375rem;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            letter-spacing: -0.01em;
            transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
            box-shadow: 0 1px 3px rgba(232,25,44,0.3), 0 4px 12px rgba(232,25,44,0.15);
            margin-top: 0.25rem;
        }

        .btn-submit:hover {
            background: #c8111f;
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(232,25,44,0.35), 0 8px 20px rgba(232,25,44,0.2);
        }

        .btn-submit:active {
            transform: translateY(0);
        }

        .btn-submit:disabled,
        .btn-submit.btn-loading {
            background: #f08a93;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Spinner */
        .btn-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.35);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            flex-shrink: 0;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Divider */
        .divider {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 1.5rem 0 1.25rem;
        }

        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e5e7eb;
        }

        .divider span {
            font-size: 0.75rem;
            color: #9ca3af;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Footer */
        .form-footer {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.875rem;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            font-size: 0.8125rem;
            color: #9ca3af;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.15s;
        }

        .back-link:hover {
            color: #6b7280;
        }

        @media (max-width: 480px) {
            .login-card {
                padding: 2rem 1.5rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if($errors->any())
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'error',
                    title: {!! json_encode($errors->first()) !!},
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                    background: '#fff',
                    color: '#1a1a1a'
                });
            }
            @endif

            var form = document.querySelector('.js-auth-form');
            if (!form) return;
            form.addEventListener('submit', function() {
                var btn = form.querySelector('button[type="submit"]');
                if (btn && !btn.disabled && !btn.classList.contains('btn-loading')) {
                    btn.disabled = true;
                    btn.classList.add('btn-loading');
                    btn.dataset.originalHtml = btn.innerHTML;
                    btn.innerHTML = '<span class="btn-spinner"></span> ' + (btn.dataset.loadingText ||
                        'Please wait...');
                }
            });
        });
    </script>
@endpush