<!---------   
=== Theme Author : Evan Ahmed EMon
=== Theme Designed By: TWG
=== Contact Whatsapp: +8801864614704
 ----------->  
 
 <?php include 'header.php'; ?>
 <style>
  .category-list-div {
    margin-bottom: 20px;
    height: 80vh;
    overflow-y: auto;
    width: 100%;
  }

  .category-sort-handle {
    margin-right: 10px;
    font-size: 25px;
    font-weight: bold;
    cursor: move;
    cursor: -webkit-grabbing;
  }

  .list-group {
    margin: 10px;
  }

  /* New CSS rules */
  .margin-top-container {
    margin-top: 20px; /* Adjust as needed */
  }

  /* Styling for list items */
  .list-group-item {
    background-color: #ebd698; /* Light blue background */
    border: 2px solid #b3e0ff; /* Light border */
    padding: 15px; /* Increased padding */
    margin-bottom: 10px; /* Increased margin */
    color: #333; /* Dark text color */
    font-weight: bold; /* Bold text */
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition */
  }

  /* Hover effect for list items */
  .list-group-item:hover {
    background-color: #98ebaa; /* Light blue hover background */
  }
</style>
 
<div class="container margin-top-container">
  <div class="row">
    <div class="col-md-6 col-12 category-list-div">
      <ul id="category-list" class="list-group col">
<?=$list?>
</ul>


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



<?php include "footer.php";?>
<script>

$(document).ready(function() {
  $("#category-list").sortable({
    group: "list",
    handle: ".category-sort-handle",
    draggable: ".list-group-item",
    animation: 150,
    scroll: true,
    scrollSensitivity: 30,
    scrollSpeed: 10,
    ghostClass: "blue-background-class",
    dataIdAttr: "data-category-id",
    onUpdate: function (evt) {
      var arr = $("#category-list").sortable('toArray');
      var data = window.btoa(JSON.stringify(arr));
      $.ajax({
        url: '<?= site_url($secure_admin . "/category-sort") ?>',
        data: 'action=sort_category&category_list=' + data,

        type: 'POST',
        success: function (response) {
          iziToast.show({
            icon: 'fa fa-check',
            title: 'Category Positions Updated',
            message: '',
            color: 'green',
            position: 'topCenter'
          });
        }
      });
    }
  });
});
</script>

<script src="https://unpkg.com/sortablejs-make/Sortable.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>