{% extends 'dating_app/base_dating.html' %}
{% load static %}
{% block title %}Dating Partner Dashboard{% endblock %}

{% block content %}

<style>
    .dating-dashboard-hero {
        background:
            radial-gradient(circle at top left, rgba(194, 24, 91, 0.10), transparent 34%),
            radial-gradient(circle at bottom right, rgba(42, 13, 31, 0.08), transparent 34%),
            #f8fafc;
        padding: 60px 0 52px;
    }

    .dashboard-signup-alert {
        background: #ffffff;
        border-left: 6px solid #198754 !important;
        border-radius: 26px !important;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    }

    .dashboard-signup-alert .signup-alert-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        border-radius: 20px;
        background: #ecfdf5;
        color: #198754;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
    }

    .dashboard-account-details {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 22px;
        padding: 20px;
    }

    .dashboard-welcome-card-dating {
        background: linear-gradient(135deg, #2a0d1f 0%, #9b1b60 58%, #c2185b 100%);
        color: #fff;
        border-radius: 32px;
        padding: 42px 40px;
        min-height: 100%;
        box-shadow: 0 28px 60px rgba(42, 13, 31, 0.22);
        position: relative;
        overflow: hidden;
    }

    .dashboard-welcome-card-dating::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.14);
        top: -120px;
        right: -90px;
    }

    .dashboard-welcome-card-dating::after {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        bottom: -105px;
        left: -70px;
    }

    .dashboard-welcome-content {
        position: relative;
        z-index: 1;
    }

    .dashboard-mini-badge {
        display: inline-block;
        background: rgba(255, 193, 7, 0.18);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.38);
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 0.84rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .dashboard-welcome-card-dating p {
        color: rgba(255, 255, 255, 0.88);
        max-width: 700px;
    }

    .dashboard-status-card-dating {
        background: #ffffff;
        border-radius: 32px;
        padding: 32px 28px;
        height: 100%;
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
        border: 1px solid #f1dbe5;
    }

    .dashboard-status-heading {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
    }

    .dashboard-status-icon {
        width: 52px;
        height: 52px;
        border-radius: 18px;
        background: #fff1f6;
        color: #c2185b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .dashboard-status-heading h5 {
        color: #2a0d1f;
        font-weight: 800;
        margin-bottom: 0;
    }

    .dashboard-status-row {
        border-radius: 18px;
        background: #f8fafc;
        border: 1px solid #edf2f7;
        padding: 15px 16px;
        margin-bottom: 14px;
    }

    .dashboard-status-row:last-child {
        margin-bottom: 0;
    }

    .dashboard-status-label {
        display: block;
        color: #64748b;
        font-size: 0.84rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
    }

    .dashboard-status-value {
        color: #2a0d1f;
        font-weight: 700;
        font-size: 1rem;
    }

    .dashboard-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 0.88rem;
        font-weight: 800;
    }

    .dashboard-pill-approved {
        background: #dcfce7;
        color: #166534;
    }

    .dashboard-pill-pending {
        background: #fef3c7;
        color: #92400e;
    }

    .dashboard-pill-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    .dashboard-pill-neutral {
        background: #e2e8f0;
        color: #334155;
    }

    .dashboard-actions-section {
        background: #ffffff;
        padding: 58px 0 70px;
    }

    .dashboard-section-heading {
        text-align: center;
        margin-bottom: 40px;
    }

    .dashboard-section-heading .section-mini-title {
        color: #c2185b;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 0.82rem;
        display: inline-block;
        margin-bottom: 10px;
    }

    .dashboard-section-heading h2 {
        color: #2a0d1f;
        font-weight: 800;
        margin-bottom: 12px;
    }

    .dashboard-section-heading p {
        max-width: 760px;
        margin: 0 auto;
        color: #64748b;
    }

    .dating-dashboard-link-card {
        background: #ffffff;
        border-radius: 28px;
        padding: 32px 28px;
        height: 100%;
        border: 1px solid #f2dce6;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
        transition: all 0.28s ease;
        display: flex;
        flex-direction: column;
    }

    .dating-dashboard-link-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 55px rgba(42, 13, 31, 0.14);
        border-color: rgba(194, 24, 91, 0.22);
    }

    .dating-dashboard-link-card h5 {
        color: #2a0d1f;
        font-weight: 800;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    .dating-dashboard-link-card p {
        color: #64748b;
        line-height: 1.7;
        margin-bottom: 22px;
        flex-grow: 1;
    }

    .dating-dashboard-icon {
        width: 72px;
        height: 72px;
        border-radius: 24px;
        background: #fff1f6;
        color: #c2185b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
    }

    .dashboard-profile-icon-dating {
        width: 82px;
        height: 82px;
        object-fit: cover;
        border-radius: 26px;
        border: 4px solid #fff1f6;
        box-shadow: 0 14px 30px rgba(194, 24, 91, 0.16);
    }

    .btn-dating-outline {
        border: 2px solid #2a0d1f;
        color: #2a0d1f;
        background: transparent;
        border-radius: 999px;
        font-weight: 700;
        padding: 0.62rem 1.45rem;
        transition: all 0.24s ease;
        align-self: flex-start;
    }

    .btn-dating-outline:hover {
        background: #2a0d1f;
        color: #fff;
        border-color: #2a0d1f;
    }

    .dashboard-support-note {
        background: #fff7e6;
        border-left: 5px solid #ffc107;
        border-radius: 22px;
        padding: 22px 24px;
        margin-top: 38px;
        color: #5c3b00;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
    }

    .dashboard-support-note strong {
        color: #2a0d1f;
    }

    @media (max-width: 991.98px) {
        .dashboard-welcome-card-dating {
            padding: 34px 26px;
        }

        .dashboard-status-card-dating {
            padding: 26px 22px;
        }
    }

    @media (max-width: 575.98px) {
        .dating-dashboard-hero {
            padding: 42px 0;
        }

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

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

        .dating-dashboard-link-card {
            padding: 26px 22px;
        }
    }


</style>


<!-- DASHBOARD HERO -->
<section class="dating-dashboard-hero">
    <div class="container">

        {% if just_signed_up %}
        <div class="row justify-content-center mb-4">
            <div class="col-12 col-lg-10">
                <div class="dashboard-signup-alert p-3 p-md-4">
                    <div class="d-flex flex-column flex-md-row align-items-start gap-3">
                        <div class="signup-alert-icon">
                            <i class="bi bi-check-circle-fill"></i>
                        </div>

                        <div class="w-100">
                            <h4 class="fw-bold mb-2 text-dark">
                                Welcome! Your dating partner account has been created successfully.
                            </h4>

                            <p class="mb-3 text-muted">
                                You are now signed in to your Dating Partner Dashboard.
                                Your profile has been submitted and is pending review.
                            </p>

                            {% if account_role or new_account_email or username or password %}
                            <div class="dashboard-account-details">
                                <div class="row g-2">

                                    {% if account_role %}
                                    <div class="col-12">
                                        <div class="d-flex flex-column flex-sm-row">
                                            <strong class="me-sm-2 text-dark" style="min-width: 150px;">
                                                Account Type:
                                            </strong>
                                            <span class="text-break">{{ account_role }}</span>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if new_account_email %}
                                    <div class="col-12">
                                        <div class="d-flex flex-column flex-sm-row">
                                            <strong class="me-sm-2 text-dark" style="min-width: 150px;">
                                                Email:
                                            </strong>
                                            <span class="text-break">{{ new_account_email }}</span>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if username %}
                                    <div class="col-12">
                                        <div class="d-flex flex-column flex-sm-row">
                                            <strong class="me-sm-2 text-dark" style="min-width: 150px;">
                                                Username:
                                            </strong>
                                            <span class="text-break">{{ username }}</span>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if password %}
                                    <div class="col-12">
                                        <div class="d-flex flex-column flex-sm-row">
                                            <strong class="me-sm-2 text-dark" style="min-width: 150px;">
                                                Temporary Password:
                                            </strong>
                                            <span class="text-break">{{ password }}</span>
                                        </div>
                                    </div>
                                    {% endif %}

                                </div>

                                <hr class="my-3">

                                <p class="mb-0 small text-muted">
                                    Your initial username and password have been sent to your email address.
                                    For better security, please change your password after your first login.
                                </p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}


        <div class="row g-4 align-items-stretch">

            <!-- WELCOME CARD -->
            <div class="col-lg-8">
                <div class="dashboard-welcome-card-dating">
                    <div class="dashboard-welcome-content">
                        <span class="dashboard-mini-badge">
                            Dating Partner Dashboard
                        </span>

                        <h1 class="fw-bold mb-3">
                            Welcome, {{ partner.display_name|default:partner.full_name }}
                        </h1>

                        <p class="lead mb-0">
                            Manage your dating partner profile, check your visibility status,
                            review Guest interest, and move forward through the Ensolanka Dating process with confidence.
                        </p>
                    </div>
                </div>
            </div>


            <!-- STATUS CARD -->
            <div class="col-lg-4">
                <div class="dashboard-status-card-dating">

                    <div class="dashboard-status-heading">
                        <div class="dashboard-status-icon">
                            <i class="bi bi-person-check-fill"></i>
                        </div>
                        <h5>Profile Status</h5>
                    </div>

                    <div class="dashboard-status-row">
                        <span class="dashboard-status-label">Review Status</span>

                        <div class="dashboard-status-value">
                            {% if partner.status == 'approved' %}
                                <span class="dashboard-pill dashboard-pill-approved">
                                    <i class="bi bi-check-circle-fill"></i>
                                    Approved
                                </span>
                            {% elif partner.status == 'pending' %}
                                <span class="dashboard-pill dashboard-pill-pending">
                                    <i class="bi bi-hourglass-split"></i>
                                    Pending Review
                                </span>
                            {% elif partner.status == 'rejected' %}
                                <span class="dashboard-pill dashboard-pill-rejected">
                                    <i class="bi bi-x-circle-fill"></i>
                                    Rejected
                                </span>
                            {% else %}
                                <span class="dashboard-pill dashboard-pill-neutral">
                                    {{ partner.get_status_display }}
                                </span>
                            {% endif %}
                        </div>
                    </div>

                    <div class="dashboard-status-row">
                        <span class="dashboard-status-label">Public Visibility</span>

                        <div class="dashboard-status-value">
                            {% if partner.is_public %}
                                <span class="dashboard-pill dashboard-pill-approved">
                                    <i class="bi bi-eye-fill"></i>
                                    Visible
                                </span>
                            {% else %}
                                <span class="dashboard-pill dashboard-pill-neutral">
                                    <i class="bi bi-eye-slash-fill"></i>
                                    Not Public Yet
                                </span>
                            {% endif %}
                        </div>
                    </div>

                    <div class="dashboard-status-row">
                        <span class="dashboard-status-label">Profile Code</span>
                        <div class="dashboard-status-value">
                            {{ partner.profile_code }}
                        </div>
                    </div>

                </div>
            </div>

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


