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

{% load custom_tags %}
{% block title %}
{% if view.object %}Edit Package{% else %}Add 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">

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


                <!-- Body -->
                <div class="card-body">

                    <form method="post" enctype="multipart/form-data" novalidate>

                        {% csrf_token %}

                        <div class="row">

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

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

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

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

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

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

                            <!-- Places -->
                            <div class="col-md-4 mb-3">
                                <label>Places Covered</label>
                                {{ form.places_covered|add_class:"form-control" }}
                            </div>

                            <!-- Activities -->
                            <div class="col-md-4 mb-3">
                                <label>Activities</label>
                                {{ form.activities_count|add_class:"form-control" }}
                            </div>

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

                            <!-- Pricing -->
                            <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>

                            <!-- Taxes -->
                            <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>

                            <!-- Policies -->
                            <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>

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

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

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

                        </div>


                        <!-- ================= Gallery ================= -->

                        <hr>
                        <h5 class="mt-4">📷 Gallery Images</h5>

                        <div id="gallery-formset">

                            {{ image_formset.management_form }}

                            {% for img_form in image_formset %}

                            <div class="gallery-form border p-2 mb-2 rounded">

                                {{ img_form.id }} <!-- VERY IMPORTANT -->

                                <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>



                        <!-- ================= Itinerary ================= -->

                        <hr>

                        <!-- ================= Itinerary ================= -->

                        <hr>
                        <h5 class="mt-4">📅 Day Wise 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-2 mb-2">
                                        <label>Day</label>
                                        {{ it_form.day|add_class:"form-control" }}
                                    </div>

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


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

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

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

                                    <div class="col-md-4 mt-4">
                                        <div class="form-check">
                                            {{ it_form.is_private_transfer }}
                                            Private Transfer
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <label>Hotel</label>
                                        {{ it_form.hotel|add_class:"form-control" }}
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <label>Check In</label>
                                        {{ it_form.check_in|add_class:"form-control" }}
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <label>Check Out</label>
                                        {{ it_form.check_out|add_class:"form-control" }}
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <label>From</label>
                                        {{ it_form.ship_from|add_class:"form-control" }}
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <label>To</label>
                                        {{ it_form.to|add_class:"form-control" }}
                                    </div>

                                </div>

                                <!-- 🔥 ITINERARY IMAGES (FIXED) -->
                                <hr>
                                <h6>📷 Day Images</h6>

                                {% with img_formset=itinerary_image_formsets|index:forloop.counter0 %}

                                {{ img_formset.management_form }}

                                <div class="itinerary-image-formset">

                                    {% for img_form in img_formset %}
                                    <div class="image-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>

                                <!-- ✅ ADD BUTTON -->
                                <button type="button" class="btn btn-sm btn-outline-primary add-itinerary-image mt-2"
                                    data-prefix="{{ img_formset.prefix }}">
                                    ➕ Add Image
                                </button>

                                {% endwith %}

                                {% 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>




                <!-- ================= Active ================= -->

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



                <!-- Submit -->

                {% if form.errors %}
                <div class="alert alert-danger">
                    {{ form.errors }}
                </div>
                {% endif %}

                {% if image_formset.errors %}
                <div class="alert alert-danger">
                    {{ image_formset.errors }}
                </div>
                {% endif %}

                {% if itinerary_formset.errors %}
                <div class="alert alert-danger">
                    {{ itinerary_formset.errors }}
                </div>
                {% endif %}

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

                </form>

            </div>


            <!-- Footer -->
            <div class="card-footer text-end bg-light">

                <a href="{% url 'master:package_list' %}" class="btn btn-sm btn-outline-dark">

                    ← Back to List

                </a>

            </div>

        </div>

    </div>
</div>

</div>



<!-- ================= JAVASCRIPT ================= -->

<script>

    function cloneForm(prefix, containerId, className) {

        let container = document.getElementById(containerId);

        let totalForms = document.querySelector(
            'input[name="' + prefix + '-TOTAL_FORMS"]'
        );

        if (!totalForms) {
            console.error("TOTAL_FORMS not found for:", prefix);
            return;
        }

        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 + '-'
        );

        // Clear inputs
        // Clear inputs
        newForm.querySelectorAll('input, textarea').forEach(el => {

            if (el.name.includes('-id')) {
                el.remove();
            }

            if (el.type === 'file') {
                el.value = '';
            }
            else if (el.type === 'checkbox') {
                el.checked = false;
            }
            else {
                el.value = '';
            }

        });

        // 🔥 ADD THIS BLOCK HERE
        // 🔥 FIX FOR FILE INPUT NAME
        if (prefix === 'itineraries') {

            let fileInput = newForm.querySelector('.itinerary-image-input');
            let previewDiv = newForm.querySelector('[id^="preview_"]');

            if (fileInput && previewDiv) {

                fileInput.name = `itinerary_images_${formCount}`;
                fileInput.setAttribute("data-preview", `preview_${formCount}`);

                previewDiv.id = `preview_${formCount}`;
                previewDiv.innerHTML = "";
            }
        }

        // THEN KEEP THIS
        container.appendChild(newForm);

        totalForms.value = formCount + 1;
    }


    /* Gallery */
    document.getElementById('add-gallery').addEventListener('click', function () {

        cloneForm(
            'images',              // 🔴 change if needed
            'gallery-formset',
            'gallery-form'
        );

    });


    /* Itinerary */
    document.getElementById('add-itinerary').addEventListener('click', function () {

        cloneForm(
            'itineraries',         // 🔴 change if needed
            'itinerary-formset',
            'itinerary-form'
        );

    });


    // PreviewImage

    document.addEventListener("change", function (e) {

        if (e.target.classList.contains("itinerary-image-input")) {

            let previewId = e.target.getAttribute("data-preview");
            let previewContainer = document.getElementById(previewId);

            previewContainer.innerHTML = ""; // clear old preview

            let files = e.target.files;

            for (let i = 0; i < files.length; i++) {

                let reader = new FileReader();

                reader.onload = function (event) {

                    let img = document.createElement("img");
                    img.src = event.target.result;

                    img.style.width = "100px";
                    img.style.height = "80px";
                    img.style.objectFit = "cover";
                    img.style.marginRight = "10px";
                    img.style.marginBottom = "10px";
                    img.style.borderRadius = "6px";

                    previewContainer.appendChild(img);
                };

                reader.readAsDataURL(files[i]);
            }
        }
    });

    // 🔥 FIX EXISTING FORMS ON PAGE LOAD
    document.addEventListener("DOMContentLoaded", function () {

        let forms = document.querySelectorAll(".itinerary-form");

        forms.forEach((form, index) => {

            let fileInput = form.querySelector(".itinerary-image-input");
            let previewDiv = form.querySelector('[id^="preview_"]');

            if (fileInput && previewDiv) {

                fileInput.name = `itinerary_images_${index}`;
                fileInput.setAttribute("data-preview", `preview_${index}`);

                previewDiv.id = `preview_${index}`;
            }
        });
    });

    document.addEventListener("click", function (e) {

        if (e.target.classList.contains("add-itinerary-image")) {

            let prefix = e.target.getAttribute("data-prefix");

            let totalForms = document.querySelector(
                `input[name="${prefix}-TOTAL_FORMS"]`
            );

            let formCount = parseInt(totalForms.value);

            let container = e.target.previousElementSibling;

            let forms = container.getElementsByClassName("image-form");

            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 + '-'
            );

            // clear input
            newForm.querySelectorAll('input').forEach(el => {
                if (el.type === 'file') el.value = '';
                if (el.type === 'checkbox') el.checked = false;
            });

            container.appendChild(newForm);

            totalForms.value = formCount + 1;
        }
    });

</script>

{% endblock %}