<?php
defined('ABSPATH') || exit;
?>
<el-main v-cloak class="book-now-adm--container bw-appointments-page" id="all-page-main-container">
    <el-card shadow="never" class="bw-card bw-appointments-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('Appointments', '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" type="primary" class="bw-appointments-primary-btn" @click="bwab_addAppointment">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                        viewBox="0 0 16 16" style="margin-right: 5px;">
                        <path
                            d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                    </svg>
                    <?php esc_html_e('Add Appointment', '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-appointments-main-card" shadow="never">
                <div class="bw-box-card">
                    <div class="bw-page-filter">
                        <el-row type="flex" class="bw-appointments-filter-row" :gutter="32">
                            <el-col :xs="24" :sm="12" :md="12" :lg="5" :xl="5">
                                <div class="bw-form-element">
                                    <label class="el-form-item__label">
                                        <span
                                            class="bw-element-label"><?php esc_html_e('Search Appointment', 'bookwellnow-appointment-booking'); ?></span>
                                    </label>
                                    <el-input size="large" class="bw-form-control" v-model="filter.search"
                                        placeholder="<?php esc_html_e('Search Customer, Email, Phone...', 'bookwellnow-appointment-booking'); ?>"
                                        @input="bwab_searchAppointments" clearable>
                                    </el-input>
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="12" :lg="3" :xl="3">
                                <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 size="large" class="bw-form-control" v-model="filter.status"
                                        placeholder="<?php esc_html_e('Status', 'bookwellnow-appointment-booking'); ?>"
                                        @change="bwab_getAppointments" clearable style="width: 100%;">
                                        <el-option v-for="item in status_options" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
                                <div class="bw-form-element">
                                    <label class="el-form-item__label">
                                        <span
                                            class="bw-element-label"><?php esc_html_e('Date', 'bookwellnow-appointment-booking'); ?></span>
                                    </label>
                                    <el-date-picker size="large" class="bw-form-control" v-model="filter.date"
                                        type="date" placeholder="<?php esc_html_e('Pick a date', 'bookwellnow-appointment-booking'); ?>"
                                        @change="bwab_getAppointments" :format="bwab_getPickerFormat()"
                                        value-format="YYYY-MM-DD" style="width: 100%;"
                                        :first-day-of-week="el_first_day_of_week">
                                    </el-date-picker>
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="12" :lg="3" :xl="3">
                                <div class="bw-form-element">
                                    <label class="el-form-item__label">
                                        <span
                                            class="bw-element-label"><?php esc_html_e('Staff', 'bookwellnow-appointment-booking'); ?></span>
                                    </label>
                                    <el-select size="large" class="bw-form-control" v-model="filter.staff_id"
                                        placeholder="<?php esc_html_e('All Staffs', 'bookwellnow-appointment-booking'); ?>"
                                        @change="bwab_handleStaffChange" clearable style="width: 100%;">
                                        <el-option v-for="item in staff_list" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
                                <div class="bw-form-element">
                                    <label class="el-form-item__label">
                                        <span
                                            class="bw-element-label"><?php esc_html_e('Service', 'bookwellnow-appointment-booking'); ?></span>
                                    </label>
                                    <el-select size="large" class="bw-form-control" v-model="filter.service_id"
                                        placeholder="<?php esc_html_e('All Services', 'bookwellnow-appointment-booking'); ?>"
                                        @change="bwab_getAppointments" clearable style="width: 100%;">
                                        <el-option v-for="item in bwab_getFilteredServices()" :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="5" :xl="5">
                                <div class="bw-element-btn-group">
                                    <el-button size="large" plain class="bw-plain-btn bw-appointments-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-appointments-refresh-btn"
                                        @click="bwab_getAppointments" :loading="bw_list_loader == '1'">
                                        <?php esc_html_e('Refresh', 'bookwellnow-appointment-booking'); ?>
                                    </el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- Table -->
                    <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 appointments', '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-appointments-mobile-list" v-if="bw_list_loader == '0'">
                        <div v-if="!list_data || list_data.length === 0" class="bw-appt-mobile-empty">
                            <?php esc_html_e('No appointments found', 'bookwellnow-appointment-booking'); ?>
                        </div>
                        <article v-for="(row, index) in list_data" :key="'mobile-' + row.bw_appointment_id"
                            class="bw-appt-mobile-card">
                            <div class="bw-appt-mobile-card-head">
                                <span class="bw-appt-mobile-id">#{{ row.bw_appointment_id }}</span>
                                <el-tag size="small"
                                    :type="row.bw_status == 'approved' ? 'success' : (row.bw_status == 'pending' ? 'warning' : 'info')">
                                    {{ bwab_formatStatus(row.bw_status) }}
                                </el-tag>
                                <div class="bw-appt-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 class="bw-appt-mobile-block">
                                <div class="bw-appt-mobile-label"><?php esc_html_e('Customer', 'bookwellnow-appointment-booking'); ?></div>
                                <div class="bw-appt-mobile-value bw-appt-mobile-customer-name">{{ row.bw_customer_name }}</div>
                                <div class="bw-appt-mobile-meta">{{ row.bw_customer_email }}</div>
                                <div class="bw-appt-mobile-meta">{{ row.bw_customer_phone_code }} {{ row.bw_customer_phone }}</div>
                            </div>
                            <div class="bw-appt-mobile-block">
                                <div class="bw-appt-mobile-label"><?php esc_html_e('Service / Staff', 'bookwellnow-appointment-booking'); ?></div>
                                <div class="bw-appt-mobile-value">{{ row.bw_service_name }}</div>
                                <div class="bw-appt-mobile-meta">{{ row.bw_staff_name }}</div>
                                <div class="bw-meeting-links-row">
                                    <?php do_action('bookwellab_appointments_service_staff_mobile'); ?>
                                </div>
                            </div>
                            <div class="bw-appt-mobile-grid">
                                <div class="bw-appt-mobile-block">
                                    <div class="bw-appt-mobile-label"><?php esc_html_e('Date / Time', 'bookwellnow-appointment-booking'); ?></div>
                                    <div class="bw-appt-mobile-value">{{ bwab_formatDate(row.bw_date) }}</div>
                                    <div class="bw-appt-mobile-meta bw-appt-mobile-time">{{ bwab_formatTime(row.bw_time) }}</div>
                                    <div class="bw-appt-mobile-meta">{{ row.bw_duration }} <?php echo esc_html__('min', 'bookwellnow-appointment-booking'); ?></div>
                                </div>
                                <div class="bw-appt-mobile-block">
                                    <div class="bw-appt-mobile-label"><?php esc_html_e('Price', 'bookwellnow-appointment-booking'); ?></div>
                                    <div class="bw-appt-mobile-value bw-appt-mobile-price">
                                        <span v-if="settings_data.general.currency_position == 'after'">{{ row.bw_price }}{{ settings_data.general.currency_symbol }}</span>
                                        <span v-else>{{ settings_data.general.currency_symbol }}{{ row.bw_price }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="bw-appt-mobile-block bw-appt-mobile-payment">
                                <div class="bw-appt-mobile-label"><?php esc_html_e('Payment', 'bookwellnow-appointment-booking'); ?></div>
                                <div class="bw-appt-mobile-tags">
                                    <div class="bw-payment-tags-row">
                                        <el-tag size="small" type="info">{{ bwab_formatPaymentGateway(row.bw_payment_gateway) }}</el-tag>
                                        <el-tag size="small"
                                            :type="bwab_getPaymentStatusTagType(row.bw_payment_status)">
                                            {{ bwab_formatPaymentStatus(row.bw_payment_status) }}
                                        </el-tag>
                                    </div>
                                    <div v-if="bwab_getPaymentTransactionId(row)" class="bw-payment-transaction-id">
                                        <div class="bw-payment-transaction-id__label"><?php esc_html_e('Transaction ID', 'bookwellnow-appointment-booking'); ?></div>
                                        <div class="bw-payment-transaction-id__value" :title="bwab_getPaymentTransactionId(row)">{{ bwab_getPaymentTransactionId(row) }}</div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>

                    <div class="bw-table-wrapper bw-appointments-table-wrap bw-appointments-desktop-table" v-if="bw_list_loader == '0'">
                        <el-table :key="list_table_key" :data="list_data" class="bw-appointments-table" style="width: 100%"
                            row-key="bw_appointment_id"
                            empty-text="<?php esc_html_e('No appointments found', 'bookwellnow-appointment-booking'); ?>">
                            <el-table-column prop="bw_appointment_id" label="<?php echo esc_attr__('ID', 'bookwellnow-appointment-booking'); ?>" width="80"></el-table-column>

                            <el-table-column label="<?php echo esc_attr__('Customer', 'bookwellnow-appointment-booking'); ?>">
                                <template #default="scope">
                                    <div><strong>{{ scope.row.bw_customer_name }}</strong></div>
                                    <div style="font-size: 12px; color: #777;">{{ scope.row.bw_customer_email }}</div>
                                    <div style="font-size: 12px; color: #777;">{{ scope.row.bw_customer_phone_code }} {{ scope.row.bw_customer_phone }}</div>
                                </template>
                            </el-table-column>

                            <el-table-column label="<?php echo esc_attr__('Service / Staff', 'bookwellnow-appointment-booking'); ?>">
                                <template #default="scope">
                                    <div>{{ scope.row.bw_service_name }}</div>
                                    <div style="font-size: 12px; color: #555;">{{ scope.row.bw_staff_name }}</div>
                                    <div class="bw-meeting-links-row">
                                        <?php do_action('bookwellab_appointments_service_staff_column'); ?>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="<?php echo esc_attr__('Payment', 'bookwellnow-appointment-booking'); ?>"
                                min-width="210" width="210" align="left" header-align="left"
                                class-name="bw-payment-column">
                                <template #default="scope">
                                    <div class="bw-payment-tags">
                                        <div class="bw-payment-tags-row">
                                            <el-tag size="small" type="info">{{ bwab_formatPaymentGateway(scope.row.bw_payment_gateway) }}</el-tag>
                                            <el-tag size="small"
                                                :type="bwab_getPaymentStatusTagType(scope.row.bw_payment_status)">{{
                                                bwab_formatPaymentStatus(scope.row.bw_payment_status) }}</el-tag>
                                        </div>
                                        <div v-if="bwab_getPaymentTransactionId(scope.row)" class="bw-payment-transaction-id">
                                            <div class="bw-payment-transaction-id__label"><?php esc_html_e('Transaction ID', 'bookwellnow-appointment-booking'); ?></div>
                                            <div class="bw-payment-transaction-id__value" :title="bwab_getPaymentTransactionId(scope.row)">{{ bwab_getPaymentTransactionId(scope.row) }}</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="<?php echo esc_attr__('Date / Time', 'bookwellnow-appointment-booking'); ?>"
                                min-width="180" width="180" class-name="bw-datetime-column">
                                <template #default="scope">
                                    <div>{{ bwab_formatDate(scope.row.bw_date) }}</div>
                                    <div style="font-weight: bold;">{{ bwab_formatTime(scope.row.bw_time) }}</div>
                                    <div style="font-size: 12px;">{{ scope.row.bw_duration }} <?php echo esc_html__('min', 'bookwellnow-appointment-booking'); ?></div>
                                </template>
                            </el-table-column>

                            <el-table-column label="<?php echo esc_attr__('Price', 'bookwellnow-appointment-booking'); ?>" width="100">
                                <template #default="scope">
                                    <div v-if="settings_data.general.currency_position == 'after'">{{ scope.row.bw_price
                                        }}{{ settings_data.general.currency_symbol }}</div>
                                    <div v-else>{{ settings_data.general.currency_symbol }}{{ scope.row.bw_price }}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="bw_status" label="<?php echo esc_attr__('Status', 'bookwellnow-appointment-booking'); ?>" width="120">
                                <template #default="scope">
                                    <el-tag
                                        :type="scope.row.bw_status == 'approved' ? 'success' : (scope.row.bw_status == 'pending' ? 'warning' : 'info')">
                                        {{ bwab_formatStatus(scope.row.bw_status) }}
                                    </el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column label="<?php echo esc_attr__('Actions', 'bookwellnow-appointment-booking'); ?>" width="120" align="center" class-name="bw-actions-column">
                                <template #default="scope">
                                    <el-button type="primary" size="small" circle @click="bwab_editRow(scope.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(scope.row, scope.$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="scope.row.delete_loader == '1'"
                                                :loading="scope.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>
                    <!-- Pagination -->
                    <?php
                    $bookwellab_pagination_wrapper_class = 'bw-pagination-wrapper bw-admin-list-pagination bw-appointments-pagination';
                    require BOOKWELLAB_HTML_PATH . 'partials/admin_list_pagination.php';
                    ?>
                </div>
            </el-card>
        </div>
    </div>

    <!-- Edit Drawer (layout matches service add/edit drawer) -->
    <el-drawer class="bw-service-drawer" modal-class="bw-main-drawer" @closed="bwab_closeDrawer"
        v-model="bw_add_edit_popup" :with-header="false" size="50%" :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>{{ parseInt(appointment_form.bw_appointment_id, 10) > 0 ? '<?php echo esc_js(__('Edit Appointment', 'bookwellnow-appointment-booking')); ?>' : '<?php echo esc_js(__('Add Appointment', 'bookwellnow-appointment-booking')); ?>' }}</span>
                </div>
                <el-form :model="appointment_form" ref="bw_appt_frm" label-position="top">

                <el-divider content-position="left"><?php esc_html_e('Booking Details', 'bookwellnow-appointment-booking'); ?></el-divider>

                <el-row :gutter="16" class="bw-appt-form-row">
                    <el-col :span="12" :xs="24">
                        <el-form-item label="<?php esc_html_e('Staff', 'bookwellnow-appointment-booking'); ?>" prop="bw_staff_id"
                            :rules="[{ required: true, message: '<?php echo esc_js(__('Required', 'bookwellnow-appointment-booking')); ?>', trigger: 'change' }]">
                            <el-select v-model="appointment_form.bw_staff_id" style="width: 100%;"
                                placeholder="<?php esc_attr_e('Select staff', 'bookwellnow-appointment-booking'); ?>"
                                @change="bwab_onAppointmentStaffChange" clearable>
                                <el-option v-for="item in staff_list" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="<?php esc_html_e('Service', 'bookwellnow-appointment-booking'); ?>" prop="bw_service_id"
                            :rules="[{ required: true, message: '<?php echo esc_js(__('Required', 'bookwellnow-appointment-booking')); ?>', trigger: 'change' }]">
                            <div class="bw-appt-service-extra-row">
                                <el-select v-model="appointment_form.bw_service_id" class="bw-appt-service-select" style="width: 100%;"
                                    placeholder="<?php esc_attr_e('Select service', 'bookwellnow-appointment-booking'); ?>"
                                    @change="bwab_onAppointmentServiceChange" clearable>
                                    <el-option v-for="item in bwab_getFormFilteredServices()" :key="item.value"
                                        :label="item.label" :value="item.value"></el-option>
                                </el-select>
                                <?php do_action('bookwellab_appointment_admin_service_actions'); ?>
                            </div>
                            <div class="bw-appt-service-meeting-actions">
                                <?php
                                /**
                                 * Meeting links (Zoom / Google Meet) below the service row.
                                 */
                                do_action('bookwellab_appointment_admin_meeting_actions');
                                ?>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="16" class="bw-appt-form-row">
                    <el-col :span="12" :xs="24">
                        <el-form-item label="<?php esc_html_e('Date', 'bookwellnow-appointment-booking'); ?>" prop="bw_date"
                            :rules="[{ required: true, message: '<?php echo esc_js(__('Required', 'bookwellnow-appointment-booking')); ?>', trigger: 'change' }]">
                            <el-date-picker v-model="appointment_form.bw_date" type="date" style="width: 100%;"
                                placeholder="<?php esc_attr_e('Pick a date', 'bookwellnow-appointment-booking'); ?>"
                                :format="bwab_getPickerFormat()" value-format="YYYY-MM-DD"
                                :disabled="!appointment_form.bw_staff_id || !appointment_form.bw_service_id"
                                :disabled-date="bwab_isAppointmentDateDisabled"
                                :first-day-of-week="el_first_day_of_week"
                                @change="bwab_onAppointmentDateChange"
                                @panel-change="bwab_onAppointmentCalendarPanelChange">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="<?php esc_html_e('Time', 'bookwellnow-appointment-booking'); ?>" prop="bw_time"
                            :rules="[{ required: true, message: '<?php echo esc_js(__('Required', 'bookwellnow-appointment-booking')); ?>', trigger: 'change' }]">
                            <el-select v-model="appointment_form.bw_time" style="width: 100%;"
                                placeholder="<?php esc_attr_e('Time', 'bookwellnow-appointment-booking'); ?>"
                                :disabled="!appointment_form.bw_date"
                                :loading="appointment_form.appointment_availability_loading">
                                <el-option v-for="slot in appointment_form.appointment_time_slots" :key="slot"
                                    :label="bwab_formatTime(slot)" :value="slot"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-divider content-position="left"><?php esc_html_e('Status & Payment', 'bookwellnow-appointment-booking'); ?></el-divider>

                <el-row :gutter="16" class="bw-appt-form-row">
                    <el-col :span="8" :xs="24">
                        <el-form-item label="<?php esc_html_e('Status', 'bookwellnow-appointment-booking'); ?>" prop="bw_status">
                            <el-select v-model="appointment_form.bw_status" style="width: 100%;">
                                <el-option v-for="item in status_options" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :xs="24">
                        <el-form-item label="<?php esc_html_e('Payment Gateway', 'bookwellnow-appointment-booking'); ?>"
                            prop="bw_payment_gateway">
                            <el-select v-model="appointment_form.bw_payment_gateway" style="width: 100%;"
                                placeholder="<?php esc_attr_e('Select payment gateway', 'bookwellnow-appointment-booking'); ?>">
                                <el-option v-for="item in payment_gateway_options" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :xs="24">
                        <el-form-item label="<?php esc_html_e('Payment Status', 'bookwellnow-appointment-booking'); ?>"
                            prop="bw_payment_status">
                            <el-select v-model="appointment_form.bw_payment_status" style="width: 100%;"
                                placeholder="<?php esc_attr_e('Select Status', 'bookwellnow-appointment-booking'); ?>">
                                <el-option v-for="item in payment_status_options" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

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

                <el-divider content-position="left"><?php esc_html_e('Customer Details', 'bookwellnow-appointment-booking'); ?></el-divider>

                <el-form-item class="bw-appt-customer-form-item" label="<?php esc_html_e('Customers', 'bookwellnow-appointment-booking'); ?>" prop="bw_customer_id"
                    :rules="[{ required: true, message: '<?php echo esc_js(__('Customer field is required', 'bookwellnow-appointment-booking')); ?>', trigger: 'change' }]">
                    <el-row :gutter="12" class="bw-appt-customer-select-row" type="flex" align="middle">
                        <el-col :span="18" :xs="16">
                            <el-select v-model="appointment_form.bw_customer_id" class="bw-appt-customer-select"
                                size="large" filterable remote reserve-keyword clearable style="width: 100%;"
                                :placeholder="'<?php echo esc_js(__('Search by name, email or phone', 'bookwellnow-appointment-booking')); ?>'"
                                :remote-method="bwab_searchAppointmentCustomers"
                                :loading="appointment_customer_search_loading"
                                @change="bwab_onAppointmentCustomerSelect"
                                @clear="bwab_onAppointmentCustomerClear">
                                <el-option v-for="item in appointment_customer_options" :key="item.bw_customer_id"
                                    :label="bwab_getCustomerOptionLabel(item)" :value="item.bw_customer_id">
                                    <div class="bw-appt-customer-option">
                                        <span class="bw-appt-customer-option-name">{{ bwab_getCustomerDisplayName(item) }}</span><span
                                            v-if="item.bw_email" class="bw-appt-customer-option-email"> ({{ item.bw_email }})</span>
                                    </div>
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="6" :xs="8">
                            <el-button type="primary" size="large" class="bw-appt-customer-add-btn" style="width: 100%;"
                                @click="bwab_openAppointmentCustomerDialog">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                                    viewBox="0 0 16 16" style="margin-right: 5px;">
                                    <path
                                        d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                                </svg>
                                <?php esc_html_e('Customer', 'bookwellnow-appointment-booking'); ?>
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>

                <div class="bw-appt-customer-hidden-fields" aria-hidden="true">
                    <input type="hidden" v-model="appointment_form.bw_customer_name">
                    <input type="hidden" v-model="appointment_form.bw_customer_email">
                    <input type="hidden" v-model="appointment_form.bw_customer_phone_code">
                    <input type="hidden" v-model="appointment_form.bw_customer_phone">
                    <input type="hidden" v-model="appointment_form.bw_customer_country_slug">
                </div>

                <?php
                /**
                 * Custom / Pro form fields between Customers and Note.
                 */
                do_action('bookwellab_appointment_admin_customer_fields');
                ?>

                <el-form-item label="<?php esc_html_e('Note', 'bookwellnow-appointment-booking'); ?>" prop="bw_note">
                    <el-input type="textarea" v-model="appointment_form.bw_note" :rows="3"></el-input>
                </el-form-item>

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

                </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" size="large" type="primary" @click="bwab_saveAppointment"
                    :disabled="insert_loader == '1'" :loading="insert_loader == '1'">
                    {{ parseInt(appointment_form.bw_appointment_id, 10) > 0 ? '<?php echo esc_js(__('Update', 'bookwellnow-appointment-booking')); ?>' : '<?php echo esc_js(__('Save', 'bookwellnow-appointment-booking')); ?>' }}
                </el-button>
            </div>
        </div>
    </el-drawer>

    <el-dialog v-model="appointment_customer_dialog_visible" class="bw-customers-dialog bw-appt-customer-dialog"
        :title="'<?php echo esc_attr__('Add New Customer', 'bookwellnow-appointment-booking'); ?>'" width="500px"
        append-to-body @opened="bwab_initApptCustomerIti">
        <el-form :model="appointment_customer_form" :rules="appointment_customer_form_rules"
            ref="bw_appt_customer_frm" label-position="top" class="bw-customer-dialog-form">
            <el-row :gutter="16" class="bw-customer-name-row">
                <el-col :span="12" :xs="24">
                    <el-form-item label="<?php esc_attr_e('First Name', 'bookwellnow-appointment-booking'); ?>"
                        prop="bw_first_name">
                        <el-input v-model="appointment_customer_form.bw_first_name" size="large"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                    <el-form-item label="<?php esc_attr_e('Last Name', 'bookwellnow-appointment-booking'); ?>"
                        prop="bw_last_name">
                        <el-input v-model="appointment_customer_form.bw_last_name" size="large"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="<?php esc_attr_e('Email', 'bookwellnow-appointment-booking'); ?>" prop="bw_email">
                <el-input v-model="appointment_customer_form.bw_email" size="large"></el-input>
            </el-form-item>
            <el-form-item label="<?php esc_attr_e('Phone', 'bookwellnow-appointment-booking'); ?>" prop="bw_phone">
                <div class="bw-phone-wrapper">
                    <input type="tel" id="bw_appt_customer_phone" v-model="appointment_customer_form.bw_phone"
                        class="el-input__inner" style="width: 100%;">
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer bw-dialog-footer bw-customer-dialog-footer">
                <el-button size="large" @click="appointment_customer_dialog_visible = false">
                    <?php esc_html_e('Cancel', 'bookwellnow-appointment-booking'); ?>
                </el-button>
                <el-button size="large" type="primary" @click="bwab_saveAppointmentCustomer"
                    :loading="appointment_customer_save_loader == '1'">
                    <?php esc_html_e('Save', 'bookwellnow-appointment-booking'); ?>
                </el-button>
            </span>
        </template>
    </el-dialog>

</el-main>