-- Basic usage (vertical layout)
exports['ngd-ui']:ShowHelpText('E: ~g~Interact | G: ~r~Cancel')

-- Horizontal layout
exports['ngd-ui']:ShowHelpText('Arrow Keys: Move | ENTER: ~g~Confirm', 'horizontal')

-- Force show (override existing)
exports['ngd-ui']:ShowHelpText('New text', 'vertical', true)

exports['ngd-ui']:UpdateHelpText('TIME: ~r~5s~w~ remaining')

exports['ngd-ui']:HideHelpText()

local isShowing = exports['ngd-ui']:IsHelpTextShowing()
if not isShowing then
    -- Safe to show new help text
end

CreateThread(function()
    while placementMode do
        exports['ngd-ui']:ShowHelpText('Arrow Keys: Move | Q/E: Rotate | ENTER: ~g~Place | BACKSPACE: ~r~Cancel')
        Wait(0)
    end
    exports['ngd-ui']:HideHelpText()
end)

CreateThread(function()
    while nearVehicle do
        exports['ngd-ui']:ShowHelpText('F: ~g~Enter Vehicle | H: ~y~Lock/Unlock', 'horizontal')
        Wait(0)
    end
    exports['ngd-ui']:HideHelpText()
end)

CreateThread(function()
    for i = 10, 0, -1 do
        local color = i <= 3 and '~r~' or '~y~'
        exports['ngd-ui']:UpdateHelpText('TIME: ' .. color .. i .. 's~w~ remaining | SPACE: ~g~Skip')
        Wait(1000)
    end
    exports['ngd-ui']:HideHelpText()
end)

AddEventHandler('bank:atmOpened', function()
    exports['ngd-ui']:ShowHelpText('Arrow Keys: Navigate | ENTER: ~g~Confirm | BACKSPACE: ~r~Exit')
end)

AddEventHandler('bank:atmClosed', function()
    exports['ngd-ui']:HideHelpText()
end)

local function UpdateInteractionHelp(options)
    local helpText = ''
    for i, opt in ipairs(options) do
        if i > 1 then helpText = helpText .. ' | ' end
        helpText = helpText .. opt.key .. ': ' .. opt.color .. opt.label
    end
    exports['ngd-ui']:ShowHelpText(helpText, 'horizontal')
end

-- Usage
UpdateInteractionHelp({
    { key = 'E', color = '~g~', label = 'Open' },
    { key = 'G', color = '~b~', label = 'Lock' },
    { key = 'H', color = '~r~', label = 'Break In' }
})

E: Open Door
G: Lock Door
H: Break In

E: Open Door | G: Lock Door | H: Break In

local result = exports['ngd-ui']:InputDialog('Dialog Title', {
    { type = 'input', label = 'Player Name', required = true },
    { type = 'number', label = 'Amount', min = 1, max = 1000 }
}, { allowCancel = true })

if result then
    local name = result[1]
    local amount = result[2]
    -- Process results
end

local result = exports['ngd-ui']:InputDialog('Form Title', {
    -- Text Input
    {
        type = 'input',
        label = 'Text Field',
        description = 'Enter some text',
        placeholder = 'Type here...',
        icon = 'font',
        required = true,
        min = 3,  -- Min characters
        max = 50  -- Max characters
    },
    
    -- Password Input
    {
        type = 'password',
        label = 'Password',
        placeholder = 'Enter password...',
        icon = 'lock',
        min = 4,
        max = 20
    },
    
    -- Number Input
    {
        type = 'number',
        label = 'Amount',
        icon = 'dollar-sign',
        default = 0,
        min = 0,
        max = 999999,
        precision = 2,  -- Decimal places
        step = 0.01     -- Increment step
    },
    
    -- Date Picker
    {
        type = 'date',
        label = 'Select Date',
        icon = 'calendar',
        format = 'MM/DD/YYYY',
        minDate = '01/01/2020',
        maxDate = '12/31/2025'
    },
    
    -- Time Picker
    {
        type = 'time',
        label = 'Select Time',
        icon = 'clock'
    },
    
    -- Select Dropdown
    {
        type = 'select',
        label = 'Choose Option',
        icon = 'list',
        options = {
            { value = 'option1', label = 'Option 1' },
            { value = 'option2', label = 'Option 2' },
            { value = 'option3', label = 'Option 3' }
        },
        searchable = true  -- Enable search in dropdown
    },
    
    -- Multi-Select
    {
        type = 'multi-select',
        label = 'Choose Multiple',
        icon = 'list-check',
        options = {
            { value = 'a', label = 'Choice A' },
            { value = 'b', label = 'Choice B' },
            { value = 'c', label = 'Choice C' }
        },
        maxSelectedValues = 3
    },
    
    -- Checkbox
    {
        type = 'checkbox',
        label = 'I agree to terms',
        checked = false,
        required = true
    },
    
    -- Textarea
    {
        type = 'textarea',
        label = 'Description',
        placeholder = 'Enter detailed description...',
        autosize = true,
        fullWidth = true  -- Makes dialog wider for this field
    }
})

