@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.createAccount") }}" class="verify-gcaptcha">
                        @csrf

                        <h2 class="account-form__title">@lang('Become Merchant')</h2>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="floating-label">@lang('Merchant Name')</label>
                                <input type="text" name="name" value="{{ old('name') }}" class="form--control" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="floating-label">@lang('E-Mail Address')</label>
                                    <input type="email" class="form--control checkUser" name="email" value="{{ old("email") }}" required>
                                </div>
                            </div>

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

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

                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="floating-label">@lang('Account Type')</label>
                                <select name="account_type" class="form--control" required>
                                    <option value="" disabled selected>@lang('Select currency')</option>
                                    <option value="bdt" {{ old('account_type') == 'bdt' ? 'selected' : '' }}>BDT</option>
                                    <option value="inr" {{ old('account_type') == 'inr' ? 'selected' : '' }}>INR</option>
                                </select>
                            </div>
                        </div>

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

                        <div class="form-group">        
                            <button type="submit" class="btn btn--base w-100">@lang('Register')</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.auth") }}" class="btn btn--base outline w-100">@lang('Login')</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>

<!-- 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