Language = 'en' // "en", "es", "fr", "de", "pt", "it", "pl", "nl", "ru", "tr", "hu", "ro", "cs", "sv", "ar"

CurrentPage = "properties"
PropertyCreationPanelType = 'house'
PropertyCreationType = 'SHELL'
PropertyCreationKey = null
PropertyInfos = ['','','']
CurrentPropertySelectionPage = 1
CurrentCameraSelectionPage = 1
CurrentProperty = null
PurchaseType = 'purchase'
AdminPropertyType = 'house_admin'
QuestionPanel = []
RealEstate = false
InSoldProperties = false
SellType = 'instant'
ChoosedPropertyForSell = ''
ChoosedPaint = 0
ChosedFurnitureType = 'all'
InsideOrOutside = ''
Loader = false
IsDUIDotOpened = false
LastProperty = null
ControlSectionState = 'house'
ChosedMovingFurnitureType = null
OpenedTutoralFrom = ''
CurrentTutorialPage = 0
Myproperties = null
BGBlur = true

BackgroundBlurFunction(BGBlur)

let translations = {};

async function loadTranslations(lang) {
    try {
        const response = await fetch(`../locales/${lang}.json`);
        translations = await response.json();
        updateText()
    } catch (error) {
        console.error("Error loading translation:", error);
    }
}

function updateText() {
    document.querySelectorAll("[data-i18n]").forEach(element => {
        const key = element.getAttribute("data-i18n");

        if (element.hasAttribute("placeholder")) {
            element.setAttribute("placeholder", translations[key]);
        } else {
            element.innerHTML = translations[key]; 
        }
    });
}

loadTranslations(Language)

function t(key) {
    return translations[key] || key; 
}

window.addEventListener('message', function(event) {
    let data = event.data

    if (data.action == "NUILanguage") {
        
    }

    if (data.action === "OpenDuiMenu") {
        
        let DoorStatus = data.dooropen
        let PropertyType = data.ptype
        let DuiActionTable = data.table

        document.querySelector(".button_option_panel .property_type img").src = PropertyType=='house'?"assets/house.png":"assets/garage.png"
        if (DoorStatus){
            document.querySelector(".button_option_panel .small_icon").classList.remove("red")
            document.querySelector(".button_option_panel .state").classList.remove("red")
            document.querySelector(".button_option_panel .small_icon").classList.add("green")
            document.querySelector(".button_option_panel .state").classList.add("green")
            setTimeout(() => {
                $('.button_option_panel .state').html(t('open'))
            }, 10);
            $('.button_option_panel .top_section').css('box-shadow', 'inset -200px 0px 100px -100px rgba(121, 215, 190, 0.8)')
        }
        else{
            document.querySelector(".button_option_panel .small_icon").classList.remove("green")
            document.querySelector(".button_option_panel .state").classList.remove("green")
            document.querySelector(".button_option_panel .small_icon").classList.add("red")
            document.querySelector(".button_option_panel .state").classList.add("red")
            setTimeout(() => {
                $('.button_option_panel .state').html(t('closed'))
            }, 10);
            $('.button_option_panel .top_section').css('box-shadow', 'inset -200px 0px 100px -100px rgba(249, 84, 84, 0.8)')
        }

        $(".action_container").html("")
        for (let i = 0; i < DuiActionTable.length; i++) {
            $(".action_container").append(`
                <div class="action_part popup_anim">
                    <div class="key_btn"><div class="btn_text">${DuiActionTable[i][0]}</div></div>
                    <div class="text">${DuiActionTable[i][1]}</div>
                </div>
            `)
        }

        $(".dui_section").css("display", "block")
        document.getElementById('dot_signal').style.animation = "reverse_popup_anim 0.35s ease, dot_animation2 2s infinite";
        setTimeout(() => {
            $(".dot_signal").css("display", "none")
            setTimeout(() => {
                $(".button_option_panel").css("display", "block")
                if (IsDUIDotOpened){
                    let elements = document.getElementsByClassName('popup_anim');
                    for (let i = 0; i < elements.length; i++) {
                        elements[i].style.animation = "popup_anim 0.35s ease";
                    }
                    IsDUIDotOpened = false
                }
            }, 20);
        }, 300);

    }
    else if (data.action === "OpenDuiDot") {
        
        IsDUIDotOpened = true
        $(".dui_section").css("display", "block")
        let elements = document.getElementsByClassName('popup_anim');
        for (let i = 0; i < elements.length; i++) {
            elements[i].style.animation = "reverse_popup_anim 0.35s ease";
        }
        setTimeout(() => {
            $(".button_option_panel").css("display", "none")
            setTimeout(() => {
                $(".dot_signal").css("display", "flex")
                document.getElementById('dot_signal').style.animation = "popup_anim 0.35s ease, dot_animation2 2s infinite";
            }, 20);
        }, 300);
    }
    else if (data.action === "OpenVehicleMenu") {
        VehicleData = data.vehicledata
        VehicleRepairing = data.repairing
        $(".dui_section").css("display", "block")
        $(".vehicle_info").css("display", "block")
        $(".first_layer").css("display", "block")
        CreateVehicleMenu()
        $(".second_layer").css("display", "none")
    }
    else if (data.action === "OpenVehicleMenu2") {
        VehicleData = data.vehicledata
        VehicleRepairing = data.repairing
        $(".dui_section").css("display", "block")
        $(".vehicle_info").css("display", "block")
        $(".second_layer").css("display", "block")
        CreateVehicleMenu()
        $(".first_layer").css("display", "none")
    }
    else if (data.action === "OpenApartmentMenu") {
        ApartmentTable = data.table
        SelectedApartment = data.selectedapartment - 1
        Currency = data.currencyform
        CreateApartmenteMenu()
        $(".dui_section").css("display", "block")
        $(".apartment_selector").css("display", "block")
        document.querySelector(".selected").style.opacity = "0";
    }
    else if (data.action === "OpenApartmentMenu2") {
        ApartmentTable = data.table
        SelectedApartment = data.selectedapartment - 1
        Currency = data.currencyform
        CreateApartmenteMenu()
        $(".dui_section").css("display", "block")
        $(".apartment_selector").css("display", "block")
        $(".apartment_selector").css("background-color", "transparent")
        document.querySelectorAll(".apartment_selector *").forEach(el => {
            el.style.opacity = "0";
        });

        document.querySelectorAll(".upper_layer").forEach(el => {
            el.style.opacity = "1";
        });
        document.querySelectorAll(".upper_layer *").forEach(el => {
            el.style.opacity = "0";
        });

        document.querySelector(".selected").style.opacity = "1";

        document.querySelectorAll(".selected *").forEach(el => {
            el.style.opacity = "1";
        });
    }
    else if (data.action === "CloseDui") {
        $(".dui_section").css("display", "none")
    }

    if (data.action === "OpenPropertyMenu") {
        Myproperties = data.table
        WifiUnlockPrice = data.wifiunlockprice
        Currency = data.currencyform
        OsTime = data.ostime
        SellToGameMultiplier = data.fastsalepurchaseprice
        MaxDelayedPriceMultiplier = data.delayedsalepurchaseprice
        GarageUpgrade = data.garageupgrade
        Furnitures = data.furnitures 
        KeyPrices = data.keyprices 
        ClosestProperty = data.selectedproperty
        SecurityObjects = data.securityobjects
        BrutalKeys = data.brutalkey
        BackgroundBlurFunction(BGBlur)

        show('properties_menu')
        if (CurrentPage == 'furnitures'){
            CurrentPage = 'properties'
        }
        BackgroundBlur("plugin_1", 'properties_panel')

        if (data.type == 'open'){
            SwitchPage(CurrentPage)
        }
        else{
            SwitchPage(CurrentPage, true)
        }
    } 
    else if (data.action === "OpenHouseCreationMenu") {
        show('property_creation_menu')
        PropertyTypes = data.types
        GarageIDs = data.allgarageid
        CreatePropertyCreation('house')
        PropertyCreationPanelType = 'house'
        BackgroundBlur("plugin_2", 'panel_creation')
    }
    else if (data.action === "OpenGarageCreationMenu") {
        PropertyTypes = data.types
        GarageIDs = data.allgarageid
        BackgroundBlurFunction(BGBlur)
        CreatePropertyCreation('garage')
        PropertyCreationPanelType = 'garage'
        show('property_creation_menu')
        BackgroundBlur("plugin_2", 'panel_creation')
    }
    else if (data.action === "OpenControlHelp") {
        HintTable = data.table
        ScreenTitle = data.text
        BackgroundBlurFunction(BGBlur)
        CreateHintMenu(data.furniture)
        show('hint_menu')
        show('screen_title')
    }
    else if (data.action === "HideControlHelp") {
        hide('hint_menu')
        hide('screen_title')
    }
    else if (data.action === "HideFurnitureInfos") {
        BackgroundBlurFunction(BGBlur)
        if (data.updatedfurnitures != undefined){
            Myproperties[CurrentProperty].furnitures = data.updatedfurnitures
        }
        $('#panel_chosed_furniture').css('animation', 'none')
        $('#panel_chosed_furniture').css('animation', 'reverse_Basic_popup 0.3s ease both')
        setTimeout(() => {
            BackgroundBlur("plugin_4", 'panel_chosed_furniture')
            $('.chosed_furniture').css('display', 'none')
        }, 300);
        CreateFurnitureMenu()
    }
    else if (data.action === "BringFurnituresUp") {
        $('#panel_furniture').css('animation', 'Basic_popup 0.3s ease both')
        $('#panel_chosed_furniture').css('animation', 'Basic_popup 0.3s ease both')
        $('.preferences_con').css('animation', 'Basic_popup 0.3s ease both')
        BackgroundBlurFunction(BGBlur)

        let interval = setInterval(() => {
            BackgroundBlur("plugin_4", 'panel_chosed_furniture')
            BackgroundBlur("plugin_3", 'panel_furniture')
        }, 1);

        setTimeout(() => {
            clearInterval(interval)
        }, 600);
    }
    else if (data.action === "OpenPurchaseMenu") {
        Currency = data.currencyform
        PurchasePropertyData = data.propertydata
        PropertyDebt = data.debt
        PurchaseData = data.purchasedata
        BillingCycle = data.billingcycle
        BackgroundBlurFunction(BGBlur)
        CreatePurchaseMenu()
        show('property_purchase_menu')
        BackgroundBlur("plugin_5", 'panel_purchase')
    }
    else if (data.action === "OpenAdminPropertiesMenu") {
        AdminTable = data.housingdata
        Currency = data.currencyform
        RealEstate = false
        BackgroundBlurFunction(BGBlur)
        show('admin_menu')
        CreateAdminMenu(document.getElementById('admin_search_input').value)
        BackgroundBlur("plugin_admin", 'panel_admin')
    }
    else if (data.action === "OpenRealEstatePropertiesMenu") {
        Balance = data.realestate.balance
        SoldProperties = data.realestate.soldProperties
        AdminTable = data.housingdata
        Currency = data.currencyform
        CanOpenBalance = data.balancemenu
        RealEstate = true
        BackgroundBlurFunction(BGBlur)
        show('admin_menu')
        CreateRealEstateMenu(document.getElementById('admin_search_input').value)
        BackgroundBlur("plugin_admin", 'panel_admin')
    }
    else if (data.action === "successCreation") {
        document.getElementById('rentable_input').checked = false
        document.getElementById('property_name').value = ''
        document.getElementById('property_price').value = ''
        document.getElementById('property_img').value = ''
        document.getElementById('street_number').value = ''
        document.getElementById('garage_id_input').value = ''
        document.getElementById('vehicle_exit').value = ''
        document.getElementById('entry_door').value = ''
        document.getElementById('street_input').value = ''
        if (document.getElementById('exit_door')){
            document.getElementById('exit_door').value = ''
        }
    }
    else if (data.action === "OpenCloakroomMenu") {
        show('clothe_menu')
        $(".clothe_conatiner").html("")
        Clothe = data.table
        if (Clothe.length > 0) {
            for (let index = 0; index < Clothe.length; index++) {
                $(".clothe_conatiner").append(`
                    <button class="clothe_element" onclick="SendClothe(${index})">
                        <div class="name">${Clothe[index].label}</div>
                        <div class="arrows"></div>
                    </button>
                `)
            }
        } else {
            $(".clothe_conatiner").html("There are no available clothes")
        }
        BackgroundBlurFunction(BGBlur)
        BackgroundBlur("plugin3", 'panel_clothe')
    } 
    else if (data.action === "FadeOut") {
        $('.loading_screen').css('display', 'block')
        $('.top_box').css('animation', 'box 0.7s ease both')
        $('.bottom_box').css('animation', 'bottom_box 0.7s ease both')
        $('.appear_con').css('animation', 'logo_container 0.7s ease both 0.6s')
    }
    else if (data.action === "FadeIn") {
        $('.top_box').css('animation', 'reverse_box 0.7s ease both 0.6s')
        $('.bottom_box').css('animation', 'reverse_bottom_box 0.7s ease both 0.6s')
        $('.appear_con').css('animation', 'reverse_logo_container 0.7s ease both')
        if (Loader){
            clearTimeout(Loader)
        }
        Loader = setTimeout(() => {
            $('.loading_screen').css('display', 'none')
            Loader = false
        }, 1200);
    } 
    else if (data.action === "close") {
        Close()
    }
})

document.onkeydown = function(data) {
    if (event.key == 'Escape') {
        Close()
    } 

    if (event.key == 'Backspace') {
        UnselectFurniture()
    } 
}

