<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/contact.css">
<title>CameraBuy - Kontakt</title>
<link rel="stylesheet" href="https://use.typekit.net/mtk3vtw.css">
</head>
<body>
<header>
<nav>
<div class="navigation_image" id="logo_container">
<a href="#"><img src="/assets/img/logo.svg" alt="CameraBuy Logo"></a>
</div>
<div id="navigation">
<a href="/">Neuigkeiten</a>
<a href="/shop" >Shop</a>
<a href="/contact" >Kontakt</a>
</div>
<div class="navigation_image" id="shopping_cart_container">
<a href="/cart"><img src="/assets/img/cart.svg" alt="Shopping Cart"></a>
</div>
</nav>
</header>
<main>
<section id="contactbanner">
<h1>Wir sind für Sie da</h1>
<p>Sie benötigen weitere Informationen für Ihre Kaufentscheidung <br>oder haben eine Frage zu einem bereits erworbenen Produkt?</p>
</section>
<section id="contactinfo">
<h2>Kontakt</h2>
<div>
<div class="contacttile">
<img src="assets/img/location.svg" alt="">
<p>{{entry.firmenname}}<br>{{entry.street}}<br>{{entry.plzOrt}}</p>
</div>
<div class="contacttile">
<img src="assets/img/phone.svg" alt="">
<a href="tel:{{entry.telefon}}">{{entry.telefon}}</a>
</div>
<div class="contacttile">
<img src="assets/img/mail.svg" alt="">
<a href="mailto:{{entry.mail}}">{{entry.mail}}</a>
</div>
</div>
</section>
<section id="contactform">
<h3>Schreiben Sie uns gerne an</h3>
<div>
<div>
<input type="text" name="name" id="name" placeholder="Name">
<p>Wie sollen wir Sie kontaktieren?</p>
<div>
<div>
<input type="checkbox" name="contactformmail" id="contactformmail" onclick="toggleinput(this,'inputmail')">
<label for="contactformmail">Mail</label>
</div>
<div>
<input type="checkbox" name="contactformwhatsapp" id="contactformwhatsapp" onclick="toggleinput(this,'inputwhatsapp')">
<label for="contactformwhatsapp">WhatsApp</label>
</div>
<div>
<input type="checkbox" name="contactformsms" id="contactformsms" onclick="toggleinput(this,'inputsms')">
<label for="contactformsms">SMS</label>
</div>
<div class="inputtextfields">
<input type="email" name="inputmail" id="inputmail" placeholder="Mail">
<input type="tel" name="inputwhatsapp" id="inputwhatsapp" placeholder="WhatsApp Telefonnummer">
<input type="tel" name="inputsms" id="inputsms" placeholder="SMS Telefonnummer">
</div>
</div>
</div>
<textarea name="text" id="text" cols="30" rows="10" placeholder="Anliegen"></textarea>
</div>
<button class="buttonlarge darkbutton" onclick='send()'>Absenden</button>
<script>
function toggleinput(checkbox, inputid){
input = document.getElementById(inputid)
if(checkbox.checked == true){
input.style.visibility = "visible"
}else{
input.style.visibility = "hidden"
}
}
function validateForm() {
// Name validation
var nameInput = document.getElementById("name").value.trim();
if (nameInput === "") {
alert("Bitte geben Sie einen Namen an");
return false;
}
// Contact method validation
var mailCheckbox = document.getElementById("contactformmail");
var whatsappCheckbox = document.getElementById("contactformwhatsapp");
var smsCheckbox = document.getElementById("contactformsms");
if (!mailCheckbox.checked && !whatsappCheckbox.checked && !smsCheckbox.checked) {
alert("Wählen Sie mindestens eine Kontalktmöglichkeit");
return false;
}
// Validate corresponding input fields
if (mailCheckbox.checked && document.getElementById("inputmail").value.trim() === "") {
alert("Bitte füllen Sie das Mail-Feld oder wählen Sie diese Kontaktmöglichkeit ab");
return false;
}
if (whatsappCheckbox.checked && document.getElementById("inputwhatsapp").value.trim() === "") {
alert("Bitte füllen Sie das WhatsApp-Feld oder wählen Sie diese Kontaktmöglichkeit ab");
return false;
}
if (smsCheckbox.checked && document.getElementById("inputsms").value.trim() === "") {
alert("Bitte füllen Sie das SMS-Feld oder wählen Sie diese Kontaktmöglichkeit ab");
return false;
}
// Anliegen (textarea) validation
var textAreaInput = document.getElementById("text").value.trim();
if (textAreaInput === "") {
alert("Bitte beschreiben Sie Ihr Anliegen");
return false;
}
return true;
}
function readinputs() {
var jsonObject = {};
// Name
var nameInput = document.getElementById("name").value.trim();
jsonObject.name = nameInput !== "" ? nameInput : false;
// Contact methods
jsonObject.contactMethods = {
mail: document.getElementById("contactformmail").checked,
whatsapp: document.getElementById("contactformwhatsapp").checked,
sms: document.getElementById("contactformsms").checked
};
// Corresponding input fields
jsonObject.inputValues = {
mail: jsonObject.contactMethods.mail ? document.getElementById("inputmail").value.trim() : false,
whatsapp: jsonObject.contactMethods.whatsapp ? document.getElementById("inputwhatsapp").value.trim() : false,
sms: jsonObject.contactMethods.sms ? document.getElementById("inputsms").value.trim() : false
};
// Anliegen (textarea)
var textAreaInput = document.getElementById("text").value.trim();
jsonObject.anliegen = textAreaInput !== "" ? textAreaInput : false;
return jsonObject;
}
function send(){
if (validateForm()){
formrequest = readinputs();
formrequest.method = "create"
fetch('/api/support.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formrequest),
})
.then(response => response.json())
.then(data => {
if (data == true){
alert("Ihre Anfrage wurde gesendet, wir melden uns in kürze bei Ihnen.")
}else{
alert("Anfrage nicht erfolgreich")
console.error(data)
}
})
.catch(error => {
console.error('Error:'+ error);
});
}
}
</script>
</section>
</main>
{{ include ('footer.html') }}
</body>
</html>