{% extends "admin_base.html" %}
{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">Add New Tour</h1>
    <form method="POST" action="{{ url_for('admin_blueprint.add_tour') }}" enctype="multipart/form-data" id="tour-form">
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    {{ form.title.label(class="form-label") }}
                    {{ form.title(class="form-control") }}
                    {% 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") }}
                    <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") }}
                </div>
                <div class="mb-3">
                    {{ form.subcategory.label(class="form-label") }}
                    {{ form.subcategory(class="form-select") }}
                </div>
                <div class="mb-3">
                    {{ form.duration.label(class="form-label") }}
                    {{ form.duration(class="form-control") }}
                    <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") }}
                    {{ form.image(class="form-control") }}
                    <div class="form-text">Upload a main image for the tour.</div>
                </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") }}
                </div>
                <div class="mb-3">
                    {{ form.itinerary.label(class="form-label") }} <span class="text-danger">*</span>
                    <div id="itinerary-editor" class="quill-editor"></div>
                    {{ form.itinerary(style="display: none;", class="quill-content") }}
                </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") }}
                </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") }}
                </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") }}
                </div>
            </div>
        </div>
        
        <h3 class="mt-4 mb-3">Tour Days (Itinerary)</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' %}
                            <div id="day-{{ loop.index0 }}-{{ field.name }}-editor" class="quill-editor"></div>
                            {{ field(style="display: none;", class="quill-content") }}
                        {% else %}
                            {{ field(class="form-control") }}
                        {% endif %}
                        {% for error in field.errors %}
                            <div class="text-danger">{{ error }}</div>
                        {% 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>
</div>
{% endblock %}

{% block extra_js %}
<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>
    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; // Set initial content
        quill.on('text-change', function() {
            hiddenInput.value = quill.root.innerHTML;
        });
        return quill;
    }

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

        // Initialize Quill for existing tour days
        document.querySelectorAll('.tour-day').forEach(function(dayElement, index) {
            var descriptionEditor = dayElement.querySelector('.quill-editor');
            if (descriptionEditor) {
                initQuillEditor('#' + descriptionEditor.id, dayElement.querySelector('textarea'));
            }
        });

        document.getElementById('add-day').addEventListener('click', function() {
            var dayCount = document.querySelectorAll('.tour-day').length;
            var newDay = document.querySelector('.tour-day').cloneNode(true);
            newDay.querySelector('.card-title').textContent = 'Day ' + (dayCount + 1);
            var inputs = newDay.querySelectorAll('input, textarea, .quill-editor');
            inputs.forEach(function(input) {
                if (input.classList.contains('quill-editor')) {
                    input.innerHTML = '';
                    input.id = input.id.replace('-0-', '-' + dayCount + '-');
                } else {
                    input.name = input.name.replace('[0]', '[' + dayCount + ']');
                    input.id = input.id.replace('-0-', '-' + dayCount + '-');
                    input.value = '';
                }
            });
            document.getElementById('tour-days-container').appendChild(newDay);
            
            // Initialize Quill for the new day's description
            var newDayDescriptionEditor = newDay.querySelector('.quill-editor');
            if (newDayDescriptionEditor) {
                initQuillEditor('#' + newDayDescriptionEditor.id, newDay.querySelector('textarea'));
            }
        });

        // Update hidden inputs before form submission
        document.getElementById('tour-form').addEventListener('submit', function(e) {
            e.preventDefault(); // Prevent the form from submitting immediately

            // Update Quill editor content to hidden fields
            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;
                }
            });

            // Use a different approach to submit the form
            setTimeout(function() {
                var formElement = document.getElementById('tour-form');
                var submitEvent = new Event('submit', {bubbles: false, cancelable: true});
                formElement.dispatchEvent(submitEvent);
                
                // Use the native form submit instead of the element property
                HTMLFormElement.prototype.submit.call(formElement);
            }, 10);
        });
    });
</script>
{% endblock %}