{% extends "base.html" %}

{% block page_title %}My skill bookings{% endblock %}

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

{% block content %}
<div class="sb-page blocks-workspace" data-currency="{{ currency_symbol | default(value='₹') }}">
    <h1>My skill bookings</h1>
    <div class="blocks-workspace-notice" data-booking-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>
    <p class="sb-disclaimer">{{ facilitator_disclaimer | default(value='Pay the worker directly via their UPI QR. This site facilitates billing tools and hosts the worker’s receipt — it is not the merchant of record.') }}</p>

    {% if not logged_in %}
    <p><a class="btn btn-primary" href="{{ login_redirect_url | default(value='/auth/login') }}">Sign in</a></p>
    {% else %}
    {% for b in bookings %}
    <div class="sb-card sb-section" data-booking-id="{{ b.id }}">
        <h3>#{{ b.id }} — {{ b.skill_label }} · {{ b.provider_display_name }}</h3>
        <p>{{ b.start_date | date_in_tz(timezone=settings.timezone) }} → {{ b.end_date | date_in_tz(timezone=settings.timezone) }} · <span class="blocks-workspace-badge">{{ b.status }}</span> · {{ b.payment_status }}</p>
        {% if b.checked_in_at %}<p>Check-in: {{ b.checked_in_at | date_in_tz(timezone=settings.timezone) }}</p>{% endif %}
        {% if b.checked_out_at %}<p>Check-out: {{ b.checked_out_at | date_in_tz(timezone=settings.timezone) }}</p>{% endif %}
        {% if b.agreed_amount %}<p><strong>Amount due to worker:</strong> {{ currency_symbol | default(value='₹') }}{{ b.agreed_amount }}</p>{% endif %}

        {% if b.status == 'confirmed' and b.payment_status == 'unpaid' and b.agreed_amount and b.upi_vpa %}
        <div class="sb-qr-wrap"
             data-upi-uri="{{ b.upi_uri | default(value='') }}"
             data-vpa="{{ b.upi_vpa }}">
            <p>Scan to pay <strong>{{ b.upi_payee_name | default(value=b.provider_display_name) }}</strong> ({{ b.upi_vpa }})</p>
            <img class="sb-qr-img" alt="UPI QR" src="">
            <p class="text-muted"><a href="{{ b.upi_uri }}">Open UPI app</a></p>
        </div>
        {% elif b.status == 'confirmed' and b.payment_status == 'unpaid' and not b.agreed_amount %}
        <p class="text-muted">Waiting for the worker to finalize charges (check-out for hourly jobs).</p>
        {% endif %}

        {% if b.receipt_number %}
        <a class="btn" href="/plugins/skill-booking/receipt?id={{ b.id }}">Worker receipt {{ b.receipt_number }}</a>
        {% endif %}
    </div>
    {% else %}
    <p class="text-muted">No bookings yet. <a href="/plugins/skill-booking/">Find skills</a></p>
    {% endfor %}
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/skill-booking/assets/js/my_bookings.js?v={{ asset_version | default(value='1') }}"></script>
{% endblock %}