HOME


5h-3LL 1.0
DIR: /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs
/home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs/
Upload File:
Current File : /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs/home-banner.php.tar
home/aissorg/public_html/admin/home-banner.php000064400000035766151162317010015457 0ustar00<?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>