@extends('layouts.user')

@section('title')
    2 Factor Authentication
@endsection

@section('content')


<!-- Start Hero -->
<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-[url('../../assets/images/hero/pages.html')] bg-center bg-no-repeat bg-cover" 
        style="background-image: url('{{ asset('images/profile-1.jpg') }}');"></div>
    </div><!--end container-->

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex">
            <div class="lg:w-1/4 md:w-1/3 md:px-3">
                <div class="relative -mt-32 md:-mt-48">
                    <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <div class="mb-5 text-center profile-pic">
                            <!-- <input id="pro-img" name="profile-image" type="file" class="hidden" onchange="loadFile(event)" /> -->
                            <div>
                                <div class="relative mx-auto h-28 w-28">
                                    <img src="{{ asset('images/avatar-1.png') }}" class="rounded-full shadow dark:shadow-gray-800 ring-4 ring-slate-50 dark:ring-slate-800" id="profile-image" alt="">
                                    <label class="absolute inset-0 cursor-pointer" for="pro-img"></label>
                                </div>

                                <div class="mt-4">
                                    <h5 class="text-lg font-semibold">{{ auth()->user()->username }}</h5>
                                    <p class="text-slate-400">{{ auth()->user()->email }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Side Nav -->
                        <x-side-nav/>
                        
                    </div>
                </div>
            </div>
            
            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-3 md:mt-0">
                <x-alert/>
                <div class="pt-4 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">

                <h5 class="px-4 mt-4 text-lg font-semibold">Verify Two Factor Authentication</h5>
                <div class="px-4">
                    <small class="mb-6 text-slate-500">
                        Our 2FA authenticator generates 2-Step Verification codes on your account.
                        2-Step Verification provides stronger security for account by requiring a second step of 
                        verification when you sign in. In addition to your password, you’ll also need a code 
                        generated by our 2FA authenticator and sent to your email.
                    </small>
                </div>
                <div class="relative px-4 mt-6 overflow-x-auto rounded-md shadow dark:shadow-gray-800">
                    <form class="form-horizontal" role="form" method="POST" action="{{ route('twofaDecision') }}">
                    {{ csrf_field() }}
                    
                    @if(auth()->user()->is_two_factor)  
                        <button type="submit" name="off" class="flex items-center justify-center w-full p-3 mb-3 text-white bg-orange-500 border-transparent rounded-lg shadow-md btn w-100 waves-effect waves-light shadow-violet-200 dark:shadow-zinc-600">
                            Disable Two Factor Authentication
                        </button>
                    @else  
                        <button type="submit" name="on" class="flex items-center justify-center w-full p-3 mb-3 text-white bg-orange-500 border-transparent rounded-lg shadow-md btn w-100 waves-effect waves-light shadow-violet-200 dark:shadow-zinc-600">
                            Enable Two Factor Authentication
                        </button>
                    @endif
                </div>

            </div>
        </div><!--end grid-->
    </div><!--end container-->
</section><!--end section-->
<!-- End Hero -->

@endsection