{% extends 'service_partner_app/base_service_partner.html' %}
{% load static %}

{% block title %}My Service Partner Profile | Hired in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       HERO SECTION
    ========================================================= */
    .partner-profile-hero {
        position: relative;
        padding: 76px 0 62px;
        background:
            linear-gradient(
                110deg,
                rgba(7, 22, 31, 0.98) 0%,
                rgba(10, 45, 53, 0.94) 48%,
                rgba(13, 148, 136, 0.80) 100%
            );
        overflow: hidden;
    }

    .partner-profile-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 12% 18%, rgba(255, 193, 7, 0.22), transparent 28%),
            radial-gradient(circle at 88% 76%, rgba(255, 255, 255, 0.11), transparent 28%);
        pointer-events: none;
    }

    .partner-profile-hero::after {
        content: "";
        position: absolute;
        top: -115px;
        right: -95px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.055);
        pointer-events: none;
    }

    .partner-profile-hero-inner {
        position: relative;
        z-index: 2;
    }

    .partner-profile-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.18);
        border: 1px solid rgba(255, 193, 7, 0.36);
        color: #ffd453;
        font-weight: 800;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .partner-profile-title {
        color: #fff;
        font-size: clamp(2.35rem, 4vw, 3.8rem);
        line-height: 1.12;
        font-weight: 900;
    }

    .partner-profile-lead {
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.12rem;
        line-height: 1.8;
        max-width: 770px;
    }

    .profile-hero-pill-grid {
        margin-top: 26px;
    }

    .profile-hero-pill {
        height: 100%;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 15px 17px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #fff;
        backdrop-filter: blur(10px);
    }

    .profile-hero-pill i {
        color: #ffc107;
        margin-top: 2px;
        font-size: 1.16rem;
    }


    /* =========================================================
       PROFILE IDENTITY CARD
    ========================================================= */
    .profile-identity-card {
        position: relative;
        padding: 32px;
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 35px 82px rgba(0, 0, 0, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.64);
        overflow: hidden;
    }

    .profile-identity-card::before {
        content: "";
        position: absolute;
        right: -58px;
        top: -58px;
        width: 178px;
        height: 178px;
        border-radius: 50%;
        background: rgba(13, 148, 136, 0.11);
        pointer-events: none;
    }

    .profile-identity-content {
        position: relative;
        z-index: 2;
    }

    .profile-photo-shell {
        position: relative;
        display: inline-block;
        padding: 6px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0d9488 0%, #ffc107 100%);
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.20);
    }

    .profile-preview-image {
        width: 176px;
        height: 176px;
        object-fit: cover;
        border-radius: 50%;
        border: 5px solid #fff;
        cursor: pointer;
        display: block;
        transition: transform 0.28s ease, box-shadow 0.28s ease;
    }

    .profile-photo-shell:hover .profile-preview-image {
        transform: scale(1.025);
    }

    .profile-upload-overlay {
        position: absolute;
        right: 10px;
        bottom: 12px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #0d1f2a;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        border: 3px solid #fff;
        pointer-events: none;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
    }

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

    .profile-identity-name {
        font-weight: 900;
        color: #0d1f2a;
    }

    .profile-service-tag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #eafff7;
        color: #0d9488;
        font-size: 0.85rem;
        font-weight: 800;
    }

    .profile-status-tag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 800;
    }

    .profile-status-approved {
        color: #087f5b;
        background: #e6fcf5;
    }

    .profile-status-pending {
        color: #b7791f;
        background: #fff7e6;
    }

    .profile-status-rejected {
        color: #c92a2a;
        background: #fff0f0;
    }

    .profile-status-neutral {
        color: #475569;
        background: #f1f5f9;
    }

    .profile-quick-meta {
        margin-top: 22px;
        background: #f8fbfb;
        border: 1px solid #e8eeee;
        border-radius: 22px;
        padding: 18px;
    }

    .quick-meta-item {
        padding: 10px 0;
        border-bottom: 1px dashed #dde8ea;
    }

    .quick-meta-item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .quick-meta-label {
        display: block;
        color: #64748b;
        font-size: 0.84rem;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .quick-meta-value {
        color: #0d1f2a;
        font-weight: 800;
    }


    /* =========================================================
       PAGE BODY
    ========================================================= */
    .partner-profile-page {
        background:
            linear-gradient(180deg, #f5faf9 0%, #eef6f5 100%);
        padding-top: 52px;
        padding-bottom: 82px;
    }

    .profile-content-card {
        background: #fff;
        border-radius: 34px;
        padding: 36px;
        box-shadow: 0 24px 62px rgba(15, 23, 42, 0.10);
        border: 1px solid #edf2f3;
    }

    .profile-action-bar {
        background:
            linear-gradient(135deg, #ffffff 0%, #f8fffd 100%);
        border: 1px solid rgba(13, 148, 136, 0.12);
        border-radius: 28px;
        padding: 24px;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
        margin-bottom: 32px;
    }

    .profile-action-title {
        color: #0d1f2a;
        font-weight: 900;
    }

    .profile-action-text {
        color: #64748b;
        line-height: 1.7;
    }

    .profile-action-btn {
        min-height: 48px;
        padding-left: 1.35rem;
        padding-right: 1.35rem;
        border-radius: 999px;
        font-weight: 800;
    }

    .profile-section-card {
        background: #fff;
        border-radius: 28px;
        padding: 30px;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
        border: 1px solid #edf2f3;
        margin-bottom: 28px;
    }

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

    .profile-section-icon {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        background: #eafff7;
        color: #0d9488;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
        flex-shrink: 0;
    }

    .profile-section-heading h4,
    .profile-section-heading h5 {
        color: #0d1f2a;
        font-weight: 900;
        margin-bottom: 5px;
    }

    .profile-section-heading p {
        color: #64748b;
        margin-bottom: 0;
        line-height: 1.65;
    }


    /* =========================================================
       DETAIL ITEMS
    ========================================================= */
    .profile-detail-item {
        height: 100%;
        background: #f8fbfb;
        border: 1px solid #e8eeee;
        border-radius: 20px;
        padding: 18px 18px 19px;
        transition: all 0.22s ease;
    }

    .profile-detail-item:hover {
        transform: translateY(-3px);
        background: #fff;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    }

    .profile-detail-label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #64748b;
        font-size: 0.84rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 8px;
    }

    .profile-detail-label i {
        color: #0d9488;
    }

    .profile-detail-value {
        color: #0d1f2a;
        font-weight: 700;
        line-height: 1.75;
        word-break: break-word;
    }

    .profile-long-text-item {
        min-height: 100%;
    }


    /* =========================================================
       YES / NO PILLS
    ========================================================= */
    .boolean-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border-radius: 999px;
        font-size: 0.88rem;
        font-weight: 800;
    }

    .boolean-yes {
        color: #087f5b;
        background: #e6fcf5;
    }

    .boolean-no {
        color: #64748b;
        background: #f1f5f9;
    }


    /* =========================================================
       SYSTEM INFO
    ========================================================= */
    .system-info-card {
        background:
            linear-gradient(135deg, #0d1f2a 0%, #12323b 50%, #0d9488 100%);
        color: #fff;
        border-radius: 30px;
        padding: 32px;
        box-shadow: 0 28px 68px rgba(15, 23, 42, 0.18);
        position: relative;
        overflow: hidden;
    }

    .system-info-card::before {
        content: "";
        position: absolute;
        top: -80px;
        right: -60px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

    .system-info-inner {
        position: relative;
        z-index: 2;
    }

    .system-info-card .profile-section-icon {
        background: rgba(255, 255, 255, 0.12);
        color: #ffd453;
    }

    .system-info-card h5 {
        color: #fff;
    }

    .system-info-card .system-copy {
        color: rgba(255, 255, 255, 0.78);
    }

    .system-item {
        height: 100%;
        padding: 18px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.16);
    }

    .system-item-label {
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 8px;
    }

    .system-item-value {
        color: #fff;
        font-weight: 800;
        line-height: 1.7;
    }


    /* =========================================================
       UPLOAD STATUS
    ========================================================= */
    #uploadStatus .alert {
        border-radius: 16px;
        margin-bottom: 0;
        font-weight: 600;
    }


    /* =========================================================
       CROP MODAL
    ========================================================= */
    .crop-modal-content {
        border: none;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 32px 90px rgba(0, 0, 0, 0.30);
    }

    .crop-modal-header {
        border-bottom: none;
        padding: 24px 28px;
        color: #fff;
        background:
            linear-gradient(135deg, #0d1f2a 0%, #0d9488 100%);
    }

    .crop-modal-header .modal-title {
        font-weight: 900;
    }

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

    .crop-modal-body {
        padding: 26px 28px;
        background: #f8fbfb;
    }

    .crop-image-frame {
        width: 100%;
        max-height: 520px;
        overflow: hidden;
        background: #fff;
        border: 1px solid #e8eeee;
        border-radius: 24px;
        padding: 14px;
    }

    .crop-image-frame img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    .crop-modal-footer {
        border-top: none;
        padding: 20px 28px 26px;
        background: #fff;
    }

    .crop-modal-btn {
        border-radius: 999px;
        min-height: 48px;
        font-weight: 800;
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */
    @media (max-width: 991.98px) {
        .partner-profile-hero {
            padding: 64px 0 58px;
        }

        .profile-identity-card,
        .profile-content-card,
        .profile-section-card,
        .system-info-card {
            padding: 24px;
        }

        .profile-preview-image {
            width: 160px;
            height: 160px;
        }
    }

    .profile-document-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;

        color: #0f172a;
        font-weight: 800;
        text-decoration: none;

        padding: 0.35rem 0.7rem;
        border-radius: 999px;

        background: rgba(255, 193, 7, 0.14);
        border: 1px solid rgba(255, 193, 7, 0.34);

        transition: all 0.2s ease;
    }

    .profile-document-link:hover {
        color: #000;
        background: rgba(255, 193, 7, 0.24);
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
    }
</style>


<!-- =========================================================
     HERO
========================================================= -->
<section class="partner-profile-hero">
    <div class="container partner-profile-hero-inner">
        <div class="row g-5 align-items-center">

            <!-- LEFT HERO CONTENT -->
            <div class="col-lg-7">
                <span class="partner-profile-badge mb-4">
                    <i class="bi bi-person-vcard-fill"></i>
                    My Service Partner Profile
                </span>

                <h1 class="partner-profile-title mb-3">
                    Present Yourself with Confidence
                </h1>

                <p class="partner-profile-lead mb-0">
                    Keep your professional information clear, current, and polished.
                    Your Service Partner profile is the foundation of how you are presented
                    within the Hired in Sri Lanka opportunity network.
                </p>

                <div class="row g-3 profile-hero-pill-grid">
                    <div class="col-sm-6">
                        <div class="profile-hero-pill">
                            <i class="bi bi-image-fill"></i>
                            <span>Update your professional profile photo easily.</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="profile-hero-pill">
                            <i class="bi bi-pencil-square"></i>
                            <span>Refine your profile details and service presentation.</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="profile-hero-pill">
                            <i class="bi bi-shield-lock-fill"></i>
                            <span>Manage your username and password securely.</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="profile-hero-pill">
                            <i class="bi bi-stars"></i>
                            <span>Build a stronger impression for future opportunities.</span>
                        </div>
                    </div>
                </div>
            </div>


            <!-- RIGHT PROFILE IDENTITY CARD -->
            <div class="col-lg-5">
                <div class="profile-identity-card">
                    <div class="profile-identity-content text-center">

                        <div class="profile-photo-shell mb-3">
                            <img
                                id="profilePreview"
                                src="{% if partner.profile_photo %}{{ partner.profile_photo.url }}{% else %}{% static default_profile_image %}{% endif %}"
                                alt="Profile Image"
                                class="profile-preview-image"
                                title="Click to change profile image"
                            >
                            <span class="profile-upload-overlay">
                                <i class="bi bi-camera-fill"></i>
                            </span>
                            <input type="file" id="profileImageInput" accept="image/jpeg,image/png,image/webp" hidden>
                        </div>

                        <h3 class="profile-identity-name mb-2">
                            {{ partner.display_name|default:partner.full_name }}
                        </h3>

                        <div class="d-flex flex-wrap gap-2 justify-content-center mb-3">
                            <span class="profile-service-tag">
                                <i class="bi bi-briefcase-fill"></i>
                                {{ partner.get_service_type_display }}
                            </span>

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

                        <p class="profile-upload-hint mb-2">
                            Click your photo to upload a new profile image.
                            You can crop and adjust it before saving.
                        </p>

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

                        <div class="profile-quick-meta text-start">
                            <div class="quick-meta-item">
                                <span class="quick-meta-label">Profile Code</span>
                                <span class="quick-meta-value">{{ partner.profile_code }}</span>
                            </div>

                            <div class="quick-meta-item">
                                <span class="quick-meta-label">Username</span>
                                <span class="quick-meta-value">{{ request.user.username }}</span>
                            </div>

                            <div class="quick-meta-item">
                                <span class="quick-meta-label">Email</span>
                                <span class="quick-meta-value">{{ partner.email }}</span>
                            </div>

                            <div class="quick-meta-item">
                                <span class="quick-meta-label">Resume / Biodata</span>

                                {% if partner.resume_or_bio_data %}
                                    <span class="quick-meta-value">
                                        <a href="{{ partner.resume_or_bio_data.url }}"
                                        target="_blank"
                                        class="profile-document-link">
                                            <i class="bi bi-file-earmark-person-fill me-1"></i>
                                            View Uploaded File
                                        </a>
                                    </span>
                                {% else %}
                                    <span class="quick-meta-value text-warning">
                                        <i class="bi bi-exclamation-circle-fill me-1"></i>
                                        Not uploaded yet
                                    </span>
                                {% endif %}
                            </div>
                        </div>

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

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


<!-- =========================================================
     PAGE CONTENT
========================================================= -->
<section class="partner-profile-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-11">

                <div class="profile-content-card">

                    <!-- ACTION BAR -->
                    <div class="profile-action-bar">
                        <div class="row align-items-center g-3">
                            <div class="col-lg-6">
                                <h4 class="profile-action-title mb-2">
                                    Manage Your Profile
                                </h4>
                                <p class="profile-action-text mb-0">
                                    Update profile information, secure your account credentials,
                                    and keep your professional presentation accurate.
                                </p>
                            </div>

                            <div class="col-lg-6">
                                <div class="d-flex flex-wrap gap-2 justify-content-lg-end">
                                    <a href="{% url 'service_partner_app:edit_service_partner_profile' %}"
                                       class="btn btn-dark profile-action-btn">
                                        <i class="bi bi-pencil-square me-2"></i>
                                        Edit Profile
                                    </a>

                                    <a href="{% url 'service_partner_app:change_service_partner_username' %}"
                                       class="btn btn-outline-secondary profile-action-btn">
                                        Change Username
                                    </a>

                                    <a href="{% url 'service_partner_app:change_service_partner_password' %}"
                                       class="btn btn-outline-dark profile-action-btn">
                                        Change Password
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- PROFILE DETAILS -->
                    <div class="profile-section-card">
                        <div class="profile-section-heading">
                            <div class="profile-section-icon">
                                <i class="bi bi-person-lines-fill"></i>
                            </div>

                            <div>
                                <h4>Profile Details</h4>
                                <p>
                                    Review the main information used to represent your Service Partner identity.
                                </p>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-person-badge"></i>
                                        Username
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ request.user.username }}
                                    </div>
                                </div>
                            </div>

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

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

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

                            <div class="col-md-6">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-briefcase-fill"></i>
                                        Service Type
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.get_service_type_display }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-gender-ambiguous"></i>
                                        Gender
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.get_gender_display|default:"-" }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-calendar2-heart"></i>
                                        Age
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.age|default:"-" }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-calendar-date-fill"></i>
                                        Date of Birth
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.date_of_birth|default:"-" }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-geo-alt-fill"></i>
                                        City
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.city }}
                                    </div>
                                </div>
                            </div>

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

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

                            <div class="col-md-6">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-telephone-fill"></i>
                                        Phone Number
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.phone_number|default:"-" }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-whatsapp"></i>
                                        WhatsApp
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.whatsapp_number|default:"-" }}
                                    </div>
                                </div>
                            </div>

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

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

                            <div class="col-md-6">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-car-front-fill"></i>
                                        Has License
                                    </div>
                                    <div class="profile-detail-value">
                                        {% if partner.has_license %}
                                            <span class="boolean-pill boolean-yes">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="boolean-pill boolean-no">
                                                <i class="bi bi-dash-circle-fill"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="profile-detail-item profile-long-text-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-house-door-fill"></i>
                                        Address
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.address|default:"-" }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- PRESENTATION & EXPERIENCE -->
                    <div class="profile-section-card">
                        <div class="profile-section-heading">
                            <div class="profile-section-icon">
                                <i class="bi bi-chat-square-quote-fill"></i>
                            </div>

                            <div>
                                <h4>Professional Presentation</h4>
                                <p>
                                    These sections help describe your personality, experience, and service strengths.
                                </p>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                <div class="profile-detail-item profile-long-text-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-megaphone-fill"></i>
                                        Short Intro
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.short_intro }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="profile-detail-item profile-long-text-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-person-hearts"></i>
                                        About Me
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.about_me|default:"-" }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="profile-detail-item profile-long-text-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-briefcase-fill"></i>
                                        Experience Summary
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.experience_summary|default:"-" }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="profile-detail-item profile-long-text-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-tools"></i>
                                        Skills
                                    </div>
                                    <div class="profile-detail-value">
                                        {{ partner.skills|default:"-" }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- AVAILABILITY & PREFERENCES -->
                    <div class="profile-section-card">
                        <div class="profile-section-heading">
                            <div class="profile-section-icon">
                                <i class="bi bi-calendar2-check-fill"></i>
                            </div>

                            <div>
                                <h5>Availability & Preferences</h5>
                                <p>
                                    Quick indicators related to work readiness, relocation, and visibility.
                                </p>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-passport-fill"></i>
                                        Passport Ready
                                    </div>
                                    <div class="profile-detail-value">
                                        {% if partner.passport_ready %}
                                            <span class="boolean-pill boolean-yes">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="boolean-pill boolean-no">
                                                <i class="bi bi-dash-circle-fill"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

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

                            <div class="col-md-4">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-house-heart-fill"></i>
                                        Live-in Available
                                    </div>
                                    <div class="profile-detail-value">
                                        {% if partner.live_in_available %}
                                            <span class="boolean-pill boolean-yes">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="boolean-pill boolean-no">
                                                <i class="bi bi-dash-circle-fill"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-clock-history"></i>
                                        Part-time Available
                                    </div>
                                    <div class="profile-detail-value">
                                        {% if partner.part_time_available %}
                                            <span class="boolean-pill boolean-yes">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="boolean-pill boolean-no">
                                                <i class="bi bi-dash-circle-fill"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="profile-detail-item">
                                    <div class="profile-detail-label">
                                        <i class="bi bi-calendar-week-fill"></i>
                                        Full-time Available
                                    </div>
                                    <div class="profile-detail-value">
                                        {% if partner.full_time_available %}
                                            <span class="boolean-pill boolean-yes">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Yes
                                            </span>
                                        {% else %}
                                            <span class="boolean-pill boolean-no">
                                                <i class="bi bi-dash-circle-fill"></i>
                                                No
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

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


                    <!-- SYSTEM INFO -->
                    <div class="system-info-card">
                        <div class="system-info-inner">
                            <div class="profile-section-heading mb-4">
                                <div class="profile-section-icon">
                                    <i class="bi bi-gear-fill"></i>
                                </div>

                                <div>
                                    <h5>System Info</h5>
                                    <p class="system-copy mb-0">
                                        Internal account and profile reference details connected to your Service Partner record.
                                    </p>
                                </div>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="system-item">
                                        <div class="system-item-label">Status</div>
                                        <div class="system-item-value">
                                            {{ partner.get_status_display }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="system-item">
                                        <div class="system-item-label">Profile Code</div>
                                        <div class="system-item-value">
                                            {{ partner.profile_code }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="system-item">
                                        <div class="system-item-label">Created At</div>
                                        <div class="system-item-value">
                                            {{ partner.created_at }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

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


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

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

            <div class="modal-body crop-modal-body">
                <div class="crop-image-frame">
                    <img id="cropperImage" src="" alt="Crop Image">
                </div>
            </div>

            <div class="modal-footer crop-modal-footer">
                <button type="button" class="btn btn-outline-secondary crop-modal-btn" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" id="cropAndUploadBtn" class="btn btn-dark crop-modal-btn">
                    <i class="bi bi-cloud-arrow-up-fill me-2"></i>
                    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 'service_partner_app:upload_service_partner_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 %}