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

{% block title %}Automatisation des ventes{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 fw-bold page-title mb-0"><i class="fas fa-tag me-2"></i>Tarifs restauration</h1>
        <small class="text-muted">Grille tarifaire et automatisation des ventes</small>
    </div>
    <a href="{{ path('tenant_tarifs_new') }}" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i>Nouveau tarif
    </a>
</div>

{# ── Onglets navigation tarifs ────────────────────────────────────────────── #}
<ul class="nav nav-tabs mb-4">
    <li class="nav-item">
        <a class="nav-link" href="{{ path('tenant_tarifs_index') }}">
            <i class="fas fa-euro-sign me-1"></i>Tarifs
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" href="{{ path('tenant_tarifs_automatisation') }}">
            <i class="fas fa-robot me-1"></i>Automatisation
        </a>
    </li>
</ul>

{% for msg in app.flashes('success') %}
    <div class="alert alert-success alert-dismissible fade show">{{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
{% endfor %}
{% for msg in app.flashes('error') %}
    <div class="alert alert-danger alert-dismissible fade show">{{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
{% endfor %}

<form method="post" action="{{ path('tenant_tarifs_automatisation') }}">
    <input type="hidden" name="_token" value="{{ csrf_token('tarif_automatisation') }}">

    <div class="row g-4">

        {# ── Colonne gauche ───────────────────────────────────────────────── #}
        <div class="col-lg-8">

            {# Activation #}
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-power-off me-2 text-primary"></i>Activation
                </div>
                <div class="card-body p-4">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" role="switch"
                               name="auto_generation_active" id="auto_generation_active"
                               {{ config.auto_generation_active == 'true' ? 'checked' }}>
                        <label class="form-check-label fw-semibold" for="auto_generation_active">
                            Activer la génération automatique quotidienne des ventes
                        </label>
                    </div>
                    <p class="text-muted small mb-0">
                        Lorsqu'activée, une vente sera automatiquement générée chaque jour à l'horaire configuré en calculant les recettes depuis les présences enregistrées et les tarifs.
                    </p>
                </div>
            </div>

            {# Horaire #}
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-clock me-2 text-info"></i>Horaire de génération
                </div>
                <div class="card-body p-4">
                    <div class="mb-3" style="max-width:200px">
                        <label class="form-label fw-semibold">Heure de génération automatique</label>
                        <input type="time" name="heure_generation" class="form-control"
                               value="{{ config.heure_generation }}">
                    </div>
                    <div class="alert alert-info small mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        <strong>Recommandé : 14h30</strong> — après le service de midi, une fois les présences saisies.
                    </div>
                </div>
            </div>

            {# Personnel automatique #}
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-user-tie me-2 text-secondary"></i>Personnel automatique
                </div>
                <div class="card-body p-4">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" role="switch"
                               name="inclure_personnel_auto" id="inclure_personnel_auto"
                               {{ config.inclure_personnel_auto == 'true' ? 'checked' }}>
                        <label class="form-check-label fw-semibold" for="inclure_personnel_auto">
                            Inclure automatiquement les repas du personnel
                        </label>
                    </div>
                    <div id="zone-personnel" {{ config.inclure_personnel_auto == 'true' ? '' : 'style="display:none"' }}>
                        <div class="mb-0" style="max-width:200px">
                            <label class="form-label small fw-semibold">Nombre de repas personnel par défaut</label>
                            <input type="number" name="nb_personnel_defaut" class="form-control"
                                   value="{{ config.nb_personnel_defaut }}" min="0" placeholder="Ex : 3">
                            <div class="form-text">Ce nombre sera ajouté à chaque vente générée.</div>
                        </div>
                    </div>
                    <div class="alert alert-warning small mt-3 mb-0">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        Si le personnel mange de façon variable, laissez désactivé et ajustez manuellement chaque jour.
                    </div>
                </div>
            </div>

            {# Notification email #}
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-bell me-2 text-warning"></i>Notification email
                </div>
                <div class="card-body p-4">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" role="switch"
                               name="notification_email" id="notification_email"
                               {{ config.notification_email == 'true' ? 'checked' }}>
                        <label class="form-check-label fw-semibold" for="notification_email">
                            Envoyer une notification email après chaque génération
                        </label>
                    </div>
                    <div id="zone-email" {{ config.notification_email == 'true' ? '' : 'style="display:none"' }}>
                        <div class="mb-0" style="max-width:380px">
                            <label class="form-label small fw-semibold">Email destinataire</label>
                            <input type="email" name="email_notification" class="form-control"
                                   value="{{ config.email_notification }}"
                                   placeholder="gestionnaire@etablissement.fr">
                        </div>
                    </div>
                </div>
            </div>

            {# Notes #}
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-sticky-note me-2 text-muted"></i>Notes
                </div>
                <div class="card-body p-4">
                    <textarea name="notes" class="form-control" rows="3"
                              placeholder="Notes personnelles sur la configuration...">{{ config.notes }}</textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-1"></i>Enregistrer la configuration
            </button>

        </div>

        {# ── Colonne droite : état actuel + aide ──────────────────────────── #}
        <div class="col-lg-4">

            {# État actuel #}
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-info-circle me-2 text-primary"></i>Configuration actuelle
                </div>
                <div class="card-body p-4">
                    <ul class="list-unstyled mb-0 small">
                        <li class="mb-2">
                            <strong>État :</strong>
                            {% if config.auto_generation_active == 'true' %}
                                <span class="badge bg-success ms-1">Activée</span>
                            {% else %}
                                <span class="badge bg-secondary ms-1">Désactivée</span>
                            {% endif %}
                        </li>
                        <li class="mb-2">
                            <strong>Horaire :</strong>
                            <span class="ms-1">{{ config.heure_generation }}</span>
                        </li>
                        <li class="mb-2">
                            <strong>Personnel auto :</strong>
                            {% if config.inclure_personnel_auto == 'true' %}
                                <span class="ms-1">{{ config.nb_personnel_defaut }} repas</span>
                            {% else %}
                                <span class="text-muted ms-1">Non</span>
                            {% endif %}
                        </li>
                        <li class="mb-0">
                            <strong>Notification :</strong>
                            {% if config.notification_email == 'true' %}
                                <span class="ms-1 text-success"><i class="fas fa-check"></i> Oui</span>
                            {% else %}
                                <span class="text-muted ms-1">Non</span>
                            {% endif %}
                        </li>
                    </ul>
                </div>
            </div>

            {# Aide #}
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-question-circle me-2 text-info"></i>Comment configurer
                </div>
                <div class="card-body p-4 small">
                    <ol class="mb-3 ps-3">
                        <li class="mb-1">Activez l'automatisation</li>
                        <li class="mb-1">Choisissez l'horaire <strong>après le service de midi</strong></li>
                        <li class="mb-1">Configurez le personnel si fixe</li>
                        <li class="mb-1">Optionnellement activez les notifications</li>
                        <li>Enregistrez</li>
                    </ol>
                    <hr>
                    <p class="mb-1"><strong>Bonnes pratiques</strong></p>
                    <ul class="mb-0 ps-3">
                        <li class="mb-1">Horaire recommandé : <strong>14h30</strong></li>
                        <li class="mb-1">Laissez le personnel en manuel si variable</li>
                        <li>Vérifiez quotidiennement les ventes générées</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

</form>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('inclure_personnel_auto').addEventListener('change', function () {
        document.getElementById('zone-personnel').style.display = this.checked ? 'block' : 'none';
    });
    document.getElementById('notification_email').addEventListener('change', function () {
        document.getElementById('zone-email').style.display = this.checked ? 'block' : 'none';
    });
});
</script>
{% endblock %}