local result = exports['ngd-ui']:InputDialog('Create Character', {
    { type = 'input', label = 'First Name', icon = 'user', required = true, min = 2, max = 20 },
    { type = 'input', label = 'Last Name', icon = 'user', required = true, min = 2, max = 20 },
    { type = 'date', label = 'Date of Birth', icon = 'calendar', required = true },
    { type = 'number', label = 'Height (cm)', icon = 'ruler-vertical', min = 100, max = 220, default = 170 },
    { type = 'select', label = 'Gender', icon = 'venus-mars', options = {
        { value = 'male', label = 'Male' },
        { value = 'female', label = 'Female' }
    }},
    { type = 'checkbox', label = 'I agree to server rules', required = true }
})

if result then
    local firstName = result[1]
    local lastName = result[2]
    local dob = result[3]
    local height = result[4]
    local gender = result[5]
    local agreedToRules = result[6]
    
    -- Create character
end

local result = exports['ngd-ui']:InputDialog('Bank Transfer', {
    { type = 'number', label = 'Recipient ID', icon = 'user', required = true, min = 1 },
    { type = 'number', label = 'Amount', icon = 'dollar-sign', required = true, precision = 2, min = 0.01 },
    { type = 'textarea', label = 'Note (optional)', placeholder = 'Add a message...', autosize = true }
})

if result then
    local recipientId = result[1]
    local amount = result[2]
    local note = result[3] or ''
    
    TriggerServerEvent('bank:transfer', recipientId, amount, note)
end

local result = exports['ngd-ui']:InputDialog('Job Application', {
    { type = 'input', label = 'Full Name', icon = 'user', required = true },
    { type = 'number', label = 'Age', icon = 'calendar', min = 18, max = 99, required = true },
    { type = 'select', label = 'Position', icon = 'briefcase', required = true, options = {
        { value = 'officer', label = 'Police Officer' },
        { value = 'detective', label = 'Detective' },
        { value = 'cadet', label = 'Cadet' }
    }},
    { type = 'textarea', label = 'Why do you want this job?', required = true, fullWidth = true }
})

if result then
    local name = result[1]
    local age = result[2]
    local position = result[3]
    local reason = result[4]
    
    TriggerServerEvent('job:submitApplication', name, age, position, reason)
end

local result = exports['ngd-ui']:InputDialog('Sell Vehicle', {
    { type = 'input', label = 'Buyer Name', icon = 'user', required = true },
    { type = 'number', label = 'Sale Price', icon = 'dollar-sign', required = true, precision = 2, min = 1 },
    { type = 'select', label = 'Payment Method', icon = 'credit-card', options = {
        { value = 'cash', label = 'Cash' },
        { value = 'bank', label = 'Bank Transfer' }
    }},
    { type = 'checkbox', label = 'Include vehicle warranty', checked = true }
})

if result then
    TriggerServerEvent('vehicle:processSale', result[1], result[2], result[3], result[4])
end

local result = exports['ngd-ui']:InputDialog('Place Order', {
    { type = 'select', label = 'Product', icon = 'box', required = true, searchable = true, options = {
        { value = 'burger', label = 'Hamburger - $5' },
        { value = 'fries', label = 'French Fries - $3' },
        { value = 'soda', label = 'Soda - $2' }
    }},
    { type = 'number', label = 'Quantity', icon = 'hashtag', min = 1, max = 99, default = 1 },
    { type = 'multi-select', label = 'Extra Toppings', icon = 'plus', options = {
        { value = 'cheese', label = 'Cheese (+$1)' },
        { value = 'bacon', label = 'Bacon (+$2)' },
        { value = 'onions', label = 'Onions (+$0.5)' }
    }},
    { type = 'textarea', label = 'Special Instructions', placeholder = 'Any special requests?' }
})

