Spaces:

Zeetek321
/

customer-support-website

Running

customer-support-website / track-ticket.php

Create a customer complaints and support services website using bootstrap and php. The php code must be procedural for easy debugging and understanding. The backend is MYSQL - Initial Deployment

39033c5 verified 7 months ago

raw

history blame contribute delete

7.65 kB

	<!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: #f8f9fa;
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	}
	.ticket-card {
	border-left: 5px solid #0d6efd;
	border-radius: 8px;
	}
	.status-badge {
	padding: 5px 10px;
	border-radius: 20px;
	font-weight: 600;
	}
	.status-open {
	background-color: #d1e7dd;
	color: #0f5132;
	}
	.status-in-progress {
	background-color: #fff3cd;
	color: #664d03;
	}
	.status-resolved {
	background-color: #cfe2ff;
	color: #084298;
	}
	.status-closed {
	background-color: #f8d7da;
	color: #842029;
	}
	</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>