{% extends "base.html" %}

{% block extra_head %}
{% endblock %}

{% block content %}
<div class="pl-root pl-my-listings" data-plugin="property-listings"
     data-gateway-script="{{ gateway_script_url | default(value='') }}"
     data-currency="{{ currency_symbol | default(value='₹') }}"
     data-image-provider="{{ image_provider | default(value='local') }}"
     data-is-prepaid="{% if is_prepaid_plan %}true{% else %}false{% endif %}"
     data-licensing-plan="{{ licensing_plan | default(value='unlock_leads') }}"
     data-has-dashboard-sub="{% if has_dashboard_subscription %}true{% else %}false{% endif %}"
     data-listing-per-diem="{{ listing_per_diem | default(value=1) }}"
     data-prepaid-day-options="{{ prepaid_day_options | default(value=[180, 365]) | json_encode }}">
    <div class="pl-page-header pl-btn-row pl-page-header--actions">
        <div>
            <h1>My Listings</h1>
            {% if is_prepaid_plan %}
            <p>Save your listing, then choose 180 or 365 days on the card and pay to submit for admin approval. Buyers see contact for free.</p>
            {% else %}
            <p>List property for free. New listings require admin approval.</p>
            {% endif %}
        </div>
        <button type="button" class="blocks-button blocks-button-primary" id="pl-create-listing-btn">
            <i class="fas fa-plus"></i> New listing
        </button>
    </div>

    <div id="pl-listings-list" class="pl-my-listings-grid">
        {% for item in listings %}
        <article class="pl-my-listing-card" data-id="{{ item.id }}">
            <div class="pl-my-listing-thumb">
                {% if item.thumbnail %}
                <img src="{{ item.thumbnail }}" alt="{{ item.title }}" loading="lazy" decoding="async">
                {% else %}
                <span class="pl-no-photo" aria-hidden="true"><i class="fas fa-building"></i></span>
                {% endif %}
                <span class="pl-badge pl-badge-{{ item.status }}">{{ item.status_label | default(value=item.status) }}</span>
            </div>
            <div class="pl-my-listing-body">
                <h3 class="pl-my-listing-title">{{ item.title }}</h3>
                <p class="pl-meta">{{ item.property_type | capitalize }} · {{ item.display_area | default(value="—") }}</p>
                <div class="pl-price-row pl-my-listing-prices">
                    {% if item.sale_price %}
                    <span class="pl-price-tag pl-price-sale">Sale {{ currency_symbol }}{{ item.sale_price | price }}</span>
                    {% endif %}
                    {% if item.rent_price_monthly %}
                    <span class="pl-price-tag">Rent {{ currency_symbol }}{{ item.rent_price_monthly | price }}/mo</span>
                    {% endif %}
                    {% if item.lease_price_3yr %}
                    <span class="pl-price-tag">Lease {{ currency_symbol }}{{ item.lease_price_3yr | price }}</span>
                    {% endif %}
                </div>
                <p class="pl-meta pl-my-listing-date">Submitted {{ item.created_at | date_in_tz(timezone=timezone, format="%d %b %Y") }}</p>
                {% if item.status_hint %}
                <p class="pl-meta pl-my-listing-hint">{{ item.status_hint }}</p>
                {% endif %}
                {% if item.visibility_paid_until %}
                <p class="pl-meta pl-visibility-until">
                    Visible until {{ item.visibility_paid_until | date_in_tz(timezone=timezone, format="%d %b %Y") }}
                    {% if item.visibility_expired %}<span class="pl-badge pl-badge-rejected">Expired</span>{% endif %}
                </p>
                {% endif %}
                {% if item.status == "rejected" and item.moderation_note %}
                <div class="pl-moderation-notice pl-moderation-notice--rejected" role="note">
                    <span class="pl-moderation-notice-label"><i class="fas fa-times-circle" aria-hidden="true"></i> Rejection reason</span>
                    <p class="pl-moderation-notice-text">{{ item.moderation_note }}</p>
                </div>
                {% elif item.moderation_note %}
                <div class="pl-moderation-notice pl-moderation-notice--info" role="note">
                    <span class="pl-moderation-notice-label"><i class="fas fa-info-circle" aria-hidden="true"></i> Admin note</span>
                    <p class="pl-moderation-notice-text">{{ item.moderation_note }}</p>
                </div>
                {% endif %}
            </div>
            {% if item.status == "pending_payment" and is_prepaid_plan %}
            <div class="pl-listing-pay-panel" data-listing-id="{{ item.id }}">
                <p class="pl-meta">Choose visibility period, then pay to submit for approval.</p>
                <div class="pl-prepaid-day-options pl-prepaid-day-options--card">
                    {% set day_opts = prepaid_day_options | default(value=[180, 365]) %}
                    {% for days in day_opts %}
                    <label class="pl-prepaid-day-option">
                        <input type="radio" name="pl_prepaid_days_{{ item.id }}" value="{{ days }}"{% if loop.first %} checked{% endif %}>
                        <span class="pl-prepaid-day-label" data-days="{{ days }}">{{ days }} days</span>
                    </label>
                    {% endfor %}
                </div>
                <button type="button" class="blocks-button blocks-button-sm blocks-button-primary pl-pay-publish-btn" data-id="{{ item.id }}">
                    <i class="fas fa-credit-card"></i> <span class="pl-pay-publish-label">Pay to publish</span>
                </button>
            </div>
            {% elif is_prepaid_plan and item.visibility_expired %}
            <div class="pl-listing-pay-panel pl-listing-renew-panel" data-listing-id="{{ item.id }}">
                <p class="pl-meta">Choose period to renew visibility in search.</p>
                <div class="pl-prepaid-day-options pl-prepaid-day-options--card">
                    {% set day_opts = prepaid_day_options | default(value=[180, 365]) %}
                    {% for days in day_opts %}
                    <label class="pl-prepaid-day-option">
                        <input type="radio" name="pl_prepaid_days_{{ item.id }}" value="{{ days }}"{% if loop.first %} checked{% endif %}>
                        <span class="pl-prepaid-day-label" data-days="{{ days }}">{{ days }} days</span>
                    </label>
                    {% endfor %}
                </div>
                <button type="button" class="blocks-button blocks-button-sm blocks-button-warning pl-renew-pay-btn" data-id="{{ item.id }}">
                    <i class="fas fa-credit-card"></i> <span class="pl-pay-publish-label">Pay to renew</span>
                </button>
            </div>
            {% endif %}
            <div class="pl-my-listing-actions">
                {% if item.status == "active" %}
                <a href="/plugins/property-listings/listing/{{ item.id }}" class="blocks-button blocks-button-sm blocks-button-secondary" target="_blank" rel="noopener">
                    <i class="fas fa-external-link-alt"></i> View
                </a>
                {% else %}
                <button type="button" class="blocks-button blocks-button-sm blocks-button-secondary pl-edit-btn" data-id="{{ item.id }}">Edit</button>
                {% endif %}
                <button type="button" class="blocks-button blocks-button-sm blocks-button-danger pl-archive-btn" data-id="{{ item.id }}">Archive</button>
            </div>
        </article>
        {% else %}
        <div class="pl-empty pl-my-listings-empty">
            {% if is_prepaid_plan %}
            No listings yet. Create and save your first listing, then pay to publish it.
            {% else %}
            No listings yet. Create your first one — it's free.
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <p class="pl-btn-row pl-spaced-links">
        <a href="/plugins/property-listings/owner-dashboard" class="blocks-button blocks-button-secondary">
            <i class="fas fa-id-card"></i> Owner Dashboard
        </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> View my leads
        </a>
        {% endif %}
    </p>
