{% extends 'dating_app/base_dating.html' %}
{% load static %}

{% block title %}Interested Guests{% endblock %}

{% block content %}

<section class="dating-interest-page py-5">
    <div class="container">

        <!-- Page Header -->
        <div class="dating-interest-header mb-4">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                    <span class="section-mini-title">Dating Partner Dashboard</span>
                    <h2 class="fw-bold mb-2 mt-3">Guests Interested in Your Profile</h2>
                    <p class="text-muted mb-0">
                        Here you can view the guests who have already expressed interest in your dating profile.
                    </p>
                </div>

                <div>
                    <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn dating-btn-outline">
                        <i class="bi bi-arrow-left me-1"></i> Back to Dashboard
                    </a>
                </div>
            </div>
        </div>

        <!-- Total Interest Card -->
        <div class="mb-4">
            <div class="dating-total-card">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                    <div class="d-flex align-items-center gap-3">
                        <div class="dating-total-icon">
                            <i class="bi bi-heart-fill"></i>
                        </div>

                        <div>
                            <h5 class="fw-bold mb-1">Total Interest Requests</h5>
                            <p class="text-muted mb-0">
                                Total guests who showed interest in your profile.
                            </p>
                        </div>
                    </div>

                    <div class="text-md-end">
                        <span class="dating-total-badge">{{ total_interests }}</span>
                    </div>
                </div>
            </div>
        </div>

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

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

                                <!-- Profile Name -->
                                <div class="text-center mb-3">
                                    <h5 class="fw-bold mb-1">{{ item.name }}</h5>

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

                                <!-- Info List -->
                                <div class="profile-info-list">
                                    {% if item.monthly_budget %}
                                        <div class="info-row d-flex justify-content-between align-items-center py-2">
                                            <span class="text-muted">Monthly Budget</span>
                                            <span class="fw-semibold">{{ item.monthly_budget }}</span>
                                        </div>
                                    {% endif %}

                                    {% if item.age %}
                                        <div class="info-row d-flex justify-content-between align-items-center py-2">
                                            <span class="text-muted">Age</span>
                                            <span class="fw-semibold">{{ item.age }}</span>
                                        </div>
                                    {% endif %}

                                    <div class="info-row d-flex justify-content-between align-items-center py-2">
                                        <span class="text-muted">Interest Status</span>
                                        <span class="dating-status-pill">
                                            {{ item.interest.get_status_display }}
                                        </span>
                                    </div>

                                    <div class="info-row d-flex justify-content-between align-items-center py-2">
                                        <span class="text-muted">Expressed On</span>
                                        <span class="fw-semibold">{{ item.interest.created_at|date:"M d, Y" }}</span>
                                    </div>
                                </div>

                                {% if item.interest.message %}
                                    <div class="dating-message-box mt-3">
                                        <h6 class="fw-bold mb-2">
                                            <i class="bi bi-chat-heart-fill me-1"></i> Message
                                        </h6>
                                        <p class="text-muted small mb-0">
                                            {{ item.interest.message|linebreaksbr }}
                                        </p>
                                    </div>
                                {% endif %}

                                {% if item.foreigner and item.foreigner.pk %}
                                    <div class="mt-4">
                                        <a href="{% url 'dating_app:public_foreigner_detail' item.foreigner.pk %}"
                                           class="btn dating-btn-primary w-100">
                                            View Profile
                                        </a>
                                    </div>
                                {% endif %}

                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}

            <!-- Empty State -->
            <div class="dating-empty-card">
                <div class="card-body text-center py-5 px-4">
                    <div class="dating-empty-icon mb-3">
                        <i class="bi bi-people"></i>
                    </div>

                    <h4 class="fw-bold">No Interest Requests Yet</h4>

                    <p class="text-muted mb-4">
                        When guests express interest in your dating profile, they will appear here.
                    </p>

                    <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn dating-btn-outline">
                        Back to Dashboard
                    </a>
                </div>
            </div>

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

