<?php
include("header.php");
$query = "SELECT * from product";
$products =db::getRecords($query);
?>
<section id="breadcrumb-alignment">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between breadcrumb-wrapper">
<nav aria-label="breadcrumb ">
<ol class="breadcrumb mt-2">
<li class="breadcrumb-item"><a href="javascript:void(0)"><i class='bx bx-home-alt mx-1'></i>Dashboard</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Products</a></li>
</ol>
</nav>
<?php
if($user_role=='1'){
?>
<nav aria-label="breadcrumb ">
<div class="ml-auto">
<div class="btn-group">
<button type="button" class="btn btn-success bg-success bg-darken-2 m-1 px-5" data-toggle="modal" data-target="#add"><i class="bx bx-image-add mr-1"></i>Add Product</button>
</div>
</div>
</nav>
<?php
}
?>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Breadcrumb Alignment Ends -->
<h2 class="mb-0 text-center h1 text-primary uppercase">Products</h2>
<hr>
<div class="row">
<?php
if($products!=NULL)
{
foreach($products as $product)
{
$product_id = $product['id'];
$query = "SELECT * from product_image where product_id='$product_id' ";
$product_image = db::getRecord($query);
?>
<div class="col-12 col-lg-4 col-xl-4">
<div class="card">
<img src="<?php echo "images/".$product_image['image_name']; ?>" height="300" width="300" class="card-img-top" alt="">
<div class="card-body" style="height:300px;">
<h3 class="text-primary text-center my-2">
<?php
echo $product['name'];
?></h3>
<div class="text-center">
<span class="text-Info "><?php
$status = $product['featured'];
if($status==1){
?>
<div class=" badge badge-glow badge-pill badge-success mb-1 "><?php echo "Featured"; ?></div>
<?php
}else{
echo "<br>";
}
?></span>
</div>
<hr>
<div class="profile-social mt-3 text-center justify-content-between d-flex">
<?php
if($user_role=='1'){
?>
<button type="button" class="btn btn-linkedin text-center bg-info bg-darken-2 text-white float-left" data-toggle="modal" data-target="#view-product<?php echo $product['id']; ?>"><i class="fa fa-eye "></i></button>
<a href="edit_product.php?id=<?php echo $product['id']; ?>" title="Edit Product" class="btn btn-linkedin text-center bg-success bg-darken-2 text-white float-left" ><i class="fa fa-edit "></i></a>
<a href="edit_size.php?id=<?php echo $product['id']; ?>" title="Edit Size" class="btn text-center bg-tumblr bg-darken-2 text-white float-left" ><i class="fa fa-edit "></i></a>
<span onclick="delete_modal('<?php echo $product['id']; ?>')">
<a data-toggle="popover" data-trigger="hover" data-original-title="Delete Category" class="btn btn-pinterest "><i class="bx bx-trash"></i></a>
</span>
<?php
}
?>
</div>
</div>
<div class="modal-size-lg d-inline-block">
<!-- Modal -->
<div class="modal fade text-left" id="view-product<?php echo $product['id']; ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header bg-info">
<h4 class="modal-title my-1 text-white">Product Details</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row justify-content-center">
<?php
$product_id= $product['id'];
$query = "SELECT * from product_image where product_id='$product_id'";
$product_images = db::getRecords($query);
$query = "SELECT * from sizes where product_id='$product_id'";
$sizes_images = db::getRecords($query);
?>
<div class="col-xl-6 col-lg-6 col-md-6 py-4 px-2">
<div class="row justify-content-center">
<div id="slide<?php echo $product['id']; ?>" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators" style="background-color:#04040457;border-radius:50px;">
<?php
if($product_images!=null){
$count=0;
foreach($product_images as $product_image)
{
if($count==0)
{
?>
<li data-target="#slide<?php echo $product['id']; ?>" data-slide-to="<?php echo $count;?>" class="active"></li>
<?php
}
else{
?>
<li data-target="#slide<?php echo $product['id']; ?>" data-slide-to="<?php echo $count;?>"></li>
<?php
}
$count++;
}
}
?>
</ol>
<div class="carousel-inner" role="listbox">
<?php
if($product_images!=null){
$count=0;
foreach($product_images as $product_image)
{
if($count == 0){
?>
<div class="carousel-item active">
<img class="img-fluid w-100" src="<?php echo "images/".$product_image['image_name']; ?>" alt="slide" style="height:400px" />
<div class="carousel-caption">
</div>
</div>
<?php
}
else{
?>
<div class="carousel-item">
<img class="img-fluid w-100" src="<?php echo "images/".$product_image['image_name']; ?>" alt="slide" style="height:400px" />
<div class="carousel-caption">
</div>
</div>
<?php
}
$count++;
}
}
?>
</div>
<a class="carousel-control-prev" href="#slide<?php echo $product['id']; ?>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slide<?php echo $product['id']; ?>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<img src="<?php echo "images/".$product['image_name']; ?>" class="w-100 mt-3">
</div>
<div class="col-md-6">
<h2 class="text-primary ">Name: </h2>
<h5 class="card-title "><?php echo $product['name']; ?></h5>
<?php
$product_id=$product['id'];
$query = "SELECT * from sizes where product_id='$product_id'";
$package_details = db::getRecords($query);
if($package_details!=NULL){
?>
<h2 class="text-primary ">Sizes : </h2>
<?php
if($package_details!=NULL){
foreach($package_details as $package_detail){
?>
<span class="card-title pb-3"> <?php echo $package_detail['title'] ?> <?php echo $package_detail['size'] ?> £<?php echo $package_detail['price'] ?>,</span>
<?php
}
}
}
?>
<h2 class="text-primary ">Benefits:</h2>
<?php echo $product['benefit']; ?>
<h2 class="text-primary ">Description:</h2>
<?php echo $product['description']; ?>
</div>
<?php
if($sizes_images!=null){
foreach($sizes_images as $sizes_image)
{
?>
<div class="col-md-4">
<div>
<img class="img-fluid w-100" src="<?php echo "images/".$sizes_image['image_name']; ?>" alt="slide" style="height:400px" />
</div>
</div>
<?php
}
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
}
else{
echo "Data is not Found!!";
}
?>
</div>
<!-- Modal -->
<div class="modal fade" id="add" data-backdrop="false" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content radius-30">
<div class="modal-header bg-success bg-darken-2 border-bottom-0">
<h3 class="text-white m-1">Add Product</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-5">
<form action="../action.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="form-group">
<label class="h4">Upload Images</label>
<div class="file-upload-wrapper">
<input type="file" name="file[]" multiple class="form-control form-control-lg file-upload" required />
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="h4">Name</label>
<input type="text" name="name" class="form-control form-control-lg radius-30" required />
</div>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" value="1" id="featured" name="status">
<label class="h4 custom-control-label" for="featured">Featured</label>
</div>
</div>
<div class="form-group">
<label class="h4">Description</label>
<textarea type="text" name="description" rows="5" class="ckeditor form-control form-control-lg radius-30" required> </textarea>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="form-group">
<label class="h4">Upload Benefit Images</label>
<div class="file-upload-wrapper">
<input type="file" name="file1" multiple class="form-control form-control-lg file-upload" required />
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="h4">Benefits</label>
<textarea type="text" name="benefit" rows="5" class="ckeditor form-control form-control-lg radius-30" required> </textarea>
</div>
<div id="fields">
</div>
<hr />
<div class="form-group mt-3">
<button type="button" class="btn btn-success float-left btn-lg mr-2" onclick="add_field()">Add Size</button>
<button type="button" id="remove_btn1" class="btn btn-danger float-left btn-lg" onclick="remove_field()">Remove</button>
<button type="submit" class="btn btn-success float-right radius-30 btn-lg" name="add_new_product">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="delete_modal" data-backdrop="false" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content border-0">
<div class="modal-header bg-danger bg-darken-2 border-bottom-0">
<h5 class="modal-title" style="color:white;">Delete Products</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="../action.php" method="POST">
<div class="modal-body">
<p class="text-danger">Are You Sure to Delete This</p>
</div>
<input type="text" id="delete_id" name="delete_id" hidden>
<div class="modal-footer border-top-0">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<button type="submit" name="delete_products" class="btn btn-outline-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
<?php
include("footer.php");
?>
<script>
function delete_modal(id) {
document.getElementById("delete_id").value = id;
$("#delete_modal").modal('show');
}
</script>
<script>
var i = 0;
document.getElementById("remove_btn1").style.display = "none";
function add_field() {
i++;
// alert(i);
// $("#fields").append('<div id="custom' + i + '" class="form-group row align-items-end"><div class="col-md-5"> <label class="h4 my-1 d-block">Upload Image</label> <input type="file" class="form-control " name="files[]" required > </div><div class="col-md-5"> <label class="h4 my-1 d-block">Title</label> <input type="text" class="form-control " name="title[]" required > </div><div class="col-md-5"> <label class="h4 my-1 d-block">Size</label> <input type="text" class="form-control " name="details[]" required > </div><div class="col-md-5"> <label class="h4 my-1 d-block">Price</label> <input type="text" class="form-control " name="sizeprice[]" required > </div><div class="col-md-2"> <button type="button" id="remove_btn1" class="btn btn-danger float-right bg-darken-2 bg-danger" onclick="remove_field(' + i + ')"><i title="Rmove Field" class="bx bx-trash"></i></button> </div></div>');
$("#fields").append('<div id="custom' + i + '" class="form-group row align-items-end"><div class="col-md-5"> <label class="h4 my-1 d-block">Upload Image</label> <input type="file" class="form-control " name="files[]" required > </div><div class="col-md-5"> <label class="h4 my-1 d-block">Title</label> <input type="text" class="form-control " name="title[]" required > </div><div class="col-md-5"> <label class="h4 my-1 d-block">Size</label> <input type="text" class="form-control " name="details[]" required > </div><div class="col-md-5"> <label class="h4 my-1 d-block">Price</label> <input type="text" class="form-control " name="sizeprice[]" required > </div><div class="col-md-10"> <label class="h4 my-1 d-block">Quantity(pcs) ' + i + '</label> <input type="text" class="form-control " name="quantity[]" required > </div><div class="col-md-2"> <button type="button" id="remove_btn1" class="btn btn-danger float-right bg-darken-2 bg-danger" onclick="remove_field(' + i + ')"><i title="Rmove Field" class="bx bx-trash"></i></button> </div></div>');
$("#remove_btn1").css("display", "block");
}
function remove_field(i) {
// alert("#custom" + i);
$("#custom" + i).remove();
i--;
}
</script>