fix the script so for every four gunmen buy one craftsman, for every 6 gunmen, buy one missile site.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Unit Purchase Calculator with Prioritized Value</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 id="totalSpent"></div>
            <div id="remainingMoney"></div>
        </div>

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

    <script>
        // Unit Prices
        const UNITS = [
            { name: 'Missile Sites', price: 12000, toggleId: 'toggleMissileSites', existingId: 'existingMissileSites' },
            { name: 'Craftsmen', price: 8000, toggleId: 'toggleCraftsmen', existingId: 'existingCraftsmen' },
            { name: 'Gunmen', price: 2000, toggleId: 'toggleGunmen', existingId: 'existingGunmen' }
        ];

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

            // Get available money
            let money = parseFloat(document.getElementById('money').value);
            if (isNaN(money) || money < 0) {
                displayWarning("Please enter a valid amount of money.");
                return;
            }

            // Get selected categories
            let selectedUnits = UNITS.filter(unit => document.getElementById(unit.toggleId).checked);
            if (selectedUnits.length === 0) {
                displayWarning("Please select at least one category.");
                return;
            }

            // Sort units by price descending to prioritize higher value units
            selectedUnits.sort((a, b) => b.price - a.price);

            let totalSpent = 0;
            let purchaseResults = [];

            selectedUnits.forEach(unit => {
                if (money >= unit.price) {
                    let maxUnits = Math.floor(money / unit.price);
                    let existingUnits = parseInt(document.getElementById(unit.existingId).value) || 0;
                    purchaseResults.push(`${unit.name}: ${maxUnits} additional (Total: ${existingUnits + maxUnits})`);
                    let spent = maxUnits * unit.price;
                    totalSpent += spent;
                    money -= spent;
                } else {
                    // Not enough money to buy even one unit
                    let existingUnits = parseInt(document.getElementById(unit.existingId).value) || 0;
                    purchaseResults.push(`${unit.name}: 0 additional (Total: ${existingUnits})`);
                }
            });

            // Display results
            document.getElementById('purchaseDetails').innerHTML = purchaseResults.join('<br>');
            document.getElementById('totalSpent').innerHTML = `<strong>Total Spent:</strong> $${totalSpent.toLocaleString()}`;
            document.getElementById('remainingMoney').innerHTML = `Remaining Money: $${money.toLocaleString()}`;
            document.getElementById('result').classList.remove('hidden');
        }

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

        // Disable input fields when their category is toggled off
        UNITS.forEach(unit => {
            document.getElementById(unit.toggleId).addEventListener('change', function() {
                document.getElementById(unit.existingId).disabled = !this.checked;
            });
        });
    </script>
</body>
</html>