{% extends 'expat_life/base.html' %}
{% load static %}

{% block title %}My Host Event Bookings | Live in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       GUEST BOOKINGS PAGE - PREMIUM LIVE IN SRI LANKA THEME
    ========================================================= */

    :root {
        --lis-deep: #07131c;
        --lis-navy: #0b2638;
        --lis-blue: #0d6efd;
        --lis-blue-dark: #0b3d91;
        --lis-teal: #0f766e;
        --lis-teal-bright: #20c997;
        --lis-teal-soft: #ecfdf5;
        --lis-gold: #ffc107;
        --lis-gold-light: #ffd45f;
        --lis-sand: #fff8ed;
        --lis-soft-blue: #f5f9ff;
        --lis-white: #ffffff;
        --lis-text: #102033;
        --lis-muted: #64748b;
        --lis-border: rgba(15, 42, 64, 0.10);
        --lis-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        --lis-shadow-strong: 0 28px 70px rgba(15, 23, 42, 0.16);
    }

    /* =========================================================
       HERO
    ========================================================= */

    .guest-bookings-hero {
        position: relative;
        min-height: 430px;
        background-color: var(--lis-deep);
        overflow: hidden;
    }

    .guest-bookings-bg {
        position: absolute;
        inset: 0;
        background:
            url("{% static 'expat_life/images/srilanka_expat_life_home_hero.webp' %}")
            center center / cover no-repeat;
        transform: scale(1.045);
        z-index: 0;
        filter: saturate(1.04) contrast(1.03);
    }

    .guest-bookings-overlay {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(
                circle at 78% 18%,
                rgba(255, 193, 7, 0.18),
                transparent 31%
            ),
            radial-gradient(
                circle at 88% 82%,
                rgba(32, 201, 151, 0.16),
                transparent 34%
            ),
            linear-gradient(
                90deg,
                rgba(7, 19, 28, 0.92) 0%,
                rgba(7, 19, 28, 0.78) 38%,
                rgba(11, 61, 145, 0.52) 66%,
                rgba(15, 118, 110, 0.36) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.12) 0%,
                rgba(0, 0, 0, 0.38) 100%
            );
        z-index: 1;
    }

    .guest-bookings-content {
        position: relative;
        z-index: 2;
        padding: 88px 0 116px;
    }

    .guest-bookings-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .95rem;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.14);
        color: #ffd36b;
        border: 1px solid rgba(255, 193, 7, 0.30);
        font-size: .8rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .075em;
        backdrop-filter: blur(10px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

    .guest-bookings-badge::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
    }

    .guest-bookings-title {
        color: #ffffff;
        font-weight: 950;
        letter-spacing: -.045em;
        line-height: 1.06;
        font-size: clamp(2.25rem, 4vw, 3.65rem);
        text-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    }

    .guest-bookings-subtitle {
        color: rgba(255, 255, 255, 0.86);
        max-width: 760px;
        line-height: 1.78;
        font-size: 1.04rem;
    }

    /* =========================================================
       MAIN SHELL
    ========================================================= */

    .guest-bookings-main {
        margin-top: -78px;
        position: relative;
        z-index: 4;
        padding-bottom: 76px;
        background:
            radial-gradient(circle at 10% 8%, rgba(255, 193, 7, 0.08), transparent 28%),
            radial-gradient(circle at 88% 30%, rgba(13, 110, 253, 0.07), transparent 30%),
            linear-gradient(180deg, #f5f9ff 0%, #ffffff 58%);
    }

    .guest-bookings-shell {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 92% 8%, rgba(255, 193, 7, 0.12), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        border: 1px solid rgba(15, 42, 64, 0.08);
        border-radius: 34px;
        box-shadow: var(--lis-shadow-strong);
    }

    .guest-bookings-shell::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 6px;
        background: linear-gradient(90deg, var(--lis-gold), var(--lis-teal), var(--lis-blue));
        z-index: 2;
    }

    .guest-bookings-shell::after {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        right: -130px;
        bottom: -130px;
        border-radius: 50%;
        background: rgba(15, 118, 110, 0.07);
        pointer-events: none;
    }

    .guest-bookings-shell > * {
        position: relative;
        z-index: 3;
    }

    .guest-bookings-header {
        padding: 1.55rem 1.75rem;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.13), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border-bottom: 1px solid rgba(15, 42, 64, 0.08);
    }

    .guest-bookings-header h4 {
        margin: 0;
        font-weight: 950;
        letter-spacing: -0.025em;
        color: var(--lis-text);
    }

    .guest-bookings-header p {
        margin: .35rem 0 0;
        color: var(--lis-muted);
        font-size: .94rem;
        line-height: 1.6;
    }

    /* =========================================================
       FILTER CARD
    ========================================================= */

    .booking-filter-card {
        border-radius: 26px;
        background:
            radial-gradient(circle at 92% 10%, rgba(13, 110, 253, 0.06), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid rgba(15, 42, 64, 0.08);
        padding: 1.1rem;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
    }

    .booking-filter-card label,
    .booking-filter-card .form-label {
        color: var(--lis-text);
        font-weight: 850;
        letter-spacing: -0.01em;
    }

    .booking-filter-card input,
    .booking-filter-card select {
        border: 1px solid rgba(15, 42, 64, 0.12);
        border-radius: 16px;
        padding: 0.82rem 0.95rem;
        background: #ffffff;
        color: var(--lis-text);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.03);
    }

    .booking-filter-card input:focus,
    .booking-filter-card select:focus {
        border-color: rgba(15, 118, 110, 0.52);
        box-shadow:
            0 0 0 0.22rem rgba(15, 118, 110, 0.11),
            0 12px 24px rgba(13, 110, 253, 0.06);
    }

    /* =========================================================
       BOOKING CARD
    ========================================================= */

    .booking-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(15, 42, 64, 0.08);
        border-radius: 28px;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.08), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: var(--lis-shadow);
        transition: all .24s ease;
    }

    .booking-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--lis-gold), var(--lis-teal), var(--lis-blue));
        opacity: 0;
        transition: opacity .24s ease;
        z-index: 2;
    }

    .booking-card::after {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        right: -76px;
        bottom: -76px;
        border-radius: 50%;
        background: rgba(13, 110, 253, 0.055);
        pointer-events: none;
    }

    .booking-card:hover {
        transform: translateY(-5px);
        border-color: rgba(15, 118, 110, 0.18);
        box-shadow: var(--lis-shadow-strong);
    }

    .booking-card:hover::before {
        opacity: 1;
    }

    .booking-card > * {
        position: relative;
        z-index: 3;
    }

    .booking-card-top {
        padding: 1.25rem 1.3rem;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.10), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border-bottom: 1px solid rgba(15, 42, 64, 0.08);
    }

    .booking-venue {
        font-weight: 950;
        color: var(--lis-text);
        letter-spacing: -0.018em;
        margin-bottom: .3rem;
    }

    .booking-meta {
        color: var(--lis-muted);
        font-size: .91rem;
        line-height: 1.6;
    }

    .booking-body {
        padding: 1.25rem 1.3rem;
    }

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

    .booking-info-box {
        border-radius: 20px;
        background:
            radial-gradient(circle at 92% 10%, rgba(13, 110, 253, 0.055), transparent 30%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid rgba(15, 42, 64, 0.08);
        padding: .95rem;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.035);
    }

    .booking-info-box .label {
        display: block;
        color: var(--lis-muted);
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .065em;
        margin-bottom: .28rem;
    }

    .booking-info-box .value {
        color: var(--lis-text);
        font-weight: 850;
        word-break: break-word;
        line-height: 1.5;
    }

    .booking-amount-box {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 92% 12%, rgba(255, 193, 7, 0.18), transparent 34%),
            linear-gradient(135deg, var(--lis-deep) 0%, var(--lis-blue-dark) 54%, var(--lis-teal) 100%);
        color: #ffffff;
        border: none;
        box-shadow: 0 14px 28px rgba(13, 110, 253, 0.16);
    }

    .booking-amount-box::after {
        content: "";
        position: absolute;
        width: 90px;
        height: 90px;
        right: -48px;
        top: -48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

    .booking-amount-box .label,
    .booking-amount-box .value {
        position: relative;
        z-index: 2;
        color: #ffffff;
    }

    .booking-amount-box .label {
        color: rgba(255, 255, 255, 0.74);
    }

    .booking-amount-box .value {
        color: #ffd36b;
        font-size: 1.28rem;
        font-weight: 950;
        letter-spacing: -0.025em;
    }

    .booking-addons {
        border-radius: 20px;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.13), transparent 32%),
            linear-gradient(135deg, #fff8ed 0%, #ffffff 100%);
        border: 1px solid rgba(255, 193, 7, 0.22);
        color: #475569;
        line-height: 1.65;
        padding: 1rem;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.035);
    }

    .booking-addons strong,
    .booking-addons h6 {
        color: var(--lis-text);
        font-weight: 900;
    }

    /* =========================================================
       EMPTY STATE
    ========================================================= */

    .empty-bookings {
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        padding: 3.2rem 1.6rem;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.13), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px dashed rgba(15, 118, 110, 0.30);
        text-align: center;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
    }

    .empty-bookings::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--lis-gold), var(--lis-teal), var(--lis-blue));
    }

    .empty-bookings i {
        width: 82px;
        height: 82px;
        margin-bottom: 1rem;
        border-radius: 28px;
        background:
            radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.70), transparent 28%),
            linear-gradient(135deg, var(--lis-gold-light), var(--lis-gold));
        color: var(--lis-deep);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2.3rem;
        box-shadow:
            0 18px 38px rgba(255, 193, 7, 0.24),
            0 0 0 10px rgba(255, 193, 7, 0.08);
    }

    .empty-bookings h4,
    .empty-bookings h5 {
        color: var(--lis-text);
        font-weight: 950;
        letter-spacing: -0.02em;
    }

    .empty-bookings p {
        color: var(--lis-muted);
        line-height: 1.7;
    }

    /* =========================================================
       BUTTONS / BADGES INSIDE BOOKING PAGE
    ========================================================= */

    .guest-bookings-main .btn {
        border-radius: 999px;
        font-weight: 850;
        transition: all .22s ease;
    }

    .guest-bookings-main .btn-primary,
    .guest-bookings-main .btn-dark {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-blue));
        border: none;
        color: #ffffff;
        box-shadow: 0 14px 28px rgba(13, 110, 253, 0.18);
    }

    .guest-bookings-main .btn-primary:hover,
    .guest-bookings-main .btn-dark:hover {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-teal));
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(15, 118, 110, 0.22);
    }

    .guest-bookings-main .btn-warning {
        background: linear-gradient(135deg, var(--lis-gold-light), var(--lis-gold));
        border: none;
        color: #231707;
        box-shadow: 0 14px 28px rgba(255, 193, 7, 0.20);
    }

    .guest-bookings-main .btn-warning:hover {
        background: linear-gradient(135deg, #ffe08a, var(--lis-gold));
        color: #231707;
        transform: translateY(-2px);
    }

    .guest-bookings-main .btn-outline-dark,
    .guest-bookings-main .btn-outline-secondary,
    .guest-bookings-main .btn-outline-primary {
        background: #ffffff;
        color: var(--lis-deep);
        border-color: rgba(7, 19, 28, 0.20);
    }

    .guest-bookings-main .btn-outline-dark:hover,
    .guest-bookings-main .btn-outline-secondary:hover,
    .guest-bookings-main .btn-outline-primary:hover {
        background: var(--lis-deep);
        border-color: var(--lis-deep);
        color: #ffffff;
        transform: translateY(-2px);
    }

    .guest-bookings-main .badge {
        border-radius: 999px;
        padding: .45rem .7rem;
        font-weight: 850;
        letter-spacing: .01em;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 767.98px) {
        .guest-bookings-content {
            padding: 72px 1.15rem 110px;
        }

        .guest-bookings-title {
            font-size: 2.15rem;
            line-height: 1.12;
        }

        .guest-bookings-subtitle {
            font-size: 1rem;
            line-height: 1.6;
        }

        .guest-bookings-main {
            margin-top: -70px;
            padding-bottom: 60px;
        }

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

        .guest-bookings-shell {
            border-radius: 28px;
        }

        .guest-bookings-header {
            padding: 1.35rem 1.25rem;
        }

        .booking-card {
            border-radius: 24px;
        }

        .booking-card-top,
        .booking-body {
            padding: 1.1rem;
        }

        .empty-bookings {
            border-radius: 24px;
            padding: 2.4rem 1.2rem;
        }

        .empty-bookings i {
            width: 74px;
            height: 74px;
            border-radius: 24px;
            font-size: 2rem;
        }
    }
</style>

<section class="guest-bookings-hero">
    <div class="guest-bookings-bg"></div>
    <div class="guest-bookings-overlay"></div>

    <div class="container guest-bookings-content">
        <div class="row align-items-center">
            <div class="col-lg-8 text-white">
                <span class="guest-bookings-badge mb-4">
                    <i class="bi bi-calendar-heart"></i>
                    Guest Experiences
                </span>

                <h1 class="display-4 guest-bookings-title mb-3">
                    My Host Event Bookings
                </h1>

                <p class="lead guest-bookings-subtitle mb-0">
                    Track your own hosting event bookings, payment status, arrangement progress,
                    selected venue, packages, meals, add-ons, and total booking amount.
                </p>
            </div>
        </div>
    </div>
</section>

<section class="guest-bookings-main">
    <div class="container px-3 px-sm-4">
        <div class="guest-bookings-shell mx-auto" style="max-width:1120px;">

            <div class="guest-bookings-header">
                <div class="d-flex flex-column flex-md-row justify-content-between gap-3">
                    <div>
                        <h4>Booking History & Current Requests</h4>
                        <p>
                            View your submitted, due, paid, arranging, completed, cancelled, or rejected host event bookings.
                        </p>
                    </div>

                    <div>
                        <a href="{% url 'expat_life:foreigner_payment_center' %}"
                           class="btn btn-dark rounded-pill fw-bold px-4">
                            <i class="bi bi-credit-card me-2"></i>
                            Payment Center
                        </a>
                    </div>
                </div>
            </div>

            <div class="p-4 p-md-5">

                <form method="get" class="booking-filter-card mb-4">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-5">
                            <label class="form-label fw-bold">Booking Status</label>
                            <select name="status" class="form-select rounded-pill">
                                <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 class="form-label fw-bold">Payment Status</label>
                            <select name="payment_status" class="form-select rounded-pill">
                                <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="btn btn-warning rounded-pill fw-bold">
                                Filter
                            </button>
                        </div>
                    </div>
                </form>

                {% if bookings %}
                    <div class="row g-4">
                        {% for booking in bookings %}
                            <div class="col-lg-6">
                                <div class="booking-card h-100">

                                    <div class="booking-card-top">
                                        <div class="d-flex justify-content-between align-items-start gap-3">
                                            <div>
                                                <h5 class="booking-venue">
                                                    {{ booking.venue_name_snapshot|default:booking.venue.venue_name }}
                                                </h5>

                                                <div class="booking-meta">
                                                    <i class="bi bi-calendar-event me-1"></i>
                                                    {{ booking.preferred_event_date }}
                                                    {% if booking.preferred_start_time %}
                                                        · {{ booking.preferred_start_time }}
                                                    {% endif %}
                                                </div>
                                            </div>

                                            <div class="text-end">
                                                <span class="badge rounded-pill text-bg-dark mb-2">
                                                    {{ booking.get_status_display }}
                                                </span>
                                                <br>
                                                {% if booking.payment_status == 'paid' %}
                                                    <span class="badge rounded-pill text-bg-success">
                                                        {{ booking.get_payment_status_display }}
                                                    </span>
                                                {% elif booking.payment_status == 'due' %}
                                                    <span class="badge rounded-pill text-bg-warning">
                                                        {{ booking.get_payment_status_display }}
                                                    </span>
                                                {% else %}
                                                    <span class="badge rounded-pill text-bg-secondary">
                                                        {{ booking.get_payment_status_display }}
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="booking-body">
                                        <div class="booking-info-grid mb-3">

                                            <div class="booking-info-box">
                                                <span class="label">Event Type</span>
                                                <span class="value">{{ booking.get_event_type_display }}</span>
                                            </div>

                                            <div class="booking-info-box">
                                                <span class="label">Guests</span>
                                                <span class="value">{{ booking.number_of_guests }}</span>
                                            </div>

                                            <div class="booking-info-box">
                                                <span class="label">Package</span>
                                                <span class="value">
                                                    {{ booking.package_title_snapshot|default:"Not selected" }}
                                                </span>
                                            </div>

                                            <div class="booking-info-box">
                                                <span class="label">Meal Plan</span>
                                                <span class="value">
                                                    {{ booking.meal_plan_title_snapshot|default:"Not selected" }}
                                                </span>
                                            </div>

                                            <div class="booking-info-box booking-amount-box">
                                                <span class="label">Total Amount</span>
                                                <span class="value">${{ booking.total_amount_usd }}</span>
                                            </div>

                                            <div class="booking-info-box">
                                                <span class="label">Reference</span>
                                                <span class="value">
                                                    {{ booking.payment_reference_code|default:"Pending" }}
                                                </span>
                                            </div>

                                        </div>

                                        {% if booking.occasion_title %}
                                            <div class="mb-3">
                                                <strong>Occasion:</strong>
                                                <span class="text-muted">{{ booking.occasion_title }}</span>
                                            </div>
                                        {% endif %}

                                        {% if booking.selected_add_ons.all %}
                                            <div class="booking-addons mb-3">
                                                <strong class="d-block mb-2">
                                                    <i class="bi bi-plus-circle me-1"></i>
                                                    Selected Add-ons
                                                </strong>

                                                {% for add_on in booking.selected_add_ons.all %}
                                                    <div class="d-flex justify-content-between border-bottom py-1">
                                                        <span>
                                                            {{ add_on.add_on_title_snapshot }}
                                                            x {{ add_on.quantity }}
                                                        </span>
                                                        <strong>${{ add_on.subtotal_snapshot_usd }}</strong>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        {% endif %}

                                        <div class="d-flex flex-wrap gap-2 mt-3">
                                            {% if booking.payable_item and booking.payable_item.payment_status == 'due' %}
                                                <a href="{% url 'expat_life:foreigner_payment_center' %}"
                                                   class="btn btn-warning rounded-pill fw-bold px-4">
                                                    Pay Now
                                                </a>
                                            {% endif %}

                                            <a href="{% url 'expat_life:foreigner_dashboard' %}"
                                               class="btn btn-outline-dark rounded-pill fw-bold px-4">
                                                Dashboard
                                            </a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="empty-bookings">
                        <i class="bi bi-calendar2-heart mb-3 d-block"></i>
                        <h4 class="fw-bold mb-2">No host event bookings yet</h4>
                        <p class="text-muted mb-4">
                            When you request a hosting event, venue experience, meal package, or add-on service,
                            it will appear here.
                        </p>
                        <a href="{% url 'expat_life:home' %}"
                           class="btn btn-warning rounded-pill fw-bold px-4">
                            Explore Guest Services
                        </a>
                    </div>
                {% endif %}

            </div>
        </div>
    </div>
</section>

{% endblock %}