<br>
<form class="form-horizontal" id="createlab">
    <div class="container step1-data">
        <h4 class="text-info1">Lab Type</h4>
            <!-- <div class="col-md-12"> -->
            <div class="form-group">
                <div class="input-group">
                    <div id="radioBtn" class="btn-group">
                        <div class="col-md-12">
                            <div class="row">
                                <div class=" col-md-6">
                                    <div class="card card-1">
                                        <h4>Programming Lab</h4>
                                        <p class="labdesc">
                                            <strong>iTrack's Programming Lab</strong> features the easiest way to manage
                                            programming assignments online.Its features of editing, running and evaluation of
                                            programs makes learning process for students, and the evaluation task for teachers,
                                            easier than ever.
                                        </p>
                                        <span class="btn btn-success btn-sm active" id="fp" data-toggle="estado" data-value="Y"
                                            style="width:150px; height:30px; border-radius: 15px; pointer-events: none;">Selected</span>
                                    </div>
                                </div>
                                <div class=" col-md-6">
                                    <div class="card card-3">
                                        <h4>Virtual Machines</h4>
                                        <p class="labdesc">
                                            <strong>iTrack's Virtual Machines</strong> features the labs for all segments.One
                                            solution that can transform the way you up-skill and re-skill your learners and make
                                            them more employable.Enabling Meaningful and Hands-on Learning Experience with Labs
                                            on cloud.
                                        </p>
                                        <span class="btn btn-default btn-sm notActive" id="pp" data-toggle="estado"
                                            data-value="N" style="width:150px; height:30px; border-radius: 15px;">Select
                                            Here</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="estado" id="estado" value="Y">
                </div>
            </div>
            <!-- </div> -->
    </div>
    <br>

    <div class="container step1-data">
        <h4 class="text-info1">Lab Essentials</h4>
        <div class="row">
            <!-- <div class="col-md-4">
                    <div class="form-group">
                        <label class="col-form-label">Select Priority <span style="color: red;">*</span>
                        </label>
                        <div class="input-group">
                            <select class="form-control">
                                <option value="">Select Project Priority</option>
                                <option value="High">High</option>
                                <option value="Medium">Medium</option>
                                <option value="Low">Low</option>

                            </select>
                        </div>
                    </div>
                </div> -->
            <div class="col-md-12">
                <label class="col-form-label"><strong>{{#str}}labname, local_cloudlabcourse{{/str}} <span
                            style="color: red;">*</span></strong>
                </label>
                <a class="btn btn-link" role="button" data-container="body" data-toggle="popover" data-placement="right"
                    data-content="<div class=&quot;no-overflow&quot;><p>{{#str}}enterlabname, local_cloudlabcourse{{/str}}</p></div> "
                    data-html="true" tabindex="0" data-trigger="focus" data-original-title="" title=""> <i
                        class="icon fa fa-question-circle text-info fa-fw "
                        title="{{#str}}enterlabname, local_cloudlabcourse{{/str}}" aria-label="Help with Lab name"></i>
                </a>
                <div class="input-group">
                    <input type="text" class="form-control" id="labname" placeholder="Lab Name" name="labname" title=""
                        required>
                </div>
                <span class="help-block"><strong> ( Accepts Only 25 Characters includes space) </span></strong>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-12">
                <label class="col-form-label"><strong>{{#str}}labshortname, local_cloudlabcourse{{/str}} <span
                            style="color: red;">*</span></strong>
                </label>
                <a class="btn btn-link" role="button" data-container="body" data-toggle="popover" data-placement="right"
                    data-content="<div class=&quot;no-overflow&quot;><p>{{#str}}enterlabname, local_cloudlabcourse{{/str}}</p></div> "
                    data-html="true" tabindex="0" data-trigger="focus" data-original-title="" title=""> <i
                        class="icon fa fa-question-circle text-info fa-fw "
                        title="{{#str}}enterlabname, local_cloudlabcourse{{/str}}" aria-label="Help with Lab name"></i>
                </a>
                <div class="input-group">
                    <input type="text" class="form-control" id="shortname" placeholder="Lab Shortname" name="shortname"
                        title="" required>
                    <input type="hidden" class="form-control" id="coursecat" name="coursecat" title=""
                        value="{{catid}}">
                </div>
                <span class="help-block"><strong> ( Accepts Only 25 Characters includes space) </span></strong>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-12">
                <label class="col-form-label"><strong>{{#str}}labsummary, local_cloudlabcourse{{/str}} <span
                            style="color: red;">*</span></strong>
                </label>
                <a class="btn btn-link" role="button" data-container="body" data-toggle="popover" data-placement="right"
                    data-content="<div class=&quot;no-overflow&quot;><p>{{#str}}enterlabsummary,local_cloudlabcourse{{/str}}</p></div> "
                    data-html="true" tabindex="0" data-trigger="focus" data-original-title="" title=""> <i
                        class="icon fa fa-question-circle text-info fa-fw "
                        title="{{#str}}enterlabsummary, local_cloudlabcourse{{/str}}"
                        aria-label="Help with Semester Year"></i>
                </a>
                <div class="input-group">
                    <textarea class="form-control" id="labsummary" name="labsummary" placeholder="Lab Summary" rows="2"
                        maxlength="250" required></textarea>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-6">
                <label class="col-form-label"><strong>{{#str}}competecylevel, local_cloudlabcourse{{/str}}<span
                            style="color: red;">*</span></strong>
                </label>
                <a class="btn btn-link" role="button" data-container="body" data-toggle="popover" data-placement="right"
                    data-content="<div class=&quot;no-overflow&quot;><p>{{#str}}enterskillrequired, local_industry{{/str}}</p></div> "
                    data-html="true" tabindex="0" data-trigger="focus" data-original-title="" title=""> <i
                        class="icon fa fa-question-circle text-info fa-fw "
                        title="{{#str}}enterskillrequired, local_industry{{/str}}"
                        aria-label="Help with Semester Year"></i>
                </a>
                <div class="form-group secction-preview">
                    <div class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" id="materialInline1" checked="checked"
                            name="levels" value="Beginners">
                        <label class="form-check-label" for="materialInline1">Beginners</label>
                    </div>

                    <div class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" id="materialInline2" name="levels"
                            value="Intermediate">
                        <label class="form-check-label" for="materialInline2">Intermediate</label>
                    </div>

                    <div class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" id="materialInline3" name="levels"
                            value="Advanced">
                        <label class="form-check-label" for="materialInline3">Advanced</label>
                    </div>
                </div>
            </div>

        </div>
        </br>
        <div class="row">
            <div class="col-md-6">
                <label class="col-form-label"><strong>{{#str}}testlab, local_cloudlabcourse{{/str}}<span
                            style="color: red;">*</span></strong>
                </label>
                <a class="btn btn-link" role="button" data-container="body" data-toggle="popover" data-placement="right"
                    data-content="<div class=&quot;no-overflow&quot;><p>{{#str}}enterskillrequired, local_industry{{/str}}</p></div> "
                    data-html="true" tabindex="0" data-trigger="focus" data-original-title="" title=""> <i
                        class="icon fa fa-question-circle text-info fa-fw "
                        title="{{#str}}enterskillrequired, local_industry{{/str}}"
                        aria-label="Help with Semester Year"></i>
                </a>
                <div class="form-group secction-preview">
                    <div class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" id="notestlab" name="testlab" checked="checked"
                            value="0">
                        <label class="form-check-label" for="No Test Lab">NO</label>
                    </div>

                    <div class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" id="yestestlab" name="testlab" value="1">
                        <label class="form-check-label" for="Test Lab">YES</label>
                    </div>
                </div>
            </div>

        </div>
        </br>
        <div class="row labparts" id="labparts" style="display:block;">
            <div class="col-md-12">
                <label class="col-form-label"><strong>{{#str}}programmingpacks, local_cloudlabcourse{{/str}}</strong>
                </label>
                <a class="btn btn-link" role="button" data-container="body" data-toggle="popover" data-placement="right"
                    data-content="<div class=&quot;no-overflow&quot;><p>{{#str}}enterskillrequired, local_industry{{/str}}</p></div> "
                    data-html="true" tabindex="0" data-trigger="focus" data-original-title="" title=""> <i
                        class="icon fa fa-question-circle text-info fa-fw "
                        title="{{#str}}enterskillrequired, local_industry{{/str}}"
                        aria-label="Help with Semester Year"></i>
                </a>
                <div class="form-group secction-preview cc-selector">
                    <div class="kpx_login">
                        <h3 class="kpx_authTitle">Select Among Below Labs</h3>

                        <div class="row kpx_row-sm-offset-3 kpx_socialButtons">
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="cp" type="radio" name="labs" value="cp" />
                                <label class="btn btn-lg btn-block kpx_btn-facebook backdrop cdrop" for="cp"></label>

                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="cpp" type="radio" name="labs" value="cpp" />
                                <label class="btn btn-lg btn-block kpx_btn-twitter backdrop cppdrop" for="cpp"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="java" type="radio" name="labs" value="java" />
                                <label class="btn btn-lg btn-block kpx_btn-google-plus backdrop javadrop"
                                    for="java"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="sql" type="radio" name="labs" value="sql" />
                                <label class="btn btn-lg btn-block kpx_btn-github backdrop sqldrop" for="sql"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="chash" type="radio" name="labs" value="chash" />
                                <label class="btn btn-lg btn-block kpx_btn-soundcloud backdrop chashdrop"
                                    for="chash"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="html" type="radio" name="labs" value="html" />
                                <label class="btn btn-lg btn-block kpx_btn-steam backdrop htmldrop" for="html"></label>
                            </div>
                        </div>
                        <br>
                        <div class="row kpx_row-sm-offset-3 kpx_socialButtons">

                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="javascript" type="radio" name="labs" value="javascript" />
                                <label class="btn btn-lg btn-block kpx_btn-steam backdrop javascriptdrop"
                                    for="javascript"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="php" type="radio" name="labs" value="php" />
                                <label class="btn btn-lg btn-block kpx_btn-vimeo backdrop phpdrop" for="php"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="python" type="radio" name="labs" value="python" />
                                <label class="btn btn-lg btn-block kpx_btn-yahoo backdrop pythondrop"
                                    for="python"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="perl" type="radio" name="labs" value="perl" />
                                <label class="btn btn-lg btn-block kpx_btn-twitter backdrop perldrop"
                                    for="perl"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="typescript" type="radio" name="labs" value="typescript" />
                                <label class="btn btn-lg btn-block kpx_btn-vk backdrop typescriptdrop"
                                    for="typescript"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="rp" type="radio" name="labs" value="rp" />
                                <label class="btn btn-lg btn-block kpx_btn-twitter backdrop rpdrop" for="rp"></label>
                            </div>
                        </div>
                        <br>
                        <div class="row kpx_row-sm-offset-3 kpx_socialButtons">

                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="ruby" type="radio" name="labs" value="ruby" />
                                <label class="btn btn-lg btn-block kpx_btn-spotify backdrop rubydrop"
                                    for="ruby"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="scala" type="radio" name="labs" value="scala" />
                                <label class="btn btn-lg btn-block kpx_btn-tumblr backdrop scaladrop"
                                    for="scala"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="shell" type="radio" name="labs" value="shell" />
                                <label class="btn btn-lg btn-block kpx_btn-spotify backdrop shelldrop"
                                    for="shell"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="matlab" type="radio" name="labs" value="matlab" />
                                <label class="btn btn-lg btn-block kpx_btn-soundcloud backdrop matlabdrop"
                                    for="matlab"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="vhdl" type="radio" name="labs" value="vhdl" />
                                <label class="btn btn-lg btn-block kpx_btn-twitter backdrop vhdldrop"
                                    for="vhdl"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="row" id="paidPart" style="display: none">
            <div class="col-md-12">
                <label class="col-form-label"><strong>{{#str}}virtualpacks, local_cloudlabcourse{{/str}}</strong>
                </label>
                <a class="btn btn-link" role="button" data-container="body" data-toggle="popover" data-placement="right"
                    data-content="<div class=&quot;no-overflow&quot;><p>{{#str}}enterskillrequired, local_industry{{/str}}</p></div> "
                    data-html="true" tabindex="0" data-trigger="focus" data-original-title="" title=""> <i
                        class="icon fa fa-question-circle text-info fa-fw "
                        title="{{#str}}enterskillrequired, local_industry{{/str}}"
                        aria-label="Help with Semester Year"></i>
                </a>
                <div class="form-group secction-preview cc-selector">
                    <div class="kpx_login">
                        <h3 class="kpx_authTitle">Select Among Below Labs</h3>
                        <div class="row kpx_row-sm-offset-3 kpx_socialButtons">
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="vmr" type="radio" name="labs" value="vmr" />
                                <label class="btn btn-lg btn-block kpx_btn-spotify backdrop vmrdrop" for="vmr"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="j2ee" type="radio" name="labs" value="j2ee" />
                                <label class="btn btn-lg btn-block kpx_btn-tumblr backdrop j2eedrop" for="j2ee"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="vmcentos" type="radio" name="labs" value="vmcentos" />
                                <label class="btn btn-lg btn-block kpx_btn-facebook backdrop vmcentosdrop"
                                    for="vmcentos"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="vmopenstack" type="radio" name="labs" value="vmopenstack" />
                                <label class="btn btn-lg btn-block kpx_btn-soundcloud backdrop vmopenstackdrop"
                                    for="vmopenstack"></label>
                            </div>
                            <div class="col-xs-2 col-sm-2">
                                <div class="ribbon ribbon-top-left hide"><span>selected</span></div>
                                <input id="vmhadoop" type="radio" name="labs" value="vmhadoop" />
                                <label class="btn btn-lg btn-block kpx_btn-twitter backdrop vmhadoopdrop"
                                    for="vmhadoop"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="goals" class="col-md-6control-label"><strong>To be Submitted on</strong><span
                            style="color: red;">*</span></label>
                    <div class="input-group">
                        <input type="date" class="form-control" id="startdate" required />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="goals" class="col-md-6control-label"><strong>To be Submitted till</strong><span
                            style="color: red;">*</span></label>
                    <div class="input-group">
                        <input type="date" class="form-control" id="enddate" required />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    <div class="modal-footer">
        <!-- <button type="cancel" class="btn btn-danger" data-dismiss="modal">{{#str}}cancel, local_industry{{/str}}</button> -->
        <button type="submit" id="btn-save-changes" class="btn btn-md btn-round btn-success">Continue</button>
    </div>
</form>