<?php
defined('ABSPATH') || exit;
$bookwellab_cp_dir = is_rtl() ? 'rtl' : 'ltr';
$bookwellab_cp_rtl_class = is_rtl() ? ' bw-rtl' : '';
?>
<style>#bookwellab_customer_panel_app[v-cloak],#bookwellab_customer_panel_app[v-cloak] *{display:none !important;}</style>
<div id="bookwellab_customer_panel_app" class="bw-cp-app bw-force-fullwidth alignwide alignfull<?php echo esc_attr( $bookwellab_cp_rtl_class ); ?>" dir="<?php echo esc_attr( $bookwellab_cp_dir ); ?>" v-cloak>
    <div v-if="!isLoggedIn" class="bw-cp-login-card">
        <el-form v-if="!showForgot" label-position="top" class="bw-cp-login-form" @submit.prevent="doLogin">
            <h3 class="bw-cp-login-title">{{ labels.login_title }}</h3>
            <el-form-item :label="labels.login_username" required>
                <el-input
                    v-model="loginForm.username"
                    :placeholder="labels.login_username_placeholder"
                    :class="{ 'bw-cp-input-error': loginErrors.username }"
                    @input="loginErrors.username = false"
                    @keyup.enter="doLogin"></el-input>
            </el-form-item>
            <el-form-item :label="labels.login_password" required>
                <el-input
                    v-model="loginForm.password"
                    type="password"
                    show-password
                    :placeholder="labels.login_password_placeholder"
                    :class="{ 'bw-cp-input-error': loginErrors.password }"
                    @input="loginErrors.password = false"
                    @keyup.enter="doLogin"></el-input>
            </el-form-item>
            <el-checkbox v-model="loginForm.remember" class="bw-cp-login-remember">{{ labels.login_remember }}</el-checkbox>
            <el-button type="primary" class="bw-cp-login-submit" :loading="loggingIn" @click="doLogin">{{ labels.login_submit }}</el-button>
            <a href="#" class="bw-cp-login-lost" @click.prevent="openForgot">{{ labels.login_lost_password }}</a>
        </el-form>

        <el-form v-else label-position="top" class="bw-cp-login-form" @submit.prevent="doLostPassword">
            <h3 class="bw-cp-login-title">{{ labels.forgot_title }}</h3>
            <el-form-item :label="labels.forgot_username" required>
                <el-input
                    v-model="forgotForm.user_login"
                    :placeholder="labels.forgot_placeholder"
                    :class="{ 'bw-cp-input-error': forgotError }"
                    @input="forgotError = false"
                    @keyup.enter="doLostPassword"></el-input>
            </el-form-item>
            <el-button type="primary" class="bw-cp-login-submit" :loading="sendingForgot" @click="doLostPassword">{{ labels.forgot_submit }}</el-button>
            <a href="#" class="bw-cp-login-lost" @click.prevent="closeForgot">{{ labels.forgot_back }}</a>
        </el-form>
    </div>

    <div v-else class="bw-cp-shell">
        <div class="bw-cp-topbar">
            <div class="bw-cp-topbar-title">{{ labels.my_bookings }}</div>
            <div class="bw-cp-topbar-menu">
                <button type="button" class="bw-cp-topbar-toggle" :class="{ 'is-open': mobileMenuOpen }" @click="toggleMobileMenu">
                    <span class="bw-cp-topbar-avatar" aria-hidden="true">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="currentColor" stroke-width="1.5"/>
                            <path d="M4 21C4 17.134 7.13401 14 11 14H13C16.866 14 20 17.134 20 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </span>
                </button>
                <div class="bw-cp-topbar-dropdown" v-show="mobileMenuOpen">
                    <button type="button" class="bw-cp-nav-item" :class="{ active: activeTab === 'my_appointments' }" @click="setTab('my_appointments'); closeMobileMenu()">
                        <span class="bw-cp-nav-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8 2v3M16 2v3M3.5 9.5h17M4 6h16a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <span>{{ labels.my_appointments }}</span>
                    </button>
                    <button type="button" class="bw-cp-nav-item" :class="{ active: activeTab === 'edit_account' }" @click="setTab('edit_account'); closeMobileMenu()">
                        <span class="bw-cp-nav-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" stroke="currentColor" stroke-width="1.6"/>
                                <path d="M4 21c0-3.87 3.58-7 8-7s8 3.13 8 7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                            </svg>
                        </span>
                        <span>{{ labels.edit_account }}</span>
                    </button>
                    <button type="button" class="bw-cp-nav-item" :class="{ active: activeTab === 'change_password' }" @click="setTab('change_password'); closeMobileMenu()">
                        <span class="bw-cp-nav-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6 10V8a6 6 0 0 1 12 0v2M5 10h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 14v3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                            </svg>
                        </span>
                        <span>{{ labels.change_password }}</span>
                    </button>
                    <a class="bw-cp-nav-item" :href="logoutUrl">
                        <span class="bw-cp-nav-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M15 12H4M4 12l3.5-3.5M4 12l3.5 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M9 4h9a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <span>{{ labels.logout }}</span>
                    </a>
                </div>
            </div>
        </div>

        <aside class="bw-cp-sidebar">
            <div class="bw-cp-profile">
                <div class="bw-cp-avatar" aria-hidden="true">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="currentColor" stroke-width="1.5"/>
                        <path d="M4 21C4 17.134 7.13401 14 11 14H13C16.866 14 20 17.134 20 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                </div>
                <div class="bw-cp-profile-name">{{ profile.display_name }}</div>
                <div class="bw-cp-profile-email">{{ profile.email }}</div>
            </div>

            <nav class="bw-cp-nav">
                <button type="button" class="bw-cp-nav-item" :class="{ active: activeTab === 'my_appointments' }" @click="setTab('my_appointments')">
                    <span class="bw-cp-nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8 2v3M16 2v3M3.5 9.5h17M4 6h16a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                    <span>{{ labels.my_appointments }}</span>
                </button>
                <button type="button" class="bw-cp-nav-item" :class="{ active: activeTab === 'edit_account' }" @click="setTab('edit_account')">
                    <span class="bw-cp-nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" stroke="currentColor" stroke-width="1.6"/>
                            <path d="M4 21c0-3.87 3.58-7 8-7s8 3.13 8 7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <span>{{ labels.edit_account }}</span>
                </button>
                <button type="button" class="bw-cp-nav-item" :class="{ active: activeTab === 'change_password' }" @click="setTab('change_password')">
                    <span class="bw-cp-nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 10V8a6 6 0 0 1 12 0v2M5 10h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M12 14v3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <span>{{ labels.change_password }}</span>
                </button>
                <a class="bw-cp-nav-item bw-cp-nav-logout" :href="logoutUrl">
                    <span class="bw-cp-nav-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 12H4M4 12l3.5-3.5M4 12l3.5 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M9 4h9a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                    <span>{{ labels.logout }}</span>
                </a>
            </nav>
        </aside>

        <main class="bw-cp-main">
            <section v-if="activeTab === 'my_appointments'" class="bw-cp-section">
                <h2 class="bw-cp-title">{{ labels.my_bookings }}</h2>

                <div class="bw-cp-filters">
                    <el-date-picker
                        v-model="filters.date_range"
                        type="daterange"
                        value-format="YYYY-MM-DD"
                        :start-placeholder="labels.select_date"
                        :end-placeholder="labels.select_date"
                        :teleported="true"
                    ></el-date-picker>
                    <el-input v-model="filters.search" :placeholder="labels.search_appointments" clearable @keyup.enter="loadAppointments(1)" @clear="loadAppointments(1)"></el-input>
                    <el-button type="primary" @click="loadAppointments(1)" :loading="loadingAppointments">{{ labels.apply }}</el-button>
                </div>

                <div class="bw-cp-table-wrap" v-loading="loadingAppointments">
                    <div class="bw-cp-table" v-if="appointments.length">
                        <div class="bw-cp-table-row bw-cp-table-row--head">
                            <div class="bw-cp-table-cell bw-cp-table-cell--toggle" aria-hidden="true"></div>
                            <div class="bw-cp-table-cell bw-cp-table-cell--id">{{ labels.id }}</div>
                            <div class="bw-cp-table-cell bw-cp-table-cell--service">{{ labels.service }}</div>
                            <div class="bw-cp-table-cell bw-cp-table-cell--date">{{ labels.date }}</div>
                            <div class="bw-cp-table-cell bw-cp-table-cell--status">{{ labels.status }}</div>
                            <div class="bw-cp-table-cell bw-cp-table-cell--payment">{{ labels.payment }}</div>
                        </div>

                        <template v-for="(item, index) in appointments" :key="item.id">
                            <div
                                class="bw-cp-table-row"
                                :class="{ 'is-expanded': expandedAppointmentId === item.id, 'is-striped': index % 2 === 1 }"
                                @click="toggleAppointmentExpand(item.id)"
                            >
                                <div class="bw-cp-table-cell bw-cp-table-cell--toggle">
                                    <span class="bw-cp-expand-icon" :class="{ 'is-open': expandedAppointmentId === item.id }" aria-hidden="true"></span>
                                </div>
                                <div class="bw-cp-table-cell bw-cp-table-cell--id">#{{ item.id }}</div>
                                <div class="bw-cp-table-cell bw-cp-table-cell--service">
                                    <div class="bw-cp-service-name">{{ item.service_name }}</div>
                                    <div class="bw-cp-meeting-links-row">
                                        <div v-if="item.zoom_join_url" class="bw-cp-zoom-link-wrap" @click.stop>
                                            <el-tooltip
                                                effect="dark"
                                                placement="top"
                                                :content="labels.join_zoom_meeting"
                                                :show-after="100">
                                                <a
                                                    class="bw-cp-zoom-icon-link"
                                                    :href="item.zoom_join_url"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    :aria-label="labels.join_zoom_meeting">
                                                    <svg class="bw-cp-zoom-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
                                                        <path fill="currentColor" d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l3.45 2.59c.48.36 1.17.02 1.17-.58V8.49c0-.6-.69-.94-1.17-.58L17 10.5z"/>
                                                    </svg>
                                                </a>
                                            </el-tooltip>
                                        </div>
                                        <template v-for="link in (item.extra_meeting_links || [])" :key="link.key">
                                            <div v-if="link.url" class="bw-cp-zoom-link-wrap" @click.stop>
                                                <el-tooltip
                                                    effect="dark"
                                                    placement="top"
                                                    :content="link.label || labels.join_google_meet || ''"
                                                    :show-after="100">
                                                    <a
                                                        class="bw-cp-zoom-icon-link"
                                                        :href="link.url"
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        :aria-label="link.label || labels.join_google_meet || ''">
                                                        <svg class="bw-cp-zoom-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
                                                            <path fill="currentColor" d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l3.45 2.59c.48.36 1.17.02 1.17-.58V8.49c0-.6-.69-.94-1.17-.58L17 10.5z"/>
                                                        </svg>
                                                    </a>
                                                </el-tooltip>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div class="bw-cp-table-cell bw-cp-table-cell--date">
                                    <div class="bw-cp-service-date">{{ item.date_label }}</div>
                                    <div class="bw-cp-duration" v-if="item.duration_label">
                                        <svg class="bw-cp-duration-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.6"/>
                                            <path d="M12 7.5V12l3 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        <span>{{ item.duration_label }}</span>
                                    </div>
                                </div>
                                <div class="bw-cp-table-cell bw-cp-table-cell--status">
                                    <el-tag :type="statusTagType(item.status)" size="small">{{ item.status_label }}</el-tag>
                                </div>
                                <div class="bw-cp-table-cell bw-cp-table-cell--payment">{{ item.price_label }}</div>
                            </div>

                            <div class="bw-cp-table-expand" v-show="expandedAppointmentId === item.id" @click.stop>
                                <div class="bw-cp-expand">
                                    <div class="bw-cp-expand-head">
                                        <span class="bw-cp-expand-id">{{ labels.booking_id }}: #{{ item.id }}</span>
                                        <el-tag :type="statusTagType(item.status)" size="small">{{ item.status_label }}</el-tag>
                                    </div>
                                    <h4 class="bw-cp-expand-service">{{ item.service_name }}</h4>
                                    <div class="bw-cp-expand-row">
                                        <div class="bw-cp-expand-cell">
                                            <span class="bw-cp-expand-label">{{ labels.date }}:</span>
                                            <span class="bw-cp-expand-value">{{ item.date_only_label || item.date_label }}</span>
                                        </div>
                                        <div class="bw-cp-expand-cell" v-if="item.time_range">
                                            <span class="bw-cp-expand-label">{{ labels.time }}:</span>
                                            <span class="bw-cp-expand-value">{{ item.time_range }}</span>
                                        </div>
                                    </div>

                                    <div class="bw-cp-expand-section">
                                        <div class="bw-cp-expand-section-title">{{ labels.payment_details }}:</div>
                                        <div class="bw-cp-expand-line">
                                            <span class="bw-cp-expand-label">{{ labels.payment_method }}:</span>
                                            <span class="bw-cp-expand-value">{{ item.payment_gateway_label }}</span>
                                        </div>
                                        <div class="bw-cp-expand-line">
                                            <span class="bw-cp-expand-label">{{ labels.status }}:</span>
                                            <span class="bw-cp-expand-value" :class="'bw-cp-status--' + statusTagType(item.payment_status)">{{ item.payment_status_label }}</span>
                                        </div>
                                        <div class="bw-cp-expand-total">
                                            <span class="bw-cp-expand-label">{{ labels.total_amount }} :</span>
                                            <span class="bw-cp-expand-price">{{ item.price_label }}</span>
                                        </div>
                                    </div>

                                    <div class="bw-cp-expand-actions">
                                        <a
                                            v-if="item.zoom_join_url"
                                            class="bw-cp-btn-outline"
                                            :href="item.zoom_join_url"
                                            target="_blank"
                                            rel="noopener noreferrer">
                                            {{ labels.join_zoom_meeting }}
                                        </a>
                                        <template v-for="link in (item.extra_meeting_links || [])" :key="'action-' + link.key">
                                            <a
                                                v-if="link.url"
                                                class="bw-cp-btn-outline"
                                                :href="link.url"
                                                target="_blank"
                                                rel="noopener noreferrer">
                                                {{ link.label || labels.join_google_meet }}
                                            </a>
                                        </template>
                                        <el-popconfirm
                                            :title="labels.cancel_confirm"
                                            :width="260"
                                            popper-class="bw-cp-popconfirm"
                                            icon-color="#f59e0b"
                                            :confirm-button-text="labels.yes"
                                            :cancel-button-text="labels.no"
                                            confirm-button-type="primary"
                                            @confirm="cancelAppointment(item.id)"
                                            v-if="item.can_cancel">
                                            <template #reference>
                                                <button type="button" class="bw-cp-btn-outline bw-cp-btn-outline--danger">
                                                    {{ labels.cancel_appointment }}
                                                </button>
                                            </template>
                                        </el-popconfirm>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    <div class="bw-cp-empty" v-if="!loadingAppointments && appointments.length === 0">{{ labels.no_appointments }}</div>
                </div>

                <div class="bw-cp-pagination" v-if="shouldShowPagination()">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalAppointments"
                        :page-size="perPage"
                        :current-page="currentPage"
                        @current-change="loadAppointments"
                    ></el-pagination>
                </div>
            </section>

            <section v-else-if="activeTab === 'edit_account'" class="bw-cp-section">
                <h2 class="bw-cp-title">{{ labels.edit_account }}</h2>
                <el-form label-position="top" class="bw-cp-form" @submit.prevent="saveProfile">
                    <el-row :gutter="16">
                        <el-col :span="12" v-if="!accountFields.first_name.hidden">
                            <el-form-item :label="accountFieldLabel('first_name')" :required="accountFields.first_name.required">
                                <el-input v-model="profileForm.first_name" :placeholder="accountFields.first_name.placeholder"></el-input>
                                <div class="bw-cp-field-error" v-if="profileErrors.first_name">{{ profileErrors.first_name }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="!accountFields.last_name.hidden">
                            <el-form-item :label="accountFieldLabel('last_name')" :required="accountFields.last_name.required">
                                <el-input v-model="profileForm.last_name" :placeholder="accountFields.last_name.placeholder"></el-input>
                                <div class="bw-cp-field-error" v-if="profileErrors.last_name">{{ profileErrors.last_name }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item :label="accountFieldLabel('email')">
                        <el-input v-model="profileForm.email" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="accountFieldLabel('phone')" :required="accountFields.phone.required" v-if="!accountFields.phone.hidden">
                        <el-input v-model="profileForm.phone" :placeholder="accountFields.phone.placeholder"></el-input>
                        <div class="bw-cp-field-error" v-if="profileErrors.phone">{{ profileErrors.phone }}</div>
                    </el-form-item>
                    <el-button type="primary" :loading="savingProfile" @click="saveProfile">{{ labels.save }}</el-button>
                </el-form>
            </section>

            <section v-else-if="activeTab === 'change_password'" class="bw-cp-section">
                <h2 class="bw-cp-title">{{ labels.change_password }}</h2>
                <el-form label-position="top" class="bw-cp-form bw-cp-form-narrow" @submit.prevent="savePassword">
                    <el-form-item :label="labels.current_password">
                        <el-input v-model="passwordForm.current_password" type="password" show-password :class="{ 'bw-cp-input-error': passwordErrors.current_password }" @input="passwordErrors.current_password = false"></el-input>
                    </el-form-item>
                    <el-form-item :label="labels.new_password">
                        <el-input v-model="passwordForm.new_password" type="password" show-password :class="{ 'bw-cp-input-error': passwordErrors.new_password }" @input="passwordErrors.new_password = false"></el-input>
                    </el-form-item>
                    <el-form-item :label="labels.confirm_password">
                        <el-input v-model="passwordForm.confirm_password" type="password" show-password :class="{ 'bw-cp-input-error': passwordErrors.confirm_password }" @input="passwordErrors.confirm_password = false"></el-input>
                    </el-form-item>
                    <el-button type="primary" :loading="savingPassword" @click="savePassword">{{ labels.save }}</el-button>
                </el-form>
            </section>
        </main>
    </div>
</div>
