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

{% block title %}Configuration Personnalisation{% 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" 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 active" href="{{ path('tenant_configuration_personnalisation') }}">
            <i class="fas fa-palette me-1"></i>Personnalisation
        </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_configuration_personnalisation') }}" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{{ csrf_token('config_personnalisation') }}">
    <input type="hidden" name="supprimer_logo" id="supprimer_logo" value="0">

    <div class="row g-4">

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

            {# ── Couleurs ─────────────────────────────────────────────────────── #}
            <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-palette me-2 text-primary"></i>Couleurs
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">
                        <div class="col-sm-6">
                            <label class="form-label fw-semibold">Couleur principale</label>
                            <div class="d-flex align-items-center gap-3">
                                <input type="color" name="couleur_principale" id="couleur_principale"
                                       class="form-control form-control-color"
                                       value="{{ config.couleur_principale }}" title="Couleur principale">
                                <input type="text" id="hex_principale" class="form-control form-control-sm font-monospace"
                                       value="{{ config.couleur_principale }}" maxlength="7" style="width:90px"
                                       placeholder="#2c6e49">
                            </div>
                            <div class="form-text">En-têtes, boutons, accents</div>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label fw-semibold">Couleur secondaire</label>
                            <div class="d-flex align-items-center gap-3">
                                <input type="color" name="couleur_secondaire" id="couleur_secondaire"
                                       class="form-control form-control-color"
                                       value="{{ config.couleur_secondaire }}" title="Couleur secondaire">
                                <input type="text" id="hex_secondaire" class="form-control form-control-sm font-monospace"
                                       value="{{ config.couleur_secondaire }}" maxlength="7" style="width:90px"
                                       placeholder="#1a4a2e">
                            </div>
                            <div class="form-text">Survols, accents secondaires</div>
                        </div>
                    </div>
                    <div class="alert alert-light border small mt-4 mb-0">
                        <div class="fw-semibold mb-1"><i class="fas fa-circle-info me-1 text-primary"></i>Ce réglage agit sur :</div>
                        <ul class="mb-0 ps-3">
                            <li>L'interface web (topbar, sidebar, boutons) — uniquement en thème <strong>Personnalisé</strong></li>
                            <li>PDF Menus — couleur de fond de l'en-tête et des titres de jours</li>
                        </ul>
                        <div class="text-muted mt-1"><i class="fas fa-times-circle me-1 text-danger"></i>Pas d'effet sur les PDFs commandes, synthèses ou HACCP.</div>
                    </div>

                    <div class="mt-3">
                        <label class="form-label small text-muted">Aperçu</label>
                        <div id="color-preview" class="rounded-3 p-3 d-flex align-items-center gap-3" style="background:{{ config.couleur_principale }}">
                            <span class="text-white fw-semibold">GestRestoSco</span>
                            <span id="preview-badge" class="badge text-white" style="background:{{ config.couleur_secondaire }}">En-tête rapport</span>
                        </div>
                    </div>
                </div>
            </div>

            {# ── Thème ────────────────────────────────────────────────────────── #}
            <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-moon me-2 text-secondary"></i>Thème de l'interface
                </div>
                <div class="card-body p-4">
                    <div style="max-width:300px">
                        <label class="form-label fw-semibold">Thème</label>
                        <select name="theme" class="form-select">
                            <option value="clair"       {{ config.theme == 'clair'       ? 'selected' }}>☀️ Clair</option>
                            <option value="sombre"      {{ config.theme == 'sombre'      ? 'selected' }}>🌙 Sombre</option>
                            <option value="personnalise" {{ config.theme == 'personnalise' ? 'selected' }}>🎨 Personnalisé (couleurs ci-dessus)</option>
                        </select>
                    </div>
                    <div class="alert alert-info small mt-3 mb-1">
                        <i class="fas fa-info-circle me-1"></i>
                        Le thème <strong>Personnalisé</strong> applique vos couleurs choisies à l'en-tête de l'application.
                    </div>
                    <div class="alert alert-light border small mb-0">
                        <div class="fw-semibold mb-1"><i class="fas fa-circle-info me-1 text-primary"></i>Ce réglage agit sur :</div>
                        <ul class="mb-0 ps-3">
                            <li>L'interface web uniquement (topbar, sidebar, fond de page en mode sombre)</li>
                        </ul>
                        <div class="text-muted mt-1"><i class="fas fa-times-circle me-1 text-danger"></i>Aucun effet sur les documents PDF.</div>
                    </div>
                </div>
            </div>

            {# ── Logo documents ───────────────────────────────────────────────── #}
            <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-image me-2 text-success"></i>Logo pour les documents
                </div>
                <div class="card-body p-4">
                    <div class="alert alert-light border small mb-4">
                        <div class="fw-semibold mb-1"><i class="fas fa-circle-info me-1 text-primary"></i>Ce réglage agit sur :</div>
                        <ul class="mb-0 ps-3">
                            <li>PDF Bon de commande — logo à droite dans l'en-tête <span class="badge bg-success">actif</span></li>
                            <li>PDF Menus — logo dans l'en-tête</li>
                            <li>PDFs Synthèses (mensuelle, annuelle, répartition)</li>
                            <li>PDFs HACCP (tous les formulaires + export sélectif)</li>
                            <li>PDF Présences (récapitulatif catégorie)</li>
                        </ul>
                    </div>
                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input" type="checkbox" role="switch"
                               name="logo_rapports" id="logo_rapports"
                               {{ config.logo_rapports == 'true' ? 'checked' }}>
                        <label class="form-check-label fw-semibold" for="logo_rapports">
                            Inclure le logo dans les rapports et documents PDF
                        </label>
                    </div>

                    {% if config.logo_documents %}
                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-muted">Logo actuel</label>
                            <div class="d-flex align-items-center gap-3 p-3 bg-light rounded-3">
                                <img src="{{ config.logo_documents }}" alt="Logo actuel" style="max-height:60px; max-width:160px; object-fit:contain;">
                                <button type="button" class="btn btn-sm btn-outline-danger" id="btn-supprimer-logo">
                                    <i class="fas fa-trash me-1"></i>Supprimer
                                </button>
                            </div>
                        </div>
                    {% endif %}

                    <div>
                        <label class="form-label fw-semibold">{{ config.logo_documents ? 'Remplacer le logo' : 'Téléverser un logo' }}</label>
                        <input type="file" name="logo_documents" class="form-control" accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml">
                        <div class="form-text">JPG, PNG, GIF, WEBP ou SVG — max. 512 Ko. Recommandé : 200×60 px.</div>
                    </div>
                </div>
            </div>

            {# ── Textes documents ─────────────────────────────────────────────── #}
            <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-file-alt me-2 text-warning"></i>Textes des documents
                </div>
                <div class="card-body p-4">
                    <div class="alert alert-light border small mb-4">
                        <div class="fw-semibold mb-1"><i class="fas fa-circle-info me-1 text-primary"></i>Ces textes agissent sur :</div>
                        <ul class="mb-0 ps-3">
                            <li>PDF Menus — en-tête et pied de page du document imprimé ou téléchargé</li>
                        </ul>
                        <div class="text-muted mt-1"><i class="fas fa-times-circle me-1 text-danger"></i>Pas d'effet sur les PDFs commandes, synthèses ou HACCP.</div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-semibold">En-tête personnalisé</label>
                        <textarea name="entete_personnalise" class="form-control" rows="3"
                                  placeholder="Ex : Commune de Saint-Martin — Service de Restauration Scolaire">{{ config.entete_personnalise }}</textarea>
                        <div class="form-text">Apparaît en haut des PDFs menus (impression + téléchargement).</div>
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-semibold">Pied de page personnalisé</label>
                        <textarea name="pied_page_personnalise" class="form-control" rows="3"
                                  placeholder="Ex : Tél. 05.49.XX.XX.XX — restauration@mairie.fr">{{ config.pied_page_personnalise }}</textarea>
                        <div class="form-text">Apparaît en bas des PDFs menus (impression + téléchargement).</div>
                    </div>
                </div>
            </div>

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

        </div>

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

            <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-eye me-2 text-primary"></i>Configuration actuelle
                </div>
                <div class="card-body p-4 small">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2 d-flex align-items-center gap-2">
                            <strong>Couleur principale :</strong>
                            <span class="d-inline-block rounded-circle border" style="width:16px;height:16px;background:{{ config.couleur_principale }}"></span>
                            <code>{{ config.couleur_principale }}</code>
                        </li>
                        <li class="mb-2 d-flex align-items-center gap-2">
                            <strong>Couleur secondaire :</strong>
                            <span class="d-inline-block rounded-circle border" style="width:16px;height:16px;background:{{ config.couleur_secondaire }}"></span>
                            <code>{{ config.couleur_secondaire }}</code>
                        </li>
                        <li class="mb-2">
                            <strong>Thème :</strong>
                            <span class="ms-1">
                                {% if config.theme == 'clair' %}☀️ Clair
                                {% elseif config.theme == 'sombre' %}🌙 Sombre
                                {% else %}🎨 Personnalisé{% endif %}
                            </span>
                        </li>
                        <li class="mb-2">
                            <strong>Logo sur rapports :</strong>
                            {% if config.logo_rapports == '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>
                        <li class="mb-0">
                            <strong>Logo chargé :</strong>
                            {% if config.logo_documents %}
                                <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>

            <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>À quoi ça sert
                </div>
                <div class="card-body p-4 small">
                    <p class="mb-2"><strong>Couleurs</strong></p>
                    <p class="text-muted mb-3">Personnalisez l'identité visuelle de votre établissement sur les documents exportés et les en-têtes.</p>
                    <p class="mb-2"><strong>Logo</strong></p>
                    <p class="text-muted mb-3">Votre logo sera affiché sur les menus, factures, bons de commande et rapports PDF.</p>
                    <p class="mb-2"><strong>Textes</strong></p>
                    <p class="text-muted mb-0">L'en-tête et le pied de page apparaissent sur tous les documents imprimables.</p>
                </div>
            </div>

        </div>
    </div>

</form>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Sync color picker ↔ hex input (principale)
    const pickerP = document.getElementById('couleur_principale');
    const hexP    = document.getElementById('hex_principale');
    const preview = document.getElementById('color-preview');

    pickerP.addEventListener('input', function () {
        hexP.value = this.value;
        preview.style.background = this.value;
    });
    hexP.addEventListener('input', function () {
        if (/^#[0-9a-fA-F]{6}$/.test(this.value)) {
            pickerP.value = this.value;
            preview.style.background = this.value;
        }
    });

    // Sync color picker ↔ hex input (secondaire)
    const pickerS = document.getElementById('couleur_secondaire');
    const hexS    = document.getElementById('hex_secondaire');
    const badge   = document.getElementById('preview-badge');

    pickerS.addEventListener('input', function () {
        hexS.value = this.value;
        badge.style.background = this.value;
    });
    hexS.addEventListener('input', function () {
        if (/^#[0-9a-fA-F]{6}$/.test(this.value)) {
            pickerS.value = this.value;
            badge.style.background = this.value;
        }
    });

    // Suppression logo
    const btnSuppr = document.getElementById('btn-supprimer-logo');
    if (btnSuppr) {
        btnSuppr.addEventListener('click', function () {
            document.getElementById('supprimer_logo').value = '1';
            btnSuppr.closest('.mb-3').style.display = 'none';
        });
    }
});
</script>
{% endblock %}