<section class="course">
    <noscript>
    For full functionality of this page it is necessary to enable JavaScript. Here are the 
    <a href="http://www.enable-javascript.com" target="_blank"> 
        instructions how to enable JavaScript in your web browser
    </a>
    </noscript>
    <div class="row">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <!--            <li class="<?php
            // if ($active_tab == 'video_class') {
            //   echo 'active';
            //  }
            ?>">
                            <a href="#work-files" data-toggle="tab">Video Classes</a>
                        </li>-->

            <li class="<?php
            if ($active_tab == 'online_academy') {
                echo 'active';
            }
            ?>">
                <a href="#classroom" data-toggle="tab">Online Academy</a>
            </li>
        </ul>
        <div id="my-tab-content" class="tab-content">

            <!-- video Classes tab-->
            <div class="tab-pane <?php
            if ($active_tab == 'video_classes') {
                echo 'active';
            }
            ?>" id="work-files">
                <div class="tab-content panel-body">

                    <div class="col-sm-12 gray " style="padding-left: 10px">
                        <div class="col-sm-12 white" style="padding-left: 10px" >
                            <div class="col-sm-3 gray">
                                <div class="col-sm-12" style="border: 1px solid yellowgreen;padding-left: 0px;padding-right: 0px;height: 550px" >

                                    <div class="col-sm-12 text-center" style="border-bottom: 1px solid #777;padding: 10px">
                                        <strong>Basic</strong><br>
                                        <p>Month-to-month</p>
                                    </div>

                                    <div class="col-sm-12 text-center" style="padding: 10px">
                                        <p><i class="fa fa-dollar" style="font-size: 30px"> 24</i>  <sup>.99</sup> <sub>Per Month</sub></p>
                                    </div>
                                    <div class="col-sm-12"><br></div>
                                    <div class="col-sm-12 text-center" style="padding: 10px;margin-top: 10px">
                                        <a href="#" class="btn btn-success">Start Your Free Trail</a>

                                        <p>  </p><br>
                                        <p>  OR </p>
                                        <p> Start membership today  </p> <br>
                                        <p>Unlimited access to all videos </p>
                                        <p>New courses weekly</p>
                                    </div>

                                    <div class="col-sm-12 text-center" style="margin-bottom: 10px">
                                        <br>
                                        <br>
                                        <br>
                                    </div>
                                    <div class="col-sm-12 text-center" >
                                        <a href="#" class="text-center">See all features</a>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-3 gray" >

                                <div class="col-sm-12" style="border: 1px solid yellowgreen;padding-left: 0px;padding-right: 0px;height: 550px" >
                                    <div class="col-sm-12 text-center" style="border-bottom: 1px solid #777;padding: 10px">
                                        <strong>Basic</strong><br>
                                        <p>Annual billing</p>

                                    </div>

                                    <div class="col-sm-12 text-center" style="padding: 10px">
                                        <p><i class="fa fa-dollar" style="font-size: 30px"> 24</i>  <sup>.99</sup> <sub>Per Month</sub></p>
                                        <p><a href="#">Save $60 !</a></p>
                                    </div>

                                    <div class="col-sm-12 text-center" style="padding: 10px">
                                        <a href="#" class="btn btn-success">Start Your Free Trail</a>

                                        <p>  </p><br>
                                        <p>  OR </p>
                                        <p> Start membership today  </p> <br>
                                        <p>Unlimited access to all videos </p>
                                        <p>New courses weekly</p>
                                    </div>

                                    <div class="col-sm-12 text-center" style="margin-bottom: 10px">
                                        <br>
                                        <br>
                                        <br>
                                    </div>
                                    <div class="col-sm-12 text-center" >
                                        <a href="#" class="text-center">See all features</a>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-3 gray" >

                                <div class="col-sm-12" style="border: 1px solid yellowgreen;padding-left: 0px;padding-right: 0px;height: 550px" >
                                    <div class="col-sm-12 text-center" style="border-bottom: 1px solid #777;padding: 10px">
                                        <strong>Premium</strong><br>
                                        <p>Month-to-month</p>
                                    </div>

                                    <div class="col-sm-12 text-center" style="padding: 10px">
                                        <p><i class="fa fa-dollar" style="font-size: 30px"> 24</i>  <sup>.99</sup> <sub>Per Month</sub></p>
                                    </div>
                                    <div class="col-sm-12"><br></div>
                                    <div class="col-sm-12 text-center" style="padding: 10px;margin-top: 10px">
                                        <a href="#" class="btn btn-success">Start Your Free Trail</a>

                                        <p>  </p><br>
                                        <p>  OR </p>
                                        <p> Start membership today  </p> <br>
                                        <p>Unlimited access to all videos </p>
                                        <p>New courses weekly</p>
                                        <p>Project files to download <i class="fa fa-question-circle" title="Project files to download" style="cursor: help"></i> </p>
                                    </div>

                                    <div class="col-sm-12 text-center" >
                                        <br>
                                        <br>
                                    </div>
                                    <div class="col-sm-12 text-center" >
                                        <a href="#" class="text-center">See all features</a>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-3 gray" >

                                <div class="col-sm-12" style="border: 1px solid yellowgreen;padding-left: 0px;padding-right: 0px;height: 550px" >
                                    <div class="col-sm-12 text-center" style="border-bottom: 1px solid #777;padding: 10px">
                                        <strong>Premium</strong><br>
                                        <p>Annual billing</p>
                                    </div>

                                    <div class="col-sm-12 text-center" style="padding: 10px">
                                        <p><i class="fa fa-dollar" style="font-size: 30px"> 24</i>  <sup>.99</sup> <sub>Per Month</sub></p>
                                        <p><a href="#">Save $60 !</a></p>
                                    </div>

                                    <div class="col-sm-12 text-center" style="padding: 10px">
                                        <a href="#" class="btn btn-success">Start Your Free Trail</a>

                                        <p>  </p><br>
                                        <p>  OR </p>
                                        <p> Start membership today  </p> <br>
                                        <p>Unlimited access to all videos </p>
                                        <p>New courses weekly</p>
                                        <p>Project files to download <i class="fa fa-question-circle" title="Project files to download" style="cursor: help"></i> </p>
                                    </div>

                                    <div class="col-sm-12 text-center" >
                                        <br>
                                        <br>
                                    </div>
                                    <div class="col-sm-12 text-center" >
                                        <a href="#" class="text-center">See all features</a>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </div> 

                </div>   
            </div>



            <div class="tab-pane <?php
            if ($active_tab == 'online_academy') {
                echo 'active';
            }
            ?>" id="classroom">
                <div class="tab-content panel-body">

                    <div class="col-sm-12 gray " style="padding-left: 10px">
                        <?php
                        $url = 'buy-selected-feature';
                        echo form_open($url, 'class="" id="formID2" name="feature_pricing" autocomplete="off"');
                        ?>
                        <input type="hidden" name="feature_selected" id="feature_selected" value="0">
                        <div class="col-sm-12 white" style="padding-left: 10px" >

                            <div class="col-sm-12 gray">
                                <div class="col-sm-12" style="padding-left: 0px;padding-right: 0px;">
                                    <div class="col-sm-8 text-left" style="padding: 10px">
                                        <h4>How many live classrooms do you need simultaneously?</h4>
                                        <p>(There is no limit to the number of live classes)</p>
                                    </div>
                                    <div class="col-sm-4 text-left" style="padding: 10px">
                                        <select onchange="selectClassPerDay(this.value);"
                                                data-errormessage-value-missing=" " 
                                                class="form-control validate[required, custom[virtualFeatureSelected]]"
                                                name="classroom_number" id="classroom_number">
                                            <option value="0">Choose Classroom Number</option>

                                            <?php
                                            foreach ($virtual_class_number as $v_virtual_class_number) {
                                                ?>
                                                <option value="<?php echo $v_virtual_class_number->virtual_classroom_number ?>">
                                                    <?php echo $v_virtual_class_number->virtual_classroom_number ?>
                                                </option>
                                            <?php } ?>
                                        </select>
                                    </div>

                                    <div class="col-sm-8 text-left" style="padding: 10px">
                                        <div class="col-sm-10 text-left" >
                                            <h4>How many live classrooms do you need per day?</h4>
                                            <p>(There is no limit to the number of live classes)</p>
                                        </div>
                                        <div class="col-sm-2 text-right" style="margin-top: 18px;">
                                            <span id="class_per_day_loding" class="text_right" ></span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 text-left" style="padding: 10px">
                                        <div id="class_per_day">
                                            <select onchange="selectAttendees(this.value);"
                                                    data-errormessage-value-missing=" " 
                                                    class="form-control validate[required]"
                                                    name="virtual_classroom_per_day" id="virtual_classroom_per_day">
                                                <option value="0">Choose Classroom Number</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-sm-8 text-left" style="padding: 0px">
                                        <div class="col-sm-10 text-left" ><h4>Maximum number of attendees in a classroom</h4></div>
                                        <div class="col-sm-2 text-right" style="margin-top: 18px;">
                                            <span id="classroom_attendee_loding" class="text_right" ></span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 text-left" style="padding: 10px" style="padding:5px;">
                                        <div id="att_number">
                                            <select onchange="selectClassType();"
                                                    class="form-control"  
                                                    name="attendees_number" id="attendees_number">
                                                <option value="0">Choose attendees number</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-sm-12"><br></div>
                                    <div class="col-sm-8 text-left" style="padding: 0px">
                                        <div class="col-sm-10 text-left" >
                                            <h4>Classroom type</h4>
                                            <span>Default storage 5 GB</span>
                                        </div>
                                        <div class="col-sm-2 text-right" style="margin-top: 18px;">
                                            <span id="class_type_loding" class="text-right" >

                                            </span>
                                        </div>
                                    </div>

                                    <div class="col-sm-4 text-left" style="padding: 10px">
                                        <div id="ct">
                                            <select  onchange="calculate_price()" 
                                                     class="form-control"  
                                                     name="class_type" id="class_type">
                                                <option value="">Choose Class Type</option>
                                            </select>
                                        </div>
                                    </div>
                                    <span id="sCapacity" style="display: none"></span>
                                </div>
                            </div>

                            <div id="virtual_classroom_feature_info">
                                <input type="hidden" name="virtual_classroom_feature_price" id="virtual_classroom_feature_price" value="">
                                <input type="hidden" value="" name="virtual_classroom_feature_id" id="virtual_classroom_feature_id" value="">
                                <input type="hidden" value="" name="virtual_classroom_feature_price" id="virtual_classroom_feature_price" value="">
                                <input type="hidden" value="" name="virtual_classroom_feature_storage" id="virtual_classroom_feature_storage" value="">
                                <input type="hidden" value="" name="virtual_classroom_feature_selected" id="virtual_classroom_feature_selected" value="">
                            </div>

                            <div id="online_exam_feature_info">
                                <input type="hidden" name="online_exam_feature_price" id="online_exam_feature_price" value="">
                                <input type="hidden" value="" name="online_exam_feature_id" id="online_exam_feature_id" value="">
                                <input type="hidden" value="" name="online_exam_feature_selected" id="online_exam_feature_selected" value="">
                            </div>

                            <div id="online_exam_feature_info">
                                <input type="hidden" name="explore_expert_resume_feature_price" id="explore_expert_resume_feature_price" value="">
                                <input type="hidden" value="" name="explore_expert_resume_feature_id" id="explore_expert_resume_feature_id" value="">
                                <input type="hidden" value="" name="explore_expert_resume_feature_selected" id="explore_expert_resume_feature_selected" value="">
                            </div>

                            <div class="col-sm-12"><br></div>
                            
                            <div class="col-sm-4"></div>
                            <div id="price_info">
                                <div class="col-sm-12  gray" id="price_per_month">
                                    <div class="col-sm-12" style="padding-left: 0px;padding-right: 0px;" >

                                        <div class="col-sm-8 text-left padding-zero"  id="selected_feature_price">
                                            <div class="col-md-12 column" style="text-align: left" id="storage"></div>
                                        </div>


                                        <div class="col-sm-4 text-right" style="padding: 10px">
                                            <h4  class="col-sm-10 " style="color: red">USD  
                                                <span id="total_price"></span>/Month 
                                            </h4>
                                            <div class="col-sm-2 text-right" style="margin-top: 10px;"id="price_per_month_loding"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12"><br><br></div>

                                <div class="col-sm-4"></div>
                                <div class="col-sm-12 gray">
                                    <div class="col-sm-12" style="padding-left: 0px;padding-right: 0px;" >
                                        <div class="col-sm-4 col-sm-offset-2 text-left" style="padding: 10px">
                                            <p style="margin-left: 50px;">Select one year and get one month free.</p>
                                        </div>

                                        <div class="form-group col-sm-3" style="padding: 10px">
                                            <div class="input-group">
                                                <select class="form-control" name="currency" id="currency" onchange="calculate_price(this.value)">
                                                    <option value="" >Currency</option>
                                                    <option value="1">BDT</option>
                                                    <option value="2">USD</option>
                                                </select>
                                                <span class="input-group-addon" id="basic-addon1" title="Please select money Currency"><i class="fa fa-money"></i></span>
                                            </div>
                                        </div>

                                        <div class="col-sm-3 text-left" style="padding: 10px">
                                            <select data-errormessage-value-missing="Choose Package Time Limit is Requird!" 
                                                    class="form-control validate[required]"  name="billing_period" id="billing_period"
                                                    onchange="calculate_price()">
                                                <option value="">Billing Period</option>
                                                <option value="1">Monthly</option>
                                                <option value="2">Yearly</option>
                                            </select>
                                        </div>

                                        <div id="currency_period_total">
                                            <div class="col-sm-2 col-sm-offset-6 text-left" style="padding: 10px">
                                                <div class="col-sm-4 text-left" style="padding: 10px">
                                                    <h4>Total</h4>
                                                </div>
                                                <div class="col-sm-1 green" style="margin-top: 10px;" id="total_price_loding"></div>
                                                <div class="col-sm-6 text-right" style="padding: 10px"></div>
                                            </div>
                                        </div>

                                        <div class="col-sm-4 text-right" style="padding: 10px">
                                            <h4></h4>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="col-sm-12 " style="padding-left: 0px;padding-right: 0px;" >
                                                <span class="col-sm-2 col-sm-offset-8">
                                                    <a href="<?php echo base_url() . 'sign_up' ?>" class="btn btn-success">Start Free Trail</a>
                                                </span>
                                                <span class="col-sm-2 pull-Left">
                                                    <input type="submit" value="BUY NOW" name="btn_buy" class="btn btn-success">
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="col-md-12 column">
                            <div class="col-md-5 column">
                            </div>
                        </div>

                        <?php echo form_close(); ?>

                    </div> 

                </div>   
            </div>

        </div>
    </div>

</section>


