@extends('layouts.app')
@section('content')
<section class="main-sec member-sec">
    <div class="container">
        <div class="signup-wrapper">
            <div class="sec-heading">
                <h3>Create your account password</h3>
            </div>
            <div class="email-form-box create-pass-box">
                <form id="password-form" action="{{ route('member.event.user.store_password',[$user->id])}}" method="post">
                    @csrf
                    <div class="form-group">
                        <div class="formfield">
                            <input type="password" name="password" class="form-control @error('password') invalid-password @enderror" id="password">
                            <span class="form-icon">
                                <img src="{{ asset('images/eye-icon.svg')}}" id="toggle-icon" alt="eye-icon">
                            </span>
                        </div>
                    </div>
                    <p class="create-pass-para">Your password must be at least 8 characters long, and contain at least one digit and one non-digit character</p>
                    <div class="privacy-notice-box">
                        <div class="privacy-notice-box-inner">
                            <img src=" {{asset('images/clipboard-img.svg') }}" alt="clipboard">
                            <h4>Accept RAF Leaderboard's Terms of Use and Privacy Notice</h4>
                            <p>By selecting “I Agree” below, I have reviewed & agree to the <a href="#">Terms of Use</a> and acknowledge the <a href="#">Privacy Notice.</a> I confirm that I am at least 18 years of age.</p>
                            <div class="form-field checkbox-field">
                                <input type="checkbox" name="agree" class="@error('agree')invalid-password @enderror" id="agreeCheck">
                                <label for="agree-check">I Agree</label>
                            </div>
                        </div>
                    </div>
                    <button class="button primary-btn full-btn">Next <div
                        class="spinner-border d-none" role="status">
                        <span class="sr-only">Loading...</span>
                    </div></button>
                </form> 
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="discount-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body modal-custm-body">
                <div class="comman-modal-box">
                    <img src="{{ asset('images/otp-img.svg') }}" alt="">
                    <h3>Unfortunately</h3>
                    <p>That password does not appear to meet the password security requirements of having at least 8 characters, one digit and one non-digit character. Please double check the and try again</p>
                    <a href="#" class="button primary-btn full-btn" data-bs-dismiss="modal" aria-label="Close">TRY AGAIN</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="agreement" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body modal-custm-body">
                <div class="comman-modal-box">
                    <img src="{{ asset('images/otp-img.svg') }}" alt="">
                    <h3>Unfortunately</h3>
                    <p>You must agree to the terms and conditions.</p>
                    <a href="#" class="button primary-btn full-btn" data-bs-dismiss="modal" aria-label="Close">TRY AGAIN</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    jQuery(document).ready(function($) {
        // Check if the password field has the class indicating an error
        let passwordError = $('#password').hasClass('invalid-password'); // Adjust class as needed
        if (passwordError) {
            // Show the modal if there is a password error
            $('#discount-modal').modal('show');
        }
        $('#password-form').on('submit', function(event) {
            //show loader
            jQuery(this).find('button').children('.spinner-border').removeClass('d-none')
            jQuery(this).find('button').attr('disabled', true)

            // Get the values of the password field and checkbox
            let passwordVal = $('#password').val().trim();
            let agree = $('#agreeCheck').is(':checked');
            // Initialize a flag for form validity
            let isValid = true;
            // Clear previous error styles
            $('#password').removeClass('invalid-password');

            // Check if the password field is empty
            if (passwordVal === '') {
                $('#password').addClass('invalid-password'); // Add error class
                isValid = false;
            }
            // Check if the checkbox is not checked
            if (!agree) {
                // Optionally, show an alert or error message
                // alert('You must agree to the terms and conditions.');
                $('#agreement').modal('show');
                isValid = false;
            }

            // Prevent form submission if validation fails
            if (!isValid) {
                event.preventDefault(); // Prevent the form from being submitted
                 //show loader
                jQuery(this).find('button').children('.spinner-border').addClass('d-none')
                jQuery(this).find('button').attr('disabled', false)
            }
        });

        //view and hide password
        $('#toggle-icon').on('click', function() {
            var $password = $('#password');
            var isPasswordVisible = $password.attr('type') === 'text';
            // Toggle input type
            $password.attr('type', isPasswordVisible ? 'password' : 'text');
            // Toggle icon image
            var newIconSrc = isPasswordVisible ?
                `{{ asset('images/eye-icon.svg') }}` :
                `{{ asset('images/eye-close-icon.svg') }}`;
            $('#toggle-icon').attr('src', newIconSrc);
        });
    });
</script>
@endpush