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

{% block title %}
    {% if is_account_extension %}
        Add Property Care Access | Home in Sri Lanka
    {% else %}
        Property Care Signup | Home in Sri Lanka
    {% endif %}
{% endblock %}


{% block extra_css %}
<style>
    /* =========================================================
       PROPERTY MANAGER SIGNUP PAGE
    ========================================================= */

    .pm-signup-page {
        position: relative;
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.14), transparent 34%),
            radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.14), transparent 36%),
            linear-gradient(135deg, #f8fafc 0%, #eef7f2 48%, #fffaf0 100%);
        overflow: hidden;
    }

    .pm-signup-page::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -120px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: rgba(15, 118, 110, 0.08);
        filter: blur(4px);
        pointer-events: none;
    }

    .pm-signup-page::after {
        content: "";
        position: absolute;
        bottom: -150px;
        left: -120px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: rgba(217, 119, 6, 0.08);
        filter: blur(4px);
        pointer-events: none;
    }

    .pm-signup-wrapper {
        position: relative;
        z-index: 2;
    }

    .pm-signup-hero-card {
        border-radius: 34px;
        border: none;
        overflow: hidden;
        background:
            linear-gradient(145deg, rgba(15, 118, 110, 0.98), rgba(18, 91, 78, 0.98));
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
        color: #ffffff;
        height: 100%;
    }

    .pm-signup-hero-inner {
        padding: 2.6rem 2.4rem;
    }

    .pm-mini-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.48rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff7d6;
        font-size: 0.86rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        margin-bottom: 1.25rem;
    }

    .pm-signup-title {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 1rem;
    }

    .pm-signup-lead {
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.04rem;
        line-height: 1.75;
        margin-bottom: 1.5rem;
    }

    .pm-value-list {
        display: grid;
        gap: 1rem;
        margin-top: 1.6rem;
    }

    .pm-value-item {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 1rem;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .pm-value-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        background: rgba(251, 191, 36, 0.18);
        color: #fde68a;
        font-size: 1.15rem;
    }

    .pm-value-item h6 {
        margin-bottom: 0.28rem;
        font-weight: 700;
        color: #ffffff;
    }

    .pm-value-item p {
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .pm-account-note {
        margin-top: 1.6rem;
        padding: 1rem 1.1rem;
        border-radius: 20px;
        background: rgba(251, 191, 36, 0.15);
        border: 1px solid rgba(251, 191, 36, 0.24);
        color: #fff8df;
        line-height: 1.6;
        font-size: 0.94rem;
    }

    .pm-form-card {
        border: none;
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.14);
        overflow: hidden;
    }

    .pm-form-header {
        padding: 2rem 2.2rem 1.45rem;
        border-bottom: 1px solid #e2e8f0;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.96));
    }

    .pm-form-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.42rem 0.85rem;
        border-radius: 999px;
        background: #ecfdf5;
        color: #0f766e;
        font-size: 0.82rem;
        font-weight: 800;
        margin-bottom: 0.9rem;
    }

    .pm-form-header h2 {
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 0.55rem;
    }

    .pm-form-header p {
        color: #475569;
        margin-bottom: 0;
        line-height: 1.7;
    }

    .pm-form-body {
        padding: 2rem 2.2rem 2.2rem;
    }

    .pm-info-alert {
        border: none;
        border-radius: 22px;
        padding: 1.1rem 1.15rem;
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        margin-bottom: 1.6rem;
    }

    .pm-info-alert.extension {
        background: #ecfdf5;
        color: #115e59;
    }

    .pm-info-alert.new-account {
        background: #fff7ed;
        color: #9a3412;
    }

    .pm-info-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.08rem;
        background: rgba(255, 255, 255, 0.7);
    }

    .pm-info-alert h6 {
        font-weight: 800;
        margin-bottom: 0.25rem;
    }

    .pm-info-alert p {
        margin-bottom: 0;
        line-height: 1.6;
        font-size: 0.94rem;
    }

    .pm-section-label {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #0f766e;
        font-weight: 800;
        font-size: 0.94rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 1.65rem 0 1rem;
    }

    .pm-section-label::after {
        content: "";
        height: 1px;
        flex: 1;
        background: linear-gradient(to right, rgba(15, 118, 110, 0.28), transparent);
    }

    .form-label {
        color: #0f172a;
        font-weight: 700;
        margin-bottom: 0.48rem;
    }

    .form-control,
    .form-select {
        border-radius: 16px;
        min-height: 52px;
        border: 1px solid #dbe4ee;
        background-color: #ffffff;
        padding: 0.78rem 1rem;
        color: #0f172a;
        box-shadow: none;
    }

    textarea.form-control {
        min-height: 125px;
        resize: vertical;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #0f766e;
        box-shadow: 0 0 0 0.22rem rgba(15, 118, 110, 0.12);
    }

    .helptext,
    .form-text {
        font-size: 0.84rem;
        color: #64748b;
        margin-top: 0.35rem;
    }

    .errorlist {
        list-style: none;
        padding-left: 0;
        margin: 0.45rem 0 0;
        color: #b91c1c;
        font-size: 0.88rem;
        font-weight: 600;
    }

    .pm-global-errors {
        border: none;
        border-radius: 20px;
        background: #fef2f2;
        color: #991b1b;
        padding: 1rem 1.1rem;
        margin-bottom: 1.4rem;
    }

    .pm-submit-wrap {
        margin-top: 2rem;
        padding-top: 1.4rem;
        border-top: 1px solid #e2e8f0;
    }

    .pm-submit-btn {
        border-radius: 999px;
        padding: 0.95rem 1.7rem;
        font-weight: 800;
        min-height: 56px;
        border: none;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #1f2937;
        box-shadow: 0 15px 30px rgba(217, 119, 6, 0.22);
        transition: all 0.2s ease;
    }

    .pm-submit-btn:hover {
        transform: translateY(-1px);
        color: #111827;
        box-shadow: 0 18px 34px rgba(217, 119, 6, 0.28);
    }

    .pm-secondary-note {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.65;
        margin-top: 1rem;
        margin-bottom: 0;
    }

    .pm-signin-box {
        margin-top: 1.3rem;
        border-radius: 22px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 1rem 1.1rem;
        color: #475569;
        font-size: 0.94rem;
        line-height: 1.6;
    }

    .pm-signin-box strong {
        color: #0f172a;
    }

    .pm-signin-box a {
        font-weight: 700;
        color: #0f766e;
        text-decoration: none;
    }

    .pm-signin-box a:hover {
        text-decoration: underline;
    }

    @media (max-width: 991.98px) {
        .pm-signup-hero-inner,
        .pm-form-header,
        .pm-form-body {
            padding-left: 1.4rem;
            padding-right: 1.4rem;
        }

        .pm-signup-hero-card,
        .pm-form-card {
            border-radius: 28px;
        }
    }
