@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">
                        Google Authenticator generates 2-Step Verification codes on your phone.
                        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 the Google Authenticator app on your phone.
                    </small>
                </div>
                <div class="relative px-4 mt-6 overflow-x-auto rounded-md shadow dark:shadow-gray-800">
                    @if($user->is_two_factor_enabled)
                    <form class="form-horizontal" role="form" method="POST" action="{{ config('2fa-config.disable_2fa') }}">
                    @else
                    <form class="form-horizontal" role="form" method="POST" action="{{ config('2fa-config.enable_2fa') }}">
                    @endif
                    {{ csrf_field() }}

                    @if(! $user->is_two_factor_enabled)
                    <div id="" class="relative my-4 text-gray-600 rounded dark:text-gray-100 alert" role="alert">
                        <span class="block font-bold text-center sm:inline">Please scan this barcode using <strong>Google Authenticator</strong> or <strong>Authy</strong> client Application and Click Enable Button</span>
                    </div>
                    <div class="my-4">
                        <img style="height: 200px;" class="mx-auto mt-3" src="{{ $barcode }}" alt=""/>
                    </div>
                    @endif
                    
                    @if($user->is_two_factor_enabled)  
                        <button type="submit" 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" 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 -->
<!-- 

<div class="main-content" style="min-height: 100vh">
    <div class="page-content dark:bg-zinc-700" style="padding-bottom: 400px; padding-top: 150px;">
        <div class="container-fluid px-[0.625rem]">
            <div class="grid grid-cols-1 mb-5">
                <div class="flex items-center justify-between">
                    <h4 class="text-lg font-semibold text-gray-800 mb-sm-0 grow dark:text-gray-100">Verify Two Factor Authentication</h4>
                    <nav class="flex" aria-label="Breadcrumb">
                    </nav>
                </div>
            </div>

                
            <div class="grid grid-cols-1">

                <div class="w-full md:w-[80%] lg:w-[50%] mx-auto bg-yellow-100 border border-yellow-400 text-yellow-800 px-4 py-3 alert alert-warning border-t-4 border-yellow-500 rounded rounded-t-none relative" role="alert">
                    <small class="block sm:inline">
                        Google Authenticator generates 2-Step Verification codes on your phone.
                        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 the Google Authenticator app on your phone.
                    </small>
                </div>

            

                <div class="relative mt-5 overflow-x-auto">
                    <div class="w-full md:w-[80%] lg:w-[50%] card dark:bg-zinc-800 dark:border-zinc-600 mx-auto">
                        <div class="card-body ">
                            @if($user->is_two_factor_enabled)
                            <form class="form-horizontal" role="form" method="POST" action="{{ config('2fa-config.disable_2fa') }}">
                            @else
                            <form class="form-horizontal" role="form" method="POST" action="{{ config('2fa-config.enable_2fa') }}">
                            @endif
                                {{ csrf_field() }}

                                @if(! $user->is_two_factor_enabled)
                                <div id="" class="relative my-4 text-gray-600 rounded dark:text-gray-100 alert" role="alert">
                                    <span class="block font-bold text-center sm:inline">Please scan this barcode using <strong>Google Authenticator</strong> or <strong>Authy</strong> client Application and Click Enable Button</span>
                                </div>
                                <div class="my-4">
                                    <img style="height: 200px;" class="mx-auto mt-3" src="{{ $barcode }}" alt=""/>
                                </div>
                                @endif
                                
                                @if($user->is_two_factor_enabled)  
                                    <button type="submit" class="flex justify-center items-center btn border-transparent w-full py-2.5 text-white w-100 waves-effect waves-light shadow-md shadow-violet-200 dark:shadow-zinc-600" style="background-color: #3c12d4">
                                        Disable Two Factor Authentication
                                    </button>
                                @else  
                                    <button type="submit" class="flex justify-center items-center btn border-transparent w-full py-2.5 text-white w-100 waves-effect waves-light shadow-md shadow-violet-200 dark:shadow-zinc-600" style="background-color: #3c12d4">
                                        Enable Two Factor Authentication
                                    </button>
                                @endif
                        </div>
                    </div>
                </div>
            </div> -->


<!-- <div class="container">
    <div class="row d-flex justify-content-center">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Verify Two Factor Authentication </div>
                <div class="panel-body">
                    @if($user->is_two_factor_enabled)
                    <form class="form-horizontal" role="form" method="POST" action="{{ config('2fa-config.disable_2fa') }}">
                    @else
                    <form class="form-horizontal" role="form" method="POST" action="{{ config('2fa-config.enable_2fa') }}">
                    @endif
                        {{ csrf_field() }}
                        <div class="alert alert-warning">
                            Google Authenticator generates 2-Step Verification codes on your phone.
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 the Google Authenticator app on your phone.
                        </div>
                        <div class="text-center form-group">
                        @if(! $user->is_two_factor_enabled)
                            <p>Please scan this barcode using <strong>Google Authenticator</strong> or <strong>Authy</strong> client Application and Click Enable Button</p>
                            <div class="flex justify-center">
                                <img src="{{ $barcode }}" />
                            </div>
                        @endif
                        </div>
                        <div class="text-center form-group">
                            <div class="text-center">
                            @if($user->is_two_factor_enabled)
                                <button type="submit" class="btn btn-danger">
                                    Disable Two Factor Authentication
                                </button>
                            @else
                                <button type="submit" class="btn btn-success">
                                    Enable Two Factor Authentication
                                </button>
                            @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div> -->
@endsection