@extends('layouts.app')
@section('content')
    <div class="content-heading">Form Wizard</div>
    <div class="card card-default">
        <div class="card-header">Basic Form (jquery.validate)</div>
        <div class="card-body">
            <form id="example-form" action="#">
                <div>
                    <h4>
                        Account
                        <br />
                        <small>Nam egestas, leo eu gravida tincidunt</small>
                    </h4>
                    <fieldset>
                        <label for="userName">User name *</label>
                        <input class="form-control required" id="userName" name="userName" type="text" />
                        <label for="password">Password *</label>
                        <input class="form-control required" id="password" name="password" type="text" />
                        <label for="confirm">Confirm Password *</label>
                        <input class="form-control required" id="confirm" name="confirm" type="text" />
                        <p>(*) Mandatory</p>
                    </fieldset>
                    <h4>
                        Profile
                        <br />
                        <small>Nam egestas, leo eu gravida tincidunt</small>
                    </h4>
                    <fieldset>
                        <label for="name">First name *</label>
                        <input class="form-control required" id="name" name="name" type="text" />
                        <label for="surname">Last name *</label>
                        <input class="form-control required" id="surname" name="surname" type="text" />
                        <label for="email">Email *</label>
                        <input class="form-control required" id="email" name="email" type="text" />
                        <label for="address">Address</label>
                        <input class="form-control" id="address" name="address" type="text" />
                        <p>(*) Mandatory</p>
                    </fieldset>
                    <h4>
                        Hints
                        <br />
                        <small>Nam egestas, leo eu gravida tincidunt</small>
                    </h4>
                    <fieldset>
                        <p class="lead text-center">Almost there!</p>
                    </fieldset>
                    <h4>
                        Finish
                        <br />
                        <small>Nam egestas, leo eu gravida tincidunt</small>
                    </h4>
                    <fieldset>
                        <p class="lead">One last check</p>
                        <div class="checkbox c-checkbox">
                            <label>
                                <input type="checkbox" required="required" name="terms" />
                                <span class="fa fa-check"></span>
                                I agree with the Terms and Conditions.
                            </label>
                        </div>
                    </fieldset>
                </div>
            </form>
        </div>
    </div>
    <div class="card card-default">
        <div class="card-header">Basic Vertical Example</div>
        <div class="card-body">
            <div id="example-vertical">
                <h4>Keyboard</h4>
                <section>
                    <p>Try the keyboard navigation by clicking arrow left or right!</p>
                </section>
                <h4>Effects</h4>
                <section>
                    <p>Wonderful transition effects.</p>
                </section>
                <h4>Pager</h4>
                <section>
                    <p>The next and previous buttons help you to navigate through your content.</p>
                </section>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/wizard.js') }}"></script>
@endsection
