{% extends 'admin/_layout.html.twig' %}

{% block title %}Paramètres du site — Admin{% endblock %}
{% block page_title %}Paramètres du site{% endblock %}
{% block page_subtitle %}Configuration globale de la plateforme{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
{% endblock %}

{% block admin_body %}

<nav class="adm-breadcrumb">
    <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    <a href="{{ path('app_admin') }}">Dashboard</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">Paramètres</span>
</nav>

{{ form_start(form, {'attr': {'id': 'adm-param-form', 'novalidate': 'novalidate', 'enctype': 'multipart/form-data'}}) }}

<div class="adm-param-grid">

    {# ── Identité ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Identité du site</h3>
            <div class="adm-field">
                <label>Nom du site</label>
                {{ form_widget(form.siteName) }}
            </div>
            <div class="adm-field">
                <label>Phrase d'accroche</label>
                {{ form_widget(form.tagline, {attr: {placeholder: 'Votre slogan ici…'}}) }}
            </div>
            <div class="adm-field">
                <label>Email de contact</label>
                {{ form_widget(form.contactEmail) }}
            </div>
            <div class="adm-field">
                <label>Téléphone</label>
                {{ form_widget(form.phone) }}
            </div>
            <div class="adm-field">
                <label>Site web</label>
                {{ form_widget(form.website) }}
            </div>
            <div class="adm-field">
                <label>SIRET</label>
                {{ form_widget(form.siret) }}
            </div>
            <div class="adm-field">
                <label>Compte Twitter (SEO)</label>
                {{ form_widget(form.twitterHandle) }}
                <span style="font-size:.7rem;color:var(--muted)">Utilisé par défaut dans les Twitter Cards de toutes les pages</span>
            </div>
        </div>
    </div>

    {# ── Adresse ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Adresse</h3>
            <div class="adm-field">
                <label>Adresse</label>
                {{ form_widget(form.address) }}
            </div>
            <div class="adm-field">
                <label>Complément</label>
                {{ form_widget(form.addressComplement) }}
            </div>
            <div class="adm-field">
                <label>Code postal</label>
                {{ form_widget(form.postalCode) }}
            </div>
            <div class="adm-field">
                <label>Ville</label>
                {{ form_widget(form.city) }}
            </div>
            <div class="adm-field">
                <label>Pays</label>
                {{ form_widget(form.country) }}
            </div>
        </div>
    </div>

    {# ── Médias ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Médias</h3>
            {% for field, conf in {logo: {ratio: '0', label: 'Logo'}, favicon: {ratio: '1', label: 'Favicon'}} %}
            <div class="adm-field">
                <label>{{ conf.label }}</label>
                <input type="hidden" name="{{ field }}Cropped" id="{{ field }}-cropped">
                <input type="hidden" id="{{ field }}-original-src" value="{{ attribute(params, field) ? asset(attribute(params, field)) : '' }}">
                <div class="adm-upload-zone" data-crop="{{ field }}" data-ratio="{{ conf.ratio }}">
                    <img class="adm-upload-preview{% if not attribute(params, field) %} hidden{% endif %}" id="{{ field }}-preview"
                         src="{{ attribute(params, field) ? asset(attribute(params, field)) : '' }}" alt="{{ conf.label }}">
                    <div class="adm-upload-placeholder{% if attribute(params, field) %} hidden{% endif %}" id="{{ field }}-placeholder">
                        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        <span>Glissez ou cliquez pour charger</span>
                    </div>
                    <input type="file" class="adm-upload-input" accept="image/*,.svg">
                </div>
                <div class="adm-upload-actions{% if not attribute(params, field) %} hidden{% endif %}" id="{{ field }}-actions">
                    <button type="button" class="adm-crop-btn" data-recrop="{{ field }}" title="Recadrer">
                        <svg viewBox="0 0 24 24"><path d="M6 2v4H2"/><path d="M18 22v-4h4"/><rect x="6" y="6" width="12" height="12" rx="1"/></svg>
                        Recadrer
                    </button>
                    <button type="button" class="adm-crop-btn" data-view="{{ field }}" title="Voir en grand">
                        <svg viewBox="0 0 24 24"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
                        Agrandir
                    </button>
                    <button type="button" class="adm-crop-btn" data-change="{{ field }}" title="Changer l'image">
                        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        Changer
                    </button>
                    <button type="button" class="adm-crop-btn del" data-remove="{{ field }}" title="Supprimer">
                        <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                        Supprimer
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    {# ── Fonctionnalités ── #}
    <div class="adm-card adm-param-card">
        <div style="position:relative;z-index:1">
            <h3 class="adm-param-title">Fonctionnalités</h3>
            <div style="display:flex;flex-direction:column;gap:14px">
                <label class="adm-toggle-row">
                    <span class="adm-toggle-info">
                        <span class="adm-toggle-label">Mode maintenance</span>
                        <span class="adm-toggle-hint">Seuls les admins pourront naviguer</span>
                    </span>
                    <span class="adm-toggle-wrap">
                        {{ form_widget(form.maintenanceMode, {'attr': {'class': 'adm-toggle-input'}}) }}
                        <span class="adm-toggle-slider"></span>
                    </span>
                </label>
                <label class="adm-toggle-row">
                    <span class="adm-toggle-info">
                        <span class="adm-toggle-label">Inscription</span>
                        <span class="adm-toggle-hint">Autoriser la création de compte</span>
                    </span>
                    <span class="adm-toggle-wrap">
                        {{ form_widget(form.registrationEnabled, {'attr': {'class': 'adm-toggle-input'}}) }}
                        <span class="adm-toggle-slider"></span>
                    </span>
                </label>
                <label class="adm-toggle-row">
                    <span class="adm-toggle-info">
                        <span class="adm-toggle-label">Mot de passe oublié</span>
                        <span class="adm-toggle-hint">Réinitialisation par email</span>
                    </span>
                    <span class="adm-toggle-wrap">
                        {{ form_widget(form.forgotPasswordEnabled, {'attr': {'class': 'adm-toggle-input'}}) }}
                        <span class="adm-toggle-slider"></span>
                    </span>
                </label>
                <label class="adm-toggle-row">
                    <span class="adm-toggle-info">
                        <span class="adm-toggle-label">Réseaux sociaux</span>
                        <span class="adm-toggle-hint">Afficher dans le footer</span>
                    </span>
                    <span class="adm-toggle-wrap">
                        {{ form_widget(form.socialNetworksEnabled, {'attr': {'class': 'adm-toggle-input'}}) }}
                        <span class="adm-toggle-slider"></span>
                    </span>
                </label>
            </div>
        </div>
    </div>

    {# ── Inactivité ── #}
    <div class="adm-card adm-param-card">
        <div style="position:relative;z-index:1">
            <h3 class="adm-param-title">Inactivité</h3>
            <div style="display:flex;flex-direction:column;gap:14px">
                <label class="adm-toggle-row">
                    <span class="adm-toggle-info">
                        <span class="adm-toggle-label">Déconnexion automatique</span>
                        <span class="adm-toggle-hint">Déconnecter les utilisateurs inactifs</span>
                    </span>
                    <span class="adm-toggle-wrap">
                        {{ form_widget(form.idleLogoutEnabled, {'attr': {'class': 'adm-toggle-input'}}) }}
                        <span class="adm-toggle-slider"></span>
                    </span>
                </label>
            </div>
            <div class="adm-param-field-group">
                <div class="adm-field">
                    <label>Durée avant déconnexion (sec)</label>
                    {{ form_widget(form.idleLogoutTtl) }}
                    <div data-error="idleLogoutTtl">{{ form_errors(form.idleLogoutTtl) }}</div>
                    <span style="font-size:.7rem;color:var(--muted)">Défaut : 1 800 (30 min)</span>
                </div>
            </div>
        </div>
    </div>

    {# ── Espace client ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Espace client</h3>
            <div class="adm-field">
                <label>Durée changement MDP (sec)</label>
                {{ form_widget(form.passwordChangeTtl) }}
                <div data-error="passwordChangeTtl">{{ form_errors(form.passwordChangeTtl) }}</div>
                <span style="font-size:.7rem;color:var(--muted)">Défaut : 900 (15 min)</span>
            </div>
            <div class="adm-field">
                <label>Durée changement email (sec)</label>
                {{ form_widget(form.emailChangeTtl) }}
                <div data-error="emailChangeTtl">{{ form_errors(form.emailChangeTtl) }}</div>
                <span style="font-size:.7rem;color:var(--muted)">Défaut : 900 (15 min)</span>
            </div>
        </div>
    </div>

    {# ── Tokens ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Tokens</h3>
            <div class="adm-field">
                <label>Token réinitialisation MDP (sec)</label>
                {{ form_widget(form.resetPasswordTokenTtl) }}
                <div data-error="resetPasswordTokenTtl">{{ form_errors(form.resetPasswordTokenTtl) }}</div>
                <span style="font-size:.7rem;color:var(--muted)">Défaut : 3 600 (1h)</span>
            </div>
            <div class="adm-field">
                <label>Token vérification email (sec)</label>
                {{ form_widget(form.verificationTokenTtl) }}
                <div data-error="verificationTokenTtl">{{ form_errors(form.verificationTokenTtl) }}</div>
                <span style="font-size:.7rem;color:var(--muted)">Défaut : 86 400 (24h)</span>
            </div>
        </div>
    </div>

    {# ── Cookie banner ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Bannière cookies</h3>
            <div style="display:flex;flex-direction:column;gap:14px;margin-bottom:14px">
                <label class="adm-toggle-row">
                    <span class="adm-toggle-info">
                        <span class="adm-toggle-label">Bannière cookies</span>
                        <span class="adm-toggle-hint">Afficher la bannière de consentement RGPD</span>
                    </span>
                    <span class="adm-toggle-wrap">
                        {{ form_widget(form.cookieConsentEnabled, {'attr': {'class': 'adm-toggle-input'}}) }}
                        <span class="adm-toggle-slider"></span>
                    </span>
                </label>
            </div>
            <div class="adm-field">
                <label>Titre</label>
                {{ form_widget(form.cookieBannerTitle) }}
            </div>
            <div class="adm-field">
                <label>Texte</label>
                {{ form_widget(form.cookieBannerText) }}
            </div>
            <div class="adm-field">
                <label>Position</label>
                {{ form_widget(form.cookieBannerPosition) }}
            </div>
            <div style="display:flex;flex-direction:column;gap:14px">
                <label class="adm-toggle-row">
                    <span class="adm-toggle-info">
                        <span class="adm-toggle-label">Bouton "Tout refuser"</span>
                        <span class="adm-toggle-hint">Recommandé CNIL</span>
                    </span>
                    <span class="adm-toggle-wrap">
                        {{ form_widget(form.cookieBannerShowRefuse, {'attr': {'class': 'adm-toggle-input'}}) }}
                        <span class="adm-toggle-slider"></span>
                    </span>
                </label>
            </div>
        </div>
    </div>

</div>

<div class="adm-param-sticky-footer" style="display:flex;align-items:center;gap:8px">
    <button type="submit" class="adm-btn adm-btn-p" id="adm-param-submit">
        <svg class="btn-icon-save" viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
        Enregistrer les paramètres
    </button>
    <div style="display:flex;gap:6px;margin-left:auto">
        {% if is_granted('ROLE_SUPER_ADMIN') %}
        <a href="{{ path('app_admin_export_database') }}" class="adm-btn adm-btn-red adm-btn-sm" title="Exporter toute la base de données">
            <svg viewBox="0 0 24 24" style="margin-right:4px"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
            Base SQL
        </a>
        <a href="{{ path('app_admin_parameter_export_sql') }}" class="adm-btn adm-btn-g adm-btn-sm">
            <svg viewBox="0 0 24 24" style="margin-right:4px"><path d="M4 7V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3"/><polyline points="14 2 14 8 20 8"/><path d="M4 15h9"/><polyline points="10 12 7 15 10 18"/></svg>
            SQL
        </a>
        {% endif %}
        <a href="{{ path('app_admin_parameter_export') }}" class="adm-btn adm-btn-g adm-btn-sm">
            <svg viewBox="0 0 24 24" style="margin-right:4px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            CSV
        </a>
    </div>
</div>

{# ── Crop modal ── #}
<div class="adm-modal-overlay" id="crop-overlay">
    <div class="adm-crop-panel" onclick="event.stopPropagation()">
        <div class="adm-crop-header">
            <h3>Recadrer l'image</h3>
            <span class="adm-crop-dims" id="crop-dims"></span>
            <button type="button" class="form-close" id="crop-cancel"><svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
        </div>
        <div class="adm-crop-canvas">
            <img id="crop-image" style="display:block;max-width:100%">
        </div>
        <div class="adm-crop-toolbar">
            <div class="adm-crop-tools">
                {# Rotate #}
                <button type="button" class="adm-crop-btn" id="crop-rot-left" title="Pivoter gauche">
                    <svg viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
                </button>
                <button type="button" class="adm-crop-btn" id="crop-rot-right" title="Pivoter droite">
                    <svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"/></svg>
                </button>
                <span class="adm-crop-sep"></span>
                {# Flip #}
                <button type="button" class="adm-crop-btn" id="crop-flip-h" title="Retourner horizontalement">
                    <svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3"/><path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"/><line x1="12" y1="2" x2="12" y2="22" stroke-dasharray="3 3"/></svg>
                </button>
                <button type="button" class="adm-crop-btn" id="crop-flip-v" title="Retourner verticalement">
                    <svg viewBox="0 0 24 24"><path d="M3 8V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3"/><path d="M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"/><line x1="2" y1="12" x2="22" y2="12" stroke-dasharray="3 3"/></svg>
                </button>
                <span class="adm-crop-sep"></span>
                {# Ratio presets #}
                <button type="button" class="adm-crop-btn adm-crop-ratio active" data-ratio="0" title="Libre">Libre</button>
                <button type="button" class="adm-crop-btn adm-crop-ratio" data-ratio="1" title="1:1">1:1</button>
                <button type="button" class="adm-crop-btn adm-crop-ratio" data-ratio="1.7778" title="16:9">16:9</button>
                <button type="button" class="adm-crop-btn adm-crop-ratio" data-ratio="1.3333" title="4:3">4:3</button>
            </div>
            <div class="adm-crop-actions">
                <button type="button" class="adm-btn adm-btn-g" id="crop-cancel-btn">Annuler</button>
                <button type="button" class="adm-btn adm-btn-p" id="crop-confirm">
                    <svg viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
                    Valider
                </button>
            </div>
        </div>
    </div>
</div>

{# ── Lightbox ── #}
<div class="adm-lightbox" id="lightbox">
    <button type="button" class="adm-lightbox-close" id="lightbox-close">
        <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
    </button>
    <img id="lightbox-img" src="" alt="">
</div>

{{ form_end(form) }}

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script src="{{ asset('js/admin-parameters.js') }}"></script>
{% endblock %}