{% extends "base.html" %}

{% block title %}Batch-Lizenzen erstellen{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>🔑 Batch-Lizenzen erstellen</h2>
        <div>
            <a href="/" class="btn btn-secondary">📊 Dashboard</a>
            <a href="/create" class="btn btn-secondary">➕ Einzellizenz</a>
            <a href="/licenses" class="btn btn-secondary">📋 Lizenzen</a>
            <a href="/customers" class="btn btn-secondary">👥 Kunden</a>
        </div>
    </div>

    <div class="alert alert-info">
        <strong>ℹ️ Batch-Generierung:</strong> Erstellen Sie mehrere Lizenzen auf einmal für einen Kunden.
        Die Lizenzen werden automatisch generiert und können anschließend als CSV exportiert werden.
    </div>

    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <form method="post" action="/batch" accept-charset="UTF-8">
        <div class="row g-3">
            <div class="col-md-12">
                <label for="customerSelect" class="form-label">Kunde auswählen</label>
                <select class="form-select" id="customerSelect" name="customer_id" required>
                    <option value="">🔍 Kunde suchen oder neuen Kunden anlegen...</option>
                    <option value="new">➕ Neuer Kunde</option>
                </select>
            </div>
            <div class="col-md-6" id="customerNameDiv" style="display: none;">
                <label for="customerName" class="form-label">Kundenname</label>
                <input type="text" class="form-control" id="customerName" name="customer_name" 
                       placeholder="Firma GmbH" accept-charset="UTF-8">
            </div>
            <div class="col-md-6" id="emailDiv" style="display: none;">
                <label for="email" class="form-label">E-Mail</label>
                <input type="email" class="form-control" id="email" name="email" 
                       placeholder="kontakt@firma.de" accept-charset="UTF-8">
            </div>
            
            <div class="col-md-3">
                <label for="quantity" class="form-label">Anzahl Lizenzen</label>
                <input type="number" class="form-control" id="quantity" name="quantity" 
                       min="1" max="100" value="10" required>
                <div class="form-text">Max. 100 Lizenzen pro Batch</div>
            </div>
            
            <div class="col-md-3">
                <label for="licenseType" class="form-label">Lizenztyp</label>
                <select class="form-select" id="licenseType" name="license_type" required>
                    <option value="full">Vollversion</option>
                    <option value="test">Testversion</option>
                </select>
            </div>
            
            <div class="col-md-2">
                <label for="validFrom" class="form-label">Gültig ab</label>
                <input type="date" class="form-control" id="validFrom" name="valid_from" required>
            </div>
            
            <div class="col-md-1">
                <label for="duration" class="form-label">Laufzeit</label>
                <input type="number" class="form-control" id="duration" name="duration" value="1" min="1" required>
            </div>
            
            <div class="col-md-2">
                <label for="durationType" class="form-label">Einheit</label>
                <select class="form-select" id="durationType" name="duration_type" required>
                    <option value="days">Tage</option>
                    <option value="months">Monate</option>
                    <option value="years" selected>Jahre</option>
                </select>
            </div>
            
            <div class="col-md-2">
                <label for="validUntil" class="form-label">Gültig bis</label>
                <input type="date" class="form-control" id="validUntil" name="valid_until" readonly style="background-color: #e9ecef;">
            </div>
        </div>

        <div class="mt-4 d-flex gap-2">
            <button type="submit" class="btn btn-primary btn-lg">
                🔑 Batch generieren
            </button>
            <button type="button" class="btn btn-outline-secondary" onclick="previewKeys()">
                👁️ Vorschau
            </button>
        </div>
    </form>

    <!-- Vorschau Modal -->
    <div class="modal fade" id="previewModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Vorschau der generierten Keys</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Es werden <strong id="previewQuantity">10</strong> Lizenzen im folgenden Format generiert:</p>
                    <div class="bg-light p-3 rounded font-monospace" id="previewFormat">
                        AF-YYYYMMFT-XXXX-YYYY-ZZZZ
                    </div>
                    <p class="mt-3 mb-0">Die Keys werden automatisch eindeutig generiert und in der Datenbank gespeichert.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Funktion zur Berechnung des Ablaufdatums
function calculateValidUntil() {
    const validFrom = document.getElementById('validFrom').value;
    const duration = parseInt(document.getElementById('duration').value) || 1;
    const durationType = document.getElementById('durationType').value;
    
    if (!validFrom) return;
    
    const startDate = new Date(validFrom);
    let endDate = new Date(startDate);
    
    switch(durationType) {
        case 'days':
            endDate.setDate(endDate.getDate() + duration);
            break;
        case 'months':
            endDate.setMonth(endDate.getMonth() + duration);
            break;
        case 'years':
            endDate.setFullYear(endDate.getFullYear() + duration);
            break;
    }
    
    // Ein Tag abziehen, da der Starttag mitgezählt wird
    endDate.setDate(endDate.getDate() - 1);
    
    document.getElementById('validUntil').value = endDate.toISOString().split('T')[0];
}

// Event Listener für Änderungen
document.getElementById('validFrom').addEventListener('change', calculateValidUntil);
document.getElementById('duration').addEventListener('input', calculateValidUntil);
document.getElementById('durationType').addEventListener('change', calculateValidUntil);

// Setze heutiges Datum als Standard
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('validFrom').value = today;
    
    // Berechne initiales Ablaufdatum
    calculateValidUntil();
    
    // Initialisiere Select2 für Kundenauswahl
    $('#customerSelect').select2({
        theme: 'bootstrap-5',
        placeholder: '🔍 Kunde suchen oder neuen Kunden anlegen...',
        allowClear: true,
        ajax: {
            url: '/api/customers',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term,
                    page: params.page || 1
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                
                // "Neuer Kunde" Option immer oben anzeigen
                const results = data.results || [];
                if (params.page === 1) {
                    results.unshift({
                        id: 'new',
                        text: '➕ Neuer Kunde',
                        isNew: true
                    });
                }
                
                return {
                    results: results,
                    pagination: data.pagination
                };
            },
            cache: true
        },
        minimumInputLength: 0,
        language: {
            inputTooShort: function() { return ''; },
            noResults: function() { return 'Keine Kunden gefunden'; },
            searching: function() { return 'Suche...'; },
            loadingMore: function() { return 'Lade weitere Ergebnisse...'; }
        }
    });
    
    // Event Handler für Kundenauswahl
    $('#customerSelect').on('select2:select', function (e) {
        const selectedValue = e.params.data.id;
        const nameDiv = document.getElementById('customerNameDiv');
        const emailDiv = document.getElementById('emailDiv');
        const nameInput = document.getElementById('customerName');
        const emailInput = document.getElementById('email');
        
        if (selectedValue === 'new') {
            // Zeige Eingabefelder für neuen Kunden
            nameDiv.style.display = 'block';
            emailDiv.style.display = 'block';
            nameInput.required = true;
            emailInput.required = true;
        } else {
            // Verstecke Eingabefelder bei bestehendem Kunden
            nameDiv.style.display = 'none';
            emailDiv.style.display = 'none';
            nameInput.required = false;
            emailInput.required = false;
            nameInput.value = '';
            emailInput.value = '';
        }
    });
    
    // Clear handler
    $('#customerSelect').on('select2:clear', function (e) {
        document.getElementById('customerNameDiv').style.display = 'none';
        document.getElementById('emailDiv').style.display = 'none';
        document.getElementById('customerName').required = false;
        document.getElementById('email').required = false;
    });
});

// Vorschau-Funktion
function previewKeys() {
    const quantity = document.getElementById('quantity').value;
    const type = document.getElementById('licenseType').value;
    const typeChar = type === 'full' ? 'F' : 'T';
    const date = new Date();
    const dateStr = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2);
    
    document.getElementById('previewQuantity').textContent = quantity;
    document.getElementById('previewFormat').textContent = `AF-${dateStr}${typeChar}-XXXX-YYYY-ZZZZ`;
    
    const modal = new bootstrap.Modal(document.getElementById('previewModal'));
    modal.show();
}

// Validierung
document.getElementById('quantity').addEventListener('input', function(e) {
    if (e.target.value > 100) {
        e.target.value = 100;
    }
    if (e.target.value < 1) {
        e.target.value = 1;
    }
});
</script>
{% endblock %}