<!-- DASHBOARD ACTIONS -->
<section class="dashboard-actions-section">
    <div class="container">

        <div class="dashboard-section-heading">
            <span class="section-mini-title">Manage Your Journey</span>

            <h2>Your Dating Partner Control Center</h2>

            <p>
                Use these areas to maintain your profile, review payment status,
                browse available Guest profiles, and see who has expressed interest in connecting with you.
            </p>
        </div>

        <div class="row g-4">

            <!-- MY PROFILE -->
            <div class="col-md-6 col-xl-3">
                <div class="dating-dashboard-link-card text-center align-items-center">
                    <img
                        src="{% if partner.profile_photo %}{{ partner.profile_photo.url }}{% else %}{% static default_profile_image %}{% endif %}"
                        alt="Profile Image"
                        class="dashboard-profile-icon-dating"
                    >

                    <h5>My Profile</h5>

                    <p>
                        View your dating profile details, personal information,
                        photos, preferences, and visibility settings.
                    </p>

                    <a href="{% url 'dating_app:dating_partner_profile_page' %}"
                       class="btn btn-dating-outline">
                        Open
                    </a>
                </div>
            </div>


            <!-- PAYMENT CENTER -->
            <div class="col-md-6 col-xl-3">
                <div class="dating-dashboard-link-card">
                    <div class="dating-dashboard-icon">
                        <i class="bi bi-credit-card-2-front-fill"></i>
                    </div>

                    <h5>Payment Center</h5>

                    <p>
                        Manage your Featured Profile payment, Confirmation Fee,
                        payment history, and current payment status.
                    </p>

                    <a href="{% url 'dating_app:dating_partner_payment_center' %}"
                       class="btn btn-dating-outline">
                        Open
                    </a>
                </div>
            </div>


            <!-- VIEW GUEST PROFILES -->
            <div class="col-md-6 col-xl-3">
                <div class="dating-dashboard-link-card">
                    <div class="dating-dashboard-icon">
                        <i class="bi bi-people-fill"></i>
                    </div>

                    <h5>View Guest Profiles</h5>

                    <p>
                        Browse approved international Guest profiles and explore
                        available public or permitted private profile access.
                    </p>

                    <a href="{% url 'dating_app:foreigners_home' %}"
                       class="btn btn-dating-outline">
                        Open
                    </a>
                </div>
            </div>


            <!-- INTEREST REQUESTS -->
            <div class="col-md-6 col-xl-3">
                <div class="dating-dashboard-link-card">
                    <div class="dating-dashboard-icon">
                        <i class="bi bi-heart-fill"></i>
                    </div>

                    <h5>Interest Requests</h5>

                    <p>
                        View international Guests who have expressed interest
                        in your dating profile and review the next steps.
                    </p>

                    <a href="{% url 'dating_app:interested_foreigners_list' %}"
                       class="btn btn-dating-outline">
                        Open
                    </a>
                </div>
            </div>

        </div>


        <div class="dashboard-support-note">
            <strong>Helpful reminder:</strong>
            Your dating journey follows a guided process. Guest interest, Mutual Interest,
            profile confirmation, and contact-detail access may each depend on your profile status,
            payment status, and platform eligibility.
        </div>

    </div>
</section>

{% endblock %}