<?php include_once('header.php'); ?>

    <div class="container mt-3">
      <div class="card-deck mb-3 text-center">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 mt-3 border-bottom" style="width: 100%;">
            <h1 class="h2">Success Stories </h1>
            <div class="btn-toolbar mb-2 mb-md-0">
              <div class="btn-group mr-2">
                <a class="btn btn-sm btn-outline-secondary" href="create-story.php" id="">Add New Story</a>
              </div>
            </div>
          </div>

          <div id="error"></div>

          <div class="table-responsive">
            <div id="live_data" style="width: 100%; text-align: left;"></div>
          </div>
      </div>

    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="../../js/vendor/popper.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/vendor/holder.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../../js/validation.min.js"></script>
    <script src="../../js/tables/jquery.dataTables.js"></script>
    <script src="../../js/tables/dataTables.bootstrap4.js"></script>

     <!--  summernote JS
        ============================================ -->
    <script src="../../js/summernote/summernote-updated.min.js"></script>
    <script src="../../js/summernote/summernote-active.js"></script>

    <script>
      (function($) {
         $('#edit-vacancy').hide();//hide new user form on page load
      'use strict';
      $(function() {
        $('#order-listing').DataTable({
          "aLengthMenu": [
          [10, 20, 35, -1],
          [10, 20, 35, "All"]
          ],
          "iDisplayLength": 10
        });
      });
    })(jQuery);


    function fetchData(){
      $.ajax({
          url:"select-stories.php",
          method:"POST",
          success:function(data){
               $('#live_data').html(data);
          }
         });
    }
      $(document).ready(function(){

        //loads system users
        $.ajax({
          url:"select-stories.php",
          method:"POST",
          success:function(data){
               $('#live_data').html(data);
          }
         });



        $('#new-vacancy').hide();//hide new user form on page load
        //when a new user button has been clicked
        $('#new_vacancy').click(function(){
          $("#new-vacancy").show();
          $("#hide").click(function(){$("#new-vacancy").hide();})
        });

       


      });
      
 //delete vacancy details details
      $(document).on('click', '.btn_delete', function(){
             var id=$(this).data("id3");
             var delete_post="delete_story";
             //alert(user+" "+id);
             if(confirm("Are you sure you want to remove this story post?"))
             {
                  $.ajax({
                       url:"sql_statements.php",
                       method:"POST",
                       data:{post_id:id, action:delete_post},
                       dataType:"text",
                       success:function(data){
                            //alert(data);
                          if(data == 1){
                              $("#error").fadeIn(2000, function(){
                              $("#error").html('<div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button><span class="icon icon-ok-circle"></span>&nbsp; A story post has been removed!</div>');
                                  });//Your username/password entered doesn't match
                            $("#error").fadeOut(5000,function(){});
                            }
                            fetchData();
                       }
                  });
             }
        });

      //show vacancy details
      $(document).on('click', '.show_btn', function(){
            var id=$(this).data("id3");
            var show_post = 'show_story';

            //alert(id);
            //alert(id);
            $.ajax({
                   url:"sql_statements.php",
                   method:"POST",
                   data:{post_id:id, action:show_post},
                   dataType:"text",
                   success:function(data){
                        //alert(data);
                      if(data == 1){
                          $("#error").fadeIn(2000, function(){
                          $("#error").html('<div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button><span class="icon icon-ok-circle"></span>&nbsp; A story post can now be accessed by the public!</div>');
                              });//Your username/password entered doesn't match
                        $("#error").fadeOut(5000,function(){});
                        }
                        fetchData();
                   }
              });

        });

      //show vacancy details
      $(document).on('click', '.hide_btn', function(){
            var id=$(this).data("id3");
            var hide_post='hide_story';
            $.ajax({
                   url:"sql_statements.php",
                   method:"POST",
                   data:{post_id:id, action:hide_post},
                   dataType:"text",
                   success:function(data){
                      //alert(data);
                      if(data == 1){
                          $("#error").fadeIn(2000, function(){
                          $("#error").html('<div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button><span class="icon icon-ok-circle"></span>&nbsp; A story post has been hidden from the public!</div>');
                              });//Your username/password entered doesn't match
                        $("#error").fadeOut(5000,function(){});
                        }
                        fetchData();
                   }
              });

        });
      Holder.addTheme('thumb', {
        bg: '#55595c',
        fg: '#eceeef',
        text: 'Thumbnail'
      });

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