function Close() {
    hide('properties_menu')
    hide('property_creation_menu')
    hide('property_purchase_menu')
    hide('admin_menu')
    hide('question_panel')
    hide('data_entry_panel')
    hide('property_sell_menu')
    hide('balance_panel')
    hide('furniture_menu')
    hide('tutorial_menu')
    hide('property_purchase_menu_from_rent')
    hide('clothe_menu')
    ResetFurniturePanel()
    $('.property_sell_menu').css('display', 'none')
    $('.property_purchase_menu_from_rent').css('display', 'none')
    $('.admin_menu .panel').css("filter", "brightness(100%)")
    $('.properties_menu .panel').css("filter", "brightness(100%)")
    document.removeEventListener("click", handleClick)
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "close"}))
}

function BackgroundBlurFunction(data){
    BGBlur = data
    if (!BGBlur){
        document.querySelectorAll('*').forEach(el => {
            el.style.backdropFilter = 'none';
        });
        $('.panel').css('background-color', 'background-color: rgba(61, 65, 70, 1);')
    }
}

function UnselectFurniture(){
    window.postMessage({ action: 'HideFurnitureInfos' }, '*');
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "unselectFurniture"}))
}

function SendClothe(skin) {
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({
        action: "cloakroom",
        skin
    }))
}

function OpenTutorialPanel(OpenedFrom){
    TutorialImages = {
        properties: [
            ['https://i.ibb.co/XZN7KTDZ/tutorial-properties.png', t('properties_1')],
            ['https://i.ibb.co/d4PkN2By/tutorial-messages.png', t('properties_2')],
            ['https://i.ibb.co/7JFP5xyd/tutorial-rename.png', t('properties_3')],
            ['https://i.ibb.co/JWGCpZ7j/tutorial-keys.png', t('properties_4')]
        ],
        controls: [
            ['https://i.ibb.co/93gc4nzP/tutorial-bills.png', t('controls_1')],
            ['https://i.ibb.co/TDRzV3Zm/tutorial-rent.png', t('controls_2')],
            ['https://i.ibb.co/60CPZ274/tutorial-security.png', t('controls_3')],
            ['https://i.ibb.co/FkJxZFj4/tutorial-paints.png', t('controls_4')]
        ],
        cameras: [
            ['https://i.ibb.co/qLB19T8G/tutorial-cameras.png', t('cameras_1')]
        ],
        furnitures: [
            ['https://i.ibb.co/CpYnhRh7/tutorial-furniture-1.png', t('furnitures_1')],
            ['https://i.ibb.co/DfRfdxwQ/tutorial-furniture-2.png', t('furnitures_2')]
        ],
    }

    OpenedTutoralFrom = OpenedFrom
    TutorialTable = []
    CurrentTutorialPage = 0
    if (OpenedFrom == 'properties_menu'){
        if (CurrentPage == 'garage'){
            return
        }
        TutorialTable = TutorialImages[CurrentPage]
        hide('properties_menu')
    }
    else if(OpenedFrom == 'furniture'){
        TutorialTable = TutorialImages['furnitures']
    }

    $(".page_chooser#tutorial_chooser").html('')
    for (let i = 0; i < TutorialTable.length; i++) {
        $(".page_chooser#tutorial_chooser").append(`
            <button class="page_element" id='page_${i}_' onclick='ChooseTutorialPage(${i})'></button>
        `)
    }

    $('.image_previewer').css('background-image', 'url("'+TutorialTable[CurrentTutorialPage][0]+'")')
    $('.image_previewer .text').html(TutorialTable[CurrentTutorialPage][1])
    document.getElementById('page_'+CurrentTutorialPage+'_').classList.add('choosed')

    show('tutorial_menu')
    BackgroundBlur("plugin_tutorial", 'image_container')
}

function SwitchTutorialPage(id){
    if (id == 'left_arrow'){
        if (CurrentTutorialPage > 0){
            CurrentTutorialPage = CurrentTutorialPage - 1
        }
    }
    else{
        if (TutorialTable.length > CurrentTutorialPage+1){
            CurrentTutorialPage = CurrentTutorialPage + 1
        }
    }

    $('.image_previewer').css('background-image', 'url("'+TutorialTable[CurrentTutorialPage][0]+'")')
    $('.image_previewer .text').html(TutorialTable[CurrentTutorialPage][1])

    for (let i = 0; i < TutorialTable.length; i++) {
        document.getElementById('page_'+i+'_').classList.remove('choosed')
    }
    document.getElementById('page_'+CurrentTutorialPage+'_').classList.add('choosed')
}

function ChooseTutorialPage(id){
    for (let i = 0; i < TutorialTable.length; i++) {
        document.getElementById('page_'+i+'_').classList.remove('choosed')
    }
    document.getElementById('page_'+id+'_').classList.add('choosed')
    CurrentTutorialPage = id

    $('.image_previewer').css('background-image', 'url("'+TutorialTable[CurrentTutorialPage][0]+'")')
    $('.image_previewer .text').html(TutorialTable[CurrentTutorialPage][1])
}

function CreateApartmenteMenu(){
    $('.apartments_container').html('')
    for (let i = 0; i < ApartmentTable.length; i++) {
        let status_txt
        let status_color
        if (ApartmentTable[i].owner == 'owned' || ApartmentTable[i].owner == 'rented'){
            status_txt = t('owned_status')
            if (ApartmentTable[i].owner == 'owned'){ApartmentTable[i].owner = t('owned'); status_color = '#79CFE0'}else{ApartmentTable[i].owner = t('rented'); status_color = '#2B8AC5'}
        }
        else{
            status_txt = t('price')
            ApartmentTable[i].owner = ApartmentTable[i].owner+' '+Currency
            status_color = '#79D7BE'
        }
        $('.apartments_container').append(`
            <div class="apartment_element ${i == SelectedApartment?'selected':''}" id='apartment_${i}'>
                ${i == SelectedApartment?'<div class="selector"></div>':''}
                <div class="label">${ApartmentTable[i].label}</div>
                <div class="id">${ApartmentTable[i].propertyid}</div>
                <div class="status_text">${status_txt}</div>
                <div class="status" style='color: ${status_color}'>${ApartmentTable[i].owner}</div>
            </div>
        `)
    }

    document.getElementById("apartment_"+SelectedApartment).scrollIntoView({ behavior: "smooth", block: "center" });
}

function CreateVehicleMenu(){
    $('.vehicle_name').html(VehicleData.name)
    $('.vehicle_plate').html(VehicleData.plate)
    
    $(".vehicle_info img").attr("src", "assets/"+VehicleData.type+".png");

    if (VehicleRepairing){
        $('.progress_line').css('width', (VehicleData.ostime-VehicleData.stored)/VehicleData.repairtime*100+"%")
        if (0 > VehicleData.repairtime-(VehicleData.ostime-VehicleData.stored)){
            $('.time').html(t('done'))
        }
        else{
            $('.time').html(fancyTimeFormat3(VehicleData.repairtime-(VehicleData.ostime-VehicleData.stored)))
        }
        $('.vehicle_info .lock').css('display', "none")
        $('.lockable').css('opacity', "1")
    }
    else{
        $('.progress_line').css('width', "0%")
        $('.time').html(t('locked'))
        $('.vehicle_info .lock').css('display', "block")
        $('.lockable').css('opacity', "0.3")
    }
}

function ShowQuestionPanel(parentEl, type, data1, question){
    show('question_panel')
    $('.question_panel .title').html(question)
    $(parentEl).css("filter", "brightness(70%)")
    QuestionPanel = [parentEl, type, data1]
}

function CloseQuestionPanel(id){
    $(QuestionPanel[0]).css("filter", "brightness(100%)")
    hide('question_panel')
    if (id == 'yes'){
        $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: QuestionPanel[1], propertyID: QuestionPanel[2]}))
        CurrentProperty = (CurrentPropertySelectionPage*6)-6
        if (Myproperties){
            SelectProperty(CurrentProperty)
        }
        if (document.getElementById('select_'+CurrentProperty)){
            document.getElementById('select_'+CurrentProperty).disabled = true
        }
    }
}

function OpenDataEntryPanel(propertyID, title, type, data1){
    DataEntryPropertyId = propertyID
    DataEntryType = type
    DataEntryData1 = data1
    show('data_entry_panel')
    $('.data_entry_panel .title').html(t(title))
    $('.admin_menu .panel').css("filter", "brightness(70%)")
    $('.properties_menu .panel').css("filter", "brightness(70%)")
}

function SendDataEntryBack(value){
    $('.admin_menu .panel').css("filter", "brightness(100%)")
    $('.properties_menu .panel').css("filter", "brightness(100%)")
    hide('data_entry_panel')
    if (value){
        if (DataEntryType == 'switch'){
            newOwner = document.getElementById('data_in_1').value
            $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'switchOwnerOfProperty', propertyID: DataEntryPropertyId, newOwner}))
        }
        else if (DataEntryType == 'attach'){
            attachedPropertyID = document.getElementById('data_in_1').value.toUpperCase()
            $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'attachProperty', propertyID: DataEntryPropertyId, attachedPropertyID}))
        }
        else if (DataEntryType == 'setCameraURL'){
            url = document.getElementById('data_in_1').value
            $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'setupCamURL', propertyID: DataEntryPropertyId, url, objectid:DataEntryData1}))
        }
        else if (DataEntryType == 'setPropertyURL'){
            url = document.getElementById('data_in_1').value
            $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'setupPropertyURL', propertyID: DataEntryPropertyId, url}))
        }
    }
    document.getElementById('data_in_1').value = ''
}

function OpenSellMenu(ChoosedProperty){
    ChoosedPropertyForSell = ChoosedProperty
    setTimeout(() => {
        show('property_sell_menu')
        ChangeSellType('instant')
    }, 100);
    $('.properties_menu .panel').css("filter", "brightness(70%)")
}

function OpenPurchaseMenuFromProperties(ChoosedProperty){
    ChosedPropertyForPurchase = ChoosedProperty
    $('.property_purchase_menu_from_rent .number_container').html(Myproperties[ChosedPropertyForPurchase].purchasePrice.toLocaleString('hu-HU')+' '+Currency)
    setTimeout(() => {
        show('property_purchase_menu_from_rent')
    }, 100);
    $('.properties_menu .panel').css("filter", "brightness(70%)")
}

function SendPurchaseRentedProperty(){
    hide('property_purchase_menu_from_rent')
    $('.properties_menu .panel').css("filter", "brightness(100%)")
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'purchaseFromRent', propertyID:Myproperties[ChosedPropertyForPurchase].id}))
}

function SendChangePaint(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'changePaint', propertyID:Myproperties[CurrentProperty].id, newPaint:ChoosedPaint}))
}

function OpenBalanceMenu(){
    show('balance_panel')
    $('.balance_panel .balance').html(Balance.toLocaleString('hu-HU')+' '+Currency)
    $('.admin_menu .panel').css("filter", "brightness(70%)")
}

function CloseBalanceMenu(){
    hide('balance_panel')
    $('.admin_menu .panel').css("filter", "brightness(100%)")
}

function SendChangeBalance(id){
    let amount = document.getElementById('balance_in').value
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: id, amount}))
    document.getElementById('balance_in').value = ''
}

function CreateAdminMenu(filter){
    $('.sold_btn').css("display", "none")
    if (RealEstate){
        CreateRealEstateMenu(filter)
    }
    else{
        if (filter != null){
            filter = filter.toUpperCase()
        }
        else{
            filter = ''
        }
        $('.properties_container').html('')
        if (AdminTable.length > 0){
            for (const i in AdminTable) {
                if (((AdminPropertyType == 'house_admin') && (AdminTable[i].ptype == 'house')) || ((AdminPropertyType == 'garage_admin') && (AdminTable[i].ptype == 'garage'))){
                    if (AdminTable[i].label.toUpperCase().indexOf(filter) > -1){
                        let AttachedProperty = ''
                        let IdButton = ``
                        if (AdminTable[i].ptype == 'garage' && AdminTable[i].house != 0){
                            AttachedProperty = '<span>H'+AdminTable[i].house +'</span> <i class="fa-solid fa-link"></i> '
                        }
                        else  if (AdminTable[i].ptype == 'house' && AdminTable[i].garage != 0){
                            AttachedProperty = '<span>G'+AdminTable[i].garage +'</span> <i class="fa-solid fa-link"></i> '
                        }

                        if (AttachedProperty != ''){
                            IdButton = `<button class="id" onclick='ShowQuestionPanel(".admin_menu .panel", "detachProterty", "${AdminTable[i].id}", "${t('detaching_property_question')}")'>${AttachedProperty}${AdminTable[i].id}</button>`
                        }
                        else{
                            if (AdminTable[i].type == 'APARTMENT'){
                                IdButton = `<div class="id">${AdminTable[i].id}</div>`
                            }
                            else{
                                IdButton = `<button class="id" onclick='OpenDataEntryPanel("${AdminTable[i].id}", "attach_property", "attach")'><i class="fa-solid fa-link text-white"></i> ${AdminTable[i].id}</button>`
                            }
                        }

                        $('.properties_container').append(`
                            <div class="property_element ${AdminTable[i].type == 'APARTMENT'?'blue':''}">
                                <div class="preview" style='background-image: url("${AdminTable[i].url}")'></div>
                                <button class="teleport_btn" onclick='TeleportToProperty("${AdminTable[i].id}")'><i class="fa-solid fa-eye"></i></button>
                                ${AdminTable[i].type == 'APARTMENT'?'':`<button class="delete_btn" onclick='ShowQuestionPanel(".admin_menu .panel", "deleteProperty", "${AdminTable[i].id}", "${t('delete_property_question')}")'><i class="fa-solid fa-trash"></i></button>`}
                                <div class="label">${AdminTable[i].label}</div>
                                ${IdButton}
                                <div class="price">${AdminTable[i].salePrice.toLocaleString('hu-HU')+' '+Currency}</div>
                                <div class="middle_title">${t('owner')}</div>
                                <div class="middle_data">${AdminTable[i].owner}</div>
                                <div class="row p-0 m-0" style="position: absolute; bottom: 0px; left: 0px; width: 100%;">
                                    <div class="col p-2 d-flex flex-column align-items-center justify-content-center">
                                        <button class="admin_btn" onclick='ShowQuestionPanel(".admin_menu .panel", "deleteOwnerOfProperty", "${AdminTable[i].id}", "${t('delete_property_owner_question')}")'>${t("remove")}</button>
                                    </div>
                                    <div class="col p-2 d-flex flex-column align-items-center justify-content-center">
                                        <button class="admin_btn blue" onclick='OpenDataEntryPanel("${AdminTable[i].id}", "switch_owner", "switch")'>${t('switch')}</button>
                                    </div>
                                </div>
                            </div>
                        `)
                    }
                }
            }
        }
        else{
            $('.properties_container').html(`<div class="text">${t('no_properties_to_show')} <br> <i class="fa-solid fa-face-sad-tear"></i></div>`)
        }
        
    }
}

