<!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>Live Stream</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>
<?php include("db.php"); ?>
    <div class="container-fluid">
        <div class="row">

        <?php include('sidebar.php'); ?>

            <!--<div class="col-md-2 bg-dark text-white" style="position:;height:800px;float:left;z-index:999">-->
            <!--    <h6 class="pt-4"><i class="fa fa-lock" style="width:30px"></i> Authenticate</h6>-->
            <!--    <a href="livestream.php" style="color:white;"><h6 class="pt-4"><i class="fa fa-desktop" style="width:30px"></i> Stream</h6></a>-->
            <!--    <h6 class="pt-4"><i class="fa fa-dashcube" style="width:30px"></i> Manage</h6>-->
            <!--    <a href="uploadvideo.php" style="color:white;"><h6 class="pt-4"><i class="fa fa-upload" style="width:30px"></i> Upload Video</h6></a>-->
            <!--    <h6 class="pt-4"><i class="fa fa-video-camera" style="width:30px"></i> Live Previous Videos</h6>-->
            <!--</div>-->

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


                <div class="row">
                    
                    <div class="col-md-12 text-white" id="streamdiv" style="display:none;">
                        
                        <div class="col-md-8 bg-dark" style="display:inline-block;position:relative;"><br>
                            
                            <div class="col-md-8" style="display:inline-block;position:relative;">
                                <video width="400" height="240" controls>
                                  <source src="movie.mp4" type="video/mp4">
                                  <source src="movie.ogg" type="video/ogg">
                                </video>
                            </div>
                            <div class="col-md-3" style="display:inline-block;position:absolute;">
                                <p>Title</p>
                                <p id="videotitle"></p><br>
                                <p>Category</p>
                                <p id="">Education</p>
                            </div>
                            <hr style="border:solid 3px;color:black;">
                            <div class="col-md-12"><br>
                                <p>Stream Key</p>
                                <input type="text" value="<?php echo $streamkey = substr(hash('sha256', mt_rand() . microtime()), 0, 20); ?>" style="width:400px;border:none;background:transparent;border-bottom:solid 2px white;color:white;" />
                                
                            </div>
                            <br><br>
                        </div>
                        
                        <div class="col-md-3 bg-dark text-white" style="display:inline-block;margin-top:0px;position:absolute;margin-left:10px;height:100%;">
                            <h4 style="background:black;font-style:italic;font-weight:normal;padding:8px;margin:0px -14px;text-align:center;">Live Chat</h4>
                        </div>
                        
                    </div>
                    
                    <div class="col-md-6 offset-3 bg-dark mt-5 pb-4" id="firstdiv">
                        <h4 class="text-white" style="background:#333;margin:0px -15px;padding:8px;text-align:center;">New stream with last used settings</h4>
                        <h6 class="text-white mt-4" style="padding:5px;font-family:arial;">You can create a new live stream by copying stream settings, privacy, and details (title, category, etc.) from a previously completed stream.</h6><br>


                        <select class="form-control" id="previoustest">
                              <option value="Test 1">Test 1</option>
                              <option value="Test 2">Test 2</option>
                              <option value="Test 3">Test 3</option>
                              <option value="Test 4">Test 4</option>
                        </select><br>

                        <button onclick="showreusediv()" class="btn btn-info" style="float:right;">REUSE SETTINGS</button>
                        <button onclick="showdiv()" class="btn btn-link" style="color:white;float:right;">DISMISS</button>

                    </div>
                    
                        <div class="col-md-6 offset-3 bg-dark mt-5 pb-4" id="formdiv" style="display:none;">

                            <h4 class="text-white" style="background:#333;margin:0px -15px;padding:8px;text-align:center;">New stream</h4><br>

                            <input type="text" id="title" placeholder="Create a title" class="form-control" style="border:none;border-bottom:solid 2px white;background:transparent;color:white;"/><br>

                            <input type="text" id="description" placeholder="Add a description" class="form-control" style="border:none;border-bottom:solid 2px white;background:transparent;color:white;"/><br>

                            <select class="form-control" style="border:none;border-bottom:solid 2px white;background:transparent;color:white;">
                              <option value="">Private</option>
                            </select><br>

                            <select class="form-control" style="border:none;border-bottom:solid 2px white;background:transparent;color:white;">
                              <option value="">Education</option>
                            </select><br>

                            <p class="text-white"><i class="fa fa-calendar"></i> Schedule for later 
                                <label class="switch">
                                  <input type="checkbox" onclick="showtimer($(this))" id="arun">
                                  <span class="slider round"></span>
                                </label>
                            </p>
                            
                            <div id="schedulediv" style="display:none;color:white;">
                                <span style="display:inline-block;">
                                    Date<br><input type="date">
                                </span>
                                <span style="display:inline-block;">
                                    Time<br><input type="time">
                                </span>
                                <br>
                            </div>
                            
                            <p style="color:white;"><input type="radio" checked/> No, it's not made for kids</p>
                            
                            <input  onclick="createStream()" type="submit" value="CREATE STREAM" class="btn btn-info" style="float:right;">
                            <button onclick="goback()" class="btn btn-link" style="color:white;float:right;">BACK</button>

                        </div>
                        
                            <div class="col-md-6 offset-3 bg-dark mt-5 pb-4" id="reusediv" style="display:none;">

                            <h4 class="text-white" style="background:#333;margin:0px -15px;padding:8px;text-align:center;">New stream</h4><br>


                            <input type="text" placeholder="Create a title" class="form-control" style="border:none;border-bottom:solid 2px white;background:transparent;color:white;"/><br>

                            <input type="text" placeholder="Add a description" class="form-control" style="border:none;border-bottom:solid 2px white;background:transparent;color:white;"/><br>

                            <select class="form-control" style="border:none;border-bottom:solid 2px white;background:transparent;color:white;">
                              <option value="">Private</option>
                            </select><br>

                            <select class="form-control" style="border:none;border-bottom:solid 2px white;background:transparent;color:white;">
                              <option value="">Education</option>
                            </select><br>


                            <div id="schedulediv" style="color:white;">
                                <span style="display:inline-block;">
                                    Date<br><input type="date">
                                </span>
                                <span style="display:inline-block;">
                                    Time<br><input type="time">
                                </span>
                                <br>
                            </div>
                             
                            <p style="color:white;"><input type="radio" checked/> No, it's not made for kids</p>
                            
                            <input type="submit" value="CREATE STREAM" class="btn btn-info" style="float:right;">
                            <button onclick="goback()" class="btn btn-link" style="color:white;float:right;">BACK</button>

                        </div>
                    
                </div>


                
            </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 type="text/javascript">
    function showdiv(){
     document.getElementById('firstdiv').style.display='none';
     document.getElementById('formdiv').style.display='block';   
    }
    function showreusediv(){
     document.getElementById('firstdiv').style.display='none';
     document.getElementById('reusediv').style.display='block';   
    }
    function goback(){
     document.getElementById('firstdiv').style.display='block';
     document.getElementById('formdiv').style.display='none';
     document.getElementById('reusediv').style.display='none';
    }

    function createStream(){
        var title = document.getElementById('title').value;
        var description = document.getElementById('description').value;
        // if(title == ""){
        //     alert('Please enter title');
        // }
        // else if(description == ""){
        //     alert('Please enter Description');
        // }
        // else {
         document.getElementById('videotitle').innerHTML = title;
         document.getElementById('firstdiv').style.display = 'none';
         document.getElementById('formdiv').style.display  = 'none';
         document.getElementById('reusediv').style.display = 'none';
         document.getElementById('streamdiv').style.display = 'block';
        //}
    }

    function showtimer(t){
        if (t.is(':checked')) {
            document.getElementById('schedulediv').style.display = 'block';
        } else {
            document.getElementById('schedulediv').style.display = 'none';
        }
    }

</script>
  </body>
</html>