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

    <div class="container">
        <div class="bw-admin-page-container">

            <el-card shadow="never" class="bw-card bw-calendar-card" style="min-height: 800px;">

                <div class="bw-calendar-header-toolbar">
                    <div class="bw-calendar-title">
                        <h2><?php esc_html_e('Calendar', 'bookwellnow-appointment-booking'); ?></h2>
                    </div>
                    <div class="bw-calendar-actions">
                        <div class="bw-calendar-view-toggle">
                            <el-button-group>
                                <el-button
                                    :type="calendar_view === 'day' ? 'primary' : 'default'"
                                    @click="bwab_changeCalendarView('day')">
                                    <?php esc_html_e('Day', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                                <el-button
                                    :type="calendar_view === 'month' ? 'primary' : 'default'"
                                    @click="bwab_changeCalendarView('month')">
                                    <?php esc_html_e('Month', 'bookwellnow-appointment-booking'); ?>
                                </el-button>
                            </el-button-group>
                        </div>
                        <el-select
                            v-if="staff_list.length > 0"
                            v-model="selected_staff"
                            placeholder="<?php echo esc_attr__('Select Staff', 'bookwellnow-appointment-booking'); ?>"
                            @change="bwab_onStaffChange"
                            size="large"
                            class="bw-calendar-staff-select">
                            <el-option
                                v-for="item in staff_list"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <div v-if="staff_list.length === 0" class="bw-cal-empty-staff">
                    <?php esc_html_e('No active staff found. Add staff to use the calendar.', 'bookwellnow-appointment-booking'); ?>
                </div>

                <template v-else>
                    <div v-if="calendar_view === 'month'" class="bw-calendar-controls">
                        <div class="bw-calendar-navigation">
                            <el-button circle @click="bwab_prevMonth" class="bw-cal-nav-btn">
                                <span class="dashicons dashicons-arrow-left-alt2"></span>
                            </el-button>
                            <span class="bw-calendar-display-month">{{ bwab_getDisplayMonth() }}</span>
                            <el-button circle @click="bwab_nextMonth" class="bw-cal-nav-btn">
                                <span class="dashicons dashicons-arrow-right-alt2"></span>
                            </el-button>
                        </div>
                    </div>

                    <div v-if="calendar_view === 'day'" class="bw-cal-day-toolbar">
                        <div class="bw-cal-day-toolbar-left">
                            <h3 class="bw-cal-day-title">{{ bwab_getDayViewDisplayDate() }}</h3>
                        </div>
                        <div class="bw-cal-day-toolbar-right">
                            <el-button size="small" @click="bwab_goToday">
                                <?php esc_html_e('Today', 'bookwellnow-appointment-booking'); ?>
                            </el-button>
                            <el-button circle @click="bwab_prevMonth" class="bw-cal-nav-btn">
                                <span class="dashicons dashicons-arrow-left-alt2"></span>
                            </el-button>
                            <el-button circle @click="bwab_nextMonth" class="bw-cal-nav-btn">
                                <span class="dashicons dashicons-arrow-right-alt2"></span>
                            </el-button>
                        </div>
                    </div>

                    <div v-if="calendar_view === 'day'" class="bw-cal-day-strip-wrap">
                        <el-button circle @click="bwab_shiftCalendarMonth(-1)" class="bw-cal-nav-btn bw-cal-day-strip-nav">
                            <span class="dashicons dashicons-arrow-left-alt2"></span>
                        </el-button>
                        <div class="bw-cal-day-strip" :class="{ 'bw-cal-day-strip--mobile': day_strip_mobile }">
                            <div
                                v-for="row in bwab_getDayDateStripRows()"
                                :key="row.key"
                                class="bw-cal-day-strip-row">
                                <button
                                    v-for="(dayItem, idx) in row.days"
                                    :key="row.key + '-' + idx"
                                    type="button"
                                    class="bw-cal-day-strip-item"
                                    :class="{
                                        'bw-cal-day-strip-item--selected': dayItem && dayItem.isSelected,
                                        'bw-cal-day-strip-item--today': dayItem && dayItem.isToday,
                                        'bw-cal-day-strip-item--past': dayItem && dayItem.isPast,
                                        'bw-cal-day-strip-item--empty': !dayItem
                                    }"
                                    :disabled="!dayItem"
                                    @click="dayItem && bwab_selectCalendarDay(dayItem.date)">
                                    <template v-if="dayItem">
                                        <span class="bw-cal-day-strip-dow">{{ dayItem.weekday }}</span>
                                        <span class="bw-cal-day-strip-num">{{ dayItem.day }}</span>
                                        <span v-if="dayItem.hasEvents" class="bw-cal-day-strip-dot"></span>
                                        <span
                                            v-if="dayItem.isToday || dayItem.hasEvents"
                                            class="bw-cal-day-strip-bar"
                                            :class="{ 'bw-cal-day-strip-bar--selected': dayItem.isSelected }">
                                        </span>
                                    </template>
                                </button>
                            </div>
                        </div>
                        <el-button circle @click="bwab_shiftCalendarMonth(1)" class="bw-cal-nav-btn bw-cal-day-strip-nav">
                            <span class="dashicons dashicons-arrow-right-alt2"></span>
                        </el-button>
                    </div>

                    <div v-if="bw_list_loader == '1'" class="bw-admin-loader-upper" style="min-height: 500px;">
                        <div class="bw-admin-dot-loader" aria-label="<?php echo esc_attr__('Loading calendar', 'bookwellnow-appointment-booking'); ?>">
                            <span class="bw-admin-dot"></span>
                            <span class="bw-admin-dot"></span>
                            <span class="bw-admin-dot"></span>
                        </div>
                    </div>

                    <div v-if="bw_list_loader == '0' && calendar_view === 'month'" class="bw-calendar-month-grid">
                        <div class="bw-cal-grid-row bw-cal-header">
                            <div class="bw-cal-cell-header" v-for="day in days_of_week" :key="day">{{ day }}</div>
                        </div>
                        <div class="bw-cal-grid-body">
                            <div v-for="(cell, index) in bwab_getCalendarGrid()" :key="index"
                                :class="['bw-cal-cell', { 'bw-cal-cell-inactive': !cell.isCurrentMonth, 'bw-cal-cell-today': cell.date === new Date().toISOString().split('T')[0] }]">
                                <div class="bw-cal-cell-date">{{ cell.day }}</div>
                                <div class="bw-cal-events-wrapper" v-if="cell.events && cell.events.length > 0">
                                    <el-popover placement="right" title="" width="320"
                                        trigger="click" popper-class="bw-cal-event-popover"
                                        :visible="active_popover_date === cell.date"
                                        @hide="bwab_closeMonthDatePopover(cell.date)"
                                        @show="bwab_fetchDateEvents(cell.date, active_appointment_id || (cell.events[0] && cell.events[0].bw_appointment_id))">
                                        <template #default>
                                            <div class="bw-cal-popover-content" v-loading="popover_loader" @click.stop>
                                                <div v-if="current_date_events && current_date_events.length > 0" class="bw-popover-inner">
                                                    <div class="bw-pop-header">
                                                        <span><i class="el-icon-date"></i> {{ bwab_formatDate(current_date_events[0].bw_date) }}</span>
                                                        <button type="button" class="bw-pop-close-icon" aria-label="<?php echo esc_attr__('Close', 'bookwellnow-appointment-booking'); ?>"
                                                            @click.stop="bwab_closeMonthDatePopover(cell.date)">&times;</button>
                                                    </div>
                                                    <el-collapse v-model="active_appointment_id" accordion class="bw-pop-accordion">
                                                        <el-collapse-item v-for="appt in current_date_events" :key="appt.bw_appointment_id" :name="appt.bw_appointment_id">
                                                            <template #title>
                                                                <div style="width: 100%; display: flex; justify-content: space-between; padding-right: 15px;">
                                                                    <span>{{ appt.service_name || 'Service' }}<br/><span style="font-size: 11px; color:#666;">Id- #{{ appt.bw_appointment_id }}</span></span>
                                                                    <span style="font-size: 12px; color:#606266;">{{ bwab_formatTime(appt.bw_time) }} - {{ bwab_formatTime(appt.bw_end_time || appt.bw_time) }}</span>
                                                                </div>
                                                            </template>
                                                            <div class="bw-pop-customer-card" style="margin: 0 15px 15px 15px;">
                                                                <div class="bw-pop-customer-name">{{ appt.bw_customer_name }}</div>
                                                                <div class="bw-pop-customer-email"><i class="el-icon-message"></i> {{ appt.bw_customer_email }}</div>
                                                                <div class="bw-pop-customer-phone"><i class="el-icon-phone-outline"></i> {{ appt.bw_customer_phone }}</div>
                                                            </div>
                                                            <div class="bw-pop-actions" style="padding: 0 15px 15px 15px;">
                                                                <el-button type="success" size="small" plain icon="el-icon-check" @click="bwab_approveAppointment(appt.bw_appointment_id)" v-if="appt.bw_status !== 'approved'"><?php esc_html_e('Approve', 'bookwellnow-appointment-booking'); ?></el-button>
                                                            </div>
                                                        </el-collapse-item>
                                                    </el-collapse>
                                                </div>
                                            </div>
                                        </template>
                                        <template #reference>
                                            <div class="bw-cal-events-list">
                                                <div v-for="(event, idx) in cell.events.slice(0,3)"
                                                    :key="event.bw_appointment_id"
                                                    class="bw-cal-event-item"
                                                    @click="bwab_openMonthDateAppointments(cell.date, event.bw_appointment_id)">
                                                    <div class="bw-cal-event-title">{{ event.bw_customer_name }}</div>
                                                    <div class="bw-cal-event-time">{{ bwab_formatTime(event.bw_time) }} - {{ bwab_formatTime(event.bw_end_time || event.bw_time) }}</div>
                                                </div>
                                                <div v-if="cell.events.length > 3" class="bw-cal-event-more" @click="bwab_openMonthDateAppointments(cell.date, null)">
                                                    +{{ cell.events.length - 3 }} <?php esc_html_e('More', 'bookwellnow-appointment-booking'); ?>
                                                </div>
                                            </div>
                                        </template>
                                    </el-popover>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="bw_list_loader == '0' && calendar_view === 'day'" class="bw-cal-day-view" v-loading="calendar_day_loader">
                        <div v-if="calendar_day_data && calendar_day_data.is_off" class="bw-cal-day-off">
                            <?php esc_html_e('This staff member is not working on the selected day.', 'bookwellnow-appointment-booking'); ?>
                        </div>
                        <div v-else-if="calendar_day_data && calendar_day_data.timeline" class="bw-calendar-day-grid bw-calendar-week-grid">
                            <div class="bw-cal-time-col">
                                <div class="bw-cal-time-header"></div>
                                <div class="bw-cal-time-slot" v-for="time in bwab_getDayViewTimeSlots()" :key="time.minutes">{{ time.label }}</div>
                            </div>
                            <div class="bw-cal-day-col bw-cal-day-col--single">
                                <div class="bw-cal-day-header bw-cal-staff-header">
                                    <img
                                        v-if="calendar_day_data.staff && calendar_day_data.staff.image"
                                        :src="calendar_day_data.staff.image"
                                        :alt="calendar_day_data.staff.name"
                                        class="bw-cal-staff-avatar" />
                                    <span>{{ calendar_day_data.staff ? calendar_day_data.staff.name : '' }}</span>
                                </div>
                                <div class="bw-cal-day-body">
                                    <div class="bw-cal-time-cell" v-for="time in bwab_getDayViewTimeSlots()" :key="'cell-' + time.minutes"></div>

                                    <div
                                        v-if="calendar_day_data.now_top !== null && calendar_day_data.now_top !== undefined"
                                        class="bw-cal-now-line"
                                        :style="bwab_getDayViewNowStyle()">
                                        <span class="bw-cal-now-label">{{ calendar_day_data.now_label }}</span>
                                    </div>

                                    <div
                                        v-for="event in calendar_day_data.appointments"
                                        :key="event.bw_appointment_id"
                                        class="bw-cal-flex-event-slot"
                                        :style="bwab_getDayViewEventStyle(event)">
                                        <el-popover
                                            placement="bottom"
                                            :teleported="true"
                                            :fallback-placements="['bottom', 'top', 'right', 'left']"
                                            title=""
                                            width="320"
                                            trigger="click"
                                            popper-class="bw-cal-event-popover bw-cal-day-event-popover">
                                            <template #default>
                                                <div class="bw-cal-popover-content bw-cal-day-popover-content" @click.stop>
                                                    <div class="bw-popover-inner">
                                                        <div class="bw-pop-header">
                                                            <span><i class="el-icon-date"></i> {{ bwab_formatDate(current_date) }}</span>
                                                        </div>
                                                        <div class="bw-pop-service-row">
                                                            <div class="bw-pop-service-name">
                                                                {{ event.service_name || '<?php echo esc_js(__('Service', 'bookwellnow-appointment-booking')); ?>' }}
                                                                <span class="bw-pop-service-id">Id- #{{ event.bw_appointment_id }}</span>
                                                            </div>
                                                            <div class="bw-pop-time">{{ event.time_label }}</div>
                                                        </div>
                                                        <div class="bw-pop-customer-card">
                                                            <div class="bw-pop-customer-name">{{ event.bw_customer_name }}</div>
                                                            <div class="bw-pop-customer-email" v-if="event.bw_customer_email">
                                                                <i class="el-icon-message"></i> {{ event.bw_customer_email }}
                                                            </div>
                                                            <div class="bw-pop-customer-phone" v-if="event.customer_phone || event.bw_customer_phone">
                                                                <i class="el-icon-phone-outline"></i> {{ event.customer_phone || event.bw_customer_phone }}
                                                            </div>
                                                        </div>
                                                        <div class="bw-pop-actions">
                                                            <el-button type="success" size="small" plain icon="el-icon-check" @click="bwab_approveAppointment(event.bw_appointment_id)" v-if="event.bw_status !== 'approved'"><?php esc_html_e('Approve', 'bookwellnow-appointment-booking'); ?></el-button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                            <template #reference>
                                                <div class="bw-cal-flex-event">
                                                    <span class="bw-cal-event-inline">
                                                        {{ event.bw_customer_name }}
                                                        <span class="bw-cal-event-inline-time">{{ event.time_label }}</span>
                                                    </span>
                                                </div>
                                            </template>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

            </el-card>

        </div>
    </div>

</el-main>