if result then
    local product = result[1]
    local quantity = result[2]
    local toppings = result[3] or {}
    local instructions = result[4] or ''
    
    TriggerServerEvent('store:placeOrder', product, quantity, toppings, instructions)
end

local result = exports['ngd-ui']:InputDialog('Title', {
    { type = 'input', label = 'Name' },
    { type = 'number', label = 'Age' }
})

if result then
    local name = result[1]  -- First field value
    local age = result[2]   -- Second field value
end

exports['ngd-ui']:CreateMenu({
    { header = 'Main Menu', isMenuHeader = true },
    {
        header = 'Option 1',
        txt = 'Description of option 1',
        icon = 'circle',
        params = {
            event = 'my:clientEvent',
            args = {{ data = 'value', shouldClose = true }}
        }
    },
    {
        header = 'Option 2',
        txt = 'This triggers a server event',
        icon = 'square',
        params = {
            server = true,
            event = 'my:serverEvent',
            args = {{ id = 123, shouldClose = true }}
        }
    }
})

-- Register the menu
exports['ngd-ui']:RegisterMenu('main_menu', {
    title = 'Main Menu',
    position = 'center-right', -- accepted but currently inert, see Position Options below
    options = {
        { header = 'Settings Menu', isMenuHeader = true },
        {
            header = 'Settings',
            txt = 'Configure your settings',
            icon = 'gear',
            params = {
                event = 'menu:openSettings'
            }
        },
        {
            header = 'Exit',
            txt = 'Close the menu',
            icon = 'times',
            params = {
                event = 'menu:close'
            }
        }
    }
})

-- Open the menu later
exports['ngd-ui']:OpenMenu('main_menu')

local toggleKeys = { [1] = 'hud' }
local scrollerKeys = { [2] = 'volume' }

local function OnSettingsChanged(key, value)
    if key == 'hud' then
        SetHudVisible(value) -- boolean
    elseif key == 'volume' then
        SetAudioVolume(value) -- selected string from `values`
    end
end

local opts = {
    { header = 'Settings', isMenuHeader = true },
    { header = 'HUD', checked = true },
    { header = 'Volume', values = { 'Low', 'Medium', 'High' }, defaultIndex = 1 },
    { header = 'Close' },
}

opts.onSelected = function(index, listIndex, value)
    if listIndex ~= nil then return end -- ignore a scroller row's own click, handled by onSideScroll
    local key = toggleKeys[index]
    if key then OnSettingsChanged(key, value) end
end

opts.onSideScroll = function(index, listIndex, value)
    local key = scrollerKeys[index]
    if key then OnSettingsChanged(key, value) end
end

opts.onClose = function()
    print('Settings menu closed')
end

exports['ngd-ui']:CreateMenu(opts)

exports['ngd-ui']:CreateMenu(options, position)

exports['ngd-ui']:RegisterMenu(id, menuData)

exports['ngd-ui']:OpenMenu(id, keepHistory)

exports['ngd-ui']:CloseMenu()

exports['ngd-ui']:GoBackMenu()

exports['ngd-ui']:UpdateMenuOptions(id, options)

local isOpen = exports['ngd-ui']:IsMenuOpen()

local menuId = exports['ngd-ui']:GetOpenMenu()

exports['ngd-ui']:CreateMenu({
    { header = 'Pour Wine Menu', isMenuHeader = true },
    {
        header = 'Red Wine',
        txt = 'Required: Grapes, Sugar',
        icon = 'wine-bottle',
        params = {
            event = 'wine:pour',
            args = {{ drink = 'red_wine' }}
        }
    },
    {
        header = 'White Wine',
        txt = 'Required: White Grapes, Sugar',
        icon = 'wine-glass',
        params = {
            server = true,
            event = 'wine:pourServer',
            args = {{ drink = 'white_wine' }}
        }
    },
    {
        header = 'Champagne',
        txt = 'Required: Special Grapes',
        icon = 'glass-cheers',
        disabled = true
    }
})

