{% extends 'admin/base_admin.html.twig' %}
{% block title %}Nouveau code promo{% endblock %}
{% block content %}
<div class="mb-4">
    <a href="{{ path('admin_code_promo_index') }}" class="text-muted small">← Codes promo</a>
    <h1 class="h3 mt-1">Créer un code promo</h1>
</div>

<div class="card" style="max-width:560px;">
    <div class="card-body">
        <form method="post">

            <div class="mb-3">
                <label class="form-label fw-bold">Nom du code <span class="text-danger">*</span></label>
                <input type="text" name="code" class="form-control text-uppercase"
                       placeholder="ex. LANCEMENT2025"
                       style="letter-spacing:.1em; font-family:monospace; font-size:1.1rem;"
                       required maxlength="50"
                       oninput="this.value=this.value.toUpperCase()">
                <div class="form-text">Majuscules uniquement — sera stocké en majuscules.</div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-bold">% de remise pour l'acheteur (HT) <span class="text-danger">*</span></label>
                <div class="input-group">
                    <input type="number" name="remise" class="form-control"
                           placeholder="ex. 15" min="1" max="100" step="0.01" required
                           id="remiseInput" oninput="updatePreview()">
                    <span class="input-group-text">%</span>
                </div>
                <div class="form-text" id="remisePreview"></div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-bold">Type d'usage <span class="text-danger">*</span></label>
                <div class="d-flex gap-3">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="type_usage"
                               id="usage_multiple" value="multiple" checked>
                        <label class="form-check-label" for="usage_multiple">
                            <strong>Multi-usages</strong>
                            <div class="text-muted small">Utilisable par plusieurs acheteurs</div>
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="type_usage"
                               id="usage_unique" value="unique">
                        <label class="form-check-label" for="usage_unique">
                            <strong>Usage unique</strong>
                            <div class="text-muted small">1 seule utilisation possible</div>
                        </label>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-bold">Période de validité</label>
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label small text-muted">Début</label>
                        <input type="date" name="debut_at" class="form-control">
                    </div>
                    <div class="col-6">
                        <label class="form-label small text-muted">Fin</label>
                        <input type="date" name="fin_at" class="form-control" id="finAt">
                    </div>
                </div>
                <div class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" id="sansLimite"
                           onchange="document.getElementById('finAt').disabled = this.checked;
                                     document.getElementById('finAt').value = this.checked ? '' : '';">
                    <label class="form-check-label small" for="sansLimite">
                        Pas de date de fin (illimité)
                    </label>
                </div>
            </div>

            <div class="alert alert-info small">
                <i class="bi bi-building"></i>
                <strong>Commission :</strong> 100% SANAGENCY — aucun vendeur associé à ce code.
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Créer le code promo
                </button>
                <a href="{{ path('admin_code_promo_index') }}" class="btn btn-outline-secondary">Annuler</a>
            </div>
        </form>
    </div>
</div>

<script>
function updatePreview() {
    const val = parseFloat(document.getElementById('remiseInput').value);
    const preview = document.getElementById('remisePreview');
    if (!isNaN(val) && val > 0) {
        preview.innerHTML = `L'acheteur verra : <strong class="text-primary">${val}% de remise HT</strong>`;
    } else {
        preview.textContent = '';
    }
}
</script>
{% endblock %}