{% extends 'expat_life/base.html' %}
{% load static %}
{% block title %}{{ profile.lead.full_name|default:profile.user.get_full_name|default:profile.user.username }} | Guest Profile{% endblock %}

{% block content %}

<style>
    .foreigner-detail-page .foreigner-detail-hero,
    .foreigner-detail-page .foreigner-detail-lower-section {
        position: relative;
        z-index: 1;
    }

    .foreigner-detail-page .foreigner-detail-hero {
        overflow: hidden;
    }

    .foreigner-detail-page .detail-card,
    .foreigner-detail-page .contact-form-card,
    .foreigner-detail-page .foreigner-summary-box {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
    }

    .foreigner-detail-page .detail-card,
    .foreigner-detail-page .foreigner-summary-box {
        padding: 1.5rem;
    }

    .foreigner-detail-page .contact-form-card {
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .foreigner-detail-page .contact-form-header,
    .foreigner-detail-page .contact-form-body {
        padding: 1.5rem;
    }

    .foreigner-detail-page .contact-form-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        background: #fff;
    }

    .foreigner-detail-page .main-profile-image-wrapper {
        border-radius: 20px;
        overflow: hidden;
    }

    .foreigner-detail-page .profile-detail-image {
        display: block;
        width: 100%;
        height: auto;
    }

    .foreigner-detail-page .profile-detail-placeholder {
        min-height: 420px;
        border-radius: 20px;
        background: #f8f9fa;
    }

    .foreigner-detail-page .foreigner-detail-lower-section {
        clear: both;
    }

    @media (max-width: 991.98px) {
        .foreigner-detail-page .contact-form-card {
            margin-top: 0;
        }
    }
</style>

