<section class="col-sm-12">
    <div class="col-sm-12">
        <!-- --------------------Left Side Menu start--------------------------- -->
        <div class="col-sm-3 form-group">

            <!-- --------------------Categories part start--------------------------- -->
            <div class="gray col-sm-12">
                <h3 style="text-align: left !important;padding-left: 20px; font-size: 18px;">Categories</h3>
                <ul id="category_view" style="text-align: left !important;padding-left: 22px; font-size: 16px">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="fa fa-globe" title="All"></i> &nbsp; 
                            All Courses
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="fa fa-book"></i> &nbsp; 
                            Php Video Course Topic
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-12 form-group"></div>
            <!-- --------------------Categories part End--------------------------- -->


            <!-- --------------------Resource Person Other Courses start--------------------------- -->
            <div class="white  col-sm-12">
                <h3 style="text-align: left !important;padding-left: 20px; font-size: 18px;">Resource Persons Other Courses</h3>
                <ul id="category_view" style="text-align: left !important;padding-left: 22px; font-size: 16px">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="fa fa-file-video-o"></i> &nbsp; 
                            Php Video Course 3
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="fa fa-file-video-o"></i> &nbsp; 
                            Php Video Course 4
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-12 form-group"></div>
            <!-- --------------------Resource Person Other Courses End--------------------------- -->


            <!-- --------------------Similer Topic's Videos part start--------------------------- -->        
            <div class="gray  col-sm-12">
                <h3 style="text-align: left !important;padding-left: 20px; font-size: 18px;">Similer Topic's Videos</h3>
                <ul id="category_view" style="text-align: left !important;padding-left: 22px; font-size: 16px">
                    <li>
                        <a href="javascript:void(0)" id="video_name"
                           onclick="videoLoad()" >
                            <i class="fa fa-play-circle"></i>
                            Php Video 2
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" id="video_name"
                           onclick="videoLoad()" >
                            <i class="fa fa-play-circle"></i>
                            Php Video 3
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-12 form-group"></div>
            <!-- --------------------Similer Topic's Videos part End--------------------------- -->                

        </div>
        <!-- --------------------Left Side Menu End--------------------------- -->


        <!-- --------------------Middle Part Start--------------------------- -->
        <div class="col-sm-9  form-group">
            <div class="row">
                <div class="col-sm-12">

                    <!-- -----------Video Player section part Start------------- -->
                    <div class="gray col-sm-12">
                        <div class="col-sm-12 ">
                            <div class="col-sm-12 form-group">
                                <center>
                                    <span class="h2" >
                                        <?php echo $single_video_course_info->video_course_title;?>
                                    </span>&nbsp;
                                    <?php 
                                      if($single_video_course_info->video_course_payment_type == 1){
                                    ?>
                                    <span>
                                        <a href="">
                                            <img src="<?php echo base_url();?>image/registration-icon.png"> 
                                        </a>
                                    </span>
                                    <?php
                                        }else{
                                    ?>
                                    &nbsp;
                                    <?php
                                        }
                                    ?>
                                </center>
                            </div>

                            <div class="col-sm-10 col-sm-offset-1 text-center form-group" id="video-container">
                                <div class="row">
                                    <video poster="<?php echo base_url('image/tt_single_video_view.png'); ?>" controls>                                        
                                    </video>
                                </div>

                                <div class="col-sm-12 text-center form-group">
                                    Section 1 : Php Video 1
                                </div>
                            </div>

                            <!-- -----------Video course Share part Start------------- -->
                            <?php
                            $share_video_url = base_url();
                            //                        $share_video_url = 'http://talhatraining.com/bangla-video-training-object-oriented-programming-with-php-and-mysql';
                            ?>
                            <div class="col-sm-8 col-sm-offset-2 form-group" style="text-align: center">
                                <a class="btn btn-facebook-custom" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($share_video_url); ?>">
                                    <i class="fa fa-facebook"></i>
                                </a>
                                <a class="btn btn-google-custom" target="_blank" href="https://plus.google.com/share?url=<?php echo urlencode($share_video_url); ?>">
                                    <i class="fa fa-google-plus"></i>
                                </a> 
                                <a class="btn btn-twitter-custom" target="_blank" href="https://twitter.com/intent/tweet?text='<?php echo $share_video_url; ?>'">
                                    <i class="fa fa-twitter"></i>
                                </a> 
                            </div>
                            <!-- -----------Video course Share part End------------- -->

                        </div>
                    </div>
                    <!-- -----------Video Player section part End------------- -->


                    <div class="row tab-bg">
                        <div class="col-sm-4" style="padding-top:35px;">
                            <div class="col-sm-12" style="border: 2px solid #eee;">
                                <br>

                                <!-- -----------Video Course section Search Start------------- -->                    
                                <div class="input-group">
                                    <input type="text" 
                                           class="form-control" 
                                           placeholder="Search Video.."
                                           id="search_video_course"
                                           name="search_video_course"
                                           oninput="searchVideo(this.value)">
                                    <span class="input-group-addon" style="background-color:#80c12c">
                                        <i style="color:#fff" class="fa fa-search"></i>
                                    </span>
                                </div>
                                <!-- -----------Video Course section Search End------------- -->                    
                                <br>


                                <div id="view_video_menu">

                                    <!-- -----------------Video Course section part Start------------- -->                        
                                    <div class="col-sm-12 panel-group" 
                                         id="accordion" role="tablist" 
                                         aria-multiselectable="true">
                                        <div class="panel panel-default">
                                            <div class="panel-heading" role="tab" id="heading">
                                                <i class="indicator fa fa-caret-down"></i>
                                                <a class="accordion-toggle" data-toggle="collapse" 
                                                   href="#collapseSec" aria-expanded="true">
                                                    Section 1
                                                </a>
                                            </div>

                                            <div id="collapseSec" class="panel-collapse collapse in" 
                                                 role="tabpanel" aria-labelledby="headingOne">

                                                <div class="panel-body">
                                                    <a href="javascript:void(0)" class="col-sm-12" id="video_name"
                                                       onclick="videoLoad()" >
                                                        <i class="fa fa-play-circle"></i>
                                                        Php Video
                                                        <span class="pull-right"></span>
                                                    </a><br>
                                                    <a href="javascript:void(0)" class="col-sm-12" id="video_name"
                                                       onclick="videoLoad()" >
                                                        <i class="fa fa-play-circle"></i>
                                                        Php Video 2
                                                        <span class="pull-right"></span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- -----------------Video Course section part End------------- -->                        
                                </div>

                            </div>
                        </div>

                        <div class="col-sm-8" style="padding-left:0;">
                            <div class="course-detail-tab">
                                <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                                    <li class="active"><a href="#course-detail" data-toggle="tab">Course detail</a></li>
                                    <li><a href="#work-files" data-toggle="tab">Work files</a></li>
                                </ul>
                                <div id="my-tab-content" class="tab-content">

                                    <!-- ------------------course-detail tab--------------------- -->
                                    <div class="tab-pane active" id="course-detail">
                                        <div class="tab-content panel-body"><br>
                                            <div class="col-sm-12"><br></div>
                                            <div class="col-sm-12 text-left">
                                                <?php 
                                                   if($single_video_course_info->video_course_payment_type == 1){ 
                                                ?>
                                                    <span>
                                                        <strong>Paid</strong>
                                                    </span> <br> <br>
                                                    
                                                <?php
                                                   }else{
                                                ?>
                                                    <span>
                                                        <strong>Free</strong>
                                                    </span>  <br><br>
                                                <?php
                                                   }
                                                ?>
                                            </div>
                                            <div class="col-sm-12 text-left" >
                                                <span><strong>Course Details:</strong></span><br><br>
                                                <span >
                                                    <?php echo $single_video_course_info->video_course_description;?>
                                                </span> <br> <br>
                                                <br>
                                            </div>

                                            <!--// for google adsense-->
                                            <div class="col-sm-12"><br>
                                                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                                                <!--     TT two -->
                                                <ins class="adsbygoogle"
                                                     style="display:block"
                                                     data-ad-client="ca-pub-3140114751019908"
                                                     data-ad-slot="9567828225"
                                                     data-ad-format="auto"></ins>
                                                <script>
                                                           (adsbygoogle = window.adsbygoogle || []).push({});
                                                </script>
                                            </div>
                                            <!--// for google adsense-->

                                        </div>
                                    </div>
                                    <!-- ------------------course-detail tab--------------------- -->


                                    <!-- -------------------work-files tab----------------------- -->
                                    <div class="tab-pane" id="work-files">
                                        <div class="tab-content panel-body text-left">
                                            <br>
                                            <h3>Work Files</h3>
                                            <p class="text-justify">
                                                <br>
                                                <a href="javascript:void(0)" target="_blank" onclick="downloadWorkFile()">
                                                    <i class="fa fa-download"></i>
                                                    Php Work file
                                                </a>
                                            </p>

                                            <!--// for google adsense-->
                                            <div class="col-sm-12"><br>
                                                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                                                <!--  TT two -->
                                                <ins class="adsbygoogle"
                                                     style="display:block"
                                                     data-ad-client="ca-pub-3140114751019908"
                                                     data-ad-slot="9567828225"
                                                     data-ad-format="auto"></ins>
                                                <script>
                                                    (adsbygoogle = window.adsbygoogle || []).push({});
                                                </script>
                                            </div>
                                            <!--// for google adsense-->


                                        </div>
                                    </div>
                                    <!-- -------------------work-files tab----------------------- -->
                                </div>
                            </div><!-- /.course-detail-tab -->
                        </div><!-- /.col-md-8 .col-sm-12 -->


                        <!--// for google adsense-->
                        <div class="col-sm-12"><br>
                            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                            <!-- TT three -->
                            <ins class="adsbygoogle"
                                 style="display:block"
                                 data-ad-client="ca-pub-3140114751019908"
                                 data-ad-slot="2044561420"
                                 data-ad-format="auto"></ins>
                            <script>
                                                    (adsbygoogle = window.adsbygoogle || []).push({});
                            </script>
                            <br>
                        </div>
                        <!--// for google adsense-->


                    </div>
                </div><!-- /.gray -->

            </div>

        </div>
        <!-- --------------------Middle Part End--------------------------- -->
    </div>
</section> 
<script src="<?php echo base_url('resource_library/js-video-player/plyr.js'); ?>"></script>


