<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Gun Shop</title>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
</head>
<body>
    <div class="BackgRoundGunShop" style="display: none;">
        <div class="BorderSS"></div>
        <img id="closeButton" class="bount" src="img/378586983.png" alt="">
        <img class="Server-Logo" src="https://media.discordapp.net/attachments/1068879772773531748/1271226933476331601/2.gif?ex=66b73a97&is=66b5e917&hm=595d59b68325a01d011d5ce8aadda3f7b8c30d47ef32cc203b64c0bb625cd2fc&=" alt="">

        <div class="Player-Cash-Bank">
            <span class="Player-Cash"><i class="fas fa-wallet"></i> 0$</span> | 
            <span class="Player-Bank"><i class="fas fa-piggy-bank"></i> 0$</span>
        </div>
        
        <div class="Server-Name">Conker Town</div>

        <div id="items-container" class="items-container"></div>

        <div class="modify" onclick="openModifyMenu()"> 
            <i class="fas fa-tools"></i> تعديلات السلاح
        </div>



        <input id="search-input" type="text" name="text" class="input" placeholder="...للبحث عن سلاح">
        <div id="error-message" class="error-message" style="display: none; color: rgb(121, 10, 10);">لا يوجد سلاح بهذا الاسم</div>





        
    </div>


    <script>
   document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('message', function(event) {
        if (event.data.type === 'updateMoney') {
            document.querySelector('.Player-Cash').innerHTML = `<i class="fas fa-wallet"></i> ${event.data.cash}$`;
            document.querySelector('.Player-Bank').innerHTML = `<i class="fas fa-piggy-bank"></i> ${event.data.bank}$`;
        } else if (event.data.type === 'show') {
            const itemsContainer = document.getElementById('items-container');
            itemsContainer.innerHTML = '';

            document.querySelector('.Server-Name').textContent = event.data.serverName;
            document.querySelector('.Server-Logo').src = event.data.serverLogo;

            event.data.items.forEach(weapon => {
                const item = document.createElement('div');
                item.classList.add('item');
                item.dataset.name = weapon.name.toLowerCase();

                item.innerHTML = `
                    <img src="img/${weapon.img}" class="img">
                    <div class="border"></div>
                    <div class="script_item_info">${weapon.name}</div>
                    <div class="buy" onclick="buyWeapon('${weapon.name}', ${weapon.price}, 'img/${weapon.img}')">شراء</div>
                    <div class="buyAmount" onclick="buyAmmo('${weapon.name}', ${weapon.ammoPrice}, ${weapon.max})">شراء ذخيرة</div>
                    <div class="theprice">${weapon.price}$</div>
                `;

                itemsContainer.appendChild(item);
            });
            document.querySelector('.BackgRoundGunShop').style.display = 'block';
        }
    });
});

