{% extends '@SonataAdmin/standard_layout.html.twig' %}

{% block title %}Gestion du Branding - Kohinos{% endblock %}

{% block sonata_admin_content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="ml-4 mb-4">
                <i class="fa fa-paint-brush"></i> Gestion du logo et des favicon
            </h1>
            <p class="text-muted ml-4 mb-4">
                Uploadez vos images (logo, favicon, image de partage) directement depuis cette interface.
            </p>
        </div>
    </div>

    {# Flash messages #}
    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ type == 'error' ? 'danger' : type }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        {% endfor %}
    {% endfor %}

    {# Warning if upload directory not writable #}
    {% if not uploadDirWritable %}
    <div class="alert alert-danger">
        <i class="fa fa-exclamation-triangle"></i>
        <strong>Erreur de permissions !</strong>
        Le dossier <code>public/{{ uploadDir }}</code> n'existe pas ou n'est pas accessible en écriture.
        <br>
        <small>
            Exécutez : <code>mkdir -p public/{{ uploadDir }} && chmod 755 public/{{ uploadDir }}</code>
        </small>
    </div>
    {% endif %}

    {# GD Extension status #}
    {% if not gdAvailable %}
    <div class="alert alert-warning">
        <i class="fa fa-exclamation-circle"></i>
        <strong>Extension GD non disponible</strong> - La génération automatique des favicons ne fonctionnera pas.
        <br>
        <small>Installez l'extension PHP GD : <code>sudo apt-get install php-gd</code></small>
    </div>
    {% endif %}

    <div class="row">
        {# Logo Section #}
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-header bg-primary text-black">
                    <i class="fa fa-image"></i> Logo Principal
                </div>
                <div class="card-body">
                    <p class="text-muted small">
                        Logo affiché dans l'entête, les e-mails et les PDFs.
                        <br><strong>Formats :</strong> PNG, JPG, GIF, WebP, SVG
                        <br><strong>Taille max :</strong> 2 Mo
                    </p>

                    {# Current logo preview #}
                    <div class="text-center mb-3 p-3 bg-light rounded">
                        {% if currentLogo %}
                            <img src="{{ currentLogo }}" alt="Logo actuel" style="max-width: 200px; max-height: 100px;" class="img-fluid" loading="lazy">
                            <div class="mt-2">
                                <small class="text-muted">{{ currentLogo }}</small>
                            </div>
                        {% else %}
                            <div class="text-muted">
                                <i class="fa fa-image fa-3x"></i>
                                <p class="mt-2">Aucun logo configuré</p>
                            </div>
                        {% endif %}
                    </div>

                    {# Upload form #}
                    <form action="{{ path('admin_branding_upload_logo') }}" method="POST" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="logo_file" class="sr-only">Choisir un fichier</label>
                            <input type="file" class="form-control-file" id="logo_file" name="logo_file" accept="image/*" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block" {% if not uploadDirWritable %}disabled{% endif %}>
                            <i class="fa fa-upload"></i> Uploader le logo
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {# Favicon Section #}
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-header bg-success text-white">
                    <i class="fa fa-star"></i> Favicon (512x512)
                </div>
                <div class="card-body">
                    <p class="text-muted small">
                        Image carrée pour générer toutes les tailles de favicon.
                        <br><strong>Format requis :</strong> PNG 512x512 pixels (carré)
                        <br><strong>Taille max :</strong> 1 Mo
                    </p>

                    {# Current favicon preview #}
                    <div class="text-center mb-3 p-3 bg-light rounded">
                        {% if currentFavicon %}
                            <img src="{{ currentFavicon }}" alt="Favicon actuel" style="width: 64px; height: 64px;" class="img-fluid" loading="lazy">
                            <div class="mt-2">
                                <small class="text-muted">{{ currentFavicon }}</small>
                            </div>
                        {% else %}
                            <div class="text-muted">
                                <i class="fa fa-star fa-3x"></i>
                                <p class="mt-2">Aucun favicon configuré</p>
                            </div>
                        {% endif %}
                    </div>

                    {# Upload form #}
                    <form action="{{ path('admin_branding_upload_favicon') }}" method="POST" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="favicon_file" class="sr-only">Choisir un fichier</label>
                            <input type="file" class="form-control-file" id="favicon_file" name="favicon_file" accept="image/png" required>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="generate_favicons" id="generate_favicons" value="1" checked {% if not gdAvailable %}disabled{% endif %}>
                            <label class="form-check-label" for="generate_favicons">
                                Générer automatiquement toutes les tailles
                            </label>
                        </div>
                        <button type="submit" class="btn btn-success btn-block" {% if not uploadDirWritable %}disabled{% endif %}>
                            <i class="fa fa-upload"></i> Uploader le favicon
                        </button>
                    </form>

                    {# Regenerate button #}
                    {% if currentFavicon and gdAvailable %}
                    <hr>
                    <form action="{{ path('admin_branding_regenerate_favicons') }}" method="POST">
                        <button type="submit" class="btn btn-outline-secondary btn-block btn-sm">
                            <i class="fa fa-refresh"></i> Régénérer les favicons
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>

        {# OG Image Section #}
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-header bg-info text-white">
                    <i class="fa fa-share-alt"></i> Image de Partage Social
                </div>
                <div class="card-body">
                    <p class="text-muted small">
                        Image affichée lors du partage sur Facebook, LinkedIn, Twitter...
                        <br><strong>Format recommandé :</strong> 1200x630 pixels
                        <br><strong>Taille max :</strong> 5 Mo
                    </p>

                    {# Current OG image preview #}
                    <div class="text-center mb-3 p-3 bg-light rounded">
                        {% if currentOgImage %}
                            <img src="{{ currentOgImage }}" alt="Image OG actuelle" style="max-width: 200px; max-height: 105px;" class="img-fluid" loading="lazy">
                            <div class="mt-2">
                                <small class="text-muted">{{ currentOgImage }}</small>
                            </div>
                        {% else %}
                            <div class="text-muted">
                                <i class="fa fa-share-alt fa-3x"></i>
                                <p class="mt-2">Aucune image configurée</p>
                            </div>
                        {% endif %}
                    </div>

                    {# Upload form #}
                    <form action="{{ path('admin_branding_upload_og_image') }}" method="POST" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="og_image_file" class="sr-only">Choisir un fichier</label>
                            <input type="file" class="form-control-file" id="og_image_file" name="og_image_file" accept="image/*" required>
                        </div>
                        <button type="submit" class="btn btn-info btn-block" {% if not uploadDirWritable %}disabled{% endif %}>
                            <i class="fa fa-upload"></i> Uploader l'image
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {# Favicon sizes info #}
    {% if gdAvailable %}
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-info-circle"></i> Tailles de favicon générées
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <h6>Standard</h6>
                            <ul class="list-unstyled small text-muted">
                                <li>16x16, 32x32, 48x48</li>
                                <li>favicon.ico</li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <h6>Apple Touch</h6>
                            <ul class="list-unstyled small text-muted">
                                <li>57x57 → 180x180</li>
                                <li>apple-touch-icon</li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <h6>Android</h6>
                            <ul class="list-unstyled small text-muted">
                                <li>36x36 → 512x512</li>
                                <li>android-icon</li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <h6>Microsoft</h6>
                            <ul class="list-unstyled small text-muted">
                                <li>70x70 → 310x310</li>
                                <li>ms-icon</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {# Back to configuration #}
    <div class="row mt-4">
        <div class="col-12">
            <a href="{{ path('admin_app_globalparameter_list') }}" class="btn btn-secondary">
                <i class="fa fa-arrow-left"></i> Retour à la configuration
            </a>
        </div>
    </div>
</div>
{% endblock %}