<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HUD Settings</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="grid.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <script src="main.js"></script>
</head>

<body>
    <div id="ui">
        <div class="playerStats">
            <div class="stat" id="money">
                <span></span>&nbsp;<div class="icon"><i class="fa fa-eur"></i></div>
            </div>
            <div class="stat" id="bankmoney">
                <span></span>&nbsp;&nbsp;&nbsp;<div class="icon"><i class="fa fa-credit-card-alt"></i></div>
            </div>
            <div class="stat" id="dirtymoney">
                <span></span>&nbsp;<div class="icon"><i class="fa fa-eur"></i></div>
            </div>
            <div class="stat" id="job">
                <div class="icon"><i class=""></i></div><span>Työtön - Pummi</span>
            </div>
        </div>
    </div>
    <div id="menu">
        <h2><i class="fa fa-cogs" style="margin-right: 10px;"></i>HUDIN ASETUKSET</h2>
        <label for="bgColorPicker"><input type="color" id="bgColorPicker" name="bgColor" value="#002700">Taustaväri</label>
        <label for="bgOpacitySlider"><input type="range" id="bgOpacitySlider" name="bgOpacity" min="0" max="100" value="70">Läpinäkyvyys</label>        
        <label for="borderColorPicker"><input type="color" id="borderColorPicker" name="borderColor" value="#32ff17">Alapalkin väri</label>
        <label for="textColorPicker"><input type="color" id="textColorPicker" name="textColor" value="#ffffff">Tekstin väri</label>
        <label for="moneyIconColorPicker"><input type="color" id="moneyIconColorPicker" name="moneyIconColor" value="#4CAF50">Käteinen väri</label>
        <label for="bankIconColorPicker"><input type="color" id="bankIconColorPicker" name="bankIconColor" value="#6FA1E5">Pankki väri</label>
        <label for="blackMoneyIconColorPicker"><input type="color" id="blackMoneyIconColorPicker" name="blackMoneyIconColor" value="#f82b1c">Likainen väri</label>
        <label for="jobLabelColorPicker"><input type="color" id="jobLabelColorPicker" name="jobLabelColor" value="#ffffff">Työ väri</label>

        <button id="resetBtn"><i class="fa fa-undo" style="margin-right: 5px;"></i>
        <button id="closeBtn"><i class="fa fa-times" style="margin-right: 5px;"></i>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window.addEventListener('message', function(event) {
                const menu = document.getElementById('menu');
                if (event.data.action === 'open') {
                    menu.style.display = 'block';
                } else if (event.data.action === 'close') {
                    menu.style.display = 'none';
                }

                if (event.data.action === "setValue") {
                    const picker = document.getElementById(event.data.key);
                    if (picker) {
                        picker.value = event.data.value;
                        document.documentElement.style.setProperty(`--hud-${event.data.key}`, event.data.value);
                    }
                }
            });
            document.getElementById('closeBtn').addEventListener('click', function() {
                fetch(`https://${GetParentResourceName()}/closeMenu`, {
                    method: 'POST'
                });
            });

            const colorPickers = [
                { id: 'bgColorPicker', property: '--hud-bg-color', endpoint: 'updateHudColor' },
                { id: 'borderColorPicker', property: '--hud-border-color', endpoint: 'updateHudBorderColor' },
                { id: 'textColorPicker', property: '--hud-text-color', endpoint: 'updateHudTextColor' },
                { id: 'moneyIconColorPicker', property: '--hud-money-icon-color', endpoint: 'updateHudMoneyIconColor' },
                { id: 'bankIconColorPicker', property: '--hud-bank-icon-color', endpoint: 'updateHudBankIconColor' },
                { id: 'blackMoneyIconColorPicker', property: '--hud-black-money-icon-color', endpoint: 'updateHudBlackMoneyIconColor' },
                { id: 'jobLabelColorPicker', property: '--hud-job-label-color', endpoint: 'updateHudJobLabelColor' }
            ];

            colorPickers.forEach(({ id, property, endpoint }) => {
                const picker = document.getElementById(id);
                picker.addEventListener('input', function(e) {
                    const color = e.target.value;
                    document.documentElement.style.setProperty(property, color);
                    fetch(`https://${GetParentResourceName()}/${endpoint}`, {
                        method: 'POST',
                        body: JSON.stringify({ color })
                    });
                });
            });
            document.getElementById('resetBtn').addEventListener('click', function() {
                const defaults = {
                    '--hud-bg-color': '#00270091',
                    '--hud-border-color': '#32ff17',
                    '--hud-text-color': '#ffffff',
                    '--hud-money-icon-color': '#4CAF50',
                    '--hud-bank-icon-color': '#6FA1E5',
                    '--hud-black-money-icon-color': '#f82b1c',
                    '--hud-job-label-color': '#ffffff'
                };

                for (const [property, value] of Object.entries(defaults)) {
                    document.documentElement.style.setProperty(property, value);
                }

                colorPickers.forEach(({ id, endpoint }) => {
                    const picker = document.getElementById(id);
                    fetch(`https://${GetParentResourceName()}/${endpoint}`, {
                        method: 'POST',
                        body: JSON.stringify({ color: picker.value })
                    });
                });
            });
        });
    </script>
