@extends('front.layout.master')
@php
    $user = Auth::user();
    $sellerac = App\Store::where('user_id','=', $user->id)->first();
@endphp
@section('title', __('2 Factor Auth') . ' | ')

@section('body')

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('2FA Auth') }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 grid lg:grid-cols-[300px_1fr] gap-5 pb-12">
    <aside class="lg:sticky lg:top-28 lg:self-start">
        @include('user.sidebar')
    </aside>

    <div class="space-y-5">
        <div class="bg-white rounded-2xl shadow-card p-6 lg:p-8">
            <div class="flex items-center gap-3 mb-5">
                <div class="w-12 h-12 bg-emerald-50 rounded-xl grid place-items-center text-emerald-600">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z"/><path d="m9 12 2 2 4-4"/></svg>
                </div>
                <div>
                    <h1 class="font-display font-extrabold text-2xl">{{ __('Enable 2 Factor Auth') }}</h1>
                    <p class="text-[13px] text-slate-500">
                        @if(auth()->user()->google2fa_enable == 1)
                            <span class="inline-flex items-center gap-1.5 text-emerald-600 font-semibold"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>{{ __('Active') }}</span>
                        @else
                            <span class="inline-flex items-center gap-1.5 text-amber-600 font-semibold"><span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>{{ __('Not enabled') }}</span>
                        @endif
                    </p>
                </div>
            </div>

            <div class="bg-slate-50 rounded-xl p-4 text-[13px] text-slate-600 leading-relaxed mb-6">
                {{ __('Two factor authentication (2FA) strengthens access security by requiring two methods to verify your identity. It protects against phishing, social engineering, and password brute force attacks.') }}
            </div>

            @if(empty($data['google2fa_url']) && auth()->user()->google2fa_enable == 0)
                <form action="{{ url('/generate2faSecret') }}" method="POST" class="text-center py-6 border-2 border-dashed border-slate-200 rounded-xl">
                    @csrf
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z"/></svg>
                    <h3 class="font-display font-bold text-lg mt-3">{{ __('Get started with 2FA') }}</h3>
                    <p class="text-[13px] text-slate-500 mt-1 max-w-md mx-auto">{{ __('Generate a secret key, scan the QR with Google Authenticator, then verify with a one-time code.') }}</p>
                    <button type="submit" class="mt-5 bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-2.5 rounded-lg">{{ __('Generate Secret Key to Enable 2FA') }}</button>
                </form>
            @endif

            @if(!empty($data['google2fa_url']))
                <div class="grid md:grid-cols-2 gap-6 items-start">
                    <div class="bg-slate-50 rounded-xl p-5 text-center">
                        <div class="text-[12px] uppercase font-bold tracking-wider text-slate-500 mb-3">{{ __('Step 1: Scan QR') }}</div>
                        <div class="inline-block bg-white p-3 rounded-lg shadow-sm">{!! $data['google2fa_url'] !!}</div>
                        <p class="text-[12px] text-slate-500 mt-3">{{ __('Use Google Authenticator or any TOTP app to scan.') }}</p>
                    </div>

                    @if(auth()->user()->google2fa_secret != '' && auth()->user()->google2fa_enable == 0)
                    <form action="{{ url('/2fa-valid') }}" method="POST" class="space-y-3">
                        @csrf
                        <div class="text-[12px] uppercase font-bold tracking-wider text-slate-500 mb-3">{{ __('Step 2: Verify code') }}</div>
                        <div>
                            <label class="block text-[13px] font-semibold mb-1">{{ __('Enter pin from app') }} <span class="text-rose-500">*</span></label>
                            <input required type="text" name="one_time_password" pattern="[0-9]+" maxlength="6" class="w-full h-12 px-4 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[18px] tabular tracking-widest font-mono">
                        </div>
                        <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3 rounded-lg">{{ __('Enable 2FA Auth') }}</button>
                    </form>
                    @endif
                </div>
            @endif

            @if(auth()->user()->google2fa_enable == 1)
                <div class="border border-rose-200 bg-rose-50 rounded-xl p-5">
                    <h3 class="font-display font-bold text-lg flex items-center gap-2 text-rose-700">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 9v2m0 4h.01M3.07 19h17.86A2 2 0 0 0 22.66 16L13.71 4a2 2 0 0 0-3.42 0L1.34 16A2 2 0 0 0 3.07 19Z"/></svg>
                        {{ __('Disable 2FA') }}
                    </h3>
                    <p class="text-[13px] text-rose-600/80 mt-1">{{ __('You will need to enter your password to disable two-factor authentication.') }}</p>
                    <form action="{{ url('/disable-2fa') }}" method="POST" class="mt-4 space-y-3">
                        @csrf
                        <div>
                            <label class="block text-[13px] font-semibold mb-1">{{ __('Enter current password') }} <span class="text-rose-500">*</span></label>
                            <input required type="password" placeholder="{{ __('Enter current password') }}" name="password" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-rose-500 outline-none text-[14px] @error('password') border-rose-400 @enderror">
                            @error('password')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                        </div>
                        <button type="submit" class="bg-rose-500 hover:bg-rose-600 text-white font-bold px-5 py-2.5 rounded-lg">{{ __('Disable 2FA Auth') }}</button>
                    </form>
                </div>
            @endif
        </div>
    </div>
</section>

@include('front.partials.change-password-modal')
@endsection