<div moe relative>
    <a start show href="#">+ New User</a>
    <form url="{{ route('admin.create-new-user') }}" redir="/admin/users/view/[data]/orders">
        <h4 class="fw-bold mb-4">New User</h4>
        <div id="createNewUser" v-cloak>
            <div class="mb-2">
                <label class="text-sm text-secondary mb-1">First Name*</label>
                <input type="text" name="fname" class="form-control form-control-sm" required />
            </div>
            <div class="mb-2">
                <label class="text-sm text-secondary mb-1">Last Name*</label>
                <input type="text" name="lname" class="form-control form-control-sm" required />
            </div>
            <div class="mb-2">
                <label class="text-sm text-secondary mb-1">Email Address*</label>
                <input type="email" name="email" class="form-control form-control-sm" required>
            </div>
            <div class="mb-2">
                <label class="text-sm text-secondary mb-1">How would you like us to notify you when your results are available?*</label>
                <select class="form-control form-control-sm" name="notificationOption" v-model="form.notificationOption">
                    <option value="">Select</option>
                    <option value="email">Email Me</option>
                    <option value="phone">Text Me (SMS)</option>
                    <option value="none">Do not contact me, I will call in to check on my results.</option>
                </select>
            </div>
            <div v-if="form.notificationOption === 'phone'" class="mb-2">
                <label class="text-sm text-secondary mb-1">Phone Number*</label>
                <input type="text" name="phoneNumber" class="form-control form-control-sm" required />
            </div>
        </div>
        <div class="d-flex align-items-center mt-3">
            <button type="button" class="btn py-2 btn-grey border w-100 no-shadow" cancel>Cancel</button>
            <button class="btn py-2 btn-primary w-100 ms-3" submit>Submit</button>
        </div>
    </form>
</div>

<script>
    var createNewUserComponent = new Vue({
        el:'#createNewUser',
        data:{
            form:{}
        }
    });
</script>