{% extends "base.html" %}

{% block extra_head %}
{% endblock %}

{% block content %}
<div class="pl-root pl-owner-dashboard" data-plugin="property-listings"
     data-gateway-script="{{ gateway_script_url | default(value='') }}"
     data-needs-enrollment="{{ needs_enrollment | json_encode }}"
     data-is-prepaid="{{ is_prepaid_plan | default(value=false) | json_encode }}"
     data-has-dashboard-sub="{{ has_dashboard_subscription | default(value=false) | json_encode }}"
     data-dashboard-price="{{ owner_dashboard_annual_price | default(value=2500) }}"
     data-dashboard-days="{{ owner_dashboard_annual_days | default(value=365) }}"
     data-licensing-plan="{{ licensing_plan | default(value='unlock_leads') }}"
     data-currency="{{ currency_symbol | default(value='₹') }}">

    <div class="pl-page-header">
        <h1>Owner Dashboard</h1>
        <p>Enroll in a licensing plan, manage your profile, and access listing tools.</p>
    </div>
    <div class="pl-owner-feedback" data-pl-owner-feedback role="status" aria-live="polite" tabindex="-1" hidden></div>

    {% if needs_enrollment %}
    <section class="pl-card pl-enroll-section" id="pl-enroll-section">
        <h2>Choose your licensing plan</h2>
        <p class="pl-meta">This choice applies to all your listings and cannot be changed later.</p>
        <div class="pl-enroll-options">
            <article class="pl-enroll-card">
                <h3>Classic — unlock &amp; leads</h3>
                <ul class="pl-enroll-features">
                    <li>List property for free</li>
                    <li>Buyers pay to unlock contact</li>
                    <li>You subscribe to <strong>My Leads</strong> to see buyers</li>
                </ul>
                <button type="button" class="blocks-button blocks-button-secondary pl-enroll-btn" data-plan="unlock_leads">
                    Select classic plan
                </button>
            </article>
            <article class="pl-enroll-card pl-enroll-card--highlight">
                <h3>Prepaid — public contact</h3>
                <ul class="pl-enroll-features">
                    <li>Annual dashboard: <strong>{{ currency_symbol }}{{ owner_dashboard_annual_price | price }}/{{ owner_dashboard_annual_days }} days</strong></li>
                    <li>Per listing: from <strong>{{ currency_symbol }}{{ listing_per_diem | default(value=1) | price }}/day</strong> (180 or 365 days)</li>
                    <li>Buyers see contact for free</li>
                </ul>
                <button type="button" class="blocks-button blocks-button-primary pl-enroll-btn" data-plan="owner_prepaid">
                    Select prepaid plan
                </button>
            </article>
        </div>
    </section>
    {% else %}

    <div class="pl-plan-badge">
        {% if is_prepaid_plan %}
        <span class="pl-badge pl-badge-active">Prepaid public-contact plan</span>
        {% else %}
        <span class="pl-badge">Classic unlock &amp; leads plan</span>
        {% endif %}
    </div>

    {% if is_prepaid_plan %}
    {% if not has_dashboard_subscription %}
    <div class="pl-subscribe-banner" id="pl-dashboard-sub-banner">
        <h2>Subscribe to your owner dashboard</h2>
        <p>Required to create listings on the prepaid plan.
            <strong>{{ currency_symbol }}{{ owner_dashboard_annual_price | price }}/{{ owner_dashboard_annual_days }} days</strong></p>
        <button type="button" class="blocks-button blocks-button-primary" id="pl-dashboard-subscribe-btn">
            <i class="fas fa-credit-card"></i> Pay annual dashboard fee
        </button>
    </div>
    {% else %}
    <div class="alert alert-success">Your dashboard subscription is active.</div>
    {% endif %}

    <section class="pl-card pl-profile-section">
        <h2>Owner profile</h2>
        <p class="pl-meta">Required for the prepaid plan. Shown to support verification.</p>
        <form id="plOwnerProfileForm" class="pl-form pl-owner-profile-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="pl-prof-name">Name *</label>
                    <input type="text" id="pl-prof-name" name="name" required maxlength="200"
                           value="{{ owner_profile.name | default(value='') }}" class="blocks-input">
                </div>
                <div class="form-group">
                    <label for="pl-prof-gender">Gender *</label>
                    <input type="text" id="pl-prof-gender" name="gender" required maxlength="50"
                           value="{{ owner_profile.gender | default(value='') }}" class="blocks-input">
                </div>
                <div class="form-group">
                    <label for="pl-prof-dob">Date of birth *</label>
                    <input type="date" id="pl-prof-dob" name="dob" required
                           value="{{ owner_profile.dob | default(value='') }}" class="blocks-input">
                </div>
            </div>
            <div class="form-group">
                <label for="pl-prof-phone">Phone number *</label>
                <input type="tel" id="pl-prof-phone" name="phone" required maxlength="30"
                       value="{{ owner_profile.phone | default(value='') }}" class="blocks-input">
            </div>
            <div class="form-group">
                <label for="pl-prof-house">House address *</label>
                <textarea id="pl-prof-house" name="house_address" rows="2" required class="blocks-input">{{ owner_profile.house_address | default(value='') }}</textarea>
            </div>
            <div class="form-group">
                <label for="pl-prof-office">Office address *</label>
                <textarea id="pl-prof-office" name="office_address" rows="2" required class="blocks-input">{{ owner_profile.office_address | default(value='') }}</textarea>
            </div>
            <div class="form-group">
                <label for="pl-prof-business">Nature of business *</label>
                <input type="text" id="pl-prof-business" name="nature_of_business" required maxlength="300"
                       value="{{ owner_profile.nature_of_business | default(value='') }}" class="blocks-input">
            </div>
            <div class="form-group">
                <label for="pl-prof-services">Service offerings *</label>
                <textarea id="pl-prof-services" name="service_offerings" rows="3" required class="blocks-input">{{ owner_profile.service_offerings | default(value='') }}</textarea>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="pl-prof-po">Post office *</label>
                    <input type="text" id="pl-prof-po" name="post_office" required maxlength="120"
                           value="{{ owner_profile.post_office | default(value='') }}" class="blocks-input">
                </div>
                <div class="form-group">
                    <label for="pl-prof-village">Village *</label>
                    <input type="text" id="pl-prof-village" name="village" required maxlength="120"
                           value="{{ owner_profile.village | default(value='') }}" class="blocks-input">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="pl-prof-panchayath">Panchayath *</label>
                    <input type="text" id="pl-prof-panchayath" name="panchayath" required maxlength="120"
                           value="{{ owner_profile.panchayath | default(value='') }}" class="blocks-input">
                </div>
                <div class="form-group">
                    <label for="pl-prof-via">Via *</label>
                    <input type="text" id="pl-prof-via" name="via" required maxlength="120"
                           value="{{ owner_profile.via | default(value='') }}" class="blocks-input">
                </div>
                <div class="form-group">
                    <label for="pl-prof-pincode">Pincode *</label>
                    <input type="text" id="pl-prof-pincode" name="pincode" required maxlength="12"
                           value="{{ owner_profile.pincode | default(value='') }}" class="blocks-input">
                </div>
            </div>
            <button type="submit" class="blocks-button blocks-button-primary">Save profile</button>
        </form>
    </section>
    {% else %}
    <section class="pl-card">
        <p>On the classic plan, use <a href="/plugins/property-listings/my-listings">My Listings</a> to add property and
            <a href="/plugins/property-listings/leads">My Leads</a> to see buyers who unlocked contact.</p>
    </section>
    {% endif %}

    <p class="pl-dashboard-links">
        <a href="/plugins/property-listings/my-listings" class="blocks-button blocks-button-secondary">
            <i class="fas fa-home"></i> My Listings
        </a>
        {% if not is_prepaid_plan %}
        <a href="/plugins/property-listings/leads" class="blocks-button blocks-button-secondary">
            <i class="fas fa-user-check"></i> My Leads
        </a>
        {% endif %}
    </p>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/property-listings/assets/js/owner-dashboard.js"></script>
{% endblock %}