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

{% block title %}My Dating Profile{% endblock %}

{% block content %}

<style>
    .dating-profile-page {
        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: 58px 0 72px;
    }

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

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

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

    .dating-profile-hero-content {
        position: relative;
        z-index: 1;
    }

    .dating-profile-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;
    }

    .dating-profile-hero-card p {
        color: rgba(255, 255, 255, 0.88);
        max-width: 820px;
    }

    .dating-profile-main-card {
        background: #fff;
        border-radius: 34px;
        border: 1px solid #f2dce6;
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
        overflow: hidden;
    }

    .dating-profile-main-body {
        padding: 38px;
    }

    .profile-overview-panel {
        background: #fff7fb;
        border: 1px solid #f2dce6;
        border-radius: 30px;
        padding: 30px;
        margin-bottom: 34px;
    }

    .profile-image-wrap {
        position: relative;
        display: inline-block;
    }

    .dating-profile-image {
        width: 176px;
        height: 176px;
        object-fit: cover;
        border-radius: 50%;
        cursor: pointer;
        border: 6px solid #fff;
        box-shadow: 0 20px 42px rgba(194, 24, 91, 0.20);
        transition: all 0.25s ease;
    }

    .dating-profile-image:hover {
        transform: scale(1.03);
    }

    .profile-image-edit-badge {
        position: absolute;
        right: 8px;
        bottom: 12px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #c2185b;
        color: #fff;
        border: 3px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        pointer-events: none;
        box-shadow: 0 12px 24px rgba(42, 13, 31, 0.22);
    }

    .profile-upload-hint {
        color: #64748b;
        font-size: 0.92rem;
    }

    .profile-summary-name {
        color: #2a0d1f;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .profile-summary-subtitle {
        color: #64748b;
        line-height: 1.7;
    }

    .profile-pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
    }

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

    .profile-pill-primary {
        background: #fff1f6;
        color: #9b1b60;
    }

    .profile-pill-success {
        background: #dcfce7;
        color: #166534;
    }

    .profile-pill-warning {
        background: #fef3c7;
        color: #92400e;
    }

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

    .profile-actions-wrap {
        margin-top: 26px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .btn-dating-primary {
        background: linear-gradient(135deg, #2a0d1f 0%, #c2185b 100%);
        color: #fff;
        border: none;
        border-radius: 999px;
        padding: 0.72rem 1.55rem;
        font-weight: 800;
        transition: all 0.24s ease;
    }

    .btn-dating-primary:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(42, 13, 31, 0.22);
    }

    .btn-dating-outline {
        border: 2px solid #2a0d1f;
        color: #2a0d1f;
        background: transparent;
        border-radius: 999px;
        padding: 0.66rem 1.45rem;
        font-weight: 800;
        transition: all 0.24s ease;
    }

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

    .btn-dating-soft {
        background: #fff1f6;
        color: #9b1b60;
        border: 1px solid #f2dce6;
        border-radius: 999px;
        padding: 0.68rem 1.45rem;
        font-weight: 800;
        transition: all 0.24s ease;
    }

    .btn-dating-soft:hover {
        background: #fce3ed;
        color: #7a123f;
    }

    .profile-section {
        margin-top: 38px;
    }

    .profile-section:first-of-type {
        margin-top: 0;
    }

    .profile-section-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 24px;
    }

    .profile-section-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
        border-radius: 18px;
        background: #fff1f6;
        color: #c2185b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
    }

    .profile-section-header h4,
    .profile-section-header h5 {
        color: #2a0d1f;
        font-weight: 800;
        margin-bottom: 2px;
    }

    .profile-section-header p {
        color: #64748b;
        margin-bottom: 0;
    }

    .additional-photo-panel {
        background: #f8fafc;
        border: 1px solid #edf2f7;
        border-radius: 28px;
        padding: 26px;
        height: 100%;
    }

    .additional-photo-panel h6 {
        color: #2a0d1f;
        font-weight: 800;
        margin-bottom: 18px;
    }

    .additional-photo-panel .form-label {
        font-weight: 700;
        color: #2a0d1f;
    }

    .additional-photo-panel input,
    .additional-photo-panel textarea,
    .additional-photo-panel select {
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        padding: 0.75rem 0.95rem;
    }

    .additional-photo-panel input:focus,
    .additional-photo-panel textarea:focus,
    .additional-photo-panel select:focus {
        border-color: #c2185b;
        box-shadow: 0 0 0 0.25rem rgba(194, 24, 91, 0.12);
    }

    .additional-photo-card {
        border: 1px solid #f2dce6;
        border-radius: 24px;
        overflow: hidden;
        height: 100%;
        background: #fff;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
    }

    .additional-photo-card img {
        height: 205px;
        width: 100%;
        object-fit: cover;
    }

    .additional-photo-card-body {
        padding: 14px 12px 16px;
        text-align: center;
    }

    .photo-status-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 11px;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 800;
    }

    .photo-status-approved {
        background: #dcfce7;
        color: #166534;
    }

    .photo-status-pending {
        background: #fef3c7;
        color: #92400e;
    }

    .photo-status-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    .empty-photo-alert {
        background: #fff7fb;
        border: 1px solid #f2dce6;
        color: #7a123f;
        border-radius: 22px;
        padding: 22px;
    }

    .profile-details-grid {
        margin-top: 4px;
    }

    .profile-detail-item {
        background: #f8fafc;
        border: 1px solid #edf2f7;
        border-radius: 22px;
        padding: 18px 18px;
        height: 100%;
    }

    .profile-detail-label {
        display: block;
        color: #9b1b60;
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 7px;
    }

    .profile-detail-value {
        color: #2a0d1f;
        font-weight: 600;
        line-height: 1.7;
        word-break: break-word;
    }

    .profile-detail-item.profile-detail-wide {
        min-height: 100%;
    }

    .status-preference-card {
        background: #fff7fb;
        border: 1px solid #f2dce6;
        border-radius: 24px;
        padding: 20px;
        height: 100%;
    }

    .status-preference-card .profile-detail-label {
        margin-bottom: 10px;
    }

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

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

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

    .profile-system-card {
        background: linear-gradient(135deg, rgba(42, 13, 31, 0.96), rgba(155, 27, 96, 0.94));
        color: #fff;
        border-radius: 28px;
        padding: 28px;
    }

    .profile-system-card .profile-detail-label {
        color: #ffc107;
    }

    .profile-system-card .profile-detail-value {
        color: #fff;
    }

    .profile-divider {
        border-color: #f2dce6;
        opacity: 1;
        margin: 38px 0;
    }

    .upload-status-wrap .alert {
        border-radius: 18px;
        margin-bottom: 0;
    }

    /* Crop modal matching */
    .dating-crop-modal .modal-content {
        border-radius: 28px;
        border: none;
        overflow: hidden;
        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
    }

    .dating-crop-modal .modal-header {
        background: linear-gradient(135deg, #2a0d1f 0%, #c2185b 100%);
        color: #fff;
        border-bottom: none;
        padding: 20px 24px;
    }

    .dating-crop-modal .modal-title {
        font-weight: 800;
    }

    .dating-crop-modal .btn-close {
        filter: invert(1);
    }

    .dating-crop-modal .modal-body {
        padding: 24px;
    }

    .dating-crop-modal .modal-footer {
        border-top: 1px solid #edf2f7;
        padding: 18px 24px;
    }

    @media (max-width: 991.98px) {
        .dating-profile-hero-card,
        .dating-profile-main-body {
            padding: 28px;
        }

        .profile-overview-panel {
            padding: 24px;
        }
    }

    @media (max-width: 575.98px) {
        .dating-profile-page {
            padding: 42px 0 58px;
        }

        .dating-profile-hero-card,
        .dating-profile-main-card {
            border-radius: 28px;
        }

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

        .profile-actions-wrap {
            flex-direction: column;
        }

        .profile-actions-wrap .btn {
            width: 100%;
        }

        .dating-profile-main-body {
            padding: 22px;
        }

        .additional-photo-panel {
            padding: 20px;
        }
    }
</style>


<section class="dating-profile-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-11">

                <!-- HERO CARD -->
                <div class="dating-profile-hero-card">
                    <div class="dating-profile-hero-content">
                        <span class="dating-profile-mini-badge">
                            My Dating Profile
                        </span>

                        <h1 class="fw-bold mb-3">
                            Manage Your Local Dating Partner Profile
                        </h1>

                        <p class="lead mb-0">
                            Keep your profile attractive, accurate, and ready for Guest visibility.
                            Update your photos, review your details, and manage the information that supports
                            your dating partner journey.
                        </p>
                    </div>
                </div>


                <!-- MAIN CARD -->
                <div class="dating-profile-main-card">
                    <div class="dating-profile-main-body">

                        <!-- PROFILE OVERVIEW -->
                        <div class="profile-overview-panel">
                            <div class="row align-items-center g-4">

                                <div class="col-lg-4 text-center">
                                    <div class="profile-image-wrap">
                                        <img
                                            id="profilePreview"
                                            src="{% if partner.profile_photo %}{{ partner.profile_photo.url }}{% else %}{% static default_profile_image %}{% endif %}"
                                            alt="Profile Image"
                                            class="dating-profile-image"
                                            title="Click to change profile image"
                                        >
                                        <div class="profile-image-edit-badge">
                                            <i class="bi bi-camera-fill"></i>
                                        </div>
                                        <input type="file" id="profileImageInput" accept=".jpg,.jpeg,.png,.webp" hidden>
                                    </div>

                                    <p class="profile-upload-hint mt-3 mb-0">
                                        Click the image to upload a new profile photo
                                    </p>

                                    <div id="uploadStatus" class="upload-status-wrap mt-3"></div>
                                </div>


                                <div class="col-lg-8">
                                    <h2 class="profile-summary-name">
                                        {{ partner.display_name|default:partner.full_name }}
                                    </h2>

                                    <p class="profile-summary-subtitle mb-0">
                                        {{ partner.short_intro|default:"Your profile introduction helps international Guests understand who you are and what kind of relationship you hope to build." }}
                                    </p>

                                    <div class="profile-pill-row">
                                        <span class="profile-pill profile-pill-primary">
                                            <i class="bi bi-person-heart"></i>
                                            Local Dating Partner
                                        </span>

                                        {% if partner.status == 'approved' %}
                                            <span class="profile-pill profile-pill-success">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Approved
                                            </span>
                                        {% elif partner.status == 'pending' %}
                                            <span class="profile-pill profile-pill-warning">
                                                <i class="bi bi-hourglass-split"></i>
                                                Pending Review
                                            </span>
                                        {% else %}
                                            <span class="profile-pill profile-pill-neutral">
                                                {{ partner.get_status_display }}
                                            </span>
                                        {% endif %}

                                        {% if partner.is_public %}
                                            <span class="profile-pill profile-pill-success">
                                                <i class="bi bi-eye-fill"></i>
                                                Public Profile
                                            </span>
                                        {% else %}
                                            <span class="profile-pill profile-pill-neutral">
                                                <i class="bi bi-eye-slash-fill"></i>
                                                Not Public Yet
                                            </span>
                                        {% endif %}

                                        {% if partner.is_featured %}
                                            <span class="profile-pill profile-pill-warning">
                                                <i class="bi bi-stars"></i>
                                                Featured
                                            </span>
                                        {% endif %}
                                    </div>

                                    <div class="profile-actions-wrap">
                                        <a href="{% url 'dating_app:edit_dating_partner_profile' %}"
                                           class="btn btn-dating-primary">
                                            <i class="bi bi-pencil-square me-2"></i>
                                            Edit Profile
                                        </a>

                                        <a href="{% url 'dating_app:change_dating_partner_username' %}"
                                           class="btn btn-dating-soft">
                                            <i class="bi bi-person-gear me-2"></i>
                                            Change Username
                                        </a>

                                        <a href="{% url 'dating_app:change_dating_partner_password' %}"
                                           class="btn btn-dating-outline">
                                            <i class="bi bi-shield-lock me-2"></i>
                                            Change Password
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>


                        <!-- ADDITIONAL PHOTOS -->
                        <section class="profile-section">
                            <div class="profile-section-header">
                                <div class="profile-section-icon">
                                    <i class="bi bi-images"></i>
                                </div>
                                <div>
                                    <h4>Manage Additional Photos</h4>
                                    <p>
                                        Upload up to 5 extra photos. Newly uploaded photos will be reviewed before approval.
                                    </p>
                                </div>
                            </div>

                            <div class="row g-4">

                                <!-- Upload New Photo -->
                                <div class="col-lg-5">
                                    <div class="additional-photo-panel">
                                        <h6>Upload New Photo</h6>

                                        <form method="post"
                                              action="{% url 'dating_app:upload_dating_partner_additional_photo' %}"
                                              enctype="multipart/form-data">
                                            {% csrf_token %}

                                            <div class="mb-3">
                                                <label class="form-label" for="{{ photo_form.image.id_for_label }}">
                                                    Select Image
                                                </label>
                                                {{ photo_form.image }}
                                                {% for error in photo_form.image.errors %}
                                                    <div class="text-danger small mt-1">{{ error }}</div>
                                                {% endfor %}
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="{{ photo_form.caption.id_for_label }}">
                                                    Caption
                                                </label>
                                                {{ photo_form.caption }}
                                                {% for error in photo_form.caption.errors %}
                                                    <div class="text-danger small mt-1">{{ error }}</div>
                                                {% endfor %}
                                            </div>

                                            <div class="form-check mb-3">
                                                {{ photo_form.is_public }}
                                                <label class="form-check-label" for="{{ photo_form.is_public.id_for_label }}">
                                                    Show this photo publicly after approval
                                                </label>
                                            </div>

                                            <button type="submit" class="btn btn-dating-primary w-100">
                                                <i class="bi bi-cloud-arrow-up-fill me-2"></i>
                                                Upload Additional Photo
                                            </button>

                                            <small class="text-muted d-block mt-3">
                                                Maximum 5 additional photos allowed. Photos remain subject to review and approval.
                                            </small>
                                        </form>
                                    </div>
                                </div>


                                <!-- Existing Additional Photos -->
                                <div class="col-lg-7">
                                    <div class="row g-3">
                                        {% for photo in additional_photos %}
                                            <div class="col-6 col-md-4">
                                                <div class="additional-photo-card">
                                                    <img
                                                        src="{{ photo.image.url }}"
                                                        alt="{{ photo.caption|default:'Additional Photo' }}"
                                                    >

                                                    <div class="additional-photo-card-body">
                                                        {% if photo.caption %}
                                                            <small class="text-muted d-block mb-2">
                                                                {{ photo.caption }}
                                                            </small>
                                                        {% endif %}

                                                        {% if photo.status == 'approved' %}
                                                            <span class="photo-status-badge photo-status-approved">
                                                                {{ photo.get_status_display }}
                                                            </span>
                                                        {% elif photo.status == 'pending' %}
                                                            <span class="photo-status-badge photo-status-pending">
                                                                {{ photo.get_status_display }}
                                                            </span>
                                                        {% else %}
                                                            <span class="photo-status-badge photo-status-rejected">
                                                                {{ photo.get_status_display }}
                                                            </span>
                                                        {% endif %}

                                                        <small class="text-muted d-block mt-2">
                                                            {% if photo.is_public %}Public{% else %}Private{% endif %}
                                                        </small>

                                                        <form method="post"
                                                              action="{% url 'dating_app:delete_dating_partner_additional_photo' photo.id %}"
                                                              class="mt-3">
                                                            {% csrf_token %}
                                                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-3">
                                                                <i class="bi bi-trash3 me-1"></i>
                                                                Delete
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        {% empty %}
                                            <div class="col-12">
                                                <div class="empty-photo-alert">
                                                    <i class="bi bi-image me-2"></i>
                                                    No additional photos uploaded yet.
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>

                            </div>
                        </section>


                        <hr class="profile-divider">


                        <!-- PROFILE DETAILS -->
                        <section class="profile-section">
                            <div class="profile-section-header">
                                <div class="profile-section-icon">
                                    <i class="bi bi-person-lines-fill"></i>
                                </div>
                                <div>
                                    <h4>Profile Details</h4>
                                    <p>
                                        Review the information currently attached to your dating partner profile.
                                    </p>
                                </div>
                            </div>

                            <div class="row g-3 profile-details-grid">

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Username</span>
                                        <div class="profile-detail-value">{{ request.user.username }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Email</span>
                                        <div class="profile-detail-value">{{ partner.email }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Full Name</span>
                                        <div class="profile-detail-value">{{ partner.full_name }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Display Name</span>
                                        <div class="profile-detail-value">{{ partner.display_name|default:"-" }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Gender</span>
                                        <div class="profile-detail-value">{{ partner.get_gender_display }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Age</span>
                                        <div class="profile-detail-value">{{ partner.age }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">City</span>
                                        <div class="profile-detail-value">{{ partner.city }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">District</span>
                                        <div class="profile-detail-value">{{ partner.district|default:"-" }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Country</span>
                                        <div class="profile-detail-value">{{ partner.country }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Profession</span>
                                        <div class="profile-detail-value">{{ partner.profession|default:"-" }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Relationship Goal</span>
                                        <div class="profile-detail-value">{{ partner.get_relationship_goal_display }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Marital Status</span>
                                        <div class="profile-detail-value">{{ partner.marital_status|default:"-" }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Religion</span>
                                        <div class="profile-detail-value">{{ partner.religion|default:"-" }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Languages</span>
                                        <div class="profile-detail-value">{{ partner.languages_spoken }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Education</span>
                                        <div class="profile-detail-value">{{ partner.education|default:"-" }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="profile-detail-item">
                                        <span class="profile-detail-label">Height</span>
                                        <div class="profile-detail-value">{{ partner.height|default:"-" }}</div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="profile-detail-item profile-detail-wide">
                                        <span class="profile-detail-label">Short Intro</span>
                                        <div class="profile-detail-value">{{ partner.short_intro }}</div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="profile-detail-item profile-detail-wide">
                                        <span class="profile-detail-label">About Me</span>
                                        <div class="profile-detail-value">{{ partner.about_me }}</div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="profile-detail-item profile-detail-wide">
                                        <span class="profile-detail-label">Expectations</span>
                                        <div class="profile-detail-value">{{ partner.expectations|default:"-" }}</div>
                                    </div>
                                </div>

                            </div>
                        </section>


                        <hr class="profile-divider">


                        <!-- STATUS & PREFERENCES -->
                        <section class="profile-section">
                            <div class="profile-section-header">
                                <div class="profile-section-icon">
                                    <i class="bi bi-sliders"></i>
                                </div>
                                <div>
                                    <h5>Status & Preferences</h5>
                                    <p>
                                        Your current visibility, profile status, and relationship-related preferences.
                                    </p>
                                </div>
                            </div>

                            <div class="row g-3">

                                <div class="col-md-4">
                                    <div class="status-preference-card">
                                        <span class="profile-detail-label">Status</span>
                                        <div class="profile-detail-value">
                                            {% if partner.status == 'approved' %}
                                                <span class="profile-pill profile-pill-success">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    {{ partner.get_status_display }}
                                                </span>
                                            {% elif partner.status == 'pending' %}
                                                <span class="profile-pill profile-pill-warning">
                                                    <i class="bi bi-hourglass-split"></i>
                                                    {{ partner.get_status_display }}
                                                </span>
                                            {% else %}
                                                <span class="profile-pill profile-pill-neutral">
                                                    {{ partner.get_status_display }}
                                                </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="status-preference-card">
                                        <span class="profile-detail-label">Public Profile</span>
                                        {% if partner.is_public %}
                                            <span class="yes-pill">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="no-pill">
                                                <i class="bi bi-x-circle"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="status-preference-card">
                                        <span class="profile-detail-label">Featured</span>
                                        {% if partner.is_featured %}
                                            <span class="yes-pill">
                                                <i class="bi bi-stars"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="no-pill">
                                                <i class="bi bi-dash-circle"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="status-preference-card">
                                        <span class="profile-detail-label">Passport Ready</span>
                                        {% if partner.passport_ready %}
                                            <span class="yes-pill">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="no-pill">
                                                <i class="bi bi-x-circle"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="status-preference-card">
                                        <span class="profile-detail-label">Willing to Relocate</span>
                                        {% if partner.willing_to_relocate %}
                                            <span class="yes-pill">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="no-pill">
                                                <i class="bi bi-x-circle"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="status-preference-card">
                                        <span class="profile-detail-label">Video Call</span>
                                        {% if partner.willing_video_call %}
                                            <span class="yes-pill">
                                                <i class="bi bi-camera-video-fill"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="no-pill">
                                                <i class="bi bi-camera-video-off"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>

                            </div>
                        </section>


                        <hr class="profile-divider">


                        <!-- SYSTEM INFO -->
                        <section class="profile-section">
                            <div class="profile-section-header">
                                <div class="profile-section-icon">
                                    <i class="bi bi-info-circle-fill"></i>
                                </div>
                                <div>
                                    <h5>System Info</h5>
                                    <p>
                                        Internal profile identifiers and account creation details.
                                    </p>
                                </div>
                            </div>

                            <div class="profile-system-card">
                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <span class="profile-detail-label">Profile Code</span>
                                        <div class="profile-detail-value">
                                            {{ partner.profile_code }}
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <span class="profile-detail-label">Created At</span>
                                        <div class="profile-detail-value">
                                            {{ partner.created_at }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                    </div>
                </div>

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


<!-- CROP IMAGE MODAL -->
<div class="modal fade dating-crop-modal"
     id="cropImageModal"
     tabindex="-1"
     aria-labelledby="cropImageModalLabel"
     aria-hidden="true">

    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="cropImageModalLabel">
                    Adjust Profile Image
                </h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div style="width: 100%; max-height: 500px; overflow: hidden;">
                    <img id="cropperImage"
                         src=""
                         alt="Crop Image"
                         style="max-width: 100%; display: block;">
                </div>
            </div>

            <div class="modal-footer">
                <button type="button"
                        class="btn btn-outline-secondary rounded-pill px-4"
                        data-bs-dismiss="modal">
                    Cancel
                </button>

                <button type="button"
                        id="cropAndUploadBtn"
                        class="btn btn-dating-primary">
                    Crop & Upload
                </button>
            </div>

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


<script>
document.addEventListener('DOMContentLoaded', function () {
    const preview = document.getElementById('profilePreview');
    const input = document.getElementById('profileImageInput');
    const statusBox = document.getElementById('uploadStatus');

    const cropModalEl = document.getElementById('cropImageModal');
    const cropImage = document.getElementById('cropperImage');
    const cropAndUploadBtn = document.getElementById('cropAndUploadBtn');

    let cropper = null;
    let selectedFile = null;
    const cropModal = new bootstrap.Modal(cropModalEl);

    preview.addEventListener('click', function () {
        input.click();
    });

    input.addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;

        const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
        if (!allowedTypes.includes(file.type)) {
            statusBox.innerHTML = '<div class="alert alert-danger py-2">Only JPG, PNG, or WEBP images are allowed.</div>';
            input.value = '';
            return;
        }

        if (file.size > 2 * 1024 * 1024) {
            statusBox.innerHTML = '<div class="alert alert-warning py-2">Large image detected. It will be optimized after cropping.</div>';
        } else {
            statusBox.innerHTML = '';
        }

        selectedFile = file;

        const reader = new FileReader();
        reader.onload = function (e) {
            cropImage.src = e.target.result;
            cropModal.show();
        };
        reader.readAsDataURL(file);
    });

    cropModalEl.addEventListener('shown.bs.modal', function () {
        if (cropper) {
            cropper.destroy();
        }

        cropper = new Cropper(cropImage, {
            aspectRatio: 1,
            viewMode: 1,
            dragMode: 'move',
            autoCropArea: 1,
            responsive: true,
            background: false,
            movable: true,
            zoomable: true,
            rotatable: false,
            scalable: false,
            cropBoxMovable: true,
            cropBoxResizable: true,
        });
    });

    cropModalEl.addEventListener('hidden.bs.modal', function () {
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }
    });

    cropAndUploadBtn.addEventListener('click', function () {
        if (!cropper) {
            statusBox.innerHTML = '<div class="alert alert-danger py-2">Cropper is not ready.</div>';
            return;
        }

        statusBox.innerHTML = '<div class="alert alert-info py-2">Processing image...</div>';

        const canvas = cropper.getCroppedCanvas({
            width: 600,
            height: 600,
            imageSmoothingEnabled: true,
            imageSmoothingQuality: 'high'
        });

        if (!canvas) {
            statusBox.innerHTML = '<div class="alert alert-danger py-2">Could not crop image.</div>';
            return;
        }

        canvas.toBlob(function(blob) {
            if (!blob) {
                statusBox.innerHTML = '<div class="alert alert-danger py-2">Failed to create cropped image.</div>';
                return;
            }

            const fileName = selectedFile ? selectedFile.name : 'profile.jpg';
            const croppedFile = new File([blob], fileName, { type: 'image/jpeg' });

            const formData = new FormData();
            formData.append('profile_photo', croppedFile);
            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            fetch("{% url 'dating_app:upload_dating_profile_image' %}", {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    preview.src = data.image_url + '?t=' + new Date().getTime();
                    statusBox.innerHTML = '<div class="alert alert-success py-2">' + data.message + '</div>';
                    cropModal.hide();
                    input.value = '';
                } else {
                    statusBox.innerHTML = '<div class="alert alert-danger py-2">' + (data.error || 'Upload failed.') + '</div>';
                }
            })
            .catch(() => {
                statusBox.innerHTML = '<div class="alert alert-danger py-2">Something went wrong while uploading.</div>';
            });

        }, 'image/jpeg', 0.85);
    });
});
</script>

{% endblock %}