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

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

{% block content %}

<style>
    .hosting-meal-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-meal-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-meal-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-meal-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-meal-form-hero-inner {
        position: relative;
        z-index: 2;
    }

    .hosting-meal-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-meal-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-meal-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-meal-form-actions-top {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-top: 1.6rem;
    }

    .hosting-meal-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: 150px;
    }

    .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-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-meal-form-page {
            padding-top: 2.8rem;
        }

        .hosting-meal-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-form-submit-bar {
            flex-direction: column;
            align-items: stretch;
            padding: 1.15rem;
        }

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

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

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


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

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

                <span class="hosting-meal-form-kicker">
                    {% if is_update %}
                        <i class="bi bi-pencil-square"></i>
                        Update Meal Plan
                    {% else %}
                        <i class="bi bi-cup-hot-fill"></i>
                        New Meal Plan
                    {% endif %}
                </span>

                <h1>{{ page_title|default:"Meal Plan Details" }}</h1>

                <p>
                    Create a clear meal plan for romantic dinners, proposal meals, anniversary dinners,
                    birthdays, honeymoon moments, or custom celebration dining. Meal plans can later be
                    selected with packages or offered as separate food options.
                </p>

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

                    {% if is_update and meal_plan %}
                        <a href="{% url 'hosting_app:host_meal_plan_detail' meal_plan.pk %}"
                           class="btn hosting-btn-gold">
                            <i class="bi bi-eye-fill me-2"></i>
                            View Meal Plan
                        </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>Meal Plan Information</h2>
                        <p>
                            Complete the fields below to prepare your meal plan 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-cup-hot-fill"></i>
                                    </div>
                                    <div>
                                        <h3>Basic Meal Plan Details</h3>
                                        <p>
                                            Select the venue and describe the meal option clearly.
                                        </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-12">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.title.id_for_label }}">
                                                Meal Plan Title
                                            </label>
                                            {{ form.title }}

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

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

                                            {% if form.description.help_text %}
                                                <small class="hosting-help-text">
                                                    {{ form.description.help_text }}
                                                </small>
                                            {% else %}
                                                <small class="hosting-help-text">
                                                    Explain the menu style, included food items, drink options, dining setup,
                                                    portion style, and any important meal conditions.
                                                </small>
                                            {% endif %}

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

                                </div>
                            </div>

                            <!-- IMAGE -->
                            {% if form.meal_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>Meal Plan Image</h3>
                                            <p>
                                                Upload an attractive image that represents this meal plan.
                                            </p>
                                        </div>
                                    </div>

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

                                    <div class="hosting-form-group">
                                        <label for="{{ form.meal_image.id_for_label }}">
                                            Meal Plan Image
                                        </label>

                                        {{ form.meal_image }}

                                        {% if form.meal_image.help_text %}
                                            <small class="hosting-help-text">
                                                {{ form.meal_image.help_text }}
                                            </small>
                                        {% else %}
                                            <small class="hosting-help-text">
                                                Recommended: a clean food, dinner table, menu, or dining setup image.
                                            </small>
                                        {% endif %}

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


                            <!-- PRICING -->
                            <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 & Minimum People</h3>
                                        <p>
                                            Set the price per person and the minimum number of people required.
                                        </p>
                                    </div>
                                </div>

                                <div class="row g-3">

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

                                            {% for error in form.price_per_person_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.minimum_people.id_for_label }}">
                                                Minimum People
                                            </label>
                                            {{ form.minimum_people }}

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

                                </div>

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

                        </div>


                        <!-- SUBMIT BAR -->
                        <div class="hosting-form-submit-bar">
                            <a href="{% url 'hosting_app:host_meal_plan_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 Meal Plan" }}
                            </button>
                        </div>

                    </form>

                </div>
            </div>


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

                    <div class="hosting-side-card-header">
                        <h3>Meal Plan Tips</h3>
                        <p>
                            A clear meal plan helps guests understand food pricing, serving style,
                            and whether meals are separate or part of an event package.
                        </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 simple title such as “Romantic Dinner Menu” or “Birthday Buffet Meal Plan”.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Mention whether the plan is plated, buffet, set menu, snack platter, or custom menu.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Clearly state the minimum number of people and price per person.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Include drink availability, vegetarian options, cake options, or dietary restrictions if relevant.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Avoid overpromising. Ensolanka will coordinate final availability and guest requirements.
                                </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 meal_plan %}
                            <div class="d-grid gap-2 mt-3">
                                <a href="{% url 'hosting_app:host_meal_plan_detail' meal_plan.pk %}"
                                   class="btn btn-dark rounded-pill fw-bold">
                                    <i class="bi bi-eye-fill me-2"></i>
                                    View Meal Plan
                                </a>

                                <a href="{% url 'hosting_app:host_venue_detail' meal_plan.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 %}