function CreateRealEstateMenu(filter){
    if (InSoldProperties){
        ChangeSoldProperties(filter)
    }
    $('.balance_panel .balance').html(Balance.toLocaleString('hu-HU')+' '+Currency)
    $('.sold_btn').css("display", "block")
    if (!CanOpenBalance){
        $('#balance_btn').css("display", "none")
    }
    if (filter != null){
        filter = filter.toUpperCase()
    }
    else{
        filter = ''
    }
    $('.properties_container').html('')
    if (AdminTable.length > 0){
        for (const i in AdminTable) {
            if (((AdminPropertyType == 'house_admin') && (AdminTable[i].ptype == 'house')) || ((AdminPropertyType == 'garage_admin') && (AdminTable[i].ptype == 'garage'))){
                if (AdminTable[i].label.toUpperCase().indexOf(filter) > -1){
                    $('.properties_container').append(`
                        <div class="property_element">
                            <div class="preview" style='background-image: url("${AdminTable[i].url}")'></div>
                            <div class="label">${AdminTable[i].label}</div>
                            <div class="id">${AdminTable[i].id}</div>
                            <div class="price">${AdminTable[i].salePrice.toLocaleString('hu-HU')+' '+Currency}</div>
                            <div class="middle_title">${t('type')}</div>
                            <div class="middle_data">${AdminTable[i].type}</div>
                            <div class=" p-2 d-flex flex-column align-items-center justify-content-center" style="position: absolute; bottom: 0px; left: 0px; width: 100%;">
                                <button class="admin_btn red" onclick='ShowQuestionPanel(".admin_menu .panel", "deleteProperty", "${AdminTable[i].id}", "${t('delete_property_question')}")'>${t('delete')}</button>
                            </div>
                        </div>
                    `)
                }
            }
        }
    }
    else{
        $('.properties_container').html(`<div class="text">${t('no_properties_to_show')} <br> <i class="fa-solid fa-face-sad-tear"></i></div>`)
    }
}

function ChangeSoldProperties(filter){
    if (!InSoldProperties){
        InSoldProperties = true
        document.getElementById("sold_btn").classList.add("active")
        document.querySelector(".slider#admin").style.display = 'none'

        if (filter != null){
            filter = filter.toUpperCase()
        }
        else{
            filter = ''
        }

        $('.properties_container').html('')
        for (const i in SoldProperties) {
            if (SoldProperties[i].label.toUpperCase().indexOf(filter) > -1){
                $('.properties_container').append(`
                    <div class="property_element">
                        <div class="preview" style='background-image: url("${SoldProperties[i].url}")'></div>
                        <div class="label">${SoldProperties[i].label}</div>
                        <div class="id">${SoldProperties[i].id}</div>
                        <div class="row p-0" style='margin-top: 120px; margin-inline: 7px;'>
                            <div class="col p-0">
                                <div class="title">${t('sale_price')}</div>
                            </div>
                            <div class="col p-0">
                                <div class="number_container gray float-end">${SoldProperties[i].price.toLocaleString('hu-HU')+' '+Currency}</div>
                            </div>
                        </div>
                        <div class="row" style='margin-top: 10px; margin-inline: 7px;'>
                            <div class="col p-0">
                                <div class="title">${t('profit')}</div>
                            </div>
                            <div class="col-9 p-0">
                                <div class="row p-0 m-0">
                                    <div class="col p-0">
                                        <div class="number_container me-1 float-end">${Math.round((SoldProperties[i].profit/SoldProperties[i].price*100) * 10) / 10}%</div>
                                    </div>
                                    <div class="col p-0">
                                        <div class="number_container float-end">${SoldProperties[i].profit.toLocaleString('hu-HU')+' '+Currency}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `)
            }
        }

    }
    else{
        InSoldProperties = false
        document.getElementById("sold_btn").classList.remove("active")
        document.querySelector(".slider#admin").style.display = 'block'
        CreateRealEstateMenu(document.getElementById('admin_search_input').value)
    }
}

function TeleportToProperty(propertyID){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "teleportToProperty", propertyID}))
}

function ChangeAdminPropertyType(id){
    AdminPropertyType = id
    let rect = document.getElementById(id).getBoundingClientRect();
    let parentRect = document.querySelector(".slider_container#admin").getBoundingClientRect();
    let elementCenterY = rect.left - parentRect.left;
    document.querySelector(".slider#admin").style.left = `${elementCenterY-3}px`;
    CreateAdminMenu(document.getElementById('admin_search_input').value)
}

function CreateHintMenu(value){
    if (value){
        $('.hint_menu .right_side').css('display', 'flex')
    }
    else{
        $('.hint_menu .right_side').css('display', 'none')
    }
    
    $('.screen_title .text').html('<hr>'+ScreenTitle.toUpperCase())
    $('.hint_menu .left_side').html('')
    let HintCount = 0
    HintTable.forEach(item => {
        HintCount++
        if (Array.isArray(item[0])) {
            $('.hint_menu .left_side').append(`<div class="hint_element" id="hint${HintCount}"></div>`)
            for (let i = 0; i < item[0].length; i++) {
                $('.hint_menu .left_side #hint'+HintCount).append(`<div class="button_container">${item[0][i]}</div>`)
            }
            $('.hint_menu .left_side #hint'+HintCount).append(`<div class="text_container">${item[1]}</div>`)

        } else {
            $('.hint_menu .left_side').append(`<div class="hint_element"><div class="button_container">${item[0]}</div><div class="text_container">${item[1]}</div></div>`)
        }
    });
}

function PurchaseProperty(){
    if (PurchaseType == 'purchase'){
        $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "purchaseProperty"}))
    }
    else{
        $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "rentProperty"}))
    }
}

function GiveBid(){
    let amount = document.getElementById('bid_input').value.replace(/\s/g, "")
    TriggerCallback('giveBid', {amount}).done((cb) => {
        PurchaseData = cb
        RefreshBid(false)
        document.getElementById('bid_input').value = ''
    });
}

function SendViewProperty(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "viewProperty"}))
}

function CreatePurchaseMenu(){
    if (PurchasePropertyData.ptype == 'house'){
        if (PurchasePropertyData.type == 'APARTMENT'){
            $('.property_purchase_menu .title').html(t('aparment_purchase'))
        }
        else{
            $('.property_purchase_menu .title').html(t('house_purchase'))
        }
        
        document.querySelector(".property_purchase_menu .big_icon img").src = "assets/house.png"

        $("#garage_section_con").css("display", "flex")

        if (PurchasePropertyData.garage == 0){
            document.getElementById("property_garage").classList.add("gray")
            $(".property_purchase_menu #property_garage").html('<i class="fa-solid fa-xmark"></i>')
        }
        else{
            document.getElementById("property_garage").classList.remove("gray")
            $(".property_purchase_menu #property_garage").html('<i class="fa-solid fa-check"></i>')
        }
    }
    else{
        $("#garage_section_con").css("display", "none")
        $('.property_purchase_menu .title').html(t('garage_purchase'))
        document.querySelector(".property_purchase_menu .big_icon img").src = "assets/garage.png"
    }

    if (PurchasePropertyData.type == 'MLO'){
        $('.view_btn').css('display', 'none')
    }
    else{
        $('.view_btn').css('display', 'block')
    }

    if (PurchasePropertyData.rentable){
        document.getElementById('rent').disabled = false
    }
    else{
        document.getElementById('rent').disabled = true
    }

    $(".property_purchase_menu .property_name").html(PurchasePropertyData.label)
    $(".property_purchase_menu .property_street").html(PurchasePropertyData.address)
    $(".property_purchase_menu .property_image_con").css('background-image', "url("+PurchasePropertyData.url+")")
    $(".property_purchase_menu #property_debt").html(PropertyDebt.toLocaleString('hu-HU')+' '+Currency)
    $(".property_purchase_menu #cost_of_utilities").html(PurchaseData.utilities.toLocaleString('hu-HU')+' '+Currency+' / '+BillingCycle+' '+t('days'))

    if (PropertyDebt > 0){
        document.getElementById("property_debt").classList.add("red")
    }
    else{
        document.getElementById("property_debt").classList.remove("red")
    }

    RefreshBid(true)
    ChangePurchaseType('purchase')
}

function RefreshBid(first){
    if (first){
        $('#property_price_container').html('<div class="number_container float-end" id="property_price"></div>')
    }
    else{
        $('#property_price_container').html(`
            <div class="row p-0 m-0">
                <div class="col p-0">
                    <div class="number_container small float-end" id="property_deal_percentage"></div>
                </div>
                <div class="col p-0">
                    <div class="number_container float-end" id="property_price"></div>
                </div>
            </div>
        `)
        let Percentage = Math.round((100-(PurchaseData.price/PurchaseData.originalPrice)*100) * 10) / 10 
        if (Percentage > 0){
            $(".property_purchase_menu #property_deal_percentage").html('<i class="fa-solid fa-caret-down"></i> '+Percentage+'%')
        }
    }

    $(".property_purchase_menu #property_price").html(PurchaseData.price.toLocaleString('hu-HU')+' '+Currency)
    $(".patience_line").css("width", PurchaseData.patience+"%")

    if (PurchaseData.patience >= 75){
        $(".patience_line").css("background-color", "#79D7BE")
    }
    else if (PurchaseData.patience >= 25){
        $(".patience_line").css("background-color", "#D7CF79")
    }
    else {
        $(".patience_line").css("background-color", "#F95454")
    }
}

function ChangeSellType(id){
    let rect = document.getElementById(id).getBoundingClientRect();
    let parentRect = document.querySelector(".slider_container#sell").getBoundingClientRect();
    let elementCenterY = rect.left - parentRect.left;
    if (elementCenterY < 7){elementCenterY = 7}
    document.querySelector(".slider#sell").style.left = `${elementCenterY}px`;

    let SellPrice = (Myproperties[ChoosedPropertyForSell].purchasePrice*SellToGameMultiplier).toLocaleString('hu-HU')+' '+Currency
    let BuyPrice = Myproperties[ChoosedPropertyForSell].purchasePrice.toLocaleString('hu-HU')+' '+Currency
    let MaxPrice = (Myproperties[ChoosedPropertyForSell].purchasePrice*MaxDelayedPriceMultiplier).toLocaleString('hu-HU')+' '+Currency
    if (Myproperties[ChoosedPropertyForSell].garage != 0){
        for (let i = 0; i < Myproperties.length; i++) {
            if (Myproperties[i].id == 'G'+Myproperties[ChoosedPropertyForSell].garage){
                SellPrice = ((Myproperties[i].purchasePrice+Myproperties[ChoosedPropertyForSell].purchasePrice)*SellToGameMultiplier).toLocaleString('hu-HU')+' '+Currency
                BuyPrice = (Myproperties[i].purchasePrice+Myproperties[ChoosedPropertyForSell].purchasePrice).toLocaleString('hu-HU')+' '+Currency
                MaxPrice = ((Myproperties[i].purchasePrice+Myproperties[ChoosedPropertyForSell].purchasePrice)*MaxDelayedPriceMultiplier).toLocaleString('hu-HU')+' '+Currency
            }
        }
    }

    if (SellType != id){
        let container = document.getElementById('sell_container')
        container.style.animation = 'none'
        container.offsetHeight
        container.style.animation = "Basic_popup 0.3s ease both"
    }

    SellType = id
    if (SellType == 'instant'){
        $('.property_sell_menu .container').html(`
            <div class="row mt-3 mb-1" style="width: 420px; margin-left: 15px;">
                <div class="col">
                    <div class="big_option_label">${t('buying_price')}<br><span>${t('amount_you_bought_the_property')}</span></div>
                </div>
                <div class="col">
                    <div class="number_container red float-end text-decoration-line-through">${BuyPrice}</div>
                </div>
            </div>
            <div class="row mt-3 mb-1" style="width: 420px; margin-left: 15px;">
                <div class="col">
                    <div class="big_option_label">${t('price')}<br><span>${t('amount_you_get_instant')}</span></div>
                </div>
                <div class="col">
                    <div class="number_container float-end">${SellPrice}</div>
                </div>
            </div>
            <button class="sell_property_btn" onclick="SellProperty()">${t('sell')}</button>
        `)
    }
    else{
        $('.property_sell_menu .container').html(`
            <div class="description">${t('sell_property_to_player')}</div>
            <div class="row mt-3 mb-1" style="width: 420px; margin-left: 15px;">
                <div class="col">
                    <div class="big_option_label">${t('max_price')}<br><span>${t('max_you_can_sell')}</span></div>
                </div>
                <div class="col">
                    <div class="number_container float-end">${MaxPrice}</div>
                </div>
            </div>
            <div class="option_label">${t('price')}</div>
            <div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
                <input type="text" id="sell_price" class="form-control" placeholder="${t('amount')}" style="height: 45px;" onkeypress="return isNumber(event)" oninput="formatMoney(this)">
            </div>
            <div class="option_label">${t('phone_number')}</div>
            <div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
                <input type="text" id="sell_phone" class="form-control" placeholder="012345678" style="height: 45px;">
            </div>
            <button class="sell_property_btn" onclick="SellProperty()">${t('sell')}</button>
        `)
    }
}

