55ok
Mini
<?php
include("connection.php");
ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);
// Get product ID
$c_id = isset($_GET['c_id']) ? intval($_GET['c_id']) : 0;
// Fetch existing product data
$sql = "SELECT * FROM `costumes` WHERE `c_id` = '$c_id'";
$query = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($query);
if (!$row) {
die("Product not found!");
}
$old_images = json_decode($row['Image'], true);
// Function to generate clean URL slugs
function generateSlug($string)
{
$slug = preg_replace('/[^A-Za-z0-9-]+/', '-', strtolower($string));
return trim($slug, '-');
}
if (isset($_POST['update'])) {
// Collect form data
$pro_name = mysqli_real_escape_string($con, $_POST['pro_name']);
$rent = mysqli_real_escape_string($con, $_POST['rent']);
$buy = mysqli_real_escape_string($con, $_POST['buy']);
$pquantity = mysqli_real_escape_string($con, $_POST['pquantity']);
$inputSlug = $_POST['slug'] ?? '';
$short_des = mysqli_real_escape_string($con, $_POST['short_des']);
$description = mysqli_real_escape_string($con, $_POST['description']);
$additional_information = mysqli_real_escape_string($con, $_POST['additional_information']);
$activity = mysqli_real_escape_string($con, $_POST['activity']);
// Handle existing images
$uploadedFiles = isset($_POST['existing_images']) ? $_POST['existing_images'] : [];
// Generate or clean slug
$slug = empty($inputSlug) ? generateSlug($pro_name) : generateSlug($inputSlug);
// Ensure slug is unique (excluding this record)
$checkSlug = mysqli_query($con, "SELECT COUNT(*) AS total FROM costumes WHERE slug = '$slug' AND c_id != '$c_id'");
$slugRow = mysqli_fetch_assoc($checkSlug);
if ($slugRow['total'] > 0) {
$slug .= '-' . time();
}
// Handle new image uploads
if (!empty($_FILES['Image']['name'][0])) {
foreach ($_FILES['Image']['name'] as $key => $name) {
if ($_FILES['Image']['error'][$key] === 0) {
$extension = pathinfo($name, PATHINFO_EXTENSION);
$uniqueImageName = time() . '_' . uniqid() . '.' . $extension;
$img_tmp = $_FILES['Image']['tmp_name'][$key];
$img_path = "assets/images/categorie/" . $uniqueImageName;
if (move_uploaded_file($img_tmp, $img_path)) {
$uploadedFiles[] = $uniqueImageName;
}
}
}
}
// Convert images to JSON
$imagesJson = json_encode($uploadedFiles);
// Update query
$sql1 = "UPDATE `costumes` SET
`Image` = '$imagesJson',
`pro_name` = '$pro_name',
`rent` = '$rent',
`buy` = '$buy',
`pquantity` = '$pquantity',
`slug` = '$slug',
`short_des` = '$short_des',
`description` = '$description',
`additional_information` = '$additional_information',
`activity` = '$activity'
WHERE `c_id` = '$c_id'";
if (mysqli_query($con, $sql1)) {
header("Location: viewcostumes.php");
exit();
} else {
echo "❌ Update failed: " . mysqli_error($con);
}
}
?>
<?php
include("header.php")
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Product Update</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="Themesbrand" name="author" />
<!-- App favicon -->
<!-- <link rel="shortcut icon" href="assets/images/favicon.ico" /> -->
<!-- Plugins css -->
<link href="assets/libs/dropzone/dropzone.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="shortcut icon" href="./assets/logo/fav.png" />
<!-- Bootstrap Css -->
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
<!-- App js -->
<!-- <script src="assets/js/plugin.js"></script> -->
<style>
.form .input {
width: 100%;
background: white;
border: none;
padding: 15px 20px;
border-radius: 20px;
margin-bottom: 9px;
margin-top: 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-inline: 2px solid transparent;
}
input[name='Image'] {
display: none;
}
div#upload {
cursor: pointer;
}
::-webkit-file-upload-button {
display: none;
}
/*
.form .input::-moz-placeholder {
color: rgb(170, 170, 170);
}
.form .input::placeholder {
color: rgb(170, 170, 170);
}
.form .input:focus {
outline: none;
border-inline: 2px solid #12b1d1;
} */
.filepath {
display: none;
}
img[alt="img"] {
width: clamp(50px, 15%, 100px);
aspect-ratio: 1/0.70;
}
.filepath {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.img-wrapper {
position: relative;
display: inline-block;
}
.img-wrapper img {
max-height: 100px;
border-radius: 5px;
}
.remove-img {
position: absolute;
top: -5px;
right: -5px;
background: red;
color: #fff;
font-weight: bold;
border-radius: 50%;
cursor: pointer;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body data-sidebar="dark">
<!-- <body data-layout="horizontal" data-topbar="dark"> -->
<!-- Begin page -->
<div id="layout-wrapper">
<div class="w-80 ">
<div class="page-content" style="width: 80%;margin-left: 260px;">
<div class="container">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0 font-size-18">costumes Update</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div>
<form class="form" action="" method="POST" enctype="multipart/form-data">
<!-- Hidden for old image -->
<div class="dropzone">
<div class="fallback">
<input type="file" name="Image[]" id="imageInput" multiple style="display:none;" />
</div>
<div class="dz-message needsclick" id="upload">
<div class="mb-3">
<i class="display-4 text-muted bx bxs-cloud-upload"></i>
</div>
<h4>Drop files here or click to upload.</h4>
</div>
</div>
<!-- Preview -->
<div class="filepath" style="margin-top:10px;">
<?php if (!empty($old_images)) {
foreach ($old_images as $img) { ?>
<div class="img-wrapper">
<img src="assets/images/categorie/<?php echo $img; ?>" />
<span class="remove-img" onclick="removeExisting(this,'<?php echo $img; ?>')">✖</span>
<input type="hidden" name="existing_images[]" value="<?php echo $img; ?>">
</div>
<?php }
} ?>
</div>
<br>
<div class="row">
<div class="col-md-3">
<label for="">Product Name</label>
<input type="text" class="form-control mb-3" id="pro_name" name="pro_name" value="<?php echo $row['pro_name']; ?>" placeholder="Heading" onkeyup="generateSlug()">
</div>
<div class="col-md-3">
<label for="">Slug</label>
<input type="text" class="form-control" id="slug" name="slug" value="<?php echo $row['slug']; ?>" placeholder="Enter Your Slug" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<label>Rent</label>
<input type="text" class="form-control" name="rent" value="<?php echo $row['rent']; ?>" required />
</div>
<div class="col-md-3">
<label for="">Buy</label>
<input type="text" class="form-control mb-3" name="buy" value="<?php echo $row['buy']; ?>" placeholder="buy">
</div>
<div class="col-md-3">
<label for="">Product Quantity</label>
<input type="text" class="form-control" name="pquantity" value="<?php echo $row['pquantity']; ?>" placeholder="Enter Your Product Quantity" />
</div>
<div class="col-md-3">
<label for="">Activity</label>
<select id="formrow-inputState" class="form-select" name="activity">
<option disabled <?= empty($row['activity']) ? 'selected' : '' ?>>Select activity</option>
<option value="yes" <?= ($row['activity'] ?? '') == "yes" ? 'selected' : '' ?>>Yes</option>
<option value="no" <?= ($row['activity'] ?? '') == "no" ? 'selected' : '' ?>>No</option>
</select>
</div>
</div>
<br>
<label for="">short description</label>
<textarea name="short_des" id="Experience">
<?php echo isset($row['short_des']) ? htmlspecialchars($row['short_des']) : ''; ?>
</textarea>
<br>
<label for="">Description</label>
<textarea name="description" id="Experience1">
<?php echo isset($row['description']) ? htmlspecialchars($row['description']) : ''; ?>
</textarea>
<br>
<label for="">Additional Information</label>
<textarea name="additional_information" id="Experience2">
<?php echo isset($row['additional_information']) ? htmlspecialchars($row['additional_information']) : ''; ?>
</textarea>
</div>
<div class="text-center mt-4">
<button type="submit" name="update" class="btn btn-primary" value="submit">
Update
</button>
<a href="viewcostumes.php"><button type="button" class="btn btn-danger">View Data</button></a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- container-fluid -->
</div>
<!-- End Page-content -->
</div>
<!-- end main content-->
</div>
<!-- END layout-wrapper -->
<script src="assets/libs/jquery/jquery.min.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/libs/node-waves/waves.min.js"></script>
<!-- Plugins js -->
<script src="assets/libs/dropzone/dropzone-min.js"></script>
<!-- Form file upload init js -->
<script src="assets/js/pages/form-file-upload.init.js"></script>
<script src="assets/js/app.js"></script>
<script src="./ck editor/ckeditor.js"></script>
<script>
CKEDITOR.replace('Experience');
CKEDITOR.replace('Experience1');
CKEDITOR.replace('Experience2');
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
let selectedMid = "<?php echo $m_id; ?>"; // Mid category ID from product
let currentTop = "<?php echo $row['t_id']; ?>"; // Top category ID from product
// Load Mid Categories on page load
if (currentTop) {
loadMidCategories(currentTop, selectedMid);
}
// On change of Top Category
$('#top_category').change(function() {
let toc_id = $(this).val();
loadMidCategories(toc_id, null);
});
// AJAX function to load mid categories
function loadMidCategories(toc_id, selectedMid) {
if (!toc_id) {
$('#mid_category').html('<option value="">Select Mid Category</option>');
return;
}
$.ajax({
url: "get_mid_categories.php",
type: "POST",
data: {
t_id: toc_id
},
success: function(data) {
$("#mid_category").html(data);
if (selectedMid) {
$("#mid_category").val(selectedMid);
}
}
});
}
});
</script>
<script>
const imgInput = document.getElementById('imageInput');
const previewContainer = document.querySelector('.filepath');
const uploadArea = document.getElementById('upload');
uploadArea.onclick = () => imgInput.click();
// Remove newly added image
function removeNewImage(wrapper) {
wrapper.remove();
}
// Remove existing image
function removeExisting(span, imgName) {
const wrapper = span.parentElement;
wrapper.remove();
// Remove corresponding hidden input
const inputs = document.querySelectorAll('input[name="existing_images[]"]');
inputs.forEach(input => {
if (input.value === imgName) input.remove();
});
}
// Handle new file previews
imgInput.onchange = () => {
Array.from(imgInput.files).forEach(file => {
const reader = new FileReader();
reader.onload = (e) => {
const wrapper = document.createElement('div');
wrapper.classList.add('img-wrapper');
const img = document.createElement('img');
img.src = e.target.result;
const span = document.createElement('span');
span.textContent = '✖';
span.classList.add('remove-img');
span.onclick = () => removeNewImage(wrapper);
wrapper.appendChild(img);
wrapper.appendChild(span);
previewContainer.appendChild(wrapper);
}
reader.readAsDataURL(file);
});
}
</script>
<!-- slug auto -->
<script>
function generateSlug() {
let title = document.getElementById("pro_name").value;
let slug = title.toLowerCase()
.replace(/[^a-z0-9\s-]/g, '') // Remove invalid chars
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/-+/g, '-') // Collapse dashes
.trim();
document.getElementById("slug").value = slug;
}
</script>
<!-- end slug -->
</body>
</html>
Zerion Mini 1.0