<?php
defined('ABSPATH') || exit;
?>
<el-main v-cloak class="book-now-adm--container bw-services-page" id="all-page-main-container">
    <el-card shadow="never" class="bw-card bw-services-header-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('Manage Services', 'bookwellnow-appointment-booking'); ?></h3>
            </el-col>
            <el-col class="bw-right-align" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-button size="large" class="bw-services-manage-categories-btn" @click="bwab_openCategoryManager"
                    style="margin-right: 10px;">
                    <span class="bw-services-btn-label">
                        <span class="dashicons dashicons-screenoptions bw-services-btn-icon" aria-hidden="true"></span>
                        <?php esc_html_e('Manage Categories', 'bookwellnow-appointment-booking'); ?>
                    </span>
                </el-button>
                <el-button size="large" class="bw-services-primary-btn" type="primary" @click="bw_add_edit_popup = true"><?php esc_html_e('Add Service', '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 bw-services-filter-card">
                <div class="bw-page-filter">
                    <el-row type="flex" class="bw-services-filter-row" :gutter="32">
                        <el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="10">
                            <div class="bw-form-element">
                                <label class="el-form-item__label">
                                    <span
                                        class="bw-element-label"><?php esc_html_e('Service Name', 'bookwellnow-appointment-booking'); ?></span>
                                </label>
                                <el-input size="large" class="bw-form-control" v-model="filter.bw_service_name"
                                    placeholder="<?php esc_html_e('Enter service name', 'bookwellnow-appointment-booking'); ?>">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="10">
                            <div class="bw-form-element">
                                <label class="el-form-item__label">
                                    <span
                                        class="bw-element-label"><?php esc_html_e('Service Category', 'bookwellnow-appointment-booking'); ?></span>
                                </label>
                                <el-select size="large" class="bookwell-form-control" v-model="filter.bw_category_id"
                                    placeholder="<?php esc_html_e('Select category', 'bookwellnow-appointment-booking'); ?>"
                                    :popper-append-to-body="false" popper-class="bw-filter-droup-down">
                                    <el-option v-for="item in all_category_list" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col class="bw-element-btn-group-col" :xs="24" :sm="24" :md="24" :lg="6" :xl="4">
                            <div class="bw-element-btn-group">
                                <el-button size="large" plain class="bw-plain-btn bw-services-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-services-apply-btn" @click="bwab_getServices">
                                    <?php esc_html_e('Apply', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <div v-if="bw_list_loader == '1'" class="bw-admin-loader-upper">
                <div class="bw-admin-dot-loader" aria-label="<?php echo esc_attr__('Loading services', '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-services-mobile-list" v-if="bw_list_loader == '0'">
                <div v-if="!list_data || list_data.length === 0" class="bw-svc-mobile-empty">
                    <?php esc_html_e('No services found.', 'bookwellnow-appointment-booking'); ?>
                </div>
                <article v-for="(row, index) in list_data" :key="'mobile-' + row.bw_service_id" class="bw-svc-mobile-card">
                    <div class="bw-svc-mobile-card-head">
                        <div class="bw-svc-mobile-head-left">
                            <div class="bw-drag-handle" aria-hidden="true">
                                <span class="dashicons dashicons-move"></span>
                            </div>
                            <img v-if="row.bw_service_image" :src="row.bw_service_image" class="bw-svc-mobile-image"
                                :alt="row.bw_service_name">
                            <span v-else class="bw-svc-mobile-image-placeholder">-</span>
                            <div class="bw-svc-mobile-title-wrap">
                                <span class="bw-svc-mobile-id">#{{ row.bw_service_id }}</span>
                                <div class="bw-svc-mobile-name">{{ row.bw_service_name }}</div>
                            </div>
                        </div>
                        <div class="bw-svc-mobile-head-right">
                            <el-switch v-model="row.bw_service_status" :active-value="1" :inactive-value="0"
                                @change="bwab_toggleServiceStatus(row)" :loading="row.status_loader"></el-switch>
                            <div class="bw-svc-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 width="220" @confirm="bwab_deleteRow(row, index)"
                                    confirm-button-text="<?php esc_html_e('OK', 'bookwellnow-appointment-booking'); ?>"
                                    cancel-button-text="<?php esc_html_e('No, Thanks', 'bookwellnow-appointment-booking'); ?>"
                                    icon-color="#626AEF"
                                    title="<?php esc_html_e('Are you sure to delete this?', 'bookwellnow-appointment-booking'); ?>">
                                    <template #reference>
                                        <el-button :disabled="row.delete_loader == '1'" :loading="row.delete_loader == '1'"
                                            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>
                            </div>
                        </div>
                    </div>
                    <div class="bw-svc-mobile-grid">
                        <div class="bw-svc-mobile-block">
                            <div class="bw-svc-mobile-label"><?php esc_html_e('Duration', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-svc-mobile-value">{{ row.bw_service_duration }}</div>
                        </div>
                        <div class="bw-svc-mobile-block">
                            <div class="bw-svc-mobile-label"><?php esc_html_e('Price', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-svc-mobile-value">{{ row.bw_service_price_formated }}</div>
                        </div>
                    </div>
                    <div class="bw-svc-mobile-block">
                        <div class="bw-svc-mobile-label"><?php esc_html_e('Category', 'bookwellnow-appointment-booking'); ?></div>
                        <div class="bw-svc-mobile-value">{{ row.bw_category_name || '-' }}</div>
                    </div>
                    <div class="bw-svc-mobile-block">
                        <div class="bw-svc-mobile-label"><?php esc_html_e('Assigned Staff', 'bookwellnow-appointment-booking'); ?></div>
                        <div v-if="row.bw_service_staff && row.bw_service_staff.length > 0" class="bw-svc-mobile-staff">
                            <span>{{ row.bw_service_staff[0].bw_staff_name }}</span>
                            <span v-if="row.bw_service_staff.length > 1" class="bw-svc-mobile-staff-more">
                                +{{ row.bw_service_staff.length - 1 }}
                            </span>
                        </div>
                        <div v-else class="bw-svc-mobile-meta">-</div>
                    </div>
                </article>
            </div>

            <div v-if="bw_list_loader == '0'" class="bw-admin-table bw-services-table-wrap bw-services-desktop-table">
                <el-table :data="list_data" style="width: 100%" class="bw-services-table" row-key="bw_service_id">
                    <el-table-column width="90" prop="bw_service_id"
                        label="<?php esc_html_e('ID', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="{ row }">
                            <span>#{{row.bw_service_id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column width="90" align="center"
                        label="<?php esc_html_e('Image', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="{ row }">
                            <img v-if="row.bw_service_image" :src="row.bw_service_image" class="bw-service-list-image"
                                alt="<?php esc_attr_e('Service image', 'bookwellnow-appointment-booking'); ?>">
                            <span v-else class="bw-service-list-image-placeholder">-</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bw_service_name"
                        label="<?php esc_html_e('Name', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="{row, $index }">
                            <div class="bw-posistion-up-down bw-flex-start">
                                <div class="bw-drag-handle" style="cursor: move; margin-right: 10px;">
                                    <span class="dashicons dashicons-move"></span>
                                </div>
                                <div>{{row.bw_service_name}}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bw_service_duration"
                        label="<?php esc_html_e('Duration', 'bookwellnow-appointment-booking'); ?>"></el-table-column>
                    <el-table-column prop="bw_category_name"
                        label="<?php esc_html_e('Category', 'bookwellnow-appointment-booking'); ?>"></el-table-column>
                    <el-table-column prop="bw_service_price_formated"
                        label="<?php esc_html_e('Price', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="{ row }">
                            <span>{{ row.bw_service_price_formated }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="<?php esc_html_e('Assigned Staff', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="{ row }">
                            <div v-if="row.bw_service_staff && row.bw_service_staff.length > 0">
                                <el-popover placement="top" :width="200" trigger="hover">
                                    <template #reference>
                                        <span class="bw-staff-services-text" style="cursor: pointer;">
                                            {{ row.bw_service_staff[0].bw_staff_name }}
                                            <span v-if="row.bw_service_staff.length > 1" class="bw-service-count">
                                                +{{ row.bw_service_staff.length - 1 }}
                                            </span>
                                        </span>
                                    </template>
                                    <div class="bw-services-list">
                                        <div v-for="(staff, index) in row.bw_service_staff" :key="index"
                                            class="bw-service-item">
                                            {{ staff.bw_staff_name }}
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                            <div v-else>
                                -
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column width="100" prop="bw_service_status"
                        label="<?php esc_html_e('Status', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="{ row }">
                            <el-switch v-model="row.bw_service_status" :active-value="1" :inactive-value="0"
                                @change="bwab_toggleServiceStatus(row)" :loading="row.status_loader"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right"
                        label="<?php esc_html_e('Action', 'bookwellnow-appointment-booking'); ?>">
                        <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 width="220" @confirm="bwab_deleteRow(row,$index)"
                                confirm-button-text="<?php esc_html_e('OK', 'bookwellnow-appointment-booking'); ?>"
                                cancel-button-text="<?php esc_html_e('No, Thanks', 'bookwellnow-appointment-booking'); ?>"
                                :icon="InfoFilled" icon-color="#626AEF"
                                title="<?php esc_html_e('Are you sure to delete this?', 'bookwellnow-appointment-booking'); ?>">
                                <template #reference>
                                    <el-button :disabled="row.delete_loader == '1'" :loading="row.delete_loader == '1'"
                                        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>

        </div>
    </div>

    <el-drawer class="bw-service-drawer" modal-class="bw-main-drawer" @closed="bwab_closeDrawer"
        v-model="bw_add_edit_popup" :with-header="false" :direction="drawer_direction">
        <div class="bw-service-drawer-layout">
            <div class="bw-drawer-body bw-service-drawer-body">
                <div class="bw-service-drawer-title">
                    <span v-if="service_form.bw_service_id"><?php esc_html_e('Edit Service', 'bookwellnow-appointment-booking'); ?></span>
                    <span v-else><?php esc_html_e('Add Service', 'bookwellnow-appointment-booking'); ?></span>
                </div>
                <el-form ref="bw_service_frm" :rules="form_rules" :model="service_form" label-position="top"
                    @submit.native.prevent>

                <div class="bw-form-element">
                    <el-form-item>
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Service Image:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <div class="bw-service-image-upload-wrapper"
                            style="display: flex; align-items: center; gap: 15px;">
                            <div v-if="service_form.bw_service_image" class="bw-service-image-preview">
                                <img :src="service_form.bw_service_image"
                                    style="width: 60px; height: 60px; border-radius: 8px; object-fit: cover; border: 1px solid #dcdfe6;">
                            </div>
                            <div class="bw-service-image-actions">
                                <el-button v-if="!service_form.bw_service_image" type="primary"
                                    @click="bwab_uploadServiceImage">
                                    <?php esc_html_e('Upload Photo', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                                <div v-else>
                                    <el-button type="primary" link
                                        @click="bwab_uploadServiceImage"><?php esc_html_e('Change', 'bookwellnow-appointment-booking'); ?></el-button>
                                    <el-button type="danger" link
                                        @click="bwab_removeServiceImage"><?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_service_name">
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Service Name:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-input size="large" class="bw-form-fields-control" v-model="service_form.bw_service_name"
                            id="bw_service_name" name="bw_service_name"
                            placeholder="<?php esc_html_e('Enter service name', 'bookwellnow-appointment-booking'); ?>">
                        </el-input>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item prop="bw_category_id">
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Category:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-select class="bw-form-fields-control" size="large" v-model="service_form.bw_category_id"
                            placeholder="<?php esc_html_e('Select category', 'bookwellnow-appointment-booking'); ?>"
                            popper-class="bw-el-select--is-with-modal">
                            <el-option v-for="item in all_category_list" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item prop="bw_service_status">
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Service Status:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-switch v-model="service_form.bw_service_status" :active-value="1" :inactive-value="0"
                            active-text="<?php esc_html_e('Active', 'bookwellnow-appointment-booking'); ?>"
                            inactive-text="<?php esc_html_e('Inactive', 'bookwellnow-appointment-booking'); ?>">
                        </el-switch>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item prop="bw_service_price">
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Service Price:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-input size="large" class="bw-form-fields-control"
                            v-model="service_form.bw_service_price" id="bw_service_price" name="bw_service_price"
                            placeholder="<?php esc_html_e('Enter service price', 'bookwellnow-appointment-booking'); ?>">
                            <template #prepend>{{ settings_data.general.currency_symbol }}</template>
                        </el-input>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item prop="bw_service_duration_val">
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Service Duration:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-row class="bw-form-element-row" type="flex" :gutter="0">
                            <el-col class="bw-pading-right-15" :span="14">
                                <el-input-number size="large"
                                    class="bw-form-fields-control bookwell-form-control--number" :min="1"
                                    v-model="service_form.bw_service_duration_val" id="bw_service_duration_val"
                                    name="bw_service_duration_val" step-strictly></el-input-number>
                            </el-col>
                            <el-col :span="10">
                                <el-select size="large" class="bw-form-fields-control"
                                    v-model="service_form.bw_service_duration_unit"
                                    popper-class="bookwell-el-select--is-with-modal">
                                    <el-option key="m"
                                        label="<?php esc_html_e('Mins', 'bookwellnow-appointment-booking'); ?>"
                                        value="m"></el-option>
                                    <el-option key="h"
                                        label="<?php esc_html_e('Hours', 'bookwellnow-appointment-booking'); ?>"
                                        value="h"></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item>
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Staff:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-select class="bw-form-fields-control" multiple filterable
                            placeholder="<?php esc_html_e('Select staff', 'bookwellnow-appointment-booking'); ?>"
                            v-model="service_form.bw_service_staff">
                            <el-option v-for="staff in staff_list" :key="staff.bw_staff_id"
                                :label="staff.bw_staff_name" :value="staff.bw_staff_id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="bw-form-element">
                    <el-form-item prop="bw_service_description">
                        <template #label>
                            <span
                                class="bw-element-label"><?php esc_html_e('Service Description:', 'bookwellnow-appointment-booking'); ?></span>
                        </template>
                        <el-input size="large" type="textarea" class="bw-form-fields-control"
                            v-model="service_form.bw_service_description" id="bw_service_description"
                            name="bw_service_description" :rows="4"
                            placeholder="<?php esc_html_e('Enter service description', 'bookwellnow-appointment-booking'); ?>">
                        </el-input>
                    </el-form-item>
                </div>

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

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

    <el-dialog title="<?php esc_html_e('Manage Categories', 'bookwellnow-appointment-booking'); ?>"
        v-model="bw_manage_categories_popup" width="600px" class="bw-category-dialog" append-to-body>

        <el-form :model="category_form" ref="bw_category_frm" class="bw-category-dialog-form"
            @submit.native.prevent>
            <div class="bw-category-form-row">
                <el-form-item prop="bw_category_name" class="bw-category-name-item">
                    <el-input v-model="category_form.bw_category_name" class="bw-category-name-input"
                        placeholder="<?php esc_html_e('Category Name', 'bookwellnow-appointment-booking'); ?>">
                    </el-input>
            </el-form-item>
                <div class="bw-category-form-actions">
                <el-button v-if="!category_form.bw_category_id" type="primary"
                    @click="bwab_addCategory"><?php esc_html_e('Add New', 'bookwellnow-appointment-booking'); ?></el-button>
                <el-button v-else type="primary"
                    @click="bwab_addCategory"><?php esc_html_e('Update', 'bookwellnow-appointment-booking'); ?></el-button>
                <el-button v-if="category_form.bw_category_id"
                    @click="category_form = JSON.parse(JSON.stringify(category_form_reset))"><?php esc_html_e('Cancel', 'bookwellnow-appointment-booking'); ?></el-button>
                </div>
            </div>
        </el-form>

        <div class="bw-categories-mobile-list">
            <div v-if="!category_list || category_list.length === 0" class="bw-cat-mobile-empty">
                <?php esc_html_e('No categories found.', 'bookwellnow-appointment-booking'); ?>
            </div>
            <article v-for="row in category_list" :key="'cat-mobile-' + row.bw_category_id" class="bw-cat-mobile-card">
                <div class="bw-cat-mobile-card-head">
                    <div class="bw-drag-handle bw-category-drag-handle" aria-hidden="true">
                        <span class="dashicons dashicons-move"></span>
                    </div>
                    <div class="bw-cat-mobile-name">{{ row.bw_category_name }}</div>
                    <div class="bw-category-action-buttons">
                        <el-button type="primary" size="small" circle
                            @click="category_form = JSON.parse(JSON.stringify(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-button type="danger" size="small" circle @click="bwab_deleteCategory(row)">
                            <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>
                    </div>
                </div>
            </article>
        </div>

        <el-table :data="category_list" style="width: 100%; margin-top: 10px;"
            class="bw-categories-table bw-categories-desktop-table"
            row-key="bw_category_id" border>
            <el-table-column width="60" align="center">
                <template #default>
                    <div class="bw-drag-handle bw-category-drag-handle" aria-hidden="true">
                        <span class="dashicons dashicons-move"></span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="bw_category_name"
                label="<?php esc_html_e('Category Name', 'bookwellnow-appointment-booking'); ?>"></el-table-column>
            <el-table-column width="120" align="center"
                label="<?php esc_html_e('Action', 'bookwellnow-appointment-booking'); ?>">
                <template #default="{ row }">
                    <div class="bw-category-action-buttons">
                        <el-button type="primary" size="small" icon="el-icon-edit" circle
                            @click="category_form = JSON.parse(JSON.stringify(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-button type="danger" size="small" icon="el-icon-delete" circle
                            @click="bwab_deleteCategory(row)">
                            <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>
                    </div>
                </template>
            </el-table-column>
        </el-table>

    </el-dialog>

</el-main>