function SellProperty(){
    let salePrice
    let phoneNumber
    if (document.getElementById('sell_price') != undefined){
        salePrice = document.getElementById('sell_price').value.replace(/\s/g, "")
        phoneNumber = document.getElementById('sell_phone').value
    }
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "saleProperty", propertyID:Myproperties[ChoosedPropertyForSell].id, sellType:SellType, salePrice, phoneNumber}))
    hide('property_sell_menu')
    $('.properties_menu .panel').css("filter", "brightness(100%)")
    CurrentProperty = (CurrentPropertySelectionPage*6)-6
    SelectProperty(CurrentProperty)
    if (document.getElementById('select_'+CurrentProperty)){
        document.getElementById('select_'+CurrentProperty).disabled = true
    }
}

function CancelSaleProperty(ChoosedProperty){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "cancelSale", propertyID:Myproperties[ChoosedProperty].id}))
}

function ChangePurchaseType(id){
    let rect = document.getElementById(id).getBoundingClientRect();
    let parentRect = document.querySelector(".slider_container#purchase").getBoundingClientRect();
    let elementCenterY = rect.left - parentRect.left;
    if (elementCenterY == 0){elementCenterY = 7}
    document.querySelector(".slider#purchase").style.left = `${elementCenterY}px`;
    PurchaseType = id

    if (id == 'purchase'){
        $('.property_rent_part').css('display', 'none')
        $('.property_purchase_part').css('display', 'flex')

        if (PurchasePropertyData.ptype == 'house'){
            $('.property_purchase_menu .title').html(t('house_purchase'))
        }
        else{
            $('.property_purchase_menu .title').html(t('garage_purchase'))
        }

        if (PurchasePropertyData.phone != '' && PurchasePropertyData.phone != null){
            $('.offer_part').css('display', 'none')
            $(".property_phone").css('display', 'flex')
            $("#property_phone").html(PurchasePropertyData.phone)
        }
        else{
            $('.offer_part').css('display', 'flex')
            $(".property_phone").css('display', 'none')
        }

        $("#purchase_property_btn").html(t('purchase'))
    }
    else{
        $('.property_purchase_part').css('display', 'none')
        $('.property_rent_part').css('display', 'flex')

        if (PurchasePropertyData.ptype == 'house'){
            $('.property_purchase_menu .title').html(t('house_rent'))
        }
        else{
            $('.property_purchase_menu .title').html(t('garage_rent'))
        }

        $("#purchase_property_btn").html(t('rent'))
        $(".property_purchase_menu #property_price").html(PurchaseData.price.toLocaleString('hu-HU')+' '+Currency)
        $(".property_purchase_menu #property_rent").html(PurchaseData.rent.toLocaleString('hu-HU')+' '+Currency)
    }
}

function CreatePropertyCreation(Type){
    $('.dropdown_container .dropdown-menu').html('')
    for (const key in PropertyTypes['SHELL']) {
        $('.dropdown_container .dropdown-menu').append(`
            <li><button class="dropdown-item" id="type_${key}" onclick="ChangeDropdownText('${PropertyTypes['SHELL'][key].label}', '${key}')">${PropertyTypes['SHELL'][key].label}</button></li>
        `)
    }

    if (PropertyCreationPanelType != Type){
        document.getElementById('rentable_input').checked = false
        document.getElementById('property_name').value = ''
        document.getElementById('property_price').value = ''
        document.getElementById('property_img').value = ''
        document.getElementById('street_number').value = ''
        document.getElementById('garage_id_input').value = ''
        document.getElementById('vehicle_exit').value = ''
        $('.option_dropdown_btn').html(t('choose'))
    }

    if (Type == 'house'){
        $('.property_creation_menu .title').html(t('house_creation'))
        $('.house_con').css("display", "block")
        $('.garage_con').css("display", "none")
        document.querySelector(".big_icon.gray img").src = "assets/house.png"

        $('.option_container .row').html(`
            <div class="col d-flex flex-column align-items-center justify-content-center">
                <div class="check_option">SHELL</div>
                <div class="form-check custom-checkbox">
                    <input class="form-check-input" type="radio" name="hTypeRadio" id="SHELL" checked onclick="ChangeProperyInType(id)">
                </div>
            </div>
            <div class="col d-flex flex-column align-items-center justify-content-center">
                <div class="check_option">IPL</div>
                <div class="form-check custom-checkbox">
                    <input class="form-check-input" type="radio" name="hTypeRadio" id="IPL" onclick="ChangeProperyInType(id)">
                </div>
            </div>
            <div class="col d-flex flex-column align-items-center justify-content-center">
                <div class="check_option">MLO</div>
                <div class="form-check custom-checkbox">
                    <input class="form-check-input" type="radio" name="hTypeRadio" id="MLO" onclick="ChangeProperyInType(id)">
                </div>
            </div>
        `)
    }
    else{
        $('.property_creation_menu .title').html(t('garage_creation'))
        $('.house_con').css("display", "none")
        $('.garage_con').css("display", "block")
        document.querySelector(".big_icon.gray img").src = "assets/garage.png"
        
        $('.option_container .row').html(`
            <div class="col d-flex flex-column align-items-center justify-content-center">
                <div class="check_option">SHELL</div>
                <div class="form-check custom-checkbox">
                    <input class="form-check-input" type="radio" name="hTypeRadio" id="SHELL" checked onclick="ChangeProperyInType(id)">
                </div>
            </div>
            <div class="col d-flex flex-column align-items-center justify-content-center">
                <div class="check_option">IPL</div>
                <div class="form-check custom-checkbox">
                    <input class="form-check-input" type="radio" name="hTypeRadio" id="IPL" onclick="ChangeProperyInType(id)">
                </div>
            </div>
        `)
    }
}

/////////////////////////////////////////////////////////////////////[CAMERA PAGE]/////////////////////////////////////////////////////////////////

function ChooseCameraPage(element, number){
    CurrentCameraSelectionPage = number+1
    NumberOfPages = (Myproperties[CurrentProperty].cams.length-(Myproperties[CurrentProperty].cams.length%6))/6+1
    for (let i = 0; i < NumberOfPages; i++) {
        document.getElementById("page_"+i).classList.remove("choosed")
    }
    element.classList.add("choosed")
    LoadCamerasForPage()
}

function CreateCameraPage(){
    NumberOfPages = (Myproperties[CurrentProperty].cams.length-(Myproperties[CurrentProperty].cams.length%6))/6+1

    $(".page_chooser#camera_chooser").html('')
    if (Myproperties[CurrentProperty].cams.length > 0){
        for (let i = 0; i < NumberOfPages; i++) {
            if (CurrentCameraSelectionPage-1 == i){
                $(".page_chooser#camera_chooser").append(`
                    <button class="page_element choosed" id='page_${i}' onclick='ChooseCameraPage(this, ${i})'></button>
                `)
            }
            else{
                $(".page_chooser#camera_chooser").append(`
                    <button class="page_element" id='page_${i}' onclick='ChooseCameraPage(this, ${i})'></button>
                `)
            }
        }
    
        LoadCamerasForPage()
    }
    else{
        $(".list_container#cam_list").html("<div class='text'>You don't have any cameras. Buy one from the electronics category to use it.</div>")
    }
    
}

function LoadCamerasForPage(){
    $(".list_container#cam_list").html('')
    for (let i = (CurrentCameraSelectionPage*6)-6; i < CurrentCameraSelectionPage*6; i++) {
        if (Myproperties[CurrentProperty].cams[i] != undefined){
            if (Myproperties[CurrentProperty].cams[i].camdata != undefined){
                $(".list_container#cam_list").append(`
                    <div class="list_element home_con">
                        <div class="preview" style='background-image: url("${Myproperties[CurrentProperty].cams[i].camdata.url}");'></div>
                        <button class="small_icon gray house_icon" onclick='OpenDataEntryPanel("${Myproperties[CurrentProperty].id}", "set_camera_url", "setCameraURL", "${Myproperties[CurrentProperty].cams[i].id}")'><img src="assets/camera.png"></button>
                        <div class="type">CAM #${i+1}</div>
                        <div class="title">${t('state')}</div>
                        ${Myproperties[CurrentProperty].cams[i].status?`
                            <div class="relation">${t('online')}</div>
                            <button class="select_btn" onclick='SendCameraSelect(${Myproperties[CurrentProperty].cams[i].id})'>${t('select')}</button>
                            `:`
                            <div class="relation red">${t('offline')}</div>
                             <button class="select_btn" disabled onclick='SendCameraSelect(${Myproperties[CurrentProperty].cams[i].id})'>${t('select')}</button>
                            `}
                        
                    </div>
                `)
            }
            else{
                $(".list_container#cam_list").append(`
                    <div class="list_element home_con">
                        <div class="preview" style='background-image: url("assets/camera_preview.png");'></div>
                        <button class="small_icon gray house_icon" onclick='OpenDataEntryPanel("${Myproperties[CurrentProperty].id}", "set_camera_url", "setCameraURL", "${Myproperties[CurrentProperty].cams[i].id}")'><img src="assets/camera.png"></button>
                        <div class="type">CAM #${i+1}</div>
                        <div class="title">${t('state')}</div>
                        ${Myproperties[CurrentProperty].cams[i].status?`
                            <div class="relation">${t('online')}</div>
                            <button class="select_btn green" onclick='SendCameraSetup(${Myproperties[CurrentProperty].cams[i].id})'>${t('setup')}</button>
                            `:`
                            <div class="relation red">${t('offline')}</div>
                            <button class="select_btn" disabled onclick='SendCameraSetup(${Myproperties[CurrentProperty].cams[i].id})'>${t('setup')}</button>
                            `}
                    </div>
                `)
            }
        }
        else{
            $(".list_container#cam_list").append(`
                 <div class="list_element empty home_con">
                    <div class="preview">X</div>
                    <div class="title"></div>
                    <div class="relation"></div>
                    <div class="select_btn"></div>
                </div>
            `)
        }
    }
}

function SendCameraSetup(objectid){
    Close()
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "cameraSetup", propertyID:Myproperties[CurrentProperty].id, objectid}))
}

function SendCameraSelect(objectid){
    Close()
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "cameraSelect", propertyID:Myproperties[CurrentProperty].id, objectid}))
}

/////////////////////////////////////////////////////////////////////[PROPERTY PAGE]/////////////////////////////////////////////////////////////////

function ChoosePropertyPage(element, number){
    CurrentPropertySelectionPage = number+1
    for (let i = 0; i < NumberOfPages; i++) {
        document.getElementById("page_"+i).classList.remove("choosed")
    }
    element.classList.add("choosed")
    LoadPropertiesForPage()
}

function CreatePropertyPage(){
    NumberOfPages = (Myproperties.length-(Myproperties.length%7))/7+1

    $(".page_chooser#property_chooser").html('')
    for (let i = 0; i < NumberOfPages; i++) {
        if (CurrentPropertySelectionPage-1 == i){
            $(".page_chooser#property_chooser").append(`
                <button class="page_element choosed" id='page_${i}' onclick='ChoosePropertyPage(this, ${i})'></button>
            `)
        }
        else{
            $(".page_chooser#property_chooser").append(`
                <button class="page_element" id='page_${i}' onclick='ChoosePropertyPage(this, ${i})'></button>
            `)
        }
    }

    LoadPropertiesForPage()
    CreateMessages()

    document.addEventListener("click", handleClick);
}

