@include('forms/elements/header_start')


<style>
    label{
        font-size: 22px;
    }
</style>
@include('auth/elements/header_end')

<!-- Begin page -->
<div class="accountbg"></div>
<div class="wrapper-page">
    <div class="card">
        <div class="card-body">

            <div class="p-3">
                <h4 class="text-muted font-18 m-b-5 text-center">Welcome</h4>
                <p class="text-muted text-center">Sign up to continue to H3A</p>

                <form method="POST" action="{{ route('patient.create') }}">
                    @csrf

                    <div class="form-group row">
                        <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('First Name') }}</label>

                        <div class="col-md-6">
                            <input id="first_name" type="text" class="form-control @error('name') is-invalid @enderror" name="first_name" value="{{ old('first_name') }}" required autocomplete="first_name" autofocus>

                            @error('first_name')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Last Name') }}</label>

                        <div class="col-md-6">
                            <input id="last_name" type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" value="{{ old('last_name') }}" required autocomplete="last_name">

                            @error('last_name')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Social Security Number') }}</label>

                        <div class="col-md-6">
                            <input id="social_security_number" type="text" class="form-control @error('social_security_number') is-invalid @enderror" name="social_security_number" value="{{ old('social_security_number') }}" required autocomplete="last_name">

                            @error('social_security_number')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                        <div class="col-md-6">
                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                        <div class="col-md-6">
                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                            @error('password')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                        <div class="col-md-6">
                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                        </div>
                    </div>

                    <div class="form-group row mb-0">
                        <div class="col-md-6 offset-md-4">
                            <button type="submit" class="btn btn-primary">
                                {{ __('Register') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <div class="m-t-40 text-center">
        <p>Already have an account ? <a href="pages-login" class="font-500 font-14 text-primary font-secondary"> Login </a> </p>
        <p>© 2018 Fonik. Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand</p>
    </div>
</div>



@include('forms/elements/footer_start')

<script src="{{ asset('assets/plugins/select2/js/select2.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>

<!-- Plugins Init js -->
<script src="{{ asset('assets/pages/form-advanced.js') }}"></script>


<script>
    $(function () {

        $( "#height" ).change(function() {
            $('.bmi-calc').empty();
            var weight = $('#weight').val();
            var height = $('#height').val();

            var bmi = weight/(height/100*height/100);

            $('.bmi-calc').append('<h1>BMI: <small>' + bmi.toFixed(2) + '</small></h1>');
            $('.bmi-calc-input').val(bmi.toFixed(2));
        });
        $( "#weight" ).change(function() {
            $('.bmi-calc').empty();
            var weight = $('#weight').val();
            var height = $('#height').val();

            var bmi = weight/(height/100*height/100);

            $('.bmi-calc').append('<h1>BMI: <small>' + bmi.toFixed(2) + '</small></h1>');
            $('.bmi-calc-input').val(bmi.toFixed(2));
        });
        $( "#bmi" ).click(function() {
            $('.bmi-calc').empty();
            var weight = $('#weight').val();
            var height = $('#height').val();

            var bmi = weight/(height/100*height/100);

            $('.bmi-calc').append('<h1>BMI: <small>' + bmi.toFixed(2) + '</small></h1>');
            $('.bmi-calc-input').val(bmi.toFixed(2));
        });
    });
    $(function(){
        $('#datepicker').datepicker({
            format: "mm/dd/yyyy",
            language: "en"
        });

        $(".weight-select").select2();
        $(".height-select").select2();
        $(".gender-select").select2();
        $(".age-select").select2();
        $(".education-select").select2();

        $(".allergy-select").select2();
    });

</script>

@include('forms/elements/footer_end')