async function changeSite(site){
    const response = await fetch(`/changeSite`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            site: site,
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    location.reload(true)
}

var mode = false
async function toggleDarkMode() {
    let darkMode = document.getElementById("dark-mode");    
    darkMode.disabled = !darkMode.disabled;
    mode = !mode;
    if(mode){
        document.getElementById('modeToggle').innerHTML = "light_mode"
        document.getElementById('main_html').classList.add('uk-light')
        
    } else {
        document.getElementById('modeToggle').innerHTML = "dark_mode"
        document.getElementById('main_html').classList.remove('uk-light')
    }
}

if(session.user.flags.darkmode){
    toggleDarkMode()
}


document.addEventListener('DOMContentLoaded', async function() {
    let zones = await fetchZones()
    await updateZonesPagination()
    await replensihZonesTable(zones)

    let locations = await fetchLocations()
    await updateLocationsPagination()
    await replenishLocationsTable(locations)

    let vendors = await fetchVendors()
    await updateVendorsPagination()
    await replenishVendorsTable(vendors)

    let brands = await fetchBrands()
    await updateBrandsPagination()
    await replenishBrandsTable(brands)

    let prefixes = await fetchPrefixes()
    await updatePrefixesPagination()
    await replenishPrefixesTable(prefixes)

});

// ZONES TAB FUNCTIONS
let zones_current_page = 1
let zones_end_page = 10
let zones_limit = 25
async function fetchZones(){
    const url = new URL('/site_management/api/getZones', window.location.origin)
    url.searchParams.append('page', zones_current_page)
    url.searchParams.append('limit', zones_limit)
    const response = await fetch(url)
    data = await response.json()
    zones_end_page = data.end
    return data.zones
}

async function replensihZonesTable(zones){
    let zonesTableBody = document.getElementById('zonesTableBody')
    zonesTableBody.innerHTML = ""

    for(let i=0; i < zones.length; i++){
        let tableRow = document.createElement('tr')


        let idCell = document.createElement('td')
        idCell.innerHTML = `${zones[i].id}`
        let nameCell = document.createElement('td')
        nameCell.innerHTML = `${zones[i].name}`
        let descriptionCell = document.createElement('td')
        descriptionCell.innerHTML = `${zones[i].description}`
        let opCell = document.createElement('td')
        opCell.innerHTML = ``

        let editOp = document.createElement('button')
        editOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
        editOp.innerHTML = "edit"
        editOp.onclick = async function () {
            await openEditZoneModal(zones[i])
        }

        opCell.append(editOp)
        tableRow.append(idCell, nameCell, descriptionCell, opCell)
        zonesTableBody.append(tableRow)
    }
}

async function updateZonesPagination() {
    let paginationElement = document.getElementById("zonesPagination");
    paginationElement.innerHTML = "";
    // previous
    let previousElement = document.createElement('li')
    if(zones_current_page<=1){
        previousElement.innerHTML = `<a><span uk-pagination-previous></span></a>`;
        previousElement.classList.add('uk-disabled');
    }else {
        previousElement.innerHTML = `<a onclick="setZonePage(${zones_current_page-1})"><span uk-pagination-previous></span></a>`;
    }
    paginationElement.append(previousElement)
    
    //first
    let firstElement = document.createElement('li')
    if(zones_current_page<=1){
        firstElement.innerHTML = `<a>1</a>`;
        firstElement.classList.add('uk-disabled');
    }else {
        firstElement.innerHTML = `<a onclick="setZonePage(1)">1</a>`;
    }
    paginationElement.append(firstElement)
    
    // ...
    if(zones_current_page-2>1){
        let firstDotElement = document.createElement('li')
        firstDotElement.classList.add('uk-disabled')
        firstDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(firstDotElement)
    }
    // last
    if(zones_current_page-2>0){
        let lastElement = document.createElement('li')
        lastElement.innerHTML = `<a onclick=setZonePage(${zones_current_page-1})>${zones_current_page-1}</a>`
        paginationElement.append(lastElement)
    }
    // current
    if(zones_current_page!=1 && zones_current_page != zones_end_page){
    let currentElement = document.createElement('li')
    currentElement.innerHTML = `<li class="uk-active"><span aria-current="page"><strong>${zones_current_page}</strong></span></li>`
    paginationElement.append(currentElement)
    }
    // next
    if(zones_current_page+2<zones_end_page+1){
        let nextElement = document.createElement('li')
        nextElement.innerHTML = `<a onclick=setZonePage(${zones_current_page+1})>${zones_current_page+1}</a>`
        paginationElement.append(nextElement)
    }
    // ...
    if(zones_current_page+2<=zones_end_page){
        let secondDotElement = document.createElement('li')
        secondDotElement.classList.add('uk-disabled')
        secondDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(secondDotElement)
    }
    //end
    let endElement = document.createElement('li')
    if(zones_current_page>=zones_end_page){
        endElement.innerHTML = `<a>${zones_end_page}</a>`;
        endElement.classList.add('uk-disabled');
    }else {
        endElement.innerHTML = `<a onclick="setZonePage(${zones_end_page})">${zones_end_page}</a>`;
    }
    paginationElement.append(endElement)
    //next button
    let nextElement = document.createElement('li')
    if(zones_current_page>=zones_end_page){
        nextElement.innerHTML = `<a><span uk-pagination-next></span></a>`;
        nextElement.classList.add('uk-disabled');
    }else {
        nextElement.innerHTML = `<a onclick="setZonePage(${zones_current_page+1})"><span uk-pagination-next></span></a>`;
    }
    paginationElement.append(nextElement)
}

async function setZonePage(pageNumber){
    zones_current_page = pageNumber;
    let zones = await fetchZones()
    await updateZonesPagination()
    await replensihZonesTable(zones)
}

async function openAddZoneModal() {
    document.getElementById('ZonesModalHeader').innerHTML = "Add Zone to system..."
    document.getElementById('ZonesModalSubmitButton').innerHTML = "Add"
    document.getElementById('ZoneName').value = ""
    document.getElementById('ZoneName').classList.remove('uk-disabled')
    document.getElementById('ZoneDescription').value = ""
    document.getElementById('ZonesModalSubmitButton').onclick = async function() {
        await postAddZone()
    }
    UIkit.modal(document.getElementById('ZonesModal')).show();
}

async function openEditZoneModal(zone) {
    document.getElementById('ZonesModalHeader').innerHTML = `Edit Zone: ${zone.name}...`
    document.getElementById('ZonesModalSubmitButton').innerHTML = "Save"
    document.getElementById('ZoneName').value = zone.name
    document.getElementById('ZoneName').classList.add('uk-disabled')
    document.getElementById('ZoneDescription').value = zone.description
    document.getElementById('ZonesModalSubmitButton').onclick = async function() {
        await postEditZone(zone.id)
    }
    UIkit.modal(document.getElementById('ZonesModal')).show();
}

async function postAddZone() {
    let zoneName = `${document.getElementById('ZoneName').value}`
    let description = `${document.getElementById('ZoneDescription').value}`

    const response = await fetch(`/site_management/api/postAddZone`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            name: zoneName,
            description: description,
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    let zones = await fetchZones()
    await updateZonesPagination()
    await replensihZonesTable(zones)
    UIkit.modal(document.getElementById('ZonesModal')).hide();
}

async function postEditZone(zone_id) {
    let description = `${document.getElementById('ZoneDescription').value}`

    const response = await fetch(`/site_management/api/postEditZone`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            zone_id: zone_id,
            update: {'description': description}
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    let zones = await fetchZones()
    await updateZonesPagination()
    await replensihZonesTable(zones)
    UIkit.modal(document.getElementById('ZonesModal')).hide();
}

// LOCATIONS TAB FUNCTIONS
let locations_current_page = 1
let locations_end_page = 10
let locations_limit = 25
async function fetchLocations(){
    const url = new URL('/site_management/api/getLocations', window.location.origin)
    url.searchParams.append('page', locations_current_page)
    url.searchParams.append('limit', locations_limit)
    const response = await fetch(url)
    data = await response.json()
    locations_end_page = data.end
    return data.locations
}

async function replenishLocationsTable(locations){
    let locationsTableBody = document.getElementById('locationsTableBody')
    locationsTableBody.innerHTML = ""

    for(let i=0; i < locations.length; i++){
        let tableRow = document.createElement('tr')


        let idCell = document.createElement('td')
        idCell.innerHTML = `${locations[i].id}`
        let uuidCell = document.createElement('td')
        uuidCell.innerHTML = `${locations[i].uuid}`
        let nameCell = document.createElement('td')
        nameCell.innerHTML = `${locations[i].name}`
        let descriptionCell = document.createElement('td')
        descriptionCell.innerHTML = ``
        let opCell = document.createElement('td')
        opCell.innerHTML = ``

        tableRow.append(idCell, uuidCell,nameCell, descriptionCell, opCell)
        locationsTableBody.append(tableRow)
    }
}

async function updateLocationsPagination() {
    let paginationElement = document.getElementById("locationsPagination");
    paginationElement.innerHTML = "";
    // previous
    let previousElement = document.createElement('li')
    if(locations_current_page<=1){
        previousElement.innerHTML = `<a><span uk-pagination-previous></span></a>`;
        previousElement.classList.add('uk-disabled');
    }else {
        previousElement.innerHTML = `<a onclick="setLocationsPage(${locations_current_page-1})"><span uk-pagination-previous></span></a>`;
    }
    paginationElement.append(previousElement)
    
    //first
    let firstElement = document.createElement('li')
    if(locations_current_page<=1){
        firstElement.innerHTML = `<a>1</a>`;
        firstElement.classList.add('uk-disabled');
    }else {
        firstElement.innerHTML = `<a onclick="setLocationsPage(1)">1</a>`;
    }
    paginationElement.append(firstElement)
    
    // ...
    if(locations_current_page-2>1){
        let firstDotElement = document.createElement('li')
        firstDotElement.classList.add('uk-disabled')
        firstDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(firstDotElement)
    }
    // last
    if(locations_current_page-2>0){
        let lastElement = document.createElement('li')
        lastElement.innerHTML = `<a onclick=setLocationsPage(${locations_current_page-1})>${locations_current_page-1}</a>`
        paginationElement.append(lastElement)
    }
    // current
    if(locations_current_page!=1 && locations_current_page != locations_end_page){
    let currentElement = document.createElement('li')
    currentElement.innerHTML = `<li class="uk-active"><span aria-current="page"><strong>${locations_current_page}</strong></span></li>`
    paginationElement.append(currentElement)
    }
    // next
    if(locations_current_page+2<locations_end_page+1){
        let nextElement = document.createElement('li')
        nextElement.innerHTML = `<a onclick=setLocationsPage(${locations_current_page+1})>${locations_current_page+1}</a>`
        paginationElement.append(nextElement)
    }
    // ...
    if(locations_current_page+2<=locations_end_page){
        let secondDotElement = document.createElement('li')
        secondDotElement.classList.add('uk-disabled')
        secondDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(secondDotElement)
    }
    //end
    let endElement = document.createElement('li')
    if(locations_current_page>=locations_end_page){
        endElement.innerHTML = `<a>${locations_end_page}</a>`;
        endElement.classList.add('uk-disabled');
    }else {
        endElement.innerHTML = `<a onclick="setLocationsPage(${locations_end_page})">${locations_end_page}</a>`;
    }
    paginationElement.append(endElement)
    //next button
    let nextElement = document.createElement('li')
    if(locations_current_page>=locations_end_page){
        nextElement.innerHTML = `<a><span uk-pagination-next></span></a>`;
        nextElement.classList.add('uk-disabled');
    }else {
        nextElement.innerHTML = `<a onclick="setLocationsPage(${locations_current_page+1})"><span uk-pagination-next></span></a>`;
    }
    paginationElement.append(nextElement)
}

async function setLocationsPage(pageNumber){
    locations_current_page = pageNumber;
    let locations = await fetchLocations()
    await updateLocationsPagination()
    await replenishLocationsTable(locations)
}

async function openAddLocationModal() {
    document.getElementById('LocationsModalHeader').innerHTML = "Add Location to system..."
    document.getElementById('LocationsModalSubmitButton').innerHTML = "Add"
    document.getElementById('LocationUUID').value = ""
    document.getElementById('LocationName').value = ""
    document.getElementById('LocationName').classList.remove('uk-disabled')
    document.getElementById('LocationsModalSubmitButton').onclick = async function() {
        await postAddLocation()
    }
    UIkit.modal(document.getElementById('LocationsModal')).show();
}

async function postAddLocation() {
    let zone_id = parseInt(`${document.getElementById('LocationZoneId').value}`)
    let locationName = `${document.getElementById('LocationName').value}`
    let zone_name = document.getElementById(`locationzone_${zone_id}`).innerHTML
    let uuid = `${zone_name}@${locationName}`

    const response = await fetch(`/site_management/api/postAddLocation`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            uuid: uuid,
            name: locationName,
            zone_id: zone_id
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    let locations = await fetchLocations()
    await updateLocationsPagination()
    await replenishLocationsTable(locations)
    UIkit.modal(document.getElementById('LocationsModal')).hide();
}

// VENDORS TAB FUNCTIONS
let vendors_current_page = 1
let vendors_end_page = 10
let vendors_limit = 25
async function fetchVendors(){
    const url = new URL('/site_management/api/getVendors', window.location.origin)
    url.searchParams.append('page', vendors_current_page)
    url.searchParams.append('limit', vendors_limit)
    const response = await fetch(url)
    data = await response.json()
    vendors_end_page = data.end
    return data.vendors
}

async function replenishVendorsTable(vendors){
    let vendorsTableBody = document.getElementById('vendorsTableBody')
    vendorsTableBody.innerHTML = ""

    for(let i=0; i < vendors.length; i++){
        let tableRow = document.createElement('tr')

        let idCell = document.createElement('td')
        idCell.innerHTML = `${vendors[i].id}`
        let nameCell = document.createElement('td')
        nameCell.innerHTML = `${vendors[i].vendor_name}`
        let createdByCell = document.createElement('td')
        createdByCell.innerHTML = `${vendors[i].created_by}`
        let opCell = document.createElement('td')
        opCell.innerHTML = ``

        let editOp = document.createElement('button')
        editOp.innerHTML = "edit"
        editOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
        editOp.onclick = async function () {
            await openEditVendorsModal(vendors[i])
        }

        opCell.append(editOp)
        tableRow.append(idCell,nameCell, createdByCell, opCell)
        vendorsTableBody.append(tableRow)
    }
}

async function updateVendorsPagination() {
    let paginationElement = document.getElementById("vendorsPagination");
    paginationElement.innerHTML = "";
    // previous
    let previousElement = document.createElement('li')
    if(vendors_current_page<=1){
        previousElement.innerHTML = `<a><span uk-pagination-previous></span></a>`;
        previousElement.classList.add('uk-disabled');
    }else {
        previousElement.innerHTML = `<a onclick="setVendorsPage(${vendors_current_page-1})"><span uk-pagination-previous></span></a>`;
    }
    paginationElement.append(previousElement)
    
    //first
    let firstElement = document.createElement('li')
    if(vendors_current_page<=1){
        firstElement.innerHTML = `<a>1</a>`;
        firstElement.classList.add('uk-disabled');
    }else {
        firstElement.innerHTML = `<a onclick="setVendorsPage(1)">1</a>`;
    }
    paginationElement.append(firstElement)
    
    // ...
    if(vendors_current_page-2>1){
        let firstDotElement = document.createElement('li')
        firstDotElement.classList.add('uk-disabled')
        firstDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(firstDotElement)
    }
    // last
    if(vendors_current_page-2>0){
        let lastElement = document.createElement('li')
        lastElement.innerHTML = `<a onclick=setVendorsPage(${vendors_current_page-1})>${vendors_current_page-1}</a>`
        paginationElement.append(lastElement)
    }
    // current
    if(vendors_current_page!=1 && vendors_current_page != vendors_end_page){
    let currentElement = document.createElement('li')
    currentElement.innerHTML = `<li class="uk-active"><span aria-current="page"><strong>${vendors_current_page}</strong></span></li>`
    paginationElement.append(currentElement)
    }
    // next
    if(vendors_current_page+2<vendors_end_page+1){
        let nextElement = document.createElement('li')
        nextElement.innerHTML = `<a onclick=setVendorsPage(${vendors_current_page+1})>${vendors_current_page+1}</a>`
        paginationElement.append(nextElement)
    }
    // ...
    if(vendors_current_page+2<=vendors_end_page){
        let secondDotElement = document.createElement('li')
        secondDotElement.classList.add('uk-disabled')
        secondDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(secondDotElement)
    }
    //end
    let endElement = document.createElement('li')
    if(vendors_current_page>=vendors_end_page){
        endElement.innerHTML = `<a>${vendors_end_page}</a>`;
        endElement.classList.add('uk-disabled');
    }else {
        endElement.innerHTML = `<a onclick="setVendorsPage(${vendors_end_page})">${vendors_end_page}</a>`;
    }
    paginationElement.append(endElement)
    //next button
    let nextElement = document.createElement('li')
    if(vendors_current_page>=vendors_end_page){
        nextElement.innerHTML = `<a><span uk-pagination-next></span></a>`;
        nextElement.classList.add('uk-disabled');
    }else {
        nextElement.innerHTML = `<a onclick="setVendorsPage(${vendors_current_page+1})"><span uk-pagination-next></span></a>`;
    }
    paginationElement.append(nextElement)
}

async function setVendorsPage(pageNumber){
    vendors_current_page = pageNumber;
    let vendors = await fetchVendors()
    await updateVendorsPagination()
    await replenishVendorsTable(vendors)
}

async function openAddVendorsModal() {
    document.getElementById('VendorsModalHeader').innerHTML = "Add Vendor to system..."
    document.getElementById('VendorsModalSubmitButton').innerHTML = "Add"
    document.getElementById('VendorName').value = ""
    document.getElementById('VendorPhoneNumber').value = ""
    document.getElementById('VendorAddress').value = ""
    document.getElementById('vendor_created').value = ""
    document.getElementById('vendor_created_by').value = ""
    document.getElementById('VendorsModalSubmitButton').onclick = async function() {
        await postAddVendor()
    }
    UIkit.modal(document.getElementById('VendorsModal')).show();
}

async function openEditVendorsModal(vendor) {
    document.getElementById('VendorsModalHeader').innerHTML = `Edit Vendor: ${vendor.vendor_name}`
    document.getElementById('VendorsModalSubmitButton').innerHTML = "Edit"
    document.getElementById('VendorName').value = vendor.vendor_name
    document.getElementById('VendorPhoneNumber').value = vendor.phone_number
    document.getElementById('VendorAddress').value = vendor.vendor_address
    document.getElementById('vendor_created').value = vendor.creation_date
    document.getElementById('vendor_created_by').value = vendor.created_by
    document.getElementById('VendorsModalSubmitButton').onclick = async function() {
        await postEditVendor(vendor.id)
    }
    UIkit.modal(document.getElementById('VendorsModal')).show();
}

async function postAddVendor() {
    let vendor_name = document.getElementById('VendorName').value
    let vendor_phone_number = document.getElementById('VendorPhoneNumber').value
    let vendor_address = document.getElementById('VendorAddress').value

    const response = await fetch(`/site_management/api/postAddVendor`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            vendor_name: vendor_name,
            vendor_phone_number: vendor_phone_number,
            vendor_address: vendor_address
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    let vendors = await fetchVendors()
    await updateVendorsPagination()
    await replenishVendorsTable(vendors)
    UIkit.modal(document.getElementById('VendorsModal')).hide();
}

async function postEditVendor(vendor_id) {
    let vendor_name = document.getElementById('VendorName').value
    let vendor_phone_number = document.getElementById('VendorPhoneNumber').value
    let vendor_address = document.getElementById('VendorAddress').value

    const response = await fetch(`/site_management/api/postEditVendor`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            vendor_id: vendor_id,
            update: {'vendor_name': vendor_name, 'phone_number': vendor_phone_number, 'vendor_address': vendor_address}
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    let vendors = await fetchVendors()
    await updateVendorsPagination()
    await replenishVendorsTable(vendors)
    UIkit.modal(document.getElementById('VendorsModal')).hide();
}

// BRANDS TAB FUNCTIONS
let brands_current_page = 1
let brands_end_page = 10
let brands_limit = 25
async function fetchBrands(){
    const url = new URL('/site_management/api/getBrands', window.location.origin)
    url.searchParams.append('page', brands_current_page)
    url.searchParams.append('limit', brands_limit)
    const response = await fetch(url)
    data = await response.json()
    brands_end_page = data.end
    return data.brands
}

async function replenishBrandsTable(brands){
    let brandsTableBody = document.getElementById('brandsTableBody')
    brandsTableBody.innerHTML = ""

    for(let i=0; i < brands.length; i++){
        let tableRow = document.createElement('tr')

        let idCell = document.createElement('td')
        idCell.innerHTML = `${brands[i].id}`
        let nameCell = document.createElement('td')
        nameCell.innerHTML = `${brands[i].name}`
        let opCell = document.createElement('td')
        opCell.innerHTML = ``

        let editOp = document.createElement('button')
        editOp.innerHTML = "edit"
        editOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
        editOp.onclick = async function() {
            await openEditBrandsModal(brands[i])
        }

        opCell.append(editOp)
        tableRow.append(idCell,nameCell, opCell)
        brandsTableBody.append(tableRow)
    }
}

async function updateBrandsPagination() {
    let paginationElement = document.getElementById("brandsPagination");
    paginationElement.innerHTML = "";
    // previous
    let previousElement = document.createElement('li')
    if(brands_current_page<=1){
        previousElement.innerHTML = `<a><span uk-pagination-previous></span></a>`;
        previousElement.classList.add('uk-disabled');
    }else {
        previousElement.innerHTML = `<a onclick="setBrandsPage(${brands_current_page-1})"><span uk-pagination-previous></span></a>`;
    }
    paginationElement.append(previousElement)
    
    //first
    let firstElement = document.createElement('li')
    if(brands_current_page<=1){
        firstElement.innerHTML = `<a>1</a>`;
        firstElement.classList.add('uk-disabled');
    }else {
        firstElement.innerHTML = `<a onclick="setBrandsPage(1)">1</a>`;
    }
    paginationElement.append(firstElement)
    
    // ...
    if(brands_current_page-2>1){
        let firstDotElement = document.createElement('li')
        firstDotElement.classList.add('uk-disabled')
        firstDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(firstDotElement)
    }
    // last
    if(brands_current_page-2>0){
        let lastElement = document.createElement('li')
        lastElement.innerHTML = `<a onclick=setBrandsPage(${brands_current_page-1})>${brands_current_page-1}</a>`
        paginationElement.append(lastElement)
    }
    // current
    if(brands_current_page!=1 && brands_current_page != brands_end_page){
    let currentElement = document.createElement('li')
    currentElement.innerHTML = `<li class="uk-active"><span aria-current="page"><strong>${brands_current_page}</strong></span></li>`
    paginationElement.append(currentElement)
    }
    // next
    if(brands_current_page+2<brands_end_page+1){
        let nextElement = document.createElement('li')
        nextElement.innerHTML = `<a onclick=setBrandsPage(${brands_current_page+1})>${brands_current_page+1}</a>`
        paginationElement.append(nextElement)
    }
    // ...
    if(brands_current_page+2<=brands_end_page){
        let secondDotElement = document.createElement('li')
        secondDotElement.classList.add('uk-disabled')
        secondDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(secondDotElement)
    }
    //end
    let endElement = document.createElement('li')
    if(brands_current_page>=brands_end_page){
        endElement.innerHTML = `<a>${brands_end_page}</a>`;
        endElement.classList.add('uk-disabled');
    }else {
        endElement.innerHTML = `<a onclick="setBrandsPage(${brands_end_page})">${brands_end_page}</a>`;
    }
    paginationElement.append(endElement)
    //next button
    let nextElement = document.createElement('li')
    if(brands_current_page>=brands_end_page){
        nextElement.innerHTML = `<a><span uk-pagination-next></span></a>`;
        nextElement.classList.add('uk-disabled');
    }else {
        nextElement.innerHTML = `<a onclick="setBrandsPage(${brands_current_page+1})"><span uk-pagination-next></span></a>`;
    }
    paginationElement.append(nextElement)
}

async function setBrandsPage(pageNumber){
    brands_current_page = pageNumber;
    let brands = await fetchBrands()
    await updateBrandsPagination()
    await replenishBrandsTable(brands)
}

async function openAddBrandsModal() {
    document.getElementById('BrandsModalHeader').innerHTML = "Add Vendor to system..."
    document.getElementById('BrandsModalSubmitButton').innerHTML = "Add"
    document.getElementById('BrandName').value = ""
    document.getElementById('BrandsModalSubmitButton').onclick = async function() {
        await postAddBrand()
    }
    UIkit.modal(document.getElementById('BrandsModal')).show();
}

async function openEditBrandsModal(brand) {
    document.getElementById('BrandsModalHeader').innerHTML = `Edit Brand: ${brand.name}`
    document.getElementById('BrandsModalSubmitButton').innerHTML = "Edit"
    document.getElementById('BrandName').value = brand.name
    
    document.getElementById('BrandsModalSubmitButton').onclick = async function() {
        await postEditBrand(brand.id)
    }
    UIkit.modal(document.getElementById('BrandsModal')).show();
}

async function postAddBrand() {
    let brand_name = document.getElementById('BrandName').value

    const response = await fetch(`/site_management/api/postAddBrand`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            brand_name: brand_name
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    let brands = await fetchBrands()
    await updateBrandsPagination()
    await replenishBrandsTable(brands)
    UIkit.modal(document.getElementById('BrandsModal')).hide();
}

async function postEditBrand(brand_id) {
    let brand_name = document.getElementById('BrandName').value

    const response = await fetch(`/site_management/api/postEditBrand`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            brand_id: brand_id,
            update: {'name': brand_name}
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    let brands = await fetchBrands()
    await updateBrandsPagination()
    await replenishBrandsTable(brands)
    UIkit.modal(document.getElementById('BrandsModal')).hide();
}

// PREFIXES TAB FUNCTIONS
let prefix_current_page = 1
let prefix_end_page = 10
let prefix_limit = 25
async function fetchPrefixes(){
    const url = new URL('/site_management/api/getPrefixes', window.location.origin)
    url.searchParams.append('page', prefix_current_page)
    url.searchParams.append('limit', prefix_limit)
    const response = await fetch(url)
    data = await response.json()
    prefix_end_page = data.end
    return data.prefixes
}

async function replenishPrefixesTable(prefixes){
    let prefixesTableBody = document.getElementById('prefixesTableBody')
    prefixesTableBody.innerHTML = ""

    for(let i=0; i < prefixes.length; i++){
        let tableRow = document.createElement('tr')

        let idCell = document.createElement('td')
        idCell.innerHTML = `${prefixes[i].id}`
        let uuidCell = document.createElement('td')
        uuidCell.innerHTML = `${prefixes[i].uuid}`
        let nameCell = document.createElement('td')
        nameCell.innerHTML = `${prefixes[i].name}`
        let descriptionCell = document.createElement('td')
        descriptionCell.innerHTML = `${prefixes[i].description}`
        let opCell = document.createElement('td')
        opCell.innerHTML = ``

        let editOp = document.createElement('button')
        editOp.innerHTML = "edit"
        editOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
        editOp.onclick = async function() {
            await openEditPrefixModal(prefixes[i])
        }

        opCell.append(editOp)

        tableRow.append(idCell,uuidCell, nameCell, descriptionCell, opCell)
        prefixesTableBody.append(tableRow)
    }
}

async function updatePrefixesPagination() {
    let paginationElement = document.getElementById("prefixesPagination");
    paginationElement.innerHTML = "";
    // previous
    let previousElement = document.createElement('li')
    if(prefix_current_page<=1){
        previousElement.innerHTML = `<a><span uk-pagination-previous></span></a>`;
        previousElement.classList.add('uk-disabled');
    }else {
        previousElement.innerHTML = `<a onclick="setPrefixesPage(${prefix_current_page-1})"><span uk-pagination-previous></span></a>`;
    }
    paginationElement.append(previousElement)
    
    //first
    let firstElement = document.createElement('li')
    if(prefix_current_page<=1){
        firstElement.innerHTML = `<a>1</a>`;
        firstElement.classList.add('uk-disabled');
    }else {
        firstElement.innerHTML = `<a onclick="setPrefixesPage(1)">1</a>`;
    }
    paginationElement.append(firstElement)
    
    // ...
    if(prefix_current_page-2>1){
        let firstDotElement = document.createElement('li')
        firstDotElement.classList.add('uk-disabled')
        firstDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(firstDotElement)
    }
    // last
    if(prefix_current_page-2>0){
        let lastElement = document.createElement('li')
        lastElement.innerHTML = `<a onclick=setPrefixesPage(${prefix_current_page-1})>${prefix_current_page-1}</a>`
        paginationElement.append(lastElement)
    }
    // current
    if(prefix_current_page!=1 && prefix_current_page != prefix_end_page){
    let currentElement = document.createElement('li')
    currentElement.innerHTML = `<li class="uk-active"><span aria-current="page"><strong>${prefix_current_page}</strong></span></li>`
    paginationElement.append(currentElement)
    }
    // next
    if(prefix_current_page+2<prefix_end_page+1){
        let nextElement = document.createElement('li')
        nextElement.innerHTML = `<a onclick=setPrefixesPage(${prefix_current_page+1})>${prefix_current_page+1}</a>`
        paginationElement.append(nextElement)
    }
    // ...
    if(prefix_current_page+2<=prefix_end_page){
        let secondDotElement = document.createElement('li')
        secondDotElement.classList.add('uk-disabled')
        secondDotElement.innerHTML = `<span>…</span>`;
        paginationElement.append(secondDotElement)
    }
    //end
    let endElement = document.createElement('li')
    if(prefix_current_page>=prefix_end_page){
        endElement.innerHTML = `<a>${prefix_end_page}</a>`;
        endElement.classList.add('uk-disabled');
    }else {
        endElement.innerHTML = `<a onclick="setPrefixesPage(${prefix_end_page})">${prefix_end_page}</a>`;
    }
    paginationElement.append(endElement)
    //next button
    let nextElement = document.createElement('li')
    if(prefix_current_page>=prefix_end_page){
        nextElement.innerHTML = `<a><span uk-pagination-next></span></a>`;
        nextElement.classList.add('uk-disabled');
    }else {
        nextElement.innerHTML = `<a onclick="setPrefixesPage(${prefix_current_page+1})"><span uk-pagination-next></span></a>`;
    }
    paginationElement.append(nextElement)
}

async function setPrefixesPage(pageNumber){
    prefix_current_page = pageNumber;
    let prefixes = await fetchPrefixes()
    await updatePrefixesPagination()
    await replenishPrefixesTable(prefixes)
}

async function openAddPrefixModal() {
    document.getElementById('PrefixModalHeader').innerHTML = "Add Prefix to system..."
    document.getElementById('PrefixModalSubmitButton').innerHTML = "Add"
    document.getElementById('PrefixUUID').value = ""
    document.getElementById('PrefixName').value = ""
    document.getElementById('PrefixDescription').value = ""
    document.getElementById('PrefixModalSubmitButton').onclick = async function() {
        await postAddPrefix()
    }
    UIkit.modal(document.getElementById('PrefixModal')).show();
}

async function openEditPrefixModal(prefix) {
    document.getElementById('PrefixModalHeader').innerHTML = `Edit Prefix: ${prefix.name}`
    document.getElementById('PrefixModalSubmitButton').innerHTML = "Edit"
    document.getElementById('PrefixUUID').value = prefix.uuid
    document.getElementById('PrefixName').value = prefix.name
    document.getElementById('PrefixDescription').value = prefix.description
    
    document.getElementById('PrefixModalSubmitButton').onclick = async function() {
        await postEditPrefix(prefix.id)
    }
    UIkit.modal(document.getElementById('PrefixModal')).show();
}

async function postAddPrefix() {
    let prefix_uuid = document.getElementById('PrefixUUID').value
    let prefix_name = document.getElementById('PrefixName').value
    let prefix_description = document.getElementById('PrefixDescription').value

    const response = await fetch(`/site_management/api/postAddPrefix`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            prefix_uuid: prefix_uuid,
            prefix_name:prefix_name,
            prefix_description:prefix_description
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    let prefixes = await fetchPrefixes()
    await updatePrefixesPagination()
    await replenishPrefixesTable(prefixes)
    UIkit.modal(document.getElementById('PrefixModal')).hide();
}

async function postEditPrefix(prefix_id) {
    let prefix_uuid = document.getElementById('PrefixUUID').value
    let prefix_name = document.getElementById('PrefixName').value
    let prefix_description = document.getElementById('PrefixDescription').value

    const response = await fetch(`/site_management/api/postEditPrefix`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            prefix_id: prefix_id,
            update: {'name': prefix_name, 'uuid': prefix_uuid, 'description': prefix_description}
        }),
    });
    data =  await response.json();
    transaction_status = "success"
    if (data.error){
        transaction_status = "danger"
    }

    UIkit.notification({
        message: data.message,
        status: transaction_status,
        pos: 'top-right',
        timeout: 5000
    });
    let prefixes = await fetchPrefixes()
    await updatePrefixesPagination()
    await replenishPrefixesTable(prefixes)
    UIkit.modal(document.getElementById('PrefixModal')).hide();
}