Current Directory: /home/aissorg/public_html/admin
Viewing File: /home/aissorg/public_html/admin/home-banner.php
<?php
include('php/constant.php');
include('include/config.php');
?>
<!DOCTYPE html>
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="light" data-sidebar-size="lg" data-sidebar-image="none">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Banner</title>
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
<!-- Feather CSS -->
<link rel="stylesheet" href="assets/plugins/feather/feather.css">
<!-- Datepicker CSS -->
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css">
<!-- Daterangepikcer CSS -->
<link rel="stylesheet" href="assets/plugins/daterangepicker/daterangepicker.css">
<!-- Datatables CSS -->
<link rel="stylesheet" href="assets/plugins/datatables/datatables.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Layout Js -->
<script src="assets/js/layout.js" type="text/javascript"></script>
<script type="text/javascript">
var BASE_PHP_URL = "<?php echo BASE_PHP_URL; ?>"; // This will contain the PHP constant
</script>
</head>
<body>
<!-- Main Wrapper -->
<div class="main-wrapper">
<!-- Header -->
<?php include("include/header.php")?>
<!-- /Header -->
<!-- Sidebar -->
<?php include("include/sidebar.php")?>
<!-- /Sidebar -->
<!-- Page Wrapper -->
<div class="page-wrapper">
<div class="content container-fluid">
<!-- Page Header -->
<div class="page-header">
<div class="content-page-header">
<h5>Home Banners</h5>
<div class="list-btn">
<ul class="filter-list">
<li class="daterangepicker-wrap cal-icon cal-icon-info ">
<input type="text" class="btn-filters" name="datetimes" placeholder="From Date - To Date" />
</li>
<li>
<div class="dropdown dropdown-action" data-bs-toggle="tooltip" data-bs-placement="top" title="Download">
<a href="#" class="btn-filters" data-bs-toggle="dropdown" aria-expanded="false">
<span><i class="fe fe-download"></i></span>
</a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="d-block">
<li>
<a class="d-flex align-items-center download-item" href="javascript:void(0);" download>
<i class="far fa-file-pdf me-2"></i>PDF
</a>
</li>
<li>
<a class="d-flex align-items-center download-item" href="javascript:void(0);" download>
<i class="far fa-file-text me-2"></i>CSV
</a>
</li>
</ul>
</div>
</div>
<li>
<a class="btn btn-primary" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add_category">
<i class="fa fa-plus-circle me" aria-hidden="true"></i>
</a>
</li>
</li>
</ul>
</div>
</div>
</div>
<!-- /Page Header -->
<!-- Table -->
<!-- Add Banner Modal -->
<div class="modal custom-modal fade" id="add_category" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<h4 class="mb-0">New Banner</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="add-banner-form" enctype="multipart/form-data">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="input-block mb-3">
<label>Title</label>
<input type="text" class="form-control" name="title" placeholder="Enter Title" required>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="input-block mb-3">
<label>Description</label>
<textarea class="form-control" name="description" placeholder="Enter Description" required></textarea>
</div>
</div>
<!-- Single Image Field -->
<!-- Multiple Image Upload -->
<div class="col-lg-12 col-md-12">
<div class="input-block mb-3">
<label>Multiple Images</label>
<div class="service-upload mb-0">
<span><img src="assets/img/icons/drop-icon.svg" alt="upload"></span>
<h6 class="drop-browse align-center">Drop your files here or <span class="text-primary ms-1">browse</span></h6>
<p class="text-muted">Maximum size: 4MB</p>
<input type="file" class="form-control" name="multiple_images[]" accept="image/*" multiple id="multipleImagesInput">
</div>
<div id="multipleImagesPreview" class="mt-2"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-back cancel-btn me-2" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary paid-continue-btn">Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- Edit Banner Modal -->
<div class="modal custom-modal fade" id="edit" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<h4 class="mb-0">Edit Banner</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="edit-banner-form" enctype="multipart/form-data">
<input type="hidden" id="edit-banner-id" name="id">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="input-block mb-3">
<label>Title</label>
<input type="text" class="form-control" id="edit-banner-title" name="title" placeholder="Enter Title" required>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="input-block mb-3">
<label>Description</label>
<textarea class="form-control" id="edit-banner-description" name="description" placeholder="Enter Description" required></textarea>
</div>
</div>
<!-- Single Image Upload -->
<!-- Multiple Image Upload -->
<div class="col-lg-12 col-md-12">
<div class="input-block mb-3">
<label>Multiple Images</label>
<div class="service-upload mb-0">
<span><img src="assets/img/icons/drop-icon.svg" alt="upload"></span>
<h6 class="drop-browse align-center">Drop your files here or <span class="text-primary ms-1">browse</span></h6>
<p class="text-muted">Maximum size: 4MB</p>
<input type="file" class="form-control" id="edit-banner-multiple-images" name="multiple_images[]" accept="image/*" multiple>
</div>
<div id="edit-banner-multiple-images-preview" class="mt-2"></div>
<small class="text-muted">Leave blank to keep the current images.</small>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-back cancel-btn me-2" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary paid-continue-btn">Update</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete Banner Modal -->
<div class="modal custom-modal fade" id="delete_modal" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-md">
<div class="modal-content">
<div class="modal-body">
<h3>Delete Banner</h3>
<p>Are you sure you want to delete this banner?</p>
<div class="row">
<div class="col-6">
<button type="button" class="w-100 btn btn-primary paid-continue-btn" id="confirm-delete">Delete</button>
</div>
<div class="col-6">
<button type="button" class="w-100 btn btn-primary paid-cancel-btn" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="row">
<div class="col-sm-12">
<div id="alert-container" class="mt-3"></div>
<div class="card-table">
<div class="card-body">
<div class="table-responsive">
<table class="table table-stripped table-hover datatable">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Title</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
// Fetch banners excluding multiple images column
$result = $con->query("SELECT id, title, description, single_image FROM home_banner WHERE is_active = 1 AND deleted_at IS NULL");
if ($result->num_rows > 0) {
while ($banner = $result->fetch_assoc()): ?>
<tr>
<td><?php echo htmlspecialchars($banner['id']); ?></td>
<td><?php echo htmlspecialchars($banner['title']); ?></td>
<td><?php echo nl2br(htmlspecialchars($banner['description'])); ?></td>
<td class="d-flex align-items-center">
<a class="btn-action-icon me-2" href="javascript:void(0);"
data-bs-toggle="modal" data-bs-target="#edit">
<i class="fe fe-edit"></i>
</a>
<a class="btn-action-icon me-2"
href="?action=delete&id=<?php echo $banner['id']; ?>"
onclick="return confirm('Are you sure you want to delete this banner?')">
<i class="fe fe-trash"></i>
</a>
</td>
</tr>
<?php endwhile;
} else {
echo "<tr><td colspan='5' class='text-center'>No banners found</td></tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /Delete Items Modal -->
</div>
<!-- /Main Wrapper -->
<!-- jQuery -->
<script data-cfasync="false" src="../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
<script src="assets/js/jquery-3.7.1.min.js" type="text/javascript"></script>
<!-- Bootstrap Core JS -->
<script src="assets/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<!-- Datatable JS -->
<script src="assets/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<!-- select CSS -->
<script src="assets/plugins/select2/js/select2.min.js" type="text/javascript"></script>
<!-- Slimscroll JS -->
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- Datepicker Core JS -->
<script src="assets/plugins/moment/moment.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="assets/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- multiselect JS -->
<script src="assets/js/jquery-ui.min.js" type="text/javascript"></script>
<!-- Theme Settings JS -->
<script src="assets/js/theme-settings.js" type="text/javascript"></script>
<script src="assets/js/greedynav.js" type="text/javascript"></script>
<!-- Custom JS -->
<script src="assets/js/script.js" type="text/javascript"></script>
<script src="../../cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="|49" defer></script>
<script src="js/home-banner.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.getElementById('multipleImagesInput').addEventListener('change', function(event) {
const files = event.target.files;
const previewContainer = document.getElementById('multipleImagesPreview');
previewContainer.innerHTML = "";
// Check if more than 10 images are selected
if (files.length > 10) {
Swal.fire({
icon: 'warning',
title: 'Image Upload Limit Exceeded!',
text: 'You can upload a maximum of 10 images.',
confirmButtonText: 'OK'
});
this.value = ""; // Clear file input
return;
}
for (let i = 0; i < files.length; i++) {
const reader = new FileReader();
const img = document.createElement("img");
img.style.maxWidth = "100px";
img.style.margin = "5px";
img.style.border = "1px solid #ccc";
img.style.padding = "5px";
reader.onload = function(e) {
img.src = e.target.result;
};
reader.readAsDataURL(files[i]);
previewContainer.appendChild(img);
}
});
// Function to handle image deletion
function handleImageDelete(event) {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
event.target.parentElement.remove();
Swal.fire(
'Deleted!',
'Your image has been removed.',
'success'
);
}
});
}
// Attach delete functionality dynamically
document.querySelectorAll('.delete-image').forEach(deleteBtn => {
deleteBtn.addEventListener('click', handleImageDelete);
});
</script>
</body>
</html>