<?php
defined('ABSPATH') || exit;
?>

<div class="bw-shortcode-generator-page" v-cloak>
    <div class="bw-header-title-section-simple">
        <el-row type="flex" class="bw-admin-head">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="bw-mlc-left">
                <h3 class="bw-custom-page-title"><?php echo esc_html__('Shortcode Generator', 'bookwellnow-appointment-booking'); ?></h3>
            </el-col>
        </el-row>
    </div>

    <div class="bw-sc-container-upper">
        <p class="bw-page-desc"><?php echo esc_html__('Generate custom booking shortcodes with pre-selected staff and services.', 'bookwellnow-appointment-booking'); ?></p>
    </div>

    <div class="bw-sc-container">
        <el-row :gutter="20">
            <!-- Configuration Sidebar -->
            <el-col :xs="24" :sm="24" :md="10" :lg="8">
                <el-card class="bw-sc-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span><i class="el-icon-setting"></i> <?php echo esc_html__('Configure Filters', 'bookwellnow-appointment-booking'); ?></span>
                        </div>
                    </template>
                    
                    <div class="bw-sc-form">
                        <div class="bw-form-item">
                            <label class="bw-label"><?php echo esc_html__('Select Staff Member', 'bookwellnow-appointment-booking'); ?></label>
                            <el-select 
                                v-model="selected_staff_id" 
                                placeholder="All Staff" 
                                @change="bwab_sc_onStaffChange"
                                clearable
                                filterable
                                popper-class="bw-filter-droup-down"
                                class="bookwell-form-control bw-full-width">
                                <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">
                                        <span class="sc-staff-info">{{ item.bw_staff_name }}</span>
                                    </div>
                                </el-option>
                            </el-select>
                        </div>

                        <div class="bw-form-item">
                            <label class="bw-label"><?php echo esc_html__('Select Service', 'bookwellnow-appointment-booking'); ?></label>
                            <el-select 
                                v-model="selected_service_id" 
                                placeholder="All Services" 
                                clearable
                                filterable
                                popper-class="bw-sc-popper"
                                class="bw-full-width">
                                <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">
                                        <span>{{ item.bw_service_name }}</span>
                                        <span class="sc-price-tag">{{ item.bw_service_price_formated }}</span>
                                    </div>
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </el-card>
            </el-col>

            <!-- Preview Section -->
            <el-col :xs="24" :sm="24" :md="14" :lg="16">
                <el-card class="bw-sc-preview-card" shadow="never">
                    <div class="bw-preview-content">
                        <div class="bw-preview-header">
                            <h3><?php echo esc_html__('Generated Shortcode', 'bookwellnow-appointment-booking'); ?></h3>
                            <p><?php echo esc_html__('Copy and paste this shortcode into any page or post.', 'bookwellnow-appointment-booking'); ?></p>
                        </div>

                        <div class="bw-shortcode-display">
                            <div class="bw-code-preview-wrapper">
                                <code class="bw-code-block">{{ bwab_sc_generatedShortcode() }}</code>
                            </div>
                            <el-button 
                                type="primary" 
                                class="bw-copy-btn"
                                @click="bwab_sc_copyShortcode">
                                <i class="el-icon-document-copy"></i> <?php echo esc_html__('Copy', 'bookwellnow-appointment-booking'); ?>
                            </el-button>
                        </div>

                        <div class="bw-preview-info">
                            <el-alert
                                :title="bwab_sc_behaviorMessage()"
                                :type="selected_staff_id || selected_service_id ? 'success' : 'info'"
                                show-icon
                                :closable="false">
                            </el-alert>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</div>
