<div class="col-sm-10">
    <div class="row ">
        <div class="col-sm-12 ">


            <div class="col-sm-12 gray_ttc">

                <div class="course-detail-tab" style="margin-top: 10px">
                    <h3>Assign Course</h3>

                    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                        <li class="

                            <?php
                            if ($active_payment) {
                                echo ' ';
                            } else {
                                echo 'active';
                            }
                            ?>

                            "><a href="#A_course" data-toggle="tab">Assign Course</a></li>
                        <li class="

                            <?php
                            if ($active_payment) {
                                echo 'active';
                            }
                            ?>

                            "><a href="#payment" data-toggle="tab">Payment Information</a></li> 

                    </ul>
                    <div id="my-tab-content" class="tab-content ">


                        <!-- course tab -->
                        <div class="tab-pane 

                             <?php
                             if ($active_payment) {
                                 echo ' ';
                             } else {
                                 echo 'active';
                             }
                             ?>

                             " id="A_course">
                            <div class="tab-content panel-body ">
                                <div class="col-sm-12"><br></div>
                                <div class="col-sm-12  gray_ttc">
                                    <div class="col-sm-8" style="padding: 10px">

                                        <label for="person_role_modal_input">Select Student Type:</label>
                                        <select class="form-control" name="person_role_modal_input" id="person_role_modal_input">
                                            <option value="">--Select Student Type--</option>
                                            <option value="1">Class Room</option>
                                            <option value="2">Online</option>
                                            <option value="3">Video Training</option>

                                        </select>
                                        <br>
                                        <label for="person_role_modal_input">Course Category:</label>
                                        <select class="form-control" name="person_role_modal_input" id="person_role_modal_input">
                                            <option value="">--Select Course Category--</option>
                                            <option value="1">Web Application</option>
                                            <option value="2">Desktop Application</option>

                                        </select>
                                        <br>
                                        <label for="person_role_modal_input">Course</label>
                                        <select class="form-control" name="person_role_modal_input" id="person_role_modal_input">
                                            <option value="">--Select Course --</option>
                                            <option value="1">HTML</option>
                                            <option value="2">CSS</option>
                                            <option value="4">JAVA SCRIPT</option>
                                            <option value="3">PHP</option>
                                            <option value="5">My-SQL</option>
                                        </select>
                                        <br>
                                        <label for="person_role_modal_input">Select Coupon</label>
                                        <select class="form-control" name="person_role_modal_input" id="person_role_modal_input">
                                            <option value="">--Select Coupon --</option>
                                            <option value="1">Coupon1</option>
                                            <option value="2">Coupon2</option>
                                        </select>
                                        <br>
                                        <br>
                                        <div class=" col-sm-6" >
                                            <button type="submit" id="submit" class="btn btn-success">Assign Course</button>
                                            <a href="student_management.html" class="btn btn-success">Cancel</a>
                                        </div>

                                    </div>  
                                </div>  

                                <div class="col-sm-12"><br></div>

                            </div>   
                        </div>
                        <!-- /.person information tab -->

                        <!-- select Course tab -->
                        <div class="tab-pane 