exports['ngd-ui']:CreateMenu({
    { header = 'Vehicle Options', isMenuHeader = true },
    {
        header = 'Toggle Engine',
        txt = 'Turn engine on/off',
        icon = 'car',
        params = {
            event = 'vehicle:toggleEngine'
        }
    },
    {
        header = 'Open Trunk',
        txt = 'Access vehicle storage',
        icon = 'box',
        params = {
            event = 'vehicle:openTrunk'
        }
    },
    {
        header = 'Lock/Unlock',
        txt = 'Toggle vehicle locks',
        icon = 'lock',
        params = {
            event = 'vehicle:toggleLock'
        }
    }
})

RegisterNetEvent('myEvent', function(args)
    print('Received:', args.data)
end)

RegisterNetEvent('myServerEvent', function(args)
    local src = source
    print('Player:', src, 'Args:', args.id)
end)

icon = 'circle'        -- renders as fa-solid fa-circle
icon = 'gear'          -- renders as fa-solid fa-gear
icon = 'wine-bottle'   -- renders as fa-solid fa-wine-bottle

icon = 'nui://myresource/images/custom.png'

Config.CameraSystem = {
    systemName = "Daddy Tobacco",
    systemSubtitle = "Security System",
    cameras = {
        { 
            coords = vector3(-34.05, 2895.45, 63.90), 
            heading = 225.31, 
            pitch = -20.0, 
            roll = 0.0, 
            name = "Front Gate" 
        },
        { 
            coords = vector3(-72.86, 2927.90, 65.13), 
            heading = 277.27, 
            pitch = -35.0, 
            roll = 0.0, 
            name = "North Sideyard" 
        },
    }
}

-- With full configuration
exports['ngd-ui']:OpenCameras(Config.CameraSystem)

-- With just cameras array (no system name/subtitle)
exports['ngd-ui']:OpenCameras({
    { coords = vector3(x, y, z), heading = 0.0, name = "Camera 1" },
    { coords = vector3(x, y, z), heading = 90.0, name = "Camera 2" }
})

exports['ngd-ui']:CloseCameras()

-- Switch to next camera
exports['ngd-ui']:NextCamera()

-- Switch to previous camera
exports['ngd-ui']:PreviousCamera()

exports['ngd-ui']:OpenCameras({
    systemName = "Prison",
    systemSubtitle = "Maximum Security",
    cameras = {
        { coords = vector3(1845.0, 2585.0, 45.0), heading = 180.0, name = "Cell Block A" }
    }
})

exports['ngd-ui']:CloseCameras()

exports['ngd-ui']:NextCamera()

exports['ngd-ui']:PreviousCamera()

RegisterCommand('officesecurity', function()
    exports['ngd-ui']:OpenCameras({
        systemName = "Downtown Office",
        systemSubtitle = "Security Cameras",
        cameras = {
            { coords = vector3(-75.0, -818.0, 326.0), heading = 90.0, pitch = -25.0, name = "Lobby" },
            { coords = vector3(-75.0, -827.0, 326.0), heading = 180.0, pitch = -30.0, name = "Elevator" },
            { coords = vector3(-68.0, -823.0, 326.0), heading = 270.0, pitch = -20.0, name = "Parking" }
        }
    })
end)

local storeCameras = {
    systemName = "24/7 Supermarket",
    systemSubtitle = "Store #143",
    cameras = {
        { coords = vector3(28.0, -1339.0, 31.0), heading = 225.0, pitch = -30.0, name = "Entrance" },
        { coords = vector3(25.0, -1345.0, 31.0), heading = 135.0, pitch = -25.0, name = "Counter" },
        { coords = vector3(31.0, -1343.0, 31.0), heading = 315.0, pitch = -20.0, name = "Aisles" }
    }
}

-- Triggered by interaction with security monitor
RegisterNetEvent('store:viewCameras', function()
    exports['ngd-ui']:OpenCameras(storeCameras)
end)

Config.Menu = {
    title = "Vanilla Unicorn",
    subtitle = "Drink Menu",
    imagePath = "nui://ngd-vu/web/images/",
    pages = 2,
    imageFormat = "jpg"
}

your-resource/
  web/
    images/
      1.jpg
      2.jpg
      3.jpg

-- With full configuration
exports['ngd-ui']:OpenFlipbook(Config.Menu)

-- Inline configuration
exports['ngd-ui']:OpenFlipbook({
    title = "Gun Store",
    subtitle = "Available Weapons",
    imagePath = "nui://myresource/web/pages/",
    pages = 5
})

