// URL of the API you want to fetch
const apiUrl = 'https://api.evertransit.com/v1.1/pricing/plans'
//const signupUrl = 'https://signup.dev.evertransit.com'
//const password = 'TejmcySXPJix2MvaF1k3E0'
// const apiUrl = 'https://api.evertransit.whipclient.io/v1.1/pricing/plans'
const signupUrl = 'https://signup.evertransit.com'
const username = 'et_signup_client'
const password = 'ExqI8!%5i+W3#M2U'
//var products = {}
var base64Credentials = btoa(username + ':' + password)

getProducts = function () {
    return $.ajax({
        url: apiUrl,
        type: 'GET',
        dataType: 'json',
        headers: {
            Authorization: 'Basic ' + base64Credentials
        },
        success: function (response) {
            // Handle successful response
            return response
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // Handle error response
            console.log(errorThrown)
            return []
        }
    })
}

document.addEventListener('DOMContentLoaded', function () {
    // Function to add content to the div
    function addContentToDiv() {
        var div = document.getElementById('dynamic_pricing')
        // Check if the div exists
        if (div) {
            getProducts().then(data => {
                const setOfFeatures = []
                let sortedProducts = data.sort(
                    (a, b) => a.default_price - b.default_price
                )
                div.innerHTML = createHtml(data)
            })
        } else {
            console.error('Div not found.')
        }
    }

    // Call the function to add content on page load
    addContentToDiv()
})

function createHtml(products) {
    var html = "<div class='pricing-table-wrapper flex-container'>"
        + "<div class='plans'>"
        + products.map(product => createPlanHtml(product)).join("")
        + "</div>"
    var endHtml = html + "</div><div style='float: none; clear: both;'>&nbsp;</div>"
    return endHtml
}

function createPlanHtml(product) {
    const hasTrial = product?.metadata?.hasOwnProperty('trial_days');
    const trialBanner = hasTrial
        ? "<div style=\"position: absolute; top: 10px; right: -45px; \
        text-align: center; color: white; padding: 8px 50px; font-size: 11px; \
        font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; \
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); transform: rotate(45deg); \
        z-index: 1; white-space: nowrap; background: linear-gradient(45deg, rgb(78, 205, 196), rgb(68, 160, 141));\">"
        + product?.metadata?.trial_days + " Days <br> Free Trial</div>"
        : "";
    var html = "<div class='plan' style=\"position: relative; overflow: hidden;\">"
        + trialBanner
        + "<span class='name'>" + product.name + "</span><ul>"
        + "<li style='list-style: none; margin-left: -1.25em;'><span class='fee'>$" + getProductRecurring(product) + "</span> / month</li>"
        + "<li>" + getOverageLimit(product) + " included rides / month</li>"
        + "<li>$" + getOverageFee(product) + " / additional ride</li>"
        + ((product.marketing_features == null || product.marketing_features.length == 0) ? buildLiField("<b>*** NO FEATURES ***</b>") : product.marketing_features.map(feature => buildLiField(feature.name)).join(""))
        + "<li>One-time setup fee $" + getSetUpFee(product) + "</li>"
        + "</ul>"
        + "<a href='" + signupUrl + "?productId=" + product.id + "' class='button-fluid-2 medium w-inline-block'><div class='button-text-2'>Get Started</div></a></div>"
    return html
}

function buildLiField(liText) {
    return "<li><span>" + liText + "</span></li>"
}

function getSetUpFee(eachProduct) {
    let filteredPrice = eachProduct.prices.filter((allPrice) => allPrice.product == eachProduct.id)
    let findedPrice = filteredPrice.find((eachPrice) => eachPrice.nickname ? (eachPrice.nickname).split(' ').join('').toLowerCase() == 'setupfee' : '')
    return findedPrice == undefined || findedPrice == null ? "<span>" + '0' + "</span > " : "<span>" + findedPrice.unit_amount / 100 + "<span>"
}

function getProductRecurring(eachProduct) {
    let filteredPrice = eachProduct.prices.filter((allPrice) => allPrice.product == eachProduct.id)
    let findedPrice = filteredPrice.find((eachPrice) => eachPrice.type === "recurring" && eachPrice.active == true && eachPrice.unit_amount !== null)
    return findedPrice == undefined || findedPrice == null ? "<span>" + '0' + "</span > " : "<span>" + findedPrice.unit_amount / 100 + "<span>"
}

function getOverageLimit(eachProduct) {
    let getByTiersMode = eachProduct.prices.find((eachPrice) => {
        if (eachPrice.tiers_mode == 'graduated') {
            return true
        } else if (eachPrice.tiers_mode == 'volume') {
            return true
        } else {
            return false
        }
    })
    if (getByTiersMode) {
        let overageLimit = getByTiersMode.tiers.find((each) => each.up_to)
        return "<span>" + overageLimit.up_to + "<span>"
    }
}

function getOverageFee(eachProduct) {
    let getByTiersMode = eachProduct.prices.find((eachPrice) => {
        if (eachPrice.tiers_mode == 'graduated') {
            return true
        } else if (eachPrice.tiers_mode == 'volume') {
            return true
        } else {
            return false
        }
    })
    if (getByTiersMode) {
        let overageFee = getByTiersMode.tiers.find((each) => each.up_to == null)
        return "<span>" + overageFee.unit_amount / 100 + "<span>"
    }
}