|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Track Support Ticket</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> |
|
|
<style> |
|
|
.track-form { |
|
|
background-color: |
|
|
border-radius: 10px; |
|
|
padding: 30px; |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
|
} |
|
|
.ticket-card { |
|
|
border-left: 5px solid |
|
|
border-radius: 8px; |
|
|
} |
|
|
.status-badge { |
|
|
padding: 5px 10px; |
|
|
border-radius: 20px; |
|
|
font-weight: 600; |
|
|
} |
|
|
.status-open { |
|
|
background-color: |
|
|
color: |
|
|
} |
|
|
.status-in-progress { |
|
|
background-color: |
|
|
color: |
|
|
} |
|
|
.status-resolved { |
|
|
background-color: |
|
|
color: |
|
|
} |
|
|
.status-closed { |
|
|
background-color: |
|
|
color: |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<!-- Navigation --> |
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> |
|
|
<div class="container"> |
|
|
<a class="navbar-brand" href="index.html">SupportHub</a> |
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> |
|
|
<span class="navbar-toggler-icon"></span> |
|
|
</button> |
|
|
<div class="collapse navbar-collapse" id="navbarNav"> |
|
|
<ul class="navbar-nav ms-auto"> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="index.html">Home</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="submit-ticket.php">Submit Ticket</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link active" href="track-ticket.php">Track Ticket</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="login.php">Login</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<!-- Main Content --> |
|
|
<div class="container my-5"> |
|
|
<div class="row justify-content-center"> |
|
|
<div class="col-lg-8"> |
|
|
<div class="track-form mb-4"> |
|
|
<h2 class="text-center mb-4"><i class="bi bi-search"></i> Track Your Ticket</h2> |
|
|
<form method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"> |
|
|
<div class="input-group mb-3"> |
|
|
<input type="text" class="form-control form-control-lg" name="ticket_id" placeholder="Enter your Ticket ID (e.g. TKT-ABC123)" value="<?php echo htmlspecialchars($ticket_id); ?>" required> |
|
|
<button class="btn btn-primary" type="submit">Track</button> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<?php if ($error_message): ?> |
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert"> |
|
|
<?php echo $error_message; ?> |
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> |
|
|
</div> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
|
|
|
<?php if ($ticket_data): ?> |
|
|
<div class="card ticket-card mb-4"> |
|
|
<div class="card-body"> |
|
|
<div class="d-flex justify-content-between align-items-center mb-3"> |
|
|
<h3 class="card-title mb-0">Ticket #<?php echo htmlspecialchars($ticket_data['ticket_id']); ?></h3> |
|
|
<?php |
|
|
$status_class = ''; |
|
|
switch ($ticket_data['status']) { |
|
|
case 'Open': |
|
|
$status_class = 'status-open'; |
|
|
break; |
|
|
case 'In Progress': |
|
|
$status_class = 'status-in-progress'; |
|
|
break; |
|
|
case 'Resolved': |
|
|
$status_class = 'status-resolved'; |
|
|
break; |
|
|
case 'Closed': |
|
|
$status_class = 'status-closed'; |
|
|
break; |
|
|
} |
|
|
?> |
|
|
<span class="status-badge <?php echo $status_class; ?>"> |
|
|
<?php echo htmlspecialchars($ticket_data['status']); ?> |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
<div class="row mb-3"> |
|
|
<div class="col-md-6"> |
|
|
<p class="mb-1"><strong>Subject:</strong> <?php echo htmlspecialchars($ticket_data['subject']); ?></p> |
|
|
</div> |
|
|
<div class="col-md-6"> |
|
|
<p class="mb-1"><strong>Priority:</strong> <?php echo htmlspecialchars($ticket_data['priority']); ?></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-3"> |
|
|
<h5>Description</h5> |
|
|
<p><?php echo nl2br(htmlspecialchars($ticket_data['description'])); ?></p> |
|
|
</div> |
|
|
|
|
|
<div class="row"> |
|
|
<div class="col-md-6"> |
|
|
<p class="mb-1"><strong>Submitted by:</strong> <?php echo htmlspecialchars($ticket_data['name']); ?></p> |
|
|
<p class="mb-1"><strong>Email:</strong> <?php echo htmlspecialchars($ticket_data['email']); ?></p> |
|
|
</div> |
|
|
<div class="col-md-6"> |
|
|
<p class="mb-1"><strong>Created:</strong> <?php echo date('M d, Y H:i', strtotime($ticket_data['created_at'])); ?></p> |
|
|
<?php if ($ticket_data['updated_at']): ?> |
|
|
<p class="mb-1"><strong>Last updated:</strong> <?php echo date('M d, Y H:i', strtotime($ticket_data['updated_at'])); ?></p> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Footer --> |
|
|
<footer class="bg-dark text-white py-4"> |
|
|
<div class="container"> |
|
|
<div class="text-center"> |
|
|
<p class="mb-0">© 2023 SupportHub. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
