make it so the script prioritizes value, meaning if I have 18220 dollar for gunmen and craftsmen, it would buy 2 craftsmen and 1 gunman

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Unit Purchase Calculator with Toggles</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f4f4f4;
        }
        .container {
            background-color: #fff;
            padding: 20px 30px 30px 30px;
            border-radius: 8px;
            max-width: 600px;
            margin: auto;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        h2 {
            text-align: center;
            color: #333;
        }
        .category {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 15px;
            padding: 10px 0;
            border-bottom: 1px solid #e0e0e0;
        }
        .category:last-child {
            border-bottom: none;
        }
        .toggle-container {
            display: flex;
            align-items: center;
        }
        .toggle-container label {
            margin-left: 10px;
            color: #555;
            cursor: pointer;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 24px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #28a745;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        label.toggle-label {
            display: flex;
            align-items: center;
        }
        label.toggle-label input[type="number"] {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px solid #ccc;
            margin-left: 20px;
        }
        button {
            margin-top: 20px;
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            border: none;
            color: white;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0069d9;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9ecef;
            border-radius: 4px;
        }
        .result.hidden {
            display: none;
        }
        .warning {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Unit Purchase Calculator</h2>

        <!-- Available Money Input -->
        <label for="money">Available Money:</label>
        <input type="number" id="money" placeholder="Enter your available money" min="0">

        <!-- Gunmen Category -->
        <div class="category">
            <div class="toggle-container">
                <label class="switch">
                    <input type="checkbox" id="toggleGunmen" checked>
                    <span class="slider"></span>
                </label>
                <label for="toggleGunmen">Gunmen</label>
            </div>
            <div>
                <input type="number" id="existingGunmen" placeholder="Existing Gunmen" min="0" value="0">
            </div>
        </div>

        <!-- Craftsmen Category -->
        <div class="category">
            <div class="toggle-container">
                <label class="switch">
                    <input type="checkbox" id="toggleCraftsmen" checked>
                    <span class="slider"></span>
                </label>
                <label for="toggleCraftsmen">Craftsmen</label>
            </div>
            <div>
                <input type="number" id="existingCraftsmen" placeholder="Existing Craftsmen" min="0" value="0">
            </div>
        </div>

        <!-- Missile Sites Category -->
        <div class="category">
            <div class="toggle-container">
                <label class="switch">
                    <input type="checkbox" id="toggleMissileSites" checked>
                    <span class="slider"></span>
                </label>
                <label for="toggleMissileSites">Missile Sites</label>
            </div>
            <div>
                <input type="number" id="existingMissileSites" placeholder="Existing Missile Sites" min="0" value="0">
            </div>
        </div>

        <button onclick="calculatePurchases()">Calculate Maximum Purchases</button>

        <div class="result hidden" id="result">
            <h3>Maximum Purchases:</h3>
            <div id="purchaseDetails"></div>
        </div>

        <div class="warning hidden" id="warning"></div>
    </div>

    <script>
        // Prices
        const PRICE_GUNMAN = 2000;
        const PRICE_CRAFTSMAN = 8000;
        const PRICE_MISSILE_SITE = 12000;

        function calculatePurchases() {
            // Reset warnings and results
            document.getElementById('warning').classList.add('hidden');
            document.getElementById('result').classList.add('hidden');
            document.getElementById('purchaseDetails').innerHTML = '';

            // Get user inputs
            let money = parseFloat(document.getElementById('money').value);
            let existingGunmen = parseInt(document.getElementById('existingGunmen').value) || 0;
            let existingCraftsmen = parseInt(document.getElementById('existingCraftsmen').value) || 0;
            let existingMissileSites = parseInt(document.getElementById('existingMissileSites').value) || 0;

            // Get toggles state
            let includeGunmen = document.getElementById('toggleGunmen').checked;
            let includeCraftsmen = document.getElementById('toggleCraftsmen').checked;
            let includeMissileSites = document.getElementById('toggleMissileSites').checked;

            // Count selected categories
            let selectedCategories = [];
            if (includeGunmen) selectedCategories.push('Gunmen');
            if (includeCraftsmen) selectedCategories.push('Craftsmen');
            if (includeMissileSites) selectedCategories.push('Missile Sites');

            if (selectedCategories.length === 0) {
                displayWarning("Please select at least one category.");
                return;
            }

            if (isNaN(money) || money < 0) {
                displayWarning("Please enter a valid amount of money.");
                return;
            }

            // Divide money equally among selected categories
            let spendPerCategory = money / selectedCategories.length;

            // Calculate maximum additional units for each enabled category
            let purchaseResults = [];

            if (includeGunmen) {
                let maxAdditionalGunmen = Math.floor(spendPerCategory / PRICE_GUNMAN);
                purchaseResults.push(`Gunmen: ${maxAdditionalGunmen} additional (Total: ${existingGunmen + maxAdditionalGunmen})`);
            }

            if (includeCraftsmen) {
                let maxAdditionalCraftsmen = Math.floor(spendPerCategory / PRICE_CRAFTSMAN);
                purchaseResults.push(`Craftsmen: ${maxAdditionalCraftsmen} additional (Total: ${existingCraftsmen + maxAdditionalCraftsmen})`);
            }

            if (includeMissileSites) {
                let maxAdditionalMissileSites = Math.floor(spendPerCategory / PRICE_MISSILE_SITE);
                purchaseResults.push(`Missile Sites: ${maxAdditionalMissileSites} additional (Total: ${existingMissileSites + maxAdditionalMissileSites})`);
            }

            // Display results
            document.getElementById('purchaseDetails').innerHTML = purchaseResults.join('<br>');
            document.getElementById('result').classList.remove('hidden');
        }

        function displayWarning(message) {
            let warningDiv = document.getElementById('warning');
            warningDiv.innerText = message;
            warningDiv.classList.remove('hidden');
        }

        // Optional: Disable input fields when their category is toggled off
        document.getElementById('toggleGunmen').addEventListener('change', function() {
            document.getElementById('existingGunmen').disabled = !this.checked;
        });

        document.getElementById('toggleCraftsmen').addEventListener('change', function() {
            document.getElementById('existingCraftsmen').disabled = !this.checked;
        });

        document.getElementById('toggleMissileSites').addEventListener('change', function() {
            document.getElementById('existingMissileSites').disabled = !this.checked;
        });
    </script>
</body>
</html>