@extends('sellers.layout.mainlayout')
    @section('content')

        <!-- Login Section -->
        <div class="login-content w-50">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 my-auto">
                    <div class="dark-mode-login">
						<ul>
						<li class="dark-mode-list">
							<a href="javascript:void(0);" id="dark-mode-toggle" class="dark-mode-toggle">
								<i class="fa fa-sun light-mode @if((session('site_mode') && session('site_mode') == 'light') || !session('site_mode')) active @endif"></i>
                                <i class="fa fa-moon dark-mode @if(session('site_mode') && session('site_mode') == 'dark') active @endif"></i>
							</a>
						</li>
						</ul>
					</div>
                        <div class="login-wrap">

                            <div class="login-header">
                                <a href="{{ route('home') }}">
                                    <img class="logo-blk" src="{{ asset('sellers/assets/img/logo.svg') }}" alt="">
                                </a>
                                <h4>Verify your Account</h4>
                                <p>Enter the OneTimePassword, we sent to your registered email.</p>
                            </div>

                            <!-- Login Form -->
                            <form action="{{ route('seller.verifyotp',$email) }}" method="POST">
                                @csrf
                                <div class="form-set">
                                    <input class="form-control" name="otp" type="text" placeholder="Enter your OTP">
                                    @error('otp')
								        <p class='text-danger'>{{ $message }}</p>
								    @enderror
                                    @if (session()->has('mismatch'))
                                        <p class='text-danger' style="margin-left: 0px">{{ session('mismatch') }}</p>
								    @endif
                                </div>
                                <button class="btn btn-primary w-100 login-btn" type="submit">Verify</button>
                                <br>
                                <br>
                                <div class="register-link text-center">
                                    <p>Not received? <a class="forgot-link" href="{{ route('seller.resendotp',$email) }}">Resend OTP</a></p>
                                </div>
                                <div class="register-link text-center">
                                    <p>No issues return to <a class="forgot-link" href="{{ route('seller.login') }}">Login</a></p>
                                </div>
                            </form>
                            <!-- /Login Form -->
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- /Login Section -->
        <!-- Login image -->
        <div class="login-img-wrapper">
            <div class="login-img">
                <img class="shape-icon1-blk" src="{{ asset('sellers/assets/img/shape1.svg') }}" alt="">
                <img class="shape-icon2-blk" src="{{ asset('sellers/assets/img/shape2.svg') }}" alt="">
                <div class="content-info">
                    <h3>The <span class="text-highlight">1st</span> place to look for <span class="text-highlight">2nd</span> Amendment deals!</h3>
                    <div class="text-end">
                        <img class="img-fluid" src="{{ asset('sellers/assets/img/ad-card-1.svg') }}" alt="">
                    </div>
                    <div class="text-start">
                        <img class="img-fluid" src="{{ asset('sellers/assets/img/ad-card-2.svg') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- /Login Section -->
        
    @endsection