var navbarComp = {
    props: ["homehref", "loginhref", "rightbutton", "colorofbutton"],
    methods: {
        MainPage: function() {
            if (location.pathname.includes("/Panel/")) {
                if (location.pathname === "/Panel/Dashboard/") return
                location.href = "/Panel/Dashboard/"
            } else {
                if (location.pathname === "/home/") return
                location.href = "/"
            }
        }
    },
    template: `
    <div id="navbar-container">
        <div id="footer-container">
          <p>COPYRIGHT © 2024 - 2025 CodeM, All rights Reserved</p>
        </div>
        <div id="navbar-logo-container">
            <a @click="MainPage()"><div id="navbar-logo">LVO<br>LVO</div></a>
            <a @click="MainPage()"><div id="navbar-title" class="blue-white-linear">Admin</div></a>
        </div>
        <div id="navbar-pages-container">
            <a href="https://codem.tebex.io/" target="_blank">CodeM</a>
            <a href="https://discord.gg/codem" target="_blank">Discord</a>
            <a href="https://codem.gitbook.io/codem-documentation/m-series/madmin-panel" target="_blank">Docs</a>
            <a :href="loginhref" :class="colorofbutton">{{ rightbutton }}</a>
        </div>
    </div>
    `
}

var leftNavbarComp = {
    props: ["activepage", "innerfolder"],
    data: function() { return {
        DataActivePage: "Not Found",
        ServerItems: [
            { title: "Dashboard", status: false, style: { marginTop: 0 }, href: "/Panel/Dashboard/", activeColor: "#01C9E4" },
            { title: "Players", status: false, href: "/Panel/Players/", activeColor: "#CC39FF" },
            { title: "Accounts", status: false, href: "/Panel/Accounts", activeColor: "#FF6939" },
            { title: "Live Map", status: false, href: "/Panel/LiveMap", activeColor: "#39FF88" },
            { title: "Vehicles", status: false, href: "/Panel/Vehicles", activeColor: "#39FFD0" },
            { title: "Items", status: false, href: "/Panel/Items", activeColor: "#39FF71" },
            { title: "Jobs", status: false, href: "/Panel/Jobs", activeColor: "#90FF39" },
            { title: "Factions", status: false, href: "/Panel/Factions", activeColor: "#D7FF39" },
            { title: "Logs", status: false, href: "/Panel/Logs", activeColor: "#FFC839" }
        ],

        DevelopmentItems: [
            { title: "Live Console", status: false, style: { marginTop: 0 }, href: "/Panel/LiveConsole", activeColor: "#FFD4AC" },
            { title: "Resources", status: false, href: "/Panel/Resources", activeColor: "#FFACAC" },
        ],

        AdministratorItems: [
            { title: "Admins", status: false, style: { marginTop: 0 }, href: "/Panel/Admins", activeColor: "#FF3939" },
            { title: "Management", status: false, href: "/Panel/Management", activeColor: "#FF395D" },
            { title: "Settings", status: false, href: "/Panel/Settings", style: { marginTop: 0 }, activeColor: "#FFFF" }
        ],

        ServerCategory: true,
        DevelopmentCategory: true
    } },

    template: `
    <div id="left-navbar-container">
    <p v-if="ServerCategory" style="margin-left: 2.7778vh; font-size: .6771vw; color: rgba(255, 255, 255, 0.26);">Server</p>
    <div id="navbar-category">
        <a v-for="data in ServerItems" @mouseover="data.status !== 'active' ? data.status = true : ''" @mouseleave="data.status === 'active' ? '' : data.status = false" v-if="data.hidden !== true" @click="changePageHref(data)"><div id="category-item" :class="data.status" :style="data.style">
            <div id="icon" :style="{ opacity: data.status !== false ? '1' : '' }">
                <img class="left-navbar-icon" v-if="data.status === false" :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Inactive.png'"></img>
                <img class="left-navbar-icon" v-else :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Active.png'"></img>
            </div>
            <span :style="{ color: data.status !== false ? data.activeColor : '', opacity: data.status !== false ? '1' : '' }">{{ data.title }}</span>
        </div></a>
    </div>

    <p v-if="DevelopmentCategory" style="margin-left: 2.7778vh; font-size: .6771vw; color: rgba(255, 255, 255, 0.26); margin-top: 2.963vh;">Development</p>
    <div id="navbar-category">
        <a v-for="data in DevelopmentItems" @mouseover="data.status !== 'active' ? data.status = true : ''" @mouseleave="data.status === 'active' ? '' : data.status = false" v-if="data.hidden !== true" @click="changePageHref(data)"><div id="category-item" :class="data.status" :style="data.style">
            <div id="icon" :style="{ opacity: data.status !== false ? '1' : '' }">
                <img class="left-navbar-icon" v-if="data.status === false" :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Inactive.png'"></img>
                <img class="left-navbar-icon" v-else :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Active.png'"></img>
            </div>
            <span :style="{ color: data.status !== false ? data.activeColor : '', opacity: data.status !== false ? '1' : '' }">{{ data.title }}</span>
        </div></a>
    </div>

    <p v-if="AdministratorItems.find(i => i.hidden !== true)" style="margin-left: 2.7778vh; font-size: .6771vw; color: rgba(255, 255, 255, 0.26); margin-top: 2.963vh;">Administrator</p>
    <div id="navbar-category">
        <a v-for="data in AdministratorItems" @mouseover="data.status !== 'active' ? data.status = true : ''" @mouseleave="data.status === 'active' ? '' : data.status = false" v-if="data.hidden !== true" @click="changePageHref(data)"><div id="category-item" :class="data.status" :style="data.style">
            <div id="icon" :style="{ opacity: data.status !== false ? '1' : '' }">
                <img class="left-navbar-icon" v-if="data.status === false" :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Inactive.png'"></img>
                <img class="left-navbar-icon" v-else :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Active.png'"></img>
            </div>
            <span :style="{ color: data.status !== false ? data.activeColor : '', opacity: data.status !== false ? '1' : '' }">{{ data.title }}</span>
        </div></a>
    </div>
    </div>
    `,

    methods: {
        changePageHref: function(pageData) {
            const ActivePage = this._props.activepage
            if (!pageData.title || !ActivePage) return
            if (ActivePage === pageData.title) return
            location.href = pageData.href
        },
    },

    created: async function() {
        this.DataActivePage = this.activepage
        const framework = sessionStorage.getItem("framework")

        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)
        const permissions = userDetails.permissions
        if (this.activepage !== "Settings") {
          if (permissions[this.activepage.replace(' ', '')][0] === false) {
            location.href = "/"
            return
          }
        }

        if (this.activepage === "Factions") {
            if (framework.includes("esx")) {
                location.href = "/"
                return
            }
        }

        let serversCategory = []
        this.ServerItems.forEach(i => {
          const perm = permissions[i.title.replace(' ', '')][0]
          serversCategory.push(perm)
          if (perm === false) {
            i.hidden = true
          }
          if (i.title === "Factions" && framework.includes("esx") && i.hidden !== true) {
            i.hidden = true
          }
        })
        let developmentCategory = []
        this.DevelopmentItems.forEach(i => {
          const perm = permissions[i.title.replace(' ', '')][0]
          developmentCategory.push(perm)
          if (perm === false) {
            i.hidden = true
          }
        })

        if (!serversCategory.find(i => i === true)) {
          this.ServerCategory = false
        }
        if (!developmentCategory.find(i => i === true)) {
          this.DevelopmentCategory = false
        }

        this.AdministratorItems.forEach(i => {
          if (i.title === "Settings") {
            i.hidden = false
            return
          }
          if (permissions[i.title.replace(' ', '')][0] === false) {
            i.hidden = true
          }
        })

        let activePageIndex = null
        let activePageCategory = null
        const categories = [ "ServerItems", "DevelopmentItems", "AdministratorItems" ]
        for (const category of categories) {
            Object.entries(this[category]).forEach(([key, value]) => {
                if (value.title === this.activepage) {
                    activePageIndex = key
                    activePageCategory = category
                }
            })
        }

        if (activePageIndex === null || activePageCategory === null) return
        this[activePageCategory][activePageIndex].status = "active"
    }
}