</style>
{% endblock %}


{% block content %}
<section class="pm-signup-page py-5">
    <div class="container pm-signup-wrapper">

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

            <!-- =====================================================
                 LEFT INTRO PANEL
            ====================================================== -->
            <div class="col-lg-5">
                <div class="pm-signup-hero-card">

                    <div class="pm-signup-hero-inner">

                        <span class="pm-mini-badge">
                            <i class="bi bi-house-gear-fill"></i>
                            Home in Sri Lanka
                        </span>

                        {% if is_account_extension %}
                            <h1 class="pm-signup-title">
                                Add Property Care to Your Existing Account
                            </h1>

                            <p class="pm-signup-lead">
                                You are already connected with Ensolanka. Complete this form to extend
                                your same account with access to our property maintenance and remote care services.
                            </p>
                        {% else %}
                            <h1 class="pm-signup-title">
                                Create Your Property Care Account
                            </h1>

                            <p class="pm-signup-lead">
                                Own a house, land, villa, building, or estate in Sri Lanka while living overseas
                                or away from the property? Start here and let Ensolanka help you keep it observed,
                                maintained, and cared for.
                            </p>
                        {% endif %}


                        <div class="pm-value-list">

                            <div class="pm-value-item">
                                <span class="pm-value-icon">
                                    <i class="bi bi-binoculars-fill"></i>
                                </span>
                                <div>
                                    <h6>Regular Property Oversight</h6>
                                    <p>
                                        Create a profile first, then add properties for inspections,
                                        condition reviews, and future reporting.
                                    </p>
                                </div>
                            </div>

                            <div class="pm-value-item">
                                <span class="pm-value-icon">
                                    <i class="bi bi-tools"></i>
                                </span>
                                <div>
                                    <h6>Maintenance Coordination</h6>
                                    <p>
                                        Cleaning, garden care, repairs, vacant land attention,
                                        and owner-requested support can be organized from one place.
                                    </p>
                                </div>
                            </div>

                            <div class="pm-value-item">
                                <span class="pm-value-icon">
                                    <i class="bi bi-calculator-fill"></i>
                                </span>
                                <div>
                                    <h6>Monthly Care Estimates</h6>
                                    <p>
                                        After profile setup, you will be able to submit property details
                                        and receive care-cost estimates based on your needs.
                                    </p>
                                </div>
                            </div>

                        </div>


                        {% if is_account_extension %}
                            <div class="pm-account-note">
                                <strong>Good to know:</strong>
                                This does not create another login. Your Property Care access will be added
                                to the Ensolanka account you are already using.
                            </div>
                        {% else %}
                            <div class="pm-account-note">
                                <strong>After signup:</strong>
                                your dashboard will guide you to add your first property and prepare
                                for the future maintenance calculator and care-plan request process.
                            </div>
                        {% endif %}

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


            <!-- =====================================================
                 RIGHT FORM PANEL
            ====================================================== -->
            <div class="col-lg-7">
                <div class="pm-form-card">

                    <div class="pm-form-header">
                        <span class="pm-form-kicker">
                            <i class="bi bi-person-check-fill"></i>
                            Property Owner Details
                        </span>

                        {% if is_account_extension %}
                            <h2>Add Care Access</h2>
                            <p>
                                Complete the details below to activate your property care profile
                                within your existing Ensolanka account.
                            </p>
                        {% else %}
                            <h2>Property Care Signup</h2>
                            <p>
                                Tell us about yourself first. Property registration and maintenance selection
                                will come next from your dashboard.
                            </p>
                        {% endif %}
                    </div>


                    <div class="pm-form-body">

                        <!-- Context-Sensitive Notice -->
                        {% if is_account_extension %}
                            <div class="pm-info-alert extension">
                                <span class="pm-info-icon">
                                    <i class="bi bi-link-45deg"></i>
                                </span>
                                <div>
                                    <h6>Extending your existing Ensolanka account</h6>
                                    <p>
                                        Your current login will be used. We will simply create a Property Care profile
                                        connected to this same user account.
                                    </p>
                                </div>
                            </div>
                        {% else %}
                            <div class="pm-info-alert new-account">
                                <span class="pm-info-icon">
                                    <i class="bi bi-person-plus-fill"></i>
                                </span>
                                <div>
                                    <h6>Creating a new property care account</h6>
                                    <p>
                                        After successful signup, a username and temporary password will be created
                                        and shown securely in your dashboard session.
                                    </p>
                                </div>
                            </div>
                        {% endif %}


                        <!-- Non-field Errors -->
                        {% if form.non_field_errors %}
                            <div class="pm-global-errors">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}


                        <form method="post" enctype="multipart/form-data" novalidate>
                            {% csrf_token %}

                            <!-- =====================================================
                                 SECTION 1: ACCOUNT / OWNER TYPE
                            ====================================================== -->
                            <div class="pm-section-label">
                                <i class="bi bi-person-badge-fill"></i>
                                Owner Profile
                            </div>

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label for="{{ form.client_type.id_for_label }}" class="form-label">
                                        {{ form.client_type.label }}
                                    </label>
                                    {{ form.client_type }}
                                    {{ form.client_type.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.residency_status.id_for_label }}" class="form-label">
                                        {{ form.residency_status.label }}
                                    </label>
                                    {{ form.residency_status }}
                                    {{ form.residency_status.errors }}
                                </div>

                                <div class="col-md-12">
                                    <label for="{{ form.full_name.id_for_label }}" class="form-label">
                                        {{ form.full_name.label }}
                                    </label>
                                    {{ form.full_name }}
                                    {{ form.full_name.errors }}
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 2: CONTACT DETAILS
                            ====================================================== -->
                            <div class="pm-section-label">
                                <i class="bi bi-chat-dots-fill"></i>
                                Contact Details
                            </div>

                            <div class="row g-3">

                                <div class="col-md-12">
                                    <label for="{{ form.email.id_for_label }}" class="form-label">
                                        {{ form.email.label }}
                                    </label>
                                    {{ form.email }}
                                    {{ form.email.errors }}

                                    {% if is_account_extension %}
                                        <div class="form-text">
                                            For an existing account, the final profile email will remain aligned with your signed-in user account.
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.whatsapp_number.id_for_label }}" class="form-label">
                                        {{ form.whatsapp_number.label }}
                                    </label>
                                    {{ form.whatsapp_number }}
                                    {{ form.whatsapp_number.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.phone_number.id_for_label }}" class="form-label">
                                        {{ form.phone_number.label }}
                                    </label>
                                    {{ form.phone_number }}
                                    {{ form.phone_number.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.current_country.id_for_label }}" class="form-label">
                                        {{ form.current_country.label }}
                                    </label>
                                    {{ form.current_country }}
                                    {{ form.current_country.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.current_city.id_for_label }}" class="form-label">
                                        {{ form.current_city.label }}
                                    </label>
                                    {{ form.current_city }}
                                    {{ form.current_city.errors }}
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 3: LOCAL / EMERGENCY CONTACT
                            ====================================================== -->
                            <div class="pm-section-label">
                                <i class="bi bi-telephone-plus-fill"></i>
                                Emergency Contact
                            </div>

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label for="{{ form.emergency_contact_name.id_for_label }}" class="form-label">
                                        {{ form.emergency_contact_name.label }}
                                    </label>
                                    {{ form.emergency_contact_name }}
                                    {{ form.emergency_contact_name.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.emergency_contact_phone.id_for_label }}" class="form-label">
                                        {{ form.emergency_contact_phone.label }}
                                    </label>
                                    {{ form.emergency_contact_phone }}
                                    {{ form.emergency_contact_phone.errors }}
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 4: PROFILE IMAGE / NOTE
                            ====================================================== -->
                            <div class="pm-section-label">
                                <i class="bi bi-card-image"></i>
                                Optional Details
                            </div>

                            <div class="row g-3">

                                <div class="col-md-12">
                                    <label for="{{ form.profile_image.id_for_label }}" class="form-label">
                                        {{ form.profile_image.label }}
                                    </label>
                                    {{ form.profile_image }}
                                    {{ form.profile_image.errors }}
                                    <div class="form-text">
                                        Optional. You may upload a clear profile image for easier account recognition.
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <label for="{{ form.short_note.id_for_label }}" class="form-label">
                                        {{ form.short_note.label }}
                                    </label>
                                    {{ form.short_note }}
                                    {{ form.short_note.errors }}
                                </div>

                            </div>


                            <!-- =====================================================
                                 SUBMIT
                            ====================================================== -->
                            <div class="pm-submit-wrap">

                                <button type="submit" class="btn pm-submit-btn w-100">
                                    {% if is_account_extension %}
                                        <i class="bi bi-link-45deg me-2"></i>
                                        Add Property Care Access
                                    {% else %}
                                        <i class="bi bi-person-plus-fill me-2"></i>
                                        Create Property Care Account
                                    {% endif %}
                                </button>

                                <p class="pm-secondary-note text-center">
                                    By continuing, you are preparing your owner profile for future property registration,
                                    care-plan estimation, and Ensolanka property maintenance support.
                                </p>


                                {% if not is_account_extension %}
                                    <div class="pm-signin-box text-center">
                                        <strong>Already have an Ensolanka account?</strong>
                                        Sign in first, then return here to add Property Care access
                                        under the same account.
                                    </div>
                                {% endif %}

                            </div>

                        </form>

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

        </div>
    </div>
</section>
{% endblock %}