document.getElementById('search-input').addEventListener('input', function() {
    const searchValue = this.value.toLowerCase();
    const items = document.querySelectorAll('#items-container .item');
    const errorMessage = document.getElementById('error-message');
    const searchInput = document.getElementById('search-input');
    let itemFound = false;

    items.forEach(item => {
        const itemName = item.dataset.name;
        if (itemName.includes(searchValue)) {
            item.style.display = '';
            itemFound = true;
        } else {
            item.style.display = 'none';
        }
    });

    if (!itemFound) {
        errorMessage.style.display = 'block';
        searchInput.classList.add('shake');
        setTimeout(() => {
            searchInput.classList.remove('shake');
        }, 500);
    } else {
        errorMessage.style.display = 'none';
        searchInput.classList.remove('shake');
    }
});



        document.getElementById('closeButton').addEventListener('click', function() {
    document.querySelector('.BackgRoundGunShop').style.display = 'none';
    fetch('http://Ag-GunShops/closeMenu', {
        method: 'POST',
        body: JSON.stringify({}),
        headers: {'Content-Type': 'application/json'}
    });
});


        function buyWeapon(weaponName, price, img) {
            Swal.fire({
                title: 'تأكيد شراء السلاح',
                text: `هل أنت متأكد أنك تريد شراء ${weaponName}?`,
                imageUrl: img,
                imageWidth: 200,
                imageHeight: 200,
                showCancelButton: true,
                confirmButtonText: 'شراء',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('http://Ag-GunShops/buyWeapon', {
                        method: 'POST',
                        body: JSON.stringify({weapon: weaponName, price: price}),
                        headers: {'Content-Type': 'application/json'}
                    }).then(response => response.json()).then(data => {
                        if (data.success) {

                        } else {

                        }
                    }).catch(error => {

                    });
                }
            });
        }

        function buyAmmo(weaponName, ammoPrice) {
            Swal.fire({
                title: 'تأكيد شراء الذخيرة',
                text: `حدد كمية الذخيرة لـ ${weaponName}`,
                input: 'range',
                inputAttributes: {
                    min: 1,
                    max: 500,
                    step: 1
                },
                inputValue: 1,
                confirmButtonText: 'شراء',
                showCancelButton: true,
                cancelButtonText: 'إلغاء',
                inputLabel: 'كمية الذخيرة',
                inputValidator: (value) => {
                    if (!value || value < 1) {
                        return 'يرجى تحديد كمية صالحة!'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const ammoQuantity = parseInt(result.value);
                    fetch('http://Ag-GunShops/buyAmmo', {
                        method: 'POST',
                        body: JSON.stringify({weapon: weaponName, ammoPrice: ammoPrice, quantity: ammoQuantity}),
                        headers: {'Content-Type': 'application/json'}
                    }).then(response => response.json()).then(data => {
                        if (data.success) {

                        } else {

                        }
                    }).catch(error => {
        
                    });
                }
            });
        }

        function openModifyMenu() {
        Swal.fire({
            title: 'تعديل السلاح',
            html: `
                <label for="color">اللون:</label>
                <select id="color" name="color">
                    <option value="0">الالوان</option>
                    <option value="1">اخضر</option>
                    <option value="2">ذهبي</option>
                    <option value="3">وردي</option>
                    <option value="4">جيشي</option>
                    <option value="5">شرطة</option>
                    <option value="6">برتقالي</option>
                    <option value="7">بلاتيني</option>
                </select><br><br>
                <label class="toggle-switch">
                    <input type="checkbox" id="silencerSwal">
                    <span class="slider round"></span>
                </label>
                <label for="silencerSwal">كتم الصوت</label><br><br>
                <label class="toggle-switch">
                    <input type="checkbox" id="lightSwal">
                    <span class="slider round"></span>
                </label>
                <label for="lightSwal">ضوء السلاح</label><br><br>
                <label class="toggle-switch">
                    <input type="checkbox" id="scopeSwal">
                    <span class="slider round"></span>
                </label>
                <label for="scopeSwal">منظار</label><br><br>
                <label class="toggle-switch">
                    <input type="checkbox" id="gripSwal">
                    <span class="slider round"></span>
                </label>
                <label for="gripSwal">مقبض</label><br><br>
                <label class="toggle-switch">
                    <input type="checkbox" id="extendedMagSwal">
                    <span class="slider round"></span>
                </label>
                <label for="extendedMagSwal">مخزن موسع</label><br><br>
            `,
            focusConfirm: false,
            preConfirm: () => {
                return {
                    color: document.getElementById('color').value,
                    silencer: document.getElementById('silencerSwal').checked,
                    light: document.getElementById('lightSwal').checked,
                    scope: document.getElementById('scopeSwal').checked,
                    grip: document.getElementById('gripSwal').checked,
                    extendedMag: document.getElementById('extendedMagSwal').checked
                }
            }
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`https://${GetParentResourceName()}/applyWeaponMod`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(result.value)
                }).then(() => {
                    Swal.fire('نجاح', 'تم تطبيق تعديلات السلاح!', 'success');
                }).catch(() => {
                    Swal.fire('خطأ', 'فشل تطبيق تعديلات السلاح.', 'error');
                });
            }
        });
    }

    </script>
</body>
</html>
