@extends('frontend.master')
<link rel="stylesheet" href="{{ asset('assets/frontend/css/recent_projects.css') }}">
<link rel="stylesheet" href="{{ asset('assets/frontend/css/blog_archive.css') }}">
<link rel="stylesheet" href="{{ asset('assets/frontend/css/blog_single.css') }}">
@section('content')
    <section id="loginPart">
        <div class="container">

            <div class="row">
                <div class="col-md-2">
                    <div class="login_signup_left">
                        <div class="left_login">
                            <a href="{{route('home')}}"><img class="img-responsive" src="{{ asset('assets/frontend/images/BICM-Logo.png') }}" alt="" /></a>
                            <h3 class="desk">Bangladesh Institute of Capital Market (BICM)</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-10 login_signup_right">
                    <div class="row">
                        <div class="col">
                            <h3>Sign Up</h3>
                            <p>You have to create account first before applying to a course.</p>
                            <p>Already have an account?<a href="{{route('studentLogin')}}">Sign In</a></p>
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                    <form id="signupForm2" class="row custom form needs-validation"  name="signupForm" method="POST" action="{{ route('studentNew') }}" enctype="multipart/form-data" novalidate>
                        @csrf
                        <div class="col-md-6">
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="First name *" name="first_name">
                                </div>
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="Last name *" name="last_name">
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="বাংলায় নাম *" name="bn_name">
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="Father's Name (পিতার নাম) *" name="father_name">
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="Mother's Name (মাতার নাম) *" name="mother_name">
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="date" required class="form-control" placeholder="Date of Birth *" name="dob">
                                </div>
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="Nationality *" name="nationality">
                                </div>
                                <div class="col">
                                    <select class="form-control" id="gender" name="gender" required>
                                        <Option value="">Select Gender</Option>
                                        <option value="1">Male (পুরুষ)</option>
                                        <option value="2">Female (মহিলা)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="NID Number *" name="nid_birth">
                                </div>
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="Mobile Number *" name="contact_number">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="Present Address (বর্তমান ঠিকানা) *" name="present_address">
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="Postcode (পোস্টকোড ) *" name="post_code">
                                </div>
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="City (শহর) *" name="city">
                                </div>
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="Country (দেশ) *" name="country">
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="text" required class="form-control" placeholder="Permanent Address (স্থায়ী ঠিকানা) *" name="permanent_address">
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="email" id="email" required class="form-control" placeholder="E-mail *" name="email">
                                </div>
                                <div class="col">
                                    <input type="email" required class="form-control" placeholder="Confirm E-mail *" name="email_confirmation">
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="col">
                                    <input type="password" id="password" required class="form-control" placeholder="Password *" name="password">
                                </div>
                                <div class="col">
                                    <input type="password" required class="form-control" placeholder="Confirm Password *" name="password_confirmation">
                                </div>
                            </div>
                            <div class="row form-group mb-3">
                                <div class="d-grid">
                                    
                                    <button class="g-recaptcha btn btn-primary" type="submit">
                                Signup
                            </button>
                                </div>
                            </div>
                        </div>
                        
                        
                            
                            
                            
                            

                    </form>
                </div>

            </div>
        </div>
    </section>
    @endsection
    @section('customScript')
    <script src="{{ asset('assets/plugins/jqueryvalidate/jquery.validate.min.js') }}"></script>
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>


    
    
<script>
        $(document).ready(function () {
            var captchaVerified = false; // This flag will track CAPTCHA verification status

    // Callback function for reCAPTCHA
    window.recaptchaCallback = function () {
        captchaVerified = true; // CAPTCHA completed successfully
    };
    $("#signupForm2").validate({
        rules: {
            email: {
                required: true,
                email: true,
            },
            email_confirmation: {
                required: true,
                email: true,
                equalTo: "#email"
            },
            password: {
                required: true,
                minlength: 6
            },
            password_confirmation: {
                required: true,
                minlength: 6,
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long"
            },
            password_confirmation: {
                required: "Please provide same password",
                minlength: "Your password must be at least 6 characters long",
                equalTo: "Please enter the same password as above"
            }
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".col").append(error);
            }
        },
        // errorPlacement: function (error, element) {
        //     error.addClass("invalid-feedback"); // Bootstrap's error class
        //     element.closest(".form-group").append(error);
        // },
        highlight: function (element) {
            $(element).addClass("is-invalid").removeClass("is-valid");
        },
        unhighlight: function (element) {
            $(element).addClass("is-valid").removeClass("is-invalid");
        },
        submitHandler: function (form) {
            // Add 'was-validated' class to trigger Bootstrap validation
            form.classList.add('was-validated');
            event.preventDefault();

            // Trigger reCAPTCHA v3 verification
            grecaptcha.ready(function () {
                grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', { action: 'submit' }).then(function (token) {
                    // Add the token to the form as a hidden input field
                    $("<input>").attr({
                        type: "hidden",
                        name: "g-recaptcha-response",
                        value: token
                    }).appendTo(form);

                    // Submit the form to the server (AJAX or normal submission)
                    //alert('submitting');
                    form.submit();
                }).catch(function (error) {
                    alert("reCAPTCHA verification failed. Please try again.");
                });
            });
            //form.submit(); // Perform the default form submission
        }
    });
});    
</script>
@endsection