<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script src="https://kit.fontawesome.com/7e96728d03.js" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="premium-shop" v-show="active">
            <div class="fade-by-scale">
                <div>
                    <div>
                        <img src="logo.png" />
                        <div>
                            <span>IMPULSE SHOP</span>
                            <span>Descoperiți colecții exclusive, produse de calitate superioară și oferte speciale. </span>
                        </div>
                        <button>+ ADD FUNDS</button>
                    </div>
                    <div class="categories">
                        <button
                            v-for="(item, index) in categories"
                            :key="item.name"
                            :class="{selected: selectedCategory.name === item.name}"
                            @click="selectCategory(item)"
                        >{{ item.name }}</button>
                    </div>
                </div>
                <div>
                    <img src="crown.png" />
                    <span>{{ coins }} <span style="color: #FFFFFF40;">DMD</span></span>
                    <img src="exit.png" />
                </div>
            </div>
            <div v-if="selectedCategory.name === 'VIP'" class="fade-by-scale content vip">
                <div v-for="(item, index) in selectedCategory.data">
                    <div>
                        <img src="silver.png" />
                        <div>
                            <span>{{ item.name }}</span>
                            <span>{{ item.price }} COINS</span>
                        </div>
                    </div>
                    <div class="details">
                        <div v-for="(item, index) in item.details">
                            <img src="check.svg" />
                            <span>{{ item }}</span>
                        </div>
                    </div>
                    <button
                        @click="buyProduct(item.name, item.price)"
                        :class="{disabled: item.canBuy === false}"
                    >
                        <i class="fa-regular fa-bag-shopping"></i>
                    </button>
                </div>
            </div>
            <div v-if="selectedCategory.name === 'MASINI'" class="fade-by-scale content cars">
                <div v-for="(item, index) in selectedCategory.data">
                    <div>
                        <span>{{ item.name }}</span>
                        <span>{{ item.price }} COINS</span>
                    </div>
                    <button
                        @click="buyProduct(item.name, item.price, item.spawnCode)"
                        :class="{disabled: item.canBuy === false}"
                    >
                        <i class="fa-regular fa-bag-shopping"></i>
                    </button>
                    <img src="undercar.png" />
                    <img :src="item.image" />
                </div>
            </div>
        </div>

        <script src="js.js"></script>
        <script src="css.js"></script>
    </body>
</html>