{% extends "skill-booking/provider.html" %}
{% block page_title %}Enroll as a provider{% endblock %}
{% block content %}
<main class="sb-page blocks-workspace" id="sb-enrollment-root" data-has-provider="{{ provider.id | default(value='') }}">
    <h1>Enroll as a skilled provider</h1>
    <p class="blocks-workspace-help">Start with your personal profile. Once it is saved, choose the skills you want to offer and complete their details.</p>
    {{ ui::notice() }}
    <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 %}
    <a class="btn btn-primary" href="{{ login_redirect_url | default(value='/auth/login') }}">Sign in to enroll</a>
    {% elif can_access %}
    {% if provider and provider.is_disabled == 1 %}<p class="blocks-workspace-notice">Your listing is hidden: {{ provider.disable_comment | default(value='') }}</p>{% endif %}
    <section class="blocks-workspace-panel mb-6">
    <h2>Step 1: Your personal profile</h2>
    <p class="blocks-workspace-help">These details are shared across your skill applications. You can update your profile later.</p>
    <details id="sb-profile-details" {% if not provider %}open{% endif %}>
        <summary>{% if provider %}{{ provider.display_name }} — Edit personal profile{% else %}Create your personal profile{% endif %}</summary>
        <form id="sb-enrollment-profile-form">
            {% set show_profile_defaults = true %}
            <div id="sb-common-profile-fields" class="grid gap-4 md:grid-cols-2">{% include "skill-booking/profile-fields.html" %}</div>
            <div class="blocks-workspace-actions"><button type="submit" class="btn btn-primary">Save profile{% if not provider %} and continue{% endif %}</button></div>
        </form>
    </details>
    {% if provider %}<div class="blocks-workspace-actions"><button type="button" id="sb-continue-to-skills" class="btn btn-primary">Continue to skills</button></div>{% endif %}
    </section>
    <section id="sb-skills-step" class="blocks-workspace-panel" hidden>
    <h2 id="sb-skills-heading" tabindex="-1">Step 2: Choose your skills</h2>
    <p class="blocks-workspace-help">See what each skill involves, enroll, and manage approved skills here. Choose multiple cards to complete their details together.</p>
    <form id="sb-enrollment-form">
        <div id="sb-skill-picker" class="sb-enroll-skill-grid" aria-label="Available skills">
            {% for s in enrollment_skills | default(value=[]) %}
            <article class="sb-enroll-skill-card" data-skill-card="{{ s.id }}">
                <h3>{{ s.label }}</h3>
                <p class="sb-enroll-skill-description">{{ s.description | default(value='Complete the skill details and KYC requirements to offer this service.') }}</p>
                <p class="sb-enroll-skill-requirements" data-skill-requirements></p>
                <p class="sb-enroll-skill-state" data-skill-card-status role="status"></p>
                <div class="sb-enroll-skill-actions"><button type="button" class="btn btn-primary" data-skill-toggle="{{ s.id }}" aria-pressed="false">Enroll me</button></div>
            </article>
            {% else %}<p class="blocks-workspace-help">No skills are currently available for enrollment.</p>{% endfor %}
        </div>
        <p id="sb-skill-selection-count" class="blocks-workspace-help" aria-live="polite">No skills selected yet.</p>
        <button type="button" id="sb-start-skill-wizard" class="btn btn-primary" hidden>Continue to skill details</button>
        <div id="sb-enrollment-wizard-empty" class="blocks-workspace-panel">Use “Enroll me” on a skill card, then continue to its details.</div>
        <div id="sb-enrollment-wizard" hidden>
            <p id="sb-wizard-position" class="blocks-workspace-help" aria-live="polite"></p>
            <section id="sb-common-panel" class="blocks-workspace-panel" hidden>
                <h3>Details shared by your selected skills</h3>
                <p class="blocks-workspace-help">Enter these once and they’ll be used for each selected skill. You can provide a different answer inside each skill form.</p>
                <div id="sb-common-kyc"></div>
            </section>
            {% for s in enrollment_skills | default(value=[]) %}
                <section role="group" id="sb-skill-panel-{{ s.id }}" data-enrollment-skill="{{ s.id }}" hidden>
                    <h2>{{ s.label }}</h2>
                    <p data-skill-status class="blocks-workspace-help" role="status">Complete the details for this skill. New or changed applications are reviewed.</p>
                    <fieldset data-skill-fields disabled>
                        <div data-kyc-fields></div>
                        <div class="blocks-workspace-field"><label for="sb-rate-{{ s.id }}">Rate chart for {{ s.label }}</label><textarea id="sb-rate-{{ s.id }}" data-offer-rate rows="4" placeholder="Describe your services and prices"></textarea></div>
                        <div class="blocks-workspace-field"><label for="sb-flyer-{{ s.id }}">Flyer for {{ s.label }}</label><input id="sb-flyer-{{ s.id }}" data-offer-flyer type="hidden"><div data-sb-media-upload data-input-id="sb-flyer-{{ s.id }}" data-label="Upload flyer image"></div></div>
                        <p class="blocks-workspace-help">Leave rates or flyer blank to use your existing profile defaults. Updating KYC sends this skill for review. Rates and flyer changes alone keep its current approval.</p>
                    </fieldset>
                </section>
            {% endfor %}
            <div class="blocks-workspace-actions">
                <button type="button" id="sb-wizard-previous" class="btn">Back to skill selection</button>
                <button type="button" id="sb-wizard-next" class="btn btn-primary">Next skill</button>
            </div>
        </div>
        <div class="blocks-workspace-actions"><button type="submit" id="sb-submit-skills" class="btn btn-primary" hidden>Save selected skills</button><span id="sb-enrollment-progress" role="status"></span></div>
    </form>
    <p class="blocks-workspace-help">Removing a card from the current selection only skips editing it. After approval, manage skill availability, dates and bookings in your <a href="/plugins/skill-booking/provider">Provider Workspace</a>.</p>
    </section>
    <script type="application/json" id="sb-enrollment-data">{{ enrollment_data_json | default(value='{}') | safe }}</script>
    {% endif %}
</main>
{% 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="/static/dist/platform-ui/solid.js"></script>
<script src="/static/js/blocks-image-provider.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/static/js/media-uploader.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/plugins/skill-booking/assets/js/enrollment-model.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/plugins/skill-booking/assets/js/enrollment.js?v={{ asset_version | default(value='1') }}"></script>
{% endblock %}