<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kundenanfragen</title>
<style>
:root {
--main-color: #FFFFFF;
--contrast-color: #173E6B;
}
body {
font-family: 'Arial', sans-serif;
background-color: var(--main-color);
color: var(--contrast-color);
margin: 0;
padding: 0;
}
header {
background-color: var(--contrast-color);
color: var(--main-color);
padding: 10px;
text-align: center;
}
nav {
background-color: var(--contrast-color);
padding: 10px;
text-align: center;
}
nav button {
margin: 5px;
padding: 8px 16px;
cursor: pointer;
background-color: var(--main-color);
color: var(--contrast-color);
border: none;
border-radius: 4px;
}
section {
padding: 20px;
}
.customer-list {
list-style: none;
padding: 0;
cursor: pointer;
}
.customer-list li {
margin-bottom: 10px;
}
.customer-list li:hover {
background-color: #eee;
}
.detail-view {
display: none;
margin-top: 20px;
}
.detail-view h2 {
border-bottom: 2px solid var(--contrast-color);
padding-bottom: 10px;
}
.detail-view p {
margin: 10px 0;
}
</style>
</head>
<body>
<header>
<h1>Kundenanfragen</h1>
</header>
<nav>
<button onclick="showTab('unseen')">Ungesehene Anfragen</button>
<button onclick="showTab('seen')">Gesehene Anfragen</button>
</nav>
<section>
<ul id="customerList" class="customer-list"></ul>
<div id="detailView" class="detail-view"></div>
</section>
<script>
function reloadsupportpage(){
window.location.reload()
}
let fetchedData = {};
async function fetchData() {
try {
const response = await fetch('/api/support.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
method: "read"
})
});
if (!response.ok) {
console.error('Fehler beim Abrufen der Daten');
return null;
}
const data = await response.json();
return data;
} catch (error) {
console.error('Fehler beim Verarbeiten der Daten:', error);
return null;
}
}
function showCategory(category) {
const customerList = document.getElementById('customerList');
customerList.innerHTML = '';
const data = category === 'unseen' ? fetchedData.unseen : fetchedData.seen;
if (data.length === 0) {
const listItem = document.createElement('li');
listItem.textContent = `Keine ${category === 'unseen' ? 'ungesehene' : 'gesehene'} Anfragen vorhanden.`;
customerList.appendChild(listItem);
} else {
data.forEach(customer => {
const listItem = document.createElement('li');
listItem.innerHTML = `
${customer.id} - ${customer.name} - ${new Date(customer.created_at).toLocaleString()}
`;
listItem.addEventListener('click', () => showDetails(customer));
customerList.appendChild(listItem);
});
}
}
function showDetails(customer) {
const detailView = document.getElementById('detailView');
detailView.innerHTML = `
<h2>Anfrage Details</h2>
<p><strong>ID:</strong> ${customer.id}</p>
<p><strong>Name:</strong> ${customer.name}</p>
<p><strong>Anliegen:</strong> ${customer.issue}</p>
<p><strong>E-Mail:</strong> ${customer.mail ? `<a href="mailto:${customer.mail}">${customer.mail}</a>` : 'Nicht vorhanden'}</p>
<p><strong>Whatsapp:</strong> ${customer.whatsapp ? `<a href="https://wa.me/${formatPhoneNumber(customer.whatsapp)}" target="_blank">Klick To Chat</a>` : 'Nicht vorhanden'}</p>
<p><strong>SMS:</strong> ${customer.sms ? `<a href="sms:${customer.sms}">${customer.sms}</a>` : 'Nicht vorhanden'}</p>
<p><strong>Erstellt am:</strong> ${new Date(customer.created_at).toLocaleString()}</p>
<button onclick="${customer.seen ? 'deleteRequest' : 'markAsRead'}(${customer.id})">${customer.seen ? 'Löschen' : 'Als gelesen markieren'}</button>
`;
const detailViewElement = document.getElementById('detailView');
detailViewElement.style.display = 'block';
}
function formatPhoneNumber(phoneNumber) {
return phoneNumber.replace(/\D/g, '');
}
// Funktion zum Markieren als gelesen
function markAsRead(id) {
console.log(`Anfrage mit ID ${id} als gelesen markieren`);
fetch('/api/support.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
method: "update",
id: id,
read: true
}),
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
alert(data)
})
.catch(error => {
console.error('Fehler:', error);
});
reloadsupportpage()
}
// Funktion zum Löschen der Anfrage
function deleteRequest(id) {
console.log(`Anfrage mit ID ${id} löschen`);
fetch('/api/support.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
method: "delete",
id: id
}),
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
alert(data)
})
.catch(error => {
console.error('Fehler:', error);
});
reloadsupportpage()
}
// Funktion zum Anzeigen des Tabs
function showTab(tab) {
showCategory(tab);
}
// Funktion zum automatischen Abrufen und Anzeigen der Daten beim Laden der Seite
async function fetchAndDisplayData() {
fetchedData = await fetchData();
if (fetchedData) {
showTab('unseen'); // Standardmäßig die ungelesenen Anfragen anzeigen
}
}
// Rufe die Funktion zum automatischen Abrufen und Anzeigen der Daten auf
fetchAndDisplayData();
</script>
</body>
</html>