<?php
defined('ABSPATH') || exit;
?>
<el-main v-cloak class="book-now-adm--container bw-customers-page" id="all-page-main-container">
    <el-card shadow="never" class="bw-card bw-customers-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 Customers', '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-customers-primary-btn" @click="bwab_openAddPopup">
                    <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 New', '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-customers-filter-card">
                <div class="bw-page-filter">
                    <el-row type="flex" class="bw-customers-filter-row" :gutter="32">
                        <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="20">
                            <div class="bw-form-element">
                                <label class="el-form-item__label">
                                    <span
                                        class="bw-element-label"><?php esc_html_e('Search customer', 'bookwellnow-appointment-booking'); ?></span>
                                </label>
                                <el-input size="large" class="bw-form-control" v-model="filter.search"
                                    placeholder="<?php esc_attr_e('Search customer', 'bookwellnow-appointment-booking'); ?>"
                                    @keyup.enter="bwab_getCustomers">
                                </el-input>
                            </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-customers-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-customers-apply-btn"
                                    @click="bwab_getCustomers">
                                    <?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 customers', '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-customers-mobile-list" v-if="bw_list_loader == '0'">
                <div v-if="!list_data || list_data.length === 0" class="bw-customer-mobile-empty">
                    <?php esc_html_e('No customers found', 'bookwellnow-appointment-booking'); ?>
                </div>
                <article v-for="(row, index) in list_data" :key="'mobile-customer-' + row.bw_customer_id"
                    class="bw-customer-mobile-card">
                    <div class="bw-customer-mobile-card-head">
                        <div class="bw-customer-mobile-name">{{ row.bw_first_name }} {{ row.bw_last_name }}</div>
                        <div class="bw-customer-mobile-actions">
                            <el-button size="small" type="primary" circle @click="bwab_editRow(row)"
                                title="<?php esc_attr_e('Edit', 'bookwellnow-appointment-booking'); ?>">
                                <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_attr_e('OK', 'bookwellnow-appointment-booking'); ?>"
                                cancel-button-text="<?php esc_attr_e('No, Thanks', 'bookwellnow-appointment-booking'); ?>"
                                icon-color="#626AEF"
                                title="<?php esc_attr_e('Are you sure to delete this?', 'bookwellnow-appointment-booking'); ?>">
                                <template #reference>
                                    <el-button size="small" type="danger" :disabled="row.delete_loader == '1'"
                                        :loading="row.delete_loader == '1'" circle
                                        title="<?php esc_attr_e('Delete', 'bookwellnow-appointment-booking'); ?>">
                                        <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-customer-mobile-block">
                        <div class="bw-customer-mobile-label"><?php esc_html_e('Email', 'bookwellnow-appointment-booking'); ?></div>
                        <div class="bw-customer-mobile-value">{{ row.bw_email }}</div>
                    </div>
                    <div class="bw-customer-mobile-block">
                        <div class="bw-customer-mobile-label"><?php esc_html_e('Phone', 'bookwellnow-appointment-booking'); ?></div>
                        <div class="bw-customer-mobile-value">{{ row.bw_phone_code }} {{ row.bw_phone }}</div>
                    </div>
                    <div class="bw-customer-mobile-grid">
                        <div class="bw-customer-mobile-block">
                            <div class="bw-customer-mobile-label"><?php esc_html_e('Recent Appointment', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-customer-mobile-value">
                                <span v-if="row.recent_appointment">{{ bwab_formatDate(row.recent_appointment) }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                        <div class="bw-customer-mobile-block">
                            <div class="bw-customer-mobile-label"><?php esc_html_e('Total Appointments', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-customer-mobile-value">{{ row.total_appointments || 0 }}</div>
                        </div>
                    </div>
                </article>

                <?php
                $bookwellab_pagination_wrapper_class = 'bw-pagination-wrapper bw-admin-list-pagination bw-customers-pagination';
                require BOOKWELLAB_HTML_PATH . 'partials/admin_list_pagination.php';
                ?>
            </div>

            <div class="bw-admin-table bw-customers-table-wrap bw-customers-desktop-table" v-if="bw_list_loader == '0'">
                <el-table :data="list_data" style="width: 100%" class="bw-custom-table">


                    <el-table-column prop="bw_first_name"
                        label="<?php esc_attr_e('Full Name', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="scope">
                            <span class="bw-customer-name">{{ scope.row.bw_first_name }} {{ scope.row.bw_last_name
                                }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="bw_email" label="<?php esc_attr_e('Email', 'bookwellnow-appointment-booking'); ?>"></el-table-column>

                    <el-table-column label="<?php esc_attr_e('Phone', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="scope">
                            <span>{{ scope.row.bw_phone_code }} {{ scope.row.bw_phone }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="recent_appointment"
                        label="<?php esc_attr_e('Recent Appointment', 'bookwellnow-appointment-booking'); ?>">
                        <template #default="scope">
                            <span v-if="scope.row.recent_appointment">{{ bwab_formatDate(scope.row.recent_appointment)
                                }}</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="total_appointments"
                        label="<?php esc_attr_e('Total Appointments', 'bookwellnow-appointment-booking'); ?>" align="center"></el-table-column>

                    <el-table-column label="<?php esc_attr_e('Actions', 'bookwellnow-appointment-booking'); ?>" width="120"
                        align="right" fixed="right">
                        <template #default="scope">
                            <el-button size="small" type="primary" circle @click="bwab_editRow(scope.row)"
                                title="<?php esc_attr_e('Edit', 'bookwellnow-appointment-booking'); ?>">
                                <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_attr_e('OK', 'bookwellnow-appointment-booking'); ?>"
                                cancel-button-text="<?php esc_attr_e('No, Thanks', 'bookwellnow-appointment-booking'); ?>"
                                icon-color="#626AEF"
                                title="<?php esc_attr_e('Are you sure to delete this?', 'bookwellnow-appointment-booking'); ?>">
                                <template #reference>
                                    <el-button size="small" type="danger" :disabled="scope.row.delete_loader == '1'"
                                        :loading="scope.row.delete_loader == '1'" circle
                                        title="<?php esc_attr_e('Delete', 'bookwellnow-appointment-booking'); ?>">
                                        <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>

                <?php
                $bookwellab_pagination_wrapper_class = 'bw-pagination-wrapper bw-admin-list-pagination bw-customers-pagination';
                require BOOKWELLAB_HTML_PATH . 'partials/admin_list_pagination.php';
                ?>
            </div>
        </div>
    </div>

    <!-- Add/Edit Customer Dialog -->
    <el-dialog v-model="bw_add_edit_popup" class="bw-customers-dialog" append-to-body
        :title="customer_form.bw_customer_id == 0 ? '<?php echo esc_attr__('Add New Customer', 'bookwellnow-appointment-booking'); ?>' : '<?php echo esc_attr__('Edit Customer', 'bookwellnow-appointment-booking'); ?>'"
        width="500px">
        <el-form :model="customer_form" :rules="form_rules" ref="bw_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="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="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="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_customer_phone" v-model="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="bw_add_edit_popup = false"><?php esc_html_e('Cancel', 'bookwellnow-appointment-booking'); ?></el-button>
                <el-button size="large" type="primary" @click="bwab_saveCustomer"
                    :loading="insert_loader == '1'"><?php esc_html_e('Save', 'bookwellnow-appointment-booking'); ?></el-button>
            </span>
        </template>
    </el-dialog>
</el-main>