<?php
defined('ABSPATH') || exit;
?>
<el-main v-cloak class="book-now-adm--container bw-dashboard-page" id="all-page-main-container">


    <div class="container">

        <div class="bw-admin-page-container bw-dashboard-container">
            <el-row type="flex" class="bw-admin-head">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="bw-mlc-left">
                    <h3><?php esc_html_e('Dashboard', 'bookwellnow-appointment-booking'); ?></h3>
                </el-col>
            </el-row>

            <!-- Section 1: Day Preview -->
            <section class="bw-dashboard-section bw-dashboard-section--day-preview">
                <h4 class="bw-dashboard-section-title"><?php echo esc_html__('Day Preview', 'bookwellnow-appointment-booking'); ?></h4>

                <el-card shadow="never" class="bw-card bw-day-preview-card" v-loading="day_preview_loading">
                    <div class="bw-day-preview-filters">
                        <el-date-picker
                            v-model="day_preview_date"
                            type="date"
                            format="MMM D, YYYY"
                            value-format="YYYY-MM-DD"
                            :clearable="false"
                            :first-day-of-week="el_first_day_of_week"
                            class="bw-day-preview-filter bw-day-preview-filter--date"
                            @change="bwab_getDayPreview">
                        </el-date-picker>
                        <el-select
                            v-model="day_preview_staff_id"
                            class="bw-day-preview-filter bw-day-preview-filter--staff"
                            placeholder="<?php echo esc_attr__('Select Staff', 'bookwellnow-appointment-booking'); ?>"
                            @change="bwab_getDayPreview">
                            <el-option
                                v-for="staff in day_preview_staff_list"
                                :key="staff.id"
                                :label="staff.name"
                                :value="staff.id">
                            </el-option>
                        </el-select>
                        <el-select
                            v-model="day_preview_service_id"
                            class="bw-day-preview-filter bw-day-preview-filter--service"
                            placeholder="<?php echo esc_attr__('All Services', 'bookwellnow-appointment-booking'); ?>"
                            @change="bwab_getDayPreview">
                            <el-option label="<?php echo esc_attr__('All Services', 'bookwellnow-appointment-booking'); ?>" value="all"></el-option>
                            <el-option
                                v-for="service in day_preview_service_list"
                                :key="service.id"
                                :label="service.name"
                                :value="service.id">
                            </el-option>
                        </el-select>
                        <div class="bw-day-preview-filters-actions">
                            <el-radio-group v-model="day_preview_view" size="small" class="bw-day-preview-view-toggle">
                                <el-radio-button value="appointments"><?php echo esc_html__('Appointments', 'bookwellnow-appointment-booking'); ?></el-radio-button>
                                <el-radio-button value="availability"><?php echo esc_html__('Availability', 'bookwellnow-appointment-booking'); ?></el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>

                    <div v-if="!day_preview_staff_id" class="bw-day-preview-empty">
                        <?php echo esc_html__('No active staff found. Add staff to use day preview.', 'bookwellnow-appointment-booking'); ?>
                    </div>
                    <div v-else-if="day_preview_data.is_off" class="bw-day-preview-empty">
                        <?php echo esc_html__('This staff member is not working on the selected day.', 'bookwellnow-appointment-booking'); ?>
                    </div>
                    <div v-else-if="day_preview_data.timeline" class="bw-day-preview-body">
                        <div class="bw-day-preview-hours">
                            <span class="bw-day-preview-hours-spacer"></span>
                            <div class="bw-day-preview-hours-track">
                                <span
                                    v-for="hour in day_preview_data.timeline.hours"
                                    :key="hour.minutes"
                                    class="bw-day-preview-hour-label"
                                    :style="bwab_dayPreviewSegStyle({ start_minutes: hour.minutes, end_minutes: hour.minutes })">
                                    {{ hour.label }}
                                </span>
                            </div>
                        </div>
                        <div class="bw-day-preview-row">
                            <div class="bw-day-preview-staff">
                                <img :src="day_preview_data.staff.image" :alt="day_preview_data.staff.name" class="bw-day-preview-staff-avatar" />
                            </div>
                            <div class="bw-day-preview-track" :style="bwab_dayPreviewTrackWidthStyle()">
                                <div
                                    v-if="day_preview_data.now_percent !== null"
                                    class="bw-day-preview-now-line"
                                    :style="{ left: day_preview_data.now_percent + '%' }">
                                    <span class="bw-day-preview-now-label">{{ day_preview_data.now_label }}</span>
                                </div>

                                <template v-if="day_preview_view === 'availability'">
                                    <div
                                        v-for="(seg, idx) in day_preview_data.availability"
                                        :key="'avail-' + idx"
                                        class="bw-day-preview-seg"
                                        :class="'bw-day-preview-seg--' + seg.type"
                                        :style="bwab_dayPreviewSegStyle(seg)">
                                    </div>
                                </template>

                                <template v-else>
                                    <div
                                        v-for="appt in day_preview_data.appointments"
                                        :key="'appt-' + appt.id"
                                        class="bw-day-preview-seg-wrap"
                                        :style="bwab_dayPreviewSegStyle(appt)">
                                        <el-popover
                                            placement="top"
                                            trigger="hover"
                                            :width="280"
                                            popper-class="bw-day-preview-popover">
                                            <template #reference>
                                                <div class="bw-day-preview-seg bw-day-preview-seg--appointment"></div>
                                            </template>
                                            <div class="bw-day-preview-popover-inner">
                                                <div class="bw-day-preview-popover-title">
                                                    <span class="bw-day-preview-popover-dot"></span>
                                                    {{ appt.service_name }}
                                                </div>
                                                <div class="bw-day-preview-popover-time">{{ bwab_formatDayPreviewRange(appt) }}</div>
                                                <div class="bw-day-preview-popover-customer">
                                                    <strong>{{ appt.customer_name }}</strong>
                                                </div>
                                                <div v-if="appt.customer_phone" class="bw-day-preview-popover-meta">{{ appt.customer_phone }}</div>
                                                <div v-if="appt.customer_email" class="bw-day-preview-popover-meta">{{ appt.customer_email }}</div>
                                            </div>
                                        </el-popover>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </el-card>
            </section>

            <!-- Section 2: Overview -->
            <section class="bw-dashboard-section bw-dashboard-section--overview">
                <h4 class="bw-dashboard-section-title"><?php echo esc_html__('Overview', 'bookwellnow-appointment-booking'); ?></h4>

                <el-card shadow="never" class="bw-card bw-dashboard-filter-card">
                    <div class="bw-dashboard-filter-wrapper">
                        <el-select v-model="dashboard_filter" @change="bwab_getDashboardData" class="bw-dashboard-filter-select">
                            <el-option label="<?php echo esc_attr__('This Month', 'bookwellnow-appointment-booking'); ?>" value="this_month"></el-option>
                            <el-option label="<?php echo esc_attr__('Last 3 Months', 'bookwellnow-appointment-booking'); ?>" value="last_3_months"></el-option>
                            <el-option label="<?php echo esc_attr__('Last 6 Months', 'bookwellnow-appointment-booking'); ?>" value="last_6_months"></el-option>
                            <el-option label="<?php echo esc_attr__('All Time', 'bookwellnow-appointment-booking'); ?>" value="all_time"></el-option>
                            <el-option label="<?php echo esc_attr__('Custom Date', 'bookwellnow-appointment-booking'); ?>" value="custom"></el-option>
                        </el-select>

                        <el-date-picker v-if="dashboard_filter == 'custom'" v-model="dashboard_custom_date" type="daterange"
                            range-separator="<?php echo esc_attr__('To', 'bookwellnow-appointment-booking'); ?>"
                            start-placeholder="<?php echo esc_attr__('Start date', 'bookwellnow-appointment-booking'); ?>"
                            end-placeholder="<?php echo esc_attr__('End date', 'bookwellnow-appointment-booking'); ?>"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="bwab_getDashboardData"
                            class="bw-dashboard-filter-date">
                        </el-date-picker>
                    </div>
                </el-card>

                <el-row :gutter="20" class="bw-dashboard-cards">
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <el-card shadow="hover" class="bw-dash-card">
                            <div class="bw-dash-title"><?php echo esc_html__('Total Appointments', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-dash-value">{{ dashboard_data.total_appointments }}</div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <el-card shadow="hover" class="bw-dash-card">
                            <div class="bw-dash-title"><?php echo esc_html__('Pending', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-dash-value bw-dash-value--pending">{{ dashboard_data.pending_appointments }}
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <el-card shadow="hover" class="bw-dash-card">
                            <div class="bw-dash-title"><?php echo esc_html__('Approved', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-dash-value bw-dash-value--approved">{{ dashboard_data.approved_appointments }}
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <el-card shadow="hover" class="bw-dash-card">
                            <div class="bw-dash-title"><?php echo esc_html__('Cancelled', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-dash-value bw-dash-value--cancelled">{{ dashboard_data.cancelled_appointments }}</div>
                        </el-card>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <el-card shadow="hover" class="bw-dash-card">
                            <div class="bw-dash-title"><?php echo esc_html__('Received Payment', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-dash-value bw-dash-value--received">{{ dashboard_data.received_payments }}</div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <el-card shadow="hover" class="bw-dash-card">
                            <div class="bw-dash-title"><?php echo esc_html__('Pending Payment', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-dash-value bw-dash-value--pending-payment">{{ dashboard_data.pending_payments }}</div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <el-card shadow="hover" class="bw-dash-card">
                            <div class="bw-dash-title"><?php echo esc_html__('New Customers', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-dash-value bw-dash-value--new-customer">{{ dashboard_data.new_customers }}</div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <el-card shadow="hover" class="bw-dash-card">
                            <div class="bw-dash-title"><?php echo esc_html__('Total Customer', 'bookwellnow-appointment-booking'); ?></div>
                            <div class="bw-dash-value bw-dash-value--total-customer">{{ dashboard_data.total_customers }}</div>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="bw-dashboard-overview-row">
                    <el-col :xs="24" :lg="12">
                        <el-card shadow="never" class="bw-card bw-services-card">
                            <div slot="header" class="clearfix">
                                <span class="bw-card-header-title"><?php echo esc_html__('Most Booked Services', 'bookwellnow-appointment-booking'); ?></span>
                            </div>
                            <el-table :data="dashboard_data.top_services" class="bw-top-services-table" empty-text="<?php echo esc_attr__('No data available', 'bookwellnow-appointment-booking'); ?>">
                                <el-table-column prop="bw_service_name" label="<?php echo esc_attr__('Service Name', 'bookwellnow-appointment-booking'); ?>"></el-table-column>
                                <el-table-column prop="count" label="<?php echo esc_attr__('Bookings', 'bookwellnow-appointment-booking'); ?>" width="180" align="center">
                                    <template #default="scope">
                                        <el-tag size="medium" class="bw-service-count-tag">{{ scope.row.count }} <?php echo esc_html__('Times', 'bookwellnow-appointment-booking'); ?></el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :lg="12">
                        <el-card shadow="never" class="bw-card bw-graph-card" v-loading="dashboard_chart_loading">
                            <div slot="header" class="clearfix">
                                <span class="bw-card-header-title"><?php echo esc_html__('Revenue Overview', 'bookwellnow-appointment-booking'); ?></span>
                            </div>
                            <div class="bw-chart-container">
                                <canvas id="revenueChart"></canvas>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </section>

        </div>
    </div>

</el-main>
