@extends('layouts.login-app')

@section('app')
<!-- =============================== Account Section Start Here ====================== -->
<section class="account">
     <div class="account__shape">
        <img src="{{ asset('assets/templates/basic/frontend/images/shapes/account-shape.png') }}" alt="Shape" class="w-full h-auto">
    </div>

    <a href="#" class="account__logo">
        <img src="{{ asset('assets/images/logo_icon/logo.png') }}" alt="Logo" class="account__logo-img light">
        <img src="{{ asset('assets/images/logo_icon/logo_dark.png') }}" alt="" class="account__logo-img dark">
    </a>

    <a href="" class="account__backtohome btn btn--light btn--icon absolute top-4 right-4 flex items-center">
        <i class="fas fa-times mr-2"></i> @lang('Back to Home')
    </a>

    <div class="container"> 
        <div class="row gy-5 align-items-center flex-wrap-reverse">
            
            <div class="col-md-6">
                <div class="account-thumb">
                    <img src="{{ asset('assets/images/frontend/login_register/641872cda99f91679323853.png') }}" alt="">
                </div>
            </div>

            <div class="col-md-6">
                <div class="account-form"> 
                    <form method="POST" action="{{ route("login.login.auth") }}" class="verify-gcaptcha">
                        @csrf

                        <h2 class="account-form__title">@lang('Login Your Account')</h2>

                        <div class="form-group">
                            <label class="floating-label" for="email">@lang('Email')</label>
                            <input type="text" name="email" value="{{ old('email') }}" class="form--control" required>
                        </div>

                        <div class="form-group">
                            <label class="floating-label" for="your-password">@lang('Password')</label>
                            <div class="input--group">
                                <input id="password" type="password" class="form--control" name="password" required>
                                <div class="password-show-hide fa-solid toggle-password fa-eye-slash" data-target="#password"></div>
                            </div>
                        </div>

                        <div class="form-group custom--checkbox d-flex justify-content-between flex-wrap">
                            <div>
                                <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                                <label class="form-check-label" for="remember">@lang('Remember Me')</label>
                            </div>
                            <a href="" class="anchor-color">@lang('Forgot Password')?</a>
                        </div>

                        <div class="form-group">
                            <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                        </div>

                        <div class="form-group">        
                            <button type="submit" id="recaptcha" class="btn btn--base w-100">@lang('Login')</button>
                        </div>

                        <div class="form-group">        
                            <div class="account-form__or">
                                <span class="account-form__or-text">@lang('Or')</span>
                            </div>
                        </div>

                        <div class="form-group mb-0">        
                            <a href="{{ route("login.login.register") }}" class="btn btn--base outline w-100">@lang('Become a Merchant')</a>
                        </div>

                        <!-- Telegram Contact Start -->
                        <div class="form-group text-center mt-4">
                            <a href="https://t.me/Bussines_789" target="_blank" class="btn btn--info w-100">
                                <i class="fab fa-telegram-plane mr-2"></i> Contact via Telegram
                            </a>
                        </div>
                        <!-- Telegram Contact End -->

                    </form>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- Optional Floating Telegram Button -->
<a href="https://t.me/koda_tech" target="_blank" 
   style="position: fixed; bottom: 20px; right: 20px; background: #0088cc; color: #fff; padding: 12px 15px; border-radius: 50%; font-size: 20px; z-index: 999;">
    <i class="fab fa-telegram-plane"></i>
</a>

<script>
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', function() {
            const input = document.querySelector(this.dataset.target);
            if (input.type === 'password') {
                input.type = 'text';
                this.innerHTML = '<i class="fa fa-eye"></i>';
            } else {
                input.type = 'password';
                this.innerHTML = '<i class="fa fa-eye-slash"></i>';
            }
        });
    });
</script>

@endsection