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

    <div class="row gray_ttc">

        <div class="col-sm-10 ">
            <div class="col-sm-12">
                <h3>Update Topics & work File</h3>  
                <hr>

                <nav class="text-justify">
                    <center>
                        <div class="col-sm-12" style="padding: 0">
                            <span class="clo-sm-4" title="Update Tutorial" 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">Update Tutorial </span>
                                    <span class="nav-arrow" id="cborder" style="margin-right: 8px"><img src="<?php echo base_url() ?>images/border.jpg"></span>
                                </a>
                            </span>


                            <span class="clo-sm-4" title="Update 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">Update Topics</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="#" >

                    <!--<div class="col-sm-12  ">-->
                    <div id="add_topics">    
                        <div class="form-group col-sm-12">
                            <div class="input-group">
                                <input 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 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 " id="screen1280" >
                                <center>  <textarea   class="form-control  resoulation1280 " rows="4"   ></textarea></center>
                            </div>

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

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


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

                        <div id="add_work_file">    

                            <div class="col-sm-12"><br> </div>
                            <div class="form-group col-sm-8 col-sm-offset-2 ">
                                <script>
                                    $(":file").filestyle({icon: false});</script>
                                <input type="file" class="filestyle" data-icon="false" >
                            </div>


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

                        </div>

                        <div id="add_more_work_file"></div>


                        <script>
                            var counter = 1;
                            var limit = 500;
                            function AddMoreWorkFile(add_more_work_file)
                            {
                                if (counter == limit) {
                                    alert("You have reached the limit of adding " + counter + " inputs");
                                }
                                else {

                                    var div1 = document.createElement('div');
                                    var div2 = document.createElement('div');
                                    var data1 = document.getElementById('add_work_file').innerHTML;
                                    div2.innerHTML = data1;
                                    div1.appendChild(div2);
                                    document.getElementById(add_more_work_file).appendChild(div1);
                                    counter++;

                                }
                            }
                        </script>

                        <div class="col-sm-12"><br></div>
                        <div class="col-sm-2"></div>
                        <div class="form-group col-sm-3 pull-right">
                            <a href="#" onclick="AddMoreWorkFile('add_more_work_file')" class="green-btn btn btn-success" >Add More Work File </a>
                        </div>



                    </div>

                    <div id="add_more_topics"></div>


                    <script>
                        var counter = 1;
                        var limit = 500;
                        function AddMoreTopics(add_more_topics)
                        {

                            if (counter == limit) {
                                alert("You have reached the limit of adding " + counter + " inputs");
                            }
                            else {

                                var div1 = document.createElement('div');
                                var div2 = document.createElement('div');
                                var data1 = document.getElementById('add_topics').innerHTML;
                                div2.innerHTML = data1;
                                div1.appendChild(div2);
                                document.getElementById(add_more_topics).appendChild(div1);
                                counter++;
                            }
                        }
                    </script>

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

                    <div class="form-group col-sm-3 col-sm-offset-3">
                        <a href="#" onclick="AddMoreTopics('add_more_topics')" class="green-btn btn btn-success" >Add More Topics </a>
                    </div>
                    <div class="col-sm-3">
                        <input type="submit" class="green-btn btn btn-default" value="Add Tutorial !"><br/><br/>
                    </div>


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




                </form>
            </div>

        </div>

    </div>  <!-- /.row gray_ttc -->
    <div class="col-sm-12">    <br><br></div>

    <div class="col-sm-12 gray text-left">
        <label><a href="<?php echo base_url() ?>super_admin">Dashboard </a>->>Update Topics and Work File</label>
    </div> 
    <div class="col-sm-12">    <br><br></div>

</div>