{{--
    Professional Login Page - Professional Bootstrap Design
    Clean and modern login interface
    
    @author David Valera Melendez <david@valera-melendez.de>
    @created 2025-08-08
    @location Made in Germany 🇩🇪
--}}

@extends('layouts.material-auth')

@section('title', 'Sign In - Professional Resume Builder')
@section('page_class', 'auth-page login-page')

@section('content')
<!-- Professional Login Page - Bootstrap Style -->
<div class="login-container">
    <!-- Hero Background Section -->
    <div class="hero-background">
        <div class="hero-overlay">
            <div class="hero-content">
                <div class="hero-icon">
                    <i class="bi bi-person-badge large-icon"></i>
                </div>
                <h1 class="hero-title">Professional Resume Builder</h1>
                <p class="hero-subtitle">
                    Create impressive, professional resumes with modern design and expert guidance
                </p>
                <p class="author-signature">
                    <strong>Created by David Valera Melendez</strong> | Made in Germany 🇩🇪
                </p>
            </div>
        </div>
    </div>

    <!-- Login Form Container -->
    <div class="login-form-container">
        <div class="login-card">
            <div class="card-body">
                <!-- Form Header -->
                <div class="form-header">
                    <div class="login-avatar">
                        <i class="bi bi-box-arrow-in-right"></i>
                    </div>
                    <h2 class="form-title">Sign In</h2>
                    <p class="form-subtitle">Welcome back to Resume Builder</p>
                </div>

                    <!-- Error Messages -->
                    @if($errors->any())
                        <div class="alert alert-danger d-flex align-items-center" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <div>
                                @foreach($errors->all() as $error)
                                    <div>{{ $error }}</div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Login Form -->
                    <form method="POST" action="{{ route('login') }}" class="login-form">
                        @csrf
                        
                        <!-- Email Field -->
                        <div class="form-group">
                            <div class="form-field">
                                <input 
                                    type="email" 
                                    class="form-control material-input @error('email') is-invalid @enderror" 
                                    id="email" 
                                    name="email" 
                                    value="{{ old('email') }}" 
                                    required 
                                    autocomplete="email" 
                                    autofocus
                                    placeholder=" "
                                >
                                <label for="email" class="form-label">Email Address</label>
                                <div class="form-outline"></div>
                                @error('email')
                                    <div class="invalid-feedback">
                                        <i class="bi bi-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- Password Field -->
                        <div class="form-group">
                            <div class="form-field">
                                <input 
                                    type="password" 
                                    class="form-control material-input @error('password') is-invalid @enderror" 
                                    id="password" 
                                    name="password" 
                                    required 
                                    autocomplete="current-password"
                                    placeholder=" "
                                >
                                <label for="password" class="form-label">Password</label>
                                <div class="form-outline"></div>
                                <button type="button" class="password-toggle" onclick="togglePassword('password')">
                                    <i class="bi bi-eye" id="password-icon"></i>
                                </button>
                                @error('password')
                                    <div class="invalid-feedback">
                                        <i class="bi bi-exclamation-circle me-1"></i>
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- Remember Me & Forgot Password -->
                        <div class="form-options">
                            <div class="form-check">
                                <input 
                                    type="checkbox" 
                                    class="form-check-input" 
                                    id="remember" 
                                    name="remember" 
                                    {{ old('remember') ? 'checked' : '' }}
                                >
                                <label class="form-check-label" for="remember">
                                    Remember me
                                </label>
                            </div>
                            
                            @if (Route::has('password.request'))
                                <a href="{{ route('password.request') }}" class="forgot-password-link">
                                    Forgot password?
                                </a>
                            @endif
                        </div>

                        <!-- Login Button -->
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary login-btn">
                                <i class="bi bi-box-arrow-in-right me-2"></i>
                                Sign In
                            </button>
                        </div>

                        <!-- Social Login Section -->
                        <div class="social-login">
                            <div class="divider">
                                <span>or continue with</span>
                            </div>
                            
                            <div class="social-buttons">
                                <button type="button" class="btn social-btn google-btn">
                                    <i class="bi bi-google me-2"></i>
                                    Google
                                </button>
                                <button type="button" class="btn social-btn github-btn">
                                    <i class="bi bi-github me-2"></i>
                                    GitHub
                                </button>
                            </div>
                        </div>

                        <!-- Register Link -->
                        <div class="register-link">
                            <p>Don't have an account? 
                                <a href="{{ route('register') }}" class="register-link-text">
                                    Sign up here
                                </a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
    </div>
</div>

@push('scripts')
<script>
function togglePassword(fieldId) {
    const passwordField = document.getElementById(fieldId);
    const passwordIcon = document.getElementById(fieldId + '-icon');
    
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        passwordIcon.className = 'bi bi-eye-slash';
    } else {
        passwordField.type = 'password';
        passwordIcon.className = 'bi bi-eye';
    }
}
</script>
@endpush
@endsection