{% extends 'service_partner_app/base_service_partner.html' %}
{% load static %}

{% block title %}Interested Guests | Hired in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       HERO SECTION
    ========================================================= */
    .interest-guests-hero {
        position: relative;
        padding: 78px 0 66px;
        background:
            linear-gradient(
                110deg,
                rgba(7, 22, 31, 0.98) 0%,
                rgba(10, 45, 53, 0.94) 48%,
                rgba(13, 148, 136, 0.80) 100%
            );
        overflow: hidden;
    }

    .interest-guests-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 12% 18%, rgba(255, 193, 7, 0.22), transparent 28%),
            radial-gradient(circle at 88% 76%, rgba(255, 255, 255, 0.11), transparent 28%);
        pointer-events: none;
    }

    .interest-guests-hero::after {
        content: "";
        position: absolute;
        top: -110px;
        right: -95px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.055);
        pointer-events: none;
    }

    .interest-guests-hero-inner {
        position: relative;
        z-index: 2;
    }

    .interest-guests-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.18);
        border: 1px solid rgba(255, 193, 7, 0.36);
        color: #ffd453;
        font-weight: 800;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .interest-guests-title {
        color: #fff;
        font-size: clamp(2.35rem, 4vw, 3.8rem);
        line-height: 1.12;
        font-weight: 900;
    }

    .interest-guests-lead {
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.12rem;
        line-height: 1.8;
        max-width: 800px;
    }

    .interest-hero-points {
        margin-top: 28px;
    }

    .interest-hero-point {
        height: 100%;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 18px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #fff;
        backdrop-filter: blur(10px);
    }

    .interest-hero-point i {
        color: #ffc107;
        margin-top: 2px;
        font-size: 1.16rem;
    }

    .interest-back-btn {
        border-radius: 999px;
        min-height: 52px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-weight: 800;
    }


    /* =========================================================
       SUMMARY CARD
    ========================================================= */
    .interest-summary-wrap {
        position: relative;
        margin-top: -34px;
        z-index: 3;
    }

    .interest-summary-card {
        background: #fff;
        border-radius: 32px;
        padding: 30px;
        box-shadow: 0 28px 72px rgba(15, 23, 42, 0.14);
        border: 1px solid #edf2f3;
        position: relative;
        overflow: hidden;
    }

    .interest-summary-card::before {
        content: "";
        position: absolute;
        top: -70px;
        right: -70px;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        background: rgba(13, 148, 136, 0.08);
        pointer-events: none;
    }

    .interest-summary-inner {
        position: relative;
        z-index: 2;
    }

    .interest-summary-icon {
        width: 68px;
        height: 68px;
        border-radius: 24px;
        background: #eafff7;
        color: #0d9488;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.9rem;
        flex-shrink: 0;
        box-shadow: 0 14px 30px rgba(13, 148, 136, 0.12);
    }

    .interest-summary-title {
        color: #0d1f2a;
        font-weight: 900;
    }

    .interest-summary-text {
        color: #64748b;
        line-height: 1.7;
    }

    .interest-total-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 16px 22px;
        border-radius: 999px;
        background:
            linear-gradient(135deg, #0d1f2a 0%, #0d9488 100%);
        color: #fff;
        box-shadow: 0 18px 38px rgba(13, 148, 136, 0.22);
    }

    .interest-total-number {
        font-size: 1.75rem;
        font-weight: 900;
        line-height: 1;
    }

    .interest-total-label {
        font-size: 0.92rem;
        font-weight: 800;
        opacity: 0.94;
    }


    /* =========================================================
       MAIN PAGE AREA
    ========================================================= */
    .interested-guests-section {
        background:
            linear-gradient(180deg, #f5faf9 0%, #eef6f5 100%);
        padding: 58px 0 82px;
    }

    .interested-guests-heading {
        margin-bottom: 30px;
    }

    .interested-guests-heading h3 {
        color: #0d1f2a;
        font-weight: 900;
    }

    .interested-guests-heading p {
        color: #64748b;
        max-width: 760px;
        line-height: 1.75;
    }


    /* =========================================================
       GUEST INTEREST CARD
    ========================================================= */
    .guest-interest-card {
        height: 100%;
        border-radius: 32px;
        overflow: hidden;
        border: 1px solid #edf2f3;
        background: #fff;
        box-shadow: 0 22px 54px rgba(15, 23, 42, 0.10);
        transition: all 0.28s ease;
        position: relative;
    }

    .guest-interest-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 34px 78px rgba(15, 23, 42, 0.16);
    }

    .guest-interest-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: rgba(13, 148, 136, 0.075);
        pointer-events: none;
    }

    .guest-interest-card-body {
        position: relative;
        z-index: 2;
        padding: 30px 26px;
    }

    .guest-profile-photo-wrap {
        position: relative;
        display: inline-block;
        padding: 5px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0d9488 0%, #ffc107 100%);
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
    }

    .guest-profile-photo {
        width: 124px;
        height: 124px;
        border-radius: 50%;
        object-fit: cover;
        border: 5px solid #fff;
        display: block;
        background: #f8fafc;
    }

    .guest-card-top-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border-radius: 999px;
        background: #eafff7;
        color: #0d9488;
        font-size: 0.8rem;
        font-weight: 800;
        margin-bottom: 18px;
    }

    .guest-name {
        color: #0d1f2a;
        font-weight: 900;
        margin-bottom: 6px;
    }

    .guest-location {
        color: #64748b;
        font-weight: 650;
        margin-bottom: 0;
    }

    .guest-location i {
        color: #0d9488;
    }


    /* =========================================================
       INFO LIST
    ========================================================= */
    .guest-profile-info-list {
        margin-top: 24px;
        background: #f8fbfb;
        border: 1px solid #e8eeee;
        border-radius: 22px;
        padding: 4px 18px;
    }

    .guest-info-row {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: flex-start;
        padding: 14px 0;
        border-top: 1px dashed #dfe9eb;
    }

    .guest-info-row:first-child {
        border-top: none;
    }

    .guest-info-label {
        color: #64748b;
        font-size: 0.88rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .guest-info-value {
        color: #0d1f2a;
        font-weight: 800;
        text-align: right;
        line-height: 1.55;
    }


    /* =========================================================
       INTEREST STATUS PILLS
    ========================================================= */
    .guest-interest-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 800;
        background: #eafff7;
        color: #0d9488;
        line-height: 1.35;
        text-align: left;
    }


    /* =========================================================
       MESSAGE BOX
    ========================================================= */
    .guest-interest-message-box {
        margin-top: 20px;
        padding: 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 193, 7, 0.28);
        background:
            linear-gradient(135deg, #fff8e6 0%, #fffdf7 100%);
    }

    .guest-interest-message-box h6 {
        color: #0d1f2a;
        font-weight: 900;
        margin-bottom: 9px;
    }

    .guest-interest-message-box p {
        color: #64748b;
        line-height: 1.75;
    }


    /* =========================================================
       EMPTY STATE
    ========================================================= */
    .interest-empty-card {
        background: #fff;
        border-radius: 34px;
        padding: 56px 30px;
        box-shadow: 0 24px 62px rgba(15, 23, 42, 0.10);
        border: 1px solid #edf2f3;
        text-align: center;
    }

    .interest-empty-icon {
        width: 86px;
        height: 86px;
        border-radius: 28px;
        background: #eafff7;
        color: #0d9488;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.3rem;
        margin: 0 auto 22px;
        box-shadow: 0 16px 36px rgba(13, 148, 136, 0.14);
    }

    .interest-empty-card h4 {
        color: #0d1f2a;
        font-weight: 900;
    }

    .interest-empty-card p {
        color: #64748b;
        line-height: 1.75;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .interest-empty-btn {
        border-radius: 999px;
        min-height: 50px;
        padding-left: 1.45rem;
        padding-right: 1.45rem;
        font-weight: 800;
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */
    @media (max-width: 991.98px) {
        .interest-guests-hero {
            padding: 64px 0 58px;
        }

        .interest-summary-wrap {
            margin-top: 0;
            padding-top: 24px;
        }

        .interest-summary-card,
        .guest-interest-card-body,
        .interest-empty-card {
            padding: 24px;
        }

        .guest-info-row {
            flex-direction: column;
            gap: 5px;
        }

        .guest-info-value {
            text-align: left;
        }
    }
</style>


<!-- =========================================================
     HERO
========================================================= -->
<section class="interest-guests-hero">
    <div class="container interest-guests-hero-inner">
        <div class="row align-items-center g-4">

            <div class="col-lg-8">
                <span class="interest-guests-badge mb-4">
                    <i class="bi bi-heart-fill"></i>
                    Local Service Partner Dashboard
                </span>

                <h1 class="interest-guests-title mb-3">
                    Guests Interested in Your Service Profile
                </h1>

                <p class="interest-guests-lead mb-0">
                    Review the international guests who have already expressed interest
                    in your Service Partner profile. This page helps you stay informed
                    as your profile begins attracting attention within the Hired in Sri Lanka network.
                </p>

                <div class="row g-3 interest-hero-points">
                    <div class="col-md-6">
                        <div class="interest-hero-point">
                            <i class="bi bi-person-check-fill"></i>
                            <span>Track guests who noticed your service profile.</span>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="interest-hero-point">
                            <i class="bi bi-chat-square-text-fill"></i>
                            <span>Read any message or note attached to the request.</span>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="interest-hero-point">
                            <i class="bi bi-clock-history"></i>
                            <span>See when each interest request was submitted.</span>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="interest-hero-point">
                            <i class="bi bi-shield-check"></i>
                            <span>Continue through Ensolanka’s structured matching process.</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 text-lg-end">
                <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                   class="btn btn-light interest-back-btn">
                    <i class="bi bi-arrow-left me-2"></i>
                    Back to Dashboard
                </a>
            </div>

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


<!-- =========================================================
     TOTAL INTEREST SUMMARY
========================================================= -->
<section class="interest-summary-wrap">
    <div class="container">
        <div class="interest-summary-card">
            <div class="interest-summary-inner">
                <div class="row align-items-center g-4">
                    <div class="col-lg-8">
                        <div class="d-flex align-items-start gap-3">
                            <div class="interest-summary-icon">
                                <i class="bi bi-people-fill"></i>
                            </div>

                            <div>
                                <h3 class="interest-summary-title mb-2">
                                    Total Interest Requests
                                </h3>
                                <p class="interest-summary-text mb-0">
                                    This count shows the total number of guests who have already shown
                                    interest in your Service Partner profile.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 text-lg-end">
                        <div class="interest-total-pill">
                            <span class="interest-total-number">{{ total_interests }}</span>
                            <span class="interest-total-label">
                                Guest{{ total_interests|pluralize }} Interested
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- =========================================================
     INTEREST LIST SECTION
========================================================= -->
<section class="interested-guests-section">
    <div class="container">

        <div class="interested-guests-heading">
            <span class="section-mini-title">Interest Request Overview</span>
            <h3 class="mt-2 mb-2">
                Guest Interest Activity
            </h3>
            <p class="mb-0">
                Review available guest details, request dates, current interest status,
                and any message provided together with the expression of interest.
            </p>
        </div>

        {% if foreigner_cards %}
            <div class="row g-4">
                {% for item in foreigner_cards %}
                    <div class="col-md-6 col-xl-4">
                        <div class="guest-interest-card">
                            <div class="guest-interest-card-body">

                                <div class="text-center">
                                    <div class="guest-card-top-chip">
                                        <i class="bi bi-heart-fill"></i>
                                        Interested Guest
                                    </div>
                                </div>

                                <div class="text-center mb-3">
                                    <div class="guest-profile-photo-wrap">
                                        {% if item.profile_image %}
                                            <img
                                                src="{{ item.profile_image }}"
                                                alt="{{ item.name }}"
                                                class="guest-profile-photo"
                                            >
                                        {% else %}
                                            <img
                                                src="{% static 'images/default-profile.png' %}"
                                                alt="Default Profile"
                                                class="guest-profile-photo"
                                            >
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="text-center">
                                    <h5 class="guest-name">
                                        {{ item.name }}
                                    </h5>

                                    {% if item.country %}
                                        <p class="guest-location">
                                            <i class="bi bi-geo-alt-fill me-1"></i>
                                            {{ item.country }}
                                        </p>
                                    {% endif %}
                                </div>

                                <div class="guest-profile-info-list">

                                    {% if item.lead and item.lead.nationality %}
                                        <div class="guest-info-row">
                                            <span class="guest-info-label">
                                                Nationality
                                            </span>
                                            <span class="guest-info-value">
                                                {{ item.lead.get_nationality_display }}
                                            </span>
                                        </div>
                                    {% endif %}

                                    {% if item.age %}
                                        <div class="guest-info-row">
                                            <span class="guest-info-label">
                                                Age
                                            </span>
                                            <span class="guest-info-value">
                                                {{ item.age }}
                                            </span>
                                        </div>
                                    {% endif %}

                                    <div class="guest-info-row">
                                        <span class="guest-info-label">
                                            Interest Status
                                        </span>
                                        <span class="guest-info-value">
                                            <span class="guest-interest-status-pill">
                                                <i class="bi bi-arrow-right-circle-fill"></i>
                                                {{ item.interest.get_status_display }}
                                            </span>
                                        </span>
                                    </div>

                                    <div class="guest-info-row">
                                        <span class="guest-info-label">
                                            Expressed On
                                        </span>
                                        <span class="guest-info-value">
                                            {{ item.interest.created_at|date:"M d, Y" }}
                                        </span>
                                    </div>

                                </div>

                                {% if item.interest.message %}
                                    <div class="guest-interest-message-box">
                                        <h6>
                                            <i class="bi bi-chat-left-quote-fill me-2"></i>
                                            Message
                                        </h6>
                                        <p class="small mb-0">
                                            {{ item.interest.message|linebreaksbr }}
                                        </p>
                                    </div>
                                {% endif %}

                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="interest-empty-card">
                <div class="interest-empty-icon">
                    <i class="bi bi-people"></i>
                </div>

                <h4 class="mb-2">
                    No Interest Requests Yet
                </h4>

                <p class="mb-4">
                    When international guests express interest in your Service Partner profile,
                    their requests will appear here with available profile and status details.
                </p>

                <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                   class="btn btn-dark interest-empty-btn">
                    <i class="bi bi-arrow-left me-2"></i>
                    Back to Dashboard
                </a>
            </div>
        {% endif %}

    </div>
</section>

{% endblock %}