{% extends "admin_base.html" %}
{% block content %}

<h1 class="mb-4">Edit Multi-Day Tour</h1>

<form method="POST" enctype="multipart/form-data">
    {{ form.hidden_tag() }}
    {% for field in form if field.widget.input_type != 'hidden' and field.name != 'tour_days' %}
    <div class="mb-3">
        {{ field.label(class="form-label") }}
        {% if field.type == 'FileField' %}
            {{ field(class="form-control") }}
            {% if tour.image %}
                <img src="{{ url_for('static', filename='uploads/' + tour.image) }}" alt="{{ tour.title }}" class="img-thumbnail mt-2" style="max-width: 200px">
                <p>Current image: {{ tour.image }}</p>
            {% endif %}
        {% elif field.type == 'TextAreaField' %}
            {{ field(class="form-control ckeditor") }}
        {% else %}
            {{ field(class="form-control") }}
        {% endif %}
        {% for error in field.errors %}
            <span class="text-danger">{{ error }}</span>
        {% endfor %}
    </div>
    {% endfor %}

    <h3>Tour Days</h3>
    <div id="tour-days-container">
        {% for day_form in form.tour_days %}
        <div class="card mb-3 tour-day">
            <div class="card-body">
                <h5 class="card-title">Day {{ loop.index }}</h5>
                {% for field in day_form.form if field.widget.input_type != 'hidden' %}
                <div class="mb-3">
                    {{ field.label(class="form-label") }}
                    {% if field.type == 'TextAreaField' %}
                        {{ field(class="form-control ckeditor") }}
                    {% else %}
                        {{ field(class="form-control") }}
                    {% endif %}
                    {% for error in field.errors %}
                        <span class="text-danger">{{ error }}</span>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>

    <button type="button" id="add-day" class="btn btn-secondary mb-3">Add Another Day</button>

    {{ form.submit(class="btn btn-primary") }}
</form>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/ckeditor4@4.25.0/ckeditor.min.js" integrity="sha384-2vYGz6qeXQOVJ9gqtZrC91Dk1ZlzM2CaBIWP3OiCRY0aX2GUW4uRUf1Ty5J+Wbqt" crossorigin="anonymous"></script>
<script>
    function initCKEditor() {
        document.querySelectorAll('textarea.ckeditor').forEach(function(textarea) {
            CKEDITOR.replace(textarea, {
                
               toolbar: 'Basic',
               height: 300,
               removePlugins: 'elementspath',
               
            });
        });
    }

    // Initialize CKEditor for existing textareas
    initCKEditor();

    // JavaScript to add new tour days dynamically
    document.getElementById('add-day').addEventListener('click', function() {
        var dayContainer = document.getElementById('tour-days-container');
        var newDay = dayContainer.children[0].cloneNode(true);
        var dayNumber = dayContainer.children.length + 1;
        newDay.querySelector('.card-title').textContent = 'Day ' + dayNumber;
        
        // Clear input values
        newDay.querySelectorAll('input, textarea').forEach(function(input) {
            input.value = '';
            // Destroy existing CKEditor instance if any
            if(input.id && CKEDITOR.instances[input.id]) {
                CKEDITOR.instances[input.id].destroy();
            }
        });
        
        // Update input names and ids
        newDay.querySelectorAll('input, textarea').forEach(function(input) {
            var name = input.getAttribute('name');
            var newName = name.replace(/\d+/, dayNumber - 1);
            input.setAttribute('name', newName);
            input.setAttribute('id', newName);
        });
        
        dayContainer.appendChild(newDay);
        
        // Initialize CKEditor for the new textarea
        newDay.querySelectorAll('textarea.ckeditor').forEach(function(textarea) {
            CKEDITOR.replace(textarea, {
                // You can add any additional configuration options here
                removePlugins: 'elementspath',
                resize_enabled: false
            });
        });
    });
</script>
{% endblock %}