@extends('frontend.layouts.master')
@section('css')


  
    


    <style>
    
    
    label {
    font-family: 'Hind Siliguri', sans-serif !important;
}
 
    input {
    font-family: 'Hind Siliguri', sans-serif !important;
}

body {
    font-family: 'Hind Siliguri', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: 'Hind Siliguri', sans-serif !important;
}

p {
    font-family: "Hind Siliguri", sans-serif !important;
}
    
    
     @media (max-width: 768px) {
    .g-recaptcha {
        transform: scale(0.9) !important; /* মোবাইল ডিভাইসের জন্য ক্যাপচা বক্স ছোট করা */
        transform-origin: 0 0; /* সঠিক অবস্থান ঠিক রাখার জন্য */
    }
}
    
     @media (max-width: 768px) {
    .fa-unlock {
        margin: 0px 215px -20px 0px !important;
    }
}

.custom-link:hover {
    text-decoration: underline;
}

.text-dark:hover {
    
    text-decoration: underline !important; /* Underline on hover */
}

    
     .inquire_form {
    width: 100%; /* Ensure it takes full width of parent */
    max-width: 500px; /* Set the maximum width */
    margin:0 auto; 
}
   
    
    
        .home-title {
            margin-bottom: 20px;
        }
        #captcha_code_area {
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            /* color: #cc0000; */
            border: solid 1px #f31313;
            padding: 6px 34px;
            margin-top: 30px;
            opacity: 0.7;
            letter-spacing: 5px;
            border-radius: 10px;
        }
    </style>
    @php
    $website = DB::table('websites')
        ->latest()
        ->first();
    $p_categorys = DB::table('categories')
        ->latest()
        ->get();
    @endphp
@endsection

@section('front-content')
    <section class="contact">
        <div class="container">
            <div class="row mt-5">
                <div class="col-12" data-aos="fade-right" data-aos-duration="1000" data-aos-offset="100">
                    <div>
                        <h2 class="global_subtitle">Welcome to {{ site_info()->title }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="contact_inner_section position-relative">
        <div class="container">
            <div class="row pt-sm-3 pt-lg-5">
                <div class="col-12 col-md-6">
                    <div class="details_inner d-flex">
                        <div class="details_info">
                            <h5 style="font-size: 20px; font-family: bold;">Login Account</h5>
                            <p style="font-size: 22px; font-family: regular;">⇀ {{ site_info()->title }}, the go-to website for remote job opportunities that can help you earn money quickly and easily. we have something for everyone.<br>Small Gigs. Big Results</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="inquire_form">
                        <div class="inquire_header">
                            <h2>{{ about_us()->login_form_title }}</h2>
                        </div>
                        <form action="{{ route('login') }}" id="contact-form" method="post">
                            @csrf
                            @if(session()->get('login_erro') != '')
                                <div class="form_field">
                                    <div class="alert alert-danger" role="alert">{{ session()->get('login_erro') }}</div>
                                </div>
                            @endif

                            @if(session()->get('mail_sent') != '')
                                <div class="form_field">
                                    <div class="alert alert-success" role="alert">{{ session()->get('mail_sent') }}</div>
                                </div>
                            @endif
                            <div class="form_field">
                                <label for="login_email">Email Address/Phone</label>
                                <input type="text" placeholder="Email Address" name="phone" id="login_email" />
                                <span class="my_error" style="display: none; color: red;">Please Enter Valid Email</span>

                                <i class="fas fa-exclamation-circle failure-icon"></i>
                                <i class="far fa-check-circle success-icon"></i>

                                <div class="error"></div>
                            </div>





<div class="form_field" style="position: relative;">
    <label for="login_password">Password</label>
    <input type="password" placeholder="Password" name="password" id="login_password" style="padding-right: 30px; height: 40px;" />
    <span class="my_error" style="display: none; color: red;">Please Enter 3 digit</span>

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>
    <i class="far fa-eye" id="togglePassword" style="position: absolute; right: 10px; top: 58%; transform: translateY(-50%); cursor: pointer; font-size: 17px;"></i>
    <div class="error"></div>
</div>


                     
               
                            
                            
                            
                            
                            @if ($errors->has('g-recaptcha-response'))
    <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
@endif


                            @if(site_info()->captcha_verify_active == 1)
                                <div class="form-group mb-3">
                                    <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                                </div>
                            @endif

                            <div class="form_field" style="display:none;">
                                <div class="captcha">
                                    <span id="captcha_code_area"></span>
                                    <input type="hidden" id="captcha_code">
                                    <button type="button" class="btn btn-sm btn-danger reload" id="reload">
                                        &#x21bb;
                                    </button>
                                </div>
                                <input type="text" placeholder="Enter Code" id="entered_captcha_code" onkeyup="changeCaptchaCode()" />
                                <small class="text-danger" id="captcha-error"></small>
                            </div>


                            <div class="form_field">
    <div class="remember-forgot-container" style="display: flex; justify-content: space-between; align-items: center;">
        <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
        <a href="{{ route('user-foreget-password') }}" class="text-dark">
            <small>Forgot password?</small>
        </a>
    </div>
</div>






<div class="send_btn">
    <button type="submit" name="login_do" id="login_do" class="btn btn-success" style="display: inline-flex; align-items: center; justify-content: center; height: 45px; padding: 10px 20px; font-size: 18px; width: 100%;">
        <i class="fas fa-unlock" style="margin: 0px 300px -20px 0px;"></i>
        <span>Login Your Account</span>
    </button>
</div>
<div class="row mt-3">
    <div class="col-12 text-center">
        <p class="mt-3">If you don't have an account? <a href="{{ route('register') }}" style="color: #28a745; text-decoration: underline;"><b>Create an account</b></a></p>
    </div>
</div>







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

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        $(window).on('load', function() {
            $.ajax({
                type: 'GET',
                url: 'reload-captcha',
                success: function(data) {
                    $('.captcha span').html(data.captcha);
                    $('#captcha_code').val(data.captcha);
                    $('#captcha-error').html('');
                    $('#entered_captcha_code').val('');
                }
            });
        });
        $('#reload').click(function() {
            $.ajax({
                type: 'GET',
                url: 'reload-captcha',
                success: function(data) {
                    $('.captcha span').html(data.captcha);
                    $('#captcha_code').val(data.captcha);
                    $('#captcha-error').html('');
                    $('#login_do').attr('disabled', true);
                    $('#entered_captcha_code').val('');
                }
            });
        });

        function changeCaptchaCode() {
            var captcha_code = $('#captcha_code').val();
            var code = $('#entered_captcha_code').val();

            if (captcha_code === code) {
                $('#captcha-error').html('');
                $('#login_do').attr('disabled', false);
            } else {
                $('#captcha-error').html('Captcha not matched! Try again!');
                $('#login_do').attr('disabled', true);
            }
        }
    </script>
    
    
    <script>
 const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#login_password');

togglePassword.addEventListener('click', function () {
    // password field এর টাইপ পরিবর্তন করা হচ্ছে
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    
    // আইকন পরিবর্তন করা হচ্ছে
    this.classList.toggle('fa-eye-slash');
});

        
    </script>
  
@endsection



    
