{% extends 'hosting_app/base_hosting.html' %}
{% load static %}

{% block title %}My Hosting Client Profile{% endblock %}

{% block content %}

<style>
    /* =========================================================
       HOSTING CLIENT PROFILE PAGE — PREMIUM
    ========================================================= */

    .hosting-profile-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.11), transparent 28%),
            radial-gradient(circle at top right, rgba(138, 57, 45, 0.10), transparent 32%),
            linear-gradient(180deg, #fffaf5 0%, #fff4e8 45%, #ffffff 100%);
        padding: 4rem 0 5rem;
    }

    .hosting-profile-hero {
        position: relative;
        overflow: hidden;
        border-radius: 40px;
        padding: 2.7rem 2.5rem;
        background:
            radial-gradient(circle at top right, rgba(255, 211, 107, 0.22), transparent 32%),
            linear-gradient(135deg, #2d1716 0%, #743129 58%, #a7601b 100%);
        color: #ffffff;
        box-shadow: 0 32px 72px rgba(58, 30, 24, 0.22);
        margin-bottom: 2rem;
    }

    .hosting-profile-hero::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -90px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.07);
        pointer-events: none;
    }

    .hosting-profile-hero::after {
        content: "";
        position: absolute;
        bottom: -160px;
        left: -120px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.10);
        pointer-events: none;
    }

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

    .hosting-profile-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.52rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #ffe7aa;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
    }

    .hosting-profile-hero h1 {
        font-size: clamp(2.2rem, 4vw, 3.6rem);
        font-weight: 950;
        letter-spacing: -0.045em;
        line-height: 1.1;
        margin-bottom: 0.8rem;
    }

    .hosting-profile-hero p {
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.8;
        max-width: 880px;
        margin-bottom: 0;
        font-size: 1.05rem;
    }

    .hosting-profile-shell {
        border-radius: 38px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 24px 58px rgba(58, 30, 24, 0.10);
        overflow: hidden;
    }

    .hosting-profile-top {
        padding: 2rem;
        background:
            radial-gradient(circle at top right, rgba(183, 106, 31, 0.06), transparent 30%),
            linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
        border-bottom: 1px solid #efe2d3;
    }

    .hosting-avatar-wrap {
        position: relative;
        display: inline-block;
    }

    .hosting-profile-avatar {
        width: 176px;
        height: 176px;
        border-radius: 50%;
        object-fit: cover;
        cursor: pointer;
        border: 6px solid rgba(255, 255, 255, 0.95);
        box-shadow: 0 24px 48px rgba(58, 30, 24, 0.18);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .hosting-profile-avatar:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 58px rgba(58, 30, 24, 0.22);
    }

    .hosting-avatar-camera {
        position: absolute;
        right: 10px;
        bottom: 12px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #321816, #a7601b);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 4px solid #fff;
        box-shadow: 0 12px 24px rgba(58, 30, 24, 0.18);
        pointer-events: none;
        font-size: 1rem;
    }

    .hosting-upload-helper {
        color: #7b675f;
        font-size: 0.92rem;
        margin-top: 1rem;
        margin-bottom: 0;
    }

    .hosting-profile-name {
        color: #2f1d18;
        font-weight: 950;
        font-size: clamp(1.65rem, 3vw, 2.2rem);
        margin-bottom: 0.35rem;
    }

    .hosting-profile-subtitle {
        color: #7a655d;
        line-height: 1.7;
        margin-bottom: 1rem;
    }

    .hosting-inline-statuses {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .hosting-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        border-radius: 999px;
        padding: 0.48rem 0.86rem;
        font-size: 0.82rem;
        font-weight: 900;
    }

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

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

    .hosting-status-pill.danger {
        background: #fee2e2;
        color: #b91c1c;
    }

    .hosting-status-pill.muted {
        background: #ece4dc;
        color: #6b564d;
    }

    .hosting-action-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .hosting-action-toolbar .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: 0.72rem 1.15rem;
    }

    .hosting-btn-primary {
        color: #fff;
        border: none;
        background: linear-gradient(135deg, #301716, #a7601b);
    }

    .hosting-btn-primary:hover {
        color: #fff;
    }

    .hosting-profile-body {
        padding: 2rem;
    }

    .hosting-section-card {
        border-radius: 30px;
        border: 1px solid #efe2d3;
        background: #ffffff;
        box-shadow: 0 16px 36px rgba(58, 30, 24, 0.06);
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .hosting-section-header {
        padding: 1.45rem 1.6rem 1rem;
        border-bottom: 1px solid #efe2d3;
        background:
            radial-gradient(circle at top right, rgba(183, 106, 31, 0.05), transparent 28%),
            #ffffff;
    }

    .hosting-section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #a7601b;
        font-size: 0.8rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.35rem;
    }

    .hosting-section-header h3 {
        color: #2f1d18;
        font-weight: 950;
        margin-bottom: 0.35rem;
    }

    .hosting-section-header p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .hosting-section-body {
        padding: 1.6rem;
    }

    .hosting-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .hosting-detail-item {
        border-radius: 22px;
        border: 1px solid #efe2d3;
        background: #fffaf5;
        padding: 1rem 1.05rem;
        min-height: 92px;
    }

    .hosting-detail-item.full {
        grid-column: 1 / -1;
    }

    .hosting-detail-label {
        display: block;
        color: #7a655d;
        font-size: 0.8rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 0.35rem;
    }

    .hosting-detail-value {
        color: #2f1d18;
        font-weight: 850;
        line-height: 1.6;
        word-break: break-word;
    }

    .hosting-access-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .hosting-access-box {
        border-radius: 22px;
        border: 1px solid #efe2d3;
        background: #fffaf5;
        padding: 1.15rem;
    }

    .hosting-access-box strong {
        display: block;
        color: #7a655d;
        font-size: 0.8rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 0.45rem;
    }

    .hosting-access-value {
        color: #2f1d18;
        font-weight: 950;
        font-size: 1rem;
    }

    .hosting-snapshot-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .hosting-snapshot-box {
        border-radius: 24px;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.09), transparent 28%),
            #fffaf5;
        border: 1px solid #efe2d3;
        padding: 1.25rem;
    }

    .hosting-snapshot-box span {
        display: block;
        color: #7a655d;
        font-size: 0.8rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 0.45rem;
    }

    .hosting-snapshot-box strong {
        display: block;
        color: #2f1d18;
        font-weight: 950;
        font-size: 1.45rem;
        line-height: 1.2;
    }

    .hosting-snapshot-note {
        color: #7a655d;
        line-height: 1.72;
        margin-top: 1rem;
        margin-bottom: 0;
    }

    .hosting-system-strip {
        border-radius: 28px;
        border: 1px dashed rgba(167, 96, 27, 0.28);
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.08), transparent 30%),
            #fffaf5;
        padding: 1.3rem;
    }

    #uploadStatus .alert {
        border-radius: 18px;
        margin-bottom: 0;
    }

    /* Crop modal */
    .hosting-crop-modal .modal-content {
        border-radius: 30px;
        overflow: hidden;
        border: none;
        box-shadow: 0 30px 70px rgba(58, 30, 24, 0.24);
    }

    .hosting-crop-modal .modal-header {
        background: linear-gradient(135deg, #2d1716, #a7601b);
        color: #fff;
        border-bottom: 0;
    }

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

    .hosting-crop-modal .modal-footer {
        border-top: 1px solid #efe2d3;
    }

    .hosting-crop-modal .btn {
        border-radius: 999px;
        font-weight: 850;
    }

    @media (max-width: 991.98px) {
        .hosting-profile-hero {
            padding: 2rem 1.5rem;
            border-radius: 32px;
        }

        .hosting-detail-grid,
        .hosting-access-grid,
        .hosting-snapshot-grid {
            grid-template-columns: 1fr;
        }

        .hosting-profile-top,
        .hosting-profile-body {
            padding: 1.45rem;
        }
    }

    @media (max-width: 767.98px) {
        .hosting-profile-page {
            padding-top: 2.5rem;
        }

        .hosting-profile-avatar {
            width: 150px;
            height: 150px;
        }

        .hosting-action-toolbar {
            flex-direction: column;
            align-items: stretch;
        }

        .hosting-action-toolbar .btn {
            width: 100%;
        }
    }
</style>


<section class="hosting-profile-page">
    <div class="container">

        <!-- =====================================================
             HERO
        ====================================================== -->
        <div class="hosting-profile-hero">
            <div class="hosting-profile-hero-inner">
                <span class="hosting-profile-kicker">
                    <i class="bi bi-person-heart"></i>
                    Hosting Client Account
                </span>

                <h1>My Hosting Client Profile</h1>

                <p>
                    Manage your client identity, contact details, profile image, username,
                    password, and hosting account information from one premium profile center.
                </p>
            </div>
        </div>


        <!-- =====================================================
             PROFILE SHELL
        ====================================================== -->
        <div class="hosting-profile-shell">

            <!-- TOP PROFILE STRIP -->
            <div class="hosting-profile-top">
                <div class="row align-items-center g-4">

                    <div class="col-lg-3 text-center">
                        <div class="hosting-avatar-wrap">
                            <img
                                id="profilePreview"
                                src="{% if client.profile_image %}{{ client.profile_image.url }}{% else %}{% static default_profile_image %}{% endif %}"
                                alt="Hosting Client Profile Image"
                                class="hosting-profile-avatar"
                                title="Click to change profile image"
                            >

                            <div class="hosting-avatar-camera">
                                <i class="bi bi-camera-fill"></i>
                            </div>

                            <input
                                type="file"
                                id="profileImageInput"
                                accept="image/jpeg,image/png,image/webp"
                                hidden
                            >
                        </div>

                        <p class="hosting-upload-helper">
                            Click the image to upload a new profile photo.
                        </p>

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


                    <div class="col-lg-9">
                        <h2 class="hosting-profile-name">
                            {{ client.full_name }}
                        </h2>

                        <p class="hosting-profile-subtitle">
                            {{ client.get_client_type_display }}
                            {% if client.city %}
                                · {{ client.city }}
                            {% endif %}
                            {% if client.country %}
                                · {{ client.country }}
                            {% endif %}
                        </p>

                        <div class="hosting-inline-statuses">

                            {% if client.is_active %}
                                <span class="hosting-status-pill success">
                                    <i class="bi bi-check-circle-fill"></i>
                                    Active Profile
                                </span>
                            {% else %}
                                <span class="hosting-status-pill muted">
                                    <i class="bi bi-dash-circle-fill"></i>
                                    Inactive Profile
                                </span>
                            {% endif %}

                            <span class="hosting-status-pill warning">
                                <i class="bi bi-person-badge-fill"></i>
                                {{ client.get_client_type_display }}
                            </span>

                            {% if client.created_from_existing_profile %}
                                <span class="hosting-status-pill success">
                                    <i class="bi bi-link-45deg"></i>
                                    Created From Existing Profile
                                </span>
                            {% else %}
                                <span class="hosting-status-pill muted">
                                    <i class="bi bi-person-plus-fill"></i>
                                    Direct Hosting Client
                                </span>
                            {% endif %}
                        </div>

                        <div class="hosting-action-toolbar">
                            <a href="{% url 'hosting_app:edit_hosting_client_profile' %}"
                               class="btn hosting-btn-primary">
                                <i class="bi bi-pencil-square me-2"></i>
                                Edit Profile
                            </a>

                            <a href="{% url 'hosting_app:change_hosting_client_username' %}"
                               class="btn btn-outline-secondary">
                                <i class="bi bi-person-gear me-2"></i>
                                Change Username
                            </a>

                            <a href="{% url 'hosting_app:change_hosting_client_password' %}"
                               class="btn btn-outline-dark">
                                <i class="bi bi-key-fill me-2"></i>
                                Change Password
                            </a>
                        </div>
                    </div>

                </div>
            </div>


            <!-- PROFILE BODY -->
            <div class="hosting-profile-body">

                <!-- PROFILE DETAILS -->
                <div class="hosting-section-card">
                    <div class="hosting-section-header">
                        <span class="hosting-section-kicker">
                            <i class="bi bi-person-lines-fill"></i>
                            Profile Information
                        </span>

                        <h3>Hosting Client Details</h3>

                        <p>
                            Core personal, contact, and client account information linked to your hosting profile.
                        </p>
                    </div>

                    <div class="hosting-section-body">
                        <div class="hosting-detail-grid">

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

                            <div class="hosting-detail-item">
                                <span class="hosting-detail-label">Email</span>
                                <div class="hosting-detail-value">
                                    {{ client.email }}
                                </div>
                            </div>

                            <div class="hosting-detail-item">
                                <span class="hosting-detail-label">Full Name</span>
                                <div class="hosting-detail-value">
                                    {{ client.full_name }}
                                </div>
                            </div>

                            <div class="hosting-detail-item">
                                <span class="hosting-detail-label">Client Type</span>
                                <div class="hosting-detail-value">
                                    {{ client.get_client_type_display }}
                                </div>
                            </div>

                            <div class="hosting-detail-item">
                                <span class="hosting-detail-label">Phone Number</span>
                                <div class="hosting-detail-value">
                                    {{ client.phone_number|default:"-" }}
                                </div>
                            </div>

                            <div class="hosting-detail-item">
                                <span class="hosting-detail-label">WhatsApp Number</span>
                                <div class="hosting-detail-value">
                                    {{ client.whatsapp_number|default:"-" }}
                                </div>
                            </div>

                            <div class="hosting-detail-item">
                                <span class="hosting-detail-label">Country</span>
                                <div class="hosting-detail-value">
                                    {{ client.country|default:"-" }}
                                </div>
                            </div>

                            <div class="hosting-detail-item">
                                <span class="hosting-detail-label">City</span>
                                <div class="hosting-detail-value">
                                    {{ client.city|default:"-" }}
                                </div>
                            </div>

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


                <!-- CLIENT STATUS -->
                <div class="hosting-section-card">
                    <div class="hosting-section-header">
                        <span class="hosting-section-kicker">
                            <i class="bi bi-shield-check"></i>
                            Client Status
                        </span>

                        <h3>Account & Source Status</h3>

                        <p>
                            Review the current platform status of your Hosting Client profile and how it was created.
                        </p>
                    </div>

                    <div class="hosting-section-body">
                        <div class="hosting-access-grid">

                            <div class="hosting-access-box">
                                <strong>Profile Active</strong>
                                <div class="hosting-access-value">
                                    {% if client.is_active %}
                                        Yes
                                    {% else %}
                                        No
                                    {% endif %}
                                </div>
                            </div>

                            <div class="hosting-access-box">
                                <strong>Created From Existing Profile</strong>
                                <div class="hosting-access-value">
                                    {% if client.created_from_existing_profile %}
                                        Yes
                                    {% else %}
                                        No
                                    {% endif %}
                                </div>
                            </div>

                            <div class="hosting-access-box">
                                <strong>Source Profile Type</strong>
                                <div class="hosting-access-value">
                                    {% if client.source_profile_type %}
                                        {{ client.get_source_profile_type_display }}
                                    {% else %}
                                        Direct Client
                                    {% endif %}
                                </div>
                            </div>

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


                <!-- HOSTING CLIENT SNAPSHOT -->
                <div class="hosting-section-card">
                    <div class="hosting-section-header">
                        <span class="hosting-section-kicker">
                            <i class="bi bi-calendar-heart-fill"></i>
                            Hosting Activity
                        </span>

                        <h3>Your Hosting Client Snapshot</h3>

                        <p>
                            A quick overview of your hosting client account. Booking, quotation, event,
                            and request details can later be connected to this section.
                        </p>
                    </div>

                    <div class="hosting-section-body">
                        <div class="hosting-snapshot-grid">

                            <div class="hosting-snapshot-box">
                                <span>Client Type</span>
                                <strong>{{ client.get_client_type_display }}</strong>
                            </div>

                            <div class="hosting-snapshot-box">
                                <span>Account State</span>
                                <strong>
                                    {% if client.is_active %}
                                        Live
                                    {% else %}
                                        Paused
                                    {% endif %}
                                </strong>
                            </div>

                            <div class="hosting-snapshot-box">
                                <span>Source ID</span>
                                <strong>
                                    {% if client.source_profile_id %}
                                        #{{ client.source_profile_id }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </strong>
                            </div>

                        </div>

                        <p class="hosting-snapshot-note">
                            As the Hosting App grows, this area can later display your event requests,
                            venue interests, quotation history, selected hosting packages, and confirmed bookings.
                        </p>
                    </div>
                </div>


                <!-- ADMIN NOTE -->
                {% if client.admin_note %}
                    <div class="hosting-section-card">
                        <div class="hosting-section-header">
                            <span class="hosting-section-kicker">
                                <i class="bi bi-info-circle-fill"></i>
                                Admin Note
                            </span>

                            <h3>Important Account Note</h3>

                            <p>
                                This note has been added by the platform administration team.
                            </p>
                        </div>

                        <div class="hosting-section-body">
                            <div class="hosting-detail-item full">
                                <span class="hosting-detail-label">Note</span>
                                <div class="hosting-detail-value">
                                    {{ client.admin_note|linebreaksbr }}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}


                <!-- SYSTEM INFO -->
                <div class="hosting-system-strip">
                    <div class="hosting-detail-grid">

                        <div class="hosting-detail-item">
                            <span class="hosting-detail-label">Created At</span>
                            <div class="hosting-detail-value">
                                {{ client.created_at }}
                            </div>
                        </div>

                        <div class="hosting-detail-item">
                            <span class="hosting-detail-label">Last Updated</span>
                            <div class="hosting-detail-value">
                                {{ client.updated_at }}
                            </div>
                        </div>

                        <div class="hosting-detail-item">
                            <span class="hosting-detail-label">Linked Account</span>
                            <div class="hosting-detail-value">
                                {% if client.user %}
                                    {{ client.user.username }}
                                {% else %}
                                    -
                                {% endif %}
                            </div>
                        </div>

                        <div class="hosting-detail-item">
                            <span class="hosting-detail-label">Source Profile ID</span>
                            <div class="hosting-detail-value">
                                {{ client.source_profile_id|default:"-" }}
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div>
</section>


<!-- =====================================================
     CROP IMAGE MODAL
====================================================== -->
<div class="modal fade hosting-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-secondary"
                        data-bs-dismiss="modal">
                    Cancel
                </button>

                <button type="button"
                        id="cropAndUploadBtn"
                        class="btn btn-warning">
                    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 > 3 * 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: 700,
            height: 700,
            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 : 'hosting-client-profile.jpg';
            const croppedFile = new File([blob], fileName, { type: 'image/jpeg' });

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

            fetch("{% url 'hosting_app:upload_hosting_client_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 %}