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

{% block title %}Lizenzpläne verwalten{% endblock %}

{% block body %}
{# Breadcrumb hinzufügen #}
<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 active" aria-current="page">Lizenzpläne verwalten</li>
  </ol>
</nav>

{# Bestehender Seiteninhalt #}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h1 class="h3 mb-0">Lizenzpläne verwalten</h1>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newPlanModal">
    <i class="bi bi-plus-lg me-1"></i> Neuer Lizenzplan
  </button>
</div>

{# Pläne als Cards anzeigen #}
<div class="row g-4">
  {% for plan in plans %}
    <div class="col-md-6 col-lg-4">
      <div class="card h-100 shadow-sm border-{{ plan.active ? 'primary' : 'secondary' }}">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2">
            <span class="me-2" style="font-size:2rem;color:{{ plan.color }}"><i class="bi bi-{{ plan.icon|default('card-list') }}"></i></span>
            <div>
              <h5 class="card-title mb-0">{{ plan.label }}</h5>
              <small class="text-muted">{{ plan.name }}</small>
            </div>
          </div>
          <p class="card-text small text-muted mb-2">{{ plan.description }}</p>
          <ul class="list-unstyled mb-3">
            <li><strong>Preis:</strong> {{ plan.getFormattedPriceForCycle('monthly') }} / Monat</li>
            <li><strong>Jährlich:</strong> {{ plan.getFormattedPriceForCycle('yearly') }} / Jahr</li>
            <li><strong>Lifetime:</strong> {{ plan.getFormattedPriceForCycle('lifetime') }}</li>
            <li><strong>Max. Domains:</strong> {{ plan.maxDomains ?? '∞' }}</li>
            <li><strong>Max. Nutzer:</strong> {{ plan.maxUsers ?? '∞' }}</li>
          </ul>
          <div class="mb-2">
            <span class="badge bg-{{ plan.active ? 'success' : 'secondary' }}">{{ plan.active ? 'Aktiv' : 'Inaktiv' }}</span>
            {% if plan.isPopular %}<span class="badge bg-warning text-dark">Beliebt</span>{% endif %}
          </div>
          <div class="d-flex justify-content-between">
            <a href="{{ path('license_server_plans_edit', {id: plan.id}) }}" class="btn btn-outline-primary btn-sm">
              <i class="bi bi-pencil"></i> Bearbeiten
            </a>
            <a href="{{ path('license_server_plans_delete', {id: plan.id}) }}" class="btn btn-outline-danger btn-sm" onclick="return confirm('Diesen Plan wirklich löschen?')">
              <i class="bi bi-trash"></i> Löschen
            </a>
          </div>
        </div>
      </div>
    </div>
  {% else %}
    <div class="col-12">
      <div class="alert alert-info">Noch keine Lizenzpläne vorhanden.</div>
    </div>
  {% endfor %}
</div>

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

.plan-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
}

.price-item {
    padding: 10px;
}

.price-label {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.price-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #495057;
}

.limit-item {
    padding: 10px;
}

.limit-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #495057;
}

.limit-label {
    font-size: 0.8rem;
    color: #6c757d;
}
</style>

<!-- Neuer Plan Modal -->
<div class="modal fade" id="newPlanModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Neuer Lizenzplan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="newPlanForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Name *</label>
                                <input type="text" class="form-control" name="name" placeholder="basic" required>
                            </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" placeholder="Basic" required>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Beschreibung</label>
                        <textarea class="form-control" name="description" rows="3" placeholder="Beschreibung des Plans..."></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" 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" 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" 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" placeholder="card-list" value="card-list">
                            </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="#007bff">
                            </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" 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" placeholder="Unbegrenzt">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="isPopular" id="isPopular">
                            <label class="form-check-label" for="isPopular">
                                Als beliebt markieren
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" onclick="createPlan()">Plan erstellen</button>
            </div>
        </div>
    </div>
</div>

<script>
function createPlan() {
    const form = document.getElementById('newPlanForm');
    const formData = new FormData(form);
    
    // Show loading state
    const submitBtn = document.querySelector('#newPlanModal .btn-primary');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Erstelle...';
    submitBtn.disabled = true;
    
    fetch('/admin/license-server/plans/create', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Close modal and reload
            const modal = bootstrap.Modal.getInstance(document.getElementById('newPlanModal'));
            modal.hide();
            location.reload();
        } else {
            alert('Fehler beim Erstellen des Plans: ' + (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;
    });
}

function editPlan(id) {
    window.location.href = `/admin/license-server/plans/${id}/edit`;
}

function togglePlan(id) {
    fetch(`/admin/license-server/plans/${id}/toggle`, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Fehler beim Umschalten: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
    });
}

function deletePlan(id) {
    if (confirm('Plan wirklich löschen?')) {
        fetch(`/admin/license-server/plans/${id}/delete`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Fehler beim Löschen: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
        });
    }
}
</script>
{% endblock %}