{# templates/admin/fiche_outil/new.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Créer une fiche outil{% endblock %}

{% block body %}
    {% set types = type_fiche_outil() %}

    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-8">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-primary text-white">
                        <h2 class="mb-0">
                            <i class="fas fa-tools me-2"></i>
                            Nouvelle fiche outil
                        </h2>
                    </div>
                    <div class="card-body">
                        {{ form_start(form) }}

                        <div class="mb-3">
                            {{ form_label(form.titre, 'Titre', {'label_attr': {'class': 'form-label fw-bold'}}) }}
                            {{ form_widget(form.titre, {'attr': {'class': 'form-control', 'rows': 3, 'placeholder': 'Titre de la fiche'}}) }}
                            {{ form_errors(form.titre) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.type, 'Type de ressource', {'label_attr': {'class': 'form-label fw-bold'}}) }}
                            {{ form_widget(form.type, {
                                'attr': {
                                    'class': 'form-select js-fiche-type',
                                    'data-url-value': types.URL,
                                    'data-standard-value': types.STANDARD,
                                    'data-fichier-value': types.FICHIER
                                }
                            }) }}
                            {{ form_errors(form.type) }}
                        </div>

                        <div class="mb-3">
                            {{ form_label(form.description, 'Description', {'label_attr': {'class': 'form-label fw-bold'}}) }}
                            {{ form_widget(form.description, {'attr': {'class': 'form-control', 'rows': 3, 'placeholder': 'Décrivez brièvement l\'utilité de la fiche'}}) }}
                            {{ form_errors(form.description) }}
                        </div>

                        {# Groupe Fichier (visible uniquement pour FICHIER) #}
                        <div id="fichier-group" class="mb-3 d-none">
                            {{ form_label(form.fichier, 'Fichier', {'label_attr': {'class': 'form-label fw-bold'}}) }}
                            {{ form_widget(form.fichier, {'attr': {'class': 'form-control', 'data-fichier-field': true}}) }}
                            {{ form_errors(form.fichier) }}
                            <div class="form-text">Sélectionnez un fichier à télécharger.</div>
                        </div>

                        {# Groupe URL (visible uniquement pour URL Externe) #}
                        <div id="url-group" class="mb-3 d-none">
                            {{ form_label(form.url, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                            {{ form_widget(form.url, {'attr': {'class': 'form-control','data-url-field': true}}) }}
                            {{ form_errors(form.url) }}
                        </div>

                        <div class="champs-standard d-none">
                            {# Groupe Question/Réponse (visible pour Standard) #}
                            <div id="standard-fields">
                                <div class="mb-3">
                                    {{ form_label(form.question, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(form.question, {'attr': {'class': 'form-control', 'data-standard-field': true}}) }}
                                    {{ form_errors(form.question) }}
                                </div>

                                <div class="mb-3">
                                    {{ form_label(form.reponse, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(form.reponse, {'attr': {'class': 'form-control', 'data-standard-field': true}}) }}
                                    {{ form_errors(form.reponse) }}
                                </div>
                            </div>
                            <div id="qcm-group">
                                <div class="mb-3">
                                    {{ form_label(form.informationsComplementairesType, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(form.informationsComplementairesType, {'attr': {'class': 'form-select', 'data-standard-field': true, 'rows': 3, 'placeholder': 'Informations complémentaires'}}) }}
                                    {{ form_errors(form.informationsComplementairesType) }}
                                </div>

                                <div class="mb-3">
                                    {{ form_label(form.informationsComplementairesContenu, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(form.informationsComplementairesContenu, {'attr': {'class': 'form-select', 'data-standard-field': true, 'rows': 3, 'placeholder': 'Informations complémentaires'}}) }}
                                    {{ form_errors(form.informationsComplementairesContenu) }}
                                </div>

                                <div class="mb-3">
                                    {{ form_label(form.facturationType, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(form.facturationType, {'attr': {'class': 'form-select', 'data-standard-field': true, 'rows': 3, 'placeholder': 'Informations complémentaires'}}) }}
                                    {{ form_errors(form.facturationType) }}
                                </div>

                                <div class="mb-3">
                                    {{ form_label(form.facturationContenu, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(form.facturationContenu, {'attr': {'class': 'form-select', 'data-standard-field': true, 'rows': 3, 'placeholder': 'Contenu de la facturation'}}) }}
                                    {{ form_errors(form.facturationContenu) }}
                                </div>

                                <div class="mb-3">
                                    {{ form_label(form.definitionType, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(form.definitionType, {'attr': {'class': 'form-select', 'data-standard-field': true, 'rows': 3, 'placeholder': 'Informations complémentaires'}}) }}
                                    {{ form_errors(form.definitionType) }}
                                </div>

                                <div class="mb-3">
                                    {{ form_label(form.definitionContenu, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                    {{ form_widget(form.definitionContenu, {'attr': {'class': 'form-select', 'data-standard-field': true, 'rows': 3, 'placeholder': 'Contenu de la définition'}}) }}
                                    {{ form_errors(form.definitionContenu) }}
                                </div>

                                {# Section Icônes - Upload d'images (visible uniquement pour Standard) #}
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        {{ form_label(form.icone1, 'Icône 1 (Image)', {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                        <div class="image-upload-container">
                                            {{ form_widget(form.icone1, {'attr': {'class': 'form-control image-upload', 'data-preview': 'preview-icone1', 'data-standard-field': true}}) }}
                                            <div class="image-preview mt-2" id="preview-icone1">
                                                <img src="" alt="Aperçu icône 1" class="img-thumbnail d-none" style="max-width: 100px; max-height: 100px;">
                                                <div class="preview-placeholder text-center p-3 border border-dashed rounded">
                                                    <i class="fas fa-image text-muted"></i>
                                                    <p class="text-muted mb-0 small">Aperçu de l'image</p>
                                                </div>
                                            </div>
                                        </div>
                                        {{ form_errors(form.icone1) }}
                                    </div>
                                    <div class="col-md-6">
                                        {{ form_label(form.icone2, 'Icône 2 (Image)', {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                        <div class="image-upload-container">
                                            {{ form_widget(form.icone2, {'attr': {'class': 'form-control image-upload', 'data-preview': 'preview-icone2', 'data-standard-field': true}}) }}
                                            <div class="image-preview mt-2" id="preview-icone2">
                                                <img src="" alt="Aperçu icône 2" class="img-thumbnail d-none" style="max-width: 100px; max-height: 100px;">
                                                <div class="preview-placeholder text-center p-3 border border-dashed rounded">
                                                    <i class="fas fa-image text-muted"></i>
                                                    <p class="text-muted mb-0 small">Aperçu de l'image</p>
                                                </div>
                                            </div>
                                        </div>
                                        {{ form_errors(form.icone2) }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-center gap-3 mt-4">
                            <a href="{{ app.request.headers.get('referer') ?? path('app_fiche_outil_index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> Retour à la liste
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Enregistrer la fiche
                            </button>
                        </div>

                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/creation-fiche-outil.js') }}" defer></script>
{% endblock %}