<button id="contact-modal-button" class="btn">Questions about the product?</button>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>

<script type="text/javascript">
emailjs.init('user_XXXXXXXX')
</script>

<div id="modal-contact-dark-overlay"></div>
<div id="contact-modal-container">
<div id="contact-modal">
<button id="contact-modal-exit">&#x2715;</button>
<p id="modal-success-message"></p>
<div id="contact-modal-form-content">
<h1>Contact Made4uo</h1>
<form id="form">
<div class="field">
<label for="ContactFormTitle" class="label--hidden">{{ product.title }}</label>
<input type="text" id="ContactFormTitle" name="ContactFormTitle" value="{{ product.title }}" readonly="readonly">
</div>


<div class="field">
<label for="ContactFormSKU" class="label--hidden">{{ product.selected_or_first_available_variant.sku }}</label>
<input type="text" id="ContactFormSKU" name="ContactFormSKU" value="{{ product.selected_or_first_available_variant.sku }}" readonly="readonly">
</div>

<div class="field">
<label for="ContactFormName">First Name</label>
<input type="text" name="ContactFormName" id="ContactFormName">
</div>
<div class="field">
<label for="ContactFormEmail">Email</label>
<input type="email" name="ContactFormEmail" id="ContactFormEmail">
</div>
<div class="field">
<textarea rows="5" id="ContactFormMessage" name="ContactFormMessage"></textarea>
</div>
<input type="submit" id="button" value="Send Email" >
</form>
</div>
</div>
</div>

<script>
const parambtn = document.getElementById('button');

document.getElementById('form')
.addEventListener('submit', function(event) {
event.preventDefault();

parambtn.value = 'Sending...';

const serviceID = 'default_service';
const templateID = 'template_XXXXX';

emailjs.sendForm(serviceID, templateID, this)
.then(() => {
parambtn.value = 'Send Email';
alert('Sent!');
hideOverlay();
hideModal();
}, (err) => {
parambtn.value = 'Send Email';
alert(JSON.stringify(err));
});
});
const showOverlay = () => document.querySelector("#modal-contact-dark-overlay").style.display = "block";
const showModal = () => document.querySelector("#contact-modal-container").style.display = "block";
const hideOverlay = () => document.querySelector("#modal-contact-dark-overlay").style.display = "none";
const hideModal = () => document.querySelector("#contact-modal-container").style.display = "none";

// Open the Modal Window
document.querySelector("#contact-modal-button").onclick = function(){
showOverlay();
showModal();
}

// Close the Modal Window by clicking the X
document.getElementById("contact-modal-exit").onclick = function(){
hideOverlay();
hideModal();
}

// Close the Modal Window by clicking outside the box
window.onclick = function(event) {
if(event.target === document.querySelector('#contact-modal-container')) {
hideOverlay();
hideModal();
}
}
</script>
<style>
#ContactFormMessage {
width: 100%;
}

.field {
margin-bottom: 10px;
}

.field input {
display: block;
min-width: 100%;
line-height: 1;
font-size: 14px;
}
#modal-contact-dark-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
overflow: auto;
animation-name: animateopacity;
animation-duration: 0.5s;
}
@keyframes animateopacity {
from {background-color: rgba(0, 0, 0, 0.0)}
to {background-color: rgba(0, 0, 0, 0.7)}
}

#contact-modal-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999999;
}

#contact-modal {
position: relative;
margin: 0 auto;
background-color: white;
width: 30%;
height: auto;
padding: 20px 40px 50px 40px;
box-shadow: -1px 3px 18px 0px rgba(128,128,128,1);
animation: drop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: translate(0%, -25%);
top: 10%;

}
@media(max-width: 1200px){
#contact-modal {
width: 40%;
}
}
@media(max-width: 770px){
#contact-modal {
width: 85%;
top: 10%;
padding: 20% 5% 5% 10%;
}
}
@keyframes drop-in {
from {top: 10%;}
to {top: 25%}
}
#contact-modal-exit {
position: absolute;
right: 20px;
border:none;
background:none;
font-size: 18px;
}
.hide-modal-content {
display: none;

}
#contact-modal-button {
position: relative;
display:block;
width: 100%;
}

input#ContactFormTitle {
background-color: #F5F5F5;
font-style: italic;
}
input#ContactFormSKU {
background-color: #F5F5F5;
font-style: italic;
}
input#ContactFormTitle:focus {
outline: none;
}
input#ContactFormSKU:focus {
outline: none;
}
</style>