-- Simple version (no title/subtitle)
exports['ngd-ui']:OpenFlipbook({
    imagePath = "nui://ngd-vu/web/images/",
    pages = 2
})

exports['ngd-ui']:CloseFlipbook()

exports['ngd-ui']:OpenFlipbook({
    title = "Burger Shot",
    subtitle = "Menu",
    imagePath = "nui://burgershot/web/menu/",
    pages = 4,
    imageFormat = "png"
})

local vuMenu = {
    title = "Vanilla Unicorn",
    subtitle = "Drink Menu",
    imagePath = "nui://ngd-vu/web/images/",
    pages = 2
}

RegisterNetEvent('vu:openMenu', function()
    exports['ngd-ui']:OpenFlipbook(vuMenu)
end)

exports['ngd-ui']:OpenFlipbook({
    title = "Ponsonbys",
    subtitle = "Spring Collection 2024",
    imagePath = "nui://clothing-store/catalog/",
    pages = 8
})

AddEventHandler('gunstore:openCatalog', function()
    exports['ngd-ui']:OpenFlipbook({
        title = "Ammu-Nation",
        subtitle = "Firearms Catalog",
        imagePath = "nui://gunstore/web/catalog/",
        pages = 6,
        imageFormat = "png"
    })
end)

exports['ngd-ui']:OpenFlipbook({
    imagePath = "nui://my-store/products/",
    pages = 3
})

-- From your resource
imagePath = "nui://my-resource/web/images/"

-- From another resource
imagePath = "nui://qb-shops/html/menus/"

-- Nested folders
imagePath = "nui://server-ui/public/catalogs/guns/"

exports['ngd-ui']:AddInteraction({
    id = 'shop_door',
    coords = vector3(25.0, -1347.0, 29.5),
    key = 'E',
    keyLabel = 'E',
    label = 'Open Shop',
    icon = 'fa-solid fa-store',
    color = '~g~',
    range = 2.5,
    onInteract = function(id, data)
        -- Your code here
    end
})

exports['ngd-ui']:AddInteraction({
    id = 'boss_safe',
    coords = vector3(25.0, -1347.0, 29.5),
    icon = 'fa-solid fa-briefcase',
    range = 3.0,
    options = {
        {
            key = 'E',
            keyLabel = 'E',
            label = 'Open Stash',
            color = '~g~',
            onInteract = function()
                -- Your code here
            end
        },
        {
            key = 'G',
            keyLabel = 'G',
            label = 'Boss Menu',
            color = '~b~',
            job = 'police',
            onInteract = function()
                -- Your code here
            end
        }
    }
})

-- Update label
exports['ngd-ui']:UpdateInteraction('shop_door', 'Shop Closed')

-- Update position
exports['ngd-ui']:UpdateInteractionCoords('shop_door', vector3(x, y, z))

-- Remove specific interaction
exports['ngd-ui']:RemoveInteraction('shop_door')

-- Clear all interactions
exports['ngd-ui']:ClearAllInteractions()

-- Add marker
exports['ngd-ui']:AddTextMarker(
    'parking_sign',
    vector3(215.0, -810.0, 30.0),
    'Public Parking',
    10.0,
    'fa-solid fa-parking'
)

-- Update text
exports['ngd-ui']:UpdateTextMarker('parking_sign', 'Parking Full')

-- Update position
exports['ngd-ui']:UpdateTextMarkerCoords('parking_sign', vector3(x, y, z))

-- Remove marker
exports['ngd-ui']:RemoveTextMarker('parking_sign')

-- Clear all markers
exports['ngd-ui']:ClearAllTextMarkers()

-- Add persistent text
exports['ngd-ui']:Add3DText(
    'welcome_sign',
    vector3(0.0, 0.0, 70.0),
    'Welcome to Los Santos',
    15.0,
    'fa-solid fa-star'
)

-- Update text
exports['ngd-ui']:Update3DText('welcome_sign', 'Welcome Back!')

-- Update position
exports['ngd-ui']:Update3DTextCoords('welcome_sign', vector3(x, y, z))

-- Remove text
exports['ngd-ui']:Remove3DText('welcome_sign')

-- Clear all texts
exports['ngd-ui']:ClearAll3DTexts()

