@extends('front.layout.app')
@section('content')


<style>
header .navbar {
    background: #1a1a1a !important;
    padding-top: 10px;
}
.indi-banner {

    /* background-image: url(./images/artboard1.png); */
    background-image:url('{{ URL::asset("assets/front/images/artboard1.png") }}');
}

.input-box {
    position: relative;
}


i {
    position: absolute;
    top: 57%;
    right: 20px;
    transform: translateY(-50%);
    cursor: pointer;
}

</style>
<main>

    <section class="indi-banner">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="indi-ban-head">Sign Up</h1>
                </div>
                <div class="col-12">
                    <p class="indi-ban-para">Overall measure of economic performance.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="log_in_section_banner logsign services22">
        <div class="container">
            <div class="row justify-content-center">

                <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xxl-10">
                    <div class="row row_section_bg">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xxl-6 padding_col_div panel">
                            <div class="h-100 sign_up_img_container aos-init aos-animate" data-aos="fade-right"
                                data-aos-delay="0" data-aos-duration="2000">
                                <h1 class="state_heading">Lorem Ipsum is <br>simply dummy.</h1>
                                <p class="react_related_para">
                                    Create a free account and get all related
                                    features. No credit card needed.
                                </p>
                                <div>
                                    <div class="img_section_flex">
                                        <img src="{{ URL::asset('assets/front/images/img1.png') }}" class="img_client" alt="">
                                        <img src="{{ URL::asset('assets/front/images/img2.png') }}" class="img_client" alt="">
                                        <img src="{{ URL::asset('assets/front/images/img3.png') }}" class="img_client" alt="">
                                        <img src="{{ URL::asset('assets/front/images/img4.png') }}" class="img_client" alt="">
                                        <img src="{{ URL::asset('assets/front/images/img5.png') }}" class="img_client" alt="">
                                        <img src="{{ URL::asset('assets/front/images/img6.png') }}" class="img_client" alt="">
                                        <img src="{{ URL::asset('assets/front/images/img7.png') }}" class="img_client" alt="">
                                        <img src="{ {URL::asset('assets/front/images/img8.png') }}" class="img_client" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xxl-6 padding_col_div panel">
                            <div class="h-100 main_bg_logo_indig0_about aos-init aos-animate" data-aos="fade-left"
                                data-aos-delay="0" data-aos-duration="2000">
                                <div>
                                    <img src="{{ URL::asset('assets/front/images/logo.png') }}" class="indigi_logo_login_section" alt="">
                                </div>
                                <div>
                                    <h6 class="log_in_heading_contact">Sign up</h6>

                                </div>

                                <form id="myForm" action="{{ route('userRegister') }}" method="post">
                                    @csrf
                                    <div class="input_email_flex">
                                        <label for="" class="email_label_login">Name*</label>
                                        <input type="text" placeholder="Enter your Name" name="name" class="email_input_field" required>
                                    </div>
    
                                    <div class="input_email_flex">
                                        <label for="" class="email_label_login">E-mail*</label>
                                        <input type="email" placeholder="Enter your E-mail" name="email" class="email_input_field" required>
                                        <x-input-error :messages="$errors->get('email')" class="mt-2" />
                                    </div>
    
    
                                    <div class="input_email_flex">
                                        <label for="" class="email_label_login">Password*</label>
                                        <div class="input-box">
                                            <input type="password" placeholder="Create a password" name="password"  id="myInput" class="email_input_field" required>
                                            <i class="fa-sharp fa-solid fa-eye" onclick="togglePasswordVisibility()" id="mrx_eye_show" style="display: none;"></i>
                                            <i class="fa-solid fa-eye-slash" onclick="togglePasswordVisibility()" id="mrx_eye_hide" style="display: block;"></i>
                                        </div>
                                        <p class="atleast_para_password text-danger"></p>
                                    </div>
                                    
                                    <div class="input_email_flex">
                                        <label for="" class="email_label_login">Confirm Password*</label>
                                        <div class="input-box">
                                            <input type="password" placeholder="Create a password" name="confirm_password"  id="confirmInput" class="email_input_field" required>
                                            <i class="fa-sharp fa-solid fa-eye" onclick="togglePasswordVisibility1()" id="mrx_eye_show1" style="display: none;"></i>
                                            <i class="fa-solid fa-eye-slash" onclick="togglePasswordVisibility1()" id="mrx_eye_hide1" style="display: block;"></i>
                                        </div>
                                        <p id="error-message" style="color: red; display: none;">Passwords and confirm password must match.</p>
                                    </div>
    
                                    <div>
                                        <button class="sign_up_btn">Create Account</button>
                                    </div>
                                </form>
                            

                                <div>
                                    <p class="don_t_have_account">Already have an account? <a href="{{ route('login') }}"><strong
                                                class="strong_sign_up">Login</strong></a></p>
                                </div>
                            </div>


                        </div>


                    </div>
                </div>

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

@endsection

@section('script')

<script>
    
    function togglePasswordVisibility() {
        var passwordInput = document.getElementById("myInput");
        var eyeShow = document.getElementById("mrx_eye_show");
        var eyeHide = document.getElementById("mrx_eye_hide");
    
        // Toggle the type attribute
        if (passwordInput.type === "password") {
            passwordInput.type = "text";
            eyeShow.style.display = "block"; // Show the open eye icon
            eyeHide.style.display = "none"; // Hide the closed eye icon
        } else {
            passwordInput.type = "password";
            eyeShow.style.display = "none"; // Hide the open eye icon
            eyeHide.style.display = "block"; // Show the closed eye icon
        }
    }
       function togglePasswordVisibility1() {
        var passwordInput = document.getElementById("confirmInput");
        var eyeShow = document.getElementById("mrx_eye_show1");
        var eyeHide = document.getElementById("mrx_eye_hide1");
    
        // Toggle the type attribute
        if (passwordInput.type === "password") {
            passwordInput.type = "text";
            eyeShow.style.display = "block"; // Show the open eye icon
            eyeHide.style.display = "none"; // Hide the closed eye icon
        } else {
            passwordInput.type = "password";
            eyeShow.style.display = "none"; // Hide the open eye icon
            eyeHide.style.display = "block"; // Show the closed eye icon
        }
    }

    document.getElementById('myForm').addEventListener('submit', function(event) {
        var password = document.getElementById('password').value;
        var confirmPassword = document.getElementById('confirmInput').value;
        var errorMessage = document.getElementById('error-message');
    
        // Check if passwords match
        if (password !== confirmPassword) {
            // Prevent form submission
            event.preventDefault();
            // Show error message
            errorMessage.style.display = 'block';
        } else {
            // Hide error message if passwords match and form is submitted
            errorMessage.style.display = 'none';
        }
        
        
    });
    
    
    

</script>


@endsection