@extends('layouts.app')

@php
    $canonical = url()->current(); // Or a custom URL if needed
@endphp

@section('content')

    <main class="flex-grow flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4 py-8 sm:py-12 mt-10 mb-10">
        <div class="max-w-3xl w-full bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col md:flex-row">
            <!-- Left Panel - Branding -->
            <div class="md:w-1/2 bg-sky-900 text-white p-10 flex flex-col justify-between">
                <div >
                    <div class="flex justify-center items-center">
                        <i class="bi bi-image text-4xl font-bold mb-2 text-white"></i>
                    </div>
                    <div class="flex justify-center items-center">
                      <h1 class="text-4xl font-bold mb-4 text-white">pixxx.in</span></h1>
                    </div>
                    <div class="flex justify-center items-center">
                      <p class="text-white mb-6 text-lg">Welcome to our platform</p>
                    </div>
                    <div class="flex justify-center items-center">
                      <p class="text-sm font-medium mb-6">Login to access your account and continue your journey with us. Professional Image Editing Services Providing Website.</p>
                    </div>
                </div>
                
                <div class="">
                    <div class="flex items-center mb-4">
                        <i class="bi bi-check2-circle text-white text-sm mr-2"></i>
                        <p class="text-white text-sm">Secure & Encrypted</p>
                    </div>
                    <div class="flex items-center mb-4">
                        <i class="bi bi-check2-circle text-white text-sm mr-2"></i>
                        <p class="text-white text-sm">Sync Across Devices</p>
                    </div>
                </div>
                
            </div>
            
            <!-- Right Panel - Forms -->
            <div class="md:w-1/2 p-8">
                <!-- Toggle Buttons -->
                <div class="flex border-b border-gray-200 mb-8">
                    <button id="loginTab" class="py-3 px-6 font-medium border-b-2 border-primary text-primary">Login</button>
                    <button id="registerTab" class="py-3 px-6 font-medium text-gray-500 hover:text-gray-700">Register</button>
                </div>
                
                <!-- Login Form -->
                <div id="loginForm">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6">Login to your account</h2>
                    
                    <div class="flex space-x-4 mb-6">
                        <button class="flex-1 py-2 px-4 border border-gray-300 rounded-lg flex items-center justify-center text-red-500  hover:bg-gray-50 transition-colors">
                            <a href="{{ route('Google_Auth') }}"><i class="bi bi-google text-red-500 mr-2"></i> Google</a>
                        </button>
                        <!-- <button class="flex-1 py-2 px-4 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700 hover:bg-gray-50 transition-colors">
                            <i class="fab fa-facebook text-blue-600 mr-2"></i> Facebook
                        </button> -->
                    </div>
                    
                    <div class="text-center text-gray-500 mb-6 relative">
                        <div class="absolute inset-0 flex items-center">
                            <div class="w-full border-t border-gray-300"></div>
                        </div>
                        <div class="relative inline-block bg-white px-4 text-sm">Or continue with email</div>
                    </div>
                    
                    <form action="{{ route('login') }}" method="POST">
                        @csrf

                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-medium mb-1" for="email">{{ __('Email Address') }}</label>
                            <div class="relative">
                                <i class="fas fa-envelope absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="email" id="email" class="w-full pl-4 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-300" placeholder="Enter email" name="email" required>
                            </div>
                        </div>
                        @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                        @enderror                  
                        
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-medium mb-1" for="password">Password</label>
                            <div class="relative">
                                <i class="fas fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="password" id="password" class="w-full pl-4 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-300" name="password" placeholder="Enter password" required>
                            </div>
                        </div>
                        @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                        @enderror
                        
                        <div class="flex items-center justify-between mb-6">
                            <div class="flex items-center">
                                <input type="checkbox" name="remember" id="remember" class="w-4 h-4 text-primary rounded focus:ring-primary" {{ old('remember') ? 'checked' : '' }} >
                                <label for="remember" class="ml-2 text-sm text-gray-700" >Remember me</label>
                            </div>
                            @if (Route::has('password.request'))
                             <a href="{{ route('password.request') }}" class="text-sm text-primary hover:text-secondary transition duration-300">Forgot password?</a>
                            @endif
                        </div>
                        
                        <button type="submit" class="w-full btn-primary text-white font-medium py-2.5 rounded-lg hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5">
                            Login
                        </button>
                    </form>
                </div>
                
                <!-- Register Form (Hidden by default) -->
                <div id="registerForm" class="hidden">
                    <h2 class="text-2xl font-bold text-gray-800 mb-3">Create your account</h2>
                    <p class="text-gray-600 mb-3 text-sm">Join our community and start your journey today.</p>
                    
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
                            <div class="mb-4">
                                <label class="block text-gray-700 text-sm font-medium mb-1" for="first-name">Full Name</label>
                                <div class="relative">
                                    <i class="fas fa-user absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                    <input type="text" id="first-name" class="w-full pl-4 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-300 @error('name') is-invalid @enderror" placeholder="Enter name" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                                </div>
                            </div>
                            @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        
                        <div class="mb-4">
                            <label class="block text-gray-700 text-sm font-medium mb-1" for="register-email">Email Address</label>
                            <div class="relative">
                                <i class="fas fa-envelope absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="email" id="register-email" class="w-full pl-4 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-300 @error('email') is-invalid @enderror" placeholder="Enter email" name="email" value="{{ old('email') }}" required autocomplete="email">
                            </div>
                        </div>
                        @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                        @enderror
                        
                        <div class="grid md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label class="block text-gray-700 text-sm font-medium mb-1" for="password">Password</label>
                                <div class="relative">
                                    <i class="fas fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                    <input type="password" id="password" class="w-full pl-4 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-300 @error('password') is-invalid @enderror" placeholder="Enter password" required name="password" required autocomplete="new-password">
                                </div>
                            </div>
                            @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                            <div>
                                <label class="block text-gray-700 text-sm font-medium mb-1" for="password-confirm">Confirm Password</label>
                                <div class="relative">
                                    <i class="fas fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                    <input type="password" id="password-confirm" class="w-full pl-4 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-300" placeholder="Confirm password" required name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex items-start mb-6">
                            <input type="checkbox" id="terms" class="w-4 h-4 text-primary rounded mt-1 focus:ring-primary">
                            <label for="terms" class="ml-2 text-sm text-gray-700">I agree to the <a href="#" class="text-primary hover:text-secondary transition duration-300">Terms of Service</a> and <a href="#" class="text-primary hover:text-secondary transition duration-300">Privacy Policy</a></label>
                        </div>
                        
                        <button type="submit" class="w-full btn-primary text-white font-medium py-2.5 rounded-lg hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5">
                            Create Account
                        </button>
                    </form>
                    
                    <div class="mt-6 text-center">
                        <p class="text-sm text-gray-600">
                            Already have an account? 
                            <a href="#" id="switchToLogin" class="font-medium text-primary hover:text-secondary transition duration-300">Login</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginTab = document.getElementById('loginTab');
            const registerTab = document.getElementById('registerTab');
            const loginForm = document.getElementById('loginForm');
            const registerForm = document.getElementById('registerForm');
            const switchToLogin = document.getElementById('switchToLogin');
            
            // Switch to Register
            registerTab.addEventListener('click', function() {
                loginTab.classList.remove('border-b-2', 'border-primary', 'text-primary');
                loginTab.classList.add('text-gray-500', 'hover:text-gray-700');
                registerTab.classList.add('border-b-2', 'border-primary', 'text-primary');
                registerTab.classList.remove('text-gray-500', 'hover:text-gray-700');
                
                loginForm.classList.add('hidden');
                registerForm.classList.remove('hidden');
            });
            
            // Switch to Login
            loginTab.addEventListener('click', function() {
                registerTab.classList.remove('border-b-2', 'border-primary', 'text-primary');
                registerTab.classList.add('text-gray-500', 'hover:text-gray-700');
                loginTab.classList.add('border-b-2', 'border-primary', 'text-primary');
                loginTab.classList.remove('text-gray-500', 'hover:text-gray-700');
                
                registerForm.classList.add('hidden');
                loginForm.classList.remove('hidden');
            });
            
            // Switch from register form to login
            if(switchToLogin) {
                switchToLogin.addEventListener('click', function(e) {
                    e.preventDefault();
                    loginTab.click();
                });
            }
        });
    </script>

@endsection