CreateThread(function()
    while someCondition do
        exports['ngd-ui']:Draw3DText(
            vector3(x, y, z),
            'E: ~g~Interact',
            10.0,
            'fa-solid fa-hand'
        )
        Wait(0)
    end
    exports['ngd-ui']:Hide3DText()
end)

-- Single job
job = 'police'

-- Multiple jobs
job = {'police', 'ambulance'}

-- Exclude jobs
notJob = 'unemployed'
notJob = {'unemployed', 'civilian'}

exports['ngd-ui']:AddInteraction({
    id = 'store_24_7',
    coords = vector3(25.0, -1347.0, 29.5),
    key = 'E',
    label = 'Open Store',
    icon = 'fa-solid fa-store',
    range = 2.0,
    onInteract = function()
        TriggerEvent('store:openMenu')
    end
})

exports['ngd-ui']:AddInteraction({
    id = 'atm_main_1',
    coords = vector3(-386.7, 6046.0, 31.5),
    key = 'E',
    label = 'Use ATM',
    icon = 'fa-solid fa-credit-card',
    color = '~b~',
    range = 1.5,
    onInteract = function()
        TriggerEvent('bank:openATM')
    end
})

exports['ngd-ui']:AddInteraction({
    id = 'pd_evidence',
    coords = vector3(475.0, -995.0, 26.3),
    icon = 'fa-solid fa-box-archive',
    range = 2.0,
    options = {
        {
            key = 'E',
            label = 'View Evidence',
            job = 'police',
            onInteract = function()
                -- Open evidence UI
            end
        },
        {
            key = 'G',
            label = 'Submit Evidence',
            job = 'police',
            color = '~y~',
            onInteract = function()
                -- Submit evidence
            end
        }
    }
})

exports['ngd-ui']:AddTextMarker(
    'parking_downtown',
    vector3(215.0, -810.0, 30.0),
    '~b~Public Parking~w~\n$5 per hour',
    12.0,
    'fa-solid fa-square-parking'
)

exports['ngd-ui']:Notify(
    title,              -- string (required)
    message,            -- string (optional)
    time,               -- number in ms (required)
    type,               -- string (optional)
    position,           -- string (optional)
    hideprogressbar,    -- boolean (optional)
    sound               -- boolean (optional)
)

exports['ngd-ui']:NotifyAdvanced({
    title       = "",
    message     = "",
    time        = 5000,
    type        = "default",
    icon        = "",       -- FontAwesome icon name
    position    = "",
    hideProgressBar = false,
    sound       = true
})

exports['ngd-ui']:Notify("Success!", "You did the thing", 5000, "success")

exports['ngd-ui']:Notify("Error", "Something went wrong", 5000, "error")

exports['ngd-ui']:Notify("Warning", "Low fuel detected", 5000, "warning", "top-center")

exports['ngd-ui']:Notify("Note", "Progress bar disabled", 5000, "info", "top-right", true)

exports['ngd-ui']:Notify("Shhh...", "Sound disabled for this notification", 5000, "info", nil, nil, false)

exports['ngd-ui']:NotifyAdvanced({
    title    = "Vehicle Stored",
    message  = "Your vehicle has been stored in the garage",
    time     = 5000,
    type     = "success",
    icon     = "car",
    position = "top-right"
})

TriggerClientEvent('ngd-ui:Notify', source, "Job Complete!", "You earned $500", 5000, "success")

top-right
top-left
top-center
bottom-right
bottom-left
bottom-center
center-right (default)
above-center-right

AddEventHandler('items:pickup', function(label)
    exports['ngd-ui']:Notify("Picked Up", "You collected: " .. label, 3000, "success")
end)

if fuel <= 5 then
    exports['ngd-ui']:Notify("Fuel Low", "Find a gas station!", 5000, "warning", "bottom-center")
end

exports['ngd-ui']:NotifyAdvanced({
    title = "Crafting Complete",
    message = "Your item is ready to use!",
    type = "success",
    icon = "hammer",
    sound = true
})

exports['ngd-ui']:OpenShop(data)

{
    name        = "Shop Name",
    imagePath   = "path/to/images/",
    serverEvent = "myresource:Server:Purchase",
    items = {
        { name = "water", label = "Water", price = 5 },
        ...
    }
}

exports['ngd-ui']:CloseShop()

