{#
    Shared settings form fields for Wisebee setup wizard and remote settings

    Variables:
    - settings: object with current setting values (optional, for pre-filling)
    - idPrefix: string prefix for element IDs (e.g., 'wizard_' or 'rs_')
    - namePrefix: string prefix for input names (e.g., '' or 'settings[')
    - nameSuffix: string suffix for input names (e.g., '' or ']')
    - defaults: object with default values for wizard (optional)
#}

{% set idPrefix = idPrefix|default('') %}
{% set namePrefix = namePrefix|default('') %}
{% set nameSuffix = nameSuffix|default('') %}
{% set settings = settings|default({}) %}
{% set defaults = defaults|default({}) %}

{# --- Website Integration --- #}
<fieldset>
    <legend>Website Integration</legend>

    <div class="setting-row">
        <input type="hidden" name="{{ namePrefix }}website_integration{{ nameSuffix }}" value="1">
        <div class="checkbox-wrapper">
            <input type="checkbox" disabled checked>
            <div class="checkbox-content">
                <span class="checkbox-label">Integrate Wisebee in your website</span>
                <p class="setting-help">Website integration is always enabled for this setup.</p>
            </div>
        </div>
    </div>

    <div class="setting-row">
        <label class="setting-label" for="{{ idPrefix }}booking_url">Booking URL</label>
        <input type="url" class="setting-input" name="{{ namePrefix }}booking_url{{ nameSuffix }}" id="{{ idPrefix }}booking_url"
               value="{{ settings.booking_url ?? defaults.bookingUrl ?? '' }}">
        <p class="setting-help">Website URL of the page where the booking form is located</p>
    </div>

    <div class="setting-row">
        <label class="setting-label" for="{{ idPrefix }}consultation_url">Consultation URL</label>
        <input type="url" class="setting-input" name="{{ namePrefix }}consultation_url{{ nameSuffix }}" id="{{ idPrefix }}consultation_url"
               value="{{ settings.consultation_url ?? defaults.consultationUrl ?? '' }}">
        <p class="setting-help">Website URL of the page where consultations are carried out</p>
    </div>

    <div class="setting-row">
        <label class="setting-label" for="{{ idPrefix }}website_url">Website URL</label>
        <input type="url" class="setting-input" name="{{ namePrefix }}website_url{{ nameSuffix }}" id="{{ idPrefix }}website_url"
               value="{{ settings.website_url ?? defaults.websiteUrl ?? '' }}">
    </div>

    <div class="setting-row">
        <label class="setting-label" for="{{ idPrefix }}website_payment_redirect_url">Payment Redirect URL</label>
        <input type="url" class="setting-input" name="{{ namePrefix }}website_payment_redirect_url{{ nameSuffix }}" id="{{ idPrefix }}website_payment_redirect_url"
               value="{{ settings.website_payment_redirect_url ?? defaults.paymentRedirectUrl ?? '' }}">
        <p class="setting-help">Widget will redirect to this URL once a consultation is selected for payment</p>
    </div>

    <div class="setting-row">
        <label class="setting-label" for="{{ idPrefix }}api_webhook_url">Webhook URL</label>
        <input type="url" class="setting-input" name="{{ namePrefix }}api_webhook_url{{ nameSuffix }}" id="{{ idPrefix }}api_webhook_url"
               value="{{ settings.api_webhook_url ?? defaults.webhookUrl ?? '' }}">
    </div>

    <div class="setting-row">
        <input type="hidden" name="{{ namePrefix }}users_managed_on_website{{ nameSuffix }}" value="1">
        <div class="checkbox-wrapper">
            <input type="checkbox" disabled checked>
            <div class="checkbox-content">
                <span class="checkbox-label">Users managed on website</span>
                <p class="setting-help">Users and their sessions are managed on this website and synced to Wisebee.</p>
            </div>
        </div>
    </div>

    <div class="setting-row" style="border-bottom: none;">
        <input type="hidden" name="{{ namePrefix }}payments_managed_on_website{{ nameSuffix }}" value="1">
        <div class="checkbox-wrapper">
            <input type="checkbox" disabled checked>
            <div class="checkbox-content">
                <span class="checkbox-label">Payments managed on website</span>
                <p class="setting-help">Payments are handled on this website, not on Wisebee.</p>
            </div>
        </div>
    </div>
</fieldset>

{# --- Branding --- #}
<fieldset>
    <legend>Branding</legend>

    <div class="setting-row">
        <label class="setting-label" for="{{ idPrefix }}widget_primary_color">Primary Colour</label>
        <div class="color-input-wrapper">
            <input type="text" class="setting-input color-input" name="{{ namePrefix }}widget_primary_color{{ nameSuffix }}"
                   id="{{ idPrefix }}widget_primary_color"
                   value="{{ settings.widget_primary_color ?? '#12294C' }}">
            <div class="color-preview" id="{{ idPrefix }}preview_primary" style="background: {{ settings.widget_primary_color ?? '#12294C' }};"></div>
        </div>
    </div>

    <div class="setting-row">
        <label class="setting-label" for="{{ idPrefix }}widget_secondary_color">Secondary Colour</label>
        <div class="color-input-wrapper">
            <input type="text" class="setting-input color-input" name="{{ namePrefix }}widget_secondary_color{{ nameSuffix }}"
                   id="{{ idPrefix }}widget_secondary_color"
                   value="{{ settings.widget_secondary_color ?? '#F7AE06' }}">
            <div class="color-preview" id="{{ idPrefix }}preview_secondary" style="background: {{ settings.widget_secondary_color ?? '#F7AE06' }};"></div>
        </div>
    </div>

    <div class="setting-row" style="border-bottom: none;">
        <label class="setting-label">Company Logo</label>
        <div class="file-upload-wrapper">
            {% if settings.company_logo is defined and settings.company_logo is not empty %}
                <p class="setting-help">Current logo is set on Wisebee.</p>
            {% endif %}
            <div class="file-upload-row">
                <input type="file" id="{{ idPrefix }}logo_file" accept="image/*">
                <button type="button" class="btn-secondary" id="{{ idPrefix }}upload_logo_btn" onclick="wisebeeUploadLogo('{{ idPrefix }}')">Upload Logo</button>
            </div>
            <p class="setting-help">PNG, JPG or GIF (max. 800x400px)</p>
            <div id="{{ idPrefix }}logo_preview" class="logo-preview"></div>
        </div>
    </div>
</fieldset>

{# --- Specialists --- #}
<fieldset>
    <legend>Specialists</legend>

    <div class="setting-row">
        <input type="hidden" name="{{ namePrefix }}specialist_access_own_consultations{{ nameSuffix }}" value="0">
        <div class="checkbox-wrapper">
            <input type="checkbox" name="{{ namePrefix }}specialist_access_own_consultations{{ nameSuffix }}"
                   id="{{ idPrefix }}specialist_access_own" value="1"
                   {% if settings.specialist_access_own_consultations is not defined or settings.specialist_access_own_consultations == '1' %}checked{% endif %}>
            <div class="checkbox-content">
                <label class="checkbox-label" for="{{ idPrefix }}specialist_access_own">Specialist can only access own consultations</label>
                <p class="setting-help">Specialists will only see their own consultations.</p>
            </div>
        </div>
    </div>

    <div class="setting-row">
        <input type="hidden" name="{{ namePrefix }}specialist_invitation_only{{ nameSuffix }}" value="1">
        <div class="checkbox-wrapper">
            <input type="checkbox" disabled checked>
            <div class="checkbox-content">
                <span class="checkbox-label">Specialists join with invitations only</span>
            </div>
        </div>
    </div>

    <div class="setting-row">
        <input type="hidden" name="{{ namePrefix }}specialist_create_own_consultations{{ nameSuffix }}" value="0">
        <div class="checkbox-wrapper">
            <input type="checkbox" name="{{ namePrefix }}specialist_create_own_consultations{{ nameSuffix }}"
                   id="{{ idPrefix }}specialist_create_own" value="1"
                   {% if settings.specialist_create_own_consultations is not defined or settings.specialist_create_own_consultations == '1' %}checked{% endif %}>
            <div class="checkbox-content">
                <label class="checkbox-label" for="{{ idPrefix }}specialist_create_own">Specialists can create own consultations</label>
            </div>
        </div>
    </div>

    <div class="setting-row" style="border-bottom: none;">
        <input type="hidden" name="{{ namePrefix }}specialist_require_approval{{ nameSuffix }}" value="0">
        <div class="checkbox-wrapper">
            <input type="checkbox" name="{{ namePrefix }}specialist_require_approval{{ nameSuffix }}"
                   id="{{ idPrefix }}specialist_require_approval" value="1"
                   {% if settings.specialist_require_approval is not defined or settings.specialist_require_approval == '1' %}checked{% endif %}>
            <div class="checkbox-content">
                <label class="checkbox-label" for="{{ idPrefix }}specialist_require_approval">Require specialist approval before first login</label>
            </div>
        </div>
    </div>
</fieldset>

{# --- Payments & Consultations --- #}
<fieldset>
    <legend>Payments &amp; Consultations</legend>

    <div class="setting-row">
        <input type="hidden" name="{{ namePrefix }}payments_enabled{{ nameSuffix }}" value="0">
        <div class="checkbox-wrapper">
            <input type="checkbox" name="{{ namePrefix }}payments_enabled{{ nameSuffix }}"
                   id="{{ idPrefix }}payments_enabled" value="1"
                   {% if settings.payments_enabled is not defined or settings.payments_enabled == '1' %}checked{% endif %}>
            <div class="checkbox-content">
                <label class="checkbox-label" for="{{ idPrefix }}payments_enabled">Enable payments</label>
                <p class="setting-help">Leave unticked if you only offer free consultations.</p>
            </div>
        </div>
    </div>

    <div class="setting-row">
        <input type="hidden" name="{{ namePrefix }}auto_confirm_free_consultations{{ nameSuffix }}" value="0">
        <div class="checkbox-wrapper">
            <input type="checkbox" name="{{ namePrefix }}auto_confirm_free_consultations{{ nameSuffix }}"
                   id="{{ idPrefix }}auto_confirm_free" value="1"
                   {% if settings.auto_confirm_free_consultations is not defined or settings.auto_confirm_free_consultations == '1' %}checked{% endif %}>
            <div class="checkbox-content">
                <label class="checkbox-label" for="{{ idPrefix }}auto_confirm_free">Automatically confirm free consultations</label>
                <p class="setting-help">If the consultation is free, it will be automatically confirmed without website intervention.</p>
            </div>
        </div>
    </div>

    <div class="setting-row">
        <input type="hidden" name="{{ namePrefix }}in_person{{ nameSuffix }}" value="0">
        <div class="checkbox-wrapper">
            <input type="checkbox" name="{{ namePrefix }}in_person{{ nameSuffix }}"
                   id="{{ idPrefix }}in_person" value="1"
                   {% if settings.in_person is defined and settings.in_person == '1' %}checked{% endif %}>
            <div class="checkbox-content">
                <label class="checkbox-label" for="{{ idPrefix }}in_person">Enable in-person consultations</label>
            </div>
        </div>
    </div>

    <div class="setting-row" style="border-bottom: none;">
        <input type="hidden" name="{{ namePrefix }}payments_delayed_in_person{{ nameSuffix }}" value="0">
        <div class="checkbox-wrapper">
            <input type="checkbox" name="{{ namePrefix }}payments_delayed_in_person{{ nameSuffix }}"
                   id="{{ idPrefix }}payments_delayed" value="1"
                   {% if settings.payments_delayed_in_person is defined and settings.payments_delayed_in_person == '1' %}checked{% endif %}>
            <div class="checkbox-content">
                <label class="checkbox-label" for="{{ idPrefix }}payments_delayed">Payments delayed for in-person consultations</label>
                <p class="setting-help">Payments for completed in-person consultations are charged at midnight.</p>
            </div>
        </div>
    </div>
</fieldset>

{# --- Widget Options --- #}
<fieldset>
    <legend>Widget Options</legend>

    <div class="setting-row">
        <input type="hidden" name="{{ namePrefix }}widget_specialty_selection{{ nameSuffix }}" value="0">
        <div class="checkbox-wrapper">
            <input type="checkbox" name="{{ namePrefix }}widget_specialty_selection{{ nameSuffix }}"
                   id="{{ idPrefix }}widget_specialty" value="1"
                   {% if settings.widget_specialty_selection is defined and settings.widget_specialty_selection == '1' %}checked{% endif %}>
            <div class="checkbox-content">
                <label class="checkbox-label" for="{{ idPrefix }}widget_specialty">Enable Specialty selection</label>
                <p class="setting-help">Customers must select a specialty before seeing specialists.</p>
            </div>
        </div>
    </div>

    <div class="setting-row" style="border-bottom: none;">
        <input type="hidden" name="{{ namePrefix }}widget_specialist_selection{{ nameSuffix }}" value="0">
        <div class="checkbox-wrapper">
            <input type="checkbox" name="{{ namePrefix }}widget_specialist_selection{{ nameSuffix }}"
                   id="{{ idPrefix }}widget_specialist" value="1"
                   {% if settings.widget_specialist_selection is defined and settings.widget_specialist_selection == '1' %}checked{% endif %}>
            <div class="checkbox-content">
                <label class="checkbox-label" for="{{ idPrefix }}widget_specialist">Enable Specialist selection</label>
                <p class="setting-help">Allow customers to choose a specialist. Otherwise, the system allocates automatically.</p>
            </div>
        </div>
    </div>
</fieldset>
