Your IP : 216.73.216.86
<?php include('head.php'); ?>
<?php
require_once '../../Classes/Database.php';
require_once '../../Service/ServiceService.php';
require_once '../../Classes/System.php';
$System = new System();
$serviceService = new ServiceService();
if (!isset($_GET['id'])) {
echo '<p>No service ID provided.</p>';
exit;
}
$serviceId = $System->decryptData($_GET['id']);
// show error if the provided id is not valid with Swal alert
if (!$serviceId) {
echo '<script>
Swal.fire({
title: "Invalid Service ID",
text: "The URL parameter is invalid. Please go back and try again.",
icon: "error",
confirmButtonText: "Ok"
}).then(() => window.location.href = "viewservices.php");
</script>';
exit;
}
$service = $serviceService->getServiceById($serviceId);
if (!$service) {
echo '<p>Service not found.</p>';
exit;
}
$latitude = $service->latitude;
$longitude = $service->longitude;
?>
<div class="main-content">
<div class="container-fluid">
<div class="page-header row align-items-end">
<div class="col-lg-8">
<div class="page-header-title">
<i class="ik ik-layers bg-blue"></i>
<div class="d-inline">
<h5>View Service</h5>
<span>View details of a service</span>
</div>
</div>
</div>
<div class="col-lg-4">
<nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../../index.html"><i class="ik ik-home"></i></a></li>
<li class="breadcrumb-item"><a href="#">Services</a></li>
<li class="breadcrumb-item active" aria-current="page">View Service</li>
</ol>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<a href="javascript:history.back()" class="btn btn-outline-primary">Back</a>
</div>
<div class="card-header-right">
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#editServiceModal" data-service-id="<?php echo $serviceId; ?>" class="editServiceBtn">Edit</button>
</div>
</div>
</div>
</div>
</div>
<!-- Edit Service Modal -->
<!-- Edit Service Modal -->
<div class="modal fade" id="editServiceModal" tabindex="-1" role="dialog" aria-labelledby="editServiceModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editServiceModalLabel">Edit Service</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="edit_message"></div>
<form id="editServiceForm">
<input type="hidden" id="edit_id" name="id" value="<?php echo $service->id; ?>">
<div class="form-group row">
<label for="edit_name" class="col-sm-3 col-form-label">Name:</label>
<div class="col-sm-9">
<input type="text" id="edit_name" name="name" class="form-control" required value="<?php echo htmlspecialchars($service->name); ?>" placeholder="Enter name">
</div>
</div>
<div class="form-group row">
<label for="edit_region" class="col-sm-3 col-form-label">Region:</label>
<div class="col-sm-9">
<input type="text" id="edit_region" name="region" class="form-control" required value="<?php echo htmlspecialchars($service->region); ?>" placeholder="Enter region">
</div>
</div>
<div class="form-group row">
<label for="edit_address_line1" class="col-sm-3 col-form-label">Address Line 1:</label>
<div class="col-sm-9">
<input type="text" id="edit_address_line1" name="address_line1" class="form-control" value="<?php echo htmlspecialchars($service->address_line1); ?>" placeholder="Enter address line 1">
</div>
</div>
<div class="form-group row">
<label for="edit_address_line2" class="col-sm-3 col-form-label">Address Line 2:</label>
<div class="col-sm-9">
<input type="text" id="edit_address_line2" name="address_line2" class="form-control" value="<?php echo htmlspecialchars($service->address_line2); ?>" placeholder="Enter address line 2">
</div>
</div>
<div class="form-group row">
<label for="edit_suburb" class="col-sm-3 col-form-label">Suburb:</label>
<div class="col-sm-9">
<input type="text" id="edit_suburb" name="suburb" class="form-control" value="<?php echo htmlspecialchars($service->suburb); ?>" placeholder="Enter suburb">
</div>
</div>
<div class="form-group row">
<label for="edit_city" class="col-sm-3 col-form-label">City:</label>
<div class="col-sm-9">
<input type="text" id="edit_city" name="city" class="form-control" value="<?php echo htmlspecialchars($service->city); ?>" placeholder="Enter city">
</div>
</div>
<div class="form-group row">
<label for="edit_state" class="col-sm-3 col-form-label">State:</label>
<div class="col-sm-9">
<input type="text" id="edit_state" name="state" class="form-control" value="<?php echo htmlspecialchars($service->state); ?>" placeholder="Enter state">
</div>
</div>
<div class="form-group row">
<label for="edit_postal_code" class="col-sm-3 col-form-label">Postal Code:</label>
<div class="col-sm-9">
<input type="text" id="edit_postal_code" name="postal_code" class="form-control" value="<?php echo htmlspecialchars($service->postal_code); ?>" placeholder="Enter postal code">
</div>
</div>
<div class="form-group row">
<label for="edit_country" class="col-sm-3 col-form-label">Country:</label>
<div class="col-sm-9">
<input type="text" id="edit_country" name="country" class="form-control" value="<?php echo htmlspecialchars($service->country); ?>" placeholder="Enter country">
</div>
</div>
<div class="form-group row">
<label for="edit_phone" class="col-sm-3 col-form-label">Phone:</label>
<div class="col-sm-9">
<input type="text" id="edit_phone" name="phone" class="form-control" value="<?php echo htmlspecialchars($service->phone); ?>" placeholder="Enter phone">
</div>
</div>
<div class="form-group row">
<label for="edit_on_site_location" class="col-sm-3 col-form-label">On Site Location:</label>
<div class="col-sm-9">
<textarea id="edit_on_site_location" name="on_site_location" class="form-control" placeholder="Enter on site location"><?php echo htmlspecialchars($service->on_site_location); ?></textarea>
</div>
</div>
<div class="form-group row">
<label for="edit_latitude" class="col-sm-3 col-form-label">Latitude:</label>
<div class="col-sm-9">
<input type="text" id="edit_latitude" name="latitude" class="form-control" value="<?php echo htmlspecialchars($service->latitude); ?>" placeholder="Enter latitude">
</div>
</div>
<div class="form-group row">
<label for="edit_longitude" class="col-sm-3 col-form-label">Longitude:</label>
<div class="col-sm-9">
<input type="text" id="edit_longitude" name="longitude" class="form-control" value="<?php echo htmlspecialchars($service->longitude); ?>" placeholder="Enter longitude">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="updateServiceBtn" class="btn btn-primary">Update Service</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const editServiceButtons = document.querySelectorAll('.editServiceBtn');
editServiceButtons.forEach(button => {
button.addEventListener('click', function () {
const serviceId = button.getAttribute('data-service-id');
fetch(`get_service.php?id=${serviceId}`)
.then(response => response.json())
.then(data => {
document.getElementById('edit_id').value = data.id;
document.getElementById('edit_name').value = data.name;
document.getElementById('edit_region').value = data.region;
document.getElementById('edit_address_line1').value = data.address_line1;
document.getElementById('edit_address_line2').value = data.address_line2;
document.getElementById('edit_suburb').value = data.suburb;
document.getElementById('edit_city').value = data.city;
document.getElementById('edit_state').value = data.state;
document.getElementById('edit_postal_code').value = data.postal_code;
document.getElementById('edit_country').value = data.country;
document.getElementById('edit_phone').value = data.phone;
document.getElementById('edit_on_site_location').value = data.on_site_location;
document.getElementById('edit_latitude').value = data.latitude;
document.getElementById('edit_longitude').value = data.longitude;
});
});
});
document.getElementById('updateServiceBtn').addEventListener('click', function () {
const formData = new FormData(document.getElementById('editServiceForm'));
fetch('update_service.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
const messageDiv = document.getElementById('edit_message');
messageDiv.textContent = data;
messageDiv.classList.add('alert', 'alert-success');
Swal.fire({
title: 'Success!',
text: data,
icon: 'success',
confirmButtonText: 'Ok'
}).then(() => {
location.reload();
});
})
.catch(error => {
const messageDiv = document.getElementById('edit_message');
messageDiv.textContent = 'Error: ' + error;
messageDiv.classList.add('alert', 'alert-danger');
Swal.fire({
title: 'Error!',
text: error,
icon: 'error',
confirmButtonText: 'Ok'
});
});
});
});
</script>
<div class="card">
<div class="card-body">
<div class="row align-items-center mb-30">
<div class="col-md-6">
<h4>General Information</h4>
<table>
<tbody>
<tr>
<td><i class="ik ik-layers icon-large"></i></td>
<td><h3 class="mb-0 fw-700 text-black"><?php echo $service->name?: 'Name not provided'; ?></h3></td>
</tr>
<tr>
<td><i class="ik ik-map-pin icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->region; ?></h5></td>
</tr>
</tbody>
</table>
<h4>Address Details</h4>
<table>
<tbody>
<tr>
<td><i class="ik ik-home icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->address_line1 ?: 'Address Line 1 not provided'; ?></h5></td>
<td><i class="ik ik-home icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->address_line2 ?: 'Address Line 2 not provided'; ?></h5></td>
</tr>
<tr>
<td><i class="ik ik-map icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->suburb ?: 'Suburb not provided'; ?></h5></td>
<td><i class="ik ik-map-pin icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->city?: 'City not provided'; ?></h5></td>
<tr>
<td><i class="ik ik-globe icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->state ?: 'State not provided'; ?></h5></td>
<td><i class="ik ik-mail icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->postal_code ?: 'Postal code not provided'; ?></h5></td>
</tr>
<tr>
<td><i class="ik ik-flag icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->country?: 'Country not provided'; ?></h5></td>
</tr>
<tr>
<td><i class="ik ik-phone icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->phone?: 'Phone not provided'; ?></h5></td>
</tr>
</tbody>
</table>
<h4>On Site Location</h4>
<table>
<tbody>
<tr>
<td><i class="ik ik-map-pin icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->on_site_location ?: 'Not provided'; ?></h5></td>
</tr>
</tbody>
</table>
<h4>Longitude and Latitude</h4>
<table>
<tbody>
<tr>
<td><i class="ik ik-map-pin icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->latitude ?: 'Not provided'; ?></h5></td>
<td><i class="ik ik-map-pin icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo $service->longitude ?: 'Not provided'; ?></h5></td>
</tr>
</tbody>
</table>
<h4>Timestamps</h4>
<table>
<tbody>
<tr>
<td><i class="ik ik-calendar icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo date('F j, Y, g:i a', strtotime($service->created_at)); ?></h5></td>
<td><i class="ik ik-clock icon-large"></i></td>
<td><h5 class="mb-0 fw-500 text-black"><?php echo date('F j, Y, g:i a', strtotime($service->updated_at)); ?></h5></td>
</tr>
</tbody>
</table>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
td {
padding: 10px 15px;
vertical-align: middle;
}
.icon-large {
font-size: 24px;
color: #333;
}
.mb-0 {
margin-bottom: 0;
}
.fw-700 {
font-weight: 700;
}
.fw-500 {
font-weight: 500;
}
.text-black {
color: #000;
}
</style>
</div>
<div class="col-md-6">
<div id="map" style="height: 400px;"></div>
</div>
</div>
</div>
</div>
<?php if ($latitude !== null && $longitude !== null): ?>
<script>
function initMap() {
var latitude = <?php echo $latitude; ?>;
var longitude = <?php echo $longitude; ?>;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: parseFloat(latitude), lng: parseFloat(longitude)},
zoom: 12
});
var marker = new google.maps.Marker({
position: {lat: parseFloat(latitude), lng: parseFloat(longitude)},
map: map,
title: 'Service Location'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9O5PAsTaFPCHlIlM4XSK7ei-gaLMYpzk&callback=initMap">
</script>
<?php endif; ?>
</div>
</div>
<?php include('footer.php'); ?>