@extends('layouts.auth')

@section('content')
<div class="container d-flex align-items-center justify-content-center">
    <div class="row justify-content-center w-100">
        <div class="col-md-6 col-lg-5 col-xl-4">
            <div class="modern-card p-4 p-md-5" data-aos="zoom-in">
                <div class="text-center mb-5">
                    <a href="{{ route('home') }}" class="d-inline-block mb-4 text-decoration-none">
                        @if(!empty($settings['site_logo']))
                            <img src="{{ $settings['site_logo'] }}" alt="{{ $settings['site_name'] ?? 'TechNova' }}" height="48" class="mb-3">
                        @else
                            <span class="h2 fw-900 text-white ls-1">{{ $settings['site_name'] ?? 'TechNova' }}</span>
                        @endif
                    </a>
                    <h4 class="fw-bold text-white mb-2">Access Portal</h4>
                    <p class="text-muted small">Enter your credentials to manage the platform</p>
                </div>

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

                    <div class="mb-4">
                        <label for="email" class="form-label small text-muted">Email Address</label>
                        <input id="email" type="email" class="form-control glass-input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="name@example.com">
                        @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label for="password" class="form-label small text-muted mb-0">Password</label>
                            @if (Route::has('password.request'))
                                <a class="text-decoration-none small text-primary" href="{{ route('password.request') }}">
                                    Forgot?
                                </a>
                            @endif
                        </div>
                        <input id="password" type="password" class="form-control glass-input @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="••••••••">
                        @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="mb-5">
                        <div class="form-check custom-check">
                            <input class="form-check-input glass-check" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                            <label class="form-check-label text-muted small" for="remember">
                                Maintain session
                            </label>
                        </div>
                    </div>

                    <div class="d-grid gap-3">
                        <button type="submit" class="btn btn-primary py-3 fw-bold">
                            Authenticate
                        </button>
                        <a href="{{ route('home') }}" class="btn btn-outline-light py-2 small opacity-50 border-0">
                            Return to public site
                        </a>
                    </div>
                </form>
            </div>
            <div class="text-center mt-5 text-muted small" data-aos="fade-up" data-aos-delay="200">
                &copy; {{ date('Y') }} {{ $settings['site_name'] ?? 'TechNova Solutions' }}. Design for the Future.
            </div>
        </div>
    </div>
</div>

<style>
.glass-check {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--card-border) !important;
}
.glass-check:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
</style>
@endsection