{% extends 'hosting_app/base_hosting.html' %}
{% load static %}

{% block title %}
    {{ page_title|default:"Event Package Form" }} | Host in Sri Lanka
{% endblock %}

{% block content %}

<style>
    .hosting-package-form-page {
        min-height: 100vh;
        padding: 4rem 0 5rem;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 28%),
            radial-gradient(circle at top right, rgba(116, 49, 41, 0.10), transparent 32%),
            linear-gradient(180deg, #fffaf5 0%, #fff4e8 42%, #ffffff 100%);
    }

    .hosting-package-form-hero {
        position: relative;
        overflow: hidden;
        border-radius: 38px;
        padding: 2.6rem 2.4rem;
        margin-bottom: 2rem;
        color: #ffffff;
        background:
            radial-gradient(circle at top right, rgba(255, 211, 107, 0.22), transparent 32%),
            linear-gradient(135deg, #2d1716 0%, #743129 56%, #a7601b 100%);
        box-shadow: 0 30px 68px rgba(58, 30, 24, 0.20);
    }

    .hosting-package-form-hero::before {
        content: "";
        position: absolute;
        top: -110px;
        right: -85px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.07);
        pointer-events: none;
    }

    .hosting-package-form-hero::after {
        content: "";
        position: absolute;
        bottom: -150px;
        left: -110px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.10);
        pointer-events: none;
    }

    .hosting-package-form-hero-inner {
        position: relative;
        z-index: 2;
    }

    .hosting-package-form-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.52rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #ffe7aa;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
    }

    .hosting-package-form-hero h1 {
        font-size: clamp(2.15rem, 4vw, 3.45rem);
        font-weight: 950;
        line-height: 1.1;
        letter-spacing: -0.045em;
        margin-bottom: 0.75rem;
    }

    .hosting-package-form-hero p {
        max-width: 850px;
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.03rem;
        line-height: 1.8;
    }

    .hosting-package-form-actions-top {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-top: 1.6rem;
    }

    .hosting-package-form-actions-top .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: 0.82rem 1.35rem;
        min-height: 48px;
    }

    .hosting-btn-gold {
        background: #ffc107;
        color: #2d1716;
        border: none;
    }

    .hosting-btn-gold:hover {
        background: #ffe082;
        color: #2d1716;
        transform: translateY(-1px);
    }

    .hosting-btn-light-outline {
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.42);
    }

    .hosting-btn-light-outline:hover {
        background: #ffffff;
        color: #2d1716;
    }

    .hosting-form-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 24px 56px rgba(58, 30, 24, 0.10);
        overflow: hidden;
    }

    .hosting-form-card-header {
        padding: 1.7rem 1.8rem 1.25rem;
        border-bottom: 1px solid #efe2d3;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.08), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    }

    .hosting-form-card-header h2 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.4rem;
    }

    .hosting-form-card-header p {
        color: #7a655d;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .hosting-form-card-body {
        padding: 2rem;
    }

    .hosting-form-section {
        padding: 1.6rem;
        border: 1px solid #efe2d3;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.05), transparent 30%),
            #ffffff;
        margin-bottom: 1.4rem;
    }

    .hosting-form-section-title {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        margin-bottom: 1.25rem;
    }

    .hosting-form-section-icon {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff4e4;
        color: #a7601b;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .hosting-form-section-title h3 {
        color: #2d1716;
        font-weight: 950;
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .hosting-form-section-title p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
        font-size: 0.95rem;
    }

    .hosting-form-group {
        margin-bottom: 1.25rem;
    }

    .hosting-form-group label {
        color: #2d1716;
        font-weight: 850;
        margin-bottom: 0.45rem;
        display: block;
    }

    .hosting-form-group input,
    .hosting-form-group select,
    .hosting-form-group textarea {
        border-radius: 16px;
        border: 1px solid #eadbc9;
        background-color: #fffaf5;
        color: #2d1716;
        min-height: 48px;
        transition: all 0.2s ease;
    }

    .hosting-form-group textarea {
        min-height: 130px;
    }

    .hosting-form-group input:focus,
    .hosting-form-group select:focus,
    .hosting-form-group textarea:focus {
        border-color: #a7601b;
        background-color: #ffffff;
        box-shadow: 0 0 0 0.22rem rgba(167, 96, 27, 0.13);
    }

    .hosting-help-text {
        display: block;
        color: #7a655d;
        font-size: 0.85rem;
        line-height: 1.55;
        margin-top: 0.42rem;
    }

    .hosting-field-error {
        color: #dc2626;
        font-size: 0.86rem;
        margin-top: 0.4rem;
        font-weight: 750;
    }

    .hosting-check-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .hosting-check-card {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        border-radius: 18px;
        border: 1px solid #efe2d3;
        background: #fffaf5;
        padding: 0.9rem;
        min-height: 74px;
    }

    .hosting-check-card .form-check-input {
        margin-top: 0.25rem;
        flex-shrink: 0;
        border-color: #d7bfa5;
    }

    .hosting-check-card .form-check-input:checked {
        background-color: #a7601b;
        border-color: #a7601b;
    }

    .hosting-check-card label {
        color: #2d1716;
        font-weight: 800;
        line-height: 1.4;
        margin-bottom: 0;
        cursor: pointer;
    }

    .hosting-current-image {
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid #efe2d3;
        background: #fffaf5;
        margin-bottom: 1rem;
    }

    .hosting-current-image img {
        width: 100%;
        max-height: 320px;
        object-fit: cover;
        display: block;
    }

    .hosting-current-image-caption {
        padding: 0.85rem 1rem;
        color: #7a655d;
        font-size: 0.9rem;
        border-top: 1px solid #efe2d3;
    }

    .hosting-form-note {
        border-radius: 24px;
        padding: 1rem 1.1rem;
        background: #fff4e4;
        border: 1px solid #efd7ae;
        color: #7a4c18;
        line-height: 1.7;
        margin-top: 1.4rem;
    }

    .hosting-form-note strong {
        color: #2d1716;
    }

    .hosting-form-submit-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1.3rem 1.8rem;
        border-top: 1px solid #efe2d3;
        background: #fffaf5;
    }

    .hosting-form-submit-bar .btn {
        border-radius: 999px;
        font-weight: 850;
        min-height: 50px;
        padding: 0.82rem 1.4rem;
    }

    .hosting-submit-btn {
        background: linear-gradient(135deg, #321816, #a7601b);
        color: #ffffff;
        border: none;
        box-shadow: 0 14px 28px rgba(167, 96, 27, 0.20);
    }

    .hosting-submit-btn:hover {
        color: #2d1716;
        background: linear-gradient(135deg, #ffc107, #ffe082);
        transform: translateY(-2px);
    }

    .hosting-side-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 24px 56px rgba(58, 30, 24, 0.09);
        overflow: hidden;
        position: sticky;
        top: 1rem;
    }

    .hosting-side-card-header {
        padding: 1.5rem 1.6rem 1rem;
        border-bottom: 1px solid #efe2d3;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.08), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    }

    .hosting-side-card-header h3 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.35rem;
    }

    .hosting-side-card-header p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .hosting-side-card-body {
        padding: 1.5rem;
    }

    .hosting-tip-list {
        display: grid;
        gap: 0.95rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .hosting-tip-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        color: #6f5b53;
        line-height: 1.65;
    }

    .hosting-tip-list i {
        color: #a7601b;
        font-size: 1.05rem;
        margin-top: 0.2rem;
        flex-shrink: 0;
    }

    .hosting-selected-venue-card {
        border-radius: 24px;
        background: #fffaf5;
        border: 1px solid #efe2d3;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .hosting-selected-venue-card h4 {
        color: #2d1716;
        font-weight: 950;
        font-size: 1.05rem;
        margin-bottom: 0.35rem;
    }

    .hosting-selected-venue-card p {
        color: #7a655d;
        line-height: 1.6;
        font-size: 0.92rem;
        margin-bottom: 0;
    }

    @media (max-width: 991.98px) {
        .hosting-package-form-page {
            padding-top: 2.8rem;
        }

        .hosting-package-form-hero {
            padding: 2rem 1.45rem;
            border-radius: 30px;
        }

        .hosting-side-card {
            position: static;
        }
    }

    @media (max-width: 767.98px) {
        .hosting-form-card-body {
            padding: 1.15rem;
        }

        .hosting-form-section {
            padding: 1.2rem;
            border-radius: 24px;
        }

        .hosting-check-grid {
            grid-template-columns: 1fr;
        }

        .hosting-form-submit-bar {
            flex-direction: column;
            align-items: stretch;
            padding: 1.15rem;
        }

        .hosting-form-submit-bar .btn {
            width: 100%;
        }

        .hosting-package-form-actions-top {
            flex-direction: column;
            align-items: stretch;
        }

        .hosting-package-form-actions-top .btn {
            width: 100%;
        }
    }
</style>


<section class="hosting-package-form-page">
    <div class="container">

        <!-- HERO -->
        <div class="hosting-package-form-hero">
            <div class="hosting-package-form-hero-inner">

                <span class="hosting-package-form-kicker">
                    {% if is_update %}
                        <i class="bi bi-pencil-square"></i>
                        Update Package
                    {% else %}
                        <i class="bi bi-gift-fill"></i>
                        New Event Package
                    {% endif %}
                </span>

                <h1>{{ page_title|default:"Event Package Details" }}</h1>

                <p>
                    Create a clear package for romantic dates, proposal events, anniversaries,
                    birthdays, private dinners, honeymoon experiences, or custom celebrations.
                    This helps guests understand what is included, how long the event lasts,
                    and how pricing works.
                </p>

                <div class="hosting-package-form-actions-top">
                    <a href="{% url 'hosting_app:host_event_package_list' %}"
                       class="btn hosting-btn-light-outline">
                        <i class="bi bi-arrow-left-circle me-2"></i>
                        Back to Packages
                    </a>

                    {% if is_update and event_package %}
                        <a href="{% url 'hosting_app:host_event_package_detail' event_package.slug %}"
                           class="btn hosting-btn-gold">
                            <i class="bi bi-eye-fill me-2"></i>
                            View Package
                        </a>
                    {% endif %}

                    {% if selected_venue %}
                        <a href="{% url 'hosting_app:host_venue_detail' selected_venue.slug %}"
                           class="btn hosting-btn-light-outline">
                            <i class="bi bi-building-heart me-2"></i>
                            View Venue
                        </a>
                    {% endif %}
                </div>

            </div>
        </div>


        <div class="row g-4 align-items-start">

            <!-- MAIN FORM -->
            <div class="col-lg-8">
                <div class="hosting-form-card">

                    <div class="hosting-form-card-header">
                        <h2>Package Information</h2>
                        <p>
                            Complete the fields below to prepare your package for Ensolanka review,
                            public listing, and future guest booking workflows.
                        </p>
                    </div>

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

                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}

                        <div class="hosting-form-card-body">

                            {% if form.non_field_errors %}
                                <div class="alert alert-danger rounded-4">
                                    {% for error in form.non_field_errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}


                            <!-- BASIC DETAILS -->
                            <div class="hosting-form-section">
                                <div class="hosting-form-section-title">
                                    <div class="hosting-form-section-icon">
                                        <i class="bi bi-gift-fill"></i>
                                    </div>
                                    <div>
                                        <h3>Basic Package Details</h3>
                                        <p>
                                            Give your package a title, event type, and clear description.
                                        </p>
                                    </div>
                                </div>

                                <div class="row g-3">

                                    {% if form.venue and not form.venue.is_hidden %}
                                        <div class="col-12">
                                            <div class="hosting-form-group">
                                                <label for="{{ form.venue.id_for_label }}">Venue</label>
                                                {{ form.venue }}

                                                {% for error in form.venue.errors %}
                                                    <div class="hosting-field-error">{{ error }}</div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    {% endif %}

                                    <div class="col-md-8">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.title.id_for_label }}">Package Title</label>
                                            {{ form.title }}

                                            {% for error in form.title.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.event_type.id_for_label }}">Event Type</label>
                                            {{ form.event_type }}

                                            {% for error in form.event_type.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.short_description.id_for_label }}">
                                                Short Description
                                            </label>
                                            {{ form.short_description }}

                                            {% if form.short_description.help_text %}
                                                <small class="hosting-help-text">{{ form.short_description.help_text }}</small>
                                            {% endif %}

                                            {% for error in form.short_description.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.full_description.id_for_label }}">
                                                Full Description
                                            </label>
                                            {{ form.full_description }}

                                            {% if form.full_description.help_text %}
                                                <small class="hosting-help-text">{{ form.full_description.help_text }}</small>
                                            {% endif %}

                                            {% for error in form.full_description.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                </div>
                            </div>


                            <!-- IMAGE -->
                            {% if form.image or form.package_image %}
                                <div class="hosting-form-section">
                                    <div class="hosting-form-section-title">
                                        <div class="hosting-form-section-icon">
                                            <i class="bi bi-image-fill"></i>
                                        </div>
                                        <div>
                                            <h3>Package Image</h3>
                                            <p>
                                                Upload an attractive image that represents this event package.
                                            </p>
                                        </div>
                                    </div>

                                    {% if is_update and event_package %}
                                        {% if event_package.image %}
                                            <div class="hosting-current-image">
                                                <img src="{{ event_package.image.url }}" alt="{{ event_package.title }}">
                                                <div class="hosting-current-image-caption">
                                                    Current package image. Upload a new one only if you want to replace it.
                                                </div>
                                            </div>
                                        {% elif event_package.package_image %}
                                            <div class="hosting-current-image">
                                                <img src="{{ event_package.package_image.url }}" alt="{{ event_package.title }}">
                                                <div class="hosting-current-image-caption">
                                                    Current package image. Upload a new one only if you want to replace it.
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endif %}

                                    <div class="hosting-form-group">
                                        {% if form.image %}
                                            <label for="{{ form.image.id_for_label }}">Package Image</label>
                                            {{ form.image }}

                                            {% for error in form.image.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        {% elif form.package_image %}
                                            <label for="{{ form.package_image.id_for_label }}">Package Image</label>
                                            {{ form.package_image }}

                                            {% for error in form.package_image.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        {% endif %}

                                        <small class="hosting-help-text">
                                            Recommended: a clear image showing the atmosphere, decoration, dinner setup,
                                            proposal space, couple table, cake setup, or celebration moment.
                                        </small>
                                    </div>
                                </div>
                            {% endif %}


                            <!-- PRICING & PEOPLE -->
                            <div class="hosting-form-section">
                                <div class="hosting-form-section-title">
                                    <div class="hosting-form-section-icon">
                                        <i class="bi bi-cash-coin"></i>
                                    </div>
                                    <div>
                                        <h3>Pricing, Duration & Guests</h3>
                                        <p>
                                            Set the base price, package duration, included guest count, and extra person price.
                                        </p>
                                    </div>
                                </div>

                                <div class="row g-3">

                                    <div class="col-md-6">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.duration_hours.id_for_label }}">Duration Hours</label>
                                            {{ form.duration_hours }}

                                            {% if form.duration_hours.help_text %}
                                                <small class="hosting-help-text">{{ form.duration_hours.help_text }}</small>
                                            {% endif %}

                                            {% for error in form.duration_hours.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.base_price_usd.id_for_label }}">Base Price USD</label>
                                            {{ form.base_price_usd }}

                                            {% for error in form.base_price_usd.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.max_people_included.id_for_label }}">
                                                People Included
                                            </label>
                                            {{ form.max_people_included }}

                                            {% for error in form.max_people_included.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.extra_person_price_usd.id_for_label }}">
                                                Extra Person Price USD
                                            </label>
                                            {{ form.extra_person_price_usd }}

                                            {% for error in form.extra_person_price_usd.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                </div>
                            </div>


                            <!-- INCLUDED OPTIONS -->
                            <div class="hosting-form-section">
                                <div class="hosting-form-section-title">
                                    <div class="hosting-form-section-icon">
                                        <i class="bi bi-stars"></i>
                                    </div>
                                    <div>
                                        <h3>Included Features</h3>
                                        <p>
                                            Select what is included in the base package price.
                                        </p>
                                    </div>
                                </div>

                                <div class="hosting-check-grid">

                                    {% if form.includes_meals %}
                                        <div class="hosting-check-card">
                                            {{ form.includes_meals }}
                                            <label for="{{ form.includes_meals.id_for_label }}">
                                                {{ form.includes_meals.label }}
                                            </label>
                                        </div>
                                    {% endif %}

                                    {% if form.includes_decoration %}
                                        <div class="hosting-check-card">
                                            {{ form.includes_decoration }}
                                            <label for="{{ form.includes_decoration.id_for_label }}">
                                                {{ form.includes_decoration.label }}
                                            </label>
                                        </div>
                                    {% endif %}

                                    {% if form.includes_photography %}
                                        <div class="hosting-check-card">
                                            {{ form.includes_photography }}
                                            <label for="{{ form.includes_photography.id_for_label }}">
                                                {{ form.includes_photography.label }}
                                            </label>
                                        </div>
                                    {% endif %}

                                    {% if form.includes_music %}
                                        <div class="hosting-check-card">
                                            {{ form.includes_music }}
                                            <label for="{{ form.includes_music.id_for_label }}">
                                                {{ form.includes_music.label }}
                                            </label>
                                        </div>
                                    {% endif %}

                                    {% if form.is_customizable %}
                                        <div class="hosting-check-card">
                                            {{ form.is_customizable }}
                                            <label for="{{ form.is_customizable.id_for_label }}">
                                                {{ form.is_customizable.label }}
                                            </label>
                                        </div>
                                    {% endif %}

                                </div>
                            </div>


                            <!-- INCLUSIONS / EXCLUSIONS -->
                            <div class="hosting-form-section">
                                <div class="hosting-form-section-title">
                                    <div class="hosting-form-section-icon">
                                        <i class="bi bi-card-checklist"></i>
                                    </div>
                                    <div>
                                        <h3>Inclusions, Exclusions & Pricing Notes</h3>
                                        <p>
                                            Clarify what is included, what is not included, and any pricing conditions.
                                        </p>
                                    </div>
                                </div>

                                <div class="hosting-form-group">
                                    <label for="{{ form.inclusions_summary.id_for_label }}">
                                        Inclusions Summary
                                    </label>
                                    {{ form.inclusions_summary }}

                                    {% if form.inclusions_summary.help_text %}
                                        <small class="hosting-help-text">{{ form.inclusions_summary.help_text }}</small>
                                    {% endif %}

                                    {% for error in form.inclusions_summary.errors %}
                                        <div class="hosting-field-error">{{ error }}</div>
                                    {% endfor %}
                                </div>

                                <div class="hosting-form-group">
                                    <label for="{{ form.exclusions_summary.id_for_label }}">
                                        Exclusions Summary
                                    </label>
                                    {{ form.exclusions_summary }}

                                    {% if form.exclusions_summary.help_text %}
                                        <small class="hosting-help-text">{{ form.exclusions_summary.help_text }}</small>
                                    {% endif %}

                                    {% for error in form.exclusions_summary.errors %}
                                        <div class="hosting-field-error">{{ error }}</div>
                                    {% endfor %}
                                </div>

                                <div class="hosting-form-group">
                                    <label for="{{ form.pricing_note.id_for_label }}">
                                        Pricing Note
                                    </label>
                                    {{ form.pricing_note }}

                                    {% if form.pricing_note.help_text %}
                                        <small class="hosting-help-text">{{ form.pricing_note.help_text }}</small>
                                    {% endif %}

                                    {% for error in form.pricing_note.errors %}
                                        <div class="hosting-field-error">{{ error }}</div>
                                    {% endfor %}
                                </div>

                                <div class="hosting-form-note">
                                    <strong>Important:</strong>
                                    Hosts should remember that Ensolanka charges a 10% coordination commission
                                    from the confirmed Host event price. Please consider this when setting package prices.
                                </div>
                            </div>

                        </div>


                        <!-- SUBMIT BAR -->
                        <div class="hosting-form-submit-bar">
                            <a href="{% url 'hosting_app:host_event_package_list' %}"
                               class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left-circle me-2"></i>
                                Cancel
                            </a>

                            <button type="submit" class="btn hosting-submit-btn">
                                <i class="bi bi-check-circle-fill me-2"></i>
                                {{ submit_text|default:"Save Package" }}
                            </button>
                        </div>

                    </form>

                </div>
            </div>


            <!-- SIDE GUIDANCE -->
            <div class="col-lg-4">
                <div class="hosting-side-card">

                    <div class="hosting-side-card-header">
                        <h3>Package Creation Tips</h3>
                        <p>
                            A strong event package makes it easier for guests to imagine, compare,
                            and request a celebration experience.
                        </p>
                    </div>

                    <div class="hosting-side-card-body">

                        {% if selected_venue %}
                            <div class="hosting-selected-venue-card">
                                <h4>{{ selected_venue.venue_name }}</h4>
                                <p>
                                    {% if selected_venue.venue_category %}
                                        {{ selected_venue.get_venue_category_display }}
                                    {% else %}
                                        Host Venue
                                    {% endif %}
                                    {% if selected_venue.city or selected_venue.district %}
                                        <br>
                                        <i class="bi bi-geo-alt-fill me-1"></i>
                                        {% if selected_venue.get_city_display %}
                                            {{ selected_venue.get_city_display }}
                                        {% else %}
                                            {{ selected_venue.city }}
                                        {% endif %}
                                        {% if selected_venue.city and selected_venue.district %}, {% endif %}
                                        {% if selected_venue.get_district_display %}
                                            {{ selected_venue.get_district_display }}
                                        {% else %}
                                            {{ selected_venue.district }}
                                        {% endif %}
                                    {% endif %}
                                </p>
                            </div>
                        {% endif %}

                        <ul class="hosting-tip-list">
                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Use a package title that clearly explains the occasion, such as “Sunset Proposal Dinner”.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Mention the duration, number of people included, and any extra person charges.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Clearly separate meals, decoration, photography, and music if they are included or optional.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Add pricing notes for seasonal variation, advance notice, and special custom requests.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Keep descriptions honest, practical, and easy for international guests to understand.
                                </span>
                            </li>
                        </ul>

                        <div class="hosting-form-note">
                            <strong>Review note:</strong>
                            Public visibility, featured status, and approval are managed by the Ensolanka admin team.
                        </div>

                        {% if is_update and event_package %}
                            <div class="d-grid gap-2 mt-3">
                                <a href="{% url 'hosting_app:host_event_package_detail' event_package.slug %}"
                                   class="btn btn-dark rounded-pill fw-bold">
                                    <i class="bi bi-eye-fill me-2"></i>
                                    View Package
                                </a>

                                <a href="{% url 'hosting_app:host_venue_detail' event_package.venue.slug %}"
                                   class="btn btn-outline-dark rounded-pill fw-bold">
                                    <i class="bi bi-building-heart me-2"></i>
                                    View Venue
                                </a>
                            </div>
                        {% endif %}

                    </div>

                </div>
            </div>

        </div>

    </div>
</section>

{% endblock %}