{% extends "base.html" %}

{% block page_title %}{{ skill.label | default(value='Skill') }} — availability{% endblock %}

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

{% block content %}
<div class="sb-page blocks-workspace" data-sb-page="skill"
     data-skill-id="{{ skill.id }}"
     data-skill-slug="{{ skill.slug }}"
     data-today="{{ today | default(value='') }}"
     data-currency="{{ currency_symbol | default(value='₹') }}"
     data-facilitator="{{ facilitator_disclaimer | default(value='') }}">
    <div class="sb-page-header">
        <div>
            <p class="sb-back"><a href="/plugins/skill-booking/">← All skills</a></p>
            <h1>Find &amp; book {{ skill.label }}</h1>
            <p>{% if skill.description %}{{ skill.description }}{% else %}Pick dates on the calendar, confirm your location, then choose a verified provider.{% endif %}</p>
        </div>
    </div>

    <p class="sb-disclaimer">{{ facilitator_disclaimer | default(value='This site facilitates introductions and billing tools only. Job payments go directly to the worker via UPI.') }}</p>

    <div class="sb-search-bar sb-search-layout">
        <form id="sb-search-form" hx-get="/plugins/skill-booking/s/{{ skill.slug }}" hx-select="#sb-results" hx-target="#sb-results" hx-swap="outerHTML" hx-push-url="true" method="get" action="/plugins/skill-booking/s/{{ skill.slug }}">
            <input type="hidden" id="start_date" name="start_date" value="{{ start_date | default(value='') }}">
            <input type="hidden" id="end_date" name="end_date" value="{{ end_date | default(value='') }}">
            <input type="hidden" id="lat" name="lat" value="{{ lat | default(value='') }}">
            <input type="hidden" id="lng" name="lng" value="{{ lng | default(value='') }}">

            <div class="sb-search-calendar-block">
                <div class="sb-search-calendar-head">
                    <h3>Service dates</h3>
                    <p class="text-muted">Click a start date, then an end date. Click again to choose a new range.</p>
                    <p id="sb-date-range-label" class="sb-date-range-label">No dates selected</p>
                </div>
                <div id="sb-search-calendar" class="sb-calendar-grid" aria-label="Date range calendar"></div>
            </div>

            <div class="sb-search-side">
                <div class="blocks-workspace-field">
                    <label for="sb-area-input">Your location</label>
                    <div id="sb-location-display" class="sb-location-display" data-location-status role="status" aria-live="polite">Detecting location…</div>
                    <button type="button" id="sb-use-location" class="btn" data-location-detect>
                        Capture location again
                    </button>
                    <button type="button" id="sb-type-area" class="btn btn-secondary">
                        Or type your area instead
                    </button>
                    <div id="sb-area-row" hidden>
                        <input type="text" id="sb-area-input" placeholder="Area, city" autocomplete="off">
                        <button type="button" id="sb-area-go" class="btn">
                            Use this area
                        </button>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary w-full" id="sb-search-submit">
                    Search {{ skill.label }}
                </button>
            </div>
        </form>
    </div>

    <p id="sb-search-feedback" class="blocks-workspace-notice" role="status" aria-live="polite" hidden></p>
    <div id="sb-results" class="sb-provider-grid">
        {% if providers and providers | length > 0 %}
            {% for p in providers %}
            <div class="sb-provider-card" data-provider-id="{{ p.id }}">
                {% if p.flyer_url %}
                <img src="{{ p.flyer_url }}" class="sb-provider-flyer" alt="">
                {% else %}
                <div class="sb-provider-flyer-placeholder"><i class="fas fa-user"></i></div>
                {% endif %}
                <div class="sb-provider-card-body">
                    <h3>{{ p.display_name }}</h3>
                    {% if p.rate_chart %}<p class="text-muted sb-rate-preview">{{ p.rate_chart }}</p>{% endif %}
                    <div class="sb-actions">
                        <button type="button" class="btn w-full sb-view-profile"
                                data-id="{{ p.id }}" data-skill="{{ skill.id }}">View details &amp; calendar</button>
                        {% if user_id %}
                        <button type="button" class="btn btn-primary w-full sb-book-btn"
                                data-id="{{ p.id }}" data-skill="{{ skill.id }}"
                                data-name="{{ p.display_name }}">Book now</button>
                        {% else %}
                        <a class="btn btn-primary w-full" href="{{ login_redirect_url | default(value='/auth/login') }}">Login to book</a>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="sb-empty">
                <h4 class="text-muted">
                    {% if searched %}No providers match those dates{% else %}No providers listed yet{% endif %}
                </h4>
                <p class="text-muted">
                    {% if searched %}Try different dates or location.{% else %}Select dates and search — or check back later.{% endif %}
                </p>
            </div>
        {% endif %}
    </div>
</div>

<dialog id="sb-provider-modal" class="sb-modal" aria-labelledby="sb-modal-name">
        <div class="sb-modal-content">
        <div class="sb-modal-header">
            <h3 id="sb-modal-name">Provider</h3>
            <button type="button" class="sb-modal-close" id="sb-modal-close" aria-label="Close">&times;</button>
        </div>
        <div class="sb-modal-body">
            <div class="sb-grid-2">
                <div class="text-center">
                    <div id="sb-modal-flyer"></div>
                    <div id="sb-modal-contact" class="sb-contact-actions" hidden></div>
                </div>
                <div>
                    <h4>Rate chart</h4>
                    <div id="sb-modal-rate" class="sb-rate-box"></div>
                    <h4>Availability</h4>
                    <p class="text-muted text-sm mb-3">Green = available; red = blocked.</p>
                    <div id="sb-modal-calendar" class="sb-calendar-grid"></div>
                </div>
            </div>
        </div>
        </div>
</dialog>

<script type="application/json" id="sb-skill-data">{"today":{{ today | default(value="") | json_encode | safe }},"start_date":{{ start_date | default(value="") | json_encode | safe }},"end_date":{{ end_date | default(value="") | json_encode | safe }},"skill_id":{{ skill.id | default(value=0) }},"skill_slug":{{ skill.slug | default(value="") | json_encode | safe }}}</script>
{% endblock %}

{% block scripts %}
<script src="/static/js/location-utils.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/static/js/blocks-date-range-picker.js" defer></script>
<script src="/static/dist/platform-ui/htmx.js"></script>
<script src="/plugins/skill-booking/assets/js/customer.js?v={{ asset_version | default(value='1') }}" defer></script>
{% endblock %}