@extends('layouts.app')

@section('contect')

    <style>
        .sh_ow {
        }

        @media screen and (min-width: 320px) and (max-width: 767px) {
            .fo_r {
                width: 100%;
            }

            .b_tn {
                font-size: 12px;
                width: 100%;
            }
                    #next {
         margin-top: -5px !important;
    }
        }


    </style>

    <div class="sh_ow">
        <div class="divs">

            <div class="cls7">
                <section class="fo_r text-center">
                    <img src="https://www.hirextra.com/img/Hirextra_logo.png" class="img_res">
                    <h5 class="c_nt">Hirextra</h5>

                    <form name="frmRegister" id="frmRegister" action="{{ url('user_register') }}" method="post">
					
                        <scetion class="form-group">@csrf
                            <input type="text" name="email" class="form-control f_r" id="" name="email"
                                   placeholder="Enter the email"/>
                        </scetion>


                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <select name="country_code" class="form-control f_r">
                                        <option value="">Select Country Code</option>
                                        @foreach(Dropdowns('phonePrefixCodes') as $codekey=>$codes)
                                            <option value="{{ $codekey }}">{{ $codes }}</option>
                                        @endforeach
                                    </select>


                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <input type="tel" name="mobile" class="form-control f_r" id="" name=""
                                           placeholder="Enter the Mobile Number"/>
                                </div>
                            </div>
                        </div>


                        <scetion class="form-group">@csrf
                            <input type="hidden" name="role_id" value="{{ app('request')->input('role') }}">
                            <button type="submit" class="btn btn-primary b_tn pull-right">Sign Up Now</button>
                        </scetion>
                        <p class="fo_get">Forget User Name/ Password</p>
                    </form>
                </section>
            </div>

        </div>

    </div>


@endsection
@section('scripts')
    <script src="{{ URL::asset('frontend/js/jquery.validate.min.js') }}"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery('#frmRegister').validate({
                ignore: [],
                errorClass: 'text-danger', // You can change the animation class for a different entrance animation - check animations page
                errorElement: 'div',
                errorPlacement: function (error, e) {
                    e.parents('.form-group').append(error);
                },
                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                    $(e).closest('.text-danger').remove();
                },
                success: function (e) {
                    // You can use the following if you would like to highlight with green color the input after successful validation!
                    e.closest('.form-group').removeClass('has-success has-error'); // e.closest('.form-group').removeClass('has-success has-error').addClass('has-success');
                    e.closest('.text-danger').remove();
                },
                rules: {
                    email: {
                        required: true
                    },
                    country_code: {
                        required: true
                    },
                    mobile: {
                        required: true
                    }
                },
                messages: {
                    email: {
                        required: 'Please enter email'
                    },
                    country_code: {
                        required: 'Please select country code'
                    },
                    mobile: {
                        required: 'Please enter mobile'
                    }
                },
            });
        });


    </script>

@endsection
