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

{% block title %}My Hosting Bookings | Hosting Client Portal{% endblock %}

{% block extra_css %}
<style>
    .client-booking-page {
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 30%),
            linear-gradient(135deg, #fffaf5 0%, #ffffff 55%, #fff3e5 100%);
        color: #2f211d;
        min-height: 75vh;
    }

    .client-booking-hero {
        position: relative;
        overflow: hidden;
        background:
            linear-gradient(
                100deg,
                rgba(27, 16, 15, 0.94) 0%,
                rgba(54, 27, 24, 0.88) 45%,
                rgba(89, 44, 30, 0.62) 100%
            ),
            url("{% static 'expat_life/images/hosting_hero.webp' %}") center center / cover no-repeat;
        padding: 86px 0 118px;
    }

    .client-booking-hero::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        right: -190px;
        top: -240px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.32), rgba(255, 193, 7, 0));
    }

    .client-booking-hero-content {
        position: relative;
        z-index: 2;
    }

    .client-booking-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 10px 18px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: #fff;
        font-weight: 850;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 20px;
        backdrop-filter: blur(8px);
    }

    .client-booking-title {
        color: #fff;
        font-weight: 950;
        line-height: 1.05;
        font-size: clamp(2.4rem, 5vw, 4.4rem);
        letter-spacing: -0.04em;
        margin-bottom: 16px;
    }

    .client-booking-title span {
        color: #ffd36b;
    }

    .client-booking-subtitle {
        max-width: 760px;
        color: rgba(255, 255, 255, 0.84);
        font-size: 1.12rem;
        line-height: 1.75;
        margin-bottom: 0;
    }

    .client-booking-main {
        position: relative;
        z-index: 3;
        margin-top: -70px;
        padding-bottom: 80px;
    }

    .client-booking-filter-card,
    .client-booking-card {
        background: #fff;
        border: 1px solid rgba(121, 73, 53, 0.10);
        border-radius: 32px;
        box-shadow: 0 22px 56px rgba(56, 31, 23, 0.10);
    }

    .client-booking-filter-card {
        padding: 1.4rem;
        margin-bottom: 1.5rem;
    }

    .client-booking-filter-card label {
        color: #604b43;
        font-weight: 850;
        font-size: .82rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: .4rem;
    }

    .client-booking-filter-card .form-select {
        border-radius: 16px;
        border-color: #ecd7b8;
        padding: .78rem 1rem;
        color: #38231d;
    }

    .client-booking-card {
        overflow: hidden;
        margin-bottom: 1.25rem;
    }

    .client-booking-card-header {
        padding: 1.25rem 1.4rem;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.16), transparent 35%),
            linear-gradient(135deg, #fffaf4 0%, #ffffff 60%, #fff3e5 100%);
        border-bottom: 1px solid rgba(121, 73, 53, 0.10);
    }

    .client-booking-card-title {
        margin: 0;
        color: #38231d;
        font-weight: 950;
        font-size: 1.25rem;
    }

    .client-booking-card-meta {
        color: #78625a;
        font-size: .92rem;
        margin-top: .25rem;
    }

    .client-booking-body {
        padding: 1.4rem;
    }

    .client-booking-info-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .85rem;
        margin-bottom: 1rem;
    }

    .client-booking-info {
        border-radius: 20px;
        background: #fffaf4;
        border: 1px solid #f0dcc2;
        padding: .95rem;
    }

    .client-booking-info span {
        display: block;
        color: #8a6c5d;
        font-size: .73rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .35rem;
    }

    .client-booking-info strong {
        color: #38231d;
        font-weight: 900;
    }

    .client-booking-status {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        border-radius: 999px;
        padding: .45rem .75rem;
        font-size: .78rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .client-booking-status-paid,
    .client-booking-status-completed {
        background: rgba(22, 163, 74, 0.12);
        border: 1px solid rgba(22, 163, 74, 0.20);
        color: #166534;
    }

    .client-booking-status-due,
    .client-booking-status-payment_due {
        background: rgba(249, 115, 22, 0.12);
        border: 1px solid rgba(249, 115, 22, 0.22);
        color: #9a3412;
    }

    .client-booking-status-cancelled,
    .client-booking-status-rejected {
        background: rgba(220, 38, 38, 0.10);
        border: 1px solid rgba(220, 38, 38, 0.20);
        color: #991b1b;
    }

    .client-booking-status-default {
        background: rgba(184, 111, 31, 0.10);
        border: 1px solid rgba(184, 111, 31, 0.18);
        color: #975816;
    }

    .client-booking-products {
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid #f0dcc2;
        padding: 1rem;
        margin-top: 1rem;
    }

    .client-booking-products h6 {
        color: #38231d;
        font-weight: 900;
        margin-bottom: .8rem;
    }

    .client-booking-product-row {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: .65rem 0;
        border-bottom: 1px solid #f1e3cf;
        color: #604b43;
    }

    .client-booking-product-row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .client-booking-product-row i {
        color: #b86f1f;
        margin-top: .15rem;
    }

    .client-booking-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        margin-top: 1.15rem;
    }

    .client-booking-btn-gold,
    .client-booking-btn-dark,
    .client-booking-btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        border-radius: 15px;
        padding: .75rem 1.1rem;
        font-weight: 900;
        text-decoration: none;
        transition: all .22s ease;
    }

    .client-booking-btn-gold {
        background: linear-gradient(135deg, #ffc83f, #df9219);
        color: #26160d;
        border: none;
    }

    .client-booking-btn-dark {
        background: #2c1b17;
        color: #fff;
        border: 1px solid #2c1b17;
    }

    .client-booking-btn-outline {
        background: #fff;
        color: #3a241e;
        border: 1px solid #ecd7b8;
    }

    .client-booking-btn-gold:hover,
    .client-booking-btn-dark:hover,
    .client-booking-btn-outline:hover {
        transform: translateY(-2px);
    }

    .client-empty-card {
        padding: 3rem 1.5rem;
        text-align: center;
        background: #fff;
        border: 1px solid rgba(121, 73, 53, 0.10);
        border-radius: 32px;
        box-shadow: 0 22px 56px rgba(56, 31, 23, 0.10);
    }

    .client-empty-icon {
        width: 78px;
        height: 78px;
        border-radius: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #fff1d5, #ffe0ad);
        color: #9f5a13;
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }

    @media (max-width: 991.98px) {
        .client-booking-hero {
            padding: 72px 22px 110px;
            background-position: 68% center;
        }

        .client-booking-info-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .client-booking-hero {
            padding: 64px 18px 104px;
        }

        .client-booking-title {
            font-size: 2.25rem;
            line-height: 1.12;
        }

        .client-booking-subtitle {
            font-size: 1rem;
            line-height: 1.6;
        }

        .client-booking-info-grid {
            grid-template-columns: 1fr;
        }

        .client-booking-card,
        .client-booking-filter-card {
            border-radius: 26px;
        }

        .client-booking-card-header,
        .client-booking-body,
        .client-booking-filter-card {
            padding-left: 1.05rem;
            padding-right: 1.05rem;
        }

        .client-booking-actions {
            flex-direction: column;
        }

        .client-booking-btn-gold,
        .client-booking-btn-dark,
        .client-booking-btn-outline {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}

<div class="client-booking-page">

    <section class="client-booking-hero">
        <div class="container client-booking-hero-content">
            <span class="client-booking-badge">
                <i class="bi bi-calendar2-heart-fill"></i>
                Hosting Client Bookings
            </span>

            <h1 class="client-booking-title">
                My event hosting <span>bookings.</span>
            </h1>

            <p class="client-booking-subtitle">
                Track your event hosting requests, selected venues, packages, meals, add-ons,
                payment status, and booking progress in one place.
            </p>
        </div>
    </section>

    <section class="client-booking-main">
        <div class="container px-3 px-sm-4">

            <form method="get" class="client-booking-filter-card">
                <div class="row g-3 align-items-end">
                    <div class="col-md-5">
                        <label for="status">Booking Status</label>
                        <select name="status" id="status" class="form-select">
                            <option value="">All booking statuses</option>
                            {% for value, label in booking_status_choices %}
                                <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-5">
                        <label for="payment_status">Payment Status</label>
                        <select name="payment_status" id="payment_status" class="form-select">
                            <option value="">All payment statuses</option>
                            {% for value, label in payment_status_choices %}
                                <option value="{{ value }}" {% if payment_status_filter == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-2 d-grid">
                        <button type="submit" class="client-booking-btn-gold">
                            <i class="bi bi-funnel-fill me-2"></i>
                            Filter
                        </button>
                    </div>
                </div>
            </form>

            {% for booking in bookings %}
                <article class="client-booking-card">
                    <div class="client-booking-card-header">
                        <div class="d-flex flex-column flex-lg-row justify-content-between gap-3">
                            <div>
                                <h2 class="client-booking-card-title">
                                    {{ booking.get_event_type_display }}
                                    {% if booking.occasion_title %}
                                        — {{ booking.occasion_title }}
                                    {% endif %}
                                </h2>

                                <div class="client-booking-card-meta">
                                    <i class="bi bi-building-heart me-1"></i>
                                    {{ booking.venue_name_snapshot|default:booking.venue.venue_name }}
                                    {% if booking.host_business_name_snapshot %}
                                        · {{ booking.host_business_name_snapshot }}
                                    {% endif %}
                                </div>
                            </div>

                            <div class="d-flex flex-wrap gap-2">
                                <span class="client-booking-status client-booking-status-{{ booking.status|default:'default' }}">
                                    <i class="bi bi-clipboard-check"></i>
                                    {{ booking.get_status_display }}
                                </span>

                                <span class="client-booking-status client-booking-status-{{ booking.payment_status|default:'default' }}">
                                    <i class="bi bi-credit-card"></i>
                                    {{ booking.get_payment_status_display }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="client-booking-body">
                        <div class="client-booking-info-grid">
                            <div class="client-booking-info">
                                <span>Event Date</span>
                                <strong>{{ booking.preferred_event_date|date:"M d, Y" }}</strong>
                            </div>

                            <div class="client-booking-info">
                                <span>Start Time</span>
                                <strong>
                                    {% if booking.preferred_start_time %}
                                        {{ booking.preferred_start_time|time:"g:i A" }}
                                    {% else %}
                                        Not specified
                                    {% endif %}
                                </strong>
                            </div>

                            <div class="client-booking-info">
                                <span>Guests</span>
                                <strong>{{ booking.number_of_guests }}</strong>
                            </div>

                            <div class="client-booking-info">
                                <span>Total Amount</span>
                                <strong>${{ booking.total_amount_usd }}</strong>
                            </div>
                        </div>

                        <div class="client-booking-products">
                            <h6>
                                <i class="bi bi-bag-heart-fill me-2 text-warning"></i>
                                Selected Package, Meals & Add-ons
                            </h6>

                            {% if booking.package_title_snapshot %}
                                <div class="client-booking-product-row">
                                    <i class="bi bi-gift-fill"></i>
                                    <div>
                                        <strong>Package:</strong>
                                        {{ booking.package_title_snapshot }}
                                        <span class="text-muted">(${{ booking.package_amount_snapshot_usd }})</span>
                                    </div>
                                </div>
                            {% endif %}

                            {% if booking.meal_plan_title_snapshot %}
                                <div class="client-booking-product-row">
                                    <i class="bi bi-cup-hot-fill"></i>
                                    <div>
                                        <strong>Meal Plan:</strong>
                                        {{ booking.meal_plan_title_snapshot }}
                                        <span class="text-muted">(${{ booking.meal_amount_snapshot_usd }})</span>
                                    </div>
                                </div>
                            {% endif %}

                            {% for add_on in booking.selected_add_ons.all %}
                                <div class="client-booking-product-row">
                                    <i class="bi bi-plus-circle-fill"></i>
                                    <div>
                                        <strong>Add-on:</strong>
                                        {{ add_on.add_on_title_snapshot }}
                                        x {{ add_on.quantity }}
                                        <span class="text-muted">(${{ add_on.subtotal_snapshot_usd }})</span>
                                    </div>
                                </div>
                            {% empty %}
                                {% if not booking.package_title_snapshot and not booking.meal_plan_title_snapshot %}
                                    <div class="client-booking-product-row">
                                        <i class="bi bi-info-circle-fill"></i>
                                        <div>No package, meal plan, or add-on snapshot found.</div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>

                        {% if booking.occasion_note or booking.special_requests %}
                            <div class="client-booking-products">
                                <h6>
                                    <i class="bi bi-chat-heart-fill me-2 text-warning"></i>
                                    Notes & Requests
                                </h6>

                                {% if booking.occasion_note %}
                                    <div class="client-booking-product-row">
                                        <i class="bi bi-heart-fill"></i>
                                        <div>{{ booking.occasion_note }}</div>
                                    </div>
                                {% endif %}

                                {% if booking.special_requests %}
                                    <div class="client-booking-product-row">
                                        <i class="bi bi-stars"></i>
                                        <div>{{ booking.special_requests }}</div>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}

                        <div class="client-booking-actions">
                            {% if booking.payment_status == 'due' and booking.payable_item %}
                                <form method="post" action="{% url 'hosting_app:hosting_client_payment_checkout' %}">
                                    {% csrf_token %}
                                    <input type="hidden" name="selected_items" value="{{ booking.payable_item.id }}">
                                    <button type="submit" class="client-booking-btn-gold">
                                        <i class="bi bi-credit-card me-2"></i>
                                        Pay Now
                                    </button>
                                </form>
                            {% endif %}

                            <a href="{% url 'hosting_app:hosting_client_dashboard' %}"
                               class="client-booking-btn-dark">
                                <i class="bi bi-speedometer2 me-2"></i>
                                Dashboard
                            </a>

                            <a href="{% url 'hosting_app:home_hosting' %}"
                               class="client-booking-btn-outline">
                                <i class="bi bi-building-heart me-2"></i>
                                Explore Hosting
                            </a>
                        </div>
                    </div>
                </article>
            {% empty %}
                <div class="client-empty-card">
                    <div class="client-empty-icon">
                        <i class="bi bi-calendar2-heart-fill"></i>
                    </div>

                    <h3 class="fw-bold mb-2">No hosting bookings yet</h3>

                    <p class="text-muted mb-4">
                        You have not created any event hosting booking requests yet.
                        Explore available hosting experiences and create your first request.
                    </p>

                    <a href="{% url 'hosting_app:home_hosting' %}" class="client-booking-btn-gold">
                        <i class="bi bi-building-heart me-2"></i>
                        Explore Hosting Experiences
                    </a>
                </div>
            {% endfor %}

        </div>
    </section>

</div>

{% endblock %}