// Get references to the input elements
console.log("is this working?")
const adSpendInput = document.getElementById('ad-spend');
const inefficientSpendInput = document.getElementById('inefficient-spend');

const expReachInput = document.getElementById('exp-reach');
const inefficientReachInput = document.getElementById('inefficient-reach')

const adSpendColumn = document.getElementById('ad-spend-column')
const expReachColumn = document.getElementById('exp-reach-column')

const capturingAttentionInput = document.getElementById('ad-spend-capturing-attention');
const poorPerformingInput = document.getElementById('poor-performing-ad-spend');
const wastedAdSpendInput = document.getElementById('wasted-ad-spend');
const inefficientAddSpendInput = document.getElementById('inefficient-monthly-ad-spend');
const inefficientReachModalInput = document.getElementById('inefficient-reach-modal');
const attentionAdjustedReachInput = document.getElementById('attention-adjusted-reach');

// Get the modal
var modal = document.getElementById("data-modal");
// Get the button that opens the modal
var btn = document.getElementById("openModalBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeBtn")[0];
// When the user clicks on the button, open the modal
btn.onclick = function () {
    if (adSpendInput.value == "" && expReachInput.value == "") {
        return;
    } else {
        modal.style.display = "block";
    }
};

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
    modal.style.display = "none";
};


// form modal
// Get the modal
const formModal = document.getElementById('form-modal')
// Get the button that opens the modal
var formBtn = document.getElementById("openFormModalBtn");
// Get the <span> element that closes the modal
var closeSpan = document.getElementsByClassName("closeModalBtn")[0];
// When the user clicks on the button, open the modal
formBtn.onclick = function () {
    if (adSpendInput.value == "" && expReachInput.value == "") {
        return;
    } else {
        formModal.style.display = "block";
    }
};

// When the user clicks on <span> (x), close the modal
closeSpan.onclick = function () {
    formModal.style.display = "none";
};

// Function to allow only numeric input
function validateNumberInput(event) {
    let value = event.target.value;
    value = value.replace(/[^0-9]/g, '');
}

// Function to format numbers with commas
function formatWithCommas(value) {
    const parts = value.split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.join('.');
}

// Function to calculate percentage of the given value
function calculatePercentage(value, percentage) {
    return (value * (percentage / 100));
}

// Add event listeners to the adSpendInput element
// adSpendInput.addEventListener('input', (event) => {
//     validateNumberInput(event);
//     // Format the input with commas
//     const formattedValue = formatWithCommas(event.target.value.replace(/,/g, ''));
//     event.target.value = formattedValue;
// });

// Function to remove commas from a string
function removeCommas(value) {
    return value.replace(/,/g, '');
}

// Add event listeners to the adSpendInput element
adSpendInput.addEventListener('input', (event) => {
    if (event.target.value != "" || expReachInput.value != "") {
        btn.style.opacity = 1;
    } else if (event.target.value != "" && expReachInput.value == "") {
        btn.style.opacity = 1;
    }
    else {
        btn.style.opacity = 0.5;
    }
    validateNumberInput(event);

    const formattedValue = formatWithCommas(event.target.value.replace(/,/g, ''));
    event.target.value = formattedValue;

    
    // Calculate 83% of the ad spend value
    const adSpendValue = parseFloat(removeCommas(adSpendInput.value)) || 0;

    const inefficientSpendValue = calculatePercentage(adSpendValue, 83);
    // Update the inefficientSpendInput value
    inefficientSpendInput.value = inefficientSpendValue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2, style: "currency", currency: "USD"  }).replace("$","$ ");
    inefficientAddSpendInput.value = inefficientSpendValue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2, style: "currency", currency: "USD"  }).replace("$","$ ");

    // Calculate 17% of the ad spend value
    const capturingAttentionValue = calculatePercentage(adSpendValue, 17);
    // Update the capturingAttentionInput value
    capturingAttentionInput.value = capturingAttentionValue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2, style: "currency", currency: "USD" }).replace("$","$ ");

    // Calculate 44% of the ad spend value
    const poorPerformingValue = calculatePercentage(adSpendValue, 44);
    // Update the poorPerformingInput value
    poorPerformingInput.value = (poorPerformingValue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2, style: "currency", currency: "USD" })).replace("$","$ ");

    // Calculate 39% of the ad spend value
    const wastedAdSpendValue = calculatePercentage(adSpendValue, 39);
    // Update the wastedAdSpendInput value
    wastedAdSpendInput.value = wastedAdSpendValue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2, style: "currency", currency: "USD" }).replace("$","$ ");
    if (adSpendInput.value === '') {
        adSpendColumn.style.display = 'none'
        inefficientSpendInput.value = 0
    } else {
        adSpendColumn.style.display = 'block'
    }
});

// expReachInput.addEventListener('input', (event) => {
//     validateNumberInput(event);
//     // Format the input with commas
//     const formattedValue = formatWithCommas(event.target.value.replace(/,/g, ''));
//     event.target.value = formattedValue;
// });

// Add event listeners to the expReachInput element
expReachInput.addEventListener('input', (event) => {
    validateNumberInput(event);

    const formattedValue = formatWithCommas(event.target.value.replace(/,/g, ''));
    event.target.value = formattedValue;

    if (event.target.value != "" || adSpendInput.value != "") {
        btn.style.opacity = 1;
    } else if (event.target.value != "" && adSpendInput.value == "") {
        btn.style.opacity = 1;
    }
    else {
        btn.style.opacity = 0.5;
    }
    // Calculate 56.54% of the ad  value
    const expReachValue = parseInt(removeCommas(expReachInput.value)) || 0;

    const inefficientReachValue = calculatePercentage(expReachValue, 56.54);
    // Update the inefficientReachInput value
    inefficientReachInput.value = Math.floor(inefficientReachValue).toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0});
    inefficientReachModalInput.value = Math.floor(inefficientReachValue).toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0})

    // Calculate 43.46% of the ad  value
    const attentionAdjustedReachValue = calculatePercentage(expReachValue, 43.46);
    // Update the attentionAdjustedReachInput value
    // attentionAdjustedReachInput.value = attentionAdjustedReachValue.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
    attentionAdjustedReachInput.value = Math.floor(parseInt(attentionAdjustedReachValue)).toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0});

    // Conditional display logic of input fields
    if (expReachInput.value === '') {
        expReachColumn.style.display = 'none';
        inefficientReachInput.value = 0
    } else {
        expReachColumn.style.display = 'block';
    }

});

// Conditional display logic for modal
if (expReachInput.value === '') {
    expReachColumn.style.display = 'none'
} else {
    expReachColumn.style.display = 'block'
}


if (adSpendInput.value === '') {
    adSpendColumn.style.display = 'none'
} else {
    adSpendColumn.style.display = 'block'
}

// Optional: Prevent non-numeric input on keypress
adSpendInput.addEventListener('keypress', (event) => {
    if (!/[0-9]/.test(event.key)) {
        event.preventDefault();
    }
});

expReachInput.addEventListener('keypress', (event) => {
    if (!/[0-9]/.test(event.key)) {
        event.preventDefault();
    }
});

// FORM MODAL
document.getElementById('openFormModalBtn').addEventListener('click', () => {
    hbspt.forms.create({
        region: "na1",
        portalId: "21467338",
        formId: "efb871f4-d165-4bad-b17b-13088412d0e3",
        target: '.modal-data'
    });
})