Current Directory: /home/aissorg/public_html/admin
Viewing File: /home/aissorg/public_html/admin/officer-list.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>Office Bearer</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">
<link rel="stylesheet" href="assets/plugins/summernote/summernote-lite.min.css"> <!-- Main CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.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>Office Bearer</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">Office Bearer</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="add-about-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-12 col-md-12">
<div class="input-block mb-3">
<label>Description</label>
<textarea class="form-control summernote" id="add-about-description" name="description" placeholder="Enter Description" required></textarea>
</div>
</div>
<!-- Single Image Field -->
<div class="col-lg-6 col-md-12">
<div class="input-block mb-3">
<label>Single Image</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 file 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="single_image" accept="image/*" id="singleImageInput">
</div>
<div class="mt-2">
<img id="singleImagePreview" src="" alt="Selected Image" style="display: none; max-width: 100px; height: auto; border: 1px solid #ccc; padding: 5px;">
</div>
</div>
</div>
<!-- Multiple Image Upload -->
<div class="col-lg-6 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="add-about-multiple-images" name="multiple_images[]" accept="image/*" multiple id="multipleImagesInput">
</div>
<div id="add-about-multiple-images-preview" class="mt-2"></div>
</div>
</div>
<!-- JavaScript for Image Preview -->
</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 Office Bearer</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="edit-about-form" enctype="multipart/form-data">
<input type="hidden" id="edit-about-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-about-title" name="title" placeholder="Enter Title" required>
</div>
</div>
<div class="col-lg-12 col-md-12">
<div class="input-block mb-3">
<label>Description</label>
<textarea class="form-control summernote"id="edit-about-description" name="description" placeholder="Enter Description" required></textarea>
</div>
</div>
<!-- Editor -->
<!-- <div class="col-md-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Editor</h5>
</div>
<div class="card-body">
<div id="summernote"></div>
</div>
</div>
</div> -->
<!-- /Editor -->
<!-- Single Image Upload -->
<div class="col-lg-6 col-md-12">
<div class="input-block mb-3">
<label>Single Image</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 file 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-about-single-image" name="single_image" accept="image/*">
</div>
<div id="edit-about-single-image-preview" class="mt-2"></div>
<small class="text-muted">Leave blank to keep the current image.</small>
</div>
</div>
<!-- Multiple Image Upload -->
<div class="col-lg-6 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-about-multiple-images" name="multiple_images[]" accept="image/*" multiple>
</div>
<div id="edit-about-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 About Content</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>Single Image</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
// Fetch about content
$result = $con->query("SELECT id, name, designation, image FROM members");
if ($result->num_rows > 0) {
while ($about = $result->fetch_assoc()): ?>
<tr>
<td><?php echo htmlspecialchars($about['id']); ?></td>
<td><?php echo htmlspecialchars($about['name']); ?></td>
<td><?php echo nl2br(htmlspecialchars($about['designation'])); ?></td>
<td>
<?php if (!empty($about['image'])): ?>
<img src="admin/assets/img/about/<?php echo htmlspecialchars($about['image']); ?>" alt="About Image" width="100">
<?php else: ?>
No Image
<?php endif; ?>
</td>
<td class="d-flex align-items-center">
<a class="btn-action-icon me-2 edit-btn" href="javascript:void(0);" data-id="<?php echo $about['id']; ?>" data-bs-toggle="modal" data-bs-target="#edit">
<i class="fe fe-edit"></i>
</a>
<a class="btn-action-icon me-2 delete-btn" href="javascript:void(0);" data-id="<?php echo $about['id']; ?>">
<i class="fe fe-trash"></i>
</a>
</td>
</tr>
<?php endwhile;
} else {
echo "<tr><td colspan='5' class='text-center'>No about content found</td></tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /Delete Items Modal -->
</div>
<!-- /Main Wrapper -->
<!-- SweetAlert2 CSS -->
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- 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>
<script src="assets/plugins/summernote/summernote-lite.min.js"></script>
<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/officer-list.js"></script>
<script>
document.getElementById('singleImageInput').addEventListener('change', function(event) {
const file = event.target.files[0];
const preview = document.getElementById('singleImagePreview');
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.display = "block";
};
reader.readAsDataURL(file);
} else {
preview.style.display = "none";
}
});
document.querySelectorAll('.delete-image').forEach(deleteBtn => {
deleteBtn.addEventListener('click', handleImageDelete);
});
</script>
</body>
</html>