<link rel="stylesheet" href="<?php echo base_url();?>files/assets/css/style.jw11.css">
<style>
    body {
        background: url("<?php echo base_url();?>files/assets/images/thumb/log-reg-bg-wood.jpg");
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
    }
    .form-control {
        background: #f5f5f5 !important;
    }
    .label {
        color: #BEDD5C;
    }
    @media screen and (max-width: 576px) {
        body {
            background: url("<?php echo base_url();?>files/assets/images/thumb/log-reg-bg-mobile.png");
            background-position: top;
            background-size: cover;
            background-attachment: fixed;
        }
        input.form-control {
            background: white !important;
        }
    }
    .legal-bar {
        position: absolute;
        bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        background: url('<?= base_url() ?>files/assets/images/thumb/bottom-legal-bar.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
</style>
<div class="overlay"></div>
<a href="javascript::void(0)" class="scrollToTop"><i class="las la-chevron-up"></i></a>


<div class="login-section register-section">
    <div class="login-thumb">
        <!-- <img src="<?php echo base_url();?>files/assets/images/thumb/log-reg-bg.png" alt="thumb" class="object-point-none"> -->
    </div>
    
    <div class="container font-poppins">
        <div class="flex justify-center items-center" style="margin-top: 20px;">
            <a href="<?php echo base_url();?>" class="login-logo register-logo d-none d-lg-block"><img src="<?php echo base_url();?>files/assets/images/thumb/log-reg-logo.png" alt="thumb"></a>
            <a href="<?php echo base_url();?>" class="login-logo-two d-lg-none d-block text-center"><img src="<?php echo base_url();?>files/assets/images/thumb/log-reg-logo.png" alt="thumb"></a>
        </div>

        <div class="login-area d-flex justify-content-center align-items-center">
            <div class="login-wrapper border-none">
                <?php $this->load->view('template/message.php');?>

                <!-- <form x-data="{ email: '', password1: '', confirmPassword: '', check: false }" 
                        class="login-form" method="post" action=""> -->
                  <form class="login-form" method="post" action="">

                 

                    <div class="form-group mb-2 mb-xxl-3">
                        <label class="label" style="color: white;" for="">Email</label>
                       <!--  <input x-model="email" type="text" class="form-control form--control"
                                placeholder="Enter your email" autocomplete="off" required name="useremail"> -->
                        <input type="email" name="useremail" autocomplete="off"  required class="form-control form--control focus-register useremail rounded" placeholder="Enter your email">
                    </div>
                    <div class="form-group mb-2 mb-xxl-3">
                        <label class="label" style="color: white;" for="">Password</label>
                        <input type="Password" name="userpassword" autocomplete="off" required class="form-control form--control focus-register userpassword rounded" placeholder="Enter your password">

                        <!-- <input x-model="password1" type="Password" class="form-control form--control"
                                placeholder="Enter your password" autocomplete="off" name="userpassword" required> -->
                    </div>
                    <div class="form-group mb-1 mb-xxl-2">
                        <label class="label" style="color: white;" for="">Confirm Password</label>
                        <input type="Password" name="usercpassword" autocomplete="off" required class="form-control form--control focus-register usercpassword rounded" placeholder="Re-enter your password">

                        <!-- <input x-model="confirmPassword" type="Password" class="form-control form--control"
                                placeholder="Re-enter your password" autocomplete="off" name="usercpassword" required> -->

                    </div>

                     <div style="display: none;" id="passwordMessage">
                            <p style="color: red">Your passwords do not match</p>
                    </div>
                    <div class="form-group pb--35">
                        <div class="checkbox-wrapper d-flex flex-wrap">
                            <!-- <input  x-model="check" type="checkbox" required checked name="accept" value="accept" class="form-check-input" id="terms-text"> -->
                            <input type="checkbox" required checked name="accept" value="accept" class="form-check-input focus-register termstext -translate-y-0.5" id="terms-text">
                            
                            <label for="terms-text" class="terms-content d-block" style="margin-top: 3px; color: #fff;">By signing up you agree to our <a href="<?php echo base_url('privacy-policy');?>" class="text-body" style="color: #BEDD5C !important;">Privacy Policy.<span style="color: #BEDD5C">*</span></a></label>
                        </div>
                    </div>
                    <div class="form-group">

                         <button class="cmn--btn login-btn w-100 btn--lg btn-register btn-register-show btn-effect" type="submit" style="background-color: #BEDD5C; color: black; display: none;" name="reg_btn" value="ok">Register</button>

                            <button disabled class="cmn--btn login-btn w-100 btn--lg btn-register btn-register-hide cursor-no-drop btn-effect" style="background: #BEDD5C;"  type="submit">Register</button>


                        <!-- <button class="cmn--btn login-btn w-100 btn--lg btn-register" name="reg_btn" value="ok">Register</button> -->
                        <!-- <button class="cmn--btn login-btn w-100 btn--lg btn-register" type="submit">Register</button> -->
                    </div>
                </form>
                <div class="pt-3 text-center fs-sm-12">
                    <p style="font-size: 16px; color: #fff !important;">Have an Account? <a href="<?php echo base_url('login');?>" style="color: #BEDD5C;"><b>Login</b></a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="legal-bar"></div>

<script src="<?php echo base_url();?>files/assets/js/lib/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
    $('body').delegate('.focus-register', 'keyup keydown blur change', function() {
         console.log('hi');
         var useremail = $('.useremail').val();
         var userpassword = $('.userpassword').val();
         var usercpassword = $('.usercpassword').val();
         var check = 1;


         if($("#terms-text").prop('checked') == true)
         {
            check = 1;  
         }
         else
         {
            check = 0;
         }


         if(useremail == '')
         {
            check = 0;
         }

         if(userpassword == '')
         {
            check = 0;
         }

         if(usercpassword == '')
         {
            check = 0;
         }

         if(userpassword != '' && usercpassword != '' && useremail != '')
         {
            if(userpassword != usercpassword)  
            {
                $('#passwordMessage').show();
                check = 0;
            }
            else
            {
                $('#passwordMessage').hide();

                if($("#terms-text").prop('checked') == true)
                {
                    check = 1;
                }
                else
                {
                    check = 0;
                }
            }
         }

         if(check == 1)
         {
            $('.btn-register-hide').hide();
            $('.btn-register-show').show();            
         }
         else
         {
            $('.btn-register-show').hide();
            $('.btn-register-hide').show();
         }
    });


    $('body').delegate('.btn-register-show', 'click', function() {
        $('.btn-register-show').html('Processing...');
        // $('.btn-register-show').prop("disabled", true);     
        $('.btn-register-show').addClass("disabled-color"); 
        // $('.btn-register-show').prop('disabled', true);
    });
    

</script>
