Mini Shell
<?php
session_start();
$rootPath = dirname(__FILE__); // Current directory
require_once $rootPath . '/config/config.php';
require_once $rootPath . '/includes/auth_validate.php';
$Assigned_To = "";
//Get Input data from query string
$search_string = filter_input(INPUT_GET, 'search_string');
$filter_col = filter_input(INPUT_GET, 'filter_col');
$order_by = filter_input(INPUT_GET, 'order_by');
//Get current page.
$page = filter_input(INPUT_GET, 'page');
//Per page limit for pagination.
$pagelimit = 10;
$db = getDbInstance();
if (!$page) {
$page = 1;
}
// If filter types are not selected we show latest added data first
if (!$filter_col) {
$filter_col = "ComplaintID";
}
if (!$order_by) {
$order_by = "Desc";
}
$db = getDbInstance();
// select the columns
$select = array('ComplaintID', 'Problem', 'Department', 'Status','Name', 'Property_Number','phone','email','address','Assigned_To','Date_Reported','File_Name','Heading');
//Start building query according to input parameters.
// If search string
if ($search_string)
{
$db->where('Heading', '%' . $search_string . '%', 'like');
$db->orwhere('Name', '%' . $search_string . '%', 'like');
}
//If order by option selected
if ($order_by)
{
$db->orderBy($filter_col, $order_by);
}
//Set pagination limit
$db->pageLimit = $pagelimit;
//Get result of the query.
$customers = $db->arraybuilder()->paginate("complaints", $page, $select);
$total_pages = $db->totalPages;
// get columns for order filter
foreach ($customers as $value) {
foreach ($value as $col_name => $col_value) {
$filter_options[$col_name] = $col_name;
}
//execute only once
break;
}
include_once 'includes/header.php';
?>
<!-- Add custom CSS for table styling -->
<style>
/* Modern Green Theme */
:root {
--primary-green: #2ecc71;
--dark-green: #27ae60;
--light-green: #a8e6cf;
--black: #2c3e50;
--dark-gray: #34495e;
--light-gray: #ecf0f1;
--white: #ffffff;
--shadow: 0 2px 10px rgba(0,0,0,0.1);
--border-radius: 8px;
}
/* Table Container */
.table-responsive {
border-radius: var(--border-radius);
box-shadow: var(--shadow);
margin: 20px 0;
background: var(--white);
overflow: visible !important;
position: relative;
z-index: 1;
}
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: var(--white);
position: relative;
overflow: visible !important;
}
/* Ensure table body allows overflow */
.table tbody {
overflow: visible !important;
position: relative;
}
/* Ensure table rows don't clip dropdowns */
.table tbody tr {
overflow: visible !important;
position: relative;
z-index: 1;
}
/* Table rows that are hovered get higher z-index */
.table tbody tr:hover {
z-index: 100 !important;
position: relative;
}
/* Ensure table cells don't clip dropdowns */
.table td {
position: relative;
overflow: visible !important;
z-index: 1;
}
/* Table Header */
.table thead tr {
background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
}
.table thead tr th {
padding: 12px 8px;
color: var(--white);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
position: relative;
text-align: left;
}
.table thead tr th:first-child {
border-top-left-radius: var(--border-radius);
padding-left: 15px;
}
.table thead tr th:last-child {
border-top-right-radius: var(--border-radius);
padding-right: 15px;
}
/* Table Body */
.table tbody tr {
transition: all 0.3s ease;
border-bottom: 1px solid var(--light-gray);
}
.table tbody tr:nth-child(even) {
background-color: #fafbfc;
}
.table tbody tr:hover {
background: linear-gradient(135deg, rgba(46, 204, 113, 0.05) 0%, rgba(39, 174, 96, 0.05) 100%);
}
.table tbody tr td {
padding: 10px 8px;
color: var(--black);
font-size: 14px;
border-bottom: 1px solid var(--light-gray);
vertical-align: middle;
overflow: visible !important;
position: relative;
}
.table tbody tr td:first-child {
padding-left: 15px;
}
.table tbody tr td:last-child {
padding-right: 15px;
}
/* Status Badges - Beautiful and modern */
.status-badge {
padding: 5px 12px;
border-radius: 50px;
font-weight: 500;
font-size: 12px;
display: inline-block;
text-align: center;
min-width: 85px;
letter-spacing: 0.3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.status-open {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}
.status-in-progress {
background: linear-gradient(135deg, #f39c12, #e67e22);
color: white;
}
.status-closed {
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
color: white;
}
/* STABLE DROPDOWN MENU - Easy to select */
.action-container {
position: relative;
display: inline-block;
z-index: 10;
}
.action-button {
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
color: white;
padding: 8px 16px;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
border: none;
cursor: pointer;
box-shadow: 0 4px 6px rgba(46, 204, 113, 0.2);
transition: all 0.3s ease;
position: relative;
}
.action-button:hover {
background: linear-gradient(135deg, var(--dark-green), var(--primary-green));
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(46, 204, 113, 0.3);
text-decoration: none;
color: white;
}
.action-button i {
font-size: 14px;
}
/* Create a larger hover area */
.action-container::after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: transparent;
z-index: 5;
pointer-events: none;
}
/* Dropdown menu with stable hover */
.action-dropdown {
position: absolute;
top: 100%;
right: 0;
min-width: 220px;
background: white;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0,0,0,0.25);
padding: 8px 0;
margin-top: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
z-index: 9999;
border: 1px solid rgba(46, 204, 113, 0.15);
pointer-events: none;
}
/* Create an invisible bridge between button and dropdown */
.action-dropdown::after {
content: '';
position: absolute;
top: -20px;
left: 0;
right: 0;
height: 20px;
background: transparent;
z-index: 9998;
}
/* Show dropdown when hovering container OR when hovering the dropdown itself */
.action-container:hover .action-dropdown,
.action-dropdown:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: all;
transition-delay: 0s;
}
/* Also show dropdown when hovering the invisible bridge area */
.action-container:hover::after {
pointer-events: all;
}
/* Dropdown arrow */
.action-dropdown:before {
content: '';
position: absolute;
top: -6px;
right: 25px;
width: 12px;
height: 12px;
background: white;
transform: rotate(45deg);
border-left: 1px solid rgba(46, 204, 113, 0.15);
border-top: 1px solid rgba(46, 204, 113, 0.15);
z-index: 10000;
}
/* Dropdown items - larger click area */
.action-dropdown li {
list-style: none;
position: relative;
}
.action-dropdown li a {
color: var(--black);
padding: 14px 20px;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
transition: all 0.2s ease;
position: relative;
background: white;
white-space: nowrap;
border-left: 3px solid transparent;
cursor: pointer;
}
.action-dropdown li a:hover {
background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(39, 174, 96, 0.05));
color: var(--dark-green);
padding-left: 25px;
border-left: 3px solid var(--primary-green);
}
.action-dropdown li a span {
font-size: 15px;
color: var(--primary-green);
}
.action-dropdown li.divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(46, 204, 113, 0.3), transparent);
margin: 5px 0;
}
/* MODAL - Enhanced to display in front like dropdown */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999999;
justify-content: center;
align-items: center;
}
.modal-overlay.show {
display: flex;
}
.modal-container {
background: white;
border-radius: 16px;
width: 90%;
max-width: 500px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
animation: modalPopIn 0.3s ease-out;
border: 1px solid rgba(46, 204, 113, 0.2);
}
@keyframes modalPopIn {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.modal-header {
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
color: white;
padding: 18px 24px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h4 {
margin: 0;
font-size: 18px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.modal-header h4 i {
font-size: 20px;
}
.modal-close {
background: transparent;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 0;
margin: 0;
line-height: 1;
opacity: 0.8;
transition: all 0.2s ease;
}
.modal-close:hover {
opacity: 1;
transform: rotate(90deg);
}
.modal-body {
padding: 24px;
color: var(--black);
font-size: 15px;
}
.modal-body p {
margin: 0 0 15px 0;
}
.modal-body p:last-child {
margin-bottom: 0;
}
.modal-body .warning-text {
color: #e74c3c;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
}
.modal-footer {
padding: 16px 24px 24px;
display: flex;
gap: 10px;
justify-content: flex-end;
border-top: 1px solid var(--light-gray);
}
.modal-btn {
padding: 10px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.3s ease;
min-width: 100px;
}
.modal-btn-primary {
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
color: white;
box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
}
.modal-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(46, 204, 113, 0.4);
background: linear-gradient(135deg, var(--dark-green), var(--primary-green));
}
.modal-btn-secondary {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white;
box-shadow: 0 4px 10px rgba(149, 165, 166, 0.3);
}
.modal-btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(149, 165, 166, 0.4);
background: linear-gradient(135deg, #7f8c8d, #95a5a6);
}
/* Pagination Styling */
.pagination-container {
text-align: center;
margin: 25px 0;
position: relative;
z-index: 1;
}
.pagination {
display: inline-flex;
gap: 5px;
padding: 0;
margin: 0;
}
.pagination li {
list-style: none;
}
.pagination li a {
display: block;
padding: 8px 15px;
background: white;
color: var(--black);
text-decoration: none;
border-radius: 50px;
font-size: 13px;
font-weight: 500;
border: 1px solid var(--light-gray);
transition: all 0.3s ease;
}
.pagination li.active a {
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
color: white;
border: none;
box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
}
.pagination li a:hover:not(.active a) {
background: var(--light-gray);
transform: translateY(-2px);
}
/* Filter Section Enhancement */
.filter-form {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border: none;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
position: relative;
z-index: 2;
}
.filter-form .form-control {
border: 1px solid #ddd;
border-radius: 50px;
padding: 8px 16px;
font-size: 13px;
transition: all 0.3s ease;
}
.filter-form .form-control:focus {
border-color: var(--primary-green);
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}
.filter-form .btn-primary {
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
border: none;
border-radius: 50px;
padding: 8px 24px;
font-weight: 500;
box-shadow: 0 4px 10px rgba(46, 204, 113, 0.2);
}
.filter-form .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(46, 204, 113, 0.3);
}
/* Page Header */
.page-header {
color: var(--black);
font-weight: 600;
border-left: 5px solid var(--primary-green);
padding-left: 15px;
}
/* Action Buttons (Add/Refresh) */
.btn-success {
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
border: none;
border-radius: 50px;
padding: 8px 20px;
font-weight: 500;
box-shadow: 0 4px 10px rgba(46, 204, 113, 0.2);
transition: all 0.3s ease;
}
.btn-success:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(46, 204, 113, 0.3);
}
/* Ensure the page wrapper doesn't clip dropdowns */
#page-wrapper {
overflow: visible !important;
position: relative;
z-index: 1;
}
/* Fix for any potential overflow hidden on parent elements */
.row, .col-lg-12, .col-lg-6 {
overflow: visible !important;
position: relative;
}
/* Responsive */
@media (max-width: 768px) {
.table {
display: block;
overflow-x: auto;
}
.action-dropdown {
right: auto;
left: 0;
min-width: 200px;
}
.action-dropdown:before {
right: auto;
left: 25px;
}
.modal-container {
width: 95%;
margin: 10px;
}
}
/* Animations */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.table tbody tr {
animation: slideIn 0.5s ease-out forwards;
}
/* Force dropdown to appear above all content with higher z-index */
.action-container:hover {
z-index: 99999 !important;
}
.action-container:hover .action-dropdown,
.action-dropdown:hover {
z-index: 99999 !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
</style>
<!--Main container start-->
<div id="page-wrapper">
<div class="row">
<div class="col-lg-6">
<h1 class="page-header">File Record</h1>
</div>
<div class="col-lg-6" style="">
<div class="page-action-links text-right">
<a href="add_complaint.php?operation=create">
<button class="btn btn-success"><span class="glyphicon glyphicon-plus"></span> Add new </button>
</a>
<a href="">
<button class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span> Refresh </button>
</a>
</div>
</div>
</div>
<?php include('./includes/flash_messages.php') ?>
<!-- Begin filter section-->
<div class="well text-center filter-form">
<form class="form form-inline" action="">
<label for="input_search">Search</label>
<input type="text" class="form-control" id="input_search" placeholder="enter Name" name="search_string" value="<?php echo $search_string; ?>">
<label for ="input_order">Order By</label>
<select name="filter_col" class="form-control">
<?php
foreach ($filter_options as $option) {
($filter_col === $option) ? $selected = "selected" : $selected = "";
echo ' <option value="' . $option . '" ' . $selected . '>' . $option . '</option>';
}
?>
</select>
<select name="order_by" class="form-control" id="input_order">
<option value="Asc" <?php
if ($order_by == 'Asc') {
echo "selected";
}
?> >Asc</option>
<option value="Desc" <?php
if ($order_by == 'Desc') {
echo "selected";
}
?>>Desc</option>
</select>
<input type="submit" value="Go" class="btn btn-primary">
</form>
</div>
<!-- Filter section end-->
<hr>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Heading</th>
<th>Client Name</th>
<th>Problem</th>
<th>Assigned To</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php foreach ($customers as $row) : ?>
<tr>
<td><strong><?php echo $row['Heading']; ?></strong></td>
<td><?php echo $row['Name'] ?></td>
<td><?php echo substr($row['Problem'], 0, 50) . (strlen($row['Problem']) > 50 ? '...' : '') ?></td>
<?php
$Assigned_To = $row['Assigned_To'];
$AssignedName = "";
$result = mysqli_query($connection, "SELECT * FROM admin_accounts WHERE id = '$Assigned_To'");
$num = mysqli_num_rows($result);
if ($num > 0) {
$rows = mysqli_fetch_array($result);
$AssignedName = $rows['Full_Name'];
}
?>
<td>
<div style="display: flex; align-items: center;">
<i class="fa fa-user" style="color: var(--primary-green); margin-right: 5px; font-size: 12px;"></i>
<?php echo $AssignedName ?: 'Unassigned'; ?>
</div>
</td>
<td>
<?php
$status = $row['Status'];
$statusClass = '';
if (strtolower($status) == 'open') {
$statusClass = 'status-open';
} elseif (strtolower($status) == 'in progress' || strtolower($status) == 'in-progress') {
$statusClass = 'status-in-progress';
} elseif (strtolower($status) == 'closed') {
$statusClass = 'status-closed';
}
?>
<span class="status-badge <?php echo $statusClass; ?>"><?php echo $status; ?></span>
</td>
<td>
<div class="action-container">
<a href="#" class="action-button">
<i class="fa fa-folder-open"></i> Actions
<i class="fa fa-chevron-down" style="font-size: 10px;"></i>
</a>
<ul class="action-dropdown">
<li><a href="edit_customer_Only.php?customer_id=<?php echo $row['ComplaintID'] ?>&operation=edit"><span class="glyphicon glyphicon-edit"></span> Edit Customer</a></li>
<li class="divider"></li>
<li><a href="#" onclick="openModal('modal-<?php echo $row['ComplaintID'] ?>'); return false;"><span class="glyphicon glyphicon-trash"></span> Delete Customer</a></li>
<li class="divider"></li>
<li><a href="AddResponce.php?ComplaintID=<?php echo $row['ComplaintID'] ?>&operation=launch_complaint"><span class="glyphicon glyphicon-plus"></span> Add Complaint</a></li>
</ul>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<!-- Pagination links-->
<div class="pagination-container">
<?php
if (!empty($_GET)) {
unset($_GET['page']);
$http_query = "?" . http_build_query($_GET);
} else {
$http_query = "?";
}
if ($total_pages > 1) {
echo '<ul class="pagination">';
for ($i = 1; $i <= $total_pages; $i++) {
($page == $i) ? $li_class = ' class="active"' : $li_class = "";
echo '<li' . $li_class . '><a href="Complaints.php' . $http_query . '&page=' . $i . '">' . $i . '</a></li>';
}
echo '</ul>';
}
?>
</div>
</div>
<!--Main container end-->
<!-- Delete Confirmation Modals - Placed outside table for better visibility -->
<?php foreach ($customers as $row) : ?>
<div id="modal-<?php echo $row['ComplaintID'] ?>" class="modal-overlay">
<div class="modal-container">
<div class="modal-header">
<h4>
<i class="glyphicon glyphicon-trash"></i>
Confirm Delete
</h4>
<button class="modal-close" onclick="closeModal('modal-<?php echo $row['ComplaintID'] ?>')">×</button>
</div>
<form action="delete_customer.php" method="POST">
<div class="modal-body">
<input type="hidden" name="del_id" value="<?php echo $row['ComplaintID'] ?>">
<p style="font-size: 16px; font-weight: 500;">Are you sure you want to delete this record?</p>
<p class="warning-text">
<i class="glyphicon glyphicon-warning-sign"></i>
This action cannot be undone.
</p>
</div>
<div class="modal-footer">
<button type="button" class="modal-btn modal-btn-secondary" onclick="closeModal('modal-<?php echo $row['ComplaintID'] ?>')">Cancel</button>
<button type="submit" class="modal-btn modal-btn-primary">Yes, Delete</button>
</div>
</form>
</div>
</div>
<?php endforeach; ?>
<!-- JavaScript for Modal Control -->
<script>
// Open modal function
function openModal(modalId) {
var modal = document.getElementById(modalId);
if (modal) {
modal.classList.add('show');
document.body.style.overflow = 'hidden'; // Prevent scrolling
}
}
// Close modal function
function closeModal(modalId) {
var modal = document.getElementById(modalId);
if (modal) {
modal.classList.remove('show');
document.body.style.overflow = ''; // Restore scrolling
}
}
// Close modal when clicking outside
window.onclick = function(event) {
if (event.target.classList.contains('modal-overlay')) {
event.target.classList.remove('show');
document.body.style.overflow = '';
}
}
// Prevent default on action button
document.addEventListener('DOMContentLoaded', function() {
var actionButtons = document.querySelectorAll('.action-button');
actionButtons.forEach(function(button) {
button.addEventListener('click', function(e) {
e.preventDefault();
});
});
// Close modal with Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
var openModals = document.querySelectorAll('.modal-overlay.show');
openModals.forEach(function(modal) {
modal.classList.remove('show');
document.body.style.overflow = '';
});
}
});
});
</script>
<?php include_once './includes/footer.php'; ?>