{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}

{% block title %}My Property Care Profile{% endblock %}

{% block content %}

<style>
    /* =========================================================
       PROPERTY CARE PROFILE PAGE — PREMIUM
    ========================================================= */

    .pm-profile-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.10), transparent 28%),
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.11), transparent 32%),
            linear-gradient(180deg, #f8fafc 0%, #ecfdf5 42%, #ffffff 100%);
        padding: 4rem 0 5rem;
    }

    .pm-profile-hero {
        position: relative;
        overflow: hidden;
        border-radius: 40px;
        padding: 2.7rem 2.5rem;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.20), transparent 32%),
            linear-gradient(135deg, #052e25 0%, #0f766e 58%, #115e59 100%);
        color: #ffffff;
        box-shadow: 0 32px 72px rgba(15, 23, 42, 0.20);
        margin-bottom: 2rem;
    }

    .pm-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;
    }

    .pm-profile-hero::after {
        content: "";
        position: absolute;
        bottom: -160px;
        left: -120px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: rgba(251, 191, 36, 0.08);
        pointer-events: none;
    }

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

    .pm-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: #fef3c7;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
    }

    .pm-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;
    }

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

    .pm-profile-shell {
        border-radius: 38px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: 0 24px 58px rgba(15, 23, 42, 0.10);
        overflow: hidden;
    }

    .pm-profile-top {
        padding: 2rem;
        background:
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.06), transparent 30%),
            linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        border-bottom: 1px solid #e2e8f0;
    }

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

    .pm-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(15, 23, 42, 0.18);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .pm-profile-avatar:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 58px rgba(15, 23, 42, 0.22);
    }

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

    .pm-upload-helper {
        color: #64748b;
        font-size: 0.92rem;
        margin-top: 1rem;
        margin-bottom: 0;
    }

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

    .pm-profile-subtitle {
        color: #64748b;
        line-height: 1.7;
        margin-bottom: 1rem;
    }

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

    .pm-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;
    }

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

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

    .pm-status-pill.muted {
        background: #e2e8f0;
        color: #475569;
    }

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

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

    .pm-btn-primary {
        color: #fff;
        border: none;
        background: linear-gradient(135deg, #0f172a, #0f766e);
    }

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

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

    .pm-section-card {
        border-radius: 30px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .pm-section-header {
        padding: 1.45rem 1.6rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        background:
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.05), transparent 28%),
            #ffffff;
    }

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

    .pm-section-header h3 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: 0.35rem;
    }

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

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

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

    .pm-detail-item {
        border-radius: 22px;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
        padding: 1rem 1.05rem;
        min-height: 92px;
    }

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

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

    .pm-detail-value {
        color: #0f172a;
        font-weight: 850;
        line-height: 1.6;
        word-break: break-word;
    }

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

    .pm-access-box {
        border-radius: 22px;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
        padding: 1.15rem;
    }

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

    .pm-access-value {
        color: #0f172a;
        font-weight: 950;
        font-size: 1rem;
    }

    .pm-note-panel {
        border-radius: 26px;
        border: 1px solid #e2e8f0;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.08), transparent 28%),
            #f8fafc;
        padding: 1.25rem;
        color: #475569;
        line-height: 1.78;
    }

    .pm-system-strip {
        border-radius: 28px;
        border: 1px dashed rgba(15, 118, 110, 0.28);
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.08), transparent 30%),
            #f8fafc;
        padding: 1.3rem;
    }

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

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

    .pm-crop-modal .modal-header {
        background: linear-gradient(135deg, #052e25, #0f766e);
        color: #fff;
        border-bottom: 0;
    }

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

    .pm-crop-modal .modal-footer {
        border-top: 1px solid #e2e8f0;
    }

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

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

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

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

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

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

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

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


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

        <!-- =====================================================
             HERO
        ====================================================== -->
        <div class="pm-profile-hero">
            <div class="pm-profile-hero-inner">
                <span class="pm-profile-kicker">
                    <i class="bi bi-house-gear-fill"></i>
                    Property Care Owner Account
                </span>

                <h1>My Property Care Profile</h1>

                <p>
                    Manage your owner details, remote-property-care access, profile image,
                    login credentials, and key contact information from one secure profile center.
                </p>
            </div>
        </div>


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

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

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

                            <div class="pm-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="pm-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="pm-profile-name">
                            {{ profile.full_name }}
                        </h2>

                        <p class="pm-profile-subtitle">
                            {{ profile.get_client_type_display }}
                            · {{ profile.get_residency_status_display }}
                        </p>

                        <div class="pm-inline-statuses">
                            {% if profile.is_identity_verified %}
                                <span class="pm-status-pill success">
                                    <i class="bi bi-patch-check-fill"></i>
                                    Identity Verified
                                </span>
                            {% else %}
                                <span class="pm-status-pill warning">
                                    <i class="bi bi-shield-exclamation"></i>
                                    Identity Pending
                                </span>
                            {% endif %}

                            {% if profile.is_approved %}
                                <span class="pm-status-pill success">
                                    <i class="bi bi-check-circle-fill"></i>
                                    Approved
                                </span>
                            {% else %}
                                <span class="pm-status-pill warning">
                                    <i class="bi bi-hourglass-split"></i>
                                    Approval Pending
                                </span>
                            {% endif %}

                            {% if profile.can_submit_properties %}
                                <span class="pm-status-pill success">
                                    <i class="bi bi-house-add-fill"></i>
                                    Can Submit Properties
                                </span>
                            {% else %}
                                <span class="pm-status-pill muted">
                                    <i class="bi bi-dash-circle-fill"></i>
                                    Property Submission Limited
                                </span>
                            {% endif %}
                        </div>

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

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

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

                            <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
                               class="btn btn-outline-success">
                                <i class="bi bi-speedometer2 me-2"></i>
                                My Dashboard
                            </a>
                        </div>
                    </div>

                </div>
            </div>


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

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

                        <h3>Owner Details</h3>

                        <p>
                            Core owner, contact, and residency information associated with your Property Care account.
                        </p>
                    </div>

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

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

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

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

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

                            <div class="pm-detail-item">
                                <span class="pm-detail-label">Residency Status</span>
                                <div class="pm-detail-value">
                                    {{ profile.get_residency_status_display }}
                                </div>
                            </div>

                            <div class="pm-detail-item">
                                <span class="pm-detail-label">Current Country</span>
                                <div class="pm-detail-value">
                                    {{ profile.current_country|default:"-" }}
                                </div>
                            </div>

                            <div class="pm-detail-item">
                                <span class="pm-detail-label">Current City</span>
                                <div class="pm-detail-value">
                                    {{ profile.current_city|default:"-" }}
                                </div>
                            </div>

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

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

                            <div class="pm-detail-item">
                                <span class="pm-detail-label">Emergency Contact Name</span>
                                <div class="pm-detail-value">
                                    {{ profile.emergency_contact_name|default:"-" }}
                                </div>
                            </div>

                            <div class="pm-detail-item">
                                <span class="pm-detail-label">Emergency Contact Phone</span>
                                <div class="pm-detail-value">
                                    {{ profile.emergency_contact_phone|default:"-" }}
                                </div>
                            </div>

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


                <!-- ACCESS STATUS -->
                <div class="pm-section-card">
                    <div class="pm-section-header">
                        <span class="pm-section-kicker">
                            <i class="bi bi-shield-check"></i>
                            Property Care Access
                        </span>

                        <h3>Approval & Submission Access</h3>

                        <p>
                            Review the statuses that control your account trust, approval, and ability to add properties.
                        </p>
                    </div>

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

                            <div class="pm-access-box">
                                <strong>Identity Verified</strong>
                                <div class="pm-access-value">
                                    {% if profile.is_identity_verified %}
                                        Yes
                                    {% else %}
                                        No
                                    {% endif %}
                                </div>
                            </div>

                            <div class="pm-access-box">
                                <strong>Approved</strong>
                                <div class="pm-access-value">
                                    {% if profile.is_approved %}
                                        Yes
                                    {% else %}
                                        No
                                    {% endif %}
                                </div>
                            </div>

                            <div class="pm-access-box">
                                <strong>Can Submit Properties</strong>
                                <div class="pm-access-value">
                                    {% if profile.can_submit_properties %}
                                        Yes
                                    {% else %}
                                        No
                                    {% endif %}
                                </div>
                            </div>

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


                <!-- OWNER NOTE -->
                <div class="pm-section-card">
                    <div class="pm-section-header">
                        <span class="pm-section-kicker">
                            <i class="bi bi-journal-text"></i>
                            Owner Situation
                        </span>

                        <h3>Property Care Note</h3>

                        <p>
                            Optional context about your situation, expectations, or why remote property support is needed.
                        </p>
                    </div>

                    <div class="pm-section-body">
                        <div class="pm-note-panel">
                            {{ profile.short_note|default:"No short note has been added yet."|linebreaksbr }}
                        </div>
                    </div>
                </div>


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

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

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

                    </div>
                </div>

            </div>
        </div>

    </div>
</section>


<!-- =====================================================
     CROP IMAGE MODAL
====================================================== -->
<div class="modal fade pm-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-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_image', croppedFile);
            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

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