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

    <div class="container">
        <div class="bw-admin-page-container">
            <el-card class="bw-card bw-staff-filter-card" shadow="never">
                <div class="bw-page-filter">
                    <el-row type="flex" class="bw-staff-filter-row" :gutter="32">
                        <el-col :lg="9" :md="24" :sm="24" :xl="10" :xs="24">
                            <div class="bw-form-element">
                                <label class="el-form-item__label">
                                    <span
                                        class="bw-element-label"><?php esc_html_e('Staff Name', 'bookwellnow-appointment-booking'); ?></span>
                                </label>
                                <el-input class="bw-form-control"
                                    placeholder="<?php esc_html_e('Enter staff name', 'bookwellnow-appointment-booking'); ?>"
                                    size="large" v-model="filter.bw_staff_name"></el-input>
                            </div>
                        </el-col>
                        <el-col :lg="9" :md="24" :sm="24" :xl="10" :xs="24">
                            <div class="bw-form-element">
                                <label class="el-form-item__label">
                                    <span
                                        class="bw-element-label"><?php esc_html_e('Status', 'bookwellnow-appointment-booking'); ?></span>
                                </label>
                                <el-select class="bookwell-form-control" popper-class="bw-filter-droup-down"
                                    size="large" v-model="filter.bw_staff_is_active"
                                    placeholder="<?php esc_html_e('Select status', 'bookwellnow-appointment-booking'); ?>">
                                    <el-option :key="''"
                                        label="<?php esc_html_e('All', 'bookwellnow-appointment-booking'); ?>"
                                        :value="''"></el-option>
                                    <el-option :key="1"
                                        label="<?php esc_html_e('Active', 'bookwellnow-appointment-booking'); ?>"
                                        :value="1"></el-option>
                                    <el-option :key="0"
                                        label="<?php esc_html_e('Inactive', 'bookwellnow-appointment-booking'); ?>"
                                        :value="0"></el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :lg="6" :md="24" :sm="24" :xl="4" :xs="24" class="bw-element-btn-group-col">
                            <div class="bw-element-btn-group">
                                <el-button size="large" plain class="bw-plain-btn bw-staff-reset-btn" @click="bwab_resetFilter">
                                    <?php esc_html_e('Reset', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                                <el-button size="large" type="primary" class="bw-primary-btn bw-staff-apply-btn" @click="bwab_getStaff">
                                    <?php esc_html_e('Apply', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <div class="bw-admin-loader-upper" v-if="bw_list_loader == '1'">
                <div class="bw-admin-dot-loader" aria-label="<?php echo esc_attr__('Loading staff', 'bookwellnow-appointment-booking'); ?>">
                    <span class="bw-admin-dot"></span>
                    <span class="bw-admin-dot"></span>
                    <span class="bw-admin-dot"></span>
                </div>
            </div>

            <div class="bw-staff-mobile-list" v-if="bw_list_loader == '0'">
                <div v-if="!list_data || list_data.length === 0" class="bw-staff-mobile-empty">
                    <?php esc_html_e('No staff members found.', 'bookwellnow-appointment-booking'); ?>
                </div>
                <article v-for="(row, index) in list_data" :key="'mobile-staff-' + row.bw_staff_id" class="bw-staff-mobile-card">
                    <div class="bw-staff-mobile-card-head">
                        <div class="bw-staff-mobile-head-left">
                            <div class="bw-staff-drag-handle" aria-hidden="true">
                                <span class="dashicons dashicons-move"></span>
                            </div>
                            <img :src="row.bw_staff_image" class="bw-staff-mobile-avatar"
                                :alt="row.bw_staff_name">
                            <div class="bw-staff-mobile-title-wrap">
                                <span class="bw-staff-mobile-id">#{{ row.bw_staff_id }}</span>
                                <div class="bw-staff-mobile-name">{{ row.bw_staff_name }}</div>
                            </div>
                        </div>
                        <div class="bw-staff-mobile-head-right">
                            <el-switch v-model="row.bw_staff_is_active" :active-value="1" :inactive-value="0"
                                @change="bwab_toggleStaffStatus(row)" :loading="row.status_loader"></el-switch>
                            <div class="bw-staff-mobile-actions">
                                <el-button type="primary" size="small" circle @click="bwab_editRow(row)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                                        viewBox="0 0 16 16">
                                        <path
                                            d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                        <path fill-rule="evenodd"
                                            d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                                    </svg>
                                </el-button>
                                <el-popconfirm @confirm="bwab_deleteRow(row, index)"
                                    cancel-button-text="<?php esc_html_e('No, Thanks', 'bookwellnow-appointment-booking'); ?>"
                                    confirm-button-text="<?php esc_html_e('OK', 'bookwellnow-appointment-booking'); ?>"
                                    icon-color="#626AEF"
                                    title="<?php esc_html_e('Are you sure to delete this?', 'bookwellnow-appointment-booking'); ?>"
                                    width="220">
                                    <template #reference>
                                        <el-button size="small" type="danger" :disabled="row.delete_loader == '1'"
                                            :loading="row.delete_loader == '1'" circle>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                                fill="currentColor" viewBox="0 0 16 16">
                                                <path
                                                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd"
                                                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                            </svg>
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </div>
                        </div>
                    </div>
                    <div class="bw-staff-mobile-block">
                        <div class="bw-staff-mobile-label"><?php esc_html_e('Email', 'bookwellnow-appointment-booking'); ?></div>
                        <div class="bw-staff-mobile-value">{{ row.bw_staff_email || '-' }}</div>
                    </div>
                    <div class="bw-staff-mobile-grid">
                        <div class="bw-staff-mobile-block">
                            <div class="bw-staff-mobile-label"><?php esc_html_e('Position', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-staff-mobile-value">{{ row.bw_staff_position || '-' }}</div>
                        </div>
                        <div class="bw-staff-mobile-block">
                            <div class="bw-staff-mobile-label"><?php esc_html_e('Assigned Services', 'bookwellnow-appointment-booking'); ?></div>
                            <div v-if="row.bw_staff_services && row.bw_staff_services.length > 0" class="bw-staff-mobile-value">
                                {{ row.bw_staff_services[0].bw_service_name }}
                                <span v-if="row.bw_staff_services.length > 1" class="bw-service-count">
                                    +{{ row.bw_staff_services.length - 1 }}
                                </span>
                            </div>
                            <div v-else class="bw-staff-mobile-meta">-</div>
                        </div>
                    </div>
                    <div class="bw-staff-mobile-shift-row">
                        <el-button size="small" type="primary" plain class="bw-staff-shift-btn" @click="bwab_openShifts(row)">
                            <?php esc_html_e('Shifts', 'bookwellnow-appointment-booking'); ?>
                        </el-button>
                        <el-button size="small" type="primary" plain class="bw-staff-shift-btn" @click="bwab_openSpecialDays(row)">
                            <?php esc_html_e('Special Day', 'bookwellnow-appointment-booking'); ?>
                        </el-button>
                    </div>
                </article>
            </div>

            <div class="bw-admin-table bw-staff-table-wrap bw-staff-desktop-table" v-if="bw_list_loader == '0'">
                <el-table :data="list_data" style="width:100%" class="bw-staff-table">
                    <el-table-column label="<?php esc_html_e('ID', 'bookwellnow-appointment-booking'); ?>"
                        prop="bw_staff_id" width="90">
                        <template #default="{ row }">
                            <span>#{{row.bw_staff_id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="<?php esc_html_e('Photo', 'bookwellnow-appointment-booking'); ?>" width="90"
                        align="center">
                        <template #default="{ row }">
                            <img :src="row.bw_staff_image" class="bw-staff-list-avatar"
                                alt="<?php esc_attr_e('Staff profile photo', 'bookwellnow-appointment-booking'); ?>">
                        </template>
                    </el-table-column>
                    <el-table-column label="<?php esc_html_e('Name', 'bookwellnow-appointment-booking'); ?>"
                        prop="bw_staff_name">
                        <template #default="{row, $index}">
                            <div class="bw-flex-start">
                                <div class="bw-staff-drag-handle" style="cursor: move; margin-right: 10px;">
                                    <span class="dashicons dashicons-move"></span>
                                </div>
                                <div>{{row.bw_staff_name}}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="<?php esc_html_e('Email', 'bookwellnow-appointment-booking'); ?>"
                        prop="bw_staff_email"></el-table-column>
                    <el-table-column label="<?php esc_html_e('Assigned Services', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="{row}">
                            <div v-if="row.bw_staff_services && row.bw_staff_services.length > 0">
                                <el-popover placement="top" :width="200" trigger="hover">
                                    <template #reference>
                                        <span class="bw-staff-services-text" style="cursor: pointer;">
                                            {{ row.bw_staff_services[0].bw_service_name }}
                                            <span v-if="row.bw_staff_services.length > 1" class="bw-service-count">
                                                +{{ row.bw_staff_services.length - 1 }}
                                            </span>
                                        </span>
                                    </template>
                                    <div class="bw-services-list">
                                        <div v-for="(service, index) in row.bw_staff_services" :key="index"
                                            class="bw-service-item">
                                            {{ service.bw_service_name }}
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                            <div v-else>
                                -
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="<?php esc_html_e('Position', 'bookwellnow-appointment-booking'); ?>"
                        prop="bw_staff_position"></el-table-column>
                    <el-table-column label="<?php esc_html_e('Status', 'bookwellnow-appointment-booking'); ?>" width="100">
                        <template #default="{row}">
                            <el-switch v-model="row.bw_staff_is_active" :active-value="1" :inactive-value="0"
                                @change="bwab_toggleStaffStatus(row)" :loading="row.status_loader"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="<?php esc_html_e('Shift', 'bookwellnow-appointment-booking'); ?>"
                        align="center">
                        <template #default="{row,$index}">
                            <div class="bw-staff-shift-buttons">
                                <el-button size="small" type="primary" plain class="bw-staff-shift-btn" @click="bwab_openShifts(row)">
                                    <?php esc_html_e('Shifts', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                                <el-button size="small" type="primary" plain class="bw-staff-shift-btn" @click="bwab_openSpecialDays(row)">
                                    <?php esc_html_e('Special Day', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="<?php esc_html_e('Action', 'bookwellnow-appointment-booking'); ?>"
                        fixed="right">
                        <template #default="{row,$index}">
                            <el-button size="small" type="primary" circle @click="bwab_editRow(row)">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                    <path fill-rule="evenodd"
                                        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                                </svg>
                            </el-button>
                            <el-popconfirm @confirm="bwab_deleteRow(row,$index)"
                                cancel-button-text="<?php esc_html_e('No, Thanks', 'bookwellnow-appointment-booking'); ?>"
                                confirm-button-text="<?php esc_html_e('OK', 'bookwellnow-appointment-booking'); ?>"
                                icon-color="#626AEF"
                                title="<?php esc_html_e('Are you sure to delete this?', 'bookwellnow-appointment-booking'); ?>"
                                width="220">
                                <template #reference>
                                    <el-button size="small" type="danger" :disabled="row.delete_loader == '1'"
                                        :loading="row.delete_loader == '1'" circle>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                            fill="currentColor" viewBox="0 0 16 16">
                                            <path
                                                d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd"
                                                d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                        </svg>
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>

    <el-drawer class="bw-staff-drawer" :with-header="false" @closed="bwab_closeDrawer" modal-class="bw-main-drawer"
        v-model="bw_add_edit_popup" :direction="drawer_direction">
        <div class="bw-staff-drawer-layout">
            <div class="bw-drawer-body bw-staff-drawer-body">
                <div class="bw-staff-drawer-title">
                    <span v-if="staff_form.bw_staff_id"><?php esc_html_e('Edit Staff', 'bookwellnow-appointment-booking'); ?></span>
                    <span v-else><?php esc_html_e('Add Staff', 'bookwellnow-appointment-booking'); ?></span>
                </div>
                <el-form :model="staff_form" :rules="form_rules" @submit.native.prevent label-position="top"
                    ref="bw_staff_frm">
                <div class="bw-form-element">
                    <el-form-item prop="bw_wp_user_id">
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('WordPress User:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-select class="bw-form-fields-control" filterable remote reserve-keyword
                            placeholder="<?php esc_html_e('Search WordPress users', 'bookwellnow-appointment-booking'); ?>"
                            :remote-method="fetchWPUsers" :loading="staff_loading" v-model="staff_form.bw_wp_user_id"
                            @change="handleUserSelect">
                            <el-option v-for="user in wp_users" :key="user.id"
                                :label="user.username ? `${user.username} (${user.email})` : `${user.name} (${user.email})`"
                                :value="user.id"></el-option>
                            <el-option
                                :label="'<?php esc_html_e('Create new (no WP user)', 'bookwellnow-appointment-booking'); ?>'"
                                :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item>
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Profile Image:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <div class="bw-staff-image-upload-wrapper"
                            style="display: flex; align-items: center; gap: 15px;">
                            <div v-if="staff_form.bw_staff_image" class="bw-staff-image-preview">
                                <img :src="staff_form.bw_staff_image"
                                    style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 1px solid #dcdfe6;">
                            </div>
                            <div class="bw-staff-image-actions">
                                <el-button v-if="!staff_form.bw_staff_image" type="primary"
                                    @click="bwab_uploadStaffImage">
                                    <?php esc_html_e('Upload Photo', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                                <div v-else>
                                    <el-button type="primary" link
                                        @click="bwab_uploadStaffImage"><?php esc_html_e('Change', 'bookwellnow-appointment-booking'); ?></el-button>
                                    <el-button type="danger" link
                                        @click="bwab_removeStaffImage"><?php esc_html_e('Remove', 'bookwellnow-appointment-booking'); ?></el-button>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item prop="bw_staff_name">
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Full Name:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-input class="bw-form-fields-control"
                            placeholder="<?php esc_html_e('Enter staff name', 'bookwellnow-appointment-booking'); ?>"
                            size="large" v-model="staff_form.bw_staff_name"></el-input>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item prop="bw_staff_email">
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Email:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-input class="bw-form-fields-control"
                            placeholder="<?php esc_html_e('Enter email address', 'bookwellnow-appointment-booking'); ?>"
                            size="large" v-model="staff_form.bw_staff_email" type="email"></el-input>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item>
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Phone:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-input class="bw-form-fields-control"
                            placeholder="<?php esc_html_e('Enter phone number', 'bookwellnow-appointment-booking'); ?>"
                            size="large" v-model="staff_form.bw_staff_phone"></el-input>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item>
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Position:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-input class="bw-form-fields-control"
                            placeholder="<?php esc_html_e('Enter position', 'bookwellnow-appointment-booking'); ?>"
                            size="large" v-model="staff_form.bw_staff_position"></el-input>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item>
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Services:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-select class="bw-form-fields-control" multiple filterable
                            placeholder="<?php esc_html_e('Select services', 'bookwellnow-appointment-booking'); ?>"
                            v-model="staff_form.bw_staff_services">
                            <el-option v-for="service in services_list" :key="service.bw_service_id"
                                :label="service.bw_service_name" :value="service.bw_service_id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item>
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Bio:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-input class="bw-form-fields-control"
                            placeholder="<?php esc_html_e('Enter bio', 'bookwellnow-appointment-booking'); ?>" size="large"
                            v-model="staff_form.bw_staff_bio" :rows="4" type="textarea"></el-input>
                    </el-form-item>
                </div>

                <div class="bw-form-element" v-if="zoom_integration_enabled">
                    <el-form-item>
                        <template #label>
                            <span class="bw-element-label bw-element-label--with-note">
                                <?php esc_html_e('Enable Zoom Integration:', 'bookwellnow-appointment-booking'); ?>
                                <el-tooltip
                                    effect="dark"
                                    placement="top"
                                    popper-class="bw-zoom-note-tooltip"
                                    :show-after="100">
                                    <template #content>
                                        <span><?php
                                        echo esc_html__(
                                            'Enable Zoom here, then select a Zoom User below. Also enable Zoom Integration on the related service. Meetings are created only when Zoom is configured in Settings, on this staff member, and on the service.',
                                            'bookwellnow-appointment-booking'
                                        );
                                        ?></span>
                                    </template>
                                    <span
                                        class="bw-field-note-icon dashicons dashicons-info-outline"
                                        tabindex="0"
                                        role="img"
                                        aria-label="<?php esc_attr_e('Zoom integration note', 'bookwellnow-appointment-booking'); ?>"></span>
                                </el-tooltip>
                            </span>
                        </template>
                        <el-switch
                            v-model="staff_form.bw_zoom_enabled"
                            :active-value="1"
                            :inactive-value="0"
                            @change="bwab_onStaffZoomToggle">
                        </el-switch>
                    </el-form-item>
                </div>

                <div class="bw-form-element" v-if="zoom_integration_enabled && staff_form.bw_zoom_enabled == 1">
                    <el-form-item>
                        <template #label>
                            <span class="bw-element-label bw-element-label--with-note">
                                <?php esc_html_e('Zoom User:', 'bookwellnow-appointment-booking'); ?>
                                <el-tooltip
                                    effect="dark"
                                    placement="top"
                                    popper-class="bw-zoom-note-tooltip"
                                    :show-after="100">
                                    <template #content>
                                        <span><?php esc_html_e('Assign a Zoom user so meetings are created under that Zoom account for this staff member.', 'bookwellnow-appointment-booking'); ?></span>
                                    </template>
                                    <span
                                        class="bw-field-note-icon dashicons dashicons-info-outline"
                                        tabindex="0"
                                        role="img"
                                        aria-label="<?php esc_attr_e('Zoom user note', 'bookwellnow-appointment-booking'); ?>"></span>
                                </el-tooltip>
                            </span>
                        </template>
                        <el-select
                            class="bw-form-fields-control"
                            v-model="staff_form.bw_zoom_user_id"
                            filterable
                            clearable
                            :loading="zoom_users_loader"
                            placeholder="<?php esc_attr_e('Select Zoom user', 'bookwellnow-appointment-booking'); ?>"
                            style="width: 100%;">
                            <el-option
                                v-for="user in zoom_users_list"
                                :key="user.id"
                                :label="user.name"
                                :value="user.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <?php
                /**
                 * Extra staff drawer fields (Pro integrations, etc.).
                 */
                do_action('bookwellab_staff_settings_fields');
                ?>

                </el-form>
            </div>
            <div class="bw-staff-drawer-footer">
                <el-button class="bw-staff-drawer-cancel" size="large" @click="bwab_closeDrawer">
                    <?php esc_html_e('Cancel', 'bookwellnow-appointment-booking'); ?>
                </el-button>
                <el-button class="bw-staff-drawer-save" size="large" @click="bwab_storeStaffData" type="primary"
                    :disabled="insert_loader" :loading="insert_loader">
                    <?php esc_html_e('Save', 'bookwellnow-appointment-booking'); ?>
                </el-button>
            </div>
        </div>
    </el-drawer>

    <!-- Shift Management Drawer -->
    <el-drawer class="bw-shifts-drawer" :with-header="false" modal-class="bw-main-drawer" v-model="shifts_drawer"
        size="50%" :direction="drawer_direction">
        <div class="bw-drawer-body">
            <div class="bw-shifts-drawer-title">
                <?php esc_html_e('Manage Shifts', 'bookwellnow-appointment-booking'); ?>
            </div>
            <div class="bw-shifts-container">
                <div class="bw-shift-row-upper" v-for="(shift, index) in current_staff_shifts" :key="shift.bw_day_name">
                    <div class="bw-shift-row">
                        <div class="bw-shift-day">{{ shift.bw_day_name }}</div>
                        <div class="bw-shift-times" v-if="shift.bw_is_off == '0'">
                            <el-select v-model="current_staff_shifts[index].bw_start_time" @change="$forceUpdate()"
                                size="small" filterable placeholder="<?php echo esc_attr__('Start time', 'bookwellnow-appointment-booking'); ?>" style="width: 120px;">
                                <el-option v-for="time in time_options" :key="time" :label="time"
                                    :value="time"></el-option>
                            </el-select>
                            <span>-</span>
                            <el-select v-model="current_staff_shifts[index].bw_end_time" @change="$forceUpdate()"
                                size="small" filterable placeholder="<?php echo esc_attr__('End time', 'bookwellnow-appointment-booking'); ?>" style="width: 120px;">
                                <el-option v-for="time in time_options" :key="time" :label="time"
                                    :value="time"></el-option>
                            </el-select>

                            <div class="bw-break-wrapper">
                                <el-button size="small" type="text"
                                    @click="bwab_addBreak(index)"><?php esc_html_e('+ Break', 'bookwellnow-appointment-booking'); ?></el-button>
                            </div>
                        </div>
                        <div class="bw-shift-times" v-else>
                            <span
                                class="bw-shift-off-text"><?php esc_html_e('Day Off', 'bookwellnow-appointment-booking'); ?></span>
                        </div>

                        <div class="bw-shift-actions">
                            <el-switch v-model="shift.bw_is_off" active-value="1" inactive-value="0"
                                active-text="<?php echo esc_attr__('Off', 'bookwellnow-appointment-booking'); ?>"
                                inactive-text="<?php echo esc_attr__('On', 'bookwellnow-appointment-booking'); ?>"></el-switch>
                        </div>

                    </div>
                    <div class="bw-break-list"
                        v-if="shift.bw_breaks && shift.bw_breaks.length > 0 && shift.bw_is_off == '0'">
                        <span><?php esc_html_e('Breaks:', 'bookwellnow-appointment-booking'); ?></span>
                        <div v-for="(brk, bIndex) in shift.bw_breaks" :key="bIndex" class="bw-break-item">
                            {{ brk.start }} - {{ brk.end }}
                            <button type="button" class="bw-break-remove" @click="bwab_removeBreak(index, bIndex)"
                                aria-label="<?php esc_attr_e('Remove break', 'bookwellnow-appointment-booking'); ?>">×</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="bw-shifts-drawer-footer">
            <el-button class="bw-shifts-drawer-cancel" size="large" @click="shifts_drawer = false">
                <?php esc_html_e('Cancel', 'bookwellnow-appointment-booking'); ?>
            </el-button>
            <el-button class="bw-shifts-drawer-save" size="large" @click="bwab_saveShifts" type="primary"
                :disabled="shifts_loader" :loading="shifts_loader">
                <?php esc_html_e('Save Shifts', 'bookwellnow-appointment-booking'); ?>
            </el-button>
        </div>

        <!-- Break Dialog -->
        <el-dialog title="<?php echo esc_attr__('Add Break', 'bookwellnow-appointment-booking'); ?>" v-model="break_dialog_visible" width="30%" append-to-body>
            <el-form :model="break_form">
                <el-form-item label="<?php echo esc_attr__('Start Time', 'bookwellnow-appointment-booking'); ?>">
                    <el-select v-model="break_form.start" size="small" filterable
                        placeholder="<?php echo esc_attr__('Start', 'bookwellnow-appointment-booking'); ?>" style="width: 100%;">
                        <el-option v-for="time in time_options" :key="time" :label="time" :value="time"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="<?php echo esc_attr__('End Time', 'bookwellnow-appointment-booking'); ?>">
                    <el-select v-model="break_form.end" size="small" filterable
                        placeholder="<?php echo esc_attr__('End', 'bookwellnow-appointment-booking'); ?>" style="width: 100%;">
                        <el-option v-for="time in time_options" :key="time" :label="time" :value="time"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer bw-dialog-footer">
                <el-button @click="break_dialog_visible = false"><?php esc_html_e('Cancel', 'bookwellnow-appointment-booking'); ?></el-button>
                <el-button type="primary" @click="bwab_saveBreak"><?php esc_html_e('Confirm', 'bookwellnow-appointment-booking'); ?></el-button>
            </span>
        </el-dialog>
    </el-drawer>

    <!-- Special Days Management Drawer -->
    <el-drawer :with-header="false" modal-class="bw-main-drawer" v-model="special_days_drawer" size="50%"
        :direction="drawer_direction">
        <div class="bw-drawer-header">
            <h3><?php esc_html_e('Manage Special/Holiday Days', 'bookwellnow-appointment-booking'); ?></h3>
            <el-button size="large" @click="bw_is_special_day_form_visible = true" type="primary"
                :disabled="special_days_loader" v-if="!bw_is_special_day_form_visible">
                <?php esc_html_e('Add', 'bookwellnow-appointment-booking'); ?>
            </el-button>
        </div>
        <div class="bw-drawer-body">
            <!-- List View -->
            <div class="bw-special-days-list" v-if="!bw_is_special_day_form_visible">
                <el-table :data="current_staff_special_days" style="width:100%" v-loading="special_days_loader">
                    <el-table-column label="<?php esc_html_e('Start Date', 'bookwellnow-appointment-booking'); ?>"
                        prop="bw_start_date"></el-table-column>
                    <el-table-column label="<?php esc_html_e('End Date', 'bookwellnow-appointment-booking'); ?>"
                        prop="bw_end_date"></el-table-column>
                    <el-table-column label="<?php esc_html_e('Off/Shift', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="{row}">
                            <el-tag :type="row.bw_is_off == 1 ? 'danger' : 'success'">
                                {{ row.bw_is_off == 1 ?
                                '<?php esc_html_e("Day Off", "bookwellnow-appointment-booking"); ?>' :
                                '<?php esc_html_e("Custom Shift", "bookwellnow-appointment-booking"); ?>' }}
                            </el-tag>
                            <div v-if="row.bw_is_off == 0" style="font-size: 12px; margin-top: 5px;">
                                {{ row.bw_start_time }} - {{ row.bw_end_time }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="<?php esc_html_e('Action', 'bookwellnow-appointment-booking'); ?>" width="120"
                        fixed="right">
                        <template #default="{row, $index}">
                            <el-button size="small" type="primary" circle @click="bwab_editSpecialDay(row)">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                    <path fill-rule="evenodd"
                                        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                                </svg>
                            </el-button>
                            <el-popconfirm @confirm="bwab_deleteSpecialDay(row.bw_special_day_id, $index)"
                                cancel-button-text="<?php esc_html_e('No', 'bookwellnow-appointment-booking'); ?>"
                                confirm-button-text="<?php esc_html_e('Yes', 'bookwellnow-appointment-booking'); ?>"
                                title="<?php esc_html_e('Delete this special day?', 'bookwellnow-appointment-booking'); ?>">
                                <template #reference>
                                    <el-button size="small" type="danger" circle>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                            fill="currentColor" viewBox="0 0 16 16">
                                            <path
                                                d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd"
                                                d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                        </svg>
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- Form View -->
            <div class="bw-special-day-form" v-if="bw_is_special_day_form_visible">
                <el-form label-position="top">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="<?php esc_html_e('Start Date', 'bookwellnow-appointment-booking'); ?>">
                                <el-date-picker v-model="special_day_form.bw_start_date" type="date"
                                    value-format="YYYY-MM-DD" placeholder="Select date"
                                    style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="<?php esc_html_e('End Date', 'bookwellnow-appointment-booking'); ?>">
                                <el-date-picker v-model="special_day_form.bw_end_date" type="date"
                                    value-format="YYYY-MM-DD" placeholder="Select date"
                                    style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="<?php esc_html_e('Special Day Option', 'bookwellnow-appointment-booking'); ?>">
                        <el-switch v-model="special_day_form.bw_is_off" active-value="1" inactive-value="0"
                            active-text="<?php esc_html_e('Day Off', 'bookwellnow-appointment-booking'); ?>"
                            inactive-text="<?php esc_html_e('Custom Shift', 'bookwellnow-appointment-booking'); ?>"></el-switch>
                    </el-form-item>

                    <el-row :gutter="20" v-if="special_day_form.bw_is_off == '0'">
                        <el-col :span="12">
                            <el-form-item
                                label="<?php esc_html_e('Shift Start Time', 'bookwellnow-appointment-booking'); ?>">
                                <el-select v-model="special_day_form.bw_start_time" size="large" filterable
                                    placeholder="Start time" style="width: 100%;">
                                    <el-option v-for="time in time_options" :key="time" :label="time"
                                        :value="time"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="<?php esc_html_e('Shift End Time', 'bookwellnow-appointment-booking'); ?>">
                                <el-select v-model="special_day_form.bw_end_time" size="large" filterable
                                    placeholder="End time" style="width: 100%;">
                                    <el-option v-for="time in time_options" :key="time" :label="time"
                                        :value="time"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <div v-if="special_day_form.bw_is_off == '0'">
                        <h4>
                            <?php esc_html_e('Breaks', 'bookwellnow-appointment-booking'); ?>
                            <el-button size="small" type="text" style="float: right;"
                                @click="special_day_break_dialog_visible = true"><?php esc_html_e('+ Add Break', 'bookwellnow-appointment-booking'); ?></el-button>
                        </h4>
                        <div class="bw-break-list" v-if="special_day_form.bw_breaks.length > 0">
                            <div v-for="(brk, bIndex) in special_day_form.bw_breaks" :key="bIndex"
                                class="bw-break-item">
                                {{ brk.start }} - {{ brk.end }}
                                <button type="button" class="bw-break-remove" @click="bwab_removeSpecialDayBreak(bIndex)"
                                    aria-label="<?php esc_attr_e('Remove break', 'bookwellnow-appointment-booking'); ?>">×</button>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 20px; text-align: right;">
                        <el-button
                            @click="bwab_cancelSpecialDayForm"><?php esc_html_e('Cancel', 'bookwellnow-appointment-booking'); ?></el-button>
                        <el-button type="primary" @click="bwab_saveSpecialDay"
                            :loading="special_day_save_loader"><?php esc_html_e('Save', 'bookwellnow-appointment-booking'); ?></el-button>
                    </div>
                </el-form>
            </div>
        </div>

        <!-- Special Day Break Dialog -->
        <el-dialog title="<?php echo esc_attr__('Add Break', 'bookwellnow-appointment-booking'); ?>" v-model="special_day_break_dialog_visible" width="30%" append-to-body>
            <el-form :model="special_day_break_form">
                <el-form-item label="<?php echo esc_attr__('Start Time', 'bookwellnow-appointment-booking'); ?>">
                    <el-select v-model="special_day_break_form.start" size="small" filterable placeholder="<?php echo esc_attr__('Start', 'bookwellnow-appointment-booking'); ?>"
                        style="width: 100%;">
                        <el-option v-for="time in time_options" :key="time" :label="time" :value="time"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="<?php echo esc_attr__('End Time', 'bookwellnow-appointment-booking'); ?>">
                    <el-select v-model="special_day_break_form.end" size="small" filterable placeholder="<?php echo esc_attr__('End', 'bookwellnow-appointment-booking'); ?>"
                        style="width: 100%;">
                        <el-option v-for="time in time_options" :key="time" :label="time" :value="time"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer bw-dialog-footer">
                <el-button @click="special_day_break_dialog_visible = false"><?php esc_html_e('Cancel', 'bookwellnow-appointment-booking'); ?></el-button>
                <el-button type="primary" @click="bwab_saveSpecialDayBreak"><?php esc_html_e('Confirm', 'bookwellnow-appointment-booking'); ?></el-button>
            </span>
        </el-dialog>
    </el-drawer>
</el-main>