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

{% block title %}Booking Requests | Host in Sri Lanka{% endblock %}

{% block content %}

<style>
    .hosting-bookings-page {
        min-height: 100vh;
        padding: 4rem 0 5rem;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.10), transparent 30%),
            radial-gradient(circle at top right, rgba(116, 49, 41, 0.10), transparent 32%),
            linear-gradient(180deg, #fffaf5 0%, #ffffff 48%, #fff7ed 100%);
        color: #2c1b17;
    }

    .hosting-bookings-hero {
        border-radius: 36px;
        padding: 2.5rem 2.25rem;
        color: #ffffff;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.22), transparent 35%),
            linear-gradient(145deg, #2e1817 0%, #6d2e28 64%, #a3601b 100%);
        box-shadow: 0 30px 70px rgba(53, 27, 22, 0.20);
        margin-bottom: 2rem;
    }

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

    .hosting-bookings-hero h1 {
        font-size: clamp(2.15rem, 4vw, 3.55rem);
        font-weight: 950;
        line-height: 1.06;
        letter-spacing: -0.05em;
        margin-bottom: 0.8rem;
    }

    .hosting-bookings-hero p {
        color: rgba(255,255,255,0.84);
        line-height: 1.8;
        max-width: 860px;
        margin-bottom: 0;
    }

    .hosting-stats-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .hosting-stat-card {
        border-radius: 24px;
        padding: 1.15rem;
        background: #ffffff;
        border: 1px solid rgba(124, 74, 50, 0.10);
        box-shadow: 0 14px 30px rgba(55,31,22,0.06);
    }

    .hosting-stat-card span {
        display: block;
        color: #8b6550;
        font-size: 0.76rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.35rem;
    }

    .hosting-stat-card strong {
        color: #38231d;
        font-size: 1.45rem;
        font-weight: 950;
    }

    .hosting-booking-card {
        border-radius: 28px;
        background: linear-gradient(145deg, #fffaf4 0%, #ffffff 100%);
        border: 1px solid rgba(124, 74, 50, 0.10);
        box-shadow: 0 18px 42px rgba(55,31,22,0.07);
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .hosting-booking-card-body {
        padding: 1.35rem;
    }

    .hosting-booking-title {
        color: #38231d;
        font-weight: 950;
        font-size: 1.1rem;
        margin-bottom: 0.35rem;
    }

    .hosting-booking-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-bottom: 0.8rem;
    }

    .hosting-booking-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.32rem;
        border-radius: 999px;
        padding: 0.34rem 0.58rem;
        background: #fff7e8;
        border: 1px solid #efd8b7;
        color: #6f4f3f;
        font-size: 0.75rem;
        font-weight: 850;
    }

    .hosting-filter-card {
        border-radius: 28px;
        background: #ffffff;
        border: 1px solid rgba(124, 74, 50, 0.10);
        box-shadow: 0 14px 30px rgba(55,31,22,0.06);
        padding: 1.2rem;
        margin-bottom: 1.5rem;
    }

    @media (max-width: 1199.98px) {
        .hosting-stats-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .hosting-stats-grid {
            grid-template-columns: 1fr;
        }

        .hosting-bookings-hero {
            padding: 2rem 1.35rem;
            border-radius: 30px;
        }
    }
</style>


<section class="hosting-bookings-page">
    <div class="container">

        <div class="hosting-bookings-hero">
            <span class="hosting-bookings-kicker">
                <i class="bi bi-calendar-check-fill"></i>
                Hosting Partner Bookings
            </span>

            <h1>Booking Requests</h1>

            <p>
                View guest and local-client booking orders connected to your venues, packages,
                meal plans, and add-on services.
            </p>
        </div>


        <div class="hosting-stats-grid">
            <div class="hosting-stat-card">
                <span>Total</span>
                <strong>{{ total_bookings }}</strong>
            </div>

            <div class="hosting-stat-card">
                <span>Due / Unpaid</span>
                <strong>{{ due_count }}</strong>
            </div>

            <div class="hosting-stat-card">
                <span>Paid</span>
                <strong>{{ paid_count }}</strong>
            </div>

            <div class="hosting-stat-card">
                <span>Completed</span>
                <strong>{{ completed_count }}</strong>
            </div>

            <div class="hosting-stat-card">
                <span>Host Net</span>
                <strong>USD {{ total_host_net|floatformat:2 }}</strong>
            </div>
        </div>


        <div class="hosting-filter-card">
            <form method="get">
                <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">
                            <option value="">All Statuses</option>
                            {% for value, label in booking_status_choices %}
                                <option value="{{ value }}" {% if status == 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">
                            <option value="">All Payment Statuses</option>
                            {% for value, label in payment_status_choices %}
                                <option value="{{ value }}" {% if payment_status == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-2">
                        <button type="submit" class="btn btn-dark w-100 rounded-pill fw-bold">
                            Filter
                        </button>
                    </div>
                </div>
            </form>
        </div>


        {% if bookings %}
            {% for booking in bookings %}
                <div class="hosting-booking-card">
                    <div class="hosting-booking-card-body">
                        <div class="d-flex flex-wrap justify-content-between gap-3 align-items-start">
                            <div>
                                <h3 class="hosting-booking-title">
                                    {{ booking.get_event_type_display }} — {{ booking.venue_name_snapshot }}
                                </h3>

                                <div class="hosting-booking-meta">
                                    <span class="hosting-booking-chip">
                                        <i class="bi bi-calendar-event"></i>
                                        {{ booking.preferred_event_date }}
                                    </span>

                                    <span class="hosting-booking-chip">
                                        <i class="bi bi-people-fill"></i>
                                        {{ booking.number_of_guests }} guests
                                    </span>

                                    <span class="hosting-booking-chip">
                                        <i class="bi bi-credit-card-fill"></i>
                                        {{ booking.get_payment_status_display }}
                                    </span>

                                    <span class="hosting-booking-chip">
                                        <i class="bi bi-list-check"></i>
                                        {{ booking.get_status_display }}
                                    </span>
                                </div>

                                <p class="text-muted mb-0">
                                    Total: <strong>USD {{ booking.total_amount_usd|floatformat:2 }}</strong>
                                    · Host Net: <strong>USD {{ booking.host_net_amount_usd|floatformat:2 }}</strong>
                                </p>
                            </div>

                            <a href="{% url 'hosting_app:host_booking_detail' booking.id %}"
                               class="btn btn-outline-dark rounded-pill fw-bold">
                                View Details
                                <i class="bi bi-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="bg-white border rounded-5 shadow-sm p-5 text-center">
                <i class="bi bi-calendar-heart display-4 text-warning mb-3"></i>
                <h3 class="fw-bold">No booking requests yet</h3>
                <p class="text-muted mb-0">
                    Guest and local-client bookings for your venues will appear here.
                </p>
            </div>
        {% endif %}

    </div>
</section>

{% endblock %}