local shop = {
    name        = "My Shop",
    imagePath   = "nui://ox_inventory/web/images/",
    serverEvent = "myresource:Server:Purchase",
    items = {
        { name = "vodka", label = "Vodka", price = 10 },
        ...
    }
}

exports['ngd-ui']:OpenShop(shop)

imagePath .. "water.png"

local purchaseData = {
    shopId = data.shopId,
    items  = data.items,
    total  = data.total
}

TriggerServerEvent("myresource:Server:Purchase", purchaseData)

TriggerServerEvent("ngd-ui:Server:ShopPurchase", purchaseData)

exports['ngd-ui']:OpenShop({
    name        = "Snack Bar",
    serverEvent = "my_snacks:Server:Purchase",
    items = {
        { name = "water",   label = "Water Bottle", price = 5 },
        { name = "sandwich", label = "Sandwich",    price = 25 }
    }
})

Config = Config or {}

Config.AlcoholStore = {
    name        = "Alcohol Store",
    imagePath   = "nui://ngd-vu/web/images/",
    serverEvent = "ngd-vu:Server:StorePurchases",
    items = {
        { name = "vodka", label = "Vodka", price = 10 },
        { name = "whiskey", label = "Whiskey", price = 15 }
    }
}

exports['ngd-ui']:OpenShop(Config.AlcoholStore)

exports['ngd-ui']:CloseShop()

exports['ngd-ui']:Progress(data, cb?)         -- linear bar
exports['ngd-ui']:ProgressCircle(data, cb?)   -- circular bar
exports['ngd-ui']:CancelProgress()            -- force-cancel active progress
exports['ngd-ui']:IsDoingProgress()           -- returns boolean

-- Optional direct sync access (internal helpers)
exports['ngd-ui']:ProgressSync(data)
exports['ngd-ui']:ProgressCircleSync(data)

exports['ngd-ui']:Progress({
    label      = "Lockpicking...",
    duration   = 5000, -- ms
    canCancel  = true,
    controlDisables = {
        disableMovement    = true,
        disableCarMovement = true,
        disableMouse       = false,
        disableCombat      = true
    }
}, function(cancelled)
    if not cancelled then
        print("Success!")
    else
        print("Cancelled")
    end
end)

local success = exports['ngd-ui']:Progress({
    label    = "Searching...",
    duration = 3000
})

if success then
    print("Search complete")
else
    print("Search cancelled or failed")
end

exports['ngd-ui']:ProgressCircle({
    label     = "Scanning Area...",
    duration  = 7000,
    canCancel = true
}, function(cancelled)
    if not cancelled then
        print("Scan finished")
    end
end)

disable = {
    disableMovement = true,
    disableMouse    = false,
    disableCar      = true,
    disableCombat   = true
}

controlDisables = {
    disableMovement    = true,
    disableCarMovement = true,
    disableMouse       = false,
    disableCombat      = true
}

anim = {
    dict = "amb@world_human_hammering@male@base",
    anim = "base",
    flag = 49 -- optional
}

animation = {
    animDict = "amb@world_human_bum_wash@male@low@idle_a",
    anim     = "idle_a",
    flag     = 49,   -- or
    flags    = 49
}

prop = {
    model = "prop_tool_hammer",
    bone  = 57005,
    pos   = vector3(0.1, 0.02, -0.02),
    rot   = vector3(90.0, 0.0, 0.0)
}

function(cancelled)
    if cancelled then
        -- user cancelled or failed
    else
        -- success
    end
end

exports['ngd-ui']:CancelProgress()

if exports['ngd-ui']:IsDoingProgress() then
    exports['ngd-ui']:CancelProgress()
end

local active = exports['ngd-ui']:IsDoingProgress()
if active then
    print("Progress in progress...")
end

exports['ngd-ui']:TalkToNPC(entity, dialog)

exports['ngd-ui']:UpdateDialog(dialog)

exports['ngd-ui']:CloseDialog()

-- A "Buy Drinks" choice asks the server for stock; the server then either updates the
-- dialog (out of stock) or triggers this client event (in stock):
RegisterNetEvent('myresource:Client:OpenStore', function(items)
    exports['ngd-ui']:CloseDialog()          -- dismiss the greeting dialog + camera
    exports['ngd-ui']:CreateMenu(items)      -- then open the store menu
end)

exports['ngd-ui']:StartDialog(entity, graph, vars)

