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

$content = content('breadcrumb.content');

@endphp

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


        
<section x-data="{ loading: false }" class="min-h-screen flex flex-col md:flex-row bg-slate-50 dark:bg-[#08090d] transition-colors duration-300">

    <div class="flex flex-col justify-center items-center w-full md:w-1/2 px-6 py-12 lg:px-20">

        <!--<div class="w-full flex justify-center mb-10">-->
        <!--    <a href="{{ config('app.homepage') }}" class="block transform transition hover:scale-105">-->
        <!--        <img src="{{ getFile('logo', @$general->logo) }}" alt="logo" class="w-40 md:w-48 object-contain dark:brightness-110">-->
        <!--    </a>-->
        <!--</div>-->

        <div class="w-full max-w-md bg-white dark:bg-[#0e0f13] border border-slate-200 dark:border-gray-800 rounded-[2.5rem] shadow-2xl shadow-slate-200 dark:shadow-none p-10 relative overflow-hidden">
            
            <div class="relative z-10">
                @if ($general->is_email_verification_on && !auth()->user()->ev)
                    <div class="text-center mb-8">
                        <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-blue-50 dark:bg-blue-500/10 mb-4">
                            <i data-lucide="mail-check" class="w-7 h-7 text-blue-600 dark:text-blue-500"></i>
                        </div>
                        <h3 class="text-2xl font-black text-slate-900 dark:text-white tracking-tight uppercase italic">{{ __('Verify Email') }}</h3>
                        <p class="text-slate-500 dark:text-gray-400 text-sm font-medium">{{ __('Authorization required for your registered email.') }}</p>
                    </div>

                    <form action="{{ route('user.authentication.verify.email') }}" method="POST" class="space-y-6" @submit="loading = true">
                        @csrf
                        <div>
                            <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 mb-2 ml-1">{{ __('Verification Code') }}</label>
                            <input type="text" name="code" placeholder="000000" class="w-full px-5 py-4 rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-gray-800 text-slate-900 dark:text-white text-center text-xl font-black tracking-[0.3em] focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all uppercase">
                        </div>

                        @if (@$general->allow_recaptcha)
                            <div class="flex justify-center bg-slate-50 dark:bg-slate-900/30 p-4 rounded-2xl border border-slate-100 dark:border-gray-800/50">
                                <script src="https://www.google.com/recaptcha/api.js"></script>
                                <div class="g-recaptcha" data-sitekey="{{ @$general->recaptcha_key }}" data-callback="verifyCaptcha" data-theme="dark"></div>
                            </div>
                        @endif

                        <button type="submit" :disabled="loading" class="w-full py-4 rounded-2xl bg-blue-600 hover:bg-blue-700 text-white font-black uppercase italic tracking-wider shadow-lg shadow-blue-500/30 transition-all flex items-center justify-center">
                            <span x-show="!loading">{{ __('Verify Identity') }}</span>
                            <span x-show="loading" class="flex items-center gap-2">
                                <svg class="animate-spin h-5 w-5 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                {{ __('Processing...') }}
                            </span>
                        </button>
                    </form>

                @elseif($general->is_sms_verification_on && !auth()->user()->sv)
                    <div class="text-center mb-8">
                        <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-emerald-50 dark:bg-emerald-500/10 mb-4">
                            <i data-lucide="smartphone" class="w-7 h-7 text-emerald-600 dark:text-emerald-500"></i>
                        </div>
                        <h3 class="text-2xl font-black text-slate-900 dark:text-white tracking-tight uppercase italic">{{ __('Verify SMS') }}</h3>
                        <p class="text-slate-500 dark:text-gray-400 text-sm font-medium">{{ __('Please enter the code sent to your mobile device.') }}</p>
                    </div>

                    <form method="POST" action="{{ route('user.authentication.verify.sms') }}" class="space-y-6" @submit="loading = true">
                        @csrf
                        <div>
                            <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 mb-2 ml-1">{{ __('SMS Secure Code') }}</label>
                            <input type="text" name="code" placeholder="000000" class="w-full px-5 py-4 rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-gray-800 text-slate-900 dark:text-white text-center text-xl font-black tracking-[0.3em] focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all uppercase">
                        </div>

                        <button type="submit" :disabled="loading" class="w-full py-4 rounded-2xl bg-emerald-600 hover:bg-emerald-700 text-white font-black uppercase italic tracking-wider shadow-lg shadow-emerald-500/30 transition-all flex items-center justify-center">
                            <span x-show="!loading">{{ __('Confirm Mobile') }}</span>
                            <span x-show="loading" class="flex items-center gap-2">
                                <svg class="animate-spin h-5 w-5 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                {{ __('Confirming...') }}
                            </span>
                        </button>
                    </form>
                @endif
                
                <div class="mt-8 pt-6 border-t border-slate-100 dark:border-gray-800 text-center">
                    <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-gray-500">
                        {{ __('Wrong details?') }} 
                        <a href="{{ route('user.logout') }}" class="text-red-500 hover:text-red-400 transition-colors ml-1 font-black underline decoration-red-500/30 underline-offset-4">
                            {{ __('Sign Out') }}
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="hidden md:flex w-1/2 bg-[#0f172a] relative overflow-hidden">
        <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#2563eb 1px, transparent 1px); background-size: 40px 40px;"></div>
        
        <div class="relative z-10 flex flex-col justify-center items-center w-full h-full p-20 text-center">
            <div class="relative group">
                <div class="absolute -inset-10 bg-blue-500/20 rounded-full blur-[100px] opacity-50"></div>
                <img src="{{ getFile('frontendlogin', @$general->frontend_login_image) }}" alt="Security" class="relative max-w-sm rounded-[3rem] shadow-2xl border border-white/5 transform transition duration-1000 group-hover:scale-[1.03]">
            </div>
            
            <div class="mt-16 max-w-sm">
                <h4 class="text-2xl font-black text-white italic uppercase tracking-tight mb-4">Identity Protocol</h4>
                <p class="text-slate-500 text-sm font-medium leading-relaxed">We utilize multi-factor authentication to ensure your trading terminal remains accessible only by you.</p>
            </div>
        </div>
    </div>

</section>


@endsection