Vue.component("notify-menu", {
    props: ["notifymenu", "twolayer"],
    data: function() { return{
        notifications: []
    }},
    created: async function() {
        let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getPlayerNotifications.lvorex`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                key: sha1(sessionStorage.getItem("uid-key"))
            })
        })
        result = await result.json()
        if (result.code !== 200) return console.log(result.message)
        this.notifications = result.message
    },
    methods: {
        closeNotifyMenu: function() {
            this.$emit("closenotifymenu")
        },

        clearNotifications: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/clearAllUserNotifications.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key"))
                })
            })
            result = await result.json()
            if (result.code !== 200) return console.log(result.message)
            this.notifications = []
        }
    },
    template: `
    <div id="notifies-menu-container" v-if="notifymenu">
    <div id="notify-menu-header">
        <img :src="twolayer ? '../../../img/notifyIcon.png' : '../../img/notifyIcon.png'" class="bell" alt="notifyIcon">
        <span>Notification Center</span>
        <img :src="twolayer ? '../../../img/cancelImg.png' : '../../img/cancelImg.png'" class="cancel" alt="cancelIcon" @click="closeNotifyMenu()">
    </div>
    <div id="notify-menu-line"></div>

    <div id="notify-menu-notifies">
        <div id="notify-menu-item" v-for="data in notifications">
            <div id="notify-item-header">
                <img :src="twolayer ? '../../../img/notifyIcon.png' : '../../img/notifyIcon.png'" alt="notifyIcon">
                <span>Notification</span>
            </div>
            <span class="notify-content">{{ data.desc+' by '+data.author }}</span>
        </div>
    </div>

    <div id="notify-menu-line" style="margin-top: 0.9259vh;"></div>
    <div id="notify-menu-bottom">
        <span @click="clearNotifications()">Delete All</span>
    </div>
    </div>
    `
})

Vue.component("new-notify", {
    props: ["newnotify", "twolayer"],
    data: {},
    methods: {
        closeMenu: function() {
            this.$emit("closenewnotify")
        }
    },
    template: `
    <transition name="newnotify">
    <div id="new-notify-container" v-if="newnotify">
    <div id="new-notify-header">
        <img :src="twolayer ? '../../../img/notifyIcon.png' : '../../img/notifyIcon.png'" class="notifyIcon" alt="notifyIcon">
        <span>New Notification</span>
        <img :src="twolayer ? '../../../img/cancelImg.png' : '../../img/cancelImg.png'" class="cancelIcon" alt="cancelIcon" @click="closeMenu()">
    </div>
    <span class="desc">{{ newnotify.author ? newnotify.desc+' by '+newnotify.author : newnotify.desc }}</span>
    </div>
    </transition>
    `
})