{% extends 'administration/base.html.twig' %}

{% block title %}Plan bearbeiten - {{ plan.label }}{% endblock %}

{% block body %}
<nav aria-label="breadcrumb" class="mb-4">
  <ol class="breadcrumb bg-light p-2 rounded">
    <li class="breadcrumb-item"><a href="/admin/license-server">Lizenzserver</a></li>
    <li class="breadcrumb-item"><a href="/admin/license-server/plans">Lizenzpläne</a></li>
    <li class="breadcrumb-item active" aria-current="page">Lizenzplan bearbeiten</li>
  </ol>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="admin-card p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="gradient-text fw-bold">
                        <i class="bi bi-pencil me-3"></i>
                        Plan bearbeiten: {{ plan.label }}
                    </h2>
                    <a href="/admin/license-server/plans" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>
                        Zurück
                    </a>
                </div>

                <form id="editPlanForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control" value="{{ plan.name }}" readonly>
                                <small class="text-muted">Der Name kann nicht geändert werden</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Label *</label>
                                <input type="text" class="form-control" name="label" value="{{ plan.label }}" required>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Beschreibung</label>
                        <textarea class="form-control" name="description" rows="3">{{ plan.description }}</textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Monatlicher Preis *</label>
                                <input type="number" class="form-control" name="monthlyPrice" step="0.01" min="0" value="{{ plan.monthlyPrice }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Jährlicher Preis *</label>
                                <input type="number" class="form-control" name="yearlyPrice" step="0.01" min="0" value="{{ plan.yearlyPrice }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Lifetime Preis *</label>
                                <input type="number" class="form-control" name="lifetimePrice" step="0.01" min="0" value="{{ plan.lifetimePrice }}" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Icon</label>
                                <input type="text" class="form-control" name="icon" value="{{ plan.icon }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Farbe</label>
                                <input type="color" class="form-control" name="color" value="{{ plan.color }}">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Max. Domains</label>
                                <input type="number" class="form-control" name="maxDomains" min="1" value="{{ plan.maxDomains }}" placeholder="Unbegrenzt">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Max. Benutzer</label>
                                <input type="number" class="form-control" name="maxUsers" min="1" value="{{ plan.maxUsers }}" placeholder="Unbegrenzt">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="isPopular" id="isPopular" {% if plan.isPopular %}checked{% endif %}>
                            <label class="form-check-label" for="isPopular">
                                Als beliebt markieren
                            </label>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-primary" onclick="updatePlan()">
                            <i class="bi bi-check me-2"></i>
                            Speichern
                        </button>
                        <a href="/admin/license-server/plans" class="btn btn-secondary">
                            <i class="bi bi-x me-2"></i>
                            Abbrechen
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
</style>

<script>
function updatePlan() {
    const form = document.getElementById('editPlanForm');
    const formData = new FormData(form);
    
    // Show loading state
    const submitBtn = document.querySelector('.btn-primary');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Speichere...';
    submitBtn.disabled = true;
    
    fetch('/admin/license-server/plans/{{ plan.id }}/update', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.href = '/admin/license-server/plans';
        } else {
            alert('Fehler beim Speichern: ' + (data.error || 'Unbekannter Fehler'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
    })
    .finally(() => {
        // Reset button state
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
}
</script>
{% endblock %}