var LogsBox = {
    props: ["logtype", "logid", "logdesc", "logstaff", "logcount", "logdate", "isactive", "iscountable"],
    methods: {
        logsViewMoreOrLess: function(a, b, c, d) {
            app.logsViewMoreOrLess(a, b, c, d)
        },

        unBanOrJail: function(a, b) {
            app.unBanOrJail(a, b)
        }
    },
    template: `
    <div>
    <div style="display: flex; margin-left: 1.3889vh; height: 3.5185vh; align-items: center; justify-content: space-between;">
        <span :class='logtype.toLowerCase()' style="font-size: 1.1111vh; font-weight: 600;">{{ logtype+' #'+logid }}</span>
        <div v-if='isactive === true' style="margin-right: 1.2037vh; width: 5vh; height: 2.037vh; display: flex; justify-content: center; align-items: center; font-size: .4167vw; font-weight: 500; color: #9EFF7B; background: rgba(36, 255, 0, 0.12); border-radius: 0.463vh;" @click="unBanOrJail(logid, logtype.replace(' ', ''))">
            {{ logtype === 'Ban' ? 'Unban' : 'Unjail' }}
        </div>
    </div>
    <div style="width: 100%; height: 0.0926vh; display: flex; justify-content: center;"><div style="opacity: 0.07; height: 0.0926vh; width: 15.7407vh; background-color: white;"></div></div>
    <div style="width: 100%; height: 2.8704vh; align-items: center; display: flex; justify-content: space-between;">
        <div style="display: flex; margin-left: 1.3889vh;">
            <img src="img/LogsLogIcon.png" style="width: 0.6481vh; height: 1.0185vh;" alt="logsIconn">
            <span style="margin-left: 0.7407vh; font-size: 0.9259vh; font-weight: 500; opacity: 0.7;">Description</span>
        </div>
        <span style="font-size: 0.7407vh; font-weight: 500; margin-right: 1.2037vh;" @click="logsViewMoreOrLess('logs-'+logtype.replace(' ', '')+'-'+logid, logid, logtype.replace(' ', ''), $event)">View More</span>
    </div>
    <textarea readonly :id="'logs-'+logtype.replace(' ', '')+'-'+logid">{{ logdesc }}</textarea>
    <div style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 1.1111vh; height: 4.4444vh; width: 100%;">
        <div style="display: flex; align-items: center; margin-left: 1.3889vh;">
            <img src="img/LogsByIcon.png" style="width: 0.9259vh; height: 1.0185vh;" alt="dotby">
            <span style="margin-left: 1.8519vh; opacity: 0.7; font-size: 0.9259vh; font-weight: 500;">{{ 'by '+logstaff }}</span>
        </div>
        <div style="display: flex; align-items: center; margin-left: 1.3889vh;">
            <img src="img/LogsDateIcon.png" style="width: 1.0185vh; height: 0.8333vh;" alt="dotby">
            <span style="margin-left: 1.8519vh; opacity: 0.7; font-size: 0.9259vh; font-weight: 500;">{{ logdate.split(' ')[0] }}</span>
        </div>
        <div v-if="iscountable === 'true'" style="display: flex; align-items: center; margin-left: 1.3889vh;">
            <img src="img/LogsClockIcon.png" style="width: 1.0185vh; height: 1.0185vh;" alt="dotby">
            <span style="margin-left: 1.8519vh; opacity: 0.7; font-size: 0.9259vh; font-weight: 500;">{{ logcount }}</span>
        </div>
    </div>
    </div>
    `
}

