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

{% block title %}Hosting Partner Dashboard | Host in Sri Lanka{% endblock %}

{% block extra_css %}
<style>
    .hosting-dashboard-page {
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 28%),
            linear-gradient(135deg, #fffaf3 0%, #ffffff 50%, #fff6eb 100%);
        min-height: 85vh;
        padding: 48px 0 72px;
    }

    .hosting-dashboard-hero {
        position: relative;
        overflow: hidden;
        border-radius: 38px;
        background:
            linear-gradient(145deg, rgba(39, 25, 20, 0.97), rgba(121, 53, 41, 0.93));
        padding: 40px;
        color: #fff;
        box-shadow: 0 28px 70px rgba(40, 20, 14, 0.24);
        margin-bottom: 28px;
    }

    .hosting-dashboard-hero::before {
        content: "";
        position: absolute;
        right: -120px;
        top: -120px;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.18);
    }

    .hosting-dashboard-hero::after {
        content: "";
        position: absolute;
        left: -130px;
        bottom: -150px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

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

    .hosting-profile-avatar {
        width: 106px;
        height: 106px;
        border-radius: 28px;
        object-fit: cover;
        border: 4px solid rgba(255, 255, 255, 0.26);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
        background: #fff;
    }

    .hosting-dashboard-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.16);
        padding: 8px 15px;
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 14px;
    }

    .hosting-dashboard-title {
        font-size: clamp(2rem, 4vw, 3.15rem);
        line-height: 1.1;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .hosting-dashboard-copy {
        color: rgba(255, 255, 255, 0.80);
        line-height: 1.7;
        margin-bottom: 0;
        max-width: 760px;
    }

    .hosting-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        padding: 10px 16px;
        font-weight: 800;
        margin-top: 18px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .hosting-status-approved {
        color: #b8ffcf;
    }

    .hosting-status-pending {
        color: #ffe398;
    }

    .hosting-status-rejected,
    .hosting-status-suspended {
        color: #ffc2c2;
    }

    .hosting-dashboard-stat {
        background: #fff;
        border-radius: 28px;
        padding: 26px 24px;
        border: 1px solid rgba(124, 74, 50, 0.08);
        box-shadow: 0 18px 40px rgba(40, 20, 14, 0.08);
        height: 100%;
    }

    .hosting-stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff3dc;
        color: #a46518;
        font-size: 1.35rem;
        margin-bottom: 18px;
    }

    .hosting-stat-number {
        font-size: 2rem;
        line-height: 1;
        font-weight: 800;
        color: #2d1d19;
        margin-bottom: 8px;
    }

    .hosting-stat-label {
        color: #7a6660;
        margin-bottom: 0;
        font-weight: 600;
    }

    .hosting-section-card {
        background: #fff;
        border-radius: 32px;
        padding: 30px;
        border: 1px solid rgba(124, 74, 50, 0.08);
        box-shadow: 0 18px 44px rgba(40, 20, 14, 0.08);
        height: 100%;
    }

    .hosting-section-title {
        font-size: 1.45rem;
        font-weight: 800;
        color: #2d1d19;
        margin-bottom: 8px;
    }

    .hosting-section-copy {
        color: #7a6660;
        line-height: 1.65;
        margin-bottom: 22px;
    }

    .hosting-action-btn {
        border-radius: 16px;
        min-height: 50px;
        font-weight: 800;
    }

    .hosting-btn-primary {
        background: linear-gradient(135deg, #f4b41b, #d88918);
        color: #24160f;
        border: none;
    }

    .hosting-btn-primary:hover {
        color: #24160f;
        background: linear-gradient(135deg, #ffc439, #dd931e);
    }

    .hosting-dashboard-list {
        display: grid;
        gap: 14px;
    }

    .hosting-dashboard-list-item {
        padding: 16px 18px;
        border-radius: 20px;
        background: #fffaf2;
        border: 1px solid #f0dfc3;
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }

    .hosting-dashboard-list-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: #fff0d2;
        color: #a46518;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
    }

    .hosting-dashboard-list-item h6 {
        font-weight: 800;
        margin-bottom: 3px;
        color: #38241e;
    }

    .hosting-dashboard-list-item p {
        color: #806d66;
        font-size: 0.92rem;
        margin-bottom: 0;
        line-height: 1.55;
    }

    .hosting-venue-table-wrap {
        overflow-x: auto;
    }

    .hosting-venue-table {
        margin-bottom: 0;
    }

    .hosting-venue-table th {
        color: #674d44;
        font-size: 0.84rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom-width: 1px;
        white-space: nowrap;
    }

    .hosting-venue-table td {
        vertical-align: middle;
        color: #55423c;
    }

    .venue-status-pill {
        display: inline-flex;
        border-radius: 999px;
        padding: 6px 12px;
        background: #f7efe3;
        color: #80551b;
        font-weight: 700;
        font-size: 0.82rem;
    }

    .hosting-empty-state {
        border-radius: 26px;
        padding: 32px 24px;
        background: #fffaf2;
        border: 1px dashed #e8cfaa;
        text-align: center;
    }

    .hosting-empty-state i {
        font-size: 2.4rem;
        color: #b77a28;
        margin-bottom: 12px;
    }

    .hosting-empty-state h5 {
        font-weight: 800;
        color: #39251f;
        margin-bottom: 8px;
    }

    .hosting-empty-state p {
        color: #7b6860;
        margin-bottom: 0;
    }

    .hosting-credential-box {
        background: linear-gradient(135deg, #fff7e8, #fff);
        border: 1px solid #f1dcbb;
        border-radius: 28px;
        padding: 24px;
        margin-bottom: 28px;
        box-shadow: 0 16px 36px rgba(40, 20, 14, 0.07);
    }

    .hosting-credential-title {
        font-weight: 800;
        color: #35231c;
        margin-bottom: 6px;
    }

    .hosting-credential-copy {
        color: #7a665d;
        margin-bottom: 16px;
    }

    .hosting-credential-item {
        background: #fff;
        border-radius: 16px;
        padding: 13px 16px;
        border: 1px solid #efe2cc;
        height: 100%;
    }

    .hosting-credential-item span {
        display: block;
        color: #8a756d;
        font-size: 0.82rem;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
    }

    .hosting-credential-item strong {
        color: #30201b;
        font-size: 1rem;
        word-break: break-word;
    }

    @media (max-width: 991.98px) {
        .hosting-dashboard-page {
            padding-top: 32px;
        }

        .hosting-dashboard-hero {
            padding: 28px 24px;
        }

        .hosting-section-card {
            padding: 24px;
        }
    }

    .hosting-btn-primary.hosting-action-btn {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #321816 0%, #a7601b 100%);
        color: #ffffff;
        border: none;
        box-shadow: 0 14px 28px rgba(167, 96, 27, 0.22);
        transition: all 0.25s ease;
    }

    .hosting-btn-primary.hosting-action-btn:hover {
        color: #2d1716;
        background: linear-gradient(135deg, #ffc107 0%, #ffe082 100%);
        transform: translateY(-3px);
        box-shadow: 0 20px 38px rgba(167, 96, 27, 0.30);
    }

    .hosting-btn-primary.hosting-action-btn:hover i {
        transform: scale(1.12);
    }

    .hosting-btn-primary.hosting-action-btn i {
        transition: transform 0.25s ease;
    }

    .hosting-btn-primary.hosting-action-btn:active {
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(167, 96, 27, 0.22);
    }
</style>
{% endblock %}

{% block content %}
<section class="hosting-dashboard-page">
    <div class="container">

        {% if just_signed_up %}
            <div class="hosting-credential-box">
                <div class="d-flex align-items-start gap-3 mb-3">
                    <div class="hosting-stat-icon mb-0">
                        <i class="bi bi-person-check-fill"></i>
                    </div>
                    <div>
                        <h4 class="hosting-credential-title">
                            Welcome, your Hosting Partner account has been created.
                        </h4>
                        <p class="hosting-credential-copy mb-0">
                            Please save your temporary login credentials safely. You can later add password reset
                            and change-password flow exactly like the other Travel apps.
                        </p>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="hosting-credential-item">
                            <span>Account Role</span>
                            <strong>{{ account_role }}</strong>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="hosting-credential-item">
                            <span>Username</span>
                            <strong>{{ username }}</strong>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="hosting-credential-item">
                            <span>Temporary Password</span>
                            <strong>{{ password }}</strong>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="hosting-credential-item">
                            <span>Registered Email</span>
                            <strong>{{ new_account_email }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <!-- DASHBOARD HERO -->
        <div class="hosting-dashboard-hero">
            <div class="hosting-dashboard-hero-inner">
                <div class="row align-items-center g-4">

                    <div class="col-auto">
                        {% if host.profile_image %}
                            <img src="{{ host.profile_image.url }}"
                                 alt="{{ host.business_name }}"
                                 class="hosting-profile-avatar">
                        {% else %}
                            <img src="{% static default_profile_image %}"
                                 alt="Default Profile"
                                 class="hosting-profile-avatar">
                        {% endif %}
                    </div>

                    <div class="col">
                        <span class="hosting-dashboard-kicker">
                            <i class="bi bi-stars"></i>
                            Hosting Partner Dashboard
                        </span>

                        <h1 class="hosting-dashboard-title">
                            Welcome, {{ host.contact_person_name }}
                        </h1>

                        <p class="hosting-dashboard-copy">
                            Manage your Hosting Partner profile and prepare your venue presence for guests seeking
                            romantic dates, proposal setups, anniversaries, birthdays, honeymoon moments,
                            and memorable celebrations in Sri Lanka.
                        </p>

                        {% if host.status == 'approved' %}
                            <span class="hosting-status-badge hosting-status-approved">
                                <i class="bi bi-patch-check-fill"></i>
                                Hosting Partner Approved
                            </span>
                        {% elif host.status == 'pending' %}
                            <span class="hosting-status-badge hosting-status-pending">
                                <i class="bi bi-hourglass-split"></i>
                                Hosting Partner Profile Pending Review
                            </span>
                        {% elif host.status == 'rejected' %}
                            <span class="hosting-status-badge hosting-status-rejected">
                                <i class="bi bi-x-octagon-fill"></i>
                                Hosting Partner Profile Requires Attention
                            </span>
                        {% elif host.status == 'suspended' %}
                            <span class="hosting-status-badge hosting-status-suspended">
                                <i class="bi bi-slash-circle-fill"></i>
                                Hosting Partner Profile Suspended
                            </span>
                        {% endif %}
                    </div>

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

        <!-- STAT CARDS -->
        <div class="row g-4 mb-4">

            <div class="col-md-6 col-xl-3">
                <div class="hosting-dashboard-stat">
                    <div class="hosting-stat-icon">
                        <i class="bi bi-building"></i>
                    </div>
                    <div class="hosting-stat-number">{{ total_venues }}</div>
                    <p class="hosting-stat-label">Total Venues</p>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="hosting-dashboard-stat">
                    <div class="hosting-stat-icon">
                        <i class="bi bi-patch-check"></i>
                    </div>
                    <div class="hosting-stat-number">{{ approved_venues }}</div>
                    <p class="hosting-stat-label">Approved Venues</p>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="hosting-dashboard-stat">
                    <div class="hosting-stat-icon">
                        <i class="bi bi-gift"></i>
                    </div>
                    <div class="hosting-stat-number">{{ total_packages }}</div>
                    <p class="hosting-stat-label">Event Packages</p>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="hosting-dashboard-stat">
                    <div class="hosting-stat-icon">
                        <i class="bi bi-stars"></i>
                    </div>
                    <div class="hosting-stat-number">{{ approved_packages }}</div>
                    <p class="hosting-stat-label">Approved Packages</p>
                </div>
            </div>

        </div>

        <div class="row g-4">

            <!-- QUICK ACTIONS -->
            <div class="col-lg-5">
                <div class="hosting-section-card">
                    <h3 class="hosting-section-title">
                        Build Your Hosting Presence
                    </h3>

                    <p class="hosting-section-copy">
                        These management pages will become available as we build the next layer of the Hosting App.
                    </p>

                    <div class="d-grid gap-3">
                        <a href="{% url 'hosting_app:host_profile_page' %}"
                           class="btn hosting-btn-primary hosting-action-btn">
                            <i class="bi bi-person-vcard-fill me-2"></i>
                            Complete Hosting Profile
                        </a>

                        <a href="{% url 'hosting_app:host_venue_create' %}"
                           class="btn btn-outline-dark hosting-action-btn">
                            <i class="bi bi-building-add me-2"></i>
                            Add New Venue
                        </a>

                        <a href="{% url 'hosting_app:host_venue_list' %}"
                            class="btn btn-outline-dark hosting-action-btn">
                            <i class="bi bi-buildings-fill me-2"></i>
                            Manage My Venues
                        </a>

                        <a href="{% url 'hosting_app:host_event_package_create' %}"
                           class="btn btn-outline-dark hosting-action-btn">
                            <i class="bi bi-gift-fill me-2"></i>
                            Create Event Package
                        </a>

                        <a href="{% url 'hosting_app:host_event_package_list' %}"
                            class="btn btn-outline-dark hosting-action-btn">
                            <i class="bi bi-box-seam-fill me-2"></i>
                            Manage Event Packages
                        </a>

                        <a href="{% url 'hosting_app:host_meal_plan_create' %}"
                            class="btn btn-outline-dark hosting-action-btn">
                            <i class="bi bi-cup-hot-fill me-2"></i>
                            Add Meal Plan
                        </a>

                        <a href="{% url 'hosting_app:host_meal_plan_list' %}"
                            class="btn hosting-btn-primary hosting-action-btn">
                            <i class="bi bi-cup-hot-fill me-2"></i>
                            Manage Meal Plans
                        </a>

                        <a href="{% url 'hosting_app:host_add_on_service_create' %}"
                            class="btn btn-outline-dark hosting-action-btn">
                            <i class="bi bi-stars me-2"></i>
                            Add Service Add-on
                        </a>

                        <a href="{% url 'hosting_app:host_add_on_service_list' %}"
                            class="btn btn-outline-dark hosting-action-btn">
                            <i class="bi bi-card-checklist me-2"></i>
                            Manage Add-on Services
                        </a>
                        <a href="{% url 'hosting_app:host_payment_center' %}"
                            class="btn hosting-btn-primary hosting-action-btn">
                            <i class="bi bi-wallet2 me-2"></i>
                            Payment Center
                        </a>
                        <a href="{% url 'hosting_app:host_booking_list' %}"
                            class="btn hosting-btn-primary hosting-action-btn">
                            <i class="bi bi-calendar-check-fill me-2"></i>
                            Booking Requests
                        </a>
                        <a href="{% url 'hosting_app:host_banking_details' %}"
                            class="btn hosting-btn-primary hosting-action-btn">
                            <i class="bi bi-bank2 me-2"></i>
                            Banking Details
                        </a>
                    </div>
                </div>
            </div>

            <!-- JOURNEY / REMINDERS -->
            <div class="col-lg-7">
                <div class="hosting-section-card">
                    <h3 class="hosting-section-title">
                        Recommended Setup Journey
                    </h3>

                    <p class="hosting-section-copy">
                        To become attractive to guests, your hosting presence should eventually include these key parts.
                    </p>

                    <div class="hosting-dashboard-list">

                        <div class="hosting-dashboard-list-item">
                            <div class="hosting-dashboard-list-icon">
                                <i class="bi bi-building-heart"></i>
                            </div>
                            <div>
                                <h6>1. Add your hosting venue</h6>
                                <p>
                                    Restaurant, villa, rooftop, beach cabana, resort, garden, or celebration venue.
                                </p>
                            </div>
                        </div>

                        <div class="hosting-dashboard-list-item">
                            <div class="hosting-dashboard-list-icon">
                                <i class="bi bi-gift-fill"></i>
                            </div>
                            <div>
                                <h6>2. Present celebration packages</h6>
                                <p>
                                    Date nights, proposal setups, anniversary plans, birthdays, honeymoons, and custom events.
                                </p>
                            </div>
                        </div>

                        <div class="hosting-dashboard-list-item">
                            <div class="hosting-dashboard-list-icon">
                                <i class="bi bi-cup-hot-fill"></i>
                            </div>
                            <div>
                                <h6>3. Add meals and premium extras</h6>
                                <p>
                                    Couple menus, cakes, flowers, photographers, music, decorations, and other add-on services.
                                </p>
                            </div>
                        </div>

                        <div class="hosting-dashboard-list-item">
                            <div class="hosting-dashboard-list-icon">
                                <i class="bi bi-people-fill"></i>
                            </div>
                            <div>
                                <h6>4. Receive guest requests later</h6>
                                <p>
                                    Ensolanka will coordinate event inquiries and help convert approved requests into confirmed bookings.
                                </p>
                            </div>
                        </div>

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

        </div>

        <!-- VENUE SUMMARY -->
        <div class="row g-4 mt-1">
            <div class="col-12">
                <div class="hosting-section-card">

                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
                        <div>
                            <h3 class="hosting-section-title mb-1">
                                Your Venues
                            </h3>
                            <p class="hosting-section-copy mb-0">
                                A preview of venues linked to your Hosting Partner account.
                            </p>
                        </div>

                        <a href="{% url 'hosting_app:host_venue_create' %}"
                           class="btn hosting-btn-primary hosting-action-btn px-4">
                            <i class="bi bi-building-add me-2"></i>
                            Add Venue
                        </a>
                    </div>

                    {% if venues %}
                        <div class="hosting-venue-table-wrap">
                            <table class="table hosting-venue-table align-middle">
                                <thead>
                                    <tr>
                                        <th>Venue</th>
                                        <th>Location</th>
                                        <th>Status</th>
                                        <th>Public</th>
                                        <th>Packages</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    {% for venue in venues %}
                                        <tr>
                                            <td>
                                                <strong>
                                                    <a href="{% url 'hosting_app:host_venue_detail' venue.slug %}"
                                                    class="text-decoration-none text-dark">
                                                        {{ venue.venue_name }}
                                                    </a>
                                                </strong>
                                                <br>
                                                <small class="text-muted">
                                                    {{ venue.get_venue_category_display }}
                                                </small>
                                            </td>

                                            <td>
                                                {{ venue.get_city_display|default:venue.city }},
                                                {{ venue.get_district_display|default:venue.district }}
                                            </td>

                                            <td>
                                                <span class="venue-status-pill">
                                                    {{ venue.get_listing_status_display }}
                                                </span>
                                            </td>

                                            <td>
                                                {% if venue.is_public %}
                                                    <span class="badge text-bg-success rounded-pill">Public</span>
                                                {% else %}
                                                    <span class="badge text-bg-secondary rounded-pill">Hidden</span>
                                                {% endif %}
                                            </td>

                                            <td>
                                                {{ venue.event_packages.count }}
                                            </td>
                                            <td>
                                                <div class="d-flex flex-wrap gap-2">
                                                    <a href="{% url 'hosting_app:host_venue_detail' venue.slug %}"
                                                    class="btn btn-sm btn-outline-dark rounded-pill">
                                                        View
                                                    </a>

                                                    <a href="{% url 'hosting_app:host_venue_update' venue.slug %}"
                                                    class="btn btn-sm btn-outline-secondary rounded-pill">
                                                        Edit
                                                    </a>

                                                    <a href="{% url 'hosting_app:host_venue_gallery_manage' venue.slug %}"
                                                    class="btn btn-sm btn-outline-secondary rounded-pill">
                                                        Gallery
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="hosting-empty-state">
                            <i class="bi bi-building-add d-block"></i>
                            <h5>No venues added yet</h5>
                            <p>
                                Your venue management page will allow you to add the first hosting venue,
                                upload images, and later create event packages.
                            </p>
                        </div>
                    {% endif %}

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

    </div>
</section>
{% endblock %}