@extends('layouts.auth')

@section('title', 'Login')

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

    html, body {
        height: 100%;
        font-family: 'Poppins', sans-serif;
        background-color: #fff;
        overflow: hidden;
    }

    .login-card {
        border: 1px solid #FEBD21;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transition: 0.3s ease;
    }

    .login-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    }

    .logo-text span:last-child {
        color: #FEBD21;
    }

    .password-toggle {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        cursor: pointer;
        color: #aaa;
    }

    .divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 1.5rem 0;
    }

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #dee2e6;
    }

    .divider span {
        padding: 0 1rem;
        font-size: 0.85rem;
        color: #6c757d;
    }

    .toast-container {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1055;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const toastElList = [].slice.call(document.querySelectorAll('.toast'));
        const toastList = toastElList.map(function (toastEl) {
            return new bootstrap.Toast(toastEl);
        });

        toastList.forEach(toast => toast.show());
    });
</script>
@endpush

@section('content')
{{-- Toasts --}}
<div class="toast-container">
    @if(session('success'))
        <div class="toast align-items-center text-bg-success border-0 mb-2" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('success') }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    @endif
    @if(session('error'))
        <div class="toast align-items-center text-bg-danger border-0 mb-2" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('error') }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    @endif
</div>

{{-- Login Card --}}
<div class="d-flex align-items-center justify-content-center h-100">
    <div class="login-card p-4 p-md-5 bg-white" style="max-width: 550px; width: 100%;">
        {{-- Logo --}}
        <div class="text-center mb-4">
            <div class="d-flex align-items-center justify-content-center gap-2 mb-2">
                <img src="{{ asset('logo.png') }}" alt="FlareSend Logo" class="me-2" style="height: 28px;">
                <span class="logo-text fw-bold fs-5 text-dark">
                    <span>Flare</span><span>Send</span>
                </span>
            </div>
            <p class="text-muted small mb-0">Login to your account</p>
        </div>

        {{-- Form --}}
        <form action="{{ route('login.post') }}" method="POST" class="mt-3">
            @csrf
            <div class="mb-3">
                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                       placeholder="Email address" value="{{ old('email') }}" required autocomplete="email" autofocus>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3 position-relative">
                <input type="password" name="password" class="form-control password-field" id="password" placeholder="Password" required autocomplete="current-password">
                <i class="fas fa-eye password-toggle" id="togglePassword"></i>
                
            </div>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                    <label class="form-check-label small" for="remember">Remember me</label>
                </div>
                {{-- <a href="{{ route('password.request') }}" class="text-decoration-none small">Forgot Password?</a> --}}
            </div>
            <button type="submit" class="btn w-100 text-white" style="background-color: #FEBD21;">
                Sign In
            </button>

            {{-- Divider --}}
            {{-- TODO: Enable Google sign in when ready --}}
            <div class="divider">
                <span>or</span>
            </div>

            {{-- <a href="#" class="btn btn-outline-secondary w-100">
                <i class="fab fa-google me-2"></i> Sign in with Google
            </a> --}}

            <p class="text-center small mt-4 mb-0">
                <a href="{{ route('password.request') }}" class="text-decoration-none" style="color: #FEBD21; font-weight: 600;">
                    Forgot your password?
                </a>
            </p>

            {{-- Register link --}}
            <p class="text-center small mt-4 mb-0">
                Don't have an account?
                <a href="{{ route('register') }}" class="text-decoration-none" style="color: #FEBD21; font-weight: 600;">Create Account</a>
            </p>
        </form>
    </div>
</div>
@endsection