<?php
defined('ABSPATH') || exit;
?>
<el-main v-cloak class="book-now-adm--container bw-shortcode-generator-page-v2 bw-sc-page-root">
    <div class="container">
        <div class="bw-admin-page-container bw-sc-page-inner">

            <el-card shadow="never" class="bw-sc-top-card">
                <el-row type="flex" align="middle" class="bw-admin-head">
                    <el-col :xs="24" :sm="24" :md="16" :lg="18">
                        <h3 class="bw-sc-page-title">
                            <?php esc_html_e('Shortcode Generator', 'bookwellnow-appointment-booking'); ?>
                        </h3>
                        <p class="bw-sc-page-desc">
                            <?php esc_html_e('Generate booking and customer panel shortcodes for your pages.', 'bookwellnow-appointment-booking'); ?>
                        </p>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="8" :lg="6" class="bw-sc-top-actions">

                    </el-col>
                </el-row>
            </el-card>

            <el-card shadow="never" class="bw-sc-main-card">
                <div class="bw-sc-section">
                    <h4 class="bw-sc-block-title"><?php esc_html_e('Booking Form Popup Button', 'bookwellnow-appointment-booking'); ?></h4>
                    <p class="bw-sc-block-desc"><?php esc_html_e('Generate a button shortcode for any page (e.g. service detail). Clicking the button opens the same booking popup with your selected service/staff.', 'bookwellnow-appointment-booking'); ?></p>

                    <div class="bw-sc-columns">
                        <el-row :gutter="24">
                            <el-col :xs="24" :sm="24" :md="10" :lg="9">
                                <el-card class="bw-sc-panel-card bw-sc-filter-card" shadow="never">
                                    <template #header>
                                        <div class="bw-sc-card-head">
                                            <span class="bw-sc-head-icon-square bw-sc-head-icon-square--filter"
                                                aria-hidden="true">
                                                <span class="dashicons dashicons-filter"></span>
                                            </span>
                                            <span><?php esc_html_e('Configure Filters', 'bookwellnow-appointment-booking'); ?></span>
                                        </div>
                                    </template>

                                    <div class="bw-sc-panel-body">
                                        <div class="bw-sc-field">
                                            <label class="bw-sc-label"
                                                for="bw-sc-popup-staff-select"><?php esc_html_e('Select Staff Member', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-select id="bw-sc-popup-staff-select" v-model="popup_btn_staff_id"
                                                placeholder="<?php echo esc_attr__('All Staff', 'bookwellnow-appointment-booking'); ?>"
                                                @change="bwab_sc_onPopupBtnStaffChange" clearable filterable
                                                popper-class="bw-filter-droup-down" class="bw-sc-select-field bw-full-width-v2">
                                                <el-option v-for="item in sc_staff_list" :key="'pb-staff-' + item.bw_staff_id"
                                                    :label="item.bw_staff_name" :value="item.bw_staff_id">
                                                    <div class="sc-option-item-v2">
                                                        <span>{{ item.bw_staff_name }}</span>
                                                    </div>
                                                </el-option>
                                            </el-select>
                                        </div>

                                        <div class="bw-sc-field">
                                            <label class="bw-sc-label"
                                                for="bw-sc-popup-service-select"><?php esc_html_e('Select Service', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-select id="bw-sc-popup-service-select" v-model="popup_btn_service_id"
                                                placeholder="<?php echo esc_attr__('Select a service', 'bookwellnow-appointment-booking'); ?>"
                                                clearable filterable popper-class="bw-sc-popper"
                                                class="bw-sc-select-field bw-full-width-v2">
                                                <el-option v-for="item in bwab_sc_filteredPopupBtnServices()" :key="'pb-svc-' + item.bw_service_id"
                                                    :label="item.bw_service_name" :value="item.bw_service_id">
                                                    <div class="sc-option-item-v2">
                                                        <span>{{ item.bw_service_name }}</span>
                                                        - <span class="sc-price-tag-v2">{{ item.bw_service_price_formated
                                                            }}</span>
                                                    </div>
                                                </el-option>
                                            </el-select>
                                        </div>

                                        <div class="bw-sc-field">
                                            <label class="bw-sc-label"
                                                for="bw-sc-popup-label"><?php esc_html_e('Button Label', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-input id="bw-sc-popup-label" v-model="popup_btn_label"
                                                placeholder="<?php echo esc_attr__('Book Appointment', 'bookwellnow-appointment-booking'); ?>"
                                                class="bw-full-width-v2"></el-input>
                                        </div>

                                        <div class="bw-sc-field">
                                            <label class="bw-sc-label"
                                                for="bw-sc-popup-class"><?php esc_html_e('CSS Class', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-input id="bw-sc-popup-class" v-model="popup_btn_class"
                                                placeholder="<?php echo esc_attr__('e.g. my-custom-btn', 'bookwellnow-appointment-booking'); ?>"
                                                class="bw-full-width-v2"></el-input>
                                        </div>

                                        <el-button type="primary" class="bw-sc-btn-primary bw-sc-btn-block"
                                            @click="bwab_sc_notifyPreviewUpdated">
                                            <?php esc_html_e('Update Shortcode', 'bookwellnow-appointment-booking'); ?>
                                        </el-button>
                                    </div>
                                </el-card>
                            </el-col>

                            <el-col :xs="24" :sm="24" :md="14" :lg="15">
                                <el-card class="bw-sc-panel-card bw-sc-preview-card" shadow="never">
                                    <div class="bw-sc-preview-inner">
                                        <div class="bw-sc-card-head bw-sc-card-head--plain">
                                            <span class="bw-sc-head-icon-square bw-sc-head-icon-square--code"
                                                aria-hidden="true">
                                                <span class="dashicons dashicons-editor-code"></span>
                                            </span>
                                            <div>
                                                <h4 class="bw-sc-section-title">
                                                    <?php esc_html_e('Generated Shortcode', 'bookwellnow-appointment-booking'); ?>
                                                </h4>
                                                <p class="bw-sc-section-desc">
                                                    <?php esc_html_e('Copy and paste this button shortcode into any page or post.', 'bookwellnow-appointment-booking'); ?>
                                                </p>
                                            </div>
                                        </div>

                                        <div class="bw-sc-shortcode-bar">
                                            <div class="bw-sc-code-wrap">
                                                <code>{{ bwab_sc_generatedPopupButtonShortcode() }}</code>
                                            </div>
                                            <el-button type="primary" class="bw-sc-copy-btn" @click="bwab_sc_copyPopupButtonShortcode">
                                                <?php esc_html_e('Copy', 'bookwellnow-appointment-booking'); ?>
                                            </el-button>
                                        </div>
                                    </div>
                                </el-card>

                                <div class="bw-sc-info-bar">
                                    <el-alert class="bw-sc-behavior-alert" :title="bwab_sc_popupButtonBehaviorMessage()"
                                        :type="popup_btn_service_id ? 'success' : 'info'" show-icon
                                        :closable="false">
                                    </el-alert>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-card>

            <el-card shadow="never" class="bw-sc-main-card">
                <div class="bw-sc-section">
                    <h4 class="bw-sc-block-title"><?php esc_html_e('Booking Form Shortcode', 'bookwellnow-appointment-booking'); ?></h4>
                    <p class="bw-sc-block-desc"><?php esc_html_e('Generate custom booking shortcodes with pre-selected staff and services.', 'bookwellnow-appointment-booking'); ?></p>

                    <div class="bw-sc-form-type-section">
                    <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': sc_form_type === 'wizard' }"
                            role="button"
                            tabindex="0"
                            @click="bwab_sc_setFormType('wizard')"
                            @keydown.enter.prevent="bwab_sc_setFormType('wizard')"
                            @keydown.space.prevent="bwab_sc_setFormType('wizard')">
                            <div
                                class="bw-appearance-theme-preview bw-appearance-form-preview bw-appearance-form-preview--wizard"
                                :style="{
                                    '--bw-theme-primary': (sc_appearance_preview && sc_appearance_preview.primary_color) || '#044343',
                                    '--bw-theme-panel': (sc_appearance_preview && sc_appearance_preview.panel_bg_color) || '#F8F4F8',
                                    '--bw-theme-sidebar': (sc_appearance_preview && sc_appearance_preview.primary_color) || '#044343',
                                    '--bw-theme-accent': (sc_appearance_preview && sc_appearance_preview.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="sc_form_type === 'wizard' || sc_save_form_type_loader"
                                :loading="sc_save_form_type_loader && sc_form_type === 'wizard'"
                                @click.stop="bwab_sc_setFormType('wizard')">
                                {{ sc_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': sc_form_type === 'full_page_list' }"
                            role="button"
                            tabindex="0"
                            @click="bwab_sc_setFormType('full_page_list')"
                            @keydown.enter.prevent="bwab_sc_setFormType('full_page_list')"
                            @keydown.space.prevent="bwab_sc_setFormType('full_page_list')">
                            <div
                                class="bw-appearance-theme-preview bw-appearance-form-preview bw-appearance-form-preview--catalog"
                                :style="{
                                    '--bw-theme-primary': (sc_appearance_preview && sc_appearance_preview.primary_color) || '#044343',
                                    '--bw-theme-panel': (sc_appearance_preview && sc_appearance_preview.panel_bg_color) || '#F8F4F8',
                                    '--bw-theme-sidebar': (sc_appearance_preview && sc_appearance_preview.primary_color) || '#044343',
                                    '--bw-theme-accent': (sc_appearance_preview && sc_appearance_preview.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="sc_form_type === 'full_page_list' || sc_save_form_type_loader"
                                :loading="sc_save_form_type_loader && sc_form_type === 'full_page_list'"
                                @click.stop="bwab_sc_setFormType('full_page_list')">
                                {{ sc_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-sc-block-desc" v-if="sc_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-sc-block-desc" 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>
                    </div>

                    <div class="bw-sc-columns">
                        <el-row :gutter="24">
                            <el-col :xs="24" :sm="24" :md="10" :lg="9">
                                <el-card class="bw-sc-panel-card bw-sc-filter-card" shadow="never">
                            <template #header>
                                <div class="bw-sc-card-head">
                                    <span class="bw-sc-head-icon-square bw-sc-head-icon-square--filter"
                                        aria-hidden="true">
                                        <span class="dashicons dashicons-filter"></span>
                                    </span>
                                    <span><?php esc_html_e('Configure Filters', 'bookwellnow-appointment-booking'); ?></span>
                                </div>
                            </template>

                            <div class="bw-sc-panel-body">
                                <div class="bw-sc-field">
                                    <label class="bw-sc-label"
                                        for="bw-sc-staff-select"><?php esc_html_e('Select Staff Member', 'bookwellnow-appointment-booking'); ?></label>
                                    <el-select id="bw-sc-staff-select" v-model="selected_staff_id"
                                        placeholder="<?php echo esc_attr__('All Staff', 'bookwellnow-appointment-booking'); ?>"
                                        @change="bwab_sc_onStaffChange" clearable filterable
                                        popper-class="bw-filter-droup-down" class="bw-sc-select-field bw-full-width-v2">
                                        <el-option v-for="item in sc_staff_list" :key="item.bw_staff_id"
                                            :label="item.bw_staff_name" :value="item.bw_staff_id">
                                            <div class="sc-option-item-v2">
                                                <span>{{ item.bw_staff_name }}</span>
                                            </div>
                                        </el-option>
                                    </el-select>
                                </div>

                                <div class="bw-sc-field" v-if="sc_form_type !== 'full_page_list'">
                                    <label class="bw-sc-label"
                                        for="bw-sc-service-select"><?php esc_html_e('Select Service', 'bookwellnow-appointment-booking'); ?></label>
                                    <el-select id="bw-sc-service-select" v-model="selected_service_id"
                                        placeholder="<?php echo esc_attr__('All Services', 'bookwellnow-appointment-booking'); ?>"
                                        clearable filterable popper-class="bw-sc-popper"
                                        class="bw-sc-select-field bw-full-width-v2">
                                        <el-option v-for="item in bwab_sc_filteredServices()" :key="item.bw_service_id"
                                            :label="item.bw_service_name" :value="item.bw_service_id">
                                            <div class="sc-option-item-v2">
                                                <span>{{ item.bw_service_name }}</span>
                                                - <span class="sc-price-tag-v2">{{ item.bw_service_price_formated
                                                    }}</span>
                                            </div>
                                        </el-option>
                                    </el-select>
                                </div>

                                <el-button type="primary" class="bw-sc-btn-primary bw-sc-btn-block"
                                    @click="bwab_sc_notifyPreviewUpdated">
                                    <?php esc_html_e('Update Shortcode', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                            </div>
                        </el-card>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="14" :lg="15">
                        <el-card class="bw-sc-panel-card bw-sc-preview-card" shadow="never">
                            <div class="bw-sc-preview-inner">
                                <div class="bw-sc-card-head bw-sc-card-head--plain">
                                    <span class="bw-sc-head-icon-square bw-sc-head-icon-square--code"
                                        aria-hidden="true">
                                        <span class="dashicons dashicons-editor-code"></span>
                                    </span>
                                    <div>
                                        <h4 class="bw-sc-section-title">
                                            <?php esc_html_e('Generated Shortcode', 'bookwellnow-appointment-booking'); ?>
                                        </h4>
                                        <p class="bw-sc-section-desc">
                                            <?php esc_html_e('Copy and paste this shortcode into any page or post.', 'bookwellnow-appointment-booking'); ?>
                                        </p>
                                    </div>
                                </div>

                                <div class="bw-sc-shortcode-bar">
                                    <div class="bw-sc-code-wrap">
                                        <code>{{ bwab_sc_generatedShortcode() }}</code>
                                    </div>
                                    <el-button type="primary" class="bw-sc-copy-btn" @click="bwab_sc_copyShortcode">

                                        <?php esc_html_e('Copy', 'bookwellnow-appointment-booking'); ?>
                                    </el-button>
                                </div>
                            </div>
                        </el-card>

                        <div class="bw-sc-info-bar">
                            <el-alert class="bw-sc-behavior-alert" :title="bwab_sc_behaviorMessage()"
                                :type="selected_staff_id || (sc_form_type !== 'full_page_list' && selected_service_id) ? 'success' : 'info'" show-icon
                                :closable="false">
                            </el-alert>
                        </div>
                    </el-col>
                </el-row>
                    </div>
                </div>
            </el-card>

            <el-card shadow="never" class="bw-sc-main-card">
                <div class="bw-sc-section bw-sc-section--customer-panel">
                    <h4 class="bw-sc-block-title"><?php esc_html_e('Customer Panel Shortcode', 'bookwellnow-appointment-booking'); ?></h4>
                    <p class="bw-sc-block-desc"><?php esc_html_e('Display the logged-in customer dashboard with appointments, profile, and password management.', 'bookwellnow-appointment-booking'); ?></p>

                    <el-card class="bw-sc-panel-card bw-sc-preview-card bw-sc-customer-panel-card" shadow="never">
                        <div class="bw-sc-preview-inner">
                            <div class="bw-sc-card-head bw-sc-card-head--plain">
                                <span class="bw-sc-head-icon-square bw-sc-head-icon-square--panel" aria-hidden="true">
                                    <span class="dashicons dashicons-groups"></span>
                                </span>
                                <div>
                                    <h4 class="bw-sc-section-title">
                                        <?php esc_html_e('Generated Shortcode', 'bookwellnow-appointment-booking'); ?>
                                    </h4>
                                    <p class="bw-sc-section-desc">
                                        <?php esc_html_e('Copy and paste this shortcode into any page or post.', 'bookwellnow-appointment-booking'); ?>
                                    </p>
                                </div>
                            </div>

                            <div class="bw-sc-shortcode-bar">
                                <div class="bw-sc-code-wrap">
                                    <code>{{ customer_panel_shortcode }}</code>
                                </div>
                                <el-button type="primary" class="bw-sc-copy-btn" @click="bwab_sc_copyCustomerPanelShortcode">
                                    <?php esc_html_e('Copy', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                            </div>
                        </div>
                    </el-card>

                    <div class="bw-sc-info-bar">
                        <el-alert
                            class="bw-sc-behavior-alert"
                            :title="customer_panel_shortcode_hint"
                            type="info"
                            show-icon
                            :closable="false">
                        </el-alert>
                    </div>
                </div>
            </el-card>

        </div>
    </div>
</el-main>