{% extends "admin_base.html" %}
{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">Edit Tour: {{ tour.title }}</h1>
    <form method="POST" action="{{ url_for('admin_blueprint.edit_tour', id=tour.id) }}" enctype="multipart/form-data">
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    {{ form.title.label(class="form-label") }}
                    {{ form.title(class="form-control", value=tour.title) }}
                    {% for error in form.title.errors %}
                        <div class="text-danger">{{ error }}</div>
                    {% endfor %}
                </div>
                <div class="mb-3">
                    {{ form.subtitle.label(class="form-label") }}
                    {{ form.subtitle(class="form-control", value=tour.subtitle) }}
                    <div class="form-text">A brief description or tagline for the tour.</div>
                </div>
                <div class="mb-3">
                    {{ form.parent_category.label(class="form-label") }}
                    {{ form.parent_category(class="form-select", selected=tour.parent_category) }}
                </div>
                <div class="mb-3">
                    {{ form.subcategory.label(class="form-label") }}
                    {{ form.subcategory(class="form-select", selected=tour.subcategory) }}
                </div>
                <div class="mb-3">
                    {{ form.duration.label(class="form-label") }}
                    {{ form.duration(class="form-control", value=tour.duration) }}
                    <div class="form-text">E.g., "3 Days 2 Nights", "5 Days", etc.</div>
                </div>
                <div class="mb-3">
                    {{ form.image.label(class="form-label") }}
                    <input type="file" name="image" class="form-control" />
                    {% if tour.image %}
                        <div class="mt-2">
                            <p>Current image: {{ tour.image }}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    {{ form.description.label(class="form-label") }}
                    <div id="description-editor" class="quill-editor"></div>
                    {{ form.description(style="display: none;", class="quill-content", value=tour.description) }}
                </div>
                <div class="mb-3">
                    {{ form.inclusions.label(class="form-label") }}
                    <div id="inclusions-editor" class="quill-editor"></div>
                    {{ form.inclusions(style="display: none;", class="quill-content", value=tour.inclusions) }}
                </div>
                <div class="mb-3">
                    {{ form.exclusions.label(class="form-label") }}
                    <div id="exclusions-editor" class="quill-editor"></div>
                    {{ form.exclusions(style="display: none;", class="quill-content", value=tour.exclusions) }}
                </div>
                <div class="mb-3">
                    {{ form.additional_info.label(class="form-label") }}
                    <div id="additional-info-editor" class="quill-editor"></div>
                    {{ form.additional_info(style="display: none;", class="quill-content", value=tour.additional_info) }}
                </div>
            </div>
        </div>

        <h3 class="mt-4 mb-3">Tour Days (Itinerary)</h3>
        <div id="tour-days-container">
            {% for day in tour.tour_days %}
            <div class="card mb-3 tour-day">
                <div class="card-body">
                    <h5 class="card-title">Day {{ loop.index }}</h5>
                    <div class="mb-3">
                        <label for="day-title-{{ loop.index0 }}" class="form-label">Title</label>
                        <input type="text" name="tour_days-{{ loop.index0 }}-title" class="form-control" id="day-title-{{ loop.index0 }}" value="{{ day.title }}">
                    </div>
                    <div class="mb-3">
                        <label for="day-description-{{ loop.index0 }}" class="form-label">Description</label>
                        <div id="day-{{ loop.index0 }}-description-editor" class="quill-editor"></div>
                        <input type="hidden" name="tour_days-{{ loop.index0 }}-description" class="quill-content" value="{{ day.description }}">
                    </div>
                </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>
</div>
{% endblock %}

{% block extra_js %}
{{ super() }}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var quillOptions = {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],
                [{ 'indent': '-1'}, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['clean'],
                ['link', 'image']
            ]
        }
    };

    function initQuillEditor(elementId, hiddenInput) {
        var quill = new Quill(elementId, quillOptions);
        quill.root.innerHTML = hiddenInput.value;
        quill.on('text-change', function() {
            hiddenInput.value = quill.root.innerHTML;
        });
        return quill;
    }

    var editors = {
        'description': initQuillEditor('#description-editor', document.getElementById('description')),
        'inclusions': initQuillEditor('#inclusions-editor', document.getElementById('inclusions')),
        'exclusions': initQuillEditor('#exclusions-editor', document.getElementById('exclusions')),
        'additional_info': initQuillEditor('#additional-info-editor', document.getElementById('additional_info'))
    };

    document.querySelectorAll('.tour-day').forEach(function(dayElement, index) {
        var descriptionEditor = dayElement.querySelector('.quill-editor');
        if (descriptionEditor) {
            initQuillEditor('#' + descriptionEditor.id, dayElement.querySelector('.quill-content'));
        }
    });

    document.getElementById('tour-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Update all Quill editors' content
        document.querySelectorAll('.quill-editor').forEach(function(editor) {
            var content = editor.querySelector('.ql-editor').innerHTML;
            var hiddenInput = editor.nextElementSibling;
            if (hiddenInput && hiddenInput.classList.contains('quill-content')) {
                hiddenInput.value = content;
            }
        });

        // Submit the form
        this.submit();
    });
});
</script>
{% endblock %}