<style>
    .dating-interest-page {
        --dating-deep: #2a0d1f;
        --dating-deeper: #1b0714;
        --dating-pink: #c2185b;
        --dating-pink-mid: #ff4d88;
        --dating-pink-soft: #fff1f6;
        --dating-gold: #ffc107;
        --dating-muted: #756a77;
        --dating-shadow: 0 18px 45px rgba(42, 13, 31, 0.10);
        --dating-shadow-strong: 0 26px 70px rgba(42, 13, 31, 0.17);

        position: relative;
        min-height: 75vh;
        overflow: hidden;
        background:
            radial-gradient(circle at 8% 8%, rgba(255, 193, 7, 0.15), transparent 25%),
            radial-gradient(circle at 92% 12%, rgba(194, 24, 91, 0.12), transparent 30%),
            linear-gradient(180deg, #fff8fb 0%, #f9f2f7 100%);
    }

    .dating-interest-page::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -170px;
        top: -170px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.14);
        filter: blur(8px);
        z-index: 0;
    }

    .dating-interest-page::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        left: -180px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(194, 24, 91, 0.10);
        filter: blur(8px);
        z-index: 0;
    }

    .dating-interest-page .container {
        position: relative;
        z-index: 2;
    }

    .dating-interest-page .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 7px 15px;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.16);
        color: #9b1b60;
        border: 1px solid rgba(255, 193, 7, 0.30);
        font-size: 0.78rem;
        font-weight: 900;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .dating-interest-page .section-mini-title::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dating-gold);
        box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.14);
    }

    .dating-interest-header {
        background:
            radial-gradient(circle at 88% 20%, rgba(255, 193, 7, 0.13), transparent 30%),
            linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
        border: 1px solid rgba(194, 24, 91, 0.10);
        border-radius: 30px;
        padding: 30px;
        box-shadow: var(--dating-shadow);
    }

    .dating-interest-header h2 {
        color: var(--dating-deep);
        letter-spacing: -0.025em;
    }

    .dating-interest-page .text-muted {
        color: var(--dating-muted) !important;
    }

    /* Scoped Buttons */
    .dating-interest-page .dating-btn-primary,
    .dating-interest-page .dating-btn-outline {
        border-radius: 999px;
        font-weight: 800;
        letter-spacing: 0.01em;
        transition: all 0.22s ease;
    }

    .dating-interest-page .dating-btn-primary:hover,
    .dating-interest-page .dating-btn-outline:hover {
        transform: translateY(-2px);
    }

    .dating-interest-page .dating-btn-primary {
        background: linear-gradient(135deg, var(--dating-deep), var(--dating-pink));
        border: none;
        color: #fff;
        box-shadow: 0 16px 32px rgba(194, 24, 91, 0.24);
        padding: 0.75rem 1rem;
    }

    .dating-interest-page .dating-btn-primary:hover {
        background: linear-gradient(135deg, var(--dating-deeper), var(--dating-pink-mid));
        color: #fff;
        box-shadow: 0 20px 38px rgba(194, 24, 91, 0.32);
    }

    .dating-interest-page .dating-btn-outline {
        border: 2px solid rgba(194, 24, 91, 0.28);
        color: var(--dating-deep);
        background: #fff;
        padding: 0.65rem 1.1rem;
    }

    .dating-interest-page .dating-btn-outline:hover {
        background: var(--dating-deep);
        color: #fff;
        border-color: var(--dating-deep);
        box-shadow: 0 14px 28px rgba(42, 13, 31, 0.16);
    }

    /* Total Interest Card */
    .dating-total-card {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 88% 15%, rgba(255, 193, 7, 0.16), transparent 34%),
            linear-gradient(135deg, var(--dating-deep) 0%, #4b1235 52%, var(--dating-pink) 100%);
        color: #fff;
        border-radius: 30px;
        padding: 28px;
        box-shadow: var(--dating-shadow-strong);
    }

    .dating-total-card::before {
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        right: -55px;
        bottom: -60px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.10);
    }

    .dating-total-card h5 {
        color: #fff;
    }

    .dating-total-card .text-muted {
        color: rgba(255, 255, 255, 0.78) !important;
    }

    .dating-total-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        border-radius: 18px;
        background: rgba(255, 193, 7, 0.18);
        border: 1px solid rgba(255, 193, 7, 0.28);
        color: var(--dating-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.55rem;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
    }

    .dating-total-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 58px;
        height: 44px;
        padding: 0 18px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--dating-gold), #ffdf68);
        color: #3d2700;
        font-size: 1.1rem;
        font-weight: 900;
        box-shadow: 0 12px 24px rgba(255, 193, 7, 0.22);
    }

    /* Guest Interest Cards */
    .dating-interest-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(194, 24, 91, 0.10) !important;
        border-radius: 30px;
        background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
        box-shadow: var(--dating-shadow);
        transition: all 0.25s ease;
    }

    .dating-interest-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 5px;
        background: linear-gradient(90deg, var(--dating-gold), var(--dating-pink-mid), var(--dating-pink));
    }

    .dating-interest-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--dating-shadow-strong);
    }

    .dating-profile-image-wrap {
        width: 122px;
        height: 122px;
        border-radius: 50%;
        padding: 5px;
        background:
            linear-gradient(#fff, #fff) padding-box,
            linear-gradient(135deg, var(--dating-gold), var(--dating-pink-mid), var(--dating-pink)) border-box;
        border: 2px solid transparent;
        box-shadow: 0 16px 32px rgba(42, 13, 31, 0.18);
    }

    .dating-profile-image {
        width: 108px;
        height: 108px;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        border: 3px solid #fff;
    }

    .dating-interest-card h5 {
        color: var(--dating-deep);
        letter-spacing: -0.015em;
    }

    .dating-interest-card .bi-geo-alt-fill {
        color: var(--dating-pink);
    }

    .profile-info-list {
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid rgba(194, 24, 91, 0.10);
        background: #fff;
    }

    .profile-info-list .info-row {
        padding-left: 14px;
        padding-right: 14px;
        border-top: 1px solid rgba(194, 24, 91, 0.10);
    }

    .profile-info-list .info-row:first-child {
        border-top: 0;
    }

    .profile-info-list .fw-semibold {
        color: var(--dating-deep);
        text-align: right;
    }

    .dating-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.16);
        color: #8a5a00;
        font-size: 0.78rem;
        font-weight: 900;
        border: 1px solid rgba(255, 193, 7, 0.30);
        text-align: right;
    }

    .dating-message-box {
        border-radius: 20px;
        border: 1px solid rgba(194, 24, 91, 0.12);
        background:
            radial-gradient(circle at 90% 15%, rgba(255, 193, 7, 0.12), transparent 34%),
            linear-gradient(135deg, #fff9fc 0%, #fffdf5 100%);
        padding: 16px;
    }

    .dating-message-box h6 {
        color: var(--dating-deep);
    }

    .dating-message-box h6 i {
        color: var(--dating-pink);
    }

    /* Empty State */
    .dating-empty-card {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
        border: 1px solid rgba(194, 24, 91, 0.10);
        border-radius: 32px;
        box-shadow: var(--dating-shadow);
    }

    .dating-empty-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 6px;
        background: linear-gradient(90deg, var(--dating-gold), var(--dating-pink-mid), var(--dating-pink));
    }

    .dating-empty-icon {
        width: 82px;
        height: 82px;
        border-radius: 26px;
        margin: 0 auto;
        background: var(--dating-pink-soft);
        color: var(--dating-pink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.35rem;
        box-shadow: 0 16px 32px rgba(194, 24, 91, 0.10);
    }

    .dating-empty-card h4 {
        color: var(--dating-deep);
    }

    @media (max-width: 991.98px) {
        .dating-interest-header,
        .dating-total-card {
            border-radius: 26px;
            padding: 24px;
        }

        .dating-interest-card {
            border-radius: 26px;
        }
    }

    @media (max-width: 767.98px) {
        .dating-interest-page {
            padding-top: 3rem !important;
            padding-bottom: 3rem !important;
        }

        .dating-interest-header {
            padding: 22px;
        }

        .dating-interest-header h2 {
            font-size: 1.65rem;
        }

        .dating-total-card {
            padding: 22px;
        }

        .dating-total-icon {
            width: 52px;
            height: 52px;
            min-width: 52px;
            border-radius: 16px;
        }

        .profile-info-list .info-row {
            gap: 14px;
        }
    }

    @media (max-width: 420px) {
        .dating-interest-header,
        .dating-total-card,
        .dating-empty-card,
        .dating-interest-card {
            border-radius: 22px;
        }

        .dating-profile-image-wrap {
            width: 112px;
            height: 112px;
        }

        .dating-profile-image {
            width: 98px;
            height: 98px;
        }
    }
</style>

{% endblock %}