{% extends "base.html" %}
{% block content %}
<h2>Switch Verwaltung</h2>

<!-- Button zum Hinzufügen -->
<button class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#addSwitchModal">Neuen Switch hinzufügen</button>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Hostname</th>
            <th>IP-Adresse</th>
            <th>Username</th>
            <th>Aktionen</th>
        </tr>
    </thead>
    <tbody>
        {% for s in switches %}
        <tr>
            <td>{{ s['hostname'] }}</td>
            <td>{{ s['ip'] }}</td>
            <td>{{ s['username'] }}</td>
            <td>
                <!-- Bearbeiten -->
                <button class="btn btn-sm button login white" data-bs-toggle="modal" data-bs-target="#editSwitchModal{{ loop.index }}">Bearbeiten</button>

                <!-- Löschen -->
                <form method="post" action="{{ url_for('delete_switch', hostname=s['hostname']) }}" style="display:inline;">		                
                    <button class="btn btn-danger btn-sm" onclick="return confirm('Willst du den Switch wirklich löschen?');">
                        Löschen
                    </button>
                </form>
            </td>
        </tr>

        <!-- Bearbeiten Modal -->
        <div class="modal fade" id="editSwitchModal{{ loop.index }}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-dark">Switch bearbeiten</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form method="post" onsubmit="return validateSwitchForm(this, '{{ loop.index }}')">
                        <div class="modal-body">
                            <input type="hidden" name="edit_switch" value="1">
                            <input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
                            <div class="mb-3">
                                <label class="form-label">Hostname</label>
                                <input type="text" name="hostname" class="form-control" value="{{ s['hostname'] }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">IP-Adresse</label>
                                <input type="text" name="ip" class="form-control" value="{{ s['ip'] }}" required placeholder="z.B. 192.168.1.100">
                                <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Username</label>
                                <input type="text" name="username" class="form-control" value="{{ s['username'] }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Neues Passwort</label>
                                <input type="password" id="password_edit_{{ loop.index }}" name="password" class="form-control" placeholder="Neues Passwort (optional)">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Passwort bestätigen</label>
                                <input type="password" id="password_confirm_edit_{{ loop.index }}" name="password_confirm" class="form-control" placeholder="Bestätigen">
                                <div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                            <button class="btn button login white" type="submit">Speichern</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </tbody>
</table>

<!-- Hinzufügen Modal -->
<div class="modal fade" id="addSwitchModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-dark">Neuen Switch hinzufügen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" onsubmit="return validateSwitchForm(this, 'add')">
                <div class="modal-body">
                    <input type="hidden" name="add_switch" value="1">
                    <div class="mb-3">
                        <label class="form-label">Hostname</label>
                        <input type="text" name="hostname" class="form-control" required placeholder="z.B. Switch01">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">IP-Adresse</label>
                        <input type="text" name="ip" class="form-control" required placeholder="z.B. 192.168.1.100">
                        <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <input type="text" name="username" class="form-control" required placeholder="z.B. admin">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Passwort</label>
                        <input type="password" id="password_add" name="password" class="form-control" required placeholder="z.B. geheim123">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Passwort bestätigen</label>
                        <input type="password" id="password_confirm_add" name="password_confirm" class="form-control" required placeholder="Passwort wiederholen">
                        <div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button class="btn button login white" type="submit">Hinzufügen</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- JS: Passwort + IP-Validierung -->
<script>
// Passwortcheck
function validatePassword(id, isEdit) {
    let pass = document.getElementById(isEdit ? `password_edit_${id}` : `password_${id}`) || document.getElementById('password_add');
    let confirm = document.getElementById(isEdit ? `password_confirm_edit_${id}` : `password_confirm_${id}`) || document.getElementById('password_confirm_add');

    if (!pass || !confirm) return true;
    if (pass.value !== confirm.value) {
        confirm.classList.add("is-invalid");
        return false;
    } else {
        confirm.classList.remove("is-invalid");
        return true;
    }
}

// -------------------
// IP-Validierung
// -------------------
const ipPattern = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;

function validateIP(input) {
    if (!ipPattern.test(input.value)) {
        input.classList.add("is-invalid");
        return false;
    } else {
        input.classList.remove("is-invalid");
        return true;
    }
}

function validateSwitchForm(form, id) {
    const ipInput = form.querySelector("input[name='ip']");
    let valid = true;
    if (ipInput) valid = validateIP(ipInput) && valid;

    // Passwortcheck
    valid = validatePassword(id, id !== 'add') && valid;

    return valid;
}

// Live-Feedback IP & Passwort
document.addEventListener('input', e => {
    if (e.target.name === "ip") validateIP(e.target);
    if (e.target.id.startsWith('password_confirm')) {
        const id = e.target.id.replace('password_confirm_', '');
        const pass = document.getElementById('password_' + id);
        if (pass && pass.value !== e.target.value) {
            e.target.classList.add('is-invalid');
        } else {
            e.target.classList.remove('is-invalid');
        }
    }
});
</script>
{% endblock %}