~NAXC~

File Content: `products.php`

<?php include('include/header.php');



$sno = 1;


?>

<style>
	.table-img img{
		    width: 100px;
    height: 80px;
	}
	  .list-wrapper {
	padding: 15px;
	overflow: hidden;
}

.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 Products</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">Products</li>-->
					<!--			<li class="breadcrumb-item active" aria-current="page">Add Products</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;">Products List</h4>
				  <button type="button" class="waves-effect waves-light btn btn-rounded btn-success mb-5 ed-btn text-right"><a href="product-form.php">Add New Product</a></button>
				</div>
				<!-- /.box-header -->
				<div class="box-body">
			
				<!-- /.box-body -->
				
				<div class="box-body no-padding">
				     <input type="hidden" id="deleteId">
					<div class="table-responsive">
				<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 width="5%">S No.</th>
						  <th width="25%">Category</th>
						  <th width="30%">Product</th>
						  <th width="20%">Image</th>
						  <th width="15%">Sku</th>
						  <th colspan="2" width="5%" class="text-center">Action</th>
						</tr>
						<?php
						       
						    $abc = mysqli_query($conn, "select * from products");
						while ($row=mysqli_fetch_array($abc)) { ?> 
						<tr class="list-item" >
						  <td><?php echo $sno++; ?></td>
						   <td>
						       <?php 
						            $sql3 = mysqli_query($conn, "select * from category where id = '".$row['category']."'");
						            $row_cate = mysqli_fetch_array($sql3);
						            echo $row_cate['categoryName']; 
						        ?>
						  </td>
						  <td><?php echo $row['title']; ?></td> 
						  <td class="table-img"><?php echo "<img src='".$row['image']."' >"; ?></td>
						  <td><span class="text-muted"><i class="fa fa-clock-o"></i> <?php echo $row['sku']; ?></span> </td> 
						  <td><button type="button" class="waves-effect waves-light btn btn-rounded btn-success mb-5 ed-btn"><?php echo "<a href='product_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>
			  
        <!-- 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 Product</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 = 'product_delete.php?did=' + id;
            }
        </script>
 
		</section>
		<!-- /.content -->

	  
	  </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>
File Content: products.php

File Content: `products.php`
