<?php session_start(); include('constant/connect.php'); ?> <?php include('./constant/layout/head.php');?> <?php include('./constant/layout/header.php');?> <?php include('./constant/layout/sidebar.php');?> <div class="page-wrapper"> <!-- PAGE TITLE --> <div class="row page-titles"> <div class="col-md-5 align-self-center"> <h3 class="text-primary">Complaints</h3> </div> <div class="col-md-7 align-self-center"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Complaints</li> </ol> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-body"> <h4 class="card-title mb-3">All Complaints</h4> <div class="table-responsive"> <table class="table table-hover table-bordered"> <thead class="table-dark"> <tr> <th>#</th> <th>Name</th> <th>Phone</th> <th>Type</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody> <?php $res = $connect->query("SELECT * FROM complaints"); if($res && $res->num_rows > 0){ $i=1; while($row = $res->fetch_assoc()){ ?> <tr> <td><?= $i++ ?></td> <td><?= $row['name'] ?></td> <td><?= $row['phone'] ?></td> <td><?= ucfirst($row['type']) ?></td> <td> <?php if($row['status'] == 'solved'){ ?> <span class="badge bg-success">Solved</span> <?php } else { ?> <span class="badge bg-warning text-dark">Pending</span> <?php } ?> </td> <td> <button onclick="viewComplaint(<?= $row['id'] ?>)" class="btn btn-info btn-sm"> 👁 </button> <?php if($row['status'] != 'solved'){ ?> <a href="solve.php?id=<?= $row['id'] ?>" class="btn btn-success btn-sm"> Solved </a> <?php } ?> </td> </tr> <?php } }else{ echo "<tr><td colspan='6' class='text-center'>No Data Found</td></tr>"; } ?> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> <!-- MODAL --> <div id="viewModal" class="modal-overlay"> <div class="modal-box"> <div id="modalContent"></div> <button onclick="closeModal()" class="close-btn">Close</button> </div> </div> <style> .table-hover tbody tr:hover{ background:#f1f5f9; transition:0.3s; } .badge{ padding:6px 10px; border-radius:20px; font-size:12px; } .btn{ border-radius:20px; } .modal-overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; justify-content:center; align-items:center; opacity:0; visibility:hidden; transition:0.3s; z-index:9999; } .modal-overlay.active{ opacity:1; visibility:visible; } .modal-box{ background:white; padding:25px; border-radius:12px; width:350px; transform:scale(0.8); transition:0.3s; } .modal-overlay.active .modal-box{ transform:scale(1); } .close-btn{ margin-top:15px; padding:8px 15px; border:none; background:#ef4444; color:white; border-radius:6px; cursor:pointer; } </style> <script> function viewComplaint(id){ fetch("view_complaint.php?id="+id) .then(res=>res.text()) .then(data=>{ document.getElementById("modalContent").innerHTML = data; document.getElementById("viewModal").style.display="block"; }); } function closeModal(){ document.getElementById("viewModal").style.display="none"; } function viewComplaint(id){ fetch("view_complaint.php?id="+id) .then(res=>res.text()) .then(data=>{ document.getElementById("modalContent").innerHTML = data; document.getElementById("viewModal").classList.add("active"); }); } function closeModal(){ document.getElementById("viewModal").classList.remove("active"); } </script> <?php include('./constant/layout/footer.php');?>