@extends('layouts.auth')

@section('auth-style')
 <!-- INTERNAl Forn-wizard css-->
 <link href="{{env('SECURE_ASSETS').'/plugins/forn-wizard/css/forn-wizard.css'}}" rel="stylesheet" />
 <link href="{{env('SECURE_ASSETS').'/plugins/formwizard/smart_wizard.css'}}" rel="stylesheet">
 <link href="{{env('SECURE_ASSETS').'/plugins/formwizard/smart_wizard_theme_dots.css'}}" rel="stylesheet">

@endsection

@section('content')
<section class="sptb">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                @include('auth.partials.form-error')
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                        @lang('navbar.register')
                        </div>
                    </div>
                    <div class="card-body">
                    <form method="POST" action="{{ route('register/student') }}" id="register">
                    @csrf
                        <div id="wizard2">
                          @include('auth.register.inc.wizard-reg-form')
                        </div>
                    </form>    
                    </div>
                </div>
            </div>
        </div>
    </div>
 </section>
        @endsection
        @section('auth-js')
        <!-- Datepicker js -->
        <script src="{{env('SECURE_ASSETS').'/plugins/date-picker/spectrum.js'}}"></script>
        <script src="{{env('SECURE_ASSETS').'/plugins/date-picker/jquery-ui.js'}}"></script>
        <script>
            $('#register').on('submit',function(e){
                if($('#password-confirm').val() != $('#password').val()){
                    $(this).val('')
                    notif({
                                type: "error",
                                msg: "the passwords should match",
                                position: "center",
                                opacity: 0.8,
                                autohide: true,
                                multiline:true,
                                fade:true,
                                });      
                }else{
                    return true;
                }
            })
        
        </script>
        @endsection