function LoadPropertiesForPage(){
    $(".list_container#property_list").html('')
    for (let i = (CurrentPropertySelectionPage*6)-6; i < CurrentPropertySelectionPage*6; i++) {
        if (Myproperties[i] != undefined){
            let AttachedProperty = ''
            if (Myproperties[i].ptype == 'garage' && Myproperties[i].house != 0){
                AttachedProperty = '<span>H'+Myproperties[i].house +'</span> <i class="fa-solid fa-link"></i> '
            }
            else  if (Myproperties[i].ptype == 'house' && Myproperties[i].garage != 0){
                AttachedProperty = '<span>G'+Myproperties[i].garage +'</span> <i class="fa-solid fa-link"></i> '
            }

            let PropertyButton
            if (!Myproperties[i].isRented){
                if (Myproperties[i].forSale && (AttachedProperty == '' ||(AttachedProperty != '' && Myproperties[i].ptype != 'garage'))){
                    PropertyButton = `<button class="sell_btn gray" onclick="CancelSaleProperty('${i}')"><i class="fa-solid fa-xmark"></i></button>`
                }
                else if(AttachedProperty != '' && Myproperties[i].ptype == 'garage'){
                    PropertyButton = ''
                }
                else{
                    PropertyButton = `<button class="sell_btn" onclick="OpenSellMenu('${i}')"><i class="fa-solid fa-tags"></i></button>`
                }
            }
            else{
                if (AttachedProperty == '' ||(AttachedProperty != '' && Myproperties[i].ptype != 'garage')){
                    PropertyButton = `
                    <button class="sell_btn gray" onclick="ShowQuestionPanel('.properties_menu .panel', 'stopRent', '${Myproperties[i].id}', '${t('stop_renting_property_question')}')"><i class="fa-solid fa-pause"></i></button>
                    <button class="sell_btn green" onclick="OpenPurchaseMenuFromProperties('${i}')" style='margin-left:45px;'><i class="fa-solid fa-money-bill-1-wave"></i></button>`
                }
                else if(AttachedProperty != '' && Myproperties[i].ptype == 'garage'){
                    PropertyButton = ''
                }
            }
            

            $(".list_container#property_list").append(`
                <div class="list_element home_con">
                    <div class="preview" style='background-image: url("${Myproperties[i].url}");'></div>
                    ${PropertyButton}
                    <button class="small_icon gray house_icon" onclick='OpenDataEntryPanel("${Myproperties[i].id}", "set_property_url", "setPropertyURL", "")'><img src="assets/${Myproperties[i].ptype}.png"></button>
                    <div class="label">${Myproperties[i].label}</div>
                    <div class="id">${AttachedProperty}${Myproperties[i].id}</div>
                    <div class="title">${t('tenure')}</div>
                    <div class="relation ${Myproperties[i].isRented?"blue":""}">${Myproperties[i].isRented?t('renter'):t('owner')}</div>
                    <button class="select_btn" id="select_${i}" onclick='SelectProperty(${i})' ${i==CurrentProperty?'disabled':''}>${t('select')}</button>
                </div>
            `)
        }
        else{
            $(".list_container#property_list").append(`
                <div class="list_element empty home_con">
                    <div class="preview">X</div>
                    <div class="title"></div>
                    <div class="relation"></div>
                    <div class="select_btn"></div>
                </div>
            `)
        }
    }

    if (CurrentProperty == null || ClosestProperty != null){
        // Selects the closest of your properties from the menu
        if (ClosestProperty != null){
            for (let i = 0; i < Myproperties.length; i++) {
                if (Myproperties[i].id == ClosestProperty){
                    if (document.getElementById('select_'+CurrentProperty)){
                        document.getElementById('select_'+CurrentProperty).disabled = false
                    }
                    if (document.getElementById('select_'+i)){
                        document.getElementById('select_'+i).disabled = true
                    }
                    if (CurrentProperty == null || ControlSectionState != Myproperties[i].ptype){
                        CurrentProperty = i
                        LoadControlSection()
                    }
                    CurrentProperty = i
                    LoadBasicPropertyDatas()
                    CreateMessages()
                    ClosestProperty = null

                    if (Myproperties[CurrentProperty].type != 'MLO'){
                        $('.door_lock_btn').css('display', 'none')
                    }
                    else{
                        $('.door_lock_btn').css('display', 'block')
                    }
                    $('.key_count').html(Myproperties[CurrentProperty].keysquantity)
                    return
                }
            }
            CurrentProperty = (CurrentPropertySelectionPage*6)-6
            SelectProperty(CurrentProperty)
            document.getElementById('select_'+CurrentProperty).disabled = true
            ClosestProperty = null
        }
        else{
            CurrentProperty = (CurrentPropertySelectionPage*6)-6
            SelectProperty(CurrentProperty)
            document.getElementById('select_'+CurrentProperty).disabled = true
        }
    }
    else if (CurrentProperty != null){
        if (Myproperties[CurrentProperty].type != 'MLO'){
            $('.door_lock_btn').css('display', 'none')
        }
        else{
            $('.door_lock_btn').css('display', 'block')
        }
        $('.key_count').html(Myproperties[CurrentProperty].keysquantity)
    }

}

function SelectProperty(number){
    AllElements = document.getElementsByClassName('select_btn')
    for (const key in AllElements) {
        AllElements[key].disabled = false
    }

    if (document.getElementById('select_'+number)){
        document.getElementById('select_'+number).disabled = true
    }
    
    CurrentProperty = number
    LoadBasicPropertyDatas()
    LoadControlSection()
    CreateMessages()

    if (Myproperties[CurrentProperty].type != 'MLO'){
        $('.door_lock_btn').css('display', 'none')
    }
    else{
        $('.door_lock_btn').css('display', 'block')
    }
    $('.key_count').html(Myproperties[CurrentProperty].keysquantity)
}

function LoadBasicPropertyDatas(){
    document.getElementById('property_name_in').value = Myproperties[CurrentProperty].label
    $(".properties_menu .street").html(Myproperties[CurrentProperty].address)
    if (Myproperties[CurrentProperty].doorOpen){
        $(".properties_menu .state#property_menu").html(t('open'))
        $(".properties_menu .state#property_menu").css("color", '#79D7BE')
        document.getElementById("header_door").classList.remove("red")
        document.getElementById("header_door").classList.add("green")
    }
    else{
        $(".properties_menu .state#property_menu").html(t('closed'))
        $(".properties_menu .state#property_menu").css("color", '#F95454')
        document.getElementById("header_door").classList.remove("green")
        document.getElementById("header_door").classList.add("red")
    }
    
}

function CreateMessages(){
    $('.notifications').html("")
    if (Myproperties[CurrentProperty].messages.length > 0){
        for (let i = 0; i < Myproperties[CurrentProperty].messages.length; i++) {
            let notify_icon
            if (Myproperties[CurrentProperty].messages[i].type == 'check'){
                notify_icon = '<i class="fa-solid fa-check"></i>'
            }
            else if(Myproperties[CurrentProperty].messages[i].type == 'alert'){
                notify_icon = '<i class="fa-solid fa-exclamation"></i>'
            }
            else if(Myproperties[CurrentProperty].messages[i].type == 'info'){
                notify_icon = '<i class="fa-solid fa-info"></i>'
            }
            else{
                notify_icon = '<i class="fa-solid fa-dollar-sign"></i>'
            }
    
            let options = {year: "numeric", month: "2-digit", day: "2-digit"};
            let date = new Date(Myproperties[CurrentProperty].messages[i].time * 1000);
    
            $('.notifications').append(`
                <div class="notify_element ${Myproperties[CurrentProperty].messages[i].type}">
                    <div class="type">${notify_icon}</div>
                    <div class="title">${Myproperties[CurrentProperty].messages[i].title}</div>
                    <div class="date">${date.toLocaleString("hu-HU", options)}</div>
                    <div class="message">${Myproperties[CurrentProperty].messages[i].message}</div>
                </div>
            `)
        }

        if (LastProperty == undefined || LastProperty != CurrentProperty){
            let Notifies = document.getElementsByClassName("notify_element")
            for (let index = 0; index < Notifies.length; index++) {
                Notifies[index].style.animation = 'none'
                Notifies[index].offsetHeight
                Notifies[index].style.animation = "notify_element 0.4s ease both " + (index / 60) + "s"
            }
        }
    }
    else{
        $('.notifications').html("<div class='text'>You don't have any messages!</div>")
    }

    LastProperty = CurrentProperty

    const element = document.getElementById("notifications");
    element.scrollTop = element.scrollHeight;
}

function LoadControlSection(){
    ControlSectionState = Myproperties[CurrentProperty].ptype
    if (Myproperties[CurrentProperty].ptype == 'house'){
        $('.hidden_logo').css('opacity', '0')
        $('.control_section#property_control').css('height', '275px')
        $('.control_section#property_control').html(`
            <div class="selector" id="property"></div>
            <div class="control_btn" id="properties" onclick="SwitchPage(id)" style="background-image: url('assets/properties.png');"></div>
            <div class="control_btn" id="controls" onclick="SwitchPage(id)" style="background-image: url('assets/layout.png');"></div>
            <div class="control_btn" id="cameras" onclick="SwitchPage(id)" style="background-image: url('assets/camera.png');"></div>
            <div class="control_btn" id="furnitures" onclick="SwitchPage(id)" style="background-image: url('assets/3d.png');"></div>
        `)
    }
    else{
        $('.hidden_logo').css('opacity', '1')
        $('.control_section#property_control').css('height', '140px')
        $('.control_section#property_control').html(`
            <div class="selector" id="property"></div>
            <div class="control_btn" id="properties" onclick="SwitchPage(id)" style="background-image: url('assets/properties.png');"></div>
            <div class="control_btn" id="garage" onclick="SwitchPage(id)" style="background-image: url('assets/garage.png');"></div>
        `)
    }
}

function ChangePaint(id){
    let PaintsLength = 0
    for (const key in Myproperties[CurrentProperty].paints) {
        PaintsLength =  PaintsLength + 1
    }
    if (id == 'left_arrow'){
        if (0 > ChoosedPaint - 1){
            ChoosedPaint = PaintsLength - 1
        }
        else{
            ChoosedPaint = ChoosedPaint - 1
        }
    }
    else{
        if (ChoosedPaint + 1 >= PaintsLength){
            ChoosedPaint = 0
        }
        else{
            ChoosedPaint = ChoosedPaint + 1
        }
    }
    $('.paint_viewer').css('background-image', `url('${Myproperties[CurrentProperty].paints[ChoosedPaint].link}')`)
    if (Myproperties[CurrentProperty].theme == ChoosedPaint){
        $('#change_paint').css('display', 'none')
    }
    else{
        $('#change_paint').css('display', 'block')
        $('#change_paint').html(Myproperties[CurrentProperty].paints[ChoosedPaint].price.toLocaleString('hu-HU')+' '+Currency)
    }
}

