<div class="row">
    <div class="col-md-12 mt-2">
        <form name="" id="addUserForm" method="post" action="/coach/plan-insert" enctype="multipart/form-data" novalidate>
            <div class="card card-info">
                <div class="card-header">
                    <h4 class="card-title">
                        <%=sectionTitle%>
                    </h4>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <input type="hidden" id="user_id" name="user_id" value="<%=user_id%>" />
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Plan Name</label>
                            <input type="text" id="plan_name" name="plan_name" class="form-control"
                                onkeypress="return /[A-Za-z]+/.test(event.key)" placeholder="Enter plan name" required
                                oninput="validate(this)">
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Plan Cost</label>
                            <input type="text" id="plan_cost" name="plan_cost" class="form-control"
                                onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
                                placeholder="Enter plan cost"  oninput="validate(this)" required>
                        </div>
                        <div class="form-group col-md-12">
                            <label class="required" for="inputName">Plan Description</label>
                            <textarea type="text" id="editor" data-oc-toggle="ckeditor" data-lang="en" name="plan_description"
                                class="form-control editor" placeholder="Enter plan description" required
                            ></textarea>
                        </div>
                       
                        <div class="form-group col-md-6">
                            <label for="inputName">Plan Image</label>
                            <input type="file" class="form-control imagepickerWithPreviewId"
                                data-previewelement="imagePreview" id="plan_image" name="plan_image" accept="image/*"
                                onchange="return fileValidation()"  style="padding: 4px 4px;">
                            <label id="image-error" style="display: none;" class="error" for="image">Please upload file
                                having extensions .jpeg/.jpg/.png/.gif only.</label>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Status</label>
                            <select id="active_status" name="active_status" class="form-control" required>
                                <option selected disabled>Select Status</option>
                                <option value="true" selected>Active</option>
                                <option value="false">Inactive</option>
                            </select>
                        </div>                        
                        <div class="form-group col-md-6" id="previewSingleImage">
                            <img class="img-thumbnail" id="imagePreview" style="width: 100px" src="" alt="">
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-info mr-2" id="adduser">Save</button>
                    <button type="button" class="btn btn-default">
                        <a href="/coach/<%=user_id%>/plan-list">Cancel</a>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

