


<div class="col-sm-8">

    <div class="row gray_ttc">


        <div class="col-sm-12 ">
            <div class="col-sm-12">
                <h3>Add Topics</h3>  
                <hr>

                <nav class="text-justify">
                    <center>
                        <div class="col-sm-12" style="padding: 0">
                            <span class="clo-sm-4" title="Course Details" style="padding: 0">
                                <a href="" style="cursor:default;">
                                    <span class="number badge" style="background-color: gray">1</span>
                                    <span class="text-left label" style="color: #000;font-size: 16px;font-weight: normal">Add Tutorial </span>
                                    <span class="nav-arrow" id="cborder" style="margin-right: 8px"><img src="<?php echo base_url()?>image/border.jpg"></span>
                                </a>
                            </span>


                            <span class="clo-sm-4" title="Add Topics" style="padding: 0">
                                <a href="" style="cursor:default;">
                                    <span class="number badge" style="background-color: green">2</span>
                                    <span class="text-left label" style="color: #000 ;font-size: 16px;font-weight: normal">Add Topics</span>
                                    <span class="nav-arrow" id="cborder" style="margin-right: 8px"><img src="<?php echo base_url()?>image/border.jpg"></span>
                                </a>
                            </span>


                            <span class="clo-sm-4" title="Add work file" style="padding: 0">
                                <a href="" style="cursor:default;">
                                    <span class="number badge" style="background-color: gray">3</span>
                                    <span class="text-left label" style="color: #000;font-size: 16px;font-weight: normal">Add work file</span>
                                </a>
                            </span>

                        </div>
                    </center>

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

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


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

                <form action="add_work_file.html" >

                    <!--<div class="col-sm-12  ">-->
                    <div id="add_more_topics">
                        
                        <div id="topics_Section0">    


                            <div class="form-group col-sm-12">
                                <div class="input-group">
                                    <input id="TopicsTitleCounter0" type="text" class="form-control" placeholder="Plesse Type your Topics Title.." aria-describedby="basic-addon1">
                                    <span class="input-group-addon" id="basic-addon1" title="Plesse Type your  Topics Title"><i class="fa fa-book"></i></span>
                                </div>
                            </div>
                            <div class="col-sm-12"><br> </div>
                            <div class="form-group col-sm-6 ">
                                <div class="input-group">
                                    <input id="TopicsURLCounter0" type="text" class="form-control" placeholder="Type your Topics URL.." aria-describedby="basic-addon1">
                                    <span class="input-group-addon" id="basic-addon1" title="Type your Topics URL"><i class="fa fa-link"></i></span>
                                </div>
                            </div>


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



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

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

                                <div class="input-group screen1280"  >
                                    <center>  <textarea id="TopicsEditorCounter00"  class="form-control  resoulation1280 " rows="4"></textarea></center>
                                </div>

                                <div class="input-group screen1024" >
                                    <textarea  id="TopicsEditorCounter01" class="form-control  resoulation1024 " rows="4"></textarea>
                                </div>

                                <div class="input-group screenMobile"  >
                                    <textarea id="TopicsEditorCounter02"  class="form-control  resoulationMobile " rows="4"></textarea>
                                </div>

                                <div class="input-group screenMobile_max499" >
                                    <textarea id="TopicsEditorCounter03"  class="form-control  resoulationMobile_max499 " rows="4"></textarea>
                                </div>

                            </div>


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



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

                    <div class="form-group col-sm-3 col-sm-offset-1">
                        <a href="#" onclick="AddMoreTopics()" class="green-btn btn btn-success" >Add More Topics </a>
                    </div>
                    <div class="col-sm-2">
                        <input type="submit" class="green-btn btn btn-default" value="Next !"><br/><br/>
                    </div>
                    <div class="col-sm-2">
                        <a href="add_work_file.html"  class="btn btn btn-success"> Skip !</a>
                        <br/><br/>
                    </div>

                    <div class="col-sm-4"></div>


                </form>
            </div>

        </div>

    </div>  <!-- /.row gray_ttc -->

</div>

<script>

    var Counter = 0;
    var TopicsTitleCounter = 0;
    var TopicsURLCounter = 0;
    var TopicsEditorCounter = 0;
    var topics_Section_counter = 0;

    function AddMoreTopics() {
//        alert();
        Counter++;

//            document.getElementById("add_video_message" + sectionNumber).innerHTML = '';
        serverPage = '<?php echo base_url(); ?>add-more-topics' + '/' + Counter;
//        alert(serverPage);
        xmlhttp.open("GET", serverPage);
        xmlhttp.onreadystatechange = function ()
        {
//                alert(counter);
//            alert(xmlhttp.readyState);
//            alert(xmlhttp.status);
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
//                alert(xmlhttp.responseText);
                var parent = document.getElementById('add_more_topics');
                var div1 = document.createElement('div');
                div1.setAttribute('id', 'topics' + Counter);
                parent.appendChild(div1);
                var data1 = xmlhttp.responseText;
                div1.innerHTML = data1;
                tinyMCE.execCommand('mceAddControl', true, 'TopicsEditorCounter' + Counter + '0');
                tinyMCE.execCommand('mceAddControl', true, 'TopicsEditorCounter' + Counter + '1');
                tinyMCE.execCommand('mceAddControl', true, 'TopicsEditorCounter' + Counter + '2');
                tinyMCE.execCommand('mceAddControl', true, 'TopicsEditorCounter' + Counter + '3');
            }
        }
        xmlhttp.send(null);
//            document.getElementById('number_of_section_video' + sectionNumber).value = videoCounter;
//            fileCounter++;
//            alert(fileCounter);

    }

</script>