@extends('front.layouts.main')

@section('title') Consultant Registration - Step 3 @endsection

@section('content')

<main class="consultant-steps-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="main-content">

                    <form class="form-steps" id="frmStep3" method="post"
                        action="{{ route('consultant.storeRegister3') }}">
                        @csrf

                        <ul class="steps d-flex justify-content-center">
                            <li class="text-center active" id="personal-details"><span
                                    class="bold small-font-size">1</span>
                                <p class="xs-font-size">Personal Details</p>
                            </li>
                            <li class="text-center active" id="consultant-profile"><span
                                    class="bold small-font-size">2</span>
                                <p class="xs-font-size">Consultant Profile</p>
                            </li>
                            <li class="text-center active" id="payment"><span class="bold small-font-size">3</span>
                                <p class="xs-font-size">Payment</p>
                            </li>
                        </ul>


                        <fieldset class="text-center">

                            @if(!$activePlan)
                            @include ('front.modules.consultant.register.sections.plans')
                            @endif

                            @include ('front.modules.consultant.register.sections.features')

                            @if(!$activePlan)
                            <div class="form-card text-left">
                                <div class="form-group">
                                    <div id="currentStatus" class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="agreecheck"
                                            name="agreecheck" value="1">
                                        <label class="custom-control-label control-label" for="agreecheck">I have read
                                            and agree to the <a target="_blank"
                                                href="{{route('consultant.communityGuidelines')}}"><b>Terms and
                                                    Conditions</b></a>.</label>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <a href="{{ route('consultant.register2') }}"
                                class="action-button btn btn-transparent m-1">Previous</a>

                            @if(!$activePlan)
                            <input type="submit" name="next" class="submit action-button btn btn-em m-1"
                                value="Pay & Submit Application" />
                            @else
                            <input type="submit" name="next" class="submit action-button btn btn-em m-1" value="Save" />
                            @endif
                        </fieldset>

                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageJs')
<script>
    $(document).ready(function() {

        @if(Session::has('message'))
        Snackbar.show({
            pos: 'bottom-right',
            text: '{{ Session::get("message") }}',
            actionText: 'Okay'
        });
        @endif

        @if(Request::has('message'))
        Snackbar.show({
            pos: 'bottom-right',
            text: '{{ Request::get("message") }}',
            actionText: 'Okay'
        });
        @endif

        $('.submit').click(function() {
            if ($('#frmStep3').valid()) {
                $(".submit").attr("disabled", true).val("Please Wait...");
                $('#frmStep3').submit();
            }
        });

        $('#frmStep3').validate({
            rules: {
                plan: {
                    required: true
                },
                agreecheck : {
                    required : true
                }
            },
            messages: {
                plan: 'Plan is required',
                agreecheck : 'You must agree to Terms and Conditions'
            },
            
            ignore: [],
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            errorPlacement: function(error, element) {
                if (element.attr('name') == 'plan') {
                    error.insertAfter(element.parents('.form-group')[0]);
                } else {
                    error.insertAfter(element.parents('.custom-control')[0]);
                }
            },
            invalidHandler: function(event, validator) {
                var offset = $(validator.errorList[0].element).offset().top;
                $('html, body').animate({
                    scrollTop: offset - 100
                }, 100);
            }
        });
    })
</script>
@endpush