function SwitchPage(id, noanim){
    CurrentPage = id
    let rect = document.getElementById(id).getBoundingClientRect();
    let parentRect = document.querySelector("#property_control").getBoundingClientRect();
    let elementCenterY = rect.top - parentRect.top;
    document.querySelector(".selector#property").style.top = `${elementCenterY}px`;

    if (id == 'properties'){
        if (BrutalKeys){
            $('.right_container').html(`
                <div class="key_section float-end home_con">
                    <div class="small_icon gold"><img src="assets/key.png"></div>
                    <div class="title">${t('remained')}</div>
                    <div class="key_count"></div>
                    <button class="door_lock_btn" onclick='SendOpenDoorLock()'><i class="fa-solid fa-lock"></i></button>
                    <div class="d-flex flex-wrap" style='margin-top:85px; margin-inline:9px;'>
                        <button class="key_btn" onclick='SendBuyKey()'><i class="fa-solid fa-cart-shopping"></i> ${t('key')}</button>
                        <div class="key_price" style='margin-left: auto;'>${KeyPrices.newkey .toLocaleString('hu-HU')+' '+Currency}</div>
                    </div>
                    <div class="d-flex flex-wrap" style='margin-top:12px; margin-inline:9px;'>
                        <button class="key_btn float-end" onclick='SendChangeLock()'><i class="fa-solid fa-unlock"></i> ${t('change')}</button>
                        <div class="key_price" style='margin-left: auto;'>${KeyPrices.lockreplacement.toLocaleString('hu-HU')+' '+Currency}</div>
                    </div>
                </div>
            `)
        }
        else{
            $('.right_container').html(`
               <div class="key_section float-end home_con">
                    <div class="key_hider"></div>
                    <div class="lock"><i class="fa-solid fa-lock"></i></div>
                    <div class="key_text">Buy the keys at<br><a onclick="window.invokeNative('openUrl', 'https://store.brutalscripts.com')" href="https://store.brutalscripts.com" rel="noopener noreferrer" target="_blank">store.brutalscripts.com</a></div>
                    <div class="small_icon gold"><img src="assets/key.png"></div>
                    <div class="title">${t('remained')}</div>
                    <div class="key_count"></div>
                    <button class="door_lock_btn" onclick='SendOpenDoorLock()'><i class="fa-solid fa-lock"></i></button>
                    <div class="d-flex flex-wrap" style='margin-top:85px; margin-inline:9px;'>
                        <button class="key_btn" disabled onclick='SendBuyKey()'><i class="fa-solid fa-cart-shopping"></i> ${t('key')}</button>
                        <div class="key_price" style='margin-left: auto;'>${KeyPrices.newkey .toLocaleString('hu-HU')+' '+Currency}</div>
                    </div>
                    <div class="d-flex flex-wrap" style='margin-top:12px; margin-inline:9px;'>
                        <button class="key_btn float-end" disabled onclick='SendChangeLock()'><i class="fa-solid fa-unlock"></i> ${t('change')}</button>
                        <div class="key_price" style='margin-left: auto;'>${KeyPrices.lockreplacement.toLocaleString('hu-HU')+' '+Currency}</div>
                    </div>
                </div>
            `)
        }
        

        $('.bottom_container').html(`
            <div class="page_chooser float-end me-3" id='property_chooser'>
                <div class="page_element choosed"></div>
                <div class="page_element"></div>
            </div>
            <div class="list_container" id="property_list">
                
            
            </div>
        `)
        CreatePropertyPage()
        LoadBasicPropertyDatas()
    }
    else if (id == 'controls'){
        if (Myproperties[CurrentProperty].isRented){
            $('.right_container').html(`
                <div class="furniture_section float-end home_con">
                     <div class="big_icon green"><img src="assets/money.png"></div>
                     <div class="title">${t('rent')}</div>
                     <div class="label">${t('balance')}</div>
                     <div class="current_balance ${Myproperties[CurrentProperty].bills.rent > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.rent.toLocaleString('hu-HU')+' '+Currency}</div>
                     <button class="bottom_long_btn" onclick='SendPayBill("rent")' ${Myproperties[CurrentProperty].bills.rent > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.rent > 0?t('pay'):t('all_paid')}</button>
                 </div>
            `)
        }
        else{
            if (Myproperties[CurrentProperty].paints != null){
                $('.right_container').html(`
                    <div class="furniture_section float-end home_con">
                        <div class="paint_viewer" style='background-image: url("${Myproperties[CurrentProperty].paints[Myproperties[CurrentProperty].theme].link}")'></div>
                        <div class="arrow_conatiner">
                            <button class="arrow_btn" id="left_arrow" onclick='ChangePaint(id)'><i class="fa-solid fa-caret-left"></i></button>
                            <button class="arrow_btn" id="right_arrow" onclick='ChangePaint(id)'><i class="fa-solid fa-caret-right"></i></button>
                        </div>
                        <button class="bottom_long_btn m-0" id='change_paint' style='width:auto; left:50%; transform: translate(-50%, 0%); padding-inline: 10px; display:none;' onclick='SendChangePaint()'>${Myproperties[CurrentProperty].paints[Myproperties[CurrentProperty].theme].price.toLocaleString('hu-HU')+' '+Currency}</button>
                    </div>
                `)
            }
            else{
                $('.right_container').html(`
                    <div class="furniture_section float-end home_con">
                        <div class="no_paint_text">${t('no_available_paints')}</div>
                    </div>
                `)
            }
        }

        $('.bottom_container').html(`
            <div class="energy_container">
                <div class="energy_section home_con">
                    <div class="big_icon yellow"><img src="assets/flash.png"></div>
                    <div class="title">${t('electricity')}</div>
                    <div class="label">${t('balance')}</div>
                    <div class="current_balance ${Myproperties[CurrentProperty].bills.electricity > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.electricity.toLocaleString('hu-HU')+' '+Currency}</div>
                    <button class="bottom_long_btn" onclick='SendPayBill("electricity")' ${Myproperties[CurrentProperty].bills.electricity > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.electricity > 0?t('pay'):t('all_paid')}</button>
                </div>
                <div class="energy_section home_con">
                    <div class="big_icon gas"><img src="assets/gas.png"></div>
                    <div class="title">${t('gas')}</div>
                    <div class="label">${t('balance')}</div>
                    <div class="current_balance ${Myproperties[CurrentProperty].bills.gas > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.gas.toLocaleString('hu-HU')+' '+Currency}</div>
                    <button class="bottom_long_btn" onclick='SendPayBill("gas")' ${Myproperties[CurrentProperty].bills.gas > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.gas > 0?t('pay'):t('all_paid')}</button>
                </div>
                <div class="energy_section home_con">
                    <div class="big_icon blue"><img src="assets/water.png"></div>
                    <div class="title">${t('water')}</div>
                    <div class="label">${t('balance')}</div>
                    <div class="current_balance ${Myproperties[CurrentProperty].bills.water > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.water.toLocaleString('hu-HU')+' '+Currency}</div>
                    <button class="bottom_long_btn" onclick='SendPayBill("water")' ${Myproperties[CurrentProperty].bills.water > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.water > 0?t('pay'):t('all_paid')}</button>
                </div>
            </div>

            <div class="upgrade_container">
                <div class="upgrade_section home_con" id="wifi_section">
                    <div class="big_icon wifi"><img src="assets/wifi.png"></div>
                    <div class="title">${t('wifi')}</div>
                    <div class="state">${Myproperties[CurrentProperty].securityData.wifi?t('unlocked'):t('locked')}</div>
                    <div class="description">${t('wifi_description')}</div>
                    <div class="label">${Myproperties[CurrentProperty].securityData.wifi?t('balance'):t('price')}</div>
                    <div class="current_balance ${Myproperties[CurrentProperty].bills.wifi > 0?'red':'green'}">${(Myproperties[CurrentProperty].securityData.wifi?Myproperties[CurrentProperty].bills.wifi:WifiUnlockPrice).toLocaleString('hu-HU')+' '+Currency}</div>
                    <button class="bottom_long_btn" onclick='SendPayBill("wifi")' ${Myproperties[CurrentProperty].bills.wifi == 0 && Myproperties[CurrentProperty].securityData.wifi?'disabled':''}>${Myproperties[CurrentProperty].securityData.wifi?t('pay'):t('unlock')}</button>
                </div>
                <div class="upgrade_section home_con" id="security_section">
                    <div class="big_icon red"><img src="assets/security.png"></div>
                    <div class="title">${t('security')}</div>
                    <div class="state">${t('level')} ${Myproperties[CurrentProperty].securityData.level}</div>
                    <div class="description">${t('security_description')}</div>
                    <div class="label">${t('next_level')}</div>
                    <div class="current_balance green">${Myproperties[CurrentProperty].securityData.nextPrice != undefined?Myproperties[CurrentProperty].securityData.nextPrice+' '+Currency:t('max')}</div>
                    <button class="bottom_long_btn" onclick='SendUpgradeSecurity()' ${Myproperties[CurrentProperty].securityData.nextPrice != undefined?'':'disabled'}>${Myproperties[CurrentProperty].securityData.maxLevel == true?t('max_level'):t('upgrade')}</button>
                </div>
            </div> 
        `)
        CreateMessages()
        LoadBasicPropertyDatas()
    }
    else if (id == 'garage'){
        if (Myproperties[CurrentProperty].isRented){
            $('.right_container').html(`
                <div class="furniture_section float-end home_con">
                     <div class="big_icon green"><img src="assets/money.png"></div>
                     <div class="title">${t('rent')}</div>
                     <div class="label">${t('balance')}</div>
                     <div class="current_balance ${Myproperties[CurrentProperty].bills.rent > 0?'red':'green'}">${Myproperties[CurrentProperty].bills.rent.toLocaleString('hu-HU')+' '+Currency}</div>
                     <button class="bottom_long_btn" onclick='SendPayBill("rent")' ${Myproperties[CurrentProperty].bills.rent > 0?'':'disabled'}>${Myproperties[CurrentProperty].bills.rent > 0?t('pay'):t('all_paid')}</button>
                 </div>
            `)
        }
        else{
            if (Myproperties[CurrentProperty].paints != null){
                $('.right_container').html(`
                    <div class="furniture_section float-end home_con">
                        <div class="paint_viewer" style='background-image: url("${Myproperties[CurrentProperty].paints[Myproperties[CurrentProperty].theme].link}")'></div>
                        <div class="arrow_conatiner">
                            <button class="arrow_btn" id="left_arrow" onclick='ChangePaint(id)'><i class="fa-solid fa-caret-left"></i></button>
                            <button class="arrow_btn" id="right_arrow" onclick='ChangePaint(id)'><i class="fa-solid fa-caret-right"></i></button>
                        </div>
                        <button class="bottom_long_btn m-0" id='change_paint' style='width:auto; left:50%; transform: translate(-50%, 0%); padding-inline: 10px; display:none;' onclick='SendChangePaint()'>${Myproperties[CurrentProperty].paints[Myproperties[CurrentProperty].theme].price.toLocaleString('hu-HU')+' '+Currency}</button>
                    </div>
                `)
            }
            else{
                $('.right_container').html(`
                    <div class="furniture_section float-end home_con">
                        <div class="no_paint_text">${t('no_available_paints')}</div>
                    </div>
                `)
            }
        }

        $('.bottom_container').html(`
            <div class="garage_section home_con">
                <div class="title">${t('occupied_places')}</div>

                <div class="space_container">
                   
                </div>

                <div class="vehicles_container">
                   
                </div>
                
            </div>

            
            <div class="upgrade_container">
                <div class="upgrade_section home_con ${GarageUpgrade.Clean.use?'':'disabled'}">
                    <div class="big_icon bubbles"><img src="assets/bubbles.png"></div>
                    <div class="title">${t('cleaning')}</div>
                    <div class="state">${Myproperties[CurrentProperty].lastPaid.cleaning?t('unlocked'):t('locked')}</div>
                    <div class="description_2">${t('cleaning_description')}</div>
                    <button class="bottom_long_btn" ${(Myproperties[CurrentProperty].lastPaid.cleaning || !GarageUpgrade.Clean.use) ?'disabled':''} onclick='SendGarageUpgrade("cleaning")'>${GarageUpgrade.Clean .price.toLocaleString('hu-HU')+' '+Currency}</button>
                </div>
                <div class="upgrade_section home_con ${GarageUpgrade.Repair.use?'':'disabled'}">
                    <div class="big_icon gears"><img src="assets/gears.png"></div>
                    <div class="title">${t('repairing')}</div>
                    <div class="state">${Myproperties[CurrentProperty].lastPaid.repairing?t('unlocked'):t('locked')}</div>
                    <div class="description_2">${t('repairing_description')}</div>
                    <button class="bottom_long_btn" ${(Myproperties[CurrentProperty].lastPaid.repairing || !GarageUpgrade.Repair.use)?'disabled':''} onclick='SendGarageUpgrade("repairing")'>${GarageUpgrade.Repair.price.toLocaleString('hu-HU')+' '+Currency}</button>
                </div>
            </div>
        `)
        CreateMessages()
        LoadBasicPropertyDatas()
        
        for (let i = 0; i < Myproperties[CurrentProperty].vehicleSpaces; i++) {
            $(".space_container").append(`
                 <div class="space_element ${Myproperties[CurrentProperty].vehicles2[i] != undefined?'green':''}"></div>
            `)
        }

        for (let i = 0; i < Myproperties[CurrentProperty].vehicleSpaces; i++) {
            if (Myproperties[CurrentProperty].vehicles2[i] != undefined){
                let dashoffset = 440-140*((Myproperties[CurrentProperty].vehicles2[i].ostime-Myproperties[CurrentProperty].vehicles2[i].stored)/Myproperties[CurrentProperty].vehicles2[i].repairtime)
                if (Myproperties[CurrentProperty].vehicles2[i].ostime - Myproperties[CurrentProperty].vehicles2[i].stored > Myproperties[CurrentProperty].vehicles2[i].repairtime){
                    dashoffset = 440-140
                }
                $(".vehicles_container").append(`
                    <div class="vehicle_element">
                        <div class="percent">
                            <svg>
                                <circle cx="22" cy="22" r="22"></circle>
                                ${(Myproperties[CurrentProperty].lastPaid.repairing && GarageUpgrade.Repair.use)?`<circle cx="22" cy="22" r="22" style='stroke-dashoffset: ${dashoffset}'></circle>`:''}
                            </svg>
                        </div>
                        <img class="vehicle_icon" src='assets/${Myproperties[CurrentProperty].vehicles2[i].type}.png'>
                        <div class="vehicle_name">${Myproperties[CurrentProperty].vehicles2[i].name}</div>
                        <div class="vehicle_plate">${Myproperties[CurrentProperty].vehicles2[i].plate}</div>        
                    </div>
                `)
            }
            else{
                $(".vehicles_container").append(`
                   <div class="vehicle_element empty">
                        <div class="percent"></div>
                        <div class="vehicle_name"></div>
                        <div class="vehicle_plate"></div>        
                    </div>
                `)
            }
        }
         
    }
    else if (id == 'cameras'){
        $('.right_container').html(`
            <div class="furniture_section float-end home_con">
                 <div class="big_icon main"><img src="assets/server.png"></div>
                 <div class="title">${t('cctv_station')}</div>
                 <div class="label">${t('state')}</div>
                 ${Myproperties[CurrentProperty].securityData.status?`<div class="current_balance green">${t('online')}</div>`:`<div class="current_balance">${t('offline')}</div>`}
                 <button class="bottom_long_btn" onclick='SendCCTVRepair()' ${!Myproperties[CurrentProperty].securityData.status && Myproperties[CurrentProperty].cctvStationObject?'':'disabled'}>${t('repair')}</button>
             </div>
        `)

        $('.bottom_container').html(`
            <div class="page_chooser float-end me-3" id='camera_chooser'>
                    <div class="page_element choosed"></div>
                    <div class="page_element"></div>
                </div>
                <div class="list_container" id='cam_list'>
                </div>
        `)
        CreateCameraPage()
        CreateMessages()
        LoadBasicPropertyDatas()
    }
    else if (id == 'furnitures'){
        noanim = true
        TriggerCallback('furnituresMenu', {}).done((cb) => {
            if (cb != false){
                InsideOrOutside = cb
                hide('properties_menu')
                show('furniture_menu')
                CreateFurnitureMenu()
                BackgroundBlur("plugin_3", 'panel_furniture')
            }
            else{
                SwitchPage('properties')
            }
        });
    }

    let HomeCons = document.getElementsByClassName("home_con")
    for (let index = 0; index < HomeCons.length; index++) {
        HomeCons[index].style.animation = 'none'
        if (!noanim){
            HomeCons[index].offsetHeight
            HomeCons[index].style.animation = "Home_cons 0.4s ease both " + (index / 100) + "s"
        }
    }
}

function SendCCTVRepair(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "repairCCTVStation", propertyID:Myproperties[CurrentProperty].id}))
}

function SendOpenDoorLock(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "manageDoorLocks", propertyID:Myproperties[CurrentProperty].id}))
}

function SendChangeLock(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "lockReplacement", propertyID:Myproperties[CurrentProperty].id}))
}

function SendBuyKey(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "addNewKey", propertyID:Myproperties[CurrentProperty].id}))
}

function SendGarageUpgrade(type){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "garageUpgrade", propertyID:Myproperties[CurrentProperty].id, type}))
}

function SendPayBill(type){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "payBill", propertyID:Myproperties[CurrentProperty].id, type}))
}

function SendUpgradeSecurity(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "upgradeSecurity", propertyID:Myproperties[CurrentProperty].id}))
}

function SendPropertyNameChange(newLabel){
    if (newLabel != Myproperties[CurrentProperty].label){
        $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "changePropertyLabel", propertyID:Myproperties[CurrentProperty].id, newLabel}))
    }
}