local graph = {
    start = 'greeting',
    typeSpeed = 30, -- optional, ms per character
    nodes = {
        greeting = {
            title       = 'NPC',
            icon        = 'fa-solid fa-user',
            description = 'Hello, {name}! What can I do for you?',
            tags        = { 'Merchant' },
            choices     = {
                { title = 'Tell me about your wares', next = 'shop' },
                { title = 'Goodbye', close = true },
            },
        },
        shop = {
            description = 'Take a look around.',
            choices     = {
                { title = 'Buy a health potion', serverEvent = 'myresource:Server:BuyPotion', args = { item = 'potion' } },
                { title = 'Back', next = 'greeting' },
            },
        },
    },
}

exports['ngd-ui']:StartDialog(ped, graph, { name = GetPlayerName(PlayerId()) })

local dialog = {
    title       = "Character Name",
    icon        = "user",
    description = "Some dialog text here.",
    choices     = { /* choice list */ },
    tags        = { "NPC", "Quest" }
}

{
    title       = "Redeem Ticket",
    shouldClose = false,
    shouldHide  = false,
    clientEvent = "myresource:Client:Redeem",
    serverEvent = "myresource:Server:Redeem",
    command     = "me waves",
    func        = function(args) end,
    args        = { some = "data" }
}

local function OpenVendorDialog(ped)
    exports['ngd-ui']:TalkToNPC(ped, {
        title       = "Ticket Vendor",
        icon        = "ticket",
        description = "Welcome! What would you like to do?",
        tags        = { "Service", "Vendor" },
        choices     = {
            {
                title       = "Redeem Ticket",
                shouldClose = false,
                clientEvent = "myresource:Client:RedeemTicket",
                args        = { type = "standard" }
            },
            {
                title       = "Ask a Question",
                shouldClose = false,
                command     = "me asks a question"
            },
            {
                title       = "Goodbye",
                shouldClose = true
            }
        }
    })
end

AddEventHandler("myresource:OpenVendor", function(ped)
    OpenVendorDialog(ped)
end)

local function BuildIntroDialog(ped)
    local serverId = GetPlayerServerId(PlayerId())

    local choices = {}

    -- Option 1: Who are you?
    choices[#choices + 1] = {
        title       = "Who are you?",
        shouldClose = false,
        func        = function()
            exports['ngd-ui']:UpdateDialog({
                title       = "About Me",
                icon        = "user",
                description = "I'm just a test NPC used to demonstrate the ngd-ui dialog system.",
                tags        = { "ngd-ui is cool!" },
                choices     = {
                    {
                        title       = "Back",
                        shouldClose = false,
                        func        = function()
                            exports['ngd-ui']:UpdateDialog(BuildIntroDialog(ped))
                        end
                    },
                    {
                        title       = "Goodbye",
                        shouldClose = true,
                        func        = function()
                            CreateTestPedText()
                        end
                    }
                }
            })
        end
    }

    -- Option 2: What is this UI?
    choices[#choices + 1] = {
        title       = "What is this UI?",
        shouldClose = false,
        func        = function()
            exports['ngd-ui']:UpdateDialog({
                title       = "ngd-ui Dialog",
                icon        = "info-circle",
                description = "This is a demo conversation showing how dialogs can update without closing.",
                tags        = { "Dialog Update Example" },
                choices     = {
                    {
                        title       = "Back",
                        shouldClose = false,
                        func        = function()
                            exports['ngd-ui']:UpdateDialog(BuildIntroDialog(ped))
                        end
                    },
                    {
                        title       = "Goodbye",
                        shouldClose = true,
                        func        = function()
                            CreateTestPedText()
                        end
                    }
                }
            })
        end
    }

    -- Option 3: Goodbye (main menu)
    choices[#choices + 1] = {
        title       = "Goodbye",
        shouldClose = true,
        func        = function()
            CreateTestPedText()
        end
    }

    return {
        title       = "Test NPC",
        icon        = "user",
        description = "Hi there! Choose an option below to see dialog updates in action.",
        tags        = { "TAG Example", "I am just an NPC :(", "Live Variables. Server ID: " .. serverId },
        choices     = choices
    }
end

exports['ngd-ui']:TalkToNPC(testPed, BuildIntroDialog(testPed))

-- Enable in your config file
Config.TestCommands = true
Config.ThreeDTextDebug = true

-- In-game
Use the / commands listed above to show examples of each UI element.