</body>
</html>
    </div>
    <div id="menu">
        <h2><i class="fa fa-cogs" style="margin-right: 10px;"></i>HUDIN ASETUKSET</h2>
        <label for="bgColorPicker"><input type="color" id="bgColorPicker" name="bgColor" value="#002700">Taustaväri</label>
        <label for="bgOpacitySlider"><input type="range" id="bgOpacitySlider" name="bgOpacity" min="0" max="100" value="70">Läpinäkyvyys</label>        
        <label for="borderColorPicker"><input type="color" id="borderColorPicker" name="borderColor" value="#32ff17">Alapalkin väri</label>
        <label for="textColorPicker"><input type="color" id="textColorPicker" name="textColor" value="#ffffff">Tekstin väri</label>
        <label for="moneyIconColorPicker"><input type="color" id="moneyIconColorPicker" name="moneyIconColor" value="#4CAF50">Käteinen väri</label>
        <label for="bankIconColorPicker"><input type="color" id="bankIconColorPicker" name="bankIconColor" value="#6FA1E5">Pankki väri</label>
        <label for="blackMoneyIconColorPicker"><input type="color" id="blackMoneyIconColorPicker" name="blackMoneyIconColor" value="#f82b1c">Likainen väri</label>
        <label for="jobLabelColorPicker"><input type="color" id="jobLabelColorPicker" name="jobLabelColor" value="#ffffff">Työ väri</label>

        <button id="resetBtn"><i class="fa fa-undo" style="margin-right: 5px;"></i>
        <button id="closeBtn"><i class="fa fa-times" style="margin-right: 5px;"></i>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window.addEventListener('message', function(event) {
                const menu = document.getElementById('menu');
                if (event.data.action === 'open') {
                    menu.style.display = 'block';
                } else if (event.data.action === 'close') {
                    menu.style.display = 'none';
                }

                if (event.data.action === "setValue") {
                    const picker = document.getElementById(event.data.key);
                    if (picker) {
                        picker.value = event.data.value;
                        document.documentElement.style.setProperty(`--hud-${event.data.key}`, event.data.value);
                    }
                }
            });

            document.getElementById('closeBtn').addEventListener('click', function() {
                fetch(`https://${GetParentResourceName()}/closeMenu`, {
                    method: 'POST'
                });
            });

            const colorPickers = [
                { id: 'bgColorPicker', property: '--hud-bg-color', endpoint: 'updateHudColor' },
                { id: 'borderColorPicker', property: '--hud-border-color', endpoint: 'updateHudBorderColor' },
                { id: 'textColorPicker', property: '--hud-text-color', endpoint: 'updateHudTextColor' },
                { id: 'moneyIconColorPicker', property: '--hud-money-icon-color', endpoint: 'updateHudMoneyIconColor' },
                { id: 'bankIconColorPicker', property: '--hud-bank-icon-color', endpoint: 'updateHudBankIconColor' },
                { id: 'blackMoneyIconColorPicker', property: '--hud-black-money-icon-color', endpoint: 'updateHudBlackMoneyIconColor' },
                { id: 'jobLabelColorPicker', property: '--hud-job-label-color', endpoint: 'updateHudJobLabelColor' }
            ];

            colorPickers.forEach(({ id, property, endpoint }) => {
                const picker = document.getElementById(id);
                picker.addEventListener('input', function(e) {
                    const color = e.target.value;
                    document.documentElement.style.setProperty(property, color);
                    fetch(`https://${GetParentResourceName()}/${endpoint}`, {
                        method: 'POST',
                        body: JSON.stringify({ color })
                    });
                });
            });

            document.getElementById('resetBtn').addEventListener('click', function() {
                const defaults = {
                    '--hud-bg-color': '#00270091',
                    '--hud-border-color': '#32ff17',
                    '--hud-text-color': '#ffffff',
                    '--hud-money-icon-color': '#4CAF50',
                    '--hud-bank-icon-color': '#6FA1E5',
                    '--hud-black-money-icon-color': '#f82b1c',
                    '--hud-job-label-color': '#ffffff'
                };

                for (const [property, value] of Object.entries(defaults)) {
                    document.documentElement.style.setProperty(property, value);
                }

                colorPickers.forEach(({ id, endpoint }) => {
                    const picker = document.getElementById(id);
                    fetch(`https://${GetParentResourceName()}/${endpoint}`, {
                        method: 'POST',
                        body: JSON.stringify({ color: picker.value })
                    });
                });
            });
        });
    </script>
</body>
</html>