{% extends 'rental_app/base_rental.html' %}
{% load static %}

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

{% block content %}
<section class="py-5 light-section">
    <div class="container">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <div>
                <span class="section-mini-title">Rental Owner Dashboard</span>
                <h2 class="fw-bold mb-2">Guests Interested in Your Properties</h2>
                <p class="text-muted mb-0">
                    Here you can view the guests who have expressed interest in your rental listings.
                </p>
            </div>
            <div class="mt-3 mt-md-0">
                <a href="{% url 'rental_app:rental_owner_dashboard' %}" class="btn btn-outline-dark">
                    <i class="bi bi-arrow-left me-1"></i> Back to Dashboard
                </a>
            </div>
        </div>

        <div class="mb-4">
            <div class="dashboard-link-card">
                <div class="d-flex flex-wrap justify-content-between align-items-center">
                    <div>
                        <h5 class="fw-bold mb-1">Total Interest Requests</h5>
                        <p class="text-muted mb-0">Total guests interested in your listings.</p>
                    </div>
                    <div class="text-md-end mt-3 mt-md-0">
                        <span class="badge bg-dark fs-6 px-3 py-2">{{ 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 shadow-sm border-0 h-100 foreigner-interest-card">
                            <div class="card-body p-4">

                                <div class="text-center mb-3">
                                    {% if item.profile_image %}
                                        <img
                                            src="{{ item.profile_image }}"
                                            alt="{{ item.name }}"
                                            class="rounded-circle border shadow-sm"
                                            style="width: 110px; height: 110px; object-fit: cover;"
                                        >
                                    {% else %}
                                        <img
                                            src="{% static 'images/default-profile.png' %}"
                                            alt="Default Profile"
                                            class="rounded-circle border shadow-sm"
                                            style="width: 110px; height: 110px; object-fit: cover;"
                                        >
                                    {% endif %}
                                </div>

                                <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>

                                <div class="profile-info-list">
                                    {% if item.nationality %}
                                        <div class="info-row d-flex justify-content-between py-2 border-top">
                                            <span class="text-muted">Nationality</span>
                                            <span class="fw-semibold">{{ item.nationality }}</span>
                                        </div>
                                    {% endif %}

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

                                    <div class="info-row d-flex justify-content-between py-2 border-top">
                                        <span class="text-muted">Interest Status</span>
                                        <span class="fw-semibold">{{ item.interest.get_status_display }}</span>
                                    </div>

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

                                <div class="mt-3 pt-3 border-top">
                                    <h6 class="fw-bold mb-2">Interested Property</h6>

                                    {% if item.listing_image %}
                                        <img
                                            src="{{ item.listing_image }}"
                                            alt="{{ item.listing.title }}"
                                            class="img-fluid rounded mb-2"
                                            style="width: 100%; height: 180px; object-fit: cover;"
                                        >
                                    {% endif %}

                                    <p class="fw-semibold mb-1">{{ item.listing.title }}</p>
                                    <p class="text-muted small mb-1">
                                        {{ item.listing.get_property_type_display }}
                                        {% if item.listing.city %} • {{ item.listing.city }}{% endif %}
                                    </p>
                                    <p class="text-muted small mb-0">
                                        ${{ item.listing.monthly_rent_usd }} / month
                                    </p>
                                </div>

                                {% if item.interest.notes %}
                                    <div class="mt-3 pt-3 border-top">
                                        <h6 class="fw-bold mb-2">Notes</h6>
                                        <p class="text-muted small mb-0">{{ item.interest.notes|linebreaksbr }}</p>
                                    </div>
                                {% endif %}

                                <div class="mt-4 d-grid gap-2">
                                    <a href="{% url 'expat_life:public_foreigner_detail' item.foreigner.pk %}"
                                       class="btn btn-dark">
                                        View Guest
                                    </a>
                                    <a href="{% url 'rental_app:rental_owner_listing_detail' item.listing.slug %}"
                                       class="btn btn-outline-dark">
                                        View Property
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="card shadow-sm border-0">
                <div class="card-body text-center py-5">
                    <div class="mb-3">
                        <i class="bi bi-house fs-1 text-muted"></i>
                    </div>
                    <h4 class="fw-bold">No Interest Requests Yet</h4>
                    <p class="text-muted mb-4">
                        When guests express interest in your rental listings, they will appear here.
                    </p>
                    <a href="{% url 'rental_app:rental_owner_dashboard' %}" class="btn btn-outline-dark">
                        Back to Dashboard
                    </a>
                </div>
            </div>
        {% endif %}
    </div>
</section>

<style>
    .foreigner-interest-card {
        border-radius: 1rem;
    }

    .profile-info-list .info-row:first-child {
        border-top: 1px solid #e9ecef;
    }
</style>
{% endblock %}