{% extends "base.html" %}
{% import "macros/workspace_ui.html" as ui %}

{% block page_title %}Provider Workspace{% endblock %}

{% block extra_head %}
{% include "skill-booking/ui-head.html" %}
{% endblock %}

{% block content %}
<div class="sb-page blocks-workspace" id="sb-provider-root"
     data-enrollment="{{ enrollment_mode | default(value=false) }}"
     data-today="{{ today | default(value='') }}"
     data-has-provider="{{ provider.id | default(value='') }}"
     data-billing-valid="{{ billing.is_valid | default(value=0) }}"
     data-provider-ready="{{ provider_ready | default(value=false) }}"
     data-billing-ready="{{ billing_ready | default(value=false) }}"
     data-currency="{{ currency_symbol | default(value='₹') }}">
    <h1>{% if enrollment_mode | default(value=false) %}Enroll as a skilled provider{% else %}Provider Workspace{% endif %}</h1>
    {{ ui::notice() }}
    {% if enrollment_mode | default(value=false) %}
    <p class="blocks-workspace-help">Save your profile, select all the skills you offer, and complete their applications together. Your applications stay pending until reviewed; enrollment does not approve your listing or activate platform billing.</p>
    {% endif %}
    <p class="sb-disclaimer">You are an independent skilled person. Customers pay you directly via UPI. This site only facilitates KYC, scheduling, and receipt tools.</p>

    {% if not logged_in %}
    <p><a class="btn btn-primary" href="{{ login_redirect_url | default(value='/auth/login') }}">Sign in</a></p>
    {% elif not can_access %}
    <p class="text-muted">Provider enrollment is invite-only. Ask an admin or an enrolled provider to invite your email.</p>
    {% else %}

    {% if provider and provider.is_disabled == 1 %}
    <div class="blocks-workspace-notice" data-tone="warning" role="status">Your listing is hidden from search. Reason: {{ provider.disable_comment | default(value='') }}</div>
    {% endif %}

    {% if not enrollment_mode | default(value=false) %}
    <div class="sb-actions sb-section">
        <button type="button" class="btn btn-primary" id="sb-whatsapp-share" {% if not provider %}disabled{% endif %}>
            <i class="fab fa-whatsapp"></i> Share profile
        </button>
    </div>

    <section class="sb-card sb-provider-access-card sb-section" aria-labelledby="sb-access-heading">
        <div>
            <h2 id="sb-access-heading">Platform access</h2>
            {% if billing and (billing.is_perpetually_free == 1 or billing.is_perpetually_free == true) %}
            <p><strong>Access is active under your free account plan. No recharge is required.</strong></p>
            {% elif billing and (billing.is_valid == 1 or billing.is_valid == true) %}
            <p><strong>Access is active through {{ billing.validity_end | default(value='—') | date_in_tz(timezone=settings.timezone) }}.</strong></p>
            <p class="blocks-workspace-help">To extend access early, choose at least 30 days on the billing page. You can add more time in 30-day blocks.</p>
            {% elif billing %}
            <p><strong>Your account needs a recharge before your profile can appear in search or manage availability.</strong></p>
            <p class="blocks-workspace-help">The recharge amount follows your assigned account plan. Choose at least 30 days and add more time in 30-day blocks.</p>
            {% else %}
            <p><strong>No billing plan is connected to this account yet.</strong></p>
            <p class="blocks-workspace-help">If you expected to see a recharge amount, contact your administrator.</p>
            {% endif %}
        </div>
        {% if billing %}<a class="btn btn-primary" href="/plugins/user-billing">{% if billing.is_perpetually_free == 1 or billing.is_perpetually_free == true %}View account billing{% else %}View balance and recharge{% endif %}</a>{% endif %}
    </section>
    {% endif %}

    <div class="sb-provider-workspace-grid {% if enrollment_mode | default(value=false) %}is-enrollment{% endif %}">
    <section class="sb-card sb-section" aria-labelledby="sb-profile-heading">
        <h2 id="sb-profile-heading">{% if enrollment_mode | default(value=false) %}1. Save your profile{% else %}Your profile{% endif %}</h2>
        {% if not enrollment_mode | default(value=false) %}<p class="blocks-workspace-help">Keep your contact and service details up to date.</p>{% endif %}
        <form id="sb-profile-form">
            {% include "skill-booking/profile-fields.html" %}
            <button type="button" class="btn" id="sb-geo">Use GPS</button>
            <button type="submit" class="btn btn-primary">Save profile</button>
        </form>
    </section>

    <section class="sb-card sb-section" aria-labelledby="sb-skills-heading">
        <h2 id="sb-skills-heading">My skills</h2>
        <p class="blocks-workspace-help">Manage each skill’s approval and availability here. Pausing a skill removes it from new searches and bookings while preserving its approval.</p>
        <div class="sb-enroll-skill-grid">
            {% for ps in provider_skills %}
            <article class="sb-enroll-skill-card" data-provider-skill="{{ ps.skill_id }}" data-enabled="{{ ps.is_enabled | default(value=1) }}">
                <h3>{{ ps.skill_label }}</h3>
                {% if ps.skill_description %}<p class="sb-enroll-skill-description">{{ ps.skill_description }}</p>{% endif %}
                <p class="sb-enroll-skill-state" role="status" data-provider-skill-status>
                    {% if ps.status == 'enrolled' %}Enrolled · KYC approved{% if ps.is_enabled == 0 %} · Paused{% elif provider_ready and billing_ready %} · Ready for gigs{% else %} · Not currently listed for gigs{% endif %}
                    {% elif ps.status == 'pending' %}KYC awaiting approval
                    {% elif ps.status == 'rejected' %}KYC needs changes{% if ps.review_comment %}: {{ ps.review_comment }}{% endif %}
                    {% else %}{{ ps.status }}{% endif %}
                </p>
                <div class="sb-enroll-skill-actions">
                    {% if ps.status == 'enrolled' %}<button type="button" class="btn btn-primary" data-provider-skill-toggle data-skill-label="{{ ps.skill_label }}">{% if ps.is_enabled == 0 %}Resume skill{% else %}Pause skill{% endif %}</button>{% endif %}
                    <a class="btn" href="/plugins/skill-booking/enroll">Edit details</a>
                </div>
            </article>
            {% else %}<p class="text-muted">No skill applications yet.</p>{% endfor %}
        </div>
        <a class="btn" href="/plugins/skill-booking/enroll">Add another skill</a>
    </section>
    </div>

    {% if not enrollment_mode | default(value=false) %}
    <section class="sb-card sb-section" aria-labelledby="sb-availability-heading">
        <h2 id="sb-availability-heading">Availability</h2>
        <p class="blocks-workspace-help">Select the dates you can take bookings. These dates apply to all your active skills.</p>
        <div id="sb-availability" data-days='{{ availability_json | default(value="[]") | safe }}'></div>
    </section>

    <div class="sb-provider-secondary-grid">
    <section class="sb-card sb-section" aria-labelledby="sb-invite-heading">
        <h2 id="sb-invite-heading">Invite a colleague</h2>
        <p class="blocks-workspace-help">Invite another skilled person to join the provider network.</p>
        <form id="sb-peer-invite" class="sb-peer-invite-form">
            <label for="sb-invite-email">Email address</label>
            <div class="sb-peer-invite-row"><input id="sb-invite-email" type="email" name="invite_email" placeholder="name@example.com" required><button type="submit" class="btn btn-primary">Send invite</button></div>
        </form>
    </section>

    <section class="sb-card sb-section" aria-labelledby="sb-bookings-heading">
        <h2 id="sb-bookings-heading">Bookings</h2>
        <p class="blocks-workspace-help">Review requests and update their progress here.</p>
        {% for b in bookings %}
        <article class="sb-booking-card" data-booking-id="{{ b.id }}">
            <div class="sb-booking-heading"><h3>{{ b.skill_label }}</h3><span class="blocks-workspace-badge">{{ b.status }}</span></div>
            <p><strong>Dates:</strong> {{ b.start_date | date_in_tz(timezone=settings.timezone) }} → {{ b.end_date | date_in_tz(timezone=settings.timezone) }}</p>
            <p><strong>Payment:</strong> {{ b.payment_status }}</p>
            {% if b.status == 'pending' %}
            <div class="sb-actions">
                <label>Charge <select class="sb-charge-type"><option value="fixed">Fixed</option><option value="hourly">Hourly</option></select></label>
                <input class="sb-rate" type="number" step="0.01" min="0" placeholder="Rate">
                <button type="button" class="btn btn-primary sb-confirm">Confirm</button>
                <button type="button" class="btn btn-danger sb-cancel">Reject</button>
            </div>
            {% elif b.status == 'confirmed' %}
            <p>Amount: {{ currency_symbol | default(value='₹') }}{{ b.agreed_amount | default(value='—') }}
               {% if b.checked_in_at %} · In: {{ b.checked_in_at | date_in_tz(timezone=settings.timezone) }}{% endif %}
               {% if b.checked_out_at %} · Out: {{ b.checked_out_at | date_in_tz(timezone=settings.timezone) }}{% endif %}
            </p>
            <div class="sb-actions">
                {% if not b.checked_in_at %}<button type="button" class="btn btn-primary sb-checkin">Check in</button>{% endif %}
                {% if b.checked_in_at and not b.checked_out_at %}<button type="button" class="btn btn-primary sb-checkout">Check out</button>{% endif %}
                {% if b.payment_status != 'paid' and b.agreed_amount %}
                <input class="sb-utr" placeholder="UTR (optional)">
                <button type="button" class="btn btn-primary sb-mark-paid">Mark paid</button>
                {% endif %}
                {% if b.receipt_number %}<a class="btn" href="/plugins/skill-booking/receipt?id={{ b.id }}">Receipt</a>{% endif %}
            </div>
            {% endif %}
        </article>
        {% else %}
        <p class="sb-empty-bookings">No bookings yet. New requests will appear here.</p>
        {% endfor %}
    </section>
    </div>
    {% endif %}
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/location-utils.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/static/js/blocks-form-values.js"></script>
<script src="/static/js/blocks-datetime.js"></script>
<script src="/static/js/blocks-multiselect.js"></script>
<script src="/plugins/skill-booking/assets/js/provider.js?v={{ asset_version | default(value='1') }}"></script>
{% endblock %}