var app = new Vue({
    el : "#app",
    data: {
        darkMode: false,
        framework: "",

        userUsername: "Lvorex",
        userRank: { title: "Admin", color: "#F34240" },
        userIcon: "",

        notifyMenu: false,
        newNotify: false,

        leftNaviSelection: "info",
        showingVehicleInfo: false,
        showingVehiclePlate: "",
        showingVehicleLeftInputs: [],
        showingVehicleRightInputs: [],
        selectedVehicle: {},

        leftNaviItems: [
            { icon: "BookIcon", id: "info" },
            { icon: "HearthIcon", id: "hearth" },
            { icon: "MoneyIcon", id: "money" },
            { icon: "CarIcon", id: "car" },
            { icon: "BagIcon", id: "inventory" },
            { icon: "KlavuzIcon", id: "logs" },
        ],
        
        searchValue: "",

        selectedPlayer: {},
        vip: true,
        permaBanned: false,

        rightInputs: [],
        leftDownInputs: {},

        hearthLeftInputs: [],
        hearthLogSearchValue: "",
        hearthLogs: [],
        hearthToShowLogs: [],

        moneyLeftInputs: [],
        moneyLogsSearchValue: "",
        moneyLogs: [],
        moneyToShowLogs: [],

        generalLogsSearch: "",
        generalLogs: [],
        generalLogsShow: [],

        playerVehicles: [],
        carAddingNewCar: false,

        toShowPlayers: [],

        playerActionsPopUp: undefined,
        playerInGameActions: [],
        playerOtherActions: [],

        draggedItem: null,
        inventoryCountInput: null,
        invPopup: false,
        inventoryDeletePopup: null,
        inventoryAddInputSelectMenu: false,
        inventoryItemsAddItemInput: "",
        inventoryItemsAddItemAmount: 0,
        inventoryItemsAddItemIcon: "",

        serverItemsData: [],
        serverItemsShow: [],

        inventoryItems: [],

        logsNavbarBoxBg: "img/LogsGeneralBg.png",
        logsNavbarItems: [
            { id: 0, name: "General", button: "img/LogsGeneralButtonBg.png", notActiveButton: "rgba(255, 255, 255, 0.18)", background: "img/LogsGeneralBg.png", count: -1, active: true },
            { id: 1, name: "Warns", button: "img/LogsWarnsButtonBg.png", notActiveButton: "rgba(255, 144, 111, 0.18)", background: "img/LogsWarnsBg.png", count: 0, active: false },
            { id: 2, name: "Kicks", button: "img/LogsKicksButtonBg.png", notActiveButton: "rgba(255, 175, 101, 0.18)", background: "img/LogsKicksBg.png", count: 0, active: false },
            { id: 3, name: "A.Jails", button: "img/LogsAJailsButtonBg.png", notActiveButton: "rgba(73, 255, 211, 0.18)", background: "img/LogsAJailsBg.png", count: 0, active: false },
            { id: 4, name: "Bans", button: "img/LogsBansButtonBg.png", notActiveButton: "rgba(255, 73, 73, 0.18)", background: "img/LogsBansBg.png", count: 0, active: false },
        ],

        warnsLogs: [],
        kicksLogs: [],
        adminjailsLogs: [],
        bansLogs: []
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp,
        "draggable": window["vuedraggable"],
        "logsbox": LogsBox
    },
    watch: {
        hearthLogSearchValue: function(newValue) {
            this.hearthToShowLogs = this.hearthLogs
            this.hearthToShowLogs = this.hearthToShowLogs.filter(w => w.author.toLowerCase().includes(newValue.toLowerCase()) || w.date.startsWith(newValue))
        },

        moneyLogsSearchValue: function(newValue) {
            this.moneyToShowLogs = this.moneyLogs
            this.moneyToShowLogs = this.moneyToShowLogs.filter(w => w.author.toLowerCase().includes(newValue.toLowerCase()) || w.date.startsWith(newValue))
        },

        inventoryItemsAddItemInput: function(newValue) {
            this.serverItemsShow = this.serverItemsData
            this.serverItemsShow = this.serverItemsShow.filter(w => w.name.toLowerCase().includes(newValue.toLowerCase()))
        }
    },
    methods: {
        resetSelectMenu: function(e) {
            if (this.inventoryAddInputSelectMenu !== false && e.target.id !== "inv-popup-input") {
                this.inventoryAddInputSelectMenu = false
            }
        },

        searchGeneralLogs: function(newValue) {
            this.generalLogsShow = this.generalLogs
            this.generalLogsShow = this.generalLogsShow.filter(w => w.author.toLowerCase().startsWith(newValue.toLowerCase()) || w.date.startsWith(newValue) || w.message.includes(newValue.toLowerCase()))
        },

        logsViewMoreOrLess: function(inputId, logId, type, event) {
            if (this[type.toLowerCase()+"sLogs"][Number(logId) - 1].more) {
                event.target.innerHTML = "View More"
                document.getElementById(inputId).style.height = ""
                this[type.toLowerCase()+"sLogs"][Number(logId) - 1].more = false
            } else {
                event.target.innerHTML = "View Less"
                document.getElementById(inputId).style.height = "11.3889vh"
                this[type.toLowerCase()+"sLogs"][Number(logId) - 1].more = true
            }
        },

        unBanOrJail: async function(logId, type) {
            const logIdentifier = this[type.toLowerCase()+"sLogs"][Number(logId) - 1].id
            if (type.toLowerCase() === 'ban') {
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/unbanPlayerAction.lvorex`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        uid: this.selectedPlayer.uid,
                        license: this.selectedPlayer.rockstarLicense,
                        logIdentifier: logIdentifier,
                        temp: true
                    })
                })
                result = await result.json()
                if (result.code !== 200) return console.log(result.message)
            } else {
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/unjailPlayerAction.lvorex`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        uid: this.selectedPlayer.uid,
                        logIdentifier: logIdentifier
                    })
                })
                result = await result.json()
                if (result.code !== 200) return console.log(result.message)
            }

            this[type.toLowerCase()+"sLogs"][Number(logId) - 1].active = false
        },

        logsChangeCategory: async function(id) {
            this.logsNavbarItems.forEach(item => {
                item.active = false
            })

            this.logsNavbarBoxBg = this.logsNavbarItems[id].background
            this.logsNavbarItems[id].active = true
        },

        clearInventory: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/clearInventory.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid
                })
            })
            result = await result.json()
            if (result.code !== 200) return

            this.inventoryItems.forEach(item => {
                item.name = ""
                item.icon = ""
                item.count = 0
            })

            this.inventoryClearPopup = null
            this.invPopup = false
        },
        inventoryOnDragStart: function(slot) {
            this.draggedItem = this.inventoryItems.find(w => w.slot === slot)
        },
        iventoryTrashDrag: function() {
            const index = this.inventoryItems.indexOf(this.draggedItem)
            if (index !== -1) {
                const draggedItem = this.inventoryItems[index]
                if (draggedItem.name === "") return
                this.inventoryDeletePopup = {
                    name: draggedItem.name,
                    amount: Number(this.inventoryCountInput) === 0 || this.inventoryCountInput === null ? draggedItem.count : this.inventoryCountInput,
                    icon: draggedItem.icon
                }
                this.invPopup = "deleteItem"
            }
        },
        
        inventoryPlusDrag: async function() {
            const index = this.inventoryItems.indexOf(this.draggedItem)
            if (index === -1) return
            
            const draggedItem = this.inventoryItems[index]
            let amount = Number(this.inventoryCountInput)
            if (!amount) amount = 1

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/addItemToInventory.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid,
                    item: draggedItem.name,
                    addingCount: amount,
                    slot: draggedItem.slot
                })
            })
            result = await result.json()
            if (result.code !== 200) return console.log(result.message)

            this.inventoryItems[index].count = amount + Number(draggedItem.count)
        },

        inventoryAddItem: async function() {
            if (
                !this.inventoryItemsAddItemInput ||
                !this.inventoryItemsAddItemAmount
            ) return

            const emptySlot = this.inventoryItems.find(item => item.name === "")
            if (!emptySlot) return

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/addNewItemToInventory.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid,
                    item: this.inventoryItemsAddItemInput,
                    amount: Number(this.inventoryItemsAddItemAmount)
                })
            })
            result = await result.json()
            if (result.code !== 200) return console.log(result.message)

            emptySlot.name = this.inventoryItemsAddItemInput
            emptySlot.count = this.inventoryItemsAddItemAmount
            emptySlot.icon = this.inventoryItemsAddItemIcon
            this.invPopup = false
        },

        inventoryDeleteItem: async function() {
            const index = this.inventoryItems.indexOf(this.draggedItem)
            if (index !== -1) {
                if (this.inventoryItems[index].name === "") return
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/removeItemFromInventory.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        uid: this.selectedPlayer.uid,
                        slot: this.inventoryItems[index].slot,
                        itemName: this.inventoryItems[index].name,
                        amount: this.inventoryCountInput
                    })
                })
                result = await result.json()
                if (result.code !== 200) return console.log(result.message)

                if (
                    Number(this.inventoryCountInput) === 0 ||
                    this.inventoryItems[index].count - Number(this.inventoryCountInput) <= 0 ||
                    !this.inventoryCountInput
                ) {
                    this.inventoryItems[index].name = ""
                    this.inventoryItems[index].icon = ""
                    this.inventoryItems[index].count = 0
                } else {
                    this.inventoryItems[index].count = this.inventoryItems[index].count - Number(this.inventoryCountInput)
                }
            }
            this.invPopup = false
            this.draggedItem = null;
        },

        backToPlayers: function() {
            location.href = "/Panel/Players/"
        },

        changePage: async function(changeto) {
            this.leftNaviSelection = changeto

            if (changeto === "car") {
                result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getPlayerVehicles.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        uid: this.selectedPlayer.uid
                    })
                })
                result = await result.json()
                if (result.code !== 200) {
                    console.log(result.message)
                    return
                }
        
                this.playerVehicles = result.message
            } else if (changeto === "hearth") {
                let hearthLogsResult = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getSpecificLog.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        type: "status",
                        uid: this.selectedPlayer.uid
                    })
                })
                hearthLogsResult = await hearthLogsResult.json()
                if (hearthLogsResult.code === 200) {
                    this.hearthLogs = hearthLogsResult.message.reverse()
                    this.hearthToShowLogs = this.hearthLogs
                }

                if (this.selectedPlayer.status === "Online") {
                    let statusResult = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getPlayerMetadata.lvorex`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                            key: sha1(sessionStorage.getItem("uid-key")),
                            playerId: this.selectedPlayer.id
                        })
                    })
                    statusResult = await statusResult.json()
                    console.log(statusResult)
        
                    if (statusResult.code === 404) {
                        console.log(statusResult.message)
                        return
                    }
        
                    this.hearthLeftInputs = [
                        { title: "Health", class: "healthInput", value: statusResult.health, color: "rgba(255, 72, 72, 0.20)", realValue: statusResult.health },
                        { title: "Armor", class: "armorInput", value: statusResult.armor, color: "rgba(72, 112, 255, 0.20)", realValue: statusResult.armor },
                        { title: "Hunger", class: "hungerInput", value: statusResult.hunger, color: "rgba(255, 160, 72, 0.20)", realValue: statusResult.hunger },
                        { title: "Thirst", class: "thirstInput", value: statusResult.thirst, color: "rgba(72, 255, 244, 0.20)", realValue: statusResult.thirst },
                        { title: "Stress", class: "stressInput", value: statusResult.stress, color: "rgba(255, 72, 248, 0.20)", realValue: statusResult.stress },
                    ]
                }
            } else if (changeto === "money") {
                let moneyLogsResult = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getSpecificLog.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        type: "money",
                        uid: this.selectedPlayer.uid
                    })
                })
                moneyLogsResult = await moneyLogsResult.json()
                if (moneyLogsResult.code !== 200) {
                    this.moneyLogs = []
                    this.moneyToShowLogs = []
                } else {
                    this.moneyLogs = moneyLogsResult.message.reverse()
                    this.moneyToShowLogs = this.moneyLogs
                }

                this.moneyLeftInputs = [
                    { title: "Cash", class: "CashInput", value: parseInt(this.selectedPlayer.money.cash).toLocaleString()+"$", color: "rgba(180, 255, 144, 0.20)", realValue: parseInt(this.selectedPlayer.money.cash), editing: false },
                    { title: "Bank", class: "BankInput", value: parseInt(this.selectedPlayer.money.bank).toLocaleString()+"$", color: "rgba(255, 255, 255, 0.20)", realValue: parseInt(this.selectedPlayer.money.bank), editing: false },
                    { title: "Black Money", class: "BlackMoneyInput", value: parseInt(this.selectedPlayer.blackMoneyCount).toLocaleString()+"$", color: "rgba(255, 144 144, 0.20)", realValue: parseInt(this.selectedPlayer.blackMoneyCount), editing: false },
                    { title: "Crypto", class: "CryptoInput", value: this.framework.includes("qb") ? parseInt(this.selectedPlayer.money.crypto).toLocaleString() : 'Not found.', color: "rgba(255, 231, 144, 0.20)", realValue: parseInt(this.selectedPlayer.money.crypto), editing: false },
                    { title: `Society - ${this.selectedPlayer.job.split("-")[0]}`, class: "SocietyInput", value: parseInt(this.selectedPlayer.societyMoney).toLocaleString()+"$", color: "rgba(255, 144, 244, 0.20)", realValue: parseInt(this.selectedPlayer.societyMoney), editing: false },
                ]
            } else if (changeto === "inventory") {
                let invItemsResult = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getInventoryItems.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        uid: this.selectedPlayer.uid
                    })
                })
                invItemsResult = await invItemsResult.json()
                if (invItemsResult.code !== 200) return console.log(invItemsResult.message)
                this.inventoryItems = JSON.parse(invItemsResult.message)

                invItemsResult = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAllItems.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key"))
                    })
                })
                invItemsResult = await invItemsResult.json()
                if (invItemsResult.code !== 200) return console.log(invItemsResult.message)
                this.serverItemsData = JSON.parse(invItemsResult.message)
                this.serverItemsShow = this.serverItemsData
            } else if (changeto === "logs") {
                let moneyLogsResult = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getSpecificLog.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        type: "money",
                        uid: this.selectedPlayer.uid
                    })
                })
                moneyLogsResult = await moneyLogsResult.json()
                if (moneyLogsResult.code !== 200) {
                    this.moneyLogs = []
                    this.moneyToShowLogs = []
                } else {
                    this.moneyLogs = moneyLogsResult.message.reverse()
                    this.moneyToShowLogs = this.moneyLogs
                }

                let hearthLogsResult = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getSpecificLog.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        type: "status",
                        uid: this.selectedPlayer.uid
                    })
                })
                hearthLogsResult = await hearthLogsResult.json()
                if (hearthLogsResult.length > 0) {
                    this.hearthLogs = hearthLogsResult.message.reverse()
                    this.hearthToShowLogs = this.hearthLogs
                }

                if (
                    this.moneyLogs.length === 0 &&
                    this.hearthLogs.length !== 0
                ) {
                    this.generalLogs = [...this.hearthLogs]
                } else if (
                    this.moneyLogs.length !== 0 &&
                    this.hearthLogs.length === 0
                ) {
                    this.generalLogs = [...this.moneyLogs]
                } else {
                    this.generalLogs = [...this.moneyLogs, ...this.hearthLogs]
                }

                this.generalLogs.sort((a,b) => moment(b.date, "DD.MM.YYYY HH:ss") - moment(a.date, "DD.MM.YYYY HH:ss"))
                this.generalLogsShow = this.generalLogs

                let actionLogsResult = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getPlayerActionLogs.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        uid: this.selectedPlayer.uid
                    })
                })
                actionLogsResult = await actionLogsResult.json()
                if (actionLogsResult.code !== 200) return console.log(actionLogsResult.message)

                this.warnsLogs = actionLogsResult.message.warn
                this.kicksLogs = actionLogsResult.message.kick
                this.adminjailsLogs = actionLogsResult.message.adminjail
                this.bansLogs = actionLogsResult.message.ban

                this.logsNavbarItems[1].count = this.warnsLogs.length
                this.logsNavbarItems[2].count = this.kicksLogs.length
                this.logsNavbarItems[3].count = this.adminjailsLogs.length
                this.logsNavbarItems[4].count = this.bansLogs.length
            }
        },
        
        copyToClipboard: function(id) {
            const inputValue = document.getElementById(id)
            inputValue.parentElement.style.pointerEvents = "none"
            inputValue.select()
            inputValue.setSelectionRange(0, 99999)

            const oldValue = inputValue.value

            navigator.clipboard.writeText(inputValue.value)

            inputValue.value = "Copied!"
            setTimeout(() => {
                inputValue.parentElement.style.pointerEvents = ""
                inputValue.value = oldValue
            }, 2000)
        },

        changeEditStatus: async function(id, right) {
            if (!right) {
                const index = this.leftDownInputs.findIndex(w => w.class === id)
                if (this.leftDownInputs[index].editing === true && !right) {
                    const newValue = document.getElementById("input"+id)
                    if (id === "job") {
                        if (newValue.value.split("-").length < 2) {
                            this.newNotify = {
                                desc: "Please use right syntax.",
                                author: "System"
                            }
                            return
                        }

                        let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeJob.lvorex`, {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json"
                            },
                            body: JSON.stringify({
                                key: sha1(sessionStorage.getItem("uid-key")),
                                job: newValue.value.split("-")[0],
                                grade: Number(newValue.value.split("-")[1]),
                                playerId: Number(this.selectedPlayer.id),
                                uid: this.selectedPlayer.uid
                            })
                        })
                        result = await result.json()
                        if (result.code === 404) {
                            this.leftDownInputs[index].value = result.message
                            setTimeout(() => {
                                this.leftDownInputs[index].value = this.selectedPlayer.job
                            }, 1000)
                        } else {
                            this.leftDownInputs[index].value = result.message.label + " - " + result.message.grade.name
                            this.selectedPlayer.job = result.message.label + " - " + result.message.grade.name
                            this.selectedPlayer.jobNameAndGrade = newValue.value
                        }
                    } else if (id === "faction") {
                        let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeGang.lvorex`, {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json"
                            },
                            body: JSON.stringify({
                                key: sha1(sessionStorage.getItem("uid-key")),
                                gang: newValue.value.split("-")[0],
                                grade: Number(newValue.value.split("-")[1]),
                                playerId: Number(this.selectedPlayer.id),
                                uid: this.selectedPlayer.uid
                            })
                        })
                        result = await result.json()
                        if (result.code === 404) {
                            this.leftDownInputs[index].value = result.message
                            setTimeout(() => {
                                this.leftDownInputs[index].value = this.selectedPlayer.faction
                            }, 1000)
                        } else {
                            this.leftDownInputs[index].value = result.message.label + " - " + result.message.grade.name
                            this.selectedPlayer.faction = result.message.label + " - " + result.message.grade.name
                            this.selectedPlayer.factionNameAndGrade = newValue.value
                        }
                    } else {
                        this.leftDownInputs[index].value = newValue.value
                    }
                } else {
                    if (id === "job") {
                        this.leftDownInputs[index].value = this.selectedPlayer.jobNameAndGrade   
                    } else if (id === "faction") {
                        this.leftDownInputs[index].value = this.selectedPlayer.factionNameAndGrade
                    }
                }
                this.leftDownInputs[index].editing = !this.leftDownInputs[index].editing
            } else {
                const index = this.rightInputs.findIndex(w => w.class === id)
                if (this.rightInputs[index].editing === true) {
                    const newValue = document.getElementById(id)

                    let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeCharacterCredentials.lvorex`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                            key: sha1(sessionStorage.getItem("uid-key")),
                            type: id,
                            newValue: newValue.value,
                            uid: this.selectedPlayer.uid,
                            playerId: Number(this.selectedPlayer.id)
                        })
                    })
                    result = await result.json()

                    if (result.code === 404) {
                        const oldValue = this.rightInputs[index].value
                        this.rightInputs[index].value = result.message
                        setTimeout(() => {
                            this.rightInputs[index].value = oldValue
                        }, 1000)
                    } else { 
                        this.rightInputs[index].value = newValue.value
                    }
                }

                this.rightInputs[index].editing = !this.rightInputs[index].editing
            }
        },

        takeOrGiveVIP: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeUserVIPStatus.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    uid: this.selectedPlayer.uid,
                    key: sha1(sessionStorage.getItem("uid-key"))
                })
            })
            result = await result.json()
            if (result.code === 404) {
                console.error(result.message)
                return
            }

            this.vip = !this.vip
        },

        hearthSetValue: async function(id, type) {
            const index = this.hearthLeftInputs.findIndex(w => w.class === id)
            if (index === -1) return
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/setPlayerMetadata.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    playerId: this.selectedPlayer.id,
                    uid: this.selectedPlayer.uid,
                    type: id,
                    action: type
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.hearthLeftInputs[index].value = result.message

                setTimeout(() => {
                    this.hearthLeftInputs[index].value = this.hearthLeftInputs[index].realValue
                }, 1000)
            }

            const metadataName = id.split("Input")[0]

            this.hearthLogs.push({
                date: moment(Date.now()).format("DD.MM.YYYY HH:mm"),
                author: this.userUsername,
                message: `${type}ed the ${metadataName}`
            })
            this.hearthToShowLogs = this.hearthLogs

            if (type === 'fill') {
                this.hearthLeftInputs[index].value = 100
            } else if (type === "drain") {
                this.hearthLeftInputs[index].value = 0
            } else {
                this.hearthLeftInputs[index].value = "An error appeared."

                setTimeout(() => {
                    this.hearthLeftInputs[index].value = this.hearthLeftInputs[index].realValue
                }, 1000)
            }
        },

        moneyEditValues: async function(id, event) {
            const findIndex = this.moneyLeftInputs.findIndex(w => w.class === id)
            if (findIndex === -1) return console.log("Not found.")
            
            if (this.moneyLeftInputs[findIndex].editing === false) {
                this.moneyLeftInputs[findIndex].value = this.moneyLeftInputs[findIndex].realValue
            } else {
                const newValue = document.getElementById("Money"+id)
                if (String(newValue.value) === String(this.moneyLeftInputs[findIndex].value)) {
                    this.moneyLeftInputs[findIndex].value = parseInt(newValue.value).toLocaleString() + `${id.includes("Crypto") ? "" : "$"}`
                    this.moneyLeftInputs[findIndex].realValue = parseInt(newValue.value)
                    this.moneyLeftInputs[findIndex].editing = !this.moneyLeftInputs[findIndex].editing
                    return
                }

                const CashType = id.split("Input")[0]
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changePlayerMoneys.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        newValue: newValue.value,
                        playerId: this.selectedPlayer.id,
                        type: CashType,
                        job: this.selectedPlayer.jobNameAndGrade.split(" - ")[0],
                        uid: this.selectedPlayer.uid,
                        oldValue: this.moneyLeftInputs[findIndex].realValue
                    })
                })
                result = await result.json()
                if (result.code !== 200) {
                    const editButton = event.target
                    console.log(editButton.style)
                    editButton.style.pointerEvents = "none"
                    this.moneyLeftInputs[findIndex].value = result.message
                    this.moneyLeftInputs[findIndex].editing = !this.moneyLeftInputs[findIndex].editing
                    setTimeout(() => {
                        this.moneyLeftInputs[findIndex].value = this.moneyLeftInputs[findIndex].realValue.toLocaleString()+"$"
                        editButton.style.pointerEvents = ""
                    }, 1000)
                    return
                }

                if (CashType.toLowerCase() === "bank" || CashType.toLowerCase() === "cash" || CashType.toLowerCase() === "crypto") {
                    this.selectedPlayer.money[CashType.toLowerCase()] = Number(newValue.value)
                } else if (CashType.toLowerCase() === "blackmoney") {
                    this.selectedPlayer.blackMoneyCount = Number(newValue.value)
                } else if (CashType.toLowerCase() === "society") {
                    this.selectedPlayer.societyMoney = Number(newValue.value)
                }

                let logMessage = ""

                if (Number(newValue.value) > Number(this.moneyLeftInputs[findIndex].realValue)) {
                    logMessage = `added ${Number(newValue.value) - Number(this.moneyLeftInputs[findIndex].realValue)}${id.split("Input")[0].toLowerCase() !== "crypto" ? "$" : ""} as ${id.split("Input")[0].toLowerCase()}`
                } else if (Number(newValue.value) < Number(this.moneyLeftInputs[findIndex].realValue)) {
                    logMessage = `removed ${Number(this.moneyLeftInputs[findIndex].realValue) - Number(newValue.value)}${id.split("Input")[0].toLowerCase() !== "crypto" ? "$" : ""} as ${id.split("Input")[0].toLowerCase()}`
                }

                this.moneyLogs.unshift({
                    date: moment(Date.now()).format("DD.MM.YYYY HH:mm"),
                    author: this.userUsername,
                    message: logMessage
                })

                this.moneyLeftInputs[findIndex].value = parseInt(newValue.value).toLocaleString() + `${id.includes("Crypto") ? "" : "$"}`
                this.moneyLeftInputs[findIndex].realValue = parseInt(newValue.value)
            }

            this.moneyLeftInputs[findIndex].editing = !this.moneyLeftInputs[findIndex].editing
        },

        addVehicleToPlayer: async function() {
            const [
                hashInput,
                plateInput,
                garageInput
            ] = [
                document.getElementById("newCarHashInput"),
                document.getElementById("newCarPlateInput"),
                document.getElementById("newCarGarageInput")
            ]
            if (hashInput.value === "") {
                hashInput.value = "Please fill blanks."
                hashInput.style.pointerEvents = "none"
                setTimeout(() => {
                    hashInput.value = ""
                    hashInput.style.pointerEvents = ""
                }, 1500)
            }

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/giveVehicleToPlayer.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    license: this.selectedPlayer.rockstarLicense,
                    uid: this.selectedPlayer.uid,
                    modelName: hashInput.value,
                    plate: plateInput.value,
                    garage: garageInput.value
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                const oldValue = hashInput.value
                hashInput.value = result.message
                hashInput.style.pointerEvents = "none"
                setTimeout(() => {
                    hashInput.value = oldValue
                    hashInput.style.pointerEvents = ""
                }, 1500)
            } else {
                this.playerVehicles.splice(0, 0, result.message)
                this.carAddingNewCar = false
                this.changePage("car")
            }
        },

        changeVehicleHash: async function() {
            const inputCredits = this.showingVehicleLeftInputs.find(w => w.class === "hash")

            if (inputCredits.editing === false) {
                if (this.selectedVehicle.status === 0) {
                    document.getElementById("cinfo-input-content").style.pointerEvents = "none"
                    const oldValue = inputCredits.value
                    inputCredits.value = "Vehicle need to be in garage."
                    setTimeout(() => {
                        inputCredits.value = oldValue
                        document.getElementById("cinfo-input-content").style.pointerEvents = ""
                    }, 1000)
                    return
                }

                const newValue = inputCredits.value
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeVehicleHash.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        modelName: newValue,
                        plate: this.selectedVehicle.plate
                    })
                })
                result = await result.json()
                if (result.code !== 200) {
                    document.getElementById("cinfo-input-content").style.pointerEvents = "none"
                    const oldValue = this.selectedVehicle.name
                    inputCredits.value = result.message
                    setTimeout(() => {
                        inputCredits.value = oldValue
                        document.getElementById("cinfo-input-content").style.pointerEvents = ""
                    }, 1000)
                    return
                }

                [ 
                    this.selectedVehicle.brand,
                    this.selectedVehicle.label,
                    this.selectedVehicle.price,
                    this.selectedVehicle.name,
                    this.selectedVehicle.bought
                ] = [ 
                    result.message.brand,
                    result.message.label,
                    result.message.price,
                    result.message.name,
                    result.message.bought
                ]
                
                this.showingVehicleLeftInputs[2].value = result.message.brand + " " + result.message.label
                this.showingVehicleLeftInputs[6].value = "$ "+parseInt(result.message.price).toLocaleString()
                this.showingVehicleLeftInputs[4].value = result.message.bought
            }
        },

        changeVehiclePlate: async function () {
            const inputCredits = this.showingVehicleLeftInputs.find(w => w.class === "plate")

            if (inputCredits.editing === false) {
                if (this.selectedVehicle.status === 0) {
                    document.getElementById("cinfo-input-content").style.pointerEvents = "none"
                    const oldValue = inputCredits.value
                    inputCredits.value = "Vehicle need to be in garage."
                    setTimeout(() => {
                        inputCredits.value = oldValue
                        document.getElementById("cinfo-input-content").style.pointerEvents = ""
                    }, 1000)
                    return
                }

                const newValue = inputCredits.value
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeVehiclePlate.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        newPlate: newValue,
                        plate: this.selectedVehicle.plate
                    })
                })
                result = await result.json()
                if (result.code !== 200) {
                    document.getElementById("cinfo-input-content").style.pointerEvents = "none"
                    const oldValue = this.selectedVehicle.plate
                    inputCredits.value = result.message
                    setTimeout(() => {
                        inputCredits.value = oldValue
                        document.getElementById("cinfo-input-content").style.pointerEvents = ""
                    }, 1000)
                    return
                }

                this.selectedVehicle.plate = newValue
            }
        },

        changeVehicleOwner: async function() {
            const inputCredits = this.showingVehicleRightInputs.find(w => w.class === "changeowner")

            if (inputCredits.editing === false) {
                if (this.selectedVehicle.status === 0) {
                    document.getElementById("cinfo-input-content").style.pointerEvents = "none"
                    const oldValue = inputCredits.value
                    inputCredits.value = "Vehicle need to be in garage."
                    setTimeout(() => {
                        inputCredits.value = oldValue
                        document.getElementById("cinfo-input-content").style.pointerEvents = ""
                    }, 1000)
                    return
                }

                const newValue = inputCredits.value
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeVehicleOwner.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        newUid: newValue,
                        plate: this.selectedVehicle.plate
                    })
                })
                result = await result.json()
                if (result.code !== 200) {
                    document.getElementById("cinfo-input-content").style.pointerEvents = "none"
                    const oldValue = this.selectedPlayer.uid
                    inputCredits.value = result.message
                    setTimeout(() => {
                        inputCredits.value = oldValue
                        document.getElementById("cinfo-input-content").style.pointerEvents = ""
                    }, 1000)
                    return
                }

                const selectedVehicleIndex = this.playerVehicles.findIndex(w => w.plate === this.selectedVehicle.plate)
                this.playerVehicles.splice(selectedVehicleIndex, 1)
            }
        },

        repairVehicle: async function() {
            console.log("Reapir")
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/repairVehicle.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    plate: this.selectedVehicle.plate
                })
            })
            result = await result.json()
            if (result.code !== 200) return console.log(result.message)
            this.showingVehicleRightInputs[4].value = "100%"
            this.showingVehicleRightInputs[5].value = "100%"
        },

        despawnVehicle: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/despawnVehicle.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    plate: this.selectedVehicle.plate
                })
            })
            result = await result.json()
        },

        changeFuelLevel: async function() {
            const inputCredits = this.showingVehicleRightInputs.find(w => w.class === "fuel")

            if (inputCredits.editing === false) {
                const newValue = inputCredits.value
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeVehicleFuelLevel.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        plate: this.selectedVehicle.plate,
                        newLevel: newValue,
                        playerId: this.selectedPlayer.id
                    })
                })
                result = await result.json()
                if (result.code !== 200) {
                    document.getElementById("cinfo-input-content").style.pointerEvents = "none"
                    const oldValue = this.selectedPlayer.uid
                    inputCredits.value = result.message
                    setTimeout(() => {
                        inputCredits.value = oldValue
                        document.getElementById("cinfo-input-content").style.pointerEvents = ""
                    }, 1000)
                    return
                }

                inputCredits.value = newValue + "%"
            } else {
                inputCredits.value = inputCredits.value.split("%")[0]
            }
        },

        changeVehicleEngineHealth: async function() {
            const inputCredits = this.showingVehicleRightInputs.find(w => w.class === "engine")

            if (inputCredits.editing === false) {
                const newValue = inputCredits.value
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeVehicleHealth.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        plate: this.selectedVehicle.plate,
                        newLevel: Number(newValue) * 10,
                        type: "Engine"
                    })
                })
                result = await result.json()
                if (result.code !== 200) {
                    document.getElementById("cinfo-input-content").style.pointerEvents = "none"
                    const oldValue = this.selectedPlayer.uid
                    inputCredits.value = result.message
                    setTimeout(() => {
                        inputCredits.value = oldValue
                        document.getElementById("cinfo-input-content").style.pointerEvents = ""
                    }, 1000)
                    return
                }

                inputCredits.value = newValue + "%"
            } else {
                inputCredits.value = inputCredits.value.split("%")[0]
            }
        },

        changeVehicleBodyHealth: async function() {
            const inputCredits = this.showingVehicleRightInputs.find(w => w.class === "body")

            if (inputCredits.editing === false) {
                const newValue = inputCredits.value
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeVehicleHealth.lvorex`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        plate: this.selectedVehicle.plate,
                        newLevel: Number(newValue) * 10,
                        type: "Body"
                    })
                })
                result = await result.json()
                if (result.code !== 200) {
                    document.getElementById("cinfo-input-content").style.pointerEvents = "none"
                    const oldValue = this.selectedPlayer.uid
                    inputCredits.value = result.message
                    setTimeout(() => {
                        inputCredits.value = oldValue
                        document.getElementById("cinfo-input-content").style.pointerEvents = ""
                    }, 1000)
                    return
                }

                inputCredits.value = newValue + "%"
            } else {
                inputCredits.value = inputCredits.value.split("%")[0]
            }
        },

        deleteVehicle: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/deleteVehicle.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    plate: this.selectedVehicle.plate
                })
            })
            result = await result.json()
            if (result.code === 200) {
                const vehicleIndex = this.playerVehicles.findIndex(w => w.plate === this.selectedVehicle.plate)
                this.playerVehicles.splice(vehicleIndex, 1)
                this.selectedVehicle = undefined
                this.showingVehicleInfo = false
                return
            }
        },

        selectVehicle: async function(plate) {
            this.showingVehiclePlate = plate
            const selectedVehicle = this.playerVehicles.find(w => w.plate === plate)
            if (!selectedVehicle) return
            this.selectedVehicle = selectedVehicle

            this.showingVehicleLeftInputs = [
                { title: "Vehicle Hash", class: 'hash', value: selectedVehicle.name, background: "CInfoHashInputBg.png", editingValue: "", editing: false, editable: true, onclicked: this.changeVehicleHash },
                { title: "Vehicle Plate", class: 'plate', value: selectedVehicle.plate, background: "CInfoPlateInputBg.png", editingValue: "", editing: false, editable: true, onclicked: this.changeVehiclePlate },
                { title: "Vehicle Model", class: 'model', value: selectedVehicle.brand + " " + selectedVehicle.label, background: "CInfoModelInputBg.png", editingValue: "", editing: false, editable: false },
                { title: "Vehicle Location", class: 'location', value: selectedVehicle.storedIn, background: "CInfoLocationInputBg.png", editingValue: "", editing: false, editable: false },
                { title: "Granted From", class: 'granted', value: selectedVehicle.bought, background: "CInfoGrantedInputBg.png", editingValue: "", editing: false, editable: false },
                { title: "KM Spent", class: 'km', value: parseInt((Number(selectedVehicle.km) / 1000)).toLocaleString() + " km", background: "CInfoKMInputBg.png", editingValue: "", editing: false, editable: false },
                { title: "Price", class: 'price', value: "$ "+Number(selectedVehicle.price).toLocaleString(), background: "CInfoPriceInputBg.png", editingValue: "", editing: false, editable: false },
            ]

            this.showingVehicleRightInputs = [
                { title: "Change Owner", class: "changeowner", value: this.selectedPlayer.uid, background: "CInfoChangeOwnerInputBg.png", editingValue: "", editing: false, editable: true, onclicked: this.changeVehicleOwner },
                { title: "Repair Vehicle", class: "repair", value: "Repair Vehicle", background: "CInfoRepairVehicleInputBg.png", editingValue: "", editing: false, editable: false, onclicked: this.repairVehicle /* function without paranteses */ },
                { title: "Despawn Vehicle", class: "despawn", value: "Despawn Vehicle", background: "CInfoDespawnInputBg.png", editingValue: "", editing: false, editable: false, onclicked: this.despawnVehicle /* function */ },
                { title: "Vehicle Fuel", class: "fuel", value: `${selectedVehicle.fuelLevel}%`, background: "CInfoFuelInputBg.png", editingValue: "", editing: false, editable: true, onclicked: this.changeFuelLevel },
                { title: "Vehicle Engine Health", class: "engine", value: `${selectedVehicle.engineHealth}%`, background: "CInfoEngineInputBg.png", editingValue: "", editing: false, editable: true, onclicked: this.changeVehicleEngineHealth },
                { title: "Vehicle Body Health", class: "body", value: `${selectedVehicle.bodyHealth}%`, background: "CInfoBodyHealthInputBg.png", editingValue: "", editing: false, editable: true, onclicked: this.changeVehicleBodyHealth },
                { title: "Delete Vehicle", class: "deleteveh", value: "Delete Vehicle", background: "CInfoDeleteVehicleInputBg.png", editingValue: "", editing: false, editable: false, onclicked: this.deleteVehicle }
            ]

            this.showingVehicleInfo = true
        },

        cinfoEditValue: async function(id, event, position) {
            if (position === "right") {
                this.showingVehicleRightInputs.find(w => w.class === id).editing = !this.showingVehicleRightInputs.find(w => w.class === id).editing
            } else {
                this.showingVehicleLeftInputs.find(w => w.class === id).editing = !this.showingVehicleLeftInputs.find(w => w.class === id).editing
            }
        },

        reviveOrHealPlayer: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/reviveOrHealPlayer.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.newNotify = {
                    desc: result.message,
                    author: "System"
                }
                return
            }
        },

        killPlayer: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/killPlayer.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.newNotify = {
                    desc: result.message,
                    author: "System"
                }
                return
            }
        },

        openPedMenu: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/openPedMenu.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.newNotify = {
                    desc: result.message,
                    author: "System"
                }
                return
            }
        },

        freezePlayer: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/freezePlayer.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.newNotify = {
                    desc: result.message,
                    author: "System"
                }
                return
            }
        },

        PMPopupFunction: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/sendPMToPlayer.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid,
                    message: this.playerActionsPopUp.inputValue
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.playerActionsPopUp.inputValue = result.message
                setTimeout(() => {
                    this.playerActionsPopUp.inputValue = ""
                }, 1000)
                return
            }
            this.playerActionsPopUp = undefined
        },

        openPMPopup: function() {
            this.playerActionsPopUp = {
                title: "Send PM",
                inputPlaceHolder: "Your message to player...",
                inputValue: "",
                isInputSingle: true,
    
                background: "PActionsPopupSendPMBg",
    
                buttonName: "Send",
                buttonColor: "#9210FA",
                buttonFunction: this.PMPopupFunction
            }
        },

        WarnPopupFunction: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/warnPlayerAction.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid,
                    message: this.playerActionsPopUp.inputValue,
                    staff: this.userRank.title+" - "+this.userUsername
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.playerActionsPopUp.inputValue = result.message
                setTimeout(() => {
                    this.playerActionsPopUp.inputValue = ""
                }, 1000)
                return
            }
            this.playerActionsPopUp = undefined
        },

        openWarnPopup: function() {
            this.playerActionsPopUp = {
                title: "Warn Player",
                inputPlaceHolder: "Description...",
                inputValue: "",
                isInputSingle: true,
    
                background: "PActionsPopupWarnBg",
    
                buttonName: "Warn",
                buttonColor: "#FF906F",
                buttonFunction: this.WarnPopupFunction,
            }
        },

        KickPopupFunction: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/kickPlayerAction.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid,
                    message: this.playerActionsPopUp.inputValue,
                    staff: this.userRank.title+" - "+this.userUsername
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.playerActionsPopUp.inputValue = result.message
                setTimeout(() => {
                    this.playerActionsPopUp.inputValue = ""
                }, 1000)
                return
            }
            this.playerActionsPopUp = undefined
        },

        openKickPopup: function() {
            this.playerActionsPopUp = {
                title: "Kick Player",
                inputPlaceHolder: "Description...",
                inputValue: "",
                isInputSingle: true,
    
                background: "PActionsPopupKickBg",
    
                buttonName: "Kick",
                buttonColor: "#FFAF65",
                buttonFunction: this.KickPopupFunction,
            }
        },

        AdminJailPopupFunction: async function() {
            let selectedTimeButton = this.playerActionsPopUp.timeSelectors.find(s => s.active === true)
            if (!selectedTimeButton) {
                this.playerActionsPopUp.timeInputs.forEach(i => {
                    let carpan = 0
                    if (i.value === "") return
                    if (i.title === "Day") carpan = 60*24
                    if (i.title === "Hour") carpan = 60
                    if (i.title === "Min") carpan = 1
                    if (!selectedTimeButton) {
                        selectedTimeButton = parseInt(i.value) * carpan
                    } else {
                        selectedTimeButton = parseInt(i.value) * carpan + selectedTimeButton
                    }
                })
            } else {
                selectedTimeButton = selectedTimeButton.value / 1000 / 60
            }

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/jailPlayerAction.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid,
                    jailTime: selectedTimeButton,
                    reason: this.playerActionsPopUp.inputValue,
                    staff: this.userRank.title+" - "+this.userUsername
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.playerActionsPopUp.inputValue = result.message
                setTimeout(() => {
                    this.playerActionsPopUp.inputValue = ""
                }, 1000)
                return
            }
            
            this.playerActionsPopUp = undefined
        },

        openAdminJailPopup: function() {
            this.playerActionsPopUp = {
                title: "Admin Jail Player",
                inputPlaceHolder: "Description...",
                inputValue: "",
                isInputSingle: false,
    
                background: "PActionsPopupAdminJailBg",
    
                buttonName: "Admin Jail",
                buttonColor: "#2E8C75",
                buttonFunction: this.AdminJailPopupFunction,
                
                timeSelectorActiveColor: "rgba(46, 140, 117, 0.40)",
                timeSelectors: [
                    { title: "10mn", value: 10*1000*60, hovering: false, active: false },
                    { title: "30mn", value: 30*1000*60, hovering: false, active: false },
                    { title: "40mn", value: 40*1000*60, hovering: false, active: false },
                    { title: "1hr", value: 1*1000*60*60, hovering: false, active: false },
                    { title: "12hr", value: 12*1000*60*60, hovering: false, active: false },
                    { title: "24hr", value: 24*1000*60*60, hovering: false, active: false },
                ],
                timeInputs: [
                    { title: "Day", clicked: false, value: "" },
                    { title: "Hour", clicked: false, value: "" },
                    { title: "Min", clicked: false, value: "" }
                ]
            }
        },

        BanPopupFunction: async function() {
            let selectedTimeButton = this.playerActionsPopUp.timeSelectors.find(s => s.active === true)
            if (!selectedTimeButton) {
                this.playerActionsPopUp.timeInputs.forEach(i => {
                    let carpan = 0
                    if (i.value === "") return
                    if (i.title === "Day") carpan = 1000*60*60*24
                    if (i.title === "Hour") carpan = 1000*60*60
                    if (i.title === "Min") carpan = 1000*60
                    if (!selectedTimeButton) {
                        selectedTimeButton = parseInt(i.value) * carpan
                    } else {
                        selectedTimeButton = parseInt(i.value) * carpan + selectedTimeButton
                    }
                })
            } else {
                selectedTimeButton = selectedTimeButton.value
            }

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/banPlayerAction.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid,
                    message: this.playerActionsPopUp.inputValue,
                    banTime: selectedTimeButton,
                    type: "temp",
                    license: this.selectedPlayer.rockstarLicense === 'Not Found.' ? 'undefined' : this.selectedPlayer.rockstarLicense,
                    discord: this.selectedPlayer.discordId === 'Not Found.' ? 'undefined' : this.selectedPlayer.discordId,
                    steam: this.selectedPlayer.steamId === 'Not Found.' ? 'undefined' : this.selectedPlayer.steamId,
                    name: this.selectedPlayer.name,
                    bannedBy: this.userRank.title+" - "+this.userUsername
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.playerActionsPopUp.inputValue = result.message
                setTimeout(() => {
                    this.playerActionsPopUp.inputValue = ""
                }, 1000)
                return
            }
            this.playerActionsPopUp = undefined
        },

        openBanPopup: function() {
            this.playerActionsPopUp = {
                title: "Ban Player",
                inputPlaceHolder: "Description...",
                inputValue: "",
                isInputSingle: false,
    
                background: "PActionsPopupBanBg",
    
                buttonName: "Ban",
                buttonColor: "#FF4949",
                buttonFunction: this.BanPopupFunction,
                
                timeSelectorActiveColor: "rgba(255, 73, 73, 0.40)",
                timeSelectors: [
                    { title: "10mn", value: 10*1000*60, hovering: false, active: false },
                    { title: "30mn", value: 30*1000*60, hovering: false, active: false },
                    { title: "40mn", value: 40*1000*60, hovering: false, active: false },
                    { title: "1hr", value: 1*1000*60*60, hovering: false, active: false },
                    { title: "12hr", value: 12*1000*60*60, hovering: false, active: false },
                    { title: "24hr", value: 24*1000*60*60, hovering: false, active: false },
                ],
                timeInputs: [
                    { title: "Day", clicked: false, value: "" },
                    { title: "Hour", clicked: false, value: "" },
                    { title: "Min", clicked: false, value: "" }
                ]
            }
        },

        PermaBanPopupFunction: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/banPlayerAction.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid,
                    message: this.playerActionsPopUp.inputValue,
                    banTime: 0,
                    type: "perma",
                    license: this.selectedPlayer.rockstarLicense === 'Not Found.' ? 'undefined' : this.selectedPlayer.rockstarLicense,
                    discord: this.selectedPlayer.discordId === 'Not Found.' ? 'undefined' : this.selectedPlayer.discordId,
                    steam: this.selectedPlayer.steamId === 'Not Found.' ? 'undefined' : this.selectedPlayer.steamId,
                    name: this.selectedPlayer.name,
                    bannedBy: this.userRank.title+" - "+this.userUsername
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.playerActionsPopUp.inputValue = result.message
                setTimeout(() => {
                    this.playerActionsPopUp.inputValue = ""
                }, 1000)
                return
            }
            this.permaBanned = {
                bannedAt: moment(Date.now()).format("DD/MM/YYYY"),
                bannedBy: this.userRank.title+" - "+this.userUsername
            }
            this.playerActionsPopUp = undefined
        },

        openPermaBanPopup: function() {
            this.playerActionsPopUp = {
                title: "Perma Ban Player",
                inputPlaceHolder: "Description...",
                inputValue: "",
                isInputSingle: true,
    
                background: "PActionsPopupPermaBanBg",
    
                buttonName: "Perma Ban",
                buttonColor: "#FD0B09",
                buttonFunction: this.PermaBanPopupFunction,
            }
        },

        unPermaBanPlayerAction: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/unbanPlayerAction.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    license: this.selectedPlayer.rockstarLicense
                })
            })
            result = await result.json()
            if (result.code !== 200) return console.log(result.message)
            
            this.permaBanned = false
        },

        DeleteCharPopupFunction: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/deleteCharAction.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    uid: this.selectedPlayer.uid,
                    license: this.selectedPlayer.rockstarLicense === 'Not Found.' ? 'undefined' : this.selectedPlayer.rockstarLicense,
                    discord: this.selectedPlayer.discordId === 'Not Found.' ? 'undefined' : this.selectedPlayer.discordId,
                    steam: this.selectedPlayer.steamId === 'Not Found.' ? 'undefined' : this.selectedPlayer.steamId,
                    vip: this.vip
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.newNotify = {
                    desc: result.message,
                    author: "System"
                }
                return
            } else {
                location.href = `${location.protocol}//${location.hostname}:${location.port}/Panel/Players`
            }
        }
    },
    mounted: async function() {
        if (!sessionStorage.getItem("uid-key")) {
            location.href = "/"
            return
        }

        const fragment = new URLSearchParams(window.location.hash.slice(1))
        const playerId = fragment.get("uid")
        if (!playerId) return

        let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/controlKeyWithServer.lvorex`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                key: sha1(sessionStorage.getItem("uid-key"))
            })
        })

        result = await result.json()
        if (result.code === 404) {
            location.href = "/"
            return
        }

        const userDetails = JSON.parse(result.message)
        if (userDetails.permissions["Players"][1] === false) {
            location.href = "/Panel/Players"
            return
        }

        const PlayersPermissions = userDetails.permissions["Players"]

        if (PlayersPermissions[8] === false) {
            const uid = this.leftNaviItems.findIndex(i => i.id === "hearth")
            if (uid !== -1) {
                this.leftNaviItems.splice(uid, 1)
            }
        }
        if (PlayersPermissions[10] === false) {
            const uid = this.leftNaviItems.findIndex(i => i.id === "money")
            if (uid !== -1) {
                this.leftNaviItems.splice(uid, 1)
            }
        }
        if (PlayersPermissions[12] === false) {
            const uid = this.leftNaviItems.findIndex(i => i.id === "car")
            if (uid !== -1) {
                this.leftNaviItems.splice(uid, 1)
            }
        }
        if (PlayersPermissions[16] === false) {
            const uid = this.leftNaviItems.findIndex(i => i.id === "inventory")
            if (uid !== -1) {
                this.leftNaviItems.splice(uid, 1)
            }
        }
        if (PlayersPermissions[19] === false) {
            const uid = this.leftNaviItems.findIndex(i => i.id === "logs")
            if (uid !== -1) {
                this.leftNaviItems.splice(uid, 1)
            }
        }

        this.darkMode = userDetails.darkMode === 1 ? true : false
        this.userUsername = userDetails.username
        this.userRank.title = userDetails.rank
        this.userRank.color = "#F34240"
        this.userIcon = userDetails.avatar
        this.accountType = userDetails.accountType
        this.userPermissions = userDetails.permissions

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getSpecificCharacter.lvorex`, {
            method: "POST",
            headers: {
                'Content-Type': "application/json"
            },
            body: JSON.stringify({
                uid: playerId,
                key: sha1(sessionStorage.getItem("uid-key"))
            })
        })
        result = await result.json()
        if (result.code === 404) {
            location.href = "/Panel/Players"
            return
        }

        if (JSON.parse(result.message).identifier === "citizenid") {
            this.framework = "qb"
        } else {
            this.framework = "esx"
        }

        const GeneralInformationGranted = userDetails.permissions["Players"][4]
        const player = JSON.parse(result.message).player
        let UserUID = player[JSON.parse(result.message).identifier]
        let UserRockstarLicense = player.licenseId === "undefined" || !player.licenseId ? "Not Found." : player.licenseId

        if (GeneralInformationGranted) {
            let playerCharinfo = undefined
            let playerJob = undefined
            let playerGang = undefined
            let playerMoney = undefined
            if (this.framework.includes("qb")) {
                playerCharinfo = player.playerStatus === "Online" ? player.charinfo : JSON.parse(player.charinfo)
                playerJob = player.playerStatus === "Online" ? player.job : JSON.parse(player.job)
                playerGang = player.playerStatus === "Online" ? player.gang : JSON.parse(player.gang)
                playerMoney = player.playerStatus === "Online" ? player.money : JSON.parse(player.money)
            }

            let esxMoney
            if (this.framework.includes("esx")) {
                if (player.playerStatus === "Online") {
                    player.accounts.cash = player.accounts.find(a => a.name === "money").money
                    player.accounts.bank = player.accounts.find(a => a.name === "bank").money
                    esxMoney = player.accounts
                } else {
                    const oldAccs = JSON.parse(player.accounts)
                    player.accounts = {
                        cash: oldAccs.money,
                        bank: oldAccs.bank
                    }
                    esxMoney = player.accounts
                }
            }

            let newUser = {}
            // { id: 1, inGameName: "Lvorex Lvorex", name: "Lvorex", job: "police", grade: "LSPD - Officer I", date: "14.06.2023", time: "260h 38mn", male: "Female", status: "Online", icon: "https://cdn.discordapp.com/icons/790686655430393868/a_3199ef6663eb0a46c022f8dc99584238?size=128", admin: 1 },
            newUser.id = player.playerId
            newUser.steamId = player.steamId === "undefined" || !player.steamId ? "Not Found." : player.steamId
            newUser.discordId = player.discordId === "undefined" || !player.discordId ? "Not Found." : player.discordId
            newUser.rockstarLicense = player.licenseId === "undefined" || !player.licenseId ? "Not Found." : player.licenseId
            newUser.inGameName = JSON.parse(result.message).identifier === "citizenid" ? `${playerCharinfo.firstname} ${playerCharinfo.lastname}` : `${player.firstname} ${player.lastname}`
            newUser.name = JSON.parse(result.message).identifier === "citizenid" ? player.name : `${player.firstname} ${player.lastname}`
            newUser.job = JSON.parse(result.message).identifier === "citizenid" ? playerJob.label+" - "+playerJob.grade.name : player.job.label+" - "+player.job.grade_label
            newUser.jobNameAndGrade = JSON.parse(result.message).identifier === "citizenid" ? playerJob.name+" - "+playerJob.grade.level : player.job.name+" - "+player.job.grade
            newUser.grade =  JSON.parse(result.message).identifier === "citizenid" ? playerJob.label + " - " + playerJob.grade.name : player.job.name + " - " + player.job.grade
            newUser.date =  JSON.parse(result.message).identifier === "citizenid" ? moment(playerCharinfo.birthdate).format("DD.MM.YYYY") : moment(player.dateofbirth).format("DD.MM.YYYY")
            newUser.time = player.onlineTime ?? "Not detected."
            newUser.male = JSON.parse(result.message).identifier === "citizenid" ? playerCharinfo.gender === 0 ? "Male" : "Female" : player.sex === "m" ? "Male" : "Female"
            newUser.status = player.playerStatus
            newUser.admin = player.admin !== 0 ? 1 : 0
            newUser.icon = player.playerAvatar ?? "img/DefaultIcon.png"
            newUser.faction = JSON.parse(result.message).identifier === "citizenid" ? playerGang.label + " - " + playerGang.grade.name : "Faction Disabled"
            newUser.factionNameAndGrade = JSON.parse(result.message).identifier === "citizenid" ? playerGang.name + " - " + playerGang.grade.level : "Faction Disabled"
            newUser.nationality = JSON.parse(result.message).identifier === "citizenid" ? playerCharinfo.nationality : "Not Selected"
            newUser.created_at = JSON.parse(result.message).identifier === "citizenid" ? moment(player.last_updated).format("DD.MM.YYYY") : moment(player.created_at).format("DD.MM.YYYY")
            newUser.phone = JSON.parse(result.message).identifier === "citizenid" ? playerCharinfo.phone : player.phone_number ?? "Not Found."
            newUser.uid = player[JSON.parse(result.message).identifier]
            newUser.money = JSON.parse(result.message).identifier === "citizenid" ? playerMoney : esxMoney
            newUser.blackMoneyCount = player.blackMoneyCount
            console.log(player.societyMoney)
            newUser.societyMoney = player.societyMoney
            this.selectedPlayer = newUser
        } else {
            this.selectedPlayer = {
                id: player.playerId,
                rockstarLicense: player.licenseId === "undefined" || !player.licenseId ? "Not Found." : player.licenseId,
                inGameName: player.fullName,
                admin: player.admin !== 0 ? 1 : 0,
                icon: player.playerAvatar ?? "img/DefaultIcon.png",
                uid: player[JSON.parse(result.message).identifier],
                status: player.playerStatus,

                authorized: false
            }
        }

        /* Player Actions Start */

        this.playerInGameActions = [
            { title: "Revive", background: "PActionsReviveBg", function: this.reviveOrHealPlayer },
            { title: "Heal", background: "PActionsHealBg", function: this.reviveOrHealPlayer },
            { title: "Kill", background: "PActionsKillBg", function: this.killPlayer },
            { title: "Freeze", background: "PActionsFreezeBg", function: this.freezePlayer },
            { title: "PM", background: "PActionsPMBg", function: this.openPMPopup },
            { title: "PED Menu", background: "PActionsPedMenuBg", function: this.openPedMenu },
        ]

        this.playerOtherActions = [
            { title: "Warn", background: "PActionsWarnBg", function: this.openWarnPopup },
            { title: "Kick", background: "PActionsKickBg", function: this.openKickPopup },
            { title: "Admin Jail", background: "PActionsAdminJailBg", function: this.openAdminJailPopup },
            { title: "Ban", background: "PActionsBanBg", function: this.openBanPopup },
            { title: "Perma Ban", background: "PActionsPermaBanBg", function: this.openPermaBanPopup },
            { title: "Delete Char", background: "PActionsDeleteCharBg", function: this.DeleteCharPopupFunction },
        ]

        /* Player Actions End */

        if (GeneralInformationGranted) {
            this.rightInputs = [
                { title: "Character ID", value: this.selectedPlayer.id, class: "characterId", editing: false, editable: false },
                { title: "Character Name", value: this.selectedPlayer.inGameName, class: "characterName", editing: false, editable: true  },
                { title: "Gender", value: this.selectedPlayer.male, class: "genderInput", editing: false, editable: true  },
                { title: "Birthday", value: this.selectedPlayer.date, class: "birthdayInput", editing: false, editable: true  },
                { title: "Nationality", value: this.selectedPlayer.nationality, class: "nationalityInput", editing: false, editable: true  },
                { title: "Phone Number", value: this.selectedPlayer.phone, class: "phoneInput", editing: false, editable: true  },
            ]
            
            this.leftDownInputs = [
                { title: "Job", editing: false, value: this.selectedPlayer.job, class: "job" },
                { title: "Faction", editing: false, value: this.selectedPlayer.faction, class: "faction" }
            ]
        }

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getPlayerBanStatus.lvorex`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                key: sha1(sessionStorage.getItem("uid-key")),
                uid: UserUID,
                license: UserRockstarLicense.split(":")[1]
            })
        })
        result = await result.json()
        if (result.code === 404) { this.banned = false }
        if (!result.message) { this.banned = false }
        if (result.message && result.code === 200) {
            this.permaBanned = {
                bannedAt: result.message.bannedAt,
                bannedBy: result.message.bannedBy
            }
        }

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/controlUserVIPStatus.lvorex`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                uid: UserUID,
                key: sha1(sessionStorage.getItem("uid-key"))
            })
        })

        result = await result.json()
        if (result.code === 404) {
            this.vip = false
        } else {
            this.vip = true
        }

        const SearchParamQuery = new URLSearchParams(window.location.search)
        const vehiclePlate = SearchParamQuery.get("vehicle")
        if (vehiclePlate) {
            await this.changePage("car")
            await this.selectVehicle(vehiclePlate)
        }

        setTimeout(() => {
            document.getElementById("loading-container").style.opacity = 0
        }, 300)

        document.getElementById("panel-content").style.backgroundImage = `url(../../../img/panel${this.darkMode === true ? "Dark" : "Light"}ModePlayers.png)`
    },
})