</div>

<div id="plListingModal" class="modal crud-modal" aria-hidden="true">
    <div class="modal-content pl-listing-modal-content" role="dialog" aria-modal="true" aria-labelledby="pl-modal-title">
        <div class="modal-header">
            <h3 id="pl-modal-title">New listing</h3>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <form id="plListingForm" class="pl-form">
            <div class="modal-body">
                <input type="hidden" name="id" id="pl-listing-id" value="">
                <div class="form-group">
                    <label for="pl-title">Title *</label>
                    <input type="text" id="pl-title" name="title" required maxlength="200" class="blocks-input">
                </div>
                <div class="form-group">
                    <label for="pl-property-type-form">Property type *</label>
                    <select id="pl-property-type-form" name="property_type" required class="blocks-input">
                        {% for pt in property_types %}
                        <option value="{{ pt }}">{{ pt | capitalize }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group pl-description-field">
                    <label for="pl-description">Description</label>
                    <textarea id="pl-description" name="description" class="wysiwyg-editor blocks-input" rows="8"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="pl-sale-price">Sale price</label>
                        <input type="number" id="pl-sale-price" name="sale_price" min="0" step="0.01" class="blocks-input">
                    </div>
                    <div class="form-group">
                        <label for="pl-rent-price">Rent / month</label>
                        <input type="number" id="pl-rent-price" name="rent_price_monthly" min="0" step="0.01" class="blocks-input">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="pl-lease-price">Lease (3 years)</label>
                        <input type="number" id="pl-lease-price" name="lease_price_3yr" min="0" step="0.01" class="blocks-input">
                    </div>
                    <div class="form-group">
                        <label for="pl-token">Token advance</label>
                        <input type="number" id="pl-token" name="token_advance" min="0" step="0.01" class="blocks-input">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="pl-area-sqft">Area (sq ft)</label>
                        <input type="number" id="pl-area-sqft" name="area_sqft" min="0" step="0.01" class="blocks-input">
                    </div>
                    <div class="form-group">
                        <label for="pl-area-sqm">Area (sq m)</label>
                        <input type="number" id="pl-area-sqm" name="area_sqm" min="0" step="0.01" class="blocks-input">
                    </div>
                    <div class="form-group">
                        <label for="pl-volume">Volume (cu m)</label>
                        <input type="number" id="pl-volume" name="volume_cum" min="0" step="0.01" class="blocks-input">
                    </div>
                </div>
                <fieldset id="pl-contact-fieldset">
                    <legend id="pl-contact-legend">{% if is_prepaid_plan %}Contact (visible to buyers on prepaid plan){% else %}Contact (hidden until buyer unlocks){% endif %}</legend>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="pl-contact-name">Name</label>
                            <input type="text" id="pl-contact-name" name="contact_name" class="blocks-input">
                        </div>
                        <div class="form-group">
                            <label for="pl-contact-phone">Phone</label>
                            <input type="tel" id="pl-contact-phone" name="contact_phone" class="blocks-input">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="pl-contact-email">Email</label>
                            <input type="email" id="pl-contact-email" name="contact_email" class="blocks-input">
                        </div>
                        <div class="form-group">
                            <label for="pl-contact-wa">WhatsApp</label>
                            <input type="tel" id="pl-contact-wa" name="contact_whatsapp" class="blocks-input">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pl-address">{% if is_prepaid_plan %}Address (visible to buyers){% else %}Address (shown after unlock){% endif %}</label>
                        <input type="text" id="pl-address" name="address_text" class="blocks-input">
                    </div>
                </fieldset>
                <div class="form-group pl-photos-field">
                    <label>Photos</label>
                    <p class="pl-photo-hint text-muted small">Uses the store image provider from Admin → Settings.</p>
                    <div id="pl-photo-url-row" class="pl-photo-url-row" hidden>
                        <input type="url" id="pl-photo-url-input"  placeholder="https://example.com/photo.jpg" class="blocks-input">
                        <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="pl-photo-url-add">Add URL</button>
                    </div>
                    <div id="pl-photo-drop-zone" class="media-drop-zone"></div>
                    <div id="pl-photo-previews" class="pl-photo-previews"></div>
                </div>
                <div class="blocks-location-input" data-blocks-location-input id="pl-create-location">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <label class="text-sm font-medium" for="pl-location-address">Listing location</label>
                        <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" data-location-detect>Use current location</button>
                    </div>
                    <input type="text" id="pl-location-address" class="blocks-input mt-2" data-location-address placeholder="Address resolved from coordinates" autocomplete="street-address">
                    <p id="pl-create-gps-status" class="pl-location-status mt-2" data-location-status role="status" aria-live="polite">Capture a location to review its address and accuracy.</p>
                    <input type="hidden" data-location-latitude><input type="hidden" data-location-longitude><input type="hidden" data-location-accuracy>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="blocks-button blocks-button-secondary cancel-btn">Cancel</button>
                <button type="submit" class="blocks-button blocks-button-primary" id="pl-save-listing-btn">{% if is_prepaid_plan %}Save listing{% else %}Submit listing{% endif %}</button>
            </div>
        </form>
    </div>
</div>
<script type="application/json" id="pl-listings-data">{{ listings | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>
<script type="application/json" id="pl-my-listings-config">{"is_prepaid":{% if is_prepaid_plan %}true{% else %}false{% endif %},"licensing_plan":"{{ licensing_plan | default(value='unlock_leads') }}","has_dashboard_sub":{% if has_dashboard_subscription %}true{% else %}false{% endif %},"listing_per_diem":{{ listing_per_diem | default(value=1) }},"prepaid_day_options":{{ prepaid_day_options | default(value=[180, 365]) | json_encode }},"currency":"{{ currency_symbol | default(value='₹') }}"}</script>
{% endblock %}

{% block scripts %}
<script src="/static/js/location-utils.js"></script>
<script src="/static/js/blocks-admin-modal.js"></script>
<script src="/plugins/property-listings/assets/js/pl-description-editor.js"></script>
<script src="/plugins/property-listings/assets/js/my-listings.js"></script>
{% endblock %}