<div id="error_del_project"></div>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover"  style="background-color:white;" id="table_direc">
    <thead>
      <tr>
        <th>#</th>
        <th>Director Name</th>
        <th>Director Position</th>
        <th>Director Image</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
        <?php 
            include('../config/config.php');
            $sql = "SELECT * FROM directors ";
            $res = $conn->query($sql);
            $n = 0;
            while($row = $res->fetch_assoc()){
        ?> 
        <tr>
           <td width="5%"><?php echo ++$n; ?></td>
           <td width="30%"><?php echo $row['d_name']; ?></td>
           <td width="20%"><?php echo $row['d_postion']; ?></td>
           <td width="20%"><?php echo '<img src="'."../".$row['d_image'].'" width="100%" class="img-responsive"/>' ?></td>
           <td width="5%"><a href="edit_direc.php?q=<?php echo $row['d_id']; ?>" class="btn btn-success edit_direc" atr="">Edit</a></td>
           <td width="5%"><button class="btn btn-danger del_direc" atr="<?php echo $row['d_id']; ?>">Delete</button></td>
         </tr>
          
          <?php 
          }
          ?>
    </tbody>
  </table>
  </div>
<script src="dist/js/jquery.validate.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
 $(document).ready (function(){
            $("#del-alert").hide();
 });

  $(function () {
    $('#table_direc').DataTable({
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true
    })
  })
  

  $(".del_direc").click(function(){
        var q =  $(this).attr("atr");
       if(confirm('Warning confirm delete directors  !!!  ')){
          $.ajax({
            url:"del_direc.php",
            type:"post",
            data:{q:q},
          }).done(function(data){
            if(data == 1){
              $("#error_del_project").html('<div class="alert alert-danger" id="del-alert"><strong>Success! </strong>Delete Directors</div>').delay(3000).fadeOut(function(){ $("#table_director").load('table_director.php'); }); 
              
            }else{
              console.log(data);
              return false;
            }
          });
      }else{
        console.log(data);
              return false;
      }
    });
</script>