{% extends 'base.html' %}
{% load widget_tweaks %}

{% block title %}
{% if view.object %}Edit Cruise Package{% else %}Add Cruise Package{% endif %}
{% endblock %}

{% block content %}

<div class="container mt-4">

    <div class="row justify-content-center">
        <div class="col-md-10">

            <div class="card shadow-lg border-0 rounded-4">

                <div class="card-header text-white text-center bg-gradient-custom">
                    <h5 class="mb-0">
                        {% if view.object %}
                        ✏️ Edit Cruise Package
                        {% else %}
                        ➕ Add Cruise Package
                        {% endif %}
                    </h5>
                </div>

                <div class="card-body">

                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}

                        <!-- ================= TABS ================= -->

                        <ul class="nav nav-tabs">

                            <li class="nav-item">
                                <button type="button" class="nav-link active" data-bs-toggle="tab"
                                    data-bs-target="#basic">
                                    📦 Basic
                                </button>
                            </li>

                            <li class="nav-item">
                                <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#gallery">
                                    📷 Gallery
                                </button>
                            </li>

                            <li class="nav-item">
                                <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#itinerary">
                                    🚢 Itinerary
                                </button>
                            </li>

                        </ul>

                        <div class="tab-content mt-3">

                            <!-- ================= BASIC ================= -->
                            <div class="tab-pane fade show active" id="basic">

                                <div class="row">

                                    <div class="col-md-6 mb-3">
                                        <label>Title</label>
                                        {{ form.title|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label>Subtitle</label>
                                        {{ form.subtitle|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label>Package Type</label>
                                        {{ form.package_type|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label>Duration</label>
                                        {{ form.duration|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label>Departed</label>
                                        {{ form.departed|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label>Visiting</label>
                                        {{ form.visiting|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <label>Description</label>
                                        {{ form.description|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-4 mb-3">
                                        <label>Original Price</label>
                                        {{ form.original_price|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-4 mb-3">
                                        <label>Discounted Price</label>
                                        {{ form.discounted_price|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-4 mb-3">
                                        <label>Discount (%)</label>
                                        {{ form.discount_percent|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <div class="form-check">
                                            {{ form.taxes_included|add_class:"form-check-input" }}
                                            <label class="form-check-label">Taxes Included</label>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label>Confirmation Policy</label>
                                        {{ form.confirmation_policy|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label>Refund Policy</label>
                                        {{ form.refund_policy|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label>Inclusions</label>
                                        {{ form.inclusions|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label>Exclusions</label>
                                        {{ form.exclusions|add_class:"form-control" }}
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <label>Highlights</label>
                                        {{ form.highlights|add_class:"form-control" }}
                                    </div>

                                </div>

                            </div>

                            <!-- ================= GALLERY ================= -->
                            <div class="tab-pane fade" id="gallery">

                                <h5>📷 Cruise Gallery</h5>

                                {{ image_formset.management_form }}

                                <div id="gallery-formset">

                                    {% for img_form in image_formset %}
                                    <div class="gallery-form border p-2 mb-2 rounded">

                                        {{ img_form.id }}

                                        <div class="row">
                                            <div class="col-md-8">
                                                {{ img_form.image|add_class:"form-control" }}
                                            </div>

                                            <div class="col-md-4 text-end">
                                                {% if img_form.instance.image %}
                                                <img src="{{ img_form.instance.image.url }}" width="80">
                                                {% endif %}

                                                {% if img_form.DELETE %}
                                                <div class="form-check mt-2">
                                                    {{ img_form.DELETE }} Delete
                                                </div>
                                                {% endif %}
                                            </div>
                                        </div>

                                    </div>
                                    {% endfor %}

                                </div>

                                <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="add-gallery">
                                    ➕ Add Image
                                </button>

                            </div>

                            <!-- ================= ITINERARY ================= -->
                            <div class="tab-pane fade" id="itinerary">

                                <h5>🚢 Cruise Itinerary</h5>

                                <div id="itinerary-formset">

                                    {{ itinerary_formset.management_form }}

                                    {% for it_form in itinerary_formset %}
                                    <div class="itinerary-form border rounded p-3 mb-3">

                                        {{ it_form.id }}

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                {{ it_form.title|add_class:"form-control" }}
                                            </div>

                                            <div class="col-md-2 mb-2">
                                                {{ it_form.day|add_class:"form-control" }}
                                            </div>

                                            <div class="col-md-4 mb-2">
                                                {{ it_form.place|add_class:"form-control" }}
                                            </div>

                                            <div class="col-md-3 mb-2">
                                                {{ it_form.time_from|add_class:"form-control" }}
                                            </div>

                                            <div class="col-md-3 mb-2">
                                                {{ it_form.time_to|add_class:"form-control" }}
                                            </div>

                                            <div class="col-md-4 mb-2">
                                                {{ it_form.ship_from|add_class:"form-control" }}
                                            </div>

                                            <div class="col-md-4 mb-2">
                                                {{ it_form.to|add_class:"form-control" }}
                                            </div>

                                            <div class="col-md-4 mb-2">
                                                {{ it_form.transfer_type|add_class:"form-control" }}
                                            </div>

                                            <div class="col-md-12 mb-2">
                                                {{ it_form.description|add_class:"form-control" }}
                                            </div>
                                        </div>

                                        {% if it_form.DELETE %}
                                        <div class="text-end mt-2">
                                            {{ it_form.DELETE }} Remove Day
                                        </div>
                                        {% endif %}

                                    </div>
                                    {% endfor %}

                                </div>

                                <button type="button" class="btn btn-sm btn-outline-primary" id="add-itinerary">
                                    ➕ Add Day
                                </button>

                            </div>

                        </div>

                        <!-- ================= ACTIVE + SUBMIT ================= -->

                        <div class="mt-4">
                            <div class="form-check">
                                {{ form.is_active|add_class:"form-check-input" }}
                                <label class="form-check-label">Active</label>
                            </div>
                        </div>

                        <div class="d-grid mt-3">
                            <button type="submit" class="btn btn-dark bg-gradient-custom">
                                💾 Save Cruise Package
                            </button>
                        </div>

                        {{ form.media }}

                    </form>

                </div>

                <div class="card-footer text-end bg-light">
                    <a href="{% url 'master:cruise_package_list' %}" class="btn btn-outline-dark">
                        ← Back
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- ================= JS ================= -->

<script>

    function initTinyMCE() {
        if (typeof tinymce !== "undefined") {
            tinymce.remove();
            tinymce.init({
                selector: "textarea",
                height: 200,
                menubar: false,
                plugins: "lists link image code",
                toolbar: "undo redo | bold italic | bullist numlist | link image",
            });
        }
    }

    function cloneForm(prefix, containerId, className) {

        let container = document.getElementById(containerId);
        let totalForms = document.querySelector(`input[name="${prefix}-TOTAL_FORMS"]`);
        let formCount = parseInt(totalForms.value);

        let forms = container.getElementsByClassName(className);
        let lastForm = forms[forms.length - 1];

        let newForm = lastForm.cloneNode(true);

        let regex = new RegExp(prefix + '-(\\d+)-', 'g');

        newForm.innerHTML = newForm.innerHTML.replace(
            regex,
            prefix + '-' + formCount + '-'
        );

        newForm.querySelectorAll("input, textarea").forEach(el => {
            if (el.type === "file") el.value = "";
            else if (el.type === "checkbox") el.checked = false;
            else el.value = "";
        });

        container.appendChild(newForm);
        totalForms.value = formCount + 1;
    }

    /* EVENTS */

    document.getElementById("add-gallery").addEventListener("click", function () {
        cloneForm("images", "gallery-formset", "gallery-form");
    });

    document.getElementById("add-itinerary").addEventListener("click", function () {
        cloneForm("itineraries", "itinerary-formset", "itinerary-form");
        initTinyMCE();
    });

    /* INIT */

    document.addEventListener("DOMContentLoaded", function () {
        initTinyMCE();
    });

</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

{% endblock %}