<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" type="image/png" href="{{url_for('static', filename='favicon.png')}}" />
    <title>VM Aanvraag</title>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4; /* Oude achtergrondkleur */
        }

        .form-container {
            width: 90%;
            max-width: 600px;
            background: #ffffff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
        }

        .form-container h1 {
            margin: 0 0 20px;
            font-size: 1.5rem;
            text-align: center;
            color: #333;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 15px;
        }

        .form-group label {
            margin-bottom: 5px;
            font-size: 0.9rem;
            color: #555;
        }

        .form-group input, .form-group select {
            padding: 8px;
            font-size: 0.9rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
        }

        .form-group.multi {
            display: flex;
            gap: 10px;
        }

        .form-group.multi .form-item {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .form-actions {
            text-align: center;
            margin-top: 20px;
        }

        .form-actions button {
            padding: 10px 20px;
            background-color: #007bff;
            border: none;
            border-radius: 4px;
            color: #ffffff;
            font-size: 1rem;
            cursor: pointer;
        }

        .form-actions button:hover {
            background-color: #0056b3;
        }

        #loading {
            display: none;
            position: fixed; /* Zet de overlay vast in het scherm */
            top: 0;
            left: 0;
            width: 100%; /* Volledig schermbreedte */
            height: 100%; /* Volledig schermhoogte */
            background: rgba(0, 0, 0, 0.5); /* Semi-transparante achtergrond */
            text-align: center;
            z-index: 9999; /* Zetten de overlay boven andere content */
            display: flex; /* Dit maakt de #loading div een flex container */
            justify-content: center; /* Centreeert de inhoud horizontaal */
            align-items: center; /* Centreeert de inhoud verticaal */
        }

        #loading img {
            width: 250px;
            height: auto;
        }
    </style>
</head>
<body>
<div class="form-container">
    <h1>VM Aanvraag Formulier</h1>
    <form id="vmForm" method="POST" action="/create_vm">

        <div class="form-group">
            <label for="vmnaam">Hostnaam:</label>
            <input type="text" id="vmnaam" name="vmnaam" required>
        </div>

            <div class="form-group multi">
                <div class="form-item">
                    <label for="vmgebruiker">Gebruikersnaam:</label>
                    <input type="text" id="vmgebruiker" name="vmgebruiker" required>
                </div>
                <div class="form-item">
                    <label for="vmwachtwoord">Wachtwoord:</label>
                    <input type="password" id="vmwachtwoord" name="vmwachtwoord" required>
                </div>
            </div>

        <div class="form-group">
            <label for="ssh_key">SSH Key (optioneel):</label>
            <input type="text" id="ssh_key" name="ssh_key">
        </div>

        <div class="form-group multi">
            <div class="form-item">
                <label for="vmdisk_size">Disk grote (GiB):</label>
                <input type="number" id="vmdisk_size" name="vmdisk_size" required>
            </div>
            <div class="form-item">
                <label for="network_bridge">Netwerk aansluiting:</label>
                <select id="network_bridge" name="network_bridge" required>
                    {% for bridge in bridges %}
                        <option value="{{ bridge }}">{{ bridge }}</option>
                    {% else %}
                        <option value="">Geen bridges beschikbaar</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="form-group multi">
            <div class="form-item">
                <label for="ram">RAM (MB):</label>
                <input type="number" id="ram" name="ram" required>
            </div>
            <div class="form-item">
                <label for="vm_cores">VCores:</label>
                <input type="number" id="vm_cores" name="vm_cores" required>
            </div>
        </div>

        <div class="form-group multi">
            <div class="form-item">
                <label for="storage">Opslaglocatie:</label>
                <select id="storage" name="storage" required>
                    {% for storage in storage_types %}
                        <option value="{{ storage }}">{{ storage }}</option>
                    {% else %}
                        <option value="">Geen opslagtypes beschikbaar</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-item">
                <label for="os">OS:</label>
                <select id="os" name="os" required>
                    <option value="1">Debian 11</option>
                    <option value="2">Debian 12</option>
                    <option value="3">Ubuntu 22.04</option>
                    <option value="4">Ubuntu 24.04</option>
                    <option value="5">AlmaLinux 9</option>
                </select>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit">VM aanmaken</button>
        </div>

    </form>

    <div id="loading">
        <img src="{{url_for('static', filename='loading.gif')}}" alt="Laad animatie">
        <p>De VM wordt aangemaakt...</p>
    </div>
</div>

    <script>
	// Verberg de laadanimatie bij het begin
	document.getElementById('loading').style.display = 'none';
	
    document.getElementById('vmForm').addEventListener('submit', function(event) {
        event.preventDefault();  // Voorkom dat het formulier meteen wordt verzonden

        // Toon de laadanimatie
		document.getElementById('loading').style.display = 'block';

        // Maak een FormData object met de formuliergegevens
        let formData = new FormData(this);

        // Verstuur de gegevens met AJAX
        fetch('/create_vm', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())  // Verwacht een JSON antwoord van de server
        .then(data => {
            console.log(data);  // Log de volledige response om te zien wat er gebeurt

            if (data.success) {
                // Start onmiddellijk de polling om de status van de VM te controleren
                const vmnaam = formData.get('vmnaam');
                const pollInterval = setInterval(function() {
                    fetch(`/check_vm_status/${vmnaam}`)
                        .then(response => response.json())
                        .then(statusData => {
                            console.log("Polling response:", statusData);  // Bekijk de serverresponse

                            if (statusData.status === 'completed') {
                                console.log("VM is completed, stopping polling...");

                                // Stop de polling
                                clearInterval(pollInterval);

                                // Verberg de laadanimatie
                                document.getElementById('loading').style.display = 'none';

                                // Toon een succesmelding
                                Swal.fire({
                                    title: 'De VM is succesvol aangemaakt!',
				    text: 'De volgende IP-adressen zijn toegewezen: ' + data.ip_addresses.join(', '),
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                });

                            }
                            else if (statusData.status === 'failed') {
                                console.log("VM creation failed, stopping polling...");

                                // Stop de polling en toon een foutmelding als er iets misgaat
                                clearInterval(pollInterval);

                                // Toon de foutmelding
                                Swal.fire({
                                    title: 'Fout!',
                                    text: 'Er is een probleem opgetreden bij het aanmaken van de VM.',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });

                                // Verberg de laadanimatie als er een probleem is
                                document.getElementById('loading').style.display = 'none';
                            }
                        })
                        .catch(error => {
                            console.error("Polling error:", error);
                        });
                }, 5000); // Poll elke 5 seconden om de status te controleren
            } else {
                // Toon een foutmelding als de VM niet succesvol is aangemaakt
                Swal.fire({
                    title: 'Fout!',
                    text: 'Er is een probleem opgetreden bij het aanmaken van de VM.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });

                // Verberg de laadanimatie als er een probleem is
                document.getElementById('loading').style.display = 'none';
            }
        })
        .catch(error => {
            // Verberg de laadanimatie als er een fout is
            document.getElementById('loading').style.display = 'none';

            // Toon een foutmelding
            Swal.fire({
                title: 'Fout!',
                text: 'Er is een probleem opgetreden bij de aanvraag.',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
    });
    </script>
</body>
</html>
