<?php
defined('ABSPATH') || exit;
?>
<el-main v-cloak class="book-now-adm--container book-now-adm--container-settings" id="all-page-main-container">
    <el-card shadow="never" class="bw-card">
        <el-row type="flex" class="bw-admin-head">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="bw-mlc-left">
                <h3><?php esc_html_e('Settings', 'bookwellnow-appointment-booking'); ?></h3>
            </el-col>
            <el-col class="bw-right-align" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-button type="primary" size="large" @click="bwab_saveSettings" :loading="save_loader">
                    <?php esc_html_e('Save Settings', 'bookwellnow-appointment-booking'); ?>
                </el-button>
            </el-col>
        </el-row>
    </el-card>

    <div class="container">
        <div class="bw-admin-page-container">
            <el-card shadow="never" class="bw-card">

                <el-tabs v-model="active_tab" tab-position="left" class="bw-settings-tabs">

                    <!-- General Settings -->
                    <el-tab-pane name="general">
                        <template #label>
                            <span class="bw-settings-tab-label">
                                <span class="dashicons dashicons-admin-generic" aria-hidden="true"></span>
                                <span><?php esc_html_e('General', 'bookwellnow-appointment-booking'); ?></span>
                            </span>
                        </template>

                        <div class="bw-timezone-notification">
                            <div class="bw-timezone-content">
                                <div class="bw-timezone-message">
                                <i class="el-icon-info"></i>
                                <span><?php esc_html_e('Please ensure your WordPress time zone is correctly configured for accurate booking times.', 'bookwellnow-appointment-booking'); ?></span>
                                </div>
                                <span class="bw-current-tz">
                                    <?php esc_html_e('Current WordPress Time Zone:', 'bookwellnow-appointment-booking'); ?>
                                    <strong>{{ wp_timezone }}</strong>
                                </span>
                            </div>
                            <el-button type="primary" size="small" class="bw-timezone-change-btn" @click="bwab_goToWPTimezone">
                                <?php esc_html_e('Change', 'bookwellnow-appointment-booking'); ?>
                            </el-button>
                        </div>

                        <el-form :model="settings_form.general" label-position="top">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Front Booking Form Page', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.booking_form_page_id" filterable
                                            clearable
                                            placeholder="<?php esc_attr_e('Select a page...', 'bookwellnow-appointment-booking'); ?>"
                                            style="width: 100%;">
                                            <el-option v-for="page in wp_pages_list" :key="'booking-' + page.id"
                                                :label="page.title" :value="page.id"></el-option>
                                        </el-select>
                                        <div class="bw-helper-text"><?php esc_html_e('WordPress page that contains the booking form shortcode.', 'bookwellnow-appointment-booking'); ?>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('My Booking Page', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.customer_panel_page_id" filterable
                                            clearable
                                            placeholder="<?php esc_attr_e('Select a page...', 'bookwellnow-appointment-booking'); ?>"
                                            style="width: 100%;">
                                            <el-option v-for="page in wp_pages_list" :key="'panel-' + page.id"
                                                :label="page.title" :value="page.id"></el-option>
                                        </el-select>
                                        <div class="bw-helper-text"><?php esc_html_e('WordPress page that contains the customer panel shortcode.', 'bookwellnow-appointment-booking'); ?>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Company Name', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.general.company_name"
                                            placeholder="<?php esc_html_e('Enter your company name...', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                        <div class="bw-helper-text"><?php esc_html_e('This will be used as a placeholder in notifications.', 'bookwellnow-appointment-booking'); ?>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Week Starts On', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.week_starts_on" style="width: 100%;">
                                            <el-option label="<?php echo esc_attr__('Sunday', 'bookwellnow-appointment-booking'); ?>" value="0"></el-option>
                                            <el-option label="<?php echo esc_attr__('Monday', 'bookwellnow-appointment-booking'); ?>" value="1"></el-option>
                                            <el-option label="<?php echo esc_attr__('Tuesday', 'bookwellnow-appointment-booking'); ?>" value="2"></el-option>
                                            <el-option label="<?php echo esc_attr__('Wednesday', 'bookwellnow-appointment-booking'); ?>" value="3"></el-option>
                                            <el-option label="<?php echo esc_attr__('Thursday', 'bookwellnow-appointment-booking'); ?>" value="4"></el-option>
                                            <el-option label="<?php echo esc_attr__('Friday', 'bookwellnow-appointment-booking'); ?>" value="5"></el-option>
                                            <el-option label="<?php echo esc_attr__('Saturday', 'bookwellnow-appointment-booking'); ?>" value="6"></el-option>
                                        </el-select>
                                        <div class="bw-helper-text"><?php esc_html_e('Controls the first day of the week in booking and admin calendars.', 'bookwellnow-appointment-booking'); ?></div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Company Phone Number', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.general.company_phone"
                                            placeholder="<?php esc_html_e('Enter your company phone number...', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Company Address', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input type="textarea" v-model="settings_form.general.company_address"
                                            placeholder="<?php esc_html_e('Enter your company address...', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Default Date Format', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.date_format" style="width: 100%;">
                                            <el-option label="F j, Y (April 20, 2026)" value="F j, Y"></el-option>
                                            <el-option label="Y-m-d (2026-04-20)" value="Y-m-d"></el-option>
                                            <el-option label="m/d/Y (04/20/2026)" value="m/d/Y"></el-option>
                                            <el-option label="d/m/Y (20/04/2026)" value="d/m/Y"></el-option>
                                            <el-option label="d.m.Y (20.04.2026)" value="d.m.Y"></el-option>
                                            <el-option label="d-m-Y (20-04-2026)" value="d-m-Y"></el-option>
                                        </el-select>
                                        <div class="bw-helper-text"><?php esc_html_e('Format accepted by PHP date() function.', 'bookwellnow-appointment-booking'); ?></div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Default Time Format', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.time_format" style="width: 100%;">
                                            <el-option label="h:i a (12 hour - 01:30 pm)" value="h:i a"></el-option>
                                            <el-option label="g:i a (12 hour no-zero - 1:30 pm)"
                                                value="g:i a"></el-option>
                                            <el-option label="h:i A (12 hour - 01:30 PM)" value="h:i A"></el-option>
                                            <el-option label="g:i A (12 hour no-zero - 1:30 PM)"
                                                value="g:i A"></el-option>
                                            <el-option label="H:i (24 hour - 13:30)" value="H:i"></el-option>
                                        </el-select>
                                        <div class="bw-helper-text"><?php esc_html_e('Format accepted by PHP date() function.', 'bookwellnow-appointment-booking'); ?></div>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Default Appointment Status', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.default_status" style="width: 100%;">
                                            <el-option label="<?php echo esc_attr__('Pending', 'bookwellnow-appointment-booking'); ?>" value="pending"></el-option>
                                            <el-option label="<?php echo esc_attr__('Approved', 'bookwellnow-appointment-booking'); ?>" value="approved"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Default Time Slot Step', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.slot_step" style="width: 100%;">
                                            <el-option label="<?php echo esc_attr__('5 min', 'bookwellnow-appointment-booking'); ?>" value="5"></el-option>
                                            <el-option label="<?php echo esc_attr__('10 min', 'bookwellnow-appointment-booking'); ?>" value="10"></el-option>
                                            <el-option label="<?php echo esc_attr__('15 min', 'bookwellnow-appointment-booking'); ?>" value="15"></el-option>
                                            <el-option label="<?php echo esc_attr__('30 min', 'bookwellnow-appointment-booking'); ?>" value="30"></el-option>
                                            <el-option label="<?php echo esc_attr__('60 min (1 hour)', 'bookwellnow-appointment-booking'); ?>" value="60"></el-option>
                                            <el-option label="<?php echo esc_attr__('120 min (2 hours)', 'bookwellnow-appointment-booking'); ?>" value="120"></el-option>
                                            <el-option label="<?php echo esc_attr__('240 min (4 hours)', 'bookwellnow-appointment-booking'); ?>" value="240"></el-option>
                                            <el-option label="<?php echo esc_attr__('As Per Service Duration', 'bookwellnow-appointment-booking'); ?>"
                                                value="service_duration"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Default Payment Status', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.default_payment_status"
                                            style="width: 100%;">
                                            <el-option label="<?php echo esc_attr__('Pending', 'bookwellnow-appointment-booking'); ?>" value="pending"></el-option>
                                            <el-option label="<?php echo esc_attr__('Received', 'bookwellnow-appointment-booking'); ?>" value="received"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Currency', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.currency_code" style="width: 100%;"
                                            filterable placeholder="Select Currency">
                                            <el-option v-for="(currency, code) in currency_list" :key="code"
                                                :label="currency.name + ' (' + currency.symbol + ')'" :value="code">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">

                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Currency Position', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.currency_position"
                                            style="width: 100%;">
                                            <el-option label="Before (e.g. $10)" value="before"></el-option>
                                            <el-option label="After (e.g. 10$)" value="after"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Default Country / Phone Code', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.general.default_country"
                                            style="width: 100%;" filterable
                                            @change="bwab_onDefaultCountryChange"
                                            placeholder="<?php esc_attr_e('Select country', 'bookwellnow-appointment-booking'); ?>">
                                            <el-option v-for="item in phone_code_list" :key="item.iso"
                                                :label="item.name + ' (' + item.code + ')'"
                                                :value="item.iso.toLowerCase()">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                        </el-form>
                    </el-tab-pane>

                    <!-- Notification Settings -->
                    <el-tab-pane name="notifications">
                        <template #label>
                            <span class="bw-settings-tab-label">
                                <span class="dashicons dashicons-email-alt" aria-hidden="true"></span>
                                <span><?php esc_html_e('Email', 'bookwellnow-appointment-booking'); ?></span>
                            </span>
                        </template>
                        <el-form :model="settings_form.notifications" label-position="top">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Admin Email', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.notifications.admin_email"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Sender Name (From Name)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.notifications.from_name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Sender Email (From Email)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.notifications.from_email"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-divider></el-divider>

                            <el-form-item
                                label="<?php esc_html_e('Email Sending Method', 'bookwellnow-appointment-booking'); ?>">
                                <el-radio-group v-model="settings_form.notifications.method">
                                    <el-radio label="wp_mail">WordPress Default (wp_mail)</el-radio>
                                    <el-radio label="smtp">SMTP</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <div v-if="settings_form.notifications.method == 'smtp'" class="bw-smtp-settings">
                                <h3>SMTP Configuration</h3>
                                <el-row :gutter="20">
                                    <el-col :span="16">
                                        <el-form-item label="SMTP Host">
                                            <el-input v-model="settings_form.notifications.smtp_host"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="SMTP Port">
                                            <el-input v-model="settings_form.notifications.smtp_port"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="SMTP Username">
                                            <el-input v-model="settings_form.notifications.smtp_username"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="SMTP Password">
                                            <el-input v-model="settings_form.notifications.smtp_password"
                                                show-password></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="SMTP Secure">
                                            <el-select v-model="settings_form.notifications.smtp_secure"
                                                style="width: 100%;">
                                                <el-option label="TLS" value="tls"></el-option>
                                                <el-option label="SSL" value="ssl"></el-option>
                                                <el-option label="None" value="none"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>

                            <el-divider></el-divider>
                            <div class="bw-test-email-section">
                                <h3><?php esc_html_e('Test Email Settings', 'bookwellnow-appointment-booking'); ?></h3>
                                <p class="bw-helper-text">
                                    <?php esc_html_e('Test your email configuration by sending a test email to a specific address.', 'bookwellnow-appointment-booking'); ?>
                                </p>
                                <el-row :gutter="20">
                                    <el-col :span="16">
                                        <el-form-item
                                            label="<?php esc_html_e('Test Email Address', 'bookwellnow-appointment-booking'); ?>">
                                            <el-input v-model="test_email_address"
                                                placeholder="<?php esc_attr_e('Enter email address...', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="&nbsp;">
                                            <el-button type="warning" @click="bwab_sendTestEmail"
                                                :loading="test_email_loader" style="width: 100%;">
                                                <?php esc_html_e('Send Test Email', 'bookwellnow-appointment-booking'); ?>
                                            </el-button>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>

                        </el-form>
                    </el-tab-pane>

                    <!-- Payment Gateways -->
                    <el-tab-pane name="payment">
                        <template #label>
                            <span class="bw-settings-tab-label">
                                <span class="dashicons dashicons-money-alt" aria-hidden="true"></span>
                                <span><?php esc_html_e('Payment Gateways', 'bookwellnow-appointment-booking'); ?></span>
                            </span>
                        </template>
                        <el-form :model="settings_form.payment" label-position="top" class="bw-payment-gateways-form">
                            <div class="bw-payment-gateway-box">
                                <el-row type="flex" align="middle" class="bw-settings-toggle-row">
                                    <el-col :span="16">
                                        <strong><?php esc_html_e('Offline Payment', 'bookwellnow-appointment-booking'); ?></strong>
                                    </el-col>
                                    <el-col :span="8" class="bw-right-align">
                                <el-switch v-model="settings_form.payment.enable_offline"
                                    active-value="yes" inactive-value="no">
                                </el-switch>
                                    </el-col>
                                </el-row>
                            <el-form-item v-if="settings_form.payment.enable_offline == 'yes'"
                                label="<?php esc_html_e('Label', 'bookwellnow-appointment-booking'); ?>">
                                <el-input v-model="settings_form.payment.offline_label"></el-input>
                            </el-form-item>
                            </div>

                            <div class="bw-payment-gateway-box">
                                <el-row type="flex" align="middle" class="bw-settings-toggle-row">
                                    <el-col :span="16">
                                        <strong><?php esc_html_e('PayPal', 'bookwellnow-appointment-booking'); ?></strong>
                                    </el-col>
                                    <el-col :span="8" class="bw-right-align">
                                        <el-switch v-model="settings_form.payment.enable_paypal"
                                            active-value="yes" inactive-value="no">
                                        </el-switch>
                                    </el-col>
                                </el-row>

                                <el-alert
                                    v-if="!bwab_isPayPalCurrencySupported()"
                                    class="bw-paypal-currency-alert"
                                    type="warning"
                                    :closable="false"
                                    show-icon
                                    :title="'<?php echo esc_js(__('This currency is not supported by PayPal.', 'bookwellnow-appointment-booking')); ?>'"
                                    :description="'<?php echo esc_js(__('PayPal will not appear on the frontend booking form until you select a supported currency in General settings.', 'bookwellnow-appointment-booking')); ?>'">
                                </el-alert>

                                <template v-if="settings_form.payment.enable_paypal == 'yes'">
                                    <el-form-item
                                        label="<?php esc_html_e('Label', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.payment.paypal_label"></el-input>
                                    </el-form-item>

                                    <el-form-item
                                        label="<?php esc_html_e('Active mode', 'bookwellnow-appointment-booking'); ?>">
                                        <el-radio-group v-model="settings_form.payment.paypal_active_mode">
                                            <el-radio label="sandbox"><?php esc_html_e('Sandbox', 'bookwellnow-appointment-booking'); ?></el-radio>
                                            <el-radio label="live"><?php esc_html_e('Live', 'bookwellnow-appointment-booking'); ?></el-radio>
                                        </el-radio-group>
                                    </el-form-item>

                                    <p v-if="settings_form.general.currency_code === 'INR'" class="bw-helper-text">
                                        <?php esc_html_e('INR requires a PayPal India business account. Most sandbox accounts only support USD/EUR testing — use USD currency for sandbox, or Live mode with India credentials for INR.', 'bookwellnow-appointment-booking'); ?>
                                    </p>

                                    <template v-if="settings_form.payment.paypal_active_mode === 'sandbox'">
                                        <el-form-item
                                            label="<?php esc_html_e('Sandbox Client ID', 'bookwellnow-appointment-booking'); ?>">
                                            <el-input v-model="settings_form.payment.paypal_sandbox_client_id"></el-input>
                                        </el-form-item>
                                        <el-form-item
                                            label="<?php esc_html_e('Sandbox Client Secret', 'bookwellnow-appointment-booking'); ?>">
                                            <el-input v-model="settings_form.payment.paypal_sandbox_client_secret"
                                                type="password" show-password></el-input>
                                        </el-form-item>
                                    </template>

                                    <template v-if="settings_form.payment.paypal_active_mode === 'live'">
                                        <el-form-item
                                            label="<?php esc_html_e('Live Client ID', 'bookwellnow-appointment-booking'); ?>">
                                            <el-input v-model="settings_form.payment.paypal_live_client_id"></el-input>
                                        </el-form-item>
                                        <el-form-item
                                            label="<?php esc_html_e('Live Client Secret', 'bookwellnow-appointment-booking'); ?>">
                                            <el-input v-model="settings_form.payment.paypal_live_client_secret"
                                                type="password" show-password></el-input>
                                        </el-form-item>
                                    </template>
                                </template>
                            </div>

                            <?php do_action('bookwellab_settings_payment_tab_fields'); ?>

                        </el-form>
                    </el-tab-pane>

                    <!-- Booking Form Appearance -->
                    <el-tab-pane name="appearance">
                        <template #label>
                            <span class="bw-settings-tab-label">
                                <span class="dashicons dashicons-art" aria-hidden="true"></span>
                                <span><?php esc_html_e('Booking Form Appearance', 'bookwellnow-appointment-booking'); ?></span>
                            </span>
                        </template>
                        <el-form :model="settings_form.appearance" label-position="top">
                            <p class="bw-helper-text"><?php esc_html_e('Customize the visual style of the frontend booking wizard.', 'bookwellnow-appointment-booking'); ?></p>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Form Type', 'bookwellnow-appointment-booking'); ?></h4>
                            <p class="bw-helper-text"><?php esc_html_e('Choose how the booking form is displayed on your site.', 'bookwellnow-appointment-booking'); ?></p>
                            <div class="bw-appearance-theme-grid bw-appearance-form-type-grid">
                                <div
                                    class="bw-appearance-theme-card bw-appearance-form-type-card"
                                    :class="{ 'is-active': settings_form.appearance.form_type === 'wizard' }"
                                    role="button"
                                    tabindex="0"
                                    @click="settings_form.appearance.form_type = 'wizard'"
                                    @keydown.enter.prevent="settings_form.appearance.form_type = 'wizard'"
                                    @keydown.space.prevent="settings_form.appearance.form_type = 'wizard'">
                                    <div
                                        class="bw-appearance-theme-preview bw-appearance-form-preview bw-appearance-form-preview--wizard"
                                        :style="{
                                            '--bw-theme-primary': settings_form.appearance.primary_color || '#044343',
                                            '--bw-theme-panel': settings_form.appearance.panel_bg_color || '#F8F4F8',
                                            '--bw-theme-sidebar': settings_form.appearance.primary_color || '#044343',
                                            '--bw-theme-accent': settings_form.appearance.content_text_color || '#64748b'
                                        }">
                                        <div class="bw-appearance-theme-preview-sidebar">
                                            <span></span><span></span><span></span>
                                        </div>
                                        <div class="bw-appearance-theme-preview-main">
                                            <span class="bw-appearance-theme-preview-title"></span>
                                            <span class="bw-appearance-theme-preview-line"></span>
                                            <span class="bw-appearance-theme-preview-line short"></span>
                                            <span class="bw-appearance-theme-preview-btn"></span>
                                        </div>
                                    </div>
                                    <div class="bw-appearance-theme-name"><?php esc_html_e('Small Booking Wizard', 'bookwellnow-appointment-booking'); ?></div>
                                    <el-button
                                        size="small"
                                        type="primary"
                                        class="bw-appearance-theme-apply"
                                        :disabled="settings_form.appearance.form_type === 'wizard'"
                                        @click.stop="settings_form.appearance.form_type = 'wizard'">
                                        {{ settings_form.appearance.form_type === 'wizard' ? '<?php echo esc_js(__('Selected', 'bookwellnow-appointment-booking')); ?>' : '<?php echo esc_js(__('Select', 'bookwellnow-appointment-booking')); ?>' }}
                                    </el-button>
                                </div>

                                <div
                                    class="bw-appearance-theme-card bw-appearance-form-type-card"
                                    :class="{ 'is-active': settings_form.appearance.form_type === 'full_page_list' }"
                                    role="button"
                                    tabindex="0"
                                    @click="settings_form.appearance.form_type = 'full_page_list'"
                                    @keydown.enter.prevent="settings_form.appearance.form_type = 'full_page_list'"
                                    @keydown.space.prevent="settings_form.appearance.form_type = 'full_page_list'">
                                    <div
                                        class="bw-appearance-theme-preview bw-appearance-form-preview bw-appearance-form-preview--catalog"
                                        :style="{
                                            '--bw-theme-primary': settings_form.appearance.primary_color || '#044343',
                                            '--bw-theme-panel': settings_form.appearance.panel_bg_color || '#F8F4F8',
                                            '--bw-theme-sidebar': settings_form.appearance.primary_color || '#044343',
                                            '--bw-theme-accent': settings_form.appearance.content_text_color || '#64748b'
                                        }">
                                        <div class="bw-appearance-form-preview-chips">
                                            <span class="is-active"></span>
                                            <span></span>
                                        </div>
                                        <div class="bw-appearance-form-preview-cards">
                                            <div class="bw-appearance-form-preview-card">
                                                <span class="bw-appearance-form-preview-card-img"></span>
                                                <span class="bw-appearance-form-preview-card-title"></span>
                                                <span class="bw-appearance-form-preview-card-meta"></span>
                                                <span class="bw-appearance-form-preview-card-btn"></span>
                                            </div>
                                            <div class="bw-appearance-form-preview-card">
                                                <span class="bw-appearance-form-preview-card-img"></span>
                                                <span class="bw-appearance-form-preview-card-title"></span>
                                                <span class="bw-appearance-form-preview-card-meta"></span>
                                                <span class="bw-appearance-form-preview-card-btn"></span>
                                            </div>
                                            <div class="bw-appearance-form-preview-card">
                                                <span class="bw-appearance-form-preview-card-img"></span>
                                                <span class="bw-appearance-form-preview-card-title"></span>
                                                <span class="bw-appearance-form-preview-card-meta"></span>
                                                <span class="bw-appearance-form-preview-card-btn"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bw-appearance-theme-name"><?php esc_html_e('Service List with Popup', 'bookwellnow-appointment-booking'); ?></div>
                                    <el-button
                                        size="small"
                                        type="primary"
                                        class="bw-appearance-theme-apply"
                                        :disabled="settings_form.appearance.form_type === 'full_page_list'"
                                        @click.stop="settings_form.appearance.form_type = 'full_page_list'">
                                        {{ settings_form.appearance.form_type === 'full_page_list' ? '<?php echo esc_js(__('Selected', 'bookwellnow-appointment-booking')); ?>' : '<?php echo esc_js(__('Select', 'bookwellnow-appointment-booking')); ?>' }}
                                    </el-button>
                                </div>
                            </div>
                            <p class="bw-helper-text" v-if="settings_form.appearance.form_type === 'wizard'">
                                <?php esc_html_e('Shows the step-by-step booking wizard (service, staff, date & time, details, summary).', 'bookwellnow-appointment-booking'); ?>
                            </p>
                            <p class="bw-helper-text" v-else>
                                <?php esc_html_e('Shows a full-page service grid. Clicking a service opens the booking wizard in a popup with that service selected.', 'bookwellnow-appointment-booking'); ?>
                            </p>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Customized Form Option', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Hide Description (Default Off)', 'bookwellnow-appointment-booking'); ?>">
                                        <div style="width: 100%;">
                                            <el-switch
                                                v-model="settings_form.appearance.hide_description"
                                                :active-value="true"
                                                :inactive-value="false"></el-switch>
                                            <div class="bw-helper-text">
                                                <?php esc_html_e('If ON, service descriptions are hidden on the frontend booking form.', 'bookwellnow-appointment-booking'); ?>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Show Staff Position (Default Off)', 'bookwellnow-appointment-booking'); ?>">
                                        <div style="width: 100%;">
                                            <el-switch
                                                v-model="settings_form.appearance.show_staff_designation"
                                                :active-value="true"
                                                :inactive-value="false"></el-switch>
                                            <div class="bw-helper-text">
                                                <?php esc_html_e('If ON, staff position is shown under the staff name on the booking form.', 'bookwellnow-appointment-booking'); ?>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Hide Categories (Default Off)', 'bookwellnow-appointment-booking'); ?>">
                                        <div style="width: 100%;">
                                            <el-switch
                                                v-model="settings_form.general.hide_categories"
                                                :active-value="true"
                                                :inactive-value="false"></el-switch>
                                            <div class="bw-helper-text">
                                                <?php esc_html_e('If ON, category selection will be hidden on the frontend booking page.', 'bookwellnow-appointment-booking'); ?>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Hide Staff Selection Step', 'bookwellnow-appointment-booking'); ?>">
                                        <div style="width: 100%;">
                                            <el-switch
                                                v-model="settings_form.general.hide_staff_step"
                                                :active-value="true"
                                                :inactive-value="false"></el-switch>
                                            <div class="bw-helper-text">
                                                <?php esc_html_e('If ON, customers will skip staff selection and be assigned a staff member automatically.', 'bookwellnow-appointment-booking'); ?>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Select Theme', 'bookwellnow-appointment-booking'); ?></h4>

                            <div class="bw-appearance-theme-grid">
                                <div
                                    v-for="theme in (appearance_themes || []).concat(appearance_extra_themes || [])"
                                    :key="theme.id"
                                    class="bw-appearance-theme-card"
                                    :class="{ 'is-active': settings_form.appearance.appearance_theme === theme.id }">
                                    <div
                                        class="bw-appearance-theme-preview"
                                        :style="{
                                            '--bw-theme-primary': theme.preview.primary,
                                            '--bw-theme-panel': theme.preview.panel,
                                            '--bw-theme-sidebar': theme.preview.sidebar,
                                            '--bw-theme-accent': theme.preview.accent
                                        }">
                                        <div class="bw-appearance-theme-preview-sidebar">
                                            <span></span><span></span><span></span>
                                        </div>
                                        <div class="bw-appearance-theme-preview-main">
                                            <span class="bw-appearance-theme-preview-title"></span>
                                            <span class="bw-appearance-theme-preview-line"></span>
                                            <span class="bw-appearance-theme-preview-line short"></span>
                                            <span class="bw-appearance-theme-preview-btn"></span>
                                        </div>
                                    </div>
                                    <div class="bw-appearance-theme-name">{{ theme.label }}</div>
                                    <el-button
                                        size="small"
                                        type="primary"
                                        class="bw-appearance-theme-apply"
                                        :disabled="settings_form.appearance.appearance_theme === theme.id || apply_appearance_theme_loader"
                                        :loading="apply_appearance_theme_loader && applying_appearance_theme_id === theme.id"
                                        @click="bwab_applyAppearanceTheme(theme.id)">
                                        {{ settings_form.appearance.appearance_theme === theme.id ? '<?php echo esc_js(__('Applied', 'bookwellnow-appointment-booking')); ?>' : '<?php echo esc_js(__('Apply', 'bookwellnow-appointment-booking')); ?>' }}
                                    </el-button>
                                </div>
                            </div>

                            <el-collapse v-model="appearance_settings_expanded" class="bw-appearance-settings-collapse">
                                <el-collapse-item name="customize" title="<?php esc_attr_e('Customize Appearance Settings', 'bookwellnow-appointment-booking'); ?>">
                            <div style="margin-bottom: 18px;">
                                <el-button type="default" @click="bwab_resetAppearanceDefaults"
                                    :loading="reset_appearance_loader">
                                    <?php esc_html_e('Reset Default Color', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                            </div>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Main Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.primary_color"></el-color-picker>
                                        <div class="bw-helper-text">Used for buttons, icons, and active states.</div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Google Font Family', 'bookwellnow-appointment-booking'); ?>">
                                        <el-select v-model="settings_form.appearance.font_family" filterable
                                            placeholder="Select Font Family" style="width: 100%;">
                                            <el-option label="Default (Inherit)" value=""></el-option>
                                            <el-option v-for="font in google_fonts" :key="font" :label="font"
                                                :value="font"></el-option>
                                        </el-select>
                                        <div class="bw-helper-text">
                                            <?php esc_html_e('Applies to the frontend booking form only.', 'bookwellnow-appointment-booking'); ?>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Title Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.title_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Detail Text Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.detail_text_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>



                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Title Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.title_font_size" :min="12"
                                            :max="40" show-input></el-slider>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Detail Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.detail_text_size" :min="10"
                                            :max="30" show-input></el-slider>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item
                                        label="<?php esc_html_e('Section Title Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.section_title_size" :min="16"
                                            :max="48" show-input></el-slider>
                                        <div class="bw-helper-text">Applied to the main title at the top of each booking
                                            step (e.g., "Service", "Select Date & Time").</div>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Sidebar Title Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.sidebar_title_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Sidebar Text Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.sidebar_text_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Sidebar Title Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.sidebar_title_size" :min="10"
                                            :max="30" show-input></el-slider>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Sidebar Text Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.sidebar_text_size" :min="8"
                                            :max="24" show-input></el-slider>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Category Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.category_title_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Category Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.category_title_size" :min="10"
                                            :max="30" show-input></el-slider>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Price Badge Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.price_badge_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Price Badge Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.price_badge_size" :min="10"
                                            :max="30" show-input></el-slider>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Button Text Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.button_text_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Button Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.button_font_size" :min="12"
                                            :max="40" show-input></el-slider>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Section Subtitle Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.subtitle_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Section Subtitle Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.subtitle_size" :min="10" :max="30"
                                            show-input></el-slider>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Content Text Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.content_text_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Content Text Font Size (px)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-slider v-model="settings_form.appearance.content_text_size" :min="10"
                                            :max="30" show-input></el-slider>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Right Panel Background Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.panel_bg_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="<?php esc_html_e('Border Color', 'bookwellnow-appointment-booking'); ?>">
                                        <el-color-picker
                                            :teleported="true"
                                            popper-class="bw-admin-el-popper"
                                            v-model="settings_form.appearance.border_color"></el-color-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form>
                    </el-tab-pane>

                    <!-- Booking Form Labels -->
                    <el-tab-pane name="labels">
                        <template #label>
                            <span class="bw-settings-tab-label">
                                <span class="dashicons dashicons-tag" aria-hidden="true"></span>
                                <span><?php esc_html_e('Booking Form Labels', 'bookwellnow-appointment-booking'); ?></span>
                            </span>
                        </template>
                        <el-form :model="settings_form.labels" label-position="top">
                            <p class="bw-helper-text"><?php esc_html_e('Customize the text displayed on the frontend booking wizard.', 'bookwellnow-appointment-booking'); ?></p>
                            <p class="bw-helper-text">
                                <?php
                                printf(
                                    /* translators: %s: Form Fields admin page link */
                                    esc_html__('Customer detail field labels, placeholders, and error messages are managed under %s.', 'bookwellnow-appointment-booking'),
                                    '<a href="' . esc_url(admin_url('admin.php?page=bookwell-form-fields')) . '">' . esc_html__('Form Fields', 'bookwellnow-appointment-booking') . '</a>'
                                );
                                ?>
                            </p>

                            <el-row :gutter="20">
                                <el-col :span="12" v-for="(value, key) in settings_form.labels" :key="key">
                                    <el-form-item :label="label_field_labels[key] || key.replace(/_/g, ' ').toUpperCase()">
                                        <el-input v-model="settings_form.labels[key]"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </el-form>
                    </el-tab-pane>

                    <!-- Customer Panel -->
                    <el-tab-pane name="customer_panel">
                        <template #label>
                            <span class="bw-settings-tab-label">
                                <span class="dashicons dashicons-groups" aria-hidden="true"></span>
                                <span><?php esc_html_e('Customer Panel', 'bookwellnow-appointment-booking'); ?></span>
                            </span>
                        </template>
                        <el-form :model="settings_form.customer_panel" label-position="top">
                            <h3 class="bw-settings-section-title"><?php esc_html_e('Customer Settings', 'bookwellnow-appointment-booking'); ?></h3>
                            <p class="bw-helper-text"><?php esc_html_e('Configure the frontend customer panel shortcode and WordPress account behavior.', 'bookwellnow-appointment-booking'); ?></p>
                            <p class="bw-helper-text">
                                <?php esc_html_e('Use shortcode:', 'bookwellnow-appointment-booking'); ?>
                                <code>[bookwellnow_customer_panel]</code>
                            </p>

                            <el-row type="flex" align="middle" class="bw-settings-toggle-row">
                                <el-col :span="18">
                                    <strong><?php esc_html_e('Create WordPress user upon appointment booking', 'bookwellnow-appointment-booking'); ?></strong>
                                    <p class="bw-helper-text"><?php esc_html_e('When enabled, a WordPress account with the BookWellNow Customer role is created for new bookings and linked to the customer record.', 'bookwellnow-appointment-booking'); ?></p>
                                </el-col>
                                <el-col :span="6" class="bw-right-align">
                                    <el-switch v-model="settings_form.customer_panel.create_wp_user_on_booking"></el-switch>
                                </el-col>
                            </el-row>

                            <h3 class="bw-settings-section-title" style="margin-top: 28px;"><?php esc_html_e('Customer Panel Labels', 'bookwellnow-appointment-booking'); ?></h3>
                            <p class="bw-helper-text"><?php esc_html_e('Customize every label shown in the customer panel. Leave a field empty to use the default text.', 'bookwellnow-appointment-booking'); ?></p>
                            <p class="bw-helper-text">
                                <?php
                                printf(
                                    /* translators: %s: Form Fields admin page link. */
                                    esc_html__('Edit Account field labels, placeholders and error messages are managed from the %s page.', 'bookwellnow-appointment-booking'),
                                    '<a href="' . esc_url(admin_url('admin.php?page=bookwell-form-fields')) . '">' . esc_html__('Form Fields', 'bookwellnow-appointment-booking') . '</a>'
                                );
                                ?>
                            </p>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Navigation', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('My Bookings (mobile title)', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.my_bookings"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('My Appointments', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.my_appointments"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Edit Account', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.edit_account"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Change Password', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.change_password"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Logout', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.logout"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Access Messages', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Login required message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_required"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Log In button', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_button"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="<?php esc_attr_e('No customer record message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.no_customer_record"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Login Form', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Login form title', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_title"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Username label', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_username"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Username placeholder', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_username_placeholder"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Password label', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_password"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Password placeholder', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_password_placeholder"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Remember Me label', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_remember"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Login button', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_submit"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Lost password link', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_lost_password"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Missing fields message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_required_fields"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Login failed message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_failed"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Login success message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.login_success"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Forgot Password', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Forgot form title', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.forgot_title"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Field label', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.forgot_username"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Field placeholder', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.forgot_placeholder"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Submit button', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.forgot_submit"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Back to login link', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.forgot_back"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Missing field message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.forgot_required"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Success message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.forgot_success"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Failure message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.forgot_failed"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="<?php esc_attr_e('Account not found message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.forgot_not_found"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Appointments Toolbar', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Search placeholder', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.search_appointments"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Select date placeholder', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.select_date"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Apply button', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.apply"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Appointments Table', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('ID column', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.id"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Service column', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.service"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Date column', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.date"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Status column', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.status"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Payment column', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.payment"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('No appointments message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.no_appointments"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Appointment Details', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Booking ID prefix', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.booking_id"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Time', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.time"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Payment Details title', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.payment_details"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Payment Method', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.payment_method"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Total Amount', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.total_amount"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Book Again button', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.book_again"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Cancel Appointment button', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.cancel_appointment"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="16">
                                    <el-form-item label="<?php esc_attr_e('Cancel confirmation message', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.cancel_confirm"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Confirm (Yes) button', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.yes"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Cancel (No) button', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.no"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Account &amp; Password', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Save button', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.save"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Current Password', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.current_password"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('New Password', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.new_password"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Confirm Password', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.confirm_password"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <h4 class="bw-settings-subsection-title"><?php esc_html_e('Notices', 'bookwellnow-appointment-booking'); ?></h4>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Profile updated', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.profile_updated"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Password updated', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.password_updated"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Appointment cancelled', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.cancelled_success"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="<?php esc_attr_e('Loading', 'bookwellnow-appointment-booking'); ?>">
                                        <el-input v-model="settings_form.customer_panel.loading"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>

                    <?php do_action('bookwellab_settings_extra_tabs'); ?>

                    <!-- Debug Log -->
                    <el-tab-pane name="debug_log">
                        <template #label>
                            <span class="bw-settings-tab-label">
                                <span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
                                <span><?php esc_html_e('Debug Log', 'bookwellnow-appointment-booking'); ?></span>
                            </span>
                        </template>
                        <el-form :model="settings_form.debug_log" label-position="top">
                            <h3 class="bw-settings-section-title"><?php esc_html_e('Debug Log Settings', 'bookwellnow-appointment-booking'); ?></h3>
                            <p class="bw-helper-text"><?php esc_html_e('Enable logging for payment gateways and email notifications to troubleshoot booking, payment, and notification issues.', 'bookwellnow-appointment-booking'); ?></p>

                            <template v-for="(section, sectionIndex) in debug_log_sections" :key="section.id">
                                <h4
                                    class="bw-settings-subsection-title"
                                    :style="sectionIndex > 0 ? 'margin-top: 28px;' : ''">
                                    {{ section.title }}
                                </h4>

                                <div
                                    v-for="gateway in section.channels"
                                    :key="gateway.slug"
                                    class="bw-debug-log-gateway">
                                    <el-row type="flex" align="middle" class="bw-debug-log-gateway-row">
                                        <el-col :span="16">
                                            <strong>{{ gateway.label }}</strong>
                                        </el-col>
                                        <el-col :span="8" class="bw-right-align">
                                            <el-switch
                                                v-model="settings_form.debug_log[gateway.setting_key]"
                                                active-value="yes"
                                                inactive-value="no">
                                            </el-switch>
                                        </el-col>
                                    </el-row>

                                    <div class="bw-debug-log-btns" v-if="settings_form.debug_log[gateway.setting_key] === 'yes'">
                                        <el-button size="small" @click="bwab_viewPaymentDebugLog(gateway.slug, gateway.label, 1)">
                                            <?php esc_html_e('View log', 'bookwellnow-appointment-booking'); ?>
                                        </el-button>

                                        <el-popover
                                            placement="bottom-start"
                                            :width="debug_log_download_range === 'custom' ? 380 : 320"
                                            trigger="manual"
                                            :visible="debug_log_download_popover_gateway === gateway.slug"
                                            :teleported="true"
                                            :popper-class="debug_log_download_range === 'custom' ? 'bw-debug-log-download-popover bw-debug-log-download-popover--custom' : 'bw-debug-log-download-popover'"
                                            :popper-options="{
                                                modifiers: [
                                                    {
                                                        name: 'preventOverflow',
                                                        options: {
                                                            boundary: 'viewport',
                                                            padding: { left: 200, right: 16, top: 32, bottom: 16 }
                                                        }
                                                    },
                                                    { name: 'offset', options: { offset: [0, 8] } },
                                                    {
                                                        name: 'flip',
                                                        options: { fallbackPlacements: ['bottom-end', 'top-start', 'top-end'] }
                                                    }
                                                ]
                                            }">
                                            <div class="bw-debug-log-download" @click.stop>
                                                <div class="bw-debug-log-download-head">
                                                    <p class="bw-helper-text"><?php esc_html_e('Select log duration to download', 'bookwellnow-appointment-booking'); ?></p>
                                                    <button
                                                        type="button"
                                                        class="bw-debug-log-download-close"
                                                        aria-label="<?php esc_attr_e('Close', 'bookwellnow-appointment-booking'); ?>"
                                                        @click.stop="bwab_closePaymentDebugLogDownloadPopover">
                                                        &times;
                                                    </button>
                                                </div>
                                                <el-select
                                                    v-model="debug_log_download_range"
                                                    :teleported="true"
                                                    placement="bottom-start"
                                                    popper-class="bw-admin-el-popper bw-debug-log-download-select"
                                                    class="bw-debug-log-duration-select">
                                                    <el-option
                                                        v-for="option in log_download_options"
                                                        :key="option.value"
                                                        :label="option.label"
                                                        :value="option.value">
                                                    </el-option>
                                                </el-select>
                                                <el-date-picker
                                                    v-if="debug_log_download_range === 'custom'"
                                                    v-model="debug_log_download_daterange"
                                                    type="daterange"
                                                    format="YYYY-MM-DD"
                                                    value-format="YYYY-MM-DD"
                                                    :teleported="true"
                                                    popper-class="bw-admin-el-popper bw-debug-log-download-picker"
                                                    class="bw-debug-log-download-dates"
                                                    start-placeholder="<?php esc_attr_e('Start date', 'bookwellnow-appointment-booking'); ?>"
                                                    end-placeholder="<?php esc_attr_e('End date', 'bookwellnow-appointment-booking'); ?>">
                                                </el-date-picker>
                                                <el-button
                                                    type="primary"
                                                    size="small"
                                                    class="bw-debug-log-download-btn"
                                                    :loading="debug_log_download_loading && debug_log_download_gateway === gateway.slug"
                                                    @click="bwab_downloadPaymentDebugLog(gateway.slug)">
                                                    <?php esc_html_e('Download', 'bookwellnow-appointment-booking'); ?>
                                                </el-button>
                                            </div>
                                            <template #reference>
                                                <el-button size="small" @click="bwab_openPaymentDebugLogDownloadPopover(gateway.slug)">
                                                    <?php esc_html_e('Download log', 'bookwellnow-appointment-booking'); ?>
                                                </el-button>
                                            </template>
                                        </el-popover>

                                        <el-popconfirm
                                            width="300"
                                            placement="bottom-start"
                                            :teleported="true"
                                            popper-class="bw-debug-log-clear-popconfirm"
                                            :title="'<?php echo esc_js(__('Are you sure you want to clear debug logs?', 'bookwellnow-appointment-booking')); ?>'"
                                            confirm-button-text="<?php esc_attr_e('Delete', 'bookwellnow-appointment-booking'); ?>"
                                            cancel-button-text="<?php esc_attr_e('Cancel', 'bookwellnow-appointment-booking'); ?>"
                                            @confirm="bwab_clearPaymentDebugLog(gateway.slug)">
                                            <template #reference>
                                                <el-button size="small"><?php esc_html_e('Clear log', 'bookwellnow-appointment-booking'); ?></el-button>
                                            </template>
                                        </el-popconfirm>
                                    </div>
                                </div>
                            </template>
                        </el-form>
                    </el-tab-pane>

                </el-tabs>

            </el-card>

            <el-dialog
                v-model="debug_log_modal_visible"
                :title="'<?php echo esc_js(__('Debug Logs', 'bookwellnow-appointment-booking')); ?> (' + debug_log_gateway_label + ')'"
                width="80%"
                append-to-body
                align-center
                class="bw-debug-log-dialog">
                <div v-loading="debug_log_view_loading" class="bw-debug-log-body">
                    <el-empty v-if="!debug_log_view_loading && debug_log_items.length === 0" description="<?php esc_attr_e('No Record Found!', 'bookwellnow-appointment-booking'); ?>"></el-empty>

                    <el-table
                        v-if="debug_log_items.length > 0"
                        :data="debug_log_items"
                        stripe
                        class="bw-debug-log-table"
                        style="width: 100%;">
                        <el-table-column prop="log_id" label="<?php esc_attr_e('Log Id', 'bookwellnow-appointment-booking'); ?>" width="90"></el-table-column>
                        <el-table-column prop="event" label="<?php esc_attr_e('Log Name', 'bookwellnow-appointment-booking'); ?>" width="220"></el-table-column>
                        <el-table-column label="<?php esc_attr_e('Log Data', 'bookwellnow-appointment-booking'); ?>" min-width="360">
                            <template #default="{ row }">
                                <div class="bw-debug-log-data">{{ row.data }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="created_at" label="<?php esc_attr_e('Log Added Date', 'bookwellnow-appointment-booking'); ?>" width="180"></el-table-column>
                    </el-table>
                </div>

                <template #footer v-if="debug_log_total > debug_log_per_page">
                    <div class="bw-debug-log-pagination">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :current-page="debug_log_current_page"
                            :page-size="debug_log_per_page"
                            :total="debug_log_total"
                            @current-change="bwab_debugLogPageChange">
                        </el-pagination>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</el-main>