@extends('layouts.app')

@section('title', __('general.login') . ' - ' . __('general.company_name'))

@section('content')
    <section class="auth-section"
        style="min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;">
        <div class="container" style="max-width: 1200px; margin: 0 auto;">
            <div class="auth-container" style="max-width: 500px; margin: 0 auto; width: 100%;">
                <div class="auth-card glass-morphism"
                    style="padding: 2.5rem; border-radius: 20px; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);">
                    <div class="auth-header text-center" style="margin-bottom: 2rem;">
                        <div class="auth-logo" style="margin-bottom: 1.5rem;">
                            <div
                                style="width: 80px; height: 80px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);">
                                <i class="fas fa-car" style="font-size: 2rem; color: var(--primary-dark);"></i>
                            </div>
                        </div>
                        <h1 class="auth-title"
                            style="font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--primary-gold); margin-bottom: 0.5rem; font-weight: 700;">
                            {{ __('general.login') }}
                        </h1>
                        <p class="auth-subtitle" style="opacity: 0.8; color: rgba(255, 255, 255, 0.8); font-size: 1rem;">
                            {{ __('Welcome back to') }} {{ __('general.company_name') }}
                        </p>
                    </div>

                    @if ($errors->any())
                        <div
                            style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem;">
                            <ul style="list-style: none; margin: 0;">
                                @foreach ($errors->all() as $error)
                                    <li style="color: #ff6b6b;">{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

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

                        <div class="form-group" style="margin-bottom: 1.5rem;">
                            <label for="email" class="form-label"
                                style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem;">
                                <i class="fas fa-envelope" style="margin-left: 0.5rem; font-size: 0.9rem;"></i>
                                {{ __('general.email') }}
                            </label>
                            <div class="input-wrapper" style="position: relative;">
                                <input type="email" id="email" name="email" value="{{ old('email') }}" required
                                    autocomplete="email" class="form-input"
                                    style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px);"
                                    placeholder="{{ __('Enter your email') }}"
                                    onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                    onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                            </div>
                        </div>

                        <div class="form-group" style="margin-bottom: 1.5rem;">
                            <label for="password" class="form-label"
                                style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem;">
                                <i class="fas fa-lock" style="margin-left: 0.5rem; font-size: 0.9rem;"></i>
                                {{ __('Password') }}
                            </label>
                            <div class="input-wrapper" style="position: relative;">
                                <input type="password" id="password" name="password" required
                                    autocomplete="current-password" class="form-input"
                                    style="width: 100%; padding: 15px 50px 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px);"
                                    placeholder="{{ __('Enter your password') }}"
                                    onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                    onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                                <button type="button" class="password-toggle" onclick="togglePassword('password')"
                                    style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 5px; transition: color 0.3s ease;"
                                    onmouseover="this.style.color='var(--primary-gold)'"
                                    onmouseout="this.style.color='rgba(255, 255, 255, 0.6)'">
                                    <i class="fas fa-eye" id="password-eye"></i>
                                </button>
                            </div>
                        </div>

                        <div class="form-options"
                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
                            <label class="remember-me" style="display: flex; align-items: center; cursor: pointer;">
                                <input type="checkbox" name="remember"
                                    style="margin-left: 0.5rem; accent-color: var(--primary-gold); transform: scale(1.1);">
                                <span
                                    style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); font-weight: 500;">{{ __('Remember me') }}</span>
                            </label>

                            <a href="#" class="forgot-password" onclick="showPasswordReset()"
                                style="color: var(--primary-gold); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease;"
                                onmouseover="this.style.textDecoration='underline'; this.style.color='var(--accent-gold)'"
                                onmouseout="this.style.textDecoration='none'; this.style.color='var(--primary-gold)'">
                                {{ __('Forgot password?') }}
                            </a>
                        </div>

                        <button type="submit" class="auth-submit-btn"
                            style="width: 100%; margin-bottom: 2rem; padding: 16px 24px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);"
                            onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(255, 215, 0, 0.4)'"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(255, 215, 0, 0.3)'">
                            <i class="fas fa-sign-in-alt" style="margin-left: 0.5rem;"></i>
                            {{ __('general.login') }}
                        </button>
                    </form>

                    <div class="auth-footer text-center">
                        <div class="divider" style="display: flex; align-items: center; margin-bottom: 1.5rem;">
                            <div style="flex: 1; height: 1px; background: rgba(255, 255, 255, 0.2);"></div>
                            <span style="padding: 0 1rem; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem;">أو</span>
                            <div style="flex: 1; height: 1px; background: rgba(255, 255, 255, 0.2);"></div>
                        </div>
                        <p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem; font-size: 0.95rem;">
                            {{ __("Don't have an account?") }}
                        </p>
                        <a href="{{ route('register') }}" class="auth-secondary-btn"
                            style="display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); padding: 12px 24px; border-radius: 12px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2);"
                            onmouseover="this.style.background='rgba(255, 255, 255, 0.2)'; this.style.color='white'; this.style.borderColor='rgba(255, 255, 255, 0.4)'"
                            onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'; this.style.color='rgba(255, 255, 255, 0.9)'; this.style.borderColor='rgba(255, 255, 255, 0.2)'">
                            <i class="fas fa-user-plus"></i>
                            {{ __('general.register') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('styles')
        <style>
            input:focus {
                outline: none;
                border-color: var(--primary-gold) !important;
                box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
            }

            input::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            input[type="checkbox"] {
                accent-color: var(--primary-gold);
            }

            /* Enhanced Responsive Design */
            @media (max-width: 768px) {
                .auth-section {
                    padding: 1rem 0.5rem !important;
                    min-height: 100vh !important;
                }

                .auth-card {
                    padding: 2rem 1.5rem !important;
                    margin: 0 !important;
                    border-radius: 15px !important;
                }

                .auth-title {
                    font-size: 1.8rem !important;
                }

                .auth-logo>div {
                    width: 60px !important;
                    height: 60px !important;
                }

                .auth-logo i {
                    font-size: 1.5rem !important;
                }

                .form-options {
                    flex-direction: column !important;
                    align-items: flex-start !important;
                    gap: 1rem !important;
                }

                .form-input {
                    padding: 12px 16px !important;
                    font-size: 16px !important;
                    /* Prevents zoom on iOS */
                }

                .auth-submit-btn {
                    padding: 14px 20px !important;
                    font-size: 1rem !important;
                }
            }

            @media (max-width: 480px) {
                .auth-card {
                    padding: 1.5rem 1rem !important;
                }

                .auth-title {
                    font-size: 1.6rem !important;
                }

                .form-group {
                    margin-bottom: 1.25rem !important;
                }

                .form-label {
                    font-size: 0.9rem !important;
                    margin-bottom: 0.5rem !important;
                }

                .form-input {
                    padding: 10px 14px !important;
                }

                .password-toggle {
                    left: 10px !important;
                }
            }

            /* Animation for form elements */
            .form-group {
                animation: slideInUp 0.6s ease-out;
            }

            .form-group:nth-child(1) {
                animation-delay: 0.1s;
            }

            .form-group:nth-child(2) {
                animation-delay: 0.2s;
            }

            .form-options {
                animation-delay: 0.3s;
            }

            .auth-submit-btn {
                animation-delay: 0.4s;
            }

            .auth-footer {
                animation-delay: 0.5s;
            }

            @keyframes slideInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            // Password toggle functionality
            function togglePassword(inputId) {
                const input = document.getElementById(inputId);
                const eye = document.getElementById(inputId + '-eye');

                if (input.type === 'password') {
                    input.type = 'text';
                    eye.classList.remove('fa-eye');
                    eye.classList.add('fa-eye-slash');
                } else {
                    input.type = 'password';
                    eye.classList.remove('fa-eye-slash');
                    eye.classList.add('fa-eye');
                }
            }

            // Password reset modal
            function showPasswordReset() {
                Swal.fire({
                    title: '{{ current_locale() === 'ar' ? 'استعادة كلمة المرور' : 'Reset Password' }}',
                    html: `
                            <form id="resetPasswordForm" style="text-align: {{ current_locale() === 'ar' ? 'right' : 'left' }};">
                                <div style="margin-bottom: 1rem;">
                                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">{{ current_locale() === 'ar' ? 'البريد الإلكتروني' : 'Email Address' }}</label>
                                    <input type="email" id="reset_email" class="swal2-input" placeholder="{{ current_locale() === 'ar' ? 'أدخل بريدك الإلكتروني' : 'Enter your email address' }}" required style="width: 90%; font-size: 1rem; padding: 0.75rem;">
                                </div>
                            </form>
                            `,
                    showCancelButton: true,
                    confirmButtonText: '{{ current_locale() === 'ar' ? 'إرسال رابط الاستعادة' : 'Send Reset Link' }}',
                    cancelButtonText: '{{ current_locale() === 'ar' ? 'إلغاء' : 'Cancel' }}',
                    confirmButtonColor: '#FFD700',
                    cancelButtonColor: '#d33',
                    width: '500px',
                    backdrop: 'rgba(0, 0, 0, 0.8)',
                    background: 'rgba(20, 25, 40, 0.95)',
                    color: 'white',
                    preConfirm: () => {
                        const email = document.getElementById('reset_email').value;
                        if (!email) {
                            Swal.showValidationMessage(
                                '{{ current_locale() === 'ar' ? 'يرجى إدخال البريد الإلكتروني' : 'Please enter your email address' }}'
                            );
                            return false;
                        }
                        return {
                            email: email
                        };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Simulate sending reset email
                        Swal.fire({
                            title: '{{ current_locale() === 'ar' ? 'تم الإرسال!' : 'Email Sent!' }}',
                            text: '{{ current_locale() === 'ar' ? 'تم إرسال رابط استعادة كلمة المرور إلى بريدك الإلكتروني' : 'Password reset link has been sent to your email' }}',
                            icon: 'success',
                            confirmButtonColor: '#FFD700',
                            background: 'rgba(20, 25, 40, 0.95)',
                            color: 'white'
                        });
                    }
                });
            }

            // Form submission with loading state
            document.addEventListener('DOMContentLoaded', function () {
                const form = document.querySelector('.auth-form');
                const submitBtn = document.querySelector('.auth-submit-btn');

                if (form && submitBtn) {
                    form.addEventListener('submit', function (e) {
                        submitBtn.disabled = true;
                        submitBtn.innerHTML =
                            '<i class="fas fa-spinner fa-spin" style="margin-left: 0.5rem;"></i>{{ current_locale() === 'ar' ? 'جاري تسجيل الدخول...' : 'Signing in...' }}';
                    });
                }

                // Add focus effects to form inputs
                const inputs = document.querySelectorAll('.form-input');
                inputs.forEach(input => {
                    input.addEventListener('focus', function () {
                        this.parentElement.style.transform = 'scale(1.02)';
                    });

                    input.addEventListener('blur', function () {
                        this.parentElement.style.transform = 'scale(1)';
                    });
                });
            });
        </script>
    @endpush
@endsection