1#@!#!123s

: / var / www / vhosts / sarainternational.ae / httpdocs / admin /
Filename : category.php
back
<?php include('include/header.php');

?>
<style>

.list-item {
	border: 1px solid #EEE;
	background: #FFF;
	margin-bottom: 10px;
	padding: 10px;
	box-shadow: 0px 0px 10px 0px #EEE;
}

.list-item h4 {
	color: #FF7182;
	font-size: 18px;
	margin: 0 0 5px;	
}

.list-item p {
	margin: 0;
}

.simple-pagination ul {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	text-align: center;
}

.simple-pagination li {
	display: inline-block;
	margin-right: 5px;
}

.simple-pagination li a{
    	color: #666;
	padding: 5px 10px;
	text-decoration: none;
	border: 1px solid #EEE;
	background-color: #FFF;
	box-shadow: 0px 0px 10px 0px #EEE;
}
.simple-pagination li span {
	color: #666;
	padding: 5px 10px;
	text-decoration: none;
	border: 1px solid #EEE;
	background-color: #FFF;
	box-shadow: 0px 0px 10px 0px #EEE;
	
}

.simple-pagination .current {
	color: #FFF;
	background-color:#1bc5bd;
	border-color: #1bc5bd;
}

.simple-pagination .prev.current,
.simple-pagination .next.current {
	background:#1bc5bd;
}
</style>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
      <div class="container-full">
        <!-- Content Header (Page header) -->     
        <div class="content-header">
            <div class="d-flex align-items-center">
                <div class="me-auto">
                    <h4 class="page-title">Add Category</h4>
                    
                    <!--<div class="d-inline-block align-items-center">-->
                    <!--    <nav>-->
                    <!--        <ol class="breadcrumb">-->
                    <!--            <li class="breadcrumb-item"><a href="#"><i class="mdi mdi-home-outline"></i></a></li>-->
                    <!--            <li class="breadcrumb-item" aria-current="page">Pages</li>-->
                    <!--            <li class="breadcrumb-item active" aria-current="page">Add Category</li>-->
                    <!--        </ol>-->
                    <!--    </nav>-->
                    <!--</div>-->
                </div>
                
            </div>
        </div>



        <!-- Main content -->
        <section class="content">
        <div class="box">
                <div class="box-header with-border d-flex justify-content-between" >
                  <h4 class="box-title" style="margin-left: 20px;margin-top: 10px;">Category List</h4>
                  <button type="button" class="waves-effect waves-light btn btn-rounded btn-success mb-5 ed-btn text-right"><a href="category-form.php">Add New Category</a></button>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  
                <!--table start-->
          
            <div class="box">
                <div class="box-body no-padding">
                    <div class="table-responsive">
                        <input type="hidden" id="deleteId">
						<input type="search" placeholder="Search By Keyword ..." class="form-control search-input my-3" data-table="customers-list"/>
                      <table class="table table-hover customers-list list-wrapper">
                        <tbody id="showdata">
                            
                         <tr>
                          <th>S No.</th>
                          <th>Category Name</th>
                          <th>Image</th>
                          <th>Date</th>
                          <th colspan="2" class="text-center">Action</th>
                        </tr>
                        <?php 
							 $sno = 1;
							$query = "SELECT * FROM category ";     
       						 $catData = mysqli_query ($conn, $query);   
                        while ($row=mysqli_fetch_array($catData)) { ?> 
                        
                        <tr class="list-item">
                          <td><?php echo  $sno++; ?></td>
                          <td><?php echo $row['categoryName']; ?></td> 
                          <td><?php echo "<img src='".$row['image']."' width='70' height='50' >"; ?></td>
                          <td><span class="text-muted"><i class="fa fa-clock-o"></i> <?php echo $row['createDate']; ?></span> </td> 
                          <td><button type="button" class="waves-effect waves-light btn btn-rounded btn-success mb-5 ed-btn"><?php echo "<a href='cat-edit.php?eid=".$row['id']."'>Edit</a>";?></button></td>
                          <td><button type="button" class="waves-effect waves-light btn btn-rounded btn-danger mb-5 ed-btn"><a onclick="openDeleteModal(<?php echo $row['id']; ?>)" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#delete-item">Delete</a></button></td>
                        </tr>
                        <?php }?>
                      </tbody></table>
						<div id="pagination-container"></div>
                    </div>
                </div>
              </div>
            </div>

              </div>
        </section>
        <!-- /.content -->
      
        <!-- Delete -->
        <div class="modal fade" id="delete-item" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered ">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Delete Categories</h5>
                        <button type="button" class="btn-close close-modal" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fe fe-x"></i>
                        </button>
                    </div>
                    <div>
                        <div class="modal-body py-0">
                            <div class="del-modal">
                                <p>Are you sure want to Delete?</p>
                            </div>
                        </div>
                        <div class="modal-footer pt-0">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" onclick="confirmDelete()" class="btn btn-primary">Yes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Delete -->
        <script>
            function openDeleteModal(id) {
                document.getElementById('deleteId').value = id;
            }
      
            function confirmDelete() {
                // Get the stored ID
                var id = document.getElementById('deleteId').value;
                window.location.href = 'delete.php?did=' + id;
            }
        </script>
      
    
      
      </div>
  </div>
  <!-- /.content-wrapper -->
  
  


<?php include('include/footer.php') ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/jquery.simplePagination.js" integrity="sha512-6Hh5t357FBmgv+xCBoaF9Gbk6sEF00WCH5wC8R1uieSL1R4pN2HFZx/cyE/TdfW+dxtOBWcHF1ZYdV8XLbpprA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    var items = $(".list-wrapper .list-item");
    var numItems = items.length;
    var perPage = 10;

    items.slice(perPage).hide();

    $('#pagination-container').pagination({
        items: numItems,
        itemsOnPage: perPage,
        prevText: "&laquo;",
        nextText: "&raquo;",
        onPageClick: function (pageNumber) {
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;
            items.hide().slice(showFrom, showTo).show();
        }
    });
</script>
<script>
        (function(document) {
            'use strict';

            var TableFilter = (function(myArray) {
                var search_input;

                function _onInputSearch(e) {
                    search_input = e.target;
                    var tables = document.getElementsByClassName(search_input.getAttribute('data-table'));
                    myArray.forEach.call(tables, function(table) {
                        myArray.forEach.call(table.tBodies, function(tbody) {
                            myArray.forEach.call(tbody.rows, function(row) {
                                var text_content = row.textContent.toLowerCase();
                                var search_val = search_input.value.toLowerCase();
                                row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none';
                            });
                        });
                    });
                }

                return {
                    init: function() {
                        var inputs = document.getElementsByClassName('search-input');
                        myArray.forEach.call(inputs, function(input) {
                            input.oninput = _onInputSearch;
                        });
                    }
                };
            })(Array.prototype);

            document.addEventListener('readystatechange', function() {
                if (document.readyState === 'complete') {
                    TableFilter.init();
                }
            });

        })(document);
    </script>