@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-7">
                    <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-5">
                    <div class="row">
                        <!-- Success Error message from backend-->
                        @include('frontend.include.backendAlert')
                    </div>
                    <div class="row login_signup_right">
                        <div class="col-md-12 mb-3">
                        <h3>Sign In</h3>
                        <p>Don't have an account? <a href="{{url('student-signUp')}}"><strong>Sign Up</strong></a></p>
                        @if(session('error'))
                            <div style="color: red;">{{ session('error') }}</div>
                        @endif
                        <form name="loginForm" id="loginForm"  class="custom form needs-validation" method="POST" action="{{ route('checkStudentLogin') }}" enctype="multipart/form-data"  novalidate>
                            @csrf
                            <div class="form-group">
                                <label class="form-label" for="exampleInputEmail1">Email</label>
                                <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Email" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="exampleInputPassword1">Password</label>
                                <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required>
                            </div>
                        </div>
                        <div class="d-grid mb-3">
                            <button class="g-recaptcha btn btn-primary" type="submit">
                                Login
                            </button>
                        </div>
                            <div class="col-md-12 userName_Password_remember">
                                <label class="login_check"><input name="remember" aria-label="remember" type="checkbox" value="" checked=""><span class="checkmark"></span> Remember Me</label>
                                <p><a href="{{route('studentForgotPassword')}}">Forgot your password?</a></p>
                            </div>
                        </form>
                    </div>
                </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 () {
$("#loginForm").validate({
    rules: {
        email: {
            required: true,
            email: true,
        },
        password: {
            required: true,
            minlength: 6
        },
    },
    messages: {
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 6 characters long"
        },
    },
    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(".form-group").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