<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_hr_dashboard.Dashboard">
        <div class="o_xeno_hr_page o_xeno_dashboard">
            <div class="o_xeno_hr_header">
                <div>
                    <h1>Dashboard</h1>
                    <p class="o_xeno_hr_subtitle">Company-wide attendance, leave and calendar overview</p>
                </div>
            </div>

            <!-- Stat cards -->
            <div class="o_xeno_stat_grid">
                <div class="o_xeno_stat_card o_xeno_stat_blue">
                    <i class="fa fa-users"/>
                    <div>
                        <p class="o_xeno_stat_label">Total Employees</p>
                        <p class="o_xeno_stat_value" t-esc="state.stats.total_employees"/>
                    </div>
                </div>
                <div class="o_xeno_stat_card o_xeno_stat_green">
                    <i class="fa fa-user-circle-o"/>
                    <div>
                        <p class="o_xeno_stat_label">Present Today</p>
                        <p class="o_xeno_stat_value" t-esc="state.stats.present_today"/>
                    </div>
                </div>
                <div class="o_xeno_stat_card o_xeno_stat_red">
                    <i class="fa fa-user-times"/>
                    <div>
                        <p class="o_xeno_stat_label">Absent Today</p>
                        <p class="o_xeno_stat_value" t-esc="state.stats.absent_today"/>
                    </div>
                </div>
                <div class="o_xeno_stat_card o_xeno_stat_yellow">
                    <i class="fa fa-clock-o"/>
                    <div>
                        <p class="o_xeno_stat_label">Pending Leaves</p>
                        <p class="o_xeno_stat_value" t-esc="state.stats.pending_leaves"/>
                    </div>
                </div>
            </div>

            <!-- Today's Announcements -->
            <div class="o_xeno_hr_card o_xeno_dashboard_card" t-if="state.announcements.length">
                <div class="o_xeno_card_head">
                    <i class="fa fa-bullhorn"/>
                    <h3>Today's Announcements</h3>
                    <span class="o_xeno_badge_count" t-esc="state.announcements.length"/>
                </div>
                <div class="o_xeno_announcement_grid">
                    <t t-foreach="state.announcements" t-as="a" t-key="a.id">
                        <div class="o_xeno_announcement_item">
                            <div class="o_xeno_announcement_head">
                                <p class="o_xeno_announcement_title" t-esc="a.name"/>
                                <span class="o_xeno_announcement_audience" t-esc="a.audienceLabel"/>
                            </div>
                            <div class="o_xeno_announcement_body" t-out="a.body"/>
                            <p class="o_xeno_announcement_date" t-esc="a.timeLabel"/>
                        </div>
                    </t>
                </div>
            </div>

            <!-- Employee Attendance Report -->
            <div class="o_xeno_hr_card o_xeno_dashboard_card">
                <div class="o_xeno_card_head o_xeno_card_head_nav">
                    <div>
                        <h3>Employee Attendance Report</h3>
                        <p class="o_xeno_hr_subtitle">Approved &amp; pending leaves for selected date</p>
                    </div>
                    <div class="o_xeno_day_nav">
                        <button class="btn btn-sm btn-light" t-on-click="prevLeaveDay">
                            <i class="fa fa-chevron-left"/>
                        </button>
                        <span t-esc="leaveDateLabel"/>
                        <button class="btn btn-sm btn-light" t-on-click="nextLeaveDay">
                            <i class="fa fa-chevron-right"/>
                        </button>
                    </div>
                </div>
                <div class="o_xeno_table_wrap">
                    <table class="table o_xeno_report_table" t-if="!state.leaveLoading">
                        <thead>
                            <tr>
                                <th>#</th><th>Name</th><th>Position</th><th>Department</th>
                                <th>Leave Type</th><th>Total Leave Days</th><th>Leave Date</th>
                                <th>Back to Work Date</th><th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr t-if="!state.leaveRecords.length">
                                <td colspan="9" class="o_xeno_table_empty">No approved or pending leaves for this date.</td>
                            </tr>
                            <t t-foreach="state.leaveRecords" t-as="rec" t-key="rec.id">
                                <tr>
                                    <td t-esc="rec_index + 1"/>
                                    <td t-esc="rec.name"/>
                                    <td t-esc="rec.position"/>
                                    <td t-esc="rec.department"/>
                                    <td t-attf-style="color: {{rec.leaveTypeColor}}; font-weight: 600;" t-esc="rec.leaveType"/>
                                    <td t-esc="rec.totalLeaveDays"/>
                                    <td t-esc="rec.leaveDate"/>
                                    <td t-esc="rec.backToWorkDate"/>
                                    <td>
                                        <span t-attf-class="o_xeno_pill {{ rec.approved ? 'o_xeno_pill_approved' : 'o_xeno_pill_pending' }}"
                                              t-esc="rec.approved ? 'Approved' : 'Pending'"/>
                                    </td>
                                </tr>
                            </t>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Dashboard Calendar -->
            <div class="o_xeno_hr_card o_xeno_dashboard_card">
                <div class="o_xeno_card_head o_xeno_card_head_nav">
                    <h3 t-esc="calMonthLabel"/>
                    <div class="o_xeno_day_nav">
                        <button class="btn btn-sm btn-light" t-on-click="prevMonth">
                            <i class="fa fa-chevron-left"/>
                        </button>
                        <button class="btn btn-sm btn-light" t-on-click="nextMonth">
                            <i class="fa fa-chevron-right"/>
                        </button>
                    </div>
                </div>

                <div class="o_xeno_cal_weekdays">
                    <t t-foreach="weekdayLabels" t-as="wd" t-key="wd">
                        <span t-esc="wd"/>
                    </t>
                </div>
                <div class="o_xeno_cal_grid">
                    <t t-foreach="state.calStartPad" t-as="pad" t-key="pad_index">
                        <div class="o_xeno_cal_cell o_xeno_cal_pad"/>
                    </t>
                    <t t-foreach="state.calDays" t-as="day" t-key="day.dateStr">
                        <div t-attf-class="o_xeno_cal_cell {{ day.isWeekend ? 'o_xeno_cal_weekend' : '' }} {{ day.isToday ? 'o_xeno_cal_today' : '' }} {{ day.events.length ? 'o_xeno_cal_has_events' : '' }}"
                             t-on-click="() => this.selectDay(day)">
                            <span class="o_xeno_cal_daynum" t-esc="day.day"/>
                            <div class="o_xeno_cal_events">
                                <t t-foreach="day.visible" t-as="ev" t-key="ev_index">
                                    <div t-attf-class="o_xeno_cal_event {{ ev.cfg.cls }}"
                                         t-attf-title="{{ ev.employeeName ? ev.employeeName + ' — ' + ev.label : ev.label }}">
                                        <t t-esc="ev.employeeName ? ev.employeeName.split(' ')[0] + ' · ' + ev.label : ev.label"/>
                                    </div>
                                </t>
                                <div class="o_xeno_cal_overflow" t-if="day.overflow > 0" t-esc="'+' + day.overflow + ' more'"/>
                            </div>
                        </div>
                    </t>
                </div>

                <div class="o_xeno_cal_legend">
                    <t t-foreach="eventLegend" t-as="ev" t-key="ev.label">
                        <span class="o_xeno_legend_item">
                            <span t-attf-class="o_xeno_legend_dot {{ ev.cls }}"/>
                            <t t-esc="ev.label"/>
                        </span>
                    </t>
                </div>
            </div>

            <!-- Weekly Attendance Chart -->
            <div class="o_xeno_hr_card o_xeno_dashboard_card">
                <div class="o_xeno_card_head">
                    <h3>Weekly Attendance (Last 7 Days)</h3>
                </div>
                <div class="o_xeno_chart">
                    <t t-foreach="state.stats.weekly_attendance" t-as="wd" t-key="wd.date">
                        <div class="o_xeno_chart_col">
                            <div class="o_xeno_chart_bars">
                                <div class="o_xeno_chart_bar o_xeno_bar_present" t-attf-style="height: {{ barHeight(wd.present) }}" t-att-title="wd.present"/>
                                <div class="o_xeno_chart_bar o_xeno_bar_absent" t-attf-style="height: {{ barHeight(wd.absent) }}" t-att-title="wd.absent"/>
                            </div>
                            <span class="o_xeno_chart_label" t-esc="wd.day"/>
                        </div>
                    </t>
                </div>
                <div class="o_xeno_chart_legend">
                    <span class="o_xeno_legend_item"><span class="o_xeno_legend_dot o_xeno_bar_present"/>Present</span>
                    <span class="o_xeno_legend_item"><span class="o_xeno_legend_dot o_xeno_bar_absent"/>Absent</span>
                </div>
            </div>

            <!-- Day detail panel -->
            <div class="o_xeno_day_overlay" t-if="state.selectedDay" t-on-click="closeDayDetail">
                <div class="o_xeno_day_panel" t-on-click.stop="">
                    <div class="o_xeno_day_panel_head">
                        <h4 t-esc="selectedDayLabel"/>
                        <button class="btn-close" t-on-click="closeDayDetail"/>
                    </div>
                    <div class="o_xeno_day_panel_body">
                        <t t-foreach="state.selectedDay.events" t-as="ev" t-key="ev_index">
                            <div t-attf-class="o_xeno_day_event {{ ev.cfg.cls }}">
                                <p class="o_xeno_day_event_label" t-esc="ev.label"/>
                                <p class="o_xeno_day_event_name" t-if="ev.employeeName" t-esc="ev.employeeName"/>
                                <p class="o_xeno_day_event_detail" t-if="ev.detail" t-esc="ev.detail"/>
                            </div>
                        </t>
                    </div>
                </div>
            </div>
        </div>
    </t>
</templates>
