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

{% block content %}

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

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

        <div class="card-body">

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

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

                <ul class="nav nav-tabs mb-3">
                    <li class="nav-item">
                        <button type="button" class="nav-link active" onclick="openTab('details')">Details</button>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="nav-link" onclick="openTab('gallery')">Gallery</button>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="nav-link" onclick="openTab('itinerary')">Itinerary</button>
                    </li>
                </ul>

                <!-- ================= DETAILS ================= -->

                <div id="details" class="tab-content">

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

                        <div class="col-md-6 mb-3">
                            <label>Continent</label>
                            {{ form.package_type|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-4 mb-3">
                            <label>Duration</label>
                            {{ form.duration|add_class:"form-control" }}
                        </div>

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

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

                        <div class="col-md-12 mb-3">
                            <label>Description</label>
                            {{ form.description }}
                        </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>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 id="gallery" class="tab-content d-none">

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

                            {{ img_form.image|add_class:"form-control" }}

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

                    </div>

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

                </div>

                <!-- ================= ITINERARY ================= -->

                <div id="itinerary" class="tab-content d-none">

                    {{ itinerary_formset.management_form }}

                    <div id="itinerary-formset">

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

                            {{ it_form.id }}

                            <div class="row">

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

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

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

                            </div>

                        </div>
                        {% endfor %}

                    </div>

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

                </div>

                <!-- ================= SUBMIT ================= -->

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

                <button type="submit" class="btn btn-dark w-100 mt-3">
                    💾 Save Package
                </button>

                {{ form.media }}

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

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

<script>

    function openTab(tab) {
        document.querySelectorAll(".tab-content").forEach(t => t.classList.add("d-none"));
        document.getElementById(tab).classList.remove("d-none");

        document.querySelectorAll(".nav-link").forEach(btn => btn.classList.remove("active"));
        event.target.classList.add("active");
    }

    // FIX: Prevent auto submit
    document.querySelectorAll("button").forEach(btn => {
        if (!btn.type) btn.type = "button";
    });

</script>

{% endblock %}