@extends(template().'layout.auth')

@section('content')
    @push('seo')
        <meta name='description' content="{{ @$general->seo_description }}">
    @endpush

<section class="min-h-screen flex flex-col md:flex-row bg-[#f8f9fa] text-gray-800">
    <div class="flex flex-col justify-center items-center w-full md:w-1/2 px-6 lg:px-16 py-12">
        
        <div class="flex justify-center mb-10">
            <a href="{{ config('app.homepage') }}">
                <img src="{{ getFile('logo', @$general->logo) }}" alt="Logo" class="w-40 md:w-52">
            </a>
        </div>

        <div class="w-full max-w-md bg-white border border-gray-200 rounded-3xl shadow-sm p-8 md:p-10">
            <h2 class="text-2xl font-bold text-gray-900 mb-2">{{ __('Welcome Back') }}</h2>
            <p class="text-gray-500 mb-8">{{ __('Please enter your details to sign in.') }}</p>

            <form action="{{ route('user.login') }}" method="POST" class="space-y-6">
                @csrf

                <div class="relative">
                    <input 
                        type="email"
                        name="email"
                        id="email"
                        value="{{ old('email') }}"
                        required
                        placeholder=" " 
                        class="peer w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors"
                    >
                    <label for="email" class="absolute left-0 top-3 text-gray-400 pointer-events-none transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-[#0CA24B] peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-xs">
                        {{ __('Email Address') }}
                    </label>
                </div>

                <div class="relative">
                    <input 
                        type="password"
                        name="password"
                        id="password"
                        required
                        placeholder=" "
                        class="target-password-field peer w-full border-b-2 border-gray-200 py-3 bg-transparent focus:border-[#0CA24B] outline-none transition-colors pr-10"
                    >
                    <label for="password" class="absolute left-0 top-3 text-gray-400 pointer-events-none transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-[#0CA24B] peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-xs">
                        {{ __('Password') }}
                    </label>
                    <span class="absolute right-0 top-3 cursor-pointer show-password-icon">
                        <i class="fa fa-eye text-gray-400 hover:text-[#0CA24B]"></i>
                    </span>
                </div>

                <div class="flex items-center justify-end">
                    <a href="{{ route('user.forgot.password') }}" class="text-sm font-semibold text-[#0CA24B] hover:underline">
                        {{ __('Forgot password?') }}
                    </a>
                </div>

                @if (@$general->allow_recaptcha == 1)
                <div class="my-3 flex justify-center">
                    <script src="https://www.google.com/recaptcha/api.js"></script>
                    <div class="g-recaptcha" data-sitekey="{{ @$general->recaptcha_key }}" data-callback="verifyCaptcha"></div>
                    <div id="g-recaptcha-error"></div>
                </div>
                @endif

                <button 
                    type="submit" 
                    class="w-full py-4 rounded-xl bg-[#0CA24B] text-white font-bold shadow-lg shadow-green-100 hover:bg-green-600 transition-all transform active:scale-95"
                >
                    {{ __('Sign In') }}
                </button>
            </form>

            <p class="mt-8 text-center text-sm text-gray-500">
                {{ __("Don't have an account?") }}
                <a href="{{ route('user.register') }}" class="text-[#0CA24B] font-bold hover:underline ml-1">
                    {{ __('Create one now') }}
                </a>
            </p>
        </div>
    </div>

    <div class="hidden md:flex w-1/2 bg-[#0CA24B] relative overflow-hidden items-center justify-center">
        <div class="absolute inset-0 bg-black/5 opacity-10"></div>
        <div class="relative z-10 text-center p-12">
            <div class="bg-white/10 p-4 rounded-3xl backdrop-blur-sm border border-white/20 mb-8 inline-block">
                <img src="{{ getFile('frontendlogin', @$general->frontend_login_image) }}" alt="Login Image" class="max-w-md rounded-2xl shadow-2xl">
            </div>
            <h2 class="text-4xl font-extrabold text-white mb-4">{{ __('Secure Access') }}</h2>
            <p class="text-green-50 text-lg opacity-80 max-w-sm mx-auto">{{ __('Log in to manage your portfolio and access global markets.') }}</p>
        </div>
        <div class="absolute -top-24 -right-24 w-96 h-96 bg-white/10 rounded-full"></div>
        <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-white/5 rounded-full"></div>
    </div>
</section>

@endsection

@push('script')
    <script>
        "use strict";

        // Password Toggle
        document.querySelectorAll(".show-password-icon").forEach(el => {
            el.addEventListener("click", function () {
                const icon = this.querySelector('i');
                const field = this.parentElement.querySelector('.target-password-field');
                icon.classList.toggle('fa-eye');
                icon.classList.toggle('fa-eye-slash');
                field.type = field.type === "password" ? "text" : "password";
            });
        });

        function verifyCaptcha() {
            document.getElementById('g-recaptcha-error').innerHTML = '';
        }
    </script>
@endpush