function handleClick(event) {
    let input = document.getElementById("property_name_in")
    let sell_menu = document.getElementById("property_sell_menu")
    let purchase_menu = document.getElementById("property_purchase_menu_from_rent")

    if (event.target !== input) {
        SendPropertyNameChange(input.value);
    }

    if (!sell_menu.contains(event.target) && sell_menu.style.display == 'block') {
        hide('property_sell_menu')
        $('.properties_menu .panel').css("filter", "brightness(100%)")
    }

    if (!purchase_menu.contains(event.target) && purchase_menu.style.display == 'block'){
        hide('property_purchase_menu_from_rent')
        $('.properties_menu .panel').css("filter", "brightness(100%)")
    }
}

function CheckIfCanCreateProperty(){
    if ((PropertyCreationKey != null || PropertyCreationType == 'MLO') && document.getElementById('property_name').value.length > 0 
        && document.getElementById('property_price').value.length > 0 
        && document.getElementById('entry_door').value.length > 0 
        && document.getElementById('street_number').value.length > 0 
        && ((document.getElementById('vehicle_exit').value.length > 0 && PropertyCreationPanelType == 'garage') || PropertyCreationPanelType != 'garage')
        && ((PropertyCreationType == 'SHELL' && document.getElementById('exit_door').value.length > 0) || PropertyCreationType != 'SHELL')){
        document.getElementById('create_property_btn').disabled = false
    }
    else{
        document.getElementById('create_property_btn').disabled = true
    }
}

function CreateProperty(){
    let Rentable = document.getElementById('rentable_input').checked
    let Name = document.getElementById('property_name').value
    let Price = document.getElementById('property_price').value
    let URL = document.getElementById('property_img').value
    let Number = document.getElementById('street_number').value
    let Garage = document.getElementById('garage_id_input').value
    let VehicleExit = document.getElementById('vehicle_exit').value
    let table = [PropertyCreationType, PropertyCreationKey, Rentable, Name, Price.replace(/\s/g, ""), URL, PropertyInfos[0], null, PropertyInfos[1], Number, Garage, VehicleExit]
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "createProperty", table}))
}

function CheckGarageID(value){
    let Found = false
    for (let i = 0; i < GarageIDs.length; i++) {
        if (value.toUpperCase() == GarageIDs[i]){
            Found = true
        }
    }
    if (Found){
        $('#garage_id_input').css('border', 'solid 2px rgba(121, 215, 190, 0.719)')
        $('#garage_id_input').css('background-color', 'rgba(121, 215, 190, 0.288)')
    }
    else{
        $('#garage_id_input').css('border', 'solid 2px rgba(211, 211, 211, 0.705)')
        $('#garage_id_input').css('background-color', 'rgba(255, 255, 255, 0.212)')
    }
}

function GetPlayerCurrentCoord(){
    TriggerCallback('GetPlayerCoord', {}).done((cb) => {
        PropertyInfos = cb
        document.getElementById('entry_door').value = PropertyInfos[0]
        document.getElementById('street_input').value = PropertyInfos[1]
        document.getElementById('street_number').value = PropertyInfos[2]
        CheckIfCanCreateProperty()
    });
}

function GetExitCoord(){
    Close()
    TriggerCallback('shellPositions', {model:PropertyCreationKey}).done((cb) => {
        show('property_creation_menu')
        if (cb != 'nil'){
            document.getElementById('exit_door').value = cb
        }
        else{
            document.getElementById('exit_door').value = ''
        }
        CheckIfCanCreateProperty()
    });
}

function GetVehicleExitCoord(){
    Close()
    TriggerCallback('vehiclePosition', {}).done((cb) => {
        show('property_creation_menu')
        if (cb != 'nil'){
            document.getElementById('vehicle_exit').value = cb
        }
        CheckIfCanCreateProperty()
    });
}

function ChangeDropdownText(Label, key){
    PropertyCreationKey = key
    $('.option_dropdown_btn').html(Label)
    CheckIfCanCreateProperty()
    if (document.getElementById('set_exit_door')){
        document.getElementById('set_exit_door').disabled = false
    }
}

function ChangeProperyInType(id){
    PropertyCreationType = id
    if (id == 'SHELL' || id == 'IPL'){
        $('#panel_creation .dropdown_container').html(`
            <div class="dropdown" style="width: 100%;">
                <button class="option_dropdown_btn" id="pic_btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">${t('choose')}</button>
                <ul class="dropdown-menu">
                </ul>
            </div>
        `)
        if (id == 'SHELL'){
            $('.dropdown_container .dropdown-menu').html('')
            for (const key in PropertyTypes['SHELL']) {
                $('.dropdown_container .dropdown-menu').append(`
                    <li><button class="dropdown-item" id="type_${key}" onclick="ChangeDropdownText('${PropertyTypes['SHELL'][key].label}', '${key}')">${PropertyTypes['SHELL'][key].label}</button></li>
                `)
            }
            $('#panel_creation .doors_container').html(`
                <div class="row" style="width: 420px; margin-left: 15px;">
                    <div class="col p-0">
                        <div class="input-group input-group-lg" style="width: 200px;">
                            <input type="text" id="entry_door" class="form-control" placeholder="${t('entry_door')}" style="height: 45px;" disabled>
                            <button class="set_coord_btn" type="button" onclick="GetPlayerCurrentCoord()"><i class="fa-solid fa-location-dot"></i></button>
                        </div>
                    </div>
                    <div class="col p-0">
                        <div class="input-group input-group-lg float-end" style="width: 200px;">
                            <input type="text" id="exit_door" class="form-control" placeholder="${t('exit_door')}" style="height: 45px;" disabled>
                            <button class="set_coord_btn" id="set_exit_door" type="button" onclick="GetExitCoord()" disabled><i class="fa-solid fa-location-dot"></i></button>
                        </div>
                    </div>
                </div>
            `)
        }
        else{
            $('.dropdown_container .dropdown-menu').html('')
            for (const key in PropertyTypes['IPL']) {
                $('.dropdown_container .dropdown-menu').append(`
                    <li><button class="dropdown-item" id="type_${key}" onclick="ChangeDropdownText('${PropertyTypes['IPL'][key].label}', '${key}')">${PropertyTypes['IPL'][key].label}</button></li>
                `)
            }
            $('#panel_creation .doors_container').html(`
                <div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
                    <input type="text" id="entry_door" class="form-control" placeholder="${t('entry_door')}" style="height: 45px;" disabled>
                    <button class="set_coord_btn" type="button" onclick="GetPlayerCurrentCoord()"><i class="fa-solid fa-location-dot"></i></button>
                </div>
            `)
        }
        if (PropertyCreationPanelType == 'house'){
            $('.house_con.garage_id').css('display', 'block')
        }
    }
    else{
        $('#panel_creation .dropdown_container').html(``)
        $('#panel_creation .doors_container').html(`
            <div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
                <input type="text" id="entry_door" class="form-control" placeholder="${t('entry_door')}" style="height: 45px;" disabled>
                <button class="set_coord_btn" type="button" onclick="GetPlayerCurrentCoord()"><i class="fa-solid fa-location-dot"></i></button>
            </div>
        `)
        $('.house_con.garage_id').css('display', 'none')
    }
    BackgroundBlur("plugin_2", 'panel_creation')
    CheckIfCanCreateProperty()
}

function TriggerCallback(event, data) {
    data.action = event;
    return $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify(data)).promise();
}

function BackgroundBlur(element, target) {
    if (BGBlur){
        var bodyRect = document.body.getBoundingClientRect();
        let elemRect = getTotalBoundingBox(target); 
        
        if (!elemRect) return;
    
        let offset = [
            (elemRect.top - bodyRect.top)-1, 
            ((elemRect.right - bodyRect.right) * (-1))-1, 
            (elemRect.bottom - bodyRect.bottom)+1, 
            (elemRect.left - bodyRect.left)-1
        ];
    
        $('#' + element).css('clip-path', `inset(${offset[0]}px ${offset[1]}px calc(100% - ${offset[2]}px) ${offset[3]}px)`);
    }
    else{
        $('#' + element).css('display', 'none')
    }
}

function getTotalBoundingBox(target) {
    const elem = document.getElementById(target);
    if (!elem) return null;

    let elemRect = elem.getBoundingClientRect();
    let minX = elemRect.left;
    let minY = elemRect.top;
    let maxX = elemRect.right;
    let maxY = elemRect.bottom;


    Array.from(elem.children).forEach(child => {
        let childRect = child.getBoundingClientRect();
        minX = Math.min(minX, childRect.left!=0?childRect.left:99999);
        minY = Math.min(minY, childRect.top!=0?childRect.top:99999);
        maxX = Math.max(maxX, childRect.right);
        maxY = Math.max(maxY, childRect.bottom);
    });


    return {
        width: maxX - minX,
        height: maxY - minY,
        left: minX,
        top: minY,
        right: maxX,
        bottom: maxY
    };
}

function show(element) {
    $("#" + element).css("display", "block")
    document.getElementById(element).style.animation = "showmenu 0.35s ease";
}

function hide(element) {
    document.getElementById(element).style.animation = "hidemenu 0.3s ease";
    setTimeout(function() {
        $("#" + element).css("display", "none")
    }, 300)
}

function show2(element) {
    $("#" + element).css("display", "block")
    document.getElementById(element).style.animation = "Home_cons 0.3s ease";
}

function hide2(element) {
    document.getElementById(element).style.animation = "reverse_Home_cons 0.2s ease";
    setTimeout(function() {
        $("#" + element).css("display", "none")
    }, 200)
}

function isNumber(evt) {
    evt = (evt) ? evt : window.event
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false
    }
    return true
}

function formatMoney(input) {
    let value = input.value.replace(/\D/g, '');

    if (value === '') {
        input.value = '';
        return;
    }

    let formattedValue = parseInt(value, 10).toLocaleString('hu-HU');

    input.value = formattedValue;
}

function fancyTimeFormat(duration)
{   
    var hrs = ~~(duration / 3600);
    var mins = ~~((duration % 3600) / 60);
    var secs = ~~duration % 60;

    var ret = "";

    if (hrs > 0) {
        ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
    }

    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
    ret += "" + secs;
    return ret;
}

function fancyTimeFormat2(duration)
{   
    var hrs = ~~(duration / 3600);
    var mins = ~~((duration % 3600) / 60);
    var secs = ~~duration % 60;

    var ret = "";

    if (hrs > 0) {
        ret += "" + hrs + "d " + (mins < 10 ? "0" : "");
    }

    ret += "" + mins + "h " + (secs < 10 ? "0" : "");
    ret += "" + secs + 'm';
    return ret;
}

function fancyTimeFormat3(duration)
{   
    var hrs = ~~(duration / 3600);
    var mins = ~~((duration % 3600) / 60);
    var secs = ~~duration % 60;

    var ret = "";

    if (hrs > 0) {
        ret += "" + hrs + "h " + (mins < 10 ? "0" : "");
    }

    ret += "" + mins + "m "// + (secs < 10 ? "0" : "");
    //ret += "" + secs + "s";
    return ret;
}



/////////////////////////////////////////////////////////[FURNITURE MENU]////////////////////////////////////////////////////////////////////////

function SendClosedFurniture(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: 'backToPropertyMenu'}))
}

function ResetFurniturePanel(){
    $('#panel_furniture').css('animation', 'none')
    $('#panel_chosed_furniture').css('animation', 'none')
    $('.preferences_con').css('animation', 'none')
}

function SwitchFurnitureType(id){
    let rect = document.getElementById(id).getBoundingClientRect();
    let parentRect = document.querySelector("#furniture_control").getBoundingClientRect();
    let elementCenterY = rect.top - parentRect.top;
    document.querySelector(".selector#furniture").style.top = `${elementCenterY}px`;
    ChosedFurnitureType = id

    CreateFurnitureMenu()
}

