
<div class="col-sm-8">
    <div class="row " id="MoveVideoForm" style="display: none">
        <div class="col-sm-12 ">
            
            <div class="col-sm-12 gray_ttc padding-zero">
                <div class="col-sm-12 form-group text-left"><h3>Video Section Name : Video Name</h3></div>
                <div class="form-group col-sm-6">
                        <select data-errormessage-value-missing="Video Section is required!"
                                class="form-control validate[required]"
                                name="">
                            <option value="">--Select Video Section--</option>
                            <option value="1">Video Section 1 </option>
                            <option value="2">Video Section 2</option>
                            <option value="3">Video Section 3</option>
                            <option value="4">Video Section 4</option>
                            <option value="5">Video Section 5</option>

                        </select>
                    </div>
                <div class="form-group col-sm-6">
                    <select onchange="AfterVideo(this.value)" data-errormessage-value-missing="Video Order is required!"
                                class="form-control validate[required]"
                                name="">
                            <option value="">--Select Video Order--</option>
                            <option value="1">First</option>
                            <option value="2">After</option>
                            <option value="3">Last</option>
                        </select>
                </div>
                <div class="form-group col-sm-6" id="VideoList" style="display: none">
                        <select data-errormessage-value-missing="Video Name is required!"
                                class="form-control validate[required]"
                                name="">
                            <option value="">--Select Video Name--</option>
                            <option value="1">Video 1</option>
                            <option value="1">Video 2</option>
                            <option value="1">Video 3</option>
                            <option value="1">Video 4</option>
                        </select>
                </div>
                <div class="form-group col-sm-12">
                    <div class="form-group col-sm-3 col-sm-offset-3">
                        <button type="button" class="green-btn btn btn-default">Move Video</button>
                    </div>
                    <div class="form-group col-sm-3">
                        <button id="CancelBtn" type="button" class="green-btn btn btn-default">Cancel</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-12"><br></div>
            
         </div>
    </div>
    
    <div class="row ">
        <div class="col-sm-12 ">
            
            <div class="col-sm-12 text-left padding-zero">
                <h3 style="margin-top: 0px">Video Details</h3>
                <hr>
            </div>
            
            <div class="col-sm-12 gray_ttc padding-zero" style="font-size: 14px;font-weight: bold;border-bottom: 2px solid #80C12C">
                <div class="col-sm-12 form-group"></div>
                
                <div class="form-group col-sm-3">
                      Section Name
                </div>
                <div class="form-group col-sm-4">
                      Video Name
                </div>
                <div class="form-group col-sm-3">
                      Work File Name
                </div>
                <div class="form-group col-sm-2">
                      Action
                </div>
            </div>
            
            <div class="col-sm-12 form-group"></div>
            
            <div class="col-sm-12 gray_ttc padding-zero" >
                <div class="col-sm-12"><br></div>
                
                <div class="form-group col-sm-3">
                      Section 1
                </div>
                
                <div class="form-group col-sm-4">
                      Video 1
                </div>
                <div class="form-group col-sm-3">
                      File 1
                </div>
                
                <div class="form-group col-sm-2">
                    <a href="javascript:void(0)" id="BtnMoveVideo"><i class="fa fa-exchange" title="Move Video"></i></a>
                    <span>&nbsp;&nbsp;</span>
                    <a href=""><i class="fa fa-trash" title="Delete"></i></a>
                </div>
                
            </div>
            
         </div>
    </div>
</div>

<!--
-----AfterVideo function start---
-----By Suddam Hossain----------
-----16-05-2016-----------------
--for video list option none or block-->

<script>
    function AfterVideo(Obj){
        var VideoList = document.getElementById("VideoList");
        if(Obj === '2'){
            VideoList.style.display = "block"; 
        }
        else{
            VideoList.style.display = "none"; 
        }
    }
</script>

<!--AfterVideo function end-->


<!--
-----jquery onclick function start---
-----By Suddam Hossain----------
-----16-05-2016-----------------
--for video order form open or close-->
<script>

    $(document).ready(function ()
    {
        $("#BtnMoveVideo").click(function ()
        {
            $("#MoveVideoForm").slideDown('slow'); //slideUp() method slides-down the selected elements.
        });
        $("#CancelBtn").click(function ()
        {
            $("#MoveVideoForm").slideUp('slow'); //slideUp() method slides-down the selected elements.
            
        });
    });
    
 </script>
 
 <!--jquery onclick function end-->