<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" integrity="sha256-uXf0U0UCIqBp2J3S53b28h+fpC9uFcA8f+b/NNmiwVk=" crossorigin="anonymous" />
    <title>Upload Video</title>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
  </head>
  <body>

    <div class="container-fluid">
        <div class="row">
            <?php include("sidebar.php"); ?>


            <div class="col-md-10" style="background:rgb(0,0,0);position:;margin-left:;height:800px;float:right;">

                <nav class="navbar navbar-light bg-light">
                  <p class="mb-0 h1 btn" id="myBtn" style="border:solid 1px #d4d4d4;box-shadow:0px 0px 3px #e5e5e5;text-align:right;"><i class="fa fa-upload"></i> New Upload</p>
                </nav>

                <br><br>

                <table class="table bg-light">
                    <tr>
                        <th><input type="checkbox" style="width:18px;height:18px;"></th>
                        <th>Video</th>
                        <th>Visibility</th>
                        <th>Date</th>
                        <th>Views</th>
                    </tr>
                    <tr>
                        <td><input type="checkbox" style="width:18px;height:18px;"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <th></th>
                    </tr>
                </table>
 

                      <!-- The Modal -->
                      <div class="modal fade" id="myModal">
                        <div class="modal-dialog modal-lg modal-dialog-centered">
                          <div class="modal-content">
                          
                            <!-- Modal Header -->
                            <div class="modal-header">
                              <h4 class="modal-title">Upload videos</h4>
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            
                            <!-- Modal body -->
                            <div class="modal-body">
                              <form method="post" enctype="multipart/form-data" action="" autocomplete="off">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td><label>Title</label></td>
                                        <td><input type="text" class="form-control" /></td>
                                    </tr>
                                    <tr>
                                        <td><label>Description</label></td>
                                        <td><textarea class="form-control"></textarea></td>
                                    </tr>
                                    <tr>
                                        <td><label>Select File</label></td>
                                        <td><input type="file" class="form-control" /></td>
                                    </tr>
                                    
                                </table><br>
                                <input type="submit" value="Upload" class="btn btn-success" style="margin:auto;" />
                              </form> 
                            </div>
                            
                            <!-- Modal footer -->
                            <!--<div class="modal-footer">-->
                            <!--  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>-->
                            <!--</div>-->
                            
                          </div>
                        </div>
                      </div>
                     


                        <!--<form id="image_upload_form" method="post" enctype="multipart/form-data" action='ajaxupload.php' autocomplete="off">-->
                        <!--    <div id="preview"></div>-->
                        <!--    Title-->
                        <!--    <input type="text" class="form-control"><br>-->
                        <!--    Description-->
                        <!--    <input type="text" class="form-control"><br>-->
                        <!--    Select File-->
                        <!--    <input type="file" name="photo" id="photo" class="file_input form-control" />-->
                        <!--    <br/>-->
                        <!--    <button class="btn btn-block btn-primary btn-upload">Upload</button>-->
                        <!--</form>-->





                
            </div>            
            
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<script>
$(document).ready(function(){
  $("#myBtn").click(function(){
    $("#myModal").modal({backdrop: "static"});
  });
});
</script>


  </body>
</html>