fix the toggle buttons in this script

<!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>
    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 existing units
        let existingGunmen = parseInt(document.getElementById('existingGunmen').value) || 0;
        let existingCraftsmen = parseInt(document.getElementById('existingCraftsmen').value) || 0;
        let existingMissileSites = parseInt(document.getElementById('existingMissileSites').value) || 0;

        // Check that Gunmen is selected
        if (!document.getElementById('toggleGunmen').checked) {
            displayWarning("Gunmen must be selected to perform the calculation.");
            return;
        }

        const priceGunmen = 2000;
        const priceCraftsmen = 8000;
        const priceMissileSites = 12000;

        let availableMoney = money;

        // Initialize search for maximum number of Gunmen
        let G_min = 0;
        let G_max = Math.floor(availableMoney / priceGunmen); // Max possible Gunmen if we spend all money on Gunmen

        let best_G = 0;
        let totalSpent = 0;

        while (G_min <= G_max) {
            let G_mid = Math.floor((G_min + G_max) / 2);
            let C_mid = Math.floor(G_mid / 4);
            let M_mid = Math.floor(G_mid / 6);

            let totalCost_mid = G_mid * priceGunmen + C_mid * priceCraftsmen + M_mid * priceMissileSites;

            if (totalCost_mid <= availableMoney) {
                // Sufficient money, try buying more Gunmen
                best_G = G_mid;
                totalSpent = totalCost_mid;
                G_min = G_mid + 1;
            } else {
                // Not enough money, buy fewer Gunmen
                G_max = G_mid - 1;
            }
        }

        // After search, best_G is the maximum number of Gunmen
        let purchasedGunmen = best_G;
        let purchasedCraftsmen = Math.floor(purchasedGunmen / 4);
        let purchasedMissileSites = Math.floor(purchasedGunmen / 6);

        // Calculate total units after purchase
        let totalGunmen = existingGunmen + purchasedGunmen;
        let totalCraftsmen = existingCraftsmen + purchasedCraftsmen;
        let totalMissileSites = existingMissileSites + purchasedMissileSites;

        // Remaining money
        let remainingMoney = availableMoney - totalSpent;

        // Display results
        let purchaseResults = [];
        purchaseResults.push(`Gunmen: ${purchasedGunmen} additional (Total: ${totalGunmen})`);
        purchaseResults.push(`Craftsmen: ${purchasedCraftsmen} additional (Total: ${ totalCraftsmen })`);
        purchaseResults.push(`Missile Sites: ${purchasedMissileSites} additional (Total: ${ totalMissileSites })`);

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

    // Display warning function remains unchanged
    function displayWarning(message) {
        let warningDiv = document.getElementById('warning');
        warningDiv.innerText = message;
        warningDiv.classList.remove('hidden');
    }
</script>
</body>
</html>