<?php
if ($active_payment) {
    echo 'active';
}
?>

                             " id="payment">
                            <div class="tab-content panel-body">
                                <div class="col-sm-12"><br></div>
                                <form  id="formID2" action="#" method="post" name="userForm" enctype="multipart/form-data" >
                                    <div class="form-group col-sm-10">
                                        <div class="form-group col-sm-5">
                                            <input readonly type="text" id="invoice_no" name="invoice_no"  class="form-control" placeholder="Invoice no.">
                                        </div>
                                        <div class="form-group col-sm-5">
                                            <input readonly type="text" id="unit_price" name="unit_price"  class="form-control" placeholder="Unit Price">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-10">
                                        <div class="form-group col-sm-5">
                                            <input readonly type="text" id="quantity" name="Quantity"  class="form-control" placeholder="Quantity">
                                        </div>
                                        <div class="form-group col-sm-5">
                                            <input readonly type="text" id="total_price" name="total_price"  class="form-control" placeholder="Total Price">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-10">
                                        <div class="form-group col-sm-5">
                                            <input readonly type="text" id="discount_price" name="discount_price"  class="form-control" placeholder="Discount price">
                                        </div>
                                        <div class="form-group col-sm-5">
                                            <input readonly type="text" id="payment_name" name="payment_name"  class="form-control" placeholder="Payment name">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-10">

                                        <div class="form-group col-sm-5" >
                                            <select class="form-control" onchange="ChangeButton(this.value)">
                                                <option value=""> Select Payment Method </option>
                                                <option value="2"> Credit Card Payment</option>
                                                <option value="4"> Bkash Payment</option>
                                            </select>
                                        </div>
                                        <script>
                                            function ChangeButton(GivenText) {

                                                var pymentBtn = document.getElementById('pymentBtn');
                                                var CreditBtn = document.getElementById('CreditBtn');
                                                var BkashBtn = document.getElementById('BkashBtn');

                                                if (GivenText == 2)
                                                {
                                                    CreditBtn.setAttribute("style", 'display:block; ');

                                                    pymentBtn.setAttribute("style", 'display:none; ');

                                                    BkashBtn.setAttribute("style", 'display:none; ');

                                                } else if (GivenText == 4)
                                                {
                                                    BkashBtn.setAttribute("style", 'display:block; ');

                                                    pymentBtn.setAttribute("style", 'display:none; ');

                                                    CreditBtn.setAttribute("style", 'display:none; ');

                                                } else
                                                {
                                                    pymentBtn.setAttribute("style", 'display:block; ');
                                                    pymentBtn.setAttribute("style", 'font-size:14px; ');
                                                    CreditBtn.setAttribute("style", 'display:none; ');
                                                    BkashBtn.setAttribute("style", 'display:none; ');
                                                }


                                            }
                                        </script>
                                        <div class="form-group col-sm-5">
                                            <button type="button" class="btn btn-success" style="font-size: 12px;display: block" id="pymentBtn">Choose Payment Method</button>
                                            <button type="button" class="btn btn-success" style="font-size: 14px;display: none" id="CreditBtn" data-toggle="modal" data-target="#basicModal">Credit Card Payment</button>
                                            <button type="button" class="btn btn-success" style="font-size: 14px;display: none" id="BkashBtn" data-toggle="modal" data-target="#bkashModal">Bkash Payment</button>
                                        </div>


                                    </div>



                                    <div class="form-group col-sm-10">

                                        <div class="form-group col-sm-5">

                                            <div class='input-group' id='datetimepicker2'>
                                                <input type='text' class="form-control" placeholder=" Due Payment Date"readonly />
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar" title="Due Payment Date"></span><br>
                                                </span>
                                            </div>


                                            <script type="text/javascript">
                                                $(function () {
                                                    $('#datetimepicker2').datetimepicker({
                                                        viewMode: 'years',
                                                        format: 'DD/MM/YYYY'

                                                    });
                                                });
                                            </script>

                                        </div>

                                        <div class="form-group col-sm-5">


                                            <div class='input-group' id='datetimepicker5'>
                                                <input type='text' class="form-control" placeholder=" Payment On" readonly/>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar" title="Payment On date"></span><br>
                                                </span>
                                            </div>


                                            <script type="text/javascript">
                                                $(function () {
                                                    $('#datetimepicker5').datetimepicker({
                                                        viewMode: 'years',
                                                        format: 'DD/MM/YYYY'

                                                    });
                                                });
                                            </script>
                                        </div>
                                    </div>



                                    <div class="form-group col-sm-10">
                                        <div class="form-group col-sm-10">
                                            <textarea name="person_address" class="form-control" placeholder="Please type Payment Description"></textarea>
                                        </div>
                                    </div>




                                    <div class="checkbox col-sm-6" >
                                        <button type="submit" id="submit" class="btn btn-success">Submit</button>
                                        <a href="student_management.html" class="btn btn-success">Cancel</a>
                                    </div>
                                </form>

                                <div class="col-sm-12"><br></div>


                            </div>   
                        </div>
                        <!-- / select Course tab -->

                        <!-- Payment tab -->
                        <div class="tab-pane" id="payment">
                            <div class="tab-content panel-body">


                                <div class="col-sm-12"><br></div>
                                <div class="col-sm-12" >


                                    <div class="col-sm-12 gray_ttc text-left" style="border-bottom: 2px solid #a70b0c;padding-top: 10px;padding-bottom: 10px;font-weight: bold">

                                        <div class="col-sm-3">Description</div>
                                        <div class="col-sm-2">Unit Price</div>
                                        <div class="col-sm-1">Quantity</div>
                                        <div class="col-sm-1">Discount</div>
                                        <div class="col-sm-2">Total</div>
                                        <div class="col-sm-2">Date</div>
                                        <div class="col-sm-1">Action</div>
                                    </div>
                                    <div class="col-sm-12"><br></div> 
                                    <div class="col-sm-12 gray_ttc text-left" >

                                        <div class="col-sm-3" style="padding: 10px ">Laravel the PHP Framework </div>
                                        <div class="col-sm-2" style="padding: 10px">10000</div>
                                        <div class="col-sm-1" style="padding: 10px">1</div>
                                        <div class="col-sm-1" style="padding: 10px">10%</div>
                                        <div class="col-sm-2" style="padding: 10px">9000</div>
                                        <div class="col-sm-2" style="padding: 10px">14/09/2015</div>
                                        <div class="col-sm-1" style="padding: 10px"><a href="payment_invoice.html">Invoice</a></div>

                                    </div>
                                    <div class="col-sm-12"><br></div> 
                                    <div class="col-sm-12 white_ttc text-left" >

                                        <div class="col-sm-3" style="padding: 10px ">Laravel the PHP Framework </div>
                                        <div class="col-sm-2" style="padding: 10px">10000</div>
                                        <div class="col-sm-1" style="padding: 10px">1</div>
                                        <div class="col-sm-1" style="padding: 10px">10%</div>
                                        <div class="col-sm-2" style="padding: 10px">9000</div>
                                        <div class="col-sm-2" style="padding: 10px">14/09/2015</div>
                                        <div class="col-sm-1" style="padding: 10px"><a href="payment_invoice.html">Invoice</a></div>

                                    </div>


                                    <nav class="course-pagination">
                                        <ul class="pagination">
                                            <li>
                                                <a href="#" aria-label="Previous">
                                                    <span aria-hidden="true" title="First Page">&laquo;&laquo;</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" aria-label="Previous">
                                                    <span aria-hidden="true" title="Previous Page">&laquo;</span>
                                                </a>
                                            </li>
                                            <li><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li>
                                                <a href="#" aria-label="Next">
                                                    <span aria-hidden="true" title="Next Page">&raquo;</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" aria-label="Next">
                                                    <span aria-hidden="true" title="Last Page">&raquo;&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>

                                <div class="col-sm-12"><br></div>
                            </div>   
                        </div>
                        <!-- / select Payment tab -->


                    </div>
                </div>

            </div>




        </div>



    </div>


</div>