@extends("front.layout.master")
@section('title', __('Register') . ' | ')

@section('body')
@php require_once(base_path() . '/app/Http/Controllers/price.php'); @endphp

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 py-10 lg:py-16">
    <div class="grid lg:grid-cols-2 gap-8 max-w-5xl mx-auto bg-white rounded-3xl shadow-card overflow-hidden">

        {{-- Left: brand --}}
        <div class="mesh-1 text-white p-8 lg:p-12 relative overflow-hidden hidden lg:block">
            <div class="absolute -right-10 -bottom-10 w-72 h-72 bg-saffron/30 rounded-full blur-3xl"></div>
            <div class="relative">
                <div class="w-12 h-12 bg-white rounded-xl grid place-items-center text-brand-600 font-display font-extrabold text-2xl">{{ strtoupper(substr($title ?? 'E', 0, 1)) }}</div>
                <h2 class="font-display font-extrabold text-3xl mt-6 leading-tight">{{ __('Create your account') }}</h2>
                <p class="text-white/80 mt-3 text-[14px] max-w-sm">{{ __('Join us today and unlock exclusive deals, faster checkout, and personalized recommendations.') }}</p>

                <div class="mt-10">
                    <div class="text-[12px] text-white/70 uppercase tracking-wider mb-3">{{ __('Why sign up?') }}</div>
                    <ul class="space-y-3 text-[14px]">
                        <li class="flex items-center gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-saffron"><path d="m4 12 5 5L20 7"/></svg>{{ __('Welcome bonus') }}</li>
                        <li class="flex items-center gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-saffron"><path d="m4 12 5 5L20 7"/></svg>{{ __('Free shipping perks') }}</li>
                        <li class="flex items-center gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-saffron"><path d="m4 12 5 5L20 7"/></svg>{{ __('Early access to new launches') }}</li>
                        <li class="flex items-center gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-saffron"><path d="m4 12 5 5L20 7"/></svg>{{ __('Exclusive member offers') }}</li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- Right: form --}}
        <div class="p-8 lg:p-12">
            <h2 class="font-display font-extrabold text-2xl">{{ __('Create account') }}</h2>
            <p class="text-slate-500 text-[14px] mt-1 mb-6">{{ __('Fill in your details to get started.') }}</p>

            @if(isset($configs) && ($configs->fb_login_enable == '1' || $configs->google_login_enable == '1' || $configs->twitter_enable == 1 || $configs->linkedin_enable == '1'))
                <div class="flex justify-center gap-2 flex-wrap mb-4">
                    @if($configs->fb_login_enable == '1')<a href="{{ url('login/facebook') }}" class="w-11 h-11 rounded-full border border-slate-200 grid place-items-center hover:bg-slate-50" title="Facebook"><img src="{{ url('frontend/assets/images/login/facebook.png') }}" class="w-6 h-6"></a>@endif
                    @if($configs->google_login_enable == '1')<a href="{{ url('login/google') }}" class="w-11 h-11 rounded-full border border-slate-200 grid place-items-center hover:bg-slate-50" title="Google"><img src="{{ url('frontend/assets/images/login/google.png') }}" class="w-6 h-6"></a>@endif
                    @if($configs->twitter_enable == 1)<a href="{{ url('login/twitter') }}" class="w-11 h-11 rounded-full border border-slate-200 grid place-items-center hover:bg-slate-50" title="Twitter"><img src="{{ url('frontend/assets/images/login/twitter.png') }}" class="w-6 h-6"></a>@endif
                    @if($configs->linkedin_enable == '1')<a href="{{ url('login/linkedin') }}" class="w-11 h-11 rounded-full border border-slate-200 grid place-items-center hover:bg-slate-50" title="LinkedIn"><img src="{{ url('frontend/assets/images/login/linkedin.png') }}" class="w-6 h-6"></a>@endif
                </div>
                <div class="relative my-4 text-center">
                    <span class="bg-white px-3 relative z-10 text-[12px] text-slate-400 uppercase">{{ __('Or sign up with email') }}</span>
                    <div class="absolute inset-x-0 top-1/2 h-px bg-slate-200"></div>
                </div>
            @endif

            <form method="POST" action="{{ route('register') }}" class="space-y-4" novalidate>
                @csrf
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('Name') }} <span class="text-rose-500">*</span></label>
                    <input required type="text" name="name" value="{{ old('name') }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    @error('name')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('Email') }} <span class="text-rose-500">*</span></label>
                    <input required type="email" name="email" value="{{ old('email') }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]" placeholder="you@example.com">
                    @error('email')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('Mobile No.') }} <span class="text-rose-500">*</span></label>
                    <input required pattern="[0-9]+" type="text" name="mobile" value="{{ old('mobile') }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    @error('mobile')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>
                <div class="grid sm:grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('Password') }} <span class="text-rose-500">*</span></label>
                        <input required type="password" name="password" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                        @error('password')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('Confirm Password') }} <span class="text-rose-500">*</span></label>
                        <input required type="password" name="password_confirmation" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                </div>
                @if($aff_system && $aff_system->enable_affilate == 1)
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('ReferCode') }}</label>
                        <input value="{{ app('request')->input('refercode') ?? old('refercode') }}" type="text" name="refer_code" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    </div>
                @endif
                @if($genrals_settings && $genrals_settings->captcha_enable == 1)
                    <div>{!! no_captcha()->display() !!}</div>
                    @error('g-recaptcha-response')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                @endif
                <label class="flex items-start gap-2 text-[13px] text-slate-600">
                    <input type="checkbox" name="eula" required class="w-4 h-4 rounded mt-0.5">
                    <span>{{ __('I agree with the terms & conditions') }}</span>
                </label>
                <button type="submit" class="w-full h-12 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-lg transition-colors flex items-center justify-center gap-2">
                    {{ __('Create Account') }}
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </button>
                <p class="text-center text-[14px] text-slate-600">{{ __('Already have an account') }}? <a href="{{ route('login') }}" class="text-brand-600 font-semibold hover:underline">{{ __('Login') }}</a></p>
            </form>
        </div>
    </div>
</section>

@endsection