<?php
defined('ABSPATH') || exit;
?>
<el-main v-cloak class="book-now-adm--container bw-notifications-page" id="bookwellab_root_app">
    <el-card shadow="never" class="bw-card bw-notifications-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('Notifications', 'bookwellnow-appointment-booking'); ?></h3>
                <p class="bw-text-muted bw-notifications-subtitle">
                    <?php esc_html_e('Manage email notifications sent to customers and staff.', 'bookwellnow-appointment-booking'); ?>
                </p>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="bw-right-align">
                <el-button type="primary" size="large" class="bw-notifications-save-btn"
                    @click="bwab_saveNotifications" :loading="settings_loader">
                    <?php esc_html_e('Save Changes', '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-notifications-main-card" shadow="never">
                <div class="bw-admin-loader-upper" v-if="settings_loader">
                    <div class="bw-admin-dot-loader" aria-label="<?php echo esc_attr__('Loading notifications', '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-notification-wrapper" v-else>

                    <aside class="bw-notifications-sidebar" aria-label="<?php esc_attr_e('Notifications', 'bookwellnow-appointment-booking'); ?>">
                        <button
                            type="button"
                            class="bw-notifications-sidebar-item"
                            :class="{ 'is-active': current_notification_tab === 'on_approval' }"
                            @click="current_notification_tab = 'on_approval'">
                            <span class="bw-notifications-sidebar-dot" aria-hidden="true"></span>
                            <span><?php esc_html_e('On Approval', 'bookwellnow-appointment-booking'); ?></span>
                        </button>
                        <button
                            type="button"
                            class="bw-notifications-sidebar-item"
                            :class="{ 'is-active': current_notification_tab === 'on_pending' }"
                            @click="current_notification_tab = 'on_pending'">
                            <span class="bw-notifications-sidebar-dot" aria-hidden="true"></span>
                            <span><?php esc_html_e('On Pending', 'bookwellnow-appointment-booking'); ?></span>
                        </button>
                        <button
                            type="button"
                            class="bw-notifications-sidebar-item"
                            :class="{ 'is-active': current_notification_tab === 'on_cancellation' }"
                            @click="current_notification_tab = 'on_cancellation'">
                            <span class="bw-notifications-sidebar-dot" aria-hidden="true"></span>
                            <span><?php esc_html_e('On Cancellation', 'bookwellnow-appointment-booking'); ?></span>
                        </button>
                    </aside>

                    <div class="bw-content bw-notifications-content">

                        <div class="bw-content-header-row bw-notifications-section-head">
                            <h2 class="bw-section-title bw-notifications-section-title">{{ current_notification_tab.replace('_', ' ').replace(/\b\w/g,
                                l =>
                                l.toUpperCase()) }}</h2>
                        </div>

                        <el-tabs v-model="active_sub_tab"
                            class="bw-premium-tabs bw-notifications-sub-tabs bw-notifications-tabs">
                            <el-tab-pane label="<?php esc_html_e('To Customer', 'bookwellnow-appointment-booking'); ?>"
                                name="customer">

                                <!-- Toggle Switch -->
                                <div class="bw-control-group bw-flex-between">
                                    <div>
                                        <span
                                            class="bw-control-label"><?php esc_html_e('Enable Customer Notification', 'bookwellnow-appointment-booking'); ?></span>
                                        <div class="bw-control-desc">
                                            <?php esc_html_e('Send an email to the customer when this event occurs.', 'bookwellnow-appointment-booking'); ?>
                                        </div>
                                    </div>
                                    <el-switch v-model="notification_settings[current_notification_tab].customer.enable"
                                        active-value="1" inactive-value="0" active-color="#5700B4"></el-switch>
                                </div>

                                <transition name="el-fade-in-linear">
                                    <div v-if="notification_settings[current_notification_tab].customer.enable == '1'"
                                        class="bw-notifications-form-block">

                                        <div class="bw-form-group">
                                            <label
                                                class="bw-label"><?php esc_html_e('CC Recipients', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-input
                                                v-model="notification_settings[current_notification_tab].customer.cc_email"
                                                placeholder="<?php esc_html_e('e.g. manager@example.com, admin@example.com', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                            <p class="bw-help-text">
                                                <?php esc_html_e('Comma-separated email addresses.', 'bookwellnow-appointment-booking'); ?>
                                            </p>
                                        </div>

                                        <div class="bw-form-group">
                                            <label
                                                class="bw-label"><?php esc_html_e('Subject Line', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-input
                                                v-model="notification_settings[current_notification_tab].customer.subject"
                                                placeholder="<?php esc_html_e('Enter email subject...', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                        </div>

                                        <div class="bw-form-group">
                                            <label
                                                class="bw-label"><?php esc_html_e('Email Body', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-input type="textarea" :rows="15"
                                                v-model="notification_settings[current_notification_tab].customer.message"
                                                placeholder="<?php esc_html_e('Compose your email message...', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                        </div>

                                        <!-- Placeholders -->
                                        <?php
                                        $bookwellab_notification_placeholder_chips = apply_filters(
                                            'bookwellab_notification_placeholder_chips',
                                            array(
                                                '%customer_first_name%',
                                                '%customer_last_name%',
                                                '%customer_email%',
                                                '%customer_phone%',
                                                '%service_name%',
                                                '%staff_name%',
                                                '%appointment_date%',
                                                '%appointment_time%',
                                                '%appointment_price%',
                                                '%company_name%',
                                                '%cancel_appointment_link%',
                                                '%zoom_join_url%',
                                                '%zoom_host_url%',
                                            )
                                        );
                                        if (!is_array($bookwellab_notification_placeholder_chips)) {
                                            $bookwellab_notification_placeholder_chips = array();
                                        }
                                        ?>
                                        <div class="bw-placeholders-box bw-notifications-placeholders">
                                            <div class="bw-placeholders-title">
                                                <?php esc_html_e('Dynamic Placeholders', 'bookwellnow-appointment-booking'); ?>
                                            </div>
                                            <div class="bw-placeholders-grid">
                                                <div class="bw-tag-item"
                                                    v-for='ph in <?php echo wp_json_encode(array_values($bookwellab_notification_placeholder_chips)); ?>'
                                                    :key="ph"
                                                    @click="copyToClipboard(ph)">
                                                    {{ ph }}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </transition>
                            </el-tab-pane>

                            <el-tab-pane label="<?php esc_html_e('To Staff Member', 'bookwellnow-appointment-booking'); ?>"
                                name="staff">
                                <!-- Toggle Switch -->
                                <div class="bw-control-group bw-flex-between">
                                    <div>
                                        <span
                                            class="bw-control-label"><?php esc_html_e('Enable Staff Notification', 'bookwellnow-appointment-booking'); ?></span>
                                        <div class="bw-control-desc">
                                            <?php esc_html_e('Send an email to the assigned staff member when this event occurs.', 'bookwellnow-appointment-booking'); ?>
                                        </div>
                                    </div>
                                    <el-switch v-model="notification_settings[current_notification_tab].staff.enable"
                                        active-value="1" inactive-value="0" active-color="#5700B4"></el-switch>
                                </div>

                                <transition name="el-fade-in-linear">
                                    <div v-if="notification_settings[current_notification_tab].staff.enable == '1'"
                                        class="bw-notifications-form-block">

                                        <div class="bw-form-group">
                                            <label
                                                class="bw-label"><?php esc_html_e('CC Recipients', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-input
                                                v-model="notification_settings[current_notification_tab].staff.cc_email"
                                                placeholder="<?php esc_html_e('e.g. manager@example.com, admin@example.com', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                            <p class="bw-help-text">
                                                <?php esc_html_e('Comma-separated email addresses.', 'bookwellnow-appointment-booking'); ?>
                                            </p>
                                        </div>

                                        <div class="bw-form-group">
                                            <label
                                                class="bw-label"><?php esc_html_e('Subject Line', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-input
                                                v-model="notification_settings[current_notification_tab].staff.subject"
                                                placeholder="<?php esc_html_e('Enter email subject...', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                        </div>

                                        <div class="bw-form-group">
                                            <label
                                                class="bw-label"><?php esc_html_e('Email Body', 'bookwellnow-appointment-booking'); ?></label>
                                            <el-input type="textarea" :rows="15"
                                                v-model="notification_settings[current_notification_tab].staff.message"
                                                placeholder="<?php esc_html_e('Compose your email message...', 'bookwellnow-appointment-booking'); ?>"></el-input>
                                        </div>

                                        <!-- Placeholders -->
                                        <div class="bw-placeholders-box bw-notifications-placeholders">
                                            <div class="bw-placeholders-title">
                                                <?php esc_html_e('Dynamic Placeholders', 'bookwellnow-appointment-booking'); ?>
                                            </div>
                                            <div class="bw-placeholders-grid">
                                                <div class="bw-tag-item"
                                                    v-for='ph in <?php echo wp_json_encode(array_values($bookwellab_notification_placeholder_chips)); ?>'
                                                    :key="ph"
                                                    @click="copyToClipboard(ph)">
                                                    {{ ph }}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </transition>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</el-main>