{% extends 'admin/base.html' %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/css/bootstrap-colorpicker.min.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>{% if section %}Modifier la section{% else %}Ajouter une section{% endif %}</h1>
        <div>
            <a href="{{ url_for('admin.sections') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Retour à la liste
            </a>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <form method="post" class="needs-validation" enctype="multipart/form-data" novalidate>
                {{ form.hidden_tag() }}
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.page_id.label(class="form-label") }}
                            {{ form.page_id(class="form-select") }}
                            {% if form.page_id.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.page_id.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.section_type.label(class="form-label") }}
                            {{ form.section_type(class="form-select", id="section_type") }}
                            {% if form.section_type.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.section_type.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-8">
                        <div class="form-group">
                            {{ form.title.label(class="form-label") }}
                            {{ form.title(class="form-control") }}
                            {% if form.title.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.title.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form.order.label(class="form-label") }}
                            {{ form.order(class="form-control", type="number") }}
                            <div class="form-text">Ordre d'affichage</div>
                            {% if form.order.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.order.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form.is_active.label(class="form-label d-block") }}
                            <div class="form-check form-switch mt-2">
                                {{ form.is_active(class="form-check-input") }}
                                <label class="form-check-label" for="{{ form.is_active.id }}">Activé</label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="form-group mb-3">
                    {{ form.content.label(class="form-label") }}
                    {{ form.content(class="form-control summernote", rows=8) }}
                    {% if form.content.errors %}
                    <div class="invalid-feedback d-block">
                        {% for error in form.content.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.image.label(class="form-label") }}
                            {{ form.image(class="form-control") }}
                            <div class="form-text">Formats acceptés: JPG, PNG, JPEG</div>
                            {% if form.image.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.image.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                            {% if section and section.image_url %}
                            <div class="mt-2">
                                <p>Image actuelle:</p>
                                <img src="{{ url_for('static', filename=section.image_url) }}" alt="{{ section.title }}" style="max-width: 200px; max-height: 100px;" class="img-thumbnail">
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            {{ form.background_color.label(class="form-label") }}
                            <div class="input-group colorpicker-component">
                                {{ form.background_color(class="form-control") }}
                                <span class="input-group-text"><i></i></span>
                            </div>
                            {% if form.background_color.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.background_color.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="form-group">
                            {{ form.css_class.label(class="form-label") }}
                            {{ form.css_class(class="form-control") }}
                            <div class="form-text">Classes CSS additionnelles (séparées par des espaces)</div>
                            {% if form.css_class.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.css_class.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/js/bootstrap-colorpicker.min.js"></script>
<script>
    $(document).ready(function() {
        // Initialize Summernote wysiwyg editor
        $('.summernote').summernote({
            lang: 'fr-FR',
            height: 300,
            toolbar: [
                ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
                ['font', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });
        
        // Initialize color picker
        $('.colorpicker-component').colorpicker({
            format: 'hex'
        });
        
        // Toggle content editor based on section type
        $('#section_type').on('change', function() {
            var sectionType = $(this).val();
            
            // If specialized section type, show different fields or instructions
            if (sectionType === 'gallery' || sectionType === 'products' || sectionType === 'services') {
                $('.summernote').summernote('disable');
                $('.summernote').summernote('code', '<p>Ce type de section a un format prédéfini. Vous pouvez personnaliser le titre et les options d\'affichage.</p>');
            } else {
                $('.summernote').summernote('enable');
            }
        });
        
        // Trigger change event on load to handle existing selections
        $('#section_type').trigger('change');
    });
</script>
{% endblock %}