function CreateFurnitureMenu(){
    $('.furniture_type_contanier .moving_element').html('')
    let RowCount = 0
    let RowElementCount = 1
    let disableCategory
    let OneEnabledCategory = null

    if (ChosedFurnitureType == 'owned'){
        let IsFunctionRun = false
        for (let i = 0; i < Furnitures.length; i++) {
            RowElementCount = RowElementCount + 1
            if (RowCount == 0 && RowElementCount == 2){
                $('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
            }
            if (RowCount % 2 != 0){
                if (RowElementCount > 3){
                    RowElementCount = 0
                    RowCount = RowCount + 1
                    $('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
                }
            }
            else{
                if (RowElementCount > 4){
                    RowElementCount = 0
                    RowCount = RowCount + 1
                    $('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
                }
            }

            disableCategory = true
            if (Myproperties[CurrentProperty].furnitures.length > 0){
                for (let _i = 0; _i < Furnitures[i].objects.length; _i++) {
                    for (let index = 0; index < Myproperties[CurrentProperty].furnitures.length; index++) {
                        if (Furnitures[i].objects[_i].options != undefined){
                            for (const key in Furnitures[i].objects[_i].options) {
                                if (Myproperties[CurrentProperty].furnitures[index].obj == Furnitures[i].objects[_i].options[key].model){
                                    disableCategory = false
                                }
                            }
                        }
                        else if (Myproperties[CurrentProperty].furnitures[index].obj == Furnitures[i].objects[_i].model){
                            disableCategory = false
                        }
                    }
                }
            }
            else{
                $('.furniture_container').html('')
            }

            $('.furniture_type_contanier .moving_element #row_'+RowCount).append(`
                <div class="col p-0">
                    <div class="furniture_type_element ${disableCategory?'disabled':``}" id='${Furnitures[i].category}' style='background-image: url("assets/furniture_categories/${Furnitures[i].category}.png");' ${disableCategory?'':`onmouseup="ChooseFurnitureType(this, ${i}, 'owned')"`}></div>
                </div>
            `)
            if (!disableCategory){
                disableCategory = i
                OneEnabledCategory = i
                if (ChosedMovingFurnitureType == null){
                    IsFunctionRun = true
                    ChooseFurnitureType(document.getElementById(Furnitures[i].category), i, 'owned')
                }
                else if(ChosedMovingFurnitureType == i){
                    IsFunctionRun = true
                    ChooseFurnitureType(document.getElementById(Furnitures[ChosedMovingFurnitureType].category), ChosedMovingFurnitureType, 'owned')
                }
            }
        }
        if (!IsFunctionRun){
            if (OneEnabledCategory != null){
                ChooseFurnitureType(document.getElementById(Furnitures[OneEnabledCategory].category), OneEnabledCategory, 'owned')
            }
            else{
                $('.furniture_container').html(`<div class="text">${t('not_have_furniture')}</div>`)
            }
        }
    }
    else{
        for (let i = 0; i < Furnitures.length; i++) {
            RowElementCount = RowElementCount + 1
            if (RowCount == 0 && RowElementCount == 2){
                $('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
            }
            if (RowCount % 2 != 0){
                if (RowElementCount > 3){
                    RowElementCount = 0
                    RowCount = RowCount + 1
                    $('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
                }
            }
            else{
                if (RowElementCount > 4){
                    RowElementCount = 0
                    RowCount = RowCount + 1
                    $('.furniture_type_contanier .moving_element').append(`<div class="row flex-nowrap p-0" id='row_${RowCount}'> </div>`)
                }
            }
            $('.furniture_type_contanier .moving_element #row_'+RowCount).append(`
                <div class="col p-0">
                    <div class="furniture_type_element" id='${Furnitures[i].category}' style='background-image: url("assets/furniture_categories/${Furnitures[i].category}.png");' onmouseup="ChooseFurnitureType(this, ${i})"></div>
                </div>
            `)
        }

        if (ChosedMovingFurnitureType == null){
            ChooseFurnitureType(document.getElementById(Furnitures[Math.round((Furnitures.length-1)/2)].category), Math.round((Furnitures.length-1)/2))
        }
        else{
            ChooseFurnitureType(document.getElementById(Furnitures[ChosedMovingFurnitureType].category), ChosedMovingFurnitureType)
        }
    }

    ScaleObjects()
}

function ChooseFurnitureType(element, FurnitureKey, type) {
    if (!MovingElement){
        ChosedMovingFurnitureType = FurnitureKey

        document.querySelectorAll(".furniture_type_element").forEach(el => {
            el.classList.remove('choosed_furniture_type')
        });
        element.classList.add('choosed_furniture_type')
        $('.furniture_container').html('')
        let IsSecurityObject = false 
        for (let i = 0; i < Furnitures[FurnitureKey].objects.length; i++) {
            IsSecurityObject = false 
            for (const key in SecurityObjects.cameras) {
                if (SecurityObjects.cameras[key] == Furnitures[FurnitureKey].objects[i].model){
                    IsSecurityObject = true
                }
            }

            for (const key in SecurityObjects.databases) {
                if (SecurityObjects.databases[key] == Furnitures[FurnitureKey].objects[i].model){
                    IsSecurityObject = true
                }
            }

            if (type == 'owned'){
                for (let _i = 0; _i < Myproperties[CurrentProperty].furnitures.length; _i++) {
                    let CanbeShowed = false
                    if (Furnitures[FurnitureKey].objects[i].options != undefined){
                        for (const key in Furnitures[FurnitureKey].objects[i].options) {
                            if (Furnitures[FurnitureKey].objects[i].options[key].model == Myproperties[CurrentProperty].furnitures[_i].obj){
                                CanbeShowed = true
                            }
                        }
                    }
                    else if(Furnitures[FurnitureKey].objects[i].model == Myproperties[CurrentProperty].furnitures[_i].obj){
                        CanbeShowed = true
                    }

                    if (CanbeShowed){
                        $('.furniture_container').append(`
                            <button class="furniture_element" id='furniture_${i+_i}' onclick='EditFurniture("${Myproperties[CurrentProperty].furnitures[_i].id}", "${FurnitureKey}", "${i+_i}","${Furnitures[FurnitureKey].objects[i].price/2}")' ${Myproperties[CurrentProperty].furnitures[_i].type != InsideOrOutside?'disabled':''}>
                                <img src="assets/furnitures/${Myproperties[CurrentProperty].furnitures[_i].obj}.png">
                                <div class="chosed_element"></div>
                                ${Myproperties[CurrentProperty].furnitures[_i].type == 'outside'?'<div class="customizable"><i class="fa-solid fa-mountain-sun"></i></div>':''}
                                ${IsSecurityObject?'<div class="security"><i class="fa-solid fa-shield-halved"></i></div>':''}
                            </button>
                        `)
                    }
                }
            }
            else{

                $('.furniture_container').append(`
                    <button class="furniture_element" id='furniture_${i}' onclick='SelectFurniture("${Furnitures[FurnitureKey].objects[i].model}","${Furnitures[FurnitureKey].objects[i].price}", "${FurnitureKey}", "${i}")'>
                        <img src="assets/furnitures/${Furnitures[FurnitureKey].objects[i].model}.png">
                        <div class="chosed_element"></div>
                        ${Furnitures[FurnitureKey].objects[i].options != undefined?'<div class="customizable"><i class="fa-solid fa-fill-drip"></i></div>':''}
                        ${IsSecurityObject?'<div class="security"><i class="fa-solid fa-shield-halved"></i></div>':''}
                    </button>
                `)
            }
        }
        HideChosedFurniture()
    }
}

function HideChosedFurniture(){
    $('#panel_chosed_furniture').css('animation', 'reverse_Basic_popup 0.3s ease')
    setTimeout(() => {
        BackgroundBlur("plugin_4", 'panel_chosed_furniture')
        $('.chosed_furniture').css('display', 'none')
    }, 300);
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "unselectFurniture"}))
}

function ShowChosedFurniture(){
    $('#panel_chosed_furniture').css('animation', 'Basic_popup 0.3s ease')
    $('.chosed_furniture').css('display', 'block')
    setTimeout(() => {
        BackgroundBlur("plugin_4", 'panel_chosed_furniture')
    }, 200);
}

function EditFurniture(objectid, FurnitureKey, i, price){
    ShowChosedFurniture()

    let furniture_elements = document.getElementsByClassName("furniture_element")
    for (let _i = 0; _i < furniture_elements.length; _i++) {
        if (furniture_elements[_i]){
            furniture_elements[_i].classList.remove('chosed')
        }
    }
    document.getElementById('furniture_'+i).classList.add('chosed')

    $('#panel_chosed_furniture .price').html(price.toLocaleString('hu-HU')+Currency)

    $('#buy_furniture').css('display', 'none')
    $('#sell_furniture').css('display', 'block')
    $('.color_container').css('display', 'none')
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "editFurniture", objectid, propertyID:Myproperties[CurrentProperty].id}))
}

function SelectFurniture(model, price, FurnitureKey, i){
    ShowChosedFurniture()

    for (let _i = 0; _i < Furnitures[FurnitureKey].objects.length; _i++) {
        document.getElementById('furniture_'+_i).classList.remove('chosed')
    }
    document.getElementById('furniture_'+i).classList.add('chosed')

    if (Furnitures[FurnitureKey].objects[i].options == undefined){
        $('.color_container').css('display', 'none')
    }
    else{
        $('.color_container').css('display', 'flex')
        $('.color_container').html('')
        for (const key in Furnitures[FurnitureKey].objects[i].options) {
            $('.color_container').append(`<button class="color_element" onclick='SendChangeModel("${Furnitures[FurnitureKey].objects[i].options[key].model}")'>${Number(key)+1}</button>`)
        }
    }
    BackgroundBlur("plugin_4", 'panel_chosed_furniture')

    $('#panel_chosed_furniture .price').html(price.toLocaleString('hu-HU')+Currency)

    $('#buy_furniture').css('display', 'block')
    $('#sell_furniture').css('display', 'none')

    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "selectFurniture", model, propertyID:Myproperties[CurrentProperty].id}))
}

function SendChangePosition(){
    $('#panel_furniture').css('animation', 'reverse_Basic_popup 0.3s ease both')
    $('#panel_chosed_furniture').css('animation', 'reverse_Basic_popup 0.3s ease both')
    $('.preferences_con').css('animation', 'reverse_Basic_popup 0.3s ease both')

    setTimeout(() => {
        BackgroundBlur("plugin_4", 'panel_chosed_furniture')
        BackgroundBlur("plugin_3", 'panel_furniture')
    }, 600);
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "furniturePositioning", propertyID:Myproperties[CurrentProperty].id}))
}

function SendBuyFurniture(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "buyFurniture", propertyID:Myproperties[CurrentProperty].id}))
}

function SendSellFurniture(){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "deleteFurniture", propertyID:Myproperties[CurrentProperty].id}))
}

function SendChangeModel(model){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "changeFurniture", propertyID:Myproperties[CurrentProperty].id, model}))
}

let isMousePressed = false; // Flag to check if the mouse is pressed
let MovingElement = false
let elementToMove = document.getElementById("moving_element");
let parentElement = document.getElementById("furniture_type_contanier"); // The parent element
let startX = 0, startY = 0, currentX = 0, currentY = 0; // Position tracking

document.getElementById("furniture_type_contanier").addEventListener("mousedown", function(event) {
    if (event.button === 0) { // Left click pressed
        isMousePressed = true;

        // Get element's current transform values
        const transform = getComputedStyle(elementToMove).transform;
        if (transform !== "none") {
            const matrix = new DOMMatrix(transform);
            currentX = matrix.m41; // X translation
            currentY = matrix.m42; // Y translation
        }

        // Capture the offset to prevent jumping
        startX = event.clientX - currentX;
        startY = event.clientY - currentY;

        function moveElement(e) {
            if (!isMousePressed) return;
            MovingElement = true

            // Calculate new position based on mouse movement
            let translateX = e.clientX - startX;
            let translateY = e.clientY - startY;

            // Get parent boundaries
            const parentRect = parentElement.getBoundingClientRect();
            const elemRect = elementToMove.getBoundingClientRect();

            // Constrain within parent
            const minX = 0;
            const minY = 0;
            const maxX = parentRect.width - elemRect.width;
            const maxY = parentRect.height - elemRect.height;

            // Smooth boundary effect (soft stop)
            if (translateX < minX) translateX = minX - (minX - translateX) * 0.2;
            if (translateY < minY) translateY = minY - (minY - translateY) * 0.2;
            if (translateX > maxX) translateX = maxX + (translateX - maxX) * 0.2;
            if (translateY > maxY) translateY = maxY + (translateY - maxY) * 0.2;

            // Apply the transform (translate)
            elementToMove.style.transform = `translate(${translateX}px, ${translateY}px)`;

            ScaleObjects()
        }

        // Add event listeners
        document.addEventListener("mousemove", moveElement);
        document.addEventListener("mouseup", function stopMoving() {
            isMousePressed = false;
            MovingElement = false

            // Get parent boundaries again for smooth reset
            const parentRect = parentElement.getBoundingClientRect();
            const elemRect = elementToMove.getBoundingClientRect();

            let translateX = currentX;
            let translateY = currentY;

            // Ensure it stays inside parent (reset position if out)
            if (elemRect.left < parentRect.left) translateX = 0;
            if (elemRect.top < parentRect.top) translateY = 0;
            if (elemRect.right > parentRect.right) translateX = parentRect.width - elemRect.width;
            if (elemRect.bottom > parentRect.bottom) translateY = parentRect.height - elemRect.height;

            // Smooth transition back to boundary

            const overflowThreshold = 10;
            if (
                elemRect.left < parentRect.left - overflowThreshold ||
                elemRect.top < parentRect.top - overflowThreshold ||
                elemRect.right > parentRect.right + overflowThreshold ||
                elemRect.bottom > parentRect.bottom + overflowThreshold
            ){
                elementToMove.style.transition = "transform 0.3s ease-out";
                elementToMove.style.transform = `translate(${translateX}px, ${translateY}px)`;

                const startTime = Date.now();

                    function loop() {
                        const currentTime = Date.now();
                
                        if (currentTime - startTime >= 300) {
                            return;
                        }

                        ScaleObjects()
                
                        setTimeout(loop, 1); 
                    }
                
                    loop();

    
                setTimeout(() => {
                    elementToMove.style.transition = ""; 
                }, 300);
            }

            document.removeEventListener("mousemove", moveElement);
            document.removeEventListener("mouseup", stopMoving);
        });
    }
});

function ScaleObjects(){
    const parentRect = parentElement.getBoundingClientRect();
    const children = parentElement.getElementsByClassName("furniture_type_element");

    Array.from(children).forEach(child => {
        const rect = child.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        const parentCenterX = parentRect.left + parentRect.width / 2;
        const parentCenterY = parentRect.top + parentRect.height / 2;

        const distance = Math.sqrt((parentCenterX - centerX) ** 2 + (parentCenterY - centerY) ** 2);

        child.style.opacity = 1.7 - distance / 100;

        let childProperties = getObjectProperties(distance);
        child.style.transform = `scale(${childProperties.scale})`;
    });
}

function getObjectProperties(distance) {
    const minDistance = 75;
    const maxDistance = 140;

    // Scale range (0.75 to 0)
    const minScale = 0.1;
    const maxScale = 1;

    // Clamp the distance
    distance = Math.min(Math.max(distance, minDistance), maxDistance);

    // Normalize distance (0 when at maxDistance, 1 when at minDistance)
    let normalized = 1 - (distance - minDistance) / (maxDistance - minDistance);

    // Calculate scale
    let scale = minScale + normalized * (maxScale - minScale);


    return { scale };
}