@extends('marketing.auth.auth_template')
@section('content')
<div class="container-fluid">
    <div class="row h-100 align-items-center" style="min-height: 100vh;">
		<div class="col-lg-5 col-xl-4 p-0">
			<div class="bg-black p-4 p-md-5 h-100">
				<a href="{{ url('/') }}" class="mb-5 d-block"> <img src="{{ asset('/img/logo.png') }}" alt=""> </a>
				<h2 class="display-3 mb-3">Enable 2FA</h2>
                <div class="g2fa mb-2">
                    <div class="text-left mb-2">
                        <img src="{{$qrCodeUrl}}" alt="2FA QR" width="150px">
                    </div>
                    <div class="d-flex ">
                        <h4 class="me-2">{{$secret}}</p>
                        <button id="copy-btn" onclick="copyclipboard('{{ $secret }}')" class="btn btn-primary btn-xs">Copy</button>
                    </div>
                </div>
				<form action="{{ url('marketing/verify2fa') }}" method="post">
					@csrf
                    <input type="hidden" value="{{ $secret }}" name="skey" id="skey">
					<div class="mb-3">
						<label for="code" class="form-label">Code <span class="required-mark">*</span></label>
						<input type="text" name="code" class="form-control form-control-lg bg-dark @error('code') is-invalid @enderror" id="code" placeholder="Enter Code" value="{{ old('code') }}">
						@error('code')
						<div class="invalid-feedback">
							{{ $message }}
						</div>
						@enderror
					</div>
					<button type="submit" class="btn btn-primary w-100 mt-4">Verify Code</button>
				</form>
			</div>
		</div>
		<div class="col-lg-7 col-xl-8 p-0 bg-img-login bg-black h-100" style="background-image: url('/img/auth-admin-bg.jpg'); background-position: center center; background-size: cover;">
		</div>
	</div>
</div>
<script>
    function copyclipboard(val) {
        navigator.clipboard.writeText(val);
        document.querySelector("#copy-btn").innerText = "Copied";
    }
</script>
@endsection