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

{% block title %}Configuration Email{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0"><i class="fas fa-sliders-h me-2"></i>Configuration</h1>
</div>

{# ── Onglets navigation configuration ──────────────────────────────────── #}
<ul class="nav nav-tabs mb-4">
    <li class="nav-item">
        <a class="nav-link" href="{{ path('tenant_configuration_index') }}">
            <i class="fas fa-cog me-1"></i>Général
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ path('tenant_configuration_restaurant') }}">
            <i class="fas fa-utensils me-1"></i>Restaurant
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" href="{{ path('tenant_configuration_email') }}">
            <i class="fas fa-envelope me-1"></i>Email
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ path('tenant_configuration_notifications') }}">
            <i class="fas fa-bell me-1"></i>Notifications
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ path('tenant_configuration_personnalisation') }}">
            <i class="fas fa-palette me-1"></i>Personnalisation
        </a>
    </li>
</ul>

<form method="post" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token('config_email_smtp') }}">

<div class="row g-4" style="max-width:960px">

    {# ── Colonne gauche : Établissement & expéditeur ───────────────────── #}
    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm rounded-3 h-100">
            <div class="card-header bg-white border-bottom py-3 px-4">
                <h5 class="mb-0 fw-semibold">
                    <i class="fas fa-building me-2 text-primary"></i>Identité de l'expéditeur
                </h5>
                <small class="text-muted fw-normal">Informations affichées dans vos emails</small>
            </div>
            <div class="card-body p-4">

                {# Logo #}
                <div class="mb-4">
                    <label class="form-label fw-semibold">Logo de l'établissement</label>
                    {% if config.logo_etablissement %}
                    <div class="mb-2 p-3 border rounded text-center bg-light">
                        <img src="{{ config.logo_etablissement }}" alt="Logo actuel"
                             style="max-height:72px;max-width:240px;object-fit:contain">
                        <div class="mt-2">
                            <div class="form-check d-inline-flex align-items-center gap-2">
                                <input class="form-check-input" type="checkbox" name="supprimer_logo" value="1" id="supprimerLogo">
                                <label class="form-check-label text-danger small" for="supprimerLogo">Supprimer ce logo</label>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    <input type="file" name="logo_etablissement" class="form-control" accept="image/*">
                    <small class="text-muted">JPG, PNG, SVG — 512 Ko max. Affiché en en-tête de tous les emails.</small>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Nom de l'établissement</label>
                    <input type="text" name="nom_etablissement" class="form-control"
                           value="{{ config.nom_etablissement }}"
                           placeholder="Ex : Restaurant Scolaire">
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Email expéditeur <span class="text-danger">*</span></label>
                    <input type="email" name="email_expediteur" class="form-control" required
                           value="{{ config.email_expediteur }}"
                           placeholder="contact@etablissement.fr">
                    <small class="text-muted">Adresse qui apparaît dans le champ «&nbsp;De&nbsp;» de vos emails.</small>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Nom de l'expéditeur</label>
                    <input type="text" name="nom_expediteur" class="form-control"
                           value="{{ config.nom_expediteur }}"
                           placeholder="Ex : Restaurant Scolaire — Mairie de ...">
                </div>

                <div class="mb-0">
                    <label class="form-label fw-semibold">Signature automatique</label>
                    <textarea name="signature_email" class="form-control" rows="5">{{ config.signature_email }}</textarea>
                    <small class="text-muted">Ajoutée automatiquement en pied de chaque email envoyé (menus, commandes, emails groupés).</small>
                </div>
            </div>
        </div>
    </div>

    {# ── Colonne droite : SMTP ─────────────────────────────────────────── #}
    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm rounded-3 h-100">
            <div class="card-header bg-white border-bottom py-3 px-4">
                <h5 class="mb-0 fw-semibold">
                    <i class="fas fa-server me-2 text-secondary"></i>Serveur SMTP
                </h5>
                <small class="text-muted fw-normal">Configuration SMTP pour l'envoi d'emails</small>
            </div>
            <div class="card-body p-4">

                {% if not config.smtp_host %}
                <div class="alert alert-warning small d-flex gap-2 mb-4">
                    <i class="fas fa-exclamation-triangle mt-1 flex-shrink-0"></i>
                    <div>Aucun serveur SMTP configuré. Les emails (menus, commandes, contacts parents) ne peuvent pas être envoyés.</div>
                </div>
                {% else %}
                <div class="alert alert-success small d-flex gap-2 mb-4">
                    <i class="fas fa-check-circle mt-1 flex-shrink-0"></i>
                    <div>SMTP configuré : <strong>{{ config.smtp_host }}:{{ config.smtp_port }}</strong></div>
                </div>
                {% endif %}

                <div class="mb-3">
                    <label class="form-label fw-semibold">Serveur SMTP <span class="text-danger">*</span></label>
                    <input type="text" name="smtp_host" class="form-control"
                           value="{{ config.smtp_host }}"
                           placeholder="smtp.gmail.com">
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-7">
                        <label class="form-label fw-semibold">Port</label>
                        <input type="number" name="smtp_port" class="form-control"
                               value="{{ config.smtp_port }}" min="1" max="65535"
                               placeholder="587">
                    </div>
                    <div class="col-5">
                        <label class="form-label fw-semibold">Chiffrement</label>
                        <select name="smtp_encryption" class="form-select">
                            <option value="tls" {{ config.smtp_encryption == 'tls' ? 'selected' : '' }}>TLS (587)</option>
                            <option value="ssl" {{ config.smtp_encryption == 'ssl' ? 'selected' : '' }}>SSL (465)</option>
                            <option value="none" {{ config.smtp_encryption == 'none' ? 'selected' : '' }}>Aucun</option>
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Identifiant SMTP</label>
                    <input type="text" name="smtp_user" class="form-control"
                           value="{{ config.smtp_user }}"
                           placeholder="votre@email.fr" autocomplete="username">
                </div>

                <div class="mb-4">
                    <label class="form-label fw-semibold">Mot de passe SMTP</label>
                    <input type="password" name="smtp_pass" class="form-control"
                           placeholder="{{ config.smtp_pass ? '••••••••  (laisser vide pour conserver)' : 'Mot de passe SMTP' }}"
                           autocomplete="new-password">
                    {% if 'gmail' in config.smtp_host|lower %}
                    <small class="text-muted">
                        <i class="fas fa-info-circle text-info me-1"></i>
                        Gmail : utilisez un <strong>mot de passe d'application</strong>
                        (compte Google → Sécurité → Mots de passe des applications).
                    </small>
                    {% endif %}
                </div>

                {# Référence fournisseurs #}
                <div class="border rounded p-3 bg-light">
                    <strong class="d-block mb-2 small">
                        <i class="fas fa-lightbulb text-warning me-1"></i>Serveurs courants
                    </strong>
                    <table class="table table-sm table-borderless mb-0" style="font-size:.8rem">
                        <tr><td><strong>Gmail</strong></td><td>smtp.gmail.com</td><td class="text-muted">587 / TLS</td></tr>
                        <tr><td><strong>Outlook / O365</strong></td><td>smtp.office365.com</td><td class="text-muted">587 / TLS</td></tr>
                        <tr><td><strong>Orange</strong></td><td>smtp.orange.fr</td><td class="text-muted">587 / TLS</td></tr>
                        <tr><td><strong>SFR</strong></td><td>smtp.sfr.fr</td><td class="text-muted">587 / TLS</td></tr>
                        <tr><td><strong>OVH</strong></td><td>ssl0.ovh.net</td><td class="text-muted">465 / SSL</td></tr>
                        <tr><td><strong>La Poste</strong></td><td>smtp.laposte.net</td><td class="text-muted">587 / TLS</td></tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mt-4" style="max-width:960px">
    <button type="submit" class="btn btn-primary px-4">
        <i class="fas fa-save me-1"></i>Enregistrer la configuration email
    </button>
</div>
</form>
{% endblock %}