<div class="foreigner-detail-page">

    <section class="foreigner-detail-hero py-5">
        <div class="container">
            <div class="row g-5 align-items-start">
                <div class="col-lg-7">
                    <div class="detail-card mb-4">
                        {% if profile.profile_image %}
                            <div class="main-profile-image-wrapper">
                                <img src="{{ profile.profile_image.url }}"
                                     class="img-fluid profile-detail-image w-100"
                                     alt="{{ profile.lead.full_name|default:profile.user.username }}"
                                     style="max-height: 520px; object-fit: cover;">
                            </div>
                        {% else %}
                            <div class="profile-detail-placeholder d-flex align-items-center justify-content-center">
                                <i class="bi bi-person-badge fs-1"></i>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <div class="col-lg-5">
                    <span class="section-mini-title">Guest Profile</span>

                    <h1 class="fw-bold mb-3">
                        {{ profile.lead.full_name|default:profile.user.get_full_name|default:profile.user.username }}
                    </h1>

                    <div class="package-detail-price mb-3">
                        {% if profile.lead.nationality %}
                            {{ profile.lead.nationality }}
                        {% else %}
                            International Guest
                        {% endif %}
                    </div>

                    <p class="lead text-muted mb-4">
                        {% if profile.lead.message %}
                            {{ profile.lead.message|truncatechars:180 }}
                        {% else %}
                            Approved guest profile on the platform.
                        {% endif %}
                    </p>

                    <div class="foreigner-summary-box mb-4">
                        <h6 class="fw-bold mb-3">Profile Summary</h6>

                        <p class="mb-2"><strong>Nationality:</strong> {{ profile.lead.nationality|default:"Not specified" }}</p>
                        <p class="mb-2"><strong>Current Country:</strong> {{ profile.lead.country|default:"Not specified" }}</p>
                        <p class="mb-2"><strong>Gender:</strong> {% if profile.lead.gender %}{{ profile.lead.get_gender_display }}{% else %}Not specified{% endif %}</p>
                        <p class="mb-2"><strong>Monthly Budget:</strong> {% if profile.lead.monthly_budget %}{{ profile.lead.get_monthly_budget_display }}{% else %}Not specified{% endif %}</p>
                        <p class="mb-2"><strong>Expected Arrival:</strong> {{ profile.lead.expected_arrival_date|default:"Not specified" }}</p>
                        <p class="mb-2"><strong>Duration of Stay:</strong> {{ profile.lead.duration_of_stay|default:"Not specified" }}</p>
                        <p class="mb-2"><strong>Remote Worker:</strong> {% if profile.lead.remote_worker %}Yes{% else %}No{% endif %}</p>
                        <p class="mb-0"><strong>Interested Package:</strong> {% if profile.lead.interested_package %}{{ profile.lead.interested_package.name }}{% else %}Not specified{% endif %}</p>
                    </div>

                    {% if existing_interest %}
                        <div class="alert alert-success rounded-4">
                            <h6 class="fw-bold mb-2">Interest Already Submitted</h6>
                            <p class="mb-2">
                                You have already expressed interest in this guest profile. Our team can continue the review and coordination process.
                            </p>
                            <p class="mb-0">
                                <strong>Status:</strong> {{ existing_interest.get_status_display }}
                            </p>
                            {% if existing_interest.message %}
                                <p class="mb-0 mt-2">
                                    <strong>Your Message:</strong> {{ existing_interest.message }}
                                </p>
                            {% endif %}
                        </div>
                    {% else %}
                        {% if can_notify_interest %}
                            <form method="post" action="{% url 'expat_life:express_foreigner_interest' profile.pk %}">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <textarea name="message"
                                              rows="4"
                                              class="form-control"
                                              placeholder="Write a short message about your interest..."></textarea>
                                </div>
                                <button type="submit" class="btn btn-dark btn-lg w-100 mb-3">
                                    Express Interest
                                </button>
                            </form>

                            <div class="small text-muted">
                                By expressing interest, you notify our team that you want to move forward with this guest profile through the proper review and coordination process.
                            </div>
                        {% else %}
                            <button type="button" class="btn btn-secondary btn-lg w-100 mb-3" disabled>
                                Express Interest
                            </button>

                            <div class="alert alert-warning rounded-4 mb-0">
                                <strong>Permission required.</strong><br>
                                Your dating partner profile must have the required arrangement access before you can submit interest requests.
                            </div>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-white foreigner-detail-lower-section">
        <div class="container">
            <div class="row g-4 align-items-start">
                <div class="col-lg-8">
                    <div class="detail-card mb-4">
                        <h3 class="fw-bold mb-3">About / Notes</h3>
                        <div class="text-muted">
                            {% if profile.lead.message %}
                                {{ profile.lead.message|linebreaks }}
                            {% else %}
                                No additional notes provided.
                            {% endif %}
                        </div>
                    </div>

                    {% if profile.lead.whatsapp_number %}
                    <div class="detail-card mb-4">
                        <h5 class="fw-bold mb-3">Communication Note</h5>
                        <div class="text-muted mb-0">
                            WhatsApp contact and direct personal details are not publicly exposed through this page. Communication is handled through the platform workflow.
                        </div>
                    </div>
                    {% endif %}
                </div>

                <div class="col-lg-4">
                    <div class="contact-form-card shadow-sm">
                        <div class="contact-form-header">
                            <h4 class="fw-bold mb-2">Important Note</h4>
                            <p class="text-muted mb-0">
                                Direct guest contact details are not displayed here. All communication and next-step coordination are handled through the platform for privacy and safety.
                            </p>
                        </div>

                        <div class="contact-form-body">
                            <div class="mb-3">
                                <strong>Profile Status:</strong><br>
                                {% if profile.status == 'approved' %}
                                    <span class="text-success">Approved</span>
                                {% else %}
                                    <span class="text-warning">{{ profile.get_status_display }}</span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Profile Access:</strong><br>
                                {% if profile.is_public %}
                                    Public profile
                                {% else %}
                                    Private profile
                                {% endif %}
                            </div>

                           <div class="mb-3">
                                <strong>Contact Detail Access:</strong><br>
                                {% if can_view_contact_details %}
                                    <span class="text-success">Mutual interest confirmed — contact details available</span>
                                    <div class="small mt-2">
                                        <strong>Email:</strong> {{ profile.lead.email|default:"Not provided" }}<br>
                                        <strong>WhatsApp:</strong> {{ profile.lead.whatsapp_number|default:"Not provided" }}
                                    </div>
                                {% else %}
                                    <span class="text-warning">
                                        Additional contact details are locked until both sides show interest and your dating partner account is confirmed.
                                    </span>
                                {% endif %}
                            </div>

                            <div class="mb-0">
                                <strong>Process:</strong><br>
                                Review the guest profile, use the interest request flow if enabled, and continue through the platform’s coordinated next steps.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

{% endblock %}