<script type="text/javascript">
$(document).ready(function(e) {
$("#faculty").on('submit' ,(function(e) {
e .preventDefault();
$("#message").empty();
$('#loading').show();
$ .ajax({
url : "control.php" , //Url to which the request issend
type : "POST" , //Type of request to be send,called as method
data : new FormData(this), //Data sent to server, a set of key/value pairs(i.e.form fields and values)
contentType : false, //The content type used when sending data to the server.
cache : false , //To unable request pages to be cached
processData : false, //To send DOMDocument or non processed data file it is set to false
beforeSend : function(){
            $('#loading').show();
        },
success: function(data) //A function to be called if request succeeds
{
$('#loading').hide();
document.getElementById('inputHere').innerHTML = data;
$('#myModal').modal('show');
document.getElementById('fname').value = "";
}
});
}));
});
</script>
                  <div class="x_content">
                    <div class="well">
                    
                  <?php
                  $select0 = $conn->query("SELECT * FROM documents WHERE package = '$vlink' AND type = 'audio'");
                      $fetch = $select0->fetchAll(PDO::FETCH_OBJ);
                      $count = $select0->rowCount();
                      if ($count > 0) {
                        foreach ($fetch as $value) {
                          $doceid = $value->id;
                          $title = $value->title;
                          $description = $value->description;
                          $doc = $value->doc;
                        ?>
                        <div class="row">
                        <div class="col-12">
                           <div class="panel panel-default">
                              <div class="panel-body">
                                    <h3 class="text-center"><?php echo "$title"; ?></h3>
                                    <h2 class="text-center"><?php echo "$description"; ?></h2>
                              <div style="border: 1px solid #8bc34a; border-radius: 5px; margin: 10px; padding: 10px;">
                                <audio controls>
                                  <source src="document/<?php echo "$doc"; ?>">
                                </audio>
                              </div>
                                    
                              </div>
                           </div> 
                        </div>
                      </div>
                        <?php

                        }
                      }else{
                    ?>
                    <h2>No Audio Yet</h2>
                    <?php
                      }
                  ?>

                </div>
            </div>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-body text-center">
        <div id="inputHere">

        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
        </div>
      </div>
    </div>
  </div>
</div>
