// COOKIE BANNER

function hideCookieBanner() {
    document.getElementById('cookieConsent').style.display = 'none';
    // Set cookie here if needed
    document.cookie = "cookieConsent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
    showYTContent();
}

// Check if cookie is set
if (document.cookie.includes("cookieConsent=true")) {
    hideCookieBanner();
    console.log(document.cookie);
    showYTContent();
}

function showYTContent() {
    console.log('showYTContent');
    // selector selecting all iframe with attribute src_youtube
    document.querySelectorAll('iframe[src_youtube]').forEach(function (iframe) {
        console.log(iframe.getAttribute('src_youtube'));
        // set the src attribute to the value of the src_youtube attribute
        iframe.setAttribute('src', iframe.getAttribute('src_youtube'));
    });
}



// DEFAULT DISABLED FORM BUTTON


// Select the button
var button = document.querySelector('.custom_submit-button');
console.log(button);

// Check if JavaScript is turned on from client
document.addEventListener('DOMContentLoaded', function () {
    // Select the button again
    var button = document.querySelector('.custom_submit-button');

    // Disable the button if JavaScript is active
    // button.disabled = true;
});


// Validate Form 

// Function for validating the form
function validateForm() {
    var imageInput = document.getElementById('formFile');
    var emailInput = document.getElementById('exampleFormControlInput1');
    var content = document.querySelectorAll('input[name="content[]"]');
    var direction = document.querySelectorAll('input[name="direction[]"]');

    // Check if at least one option is selected -> some
    var atLeastOneContentChecked = Array.from(content).some(content => content.checked);

    // Check if at least one direction is selected
    var atLeastOneDirectionChecked = Array.from(direction).some(direction => direction.checked);

    // Check if the email field is filled out, use trim for making sure to delete whitespaces from the mail
    var emailValid = emailInput.value.trim() !== '';

    // Check if the image field is filled out
    var imageValid = imageInput.files.length > 0;

    // Select the button again
    var button = document.querySelector('.custom_submit-button');

    // Check if all conditions are met to enable the button
    if (atLeastOneContentChecked && atLeastOneDirectionChecked && emailValid && imageValid) {
        button.disabled = false; // Enable the button
    } else {
        button.disabled = true; // Disable the button
    }
}

// Add an event listener to trigger the validation function when there are changes in the form fields
document.addEventListener('DOMContentLoaded', function () {
    // Select form fields
    var formFields = document.querySelectorAll('input[type="file"], input[type="email"], input[name="content[]"], input[name="direction[]"]');

    // Add event listener to trigger the validation function when there are changes in the form fields
    // formFields.forEach(field => {
    //     field.addEventListener('change', validateForm);
    // });
});




// WHEN UPLOAD ERROR, SCROLL TO ERROR MESSAGE


// Function to scroll to id 'form'
function scrollToForm() {
    var uploadElement = document.getElementById('form');
    if (uploadElement) {
        uploadElement.scrollIntoView({ behavior: 'smooth' });
    } else {
        console.error('Das Element mit der ID "form" wurde nicht gefunden.');
    }
}

// Executing function only when error message is displayed
document.addEventListener("DOMContentLoaded", function () {
    var error = document.getElementById("errorMessage");

    if (error) {
        scrollToForm()
    }
});



// ONLY ALLWOING ONE CHECKED CHECKBOX 


// On load get checkboxes
document.addEventListener("DOMContentLoaded", function () {
    var leftCheckbox = document.getElementById("inlineCheckbox1");
    var rightCheckbox = document.getElementById("inlineCheckbox2");

    // if left checkbox is checked, right is not
    leftCheckbox.addEventListener("change", function () {
        if (this.checked) {
            rightCheckbox.checked = false;
        }
    });

    // if right checkbox is checked, left is not
    rightCheckbox.addEventListener("change", function () {
        if (this.checked) {
            leftCheckbox.checked = false;
        }
    });
});




// SHOWING ERROR MESSAGE WHEN WRONG FILE TYPE IS UPLOADED


// document.addEventListener("DOMContentLoaded", function () {
//     var formFile = document.getElementById("formFile");
//     var errorMessage = document.getElementById("errorMessage");

//     formFile.addEventListener("change", function () {
//         var allowedTypes = ['image/jpeg', 'image/png', 'image/tiff', 'image/heic'];
//         var file = formFile.files[0];

//         console.log(file);

//         if (file) {
//             if (allowedTypes.includes(file.type)) {
//                 errorMessage.style.display = 'none'; // Hide error message if file type is allowed
//             } else {
//                 errorMessage.style.display = 'block'; // Show error message if file type is not allowed
//                 formFile.value = ''; // Clear the file input
//             }
//         }
//     });
// });


function validateCheckboxes() {
    let checked = false;
    let boxes = document.querySelectorAll(".custom_upload_checkboxes input");
    let box = document.querySelector(".custom_upload_checkboxes");
    let message = box.querySelector(".invalid-feedback");
    boxes.forEach(function (element) {
        if (element.checked) {
            checked = true;
        }
    })
    if (!checked) {
        boxes.forEach(function (element) {
            element.addEventListener("click", checkboxValidated);
        });

        box.style.border = "solid 1px var(--bs-form-invalid-color)";
        message.style.display = "block";
    }
}

function checkboxValidated() {
    let box = document.querySelector(".custom_upload_checkboxes");
    let message = box.querySelector(".invalid-feedback");
    box.style.borderColor = "var(--bs-form-valid-color)";
    message.style.display = "none";
}

function checkImageType() {
    let fileInput = document.querySelector("#formFile");
    let files = fileInput.files;

    if (files.length > 0) {
        let filetype = files[0].type;

        // Überprüfen, ob der Dateityp nicht einem der erlaubten Bildtypen entspricht
        if (filetype !== 'image/jpeg' && filetype !== 'image/png' && filetype !== 'image/tiff') {
            let box = fileInput.parentElement;
            let message = box.querySelector(".invalid-feedback");
            fileInput.classList.remove("is-valid");
            fileInput.classList.add("wrongData");
            message.textContent = "Falscher Bildtyp";
            message.style.display = "block";
            return false;
        } else {
            return true;
        }
    }
}






    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
        'use strict'

        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.querySelectorAll('.needs-validation')

        // Loop over them and prevent submission
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    validateCheckboxes();
                if (!form.checkValidity() && !checkImageType()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }

                    form.classList.add('was-validated')
                }, false)
            })
    })